更改外判

src/components/waipan/waipan.vue

@@ -14,20 +14,15 @@
         <div class="staffs">
           <div style="width: 192px;font-weight: 700;margin-bottom:20px">选择员工</div>
           <ul>
-            <li
-              class="staff_item"
-              v-for="(item, i) in staff"
-              @click="selected(item)"
-              :key="i"
-            >
+            <li class="staff_item" v-for="(item, i) in staff" @click="selected(item)" :key="i">
               <span>{{ item }}</span>
             </li>
           </ul>
         </div>
         <div class="wai">
           <div>
-            <span class='wai_title'>{{ staff_selected }}外判工资</span>
-            <div  class="wai_info" v-if="staff_selected == ''">请先选择员工</div>
+            <span class="wai_title">{{ staff_selected }}外判工资</span>
+            <div class="wai_info" v-if="staff_selected == ''">请先选择员工</div>
             <el-table
               v-else
               border
@@ -49,87 +44,85 @@
                   <span class="star">*</span>
                 </template>
 
-              <template slot-scope="scope">
-                <el-date-picker
-                  format="yyyy-MM-dd" value-format="yyyy-MM-dd"
-                  v-model="scope.row.date"
-                  type="date"
-                  :ref="scope.column.property"
-                  @blur="alterData(scope.row, scope.column)"
-                  size="mini"
-                  placeholder="请选择日期"
-                >
-                </el-date-picker>
-                <!-- <DatePicker v-model="scope.row.date" size="small" type="date" placeholder="选择日期"></DatePicker> -->
-                <!-- <el-input
+                <template slot-scope="scope">
+                  <el-date-picker
+                    format="yyyy-MM-dd"
+                    value-format="yyyy-MM-dd"
+                    v-model="scope.row.date"
+                    type="date"
+                    :ref="scope.column.property"
+                    @blur="alterData(scope.row, scope.column)"
+                    size="mini"
+                    placeholder="请选择日期"
+                  ></el-date-picker>
+                  <!-- <DatePicker v-model="scope.row.date" size="small" type="date" placeholder="选择日期"></DatePicker> -->
+                  <!-- <el-input
                   placeholder="请选择日期"
                   :ref="scope.column.property"
                   v-model="scope.row.date"
                   @blur="alterData(scope.row, scope.column)"
                   style="width: 100px"
-                ></el-input> -->
-              </template>
-            </el-table-column>
-            <el-table-column label="项目编号" property="project" width="127">
-              <template slot="header" slot-scope="scope">
-                <span>项目编号</span>
-                <span class="star">*</span>
-              </template>
+                  ></el-input>-->
+                </template>
+              </el-table-column>
+              <el-table-column label="项目编号" property="project" width="127">
+                <template slot="header" slot-scope="scope">
+                  <span>项目编号</span>
+                  <span class="star">*</span>
+                </template>
 
-              <template slot-scope="scope">
-                <el-input
-                  placeholder="请输入编号"
-                  :ref="scope.column.property"
-                  v-model="scope.row.project"
-                  @input="slect_pro(scope.row)"
-                ></el-input>
-                <Projectlist
-                  v-if="showTable && scope.row.id == current_idx"
-                  :row="scope.row.id"
-                  class="tableShow"
-                  @quickEnter="quickInput"
-                ></Projectlist>
-              </template>
-            </el-table-column>
-            <el-table-column
-              label="项目"
-              property="projectname"
-              width="298"
-              align="center"
-            >
-            </el-table-column>
-            <el-table-column label="金额" property="money" width="97">
-              <template slot="header" slot-scope="scope">
-                <span>金额</span>
-                <span class="star">*</span>
-              </template>
-              <template slot-scope="scope">
-                <el-input style="float:right"
-                  v-if="moneyedit && scope.row.id == current_idx"                  
-                  :ref="scope.column.property"
-                  v-model="scope.row.money"
-                  @blur="alterData(scope.row)"
-                ></el-input>
-                <span style="float:right" v-else>{{ scope.row.money }}</span>
-              </template>
-            </el-table-column>
+                <template slot-scope="scope">
+                  <el-input
+                    placeholder="请输入编号"
+                    :ref="scope.column.property"
+                    v-model="scope.row.project"
+                    @input="slect_pro(scope.row)"
+                  ></el-input>
+                  <Projectlist
+                    v-if="showTable && scope.row.id == current_idx"
+                    :row="scope.row.id"
+                    class="tableShow"
+                    @quickEnter="quickInput"
+                  ></Projectlist>
+                </template>
+              </el-table-column>
+              <el-table-column label="项目" property="projectname" width="298" align="center"></el-table-column>
+              <el-table-column label="金额" property="money" width="97">
+                <template slot="header" slot-scope="scope">
+                  <span>金额</span>
+                  <span class="star">*</span>
+                </template>
+                <template slot-scope="scope">
+                  <el-input
+                    style="float:right"
+                    v-if="moneyedit && scope.row.id == current_idx"
+                    :ref="scope.column.property"
+                    v-model="scope.row.money"
+                    @blur="alterData(scope.row)"
+                  ></el-input>
+                  <span style="float:right" v-else>{{ scope.row.money }}</span>
+                </template>
+              </el-table-column>
             </el-table>
-            <div class="sum" v-if="staff_selected != ''" >{{allmoney}}</div>
+            <div class="sum" v-if="staff_selected != ''">{{allmoney}}</div>
+          </div>
+          <div v-if="staff_selected != ''" style="margin-top: 30px; font-size: 24px">
+            <!-- 添加按钮 -->
+            <div>
+              <span class="svg-container" @click="addnew">
+                <svg-icon class="svg_c" icon-class="add" />
+              </span>
+            </div>
+            <div class="dels" v-if="items.length>1">
+              <div style="height:40px"  v-for="(item,index) in items " :key="index" :index="index" class="svg-container" @click="deleteprj(item)">
+                <svg-icon class="svg_c" icon-class="dec2" />
+              </div>
+            </div>
           </div>
-        <div
-          v-if="staff_selected != ''"
-          style="margin-top: 30px; font-size: 24px"
-        >
-          <!-- 添加按钮 -->
-          <span slot="reference" class="svg-container" @click="addnew">
-            <svg-icon icon-class="add" />
-          </span>
         </div>
-        
-      </div>
       </div>
-      <span slot="footer" class="dialog-footer" >
-        <el-button  size="mini" @click="dialog = false" type="primary">取消</el-button>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="dialog = false" type="primary">取消</el-button>
         <el-button style="margin-right:30px" size="mini" @click="submit" type="primary">保存</el-button>
       </span>
     </el-dialog>
@@ -141,8 +134,12 @@ import { mapActions, mapState } from "vuex";
 export default {
   name: "WaianInput",
   props: {
-    optype:{
-      
+    optype: {
+      default: 'add'
+    },
+    data: {
+      type: Object,
+      default: null
     }
   },
   components: {
@@ -165,12 +162,12 @@ export default {
   created() {
     // this.record();
   },
-  computed:{
-    allmoney(){
-      let sum = 0.00      
+  computed: {
+    allmoney() {
+      let sum = 0.00
       this.items.forEach(element => {
         let ee = parseFloat(element.money)
-        if(!isNaN(ee)){
+        if (!isNaN(ee)) {
           sum += parseFloat(element.money)
         }
       });
@@ -178,7 +175,7 @@ export default {
       return sum.toFixed(2)
     }
   },
-  dateChange() {},
+  dateChange() { },
   methods: {
     // ...mapActions({ 'gongzi': ["setWaipan"] }),
     ...mapActions(["addWaipan"]),
@@ -206,11 +203,25 @@ export default {
 
       this.showTable = false;
     },
+  
+    deleteprj(item){      
+      console.log('del',item,this.items)
+      let idx = this.items.findIndex((element) => {
+        return element.id == item.id
+      })
+      console.log('del',idx,item)
+      if(idx >=0){
+        this.items.splice(idx, 1)
+      }
+    },
 
     addnew() {
       const item = { id: 0, date: "", project: "", projectname: "", money: "" };
-      let id = this.items.length;
+      
+      let id = Math.max.apply(Math,this.items.map(item => { return item.id }))+1
+
       item.id = id;
+      console.log(item)
       this.items.push(item);
     },
     modechg(row, val) {
@@ -241,25 +252,25 @@ export default {
       });
     },
     alterData(item) {
-      this.moneyedit = false;      
+      this.moneyedit = false;
       this.refreshTable();
 
       console.log(item)
 
-      let sum = 0.00      
-      let idx = this.items.findIndex((element)=>{
-         element.id== item.id
+      let sum = 0.00
+      let idx = this.items.findIndex((element) => {
+        return element.id == item.id
       })
-      
-        let ee = parseFloat(item.money)
-        let newitem = JSON.parse(JSON.stringify(item))
-        newitem.money = isNaN(ee)?sum.toFixed(2):ee.toFixed(2)
-        this.items.splice(idx,1,newitem)
-      console.log('item',this.items)
-      
+
+      let ee = parseFloat(item.money)
+      let newitem = JSON.parse(JSON.stringify(item))
+      newitem.money = isNaN(ee) ? sum.toFixed(2) : ee.toFixed(2)
+      this.items.splice(idx, 1, newitem)
+      console.log('item', this.items)
+
+
 
 
-     
     },
 
     refreshTable() {
@@ -282,17 +293,16 @@ export default {
 
 <style lang="scss" scoped>
 /* 引入table样式 */
-@import url("./waipan.scss");
+@import url('./waipan.scss');
 .container {
-  
   display: flex;
   /* justify-content: flex-end; */
 }
 ::v-deep .el-dialog__header {
   height: 50px;
   padding: 14px 5px;
-  border-bottom: 1px solid rgba(204,204,204, .5);
-  .el-dialog__headerbtn{
+  border-bottom: 1px solid rgba(204, 204, 204, 0.5);
+  .el-dialog__headerbtn {
     top: 15px;
     right: 10px;
   }
@@ -300,12 +310,12 @@ export default {
 ::v-deep .el-dialog__footer {
   height: 48px;
   padding: 10px 5px;
-  border-top: 1px solid rgba(204,204,204, .5);
+  border-top: 1px solid rgba(204, 204, 204, 0.5);
 }
 
-::v-deep .el-button--primary{
+::v-deep .el-button--primary {
   background-color: rgb(22, 155, 213);
-    border-color: rgb(22, 155, 213);
+  border-color: rgb(22, 155, 213);
 }
 
 ::v-deep .el-dialog__body {
@@ -337,27 +347,27 @@ export default {
   }
 }
 ::v-deep .el-date-picker {
-    width: 600px;
+  width: 600px;
 }
 ::v-deep .el-date-picker .el-picker-panel__content {
-    width: 600px;
+  width: 600px;
 }
 ::v-deep .el-picker-panel__icon-btn {
-    font-size: 18px;
+  font-size: 18px;
 }
-::v-deep .el-table .cell{
-    padding: 0 !important;
+::v-deep .el-table .cell {
+  padding: 0 !important;
 }
 
 // ::v-deep .cell:nth-child(3){
-    
+
 //      text-align: right;
-    
+
 // }
 
-::v-deep .el-input__inner{
+::v-deep .el-input__inner {
   padding: 0 25px;
-  &:focus{
+  &:focus {
     background-color: rgb(255, 255, 228);
   }
 }
@@ -371,30 +381,30 @@ export default {
   height: 35px;
   text-align: center;
   line-height: 35px;
-  &:hover{
+  &:hover {
     background-color: rgb(122, 208, 247);
   }
 }
-.wai{
+.wai {
   width: calc(100% - 192px);
   padding: 30px 40px 0;
   display: flex;
-  .wai_title{
+  .wai_title {
     width: 100%;
-  font-weight: 700;
-  display:inline-block;
-  text-align: center;
-  padding: 0 0 10px 0;
+    font-weight: 700;
+    display: inline-block;
+    text-align: center;
+    padding: 0 0 10px 0;
   }
-  .wai_info{
-    width: 100%; 
-  display:inline-block;
-  text-align: center;
-  padding: 0 0 10px 0;
+  .wai_info {
+    width: 100%;
+    display: inline-block;
+    text-align: center;
+    padding: 0 0 10px 0;
   }
-  .sum{
+  .sum {
     float: right;
-    margin:5px 10px 0;
+    margin: 5px 10px 0;
   }
 }
 
@@ -410,6 +420,15 @@ export default {
   min-height: 100px;
   background: #fff;
 }
+.dels{
+  margin-top: 9px;
+  display: flex;
+  flex-flow: column;
+}
+
+.svg_c{
+  fill: #222;
+}
 
 .svg-container {
   padding-left: 10px;

src/icons/svg/add.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645667773477" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3614" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="250"><defs><style type="text/css"></style></defs><path d="M512 0c-285.257143 0-512 226.742857-512 512s226.742857 512 512 512 512-226.742857 512-512-226.742857-512-512-512z m0 950.857143c-241.371429 0-438.857143-197.485714-438.857143-438.857143s197.485714-438.857143 438.857143-438.857143 438.857143 197.485714 438.857143 438.857143-197.485714 438.857143-438.857143 438.857143z" p-id="3615" fill="#currentColor"></path><path d="M731.428571 475.428571h-182.857142v-182.857142c0-21.942857-14.628571-36.571429-36.571429-36.571429s-36.571429 14.628571-36.571429 36.571429v182.857142h-182.857142c-21.942857 0-36.571429 14.628571-36.571429 36.571429s14.628571 36.571429 36.571429 36.571429h182.857142v182.857142c0 21.942857 14.628571 36.571429 36.571429 36.571429s36.571429-14.628571 36.571429-36.571429v-182.857142h182.857142c21.942857 0 36.571429-14.628571 36.571429-36.571429s-14.628571-36.571429-36.571429-36.571429z" p-id="3616" fill="#ffffff"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645667773477" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3614" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="250"><defs><style type="text/css"></style></defs><path d="M512 0c-285.257143 0-512 226.742857-512 512s226.742857 512 512 512 512-226.742857 512-512-226.742857-512-512-512z m0 950.857143c-241.371429 0-438.857143-197.485714-438.857143-438.857143s197.485714-438.857143 438.857143-438.857143 438.857143 197.485714 438.857143 438.857143-197.485714 438.857143-438.857143 438.857143z" p-id="3615" fill="#currentColor"></path><path d="M731.428571 475.428571h-182.857142v-182.857142c0-21.942857-14.628571-36.571429-36.571429-36.571429s-36.571429 14.628571-36.571429 36.571429v182.857142h-182.857142c-21.942857 0-36.571429 14.628571-36.571429 36.571429s14.628571 36.571429 36.571429 36.571429h182.857142v182.857142c0 21.942857 14.628571 36.571429 36.571429 36.571429s36.571429-14.628571 36.571429-36.571429v-182.857142h182.857142c21.942857 0 36.571429-14.628571 36.571429-36.571429s-14.628571-36.571429-36.571429-36.571429z" p-id="3616" fill="#currentColor"></path></svg>

src/icons/svg/dec.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645668468144" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4683" xmlns:xlink="http://www.w3.org/1999/xlink" width="250.48828125" height="250"><defs><style type="text/css"></style></defs><path d="M511.602721 1023.001027a511.474051 511.474051 0 1 1 360.629164-148.84694 509.476105 509.476105 0 0 1-360.629164 149.845913z m0-941.032335c-109.887003 0-220.772979 41.956856-304.686691 125.870567-167.827423 168.826396-167.827423 441.545958 0 609.373381s440.546985 167.827423 609.373381 0c167.827423-167.827423 167.827423-440.546985 0-609.373381-83.913711-82.914739-194.799687-124.871594-304.68669-124.871595z m332.657927 763.215185z" fill="" p-id="4684"></path><path d="M780.326392 552.484859H241.880077a39.95891 39.95891 0 0 1 0-79.91782h538.446315a39.95891 39.95891 0 0 1 0 79.91782z" fill="" p-id="4685"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645668468144" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4683" xmlns:xlink="http://www.w3.org/1999/xlink" width="250.48828125" height="250"><defs><style type="text/css"></style></defs><path d="M511.602721 1023.001027a511.474051 511.474051 0 1 1 360.629164-148.84694 509.476105 509.476105 0 0 1-360.629164 149.845913z m0-941.032335c-109.887003 0-220.772979 41.956856-304.686691 125.870567-167.827423 168.826396-167.827423 441.545958 0 609.373381s440.546985 167.827423 609.373381 0c167.827423-167.827423 167.827423-440.546985 0-609.373381-83.913711-82.914739-194.799687-124.871594-304.68669-124.871595z m332.657927 763.215185z" fill="currentColor" p-id="4684"></path><path d="M780.326392 552.484859H241.880077a39.95891 39.95891 0 0 1 0-79.91782h538.446315a39.95891 39.95891 0 0 1 0 79.91782z" fill="currentColor" p-id="4685"></path></svg>