Quellcode durchsuchen

Bug(4156)是否启用默认显示不出来,暂时自己写多选框,反应比较慢。。。

zhangxc vor 5 Jahren
Ursprung
Commit
6082aac313
1 geänderte Dateien mit 74 neuen und 4 gelöschten Zeilen
  1. 74 4
      src/components/recordInput/ManageItemBatch.vue

+ 74 - 4
src/components/recordInput/ManageItemBatch.vue

@@ -109,7 +109,8 @@
                                     width="120"
                                     show-overflow-tooltip>
                                     <template slot-scope="scope">
-                                        <el-checkbox v-model="scope.row.isUsed" :checked="scope.row.isUsed == '1'" :disabled="getIsUsed(scope.row)" true-label="1" false-label="0"></el-checkbox>
+                                        <span class="checkUsed" :class="{'active': scope.row.isUsed == 1}" @click="checkUsed(scope.row,index,scope.$index)"></span>
+                                        <!-- <el-checkbox v-model="scope.row.isUsed" :value ="scope.row.isUsed" :disabled="getIsUsed(scope.row)" true-label="1" false-label="0">{{scope.row.isUsed}}</el-checkbox> -->
                                       </template>
                                   </el-table-column>
                                   </el-table>
@@ -201,6 +202,18 @@
         })
         
       },
+      checkUsed(row,index,ii){
+        let isUsed = this.caseLIst[index].qcCasesEntry[ii].isUsed
+        const caseLIstCopy = JSON.parse(JSON.stringify(this.caseLIst))
+        if(isUsed == 1){
+          caseLIstCopy[index].qcCasesEntry[ii].isUsed = 0
+        }else{
+          caseLIstCopy[index].qcCasesEntry[ii].isUsed = 1
+        }
+        this.caseLIst = caseLIstCopy
+        const values = Object.values(this.checkAllMap)
+        this.toggleSelection(values)
+      },
       handleSelectionChange(val,remark) {
         this.checkAllMap[remark] = val;
       },
@@ -225,9 +238,14 @@
         return api.getRecordInpModule({}).then((res)=>{
           const result = res.data;
           if(result.code==0){
-            let  caseLIst = result.data
-          
-            this.caseLIst = caseLIst  //提醒每项加分值和备注
+            let  caseLIstCopy = result.data
+            for(let i = 0; i < caseLIstCopy.length; i++){
+              for(let j = 0; j < caseLIstCopy[i].qcCasesEntry.length; j++){
+                caseLIstCopy[i].qcCasesEntry[j].isUsed = 0
+              }
+            }
+
+            this.caseLIst = caseLIstCopy  //提醒每项加分值和备注
 
              const checkAllMap = {}
             for(let i = 0; i < this.caseLIst.length; i++){
@@ -456,6 +474,58 @@
         .oper{
             text-align: right;
         }
+        .checkUsed{
+          cursor: pointer;
+          position: relative;
+          // color: #fff;
+          display: inline-block;
+          width: 14px;
+          height: 14px;
+          background:  #fff;
+          border: 1px solid #333;
+          box-sizing: border-box;
+          border-radius: 2px;
+          -webkit-transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
+          transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
+        }
+        .active{
+          position: relative;
+          // color: #fff;
+          display: inline-block;
+          width: 14px;
+          height: 14px;
+          background:  #48C5D7;
+          border: 1px solid #333;
+          box-sizing: border-box;
+          border-radius: 2px;
+          -webkit-transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
+          transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
+        }
+       
+        .active::after{
+            -webkit-box-sizing: content-box;
+            box-sizing: content-box;
+            content: "";
+            border: 1px solid #FFF;
+            border-left: 0;
+            border-top: 0;
+            height: 7px;
+            left: 4px;
+            position: absolute;
+            top: 1px;
+            -webkit-transform: rotate(45deg) scaleY(0);
+            transform: rotate(45deg) scaleY(0);
+            width: 3px;
+            -webkit-transition: -webkit-transform .15s ease-in .05s;
+            transition: -webkit-transform .15s ease-in .05s;
+            transition: transform .15s ease-in .05s;
+            transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
+            transition: transform .15s ease-in .05s,-webkit-transform .15s ease-in .05s;
+            -webkit-transform-origin: center;
+            transform-origin: center;
+            -webkit-transform: rotate(45deg) scaleY(1);
+            transform: rotate(45deg) scaleY(1);
+        }
         /deep/.el-table__row td:nth-child(3){
           text-align: left;
         }