优化

src/views/kpi/assessment/goals/index.vue

@@ -3,14 +3,20 @@
     <div class="goals">
         <SmallNav />
         <div class="goals-content boderAndRadius">
-          <InfoHeader :obj="{
-            name:obj.currentApprovalStaffName,
-            departmentName:obj.departmentName
-          }"/>
+          <div class="goals-content-name">
+            <InfoHeader :obj="{
+                name:obj.currentApprovalStaffName,
+                departmentName:obj.departmentName
+              }"/>
+              <div>
+                <el-button size='small' plain>暂存</el-button>
+                 <el-button size='small' type="primary">提交</el-button>
+              </div>
+          </div>
           <div class="goals-content-tabbar">
             <el-tabs
               :value="activeId"
-              @tab-click="handleClick">
+             >
               <el-tab-pane
               v-for="(i,index) in obj.recortModelDtos"
               :key="i.id"
@@ -38,9 +44,9 @@
                     v-for="(j,indexJ) in handleFilter(i.detailDtos)"
                     :key="indexJ"
                     >
-                      <div style="width:30%">{{j.target}}</div>
+                      <div style="width:30%"><i style="margin-right:6px;"  class="my-handle el-icon-s-operation"></i>{{j.target}}</div>
                       <div style="width:30%">{{j.keyResult}}</div>
-                      <div style="width:30%">{{j.checkWeight * 100}}%</div>
+                      <div style="width:30%">{{ Math.round((j.checkWeight * 100)*1000)/1000}}%</div>
                       <div style="width:10%">
                             <el-button
                           @click="hanidleEdit(j,indexJ,index)"
@@ -59,7 +65,7 @@
                   </draggable>
                   <div style=" padding: 10px;">
                     <!-- <el-button size="mini"  plain>选择指标项</el-button> -->
-                    <el-button  @click="handleAddIndicators(i)" size="mini" plain>增加指标项</el-button>
+                    <el-button  @click="hanidleEdit(i,-1,index)" size="mini" plain>增加指标项</el-button>
                   </div>
                 </div>
               </el-tab-pane>
@@ -85,7 +91,7 @@
                     <el-input size="small" clearable  type="textarea"  v-model="formIndicators.keyResult"></el-input>
                   </el-form-item>
                    <el-form-item label="权重" prop="weight">
-                     <el-input size="small" clearable  v-model="formIndicators.weight">
+                     <el-input size="small" clearable  v-model="formIndicators.checkWeight">
                        <template slot="append">%</template>
                      </el-input>
                   </el-form-item>
@@ -118,7 +124,7 @@ export default {
           message: '请输入考核标准',
           trigger: 'blur' }
         ],
-        weight: [{ required: true,
+        checkWeight: [{ required: true,
           message: '请输入权重大小',
           trigger: 'blur' }
         ]
@@ -130,6 +136,7 @@ export default {
       options1: {
         group: 'names',
         draggable: '.items',
+        handle: '.my-handle',
         scroll: true,
         sort: true, // 内部排序列表
         delay: 0, // 以毫秒为单位定义排序何时开始。
@@ -163,16 +170,25 @@ export default {
         }
         res = res.data
         this.dimensionsList = res
-        console.log('res: ', res)
       } catch (error) {
         this.$message.error(error.msg)
       }
     },
     handleCancelZhibiao () {
-
+      this.showIndicators = false
     },
     handleSubmitZhibiao () {
-
+      this.$refs.formIndicators.validate((v) => {
+        if (v) {
+          if (this.formIndicators.index === -1) {
+            this.obj.recortModelDtos[this.formIndicators.dazhibiaoIndex].detailDtos.push(Object.assign({}, this.formIndicators, {checkWeight: this.formIndicators.checkWeight / 100}))
+            console.log('this.obj.recortModelDtos[this.formIndicators.dazhibiaoIndex].: ', this.obj.recortModelDtos[this.formIndicators.dazhibiaoIndex])
+          } else {
+            this.obj.recortModelDtos[this.formIndicators.dazhibiaoIndex].detailDtos[this.formIndicators.index] = Object.assign({}, this.formIndicators, {checkWeight: this.formIndicators.checkWeight / 100})
+          }
+          this.showIndicators = false
+        }
+      })
     },
     handleAddIndicators (item) {
       console.log(item)
@@ -181,14 +197,25 @@ export default {
     },
     // 编辑
     hanidleEdit (item, index, type) {
-      console.log('type: ', type)
-      console.log('index: ', index)
-      console.log('item: ', item)
+      if (index === -1) {
+        this.formIndicators = {}
+      } else {
+        this.formIndicators = Object.assign({}, item)
+        this.formIndicators.checkWeight = this.formIndicators.checkWeight * 100
+      }
+      this.formIndicators.dazhibiaoIndex = type
+      this.formIndicators.index = index
+      this.formIndicators.type = item.type
+      this.showIndicators = true
     },
     handleDelateWeidu (item, index, type) {
-      console.log('type: ', type)
-      console.log('index: ', index)
-      console.log('item: ', item)
+      if (item.id) {
+        item.isDelete = 1
+        this.$forceUpdate()
+        return
+      }
+      this.obj.recortModelDtos[type].detailDtos = this.obj.recortModelDtos[type].detailDtos.filter(i => i !== item)
+      this.$forceUpdate()
     },
     handleFilter (item) {
       return item ? item.filter(i => !i.isDelete) : []
@@ -199,9 +226,6 @@ export default {
       this.obj = res.data
       this.activeId = String(res.data.recortModelDtos[0].id)
       console.log('res: ', res)
-    },
-    handleClick (tab, event) {
-      console.log(tab, event)
     }
   },
   watch: {}
@@ -212,8 +236,16 @@ export default {
 
 <style lang='less' scoped>
 .goals{
+  .my-handle{
+    cursor: move ;
+  }
   &-content{
     padding: 28px;
+    &-name{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
     &-title{
       margin: 0 0 10PX 0;
       display: flex;