字段对应效果

src/views/system/fieldCorresManage/module/data.json

@@ -7,7 +7,7 @@
   {
     "id": 2,
     "label": "字段B",
-    "isType": 1
+    "isType": 0
   },
   {
     "id": 3,

src/views/system/fieldCorresManage/module/form.vue

@@ -21,8 +21,8 @@
             <span>文件库分类A</span>
           </div>
           <div class="field-list">
-            <div v-for="(i,index) in targetData.length" :key="index" class="field-item">
-              <el-select v-if="isShow[index]" v-model="sourceValue[index]" placeholder="请选择字段" @change="(val)=>selectFiled(val,index)">
+            <div v-for="(item, index) in selectStatus" :key="index" class="field-item">
+              <el-select v-if="item.mode" :key="index" v-model="item.value" @change="selectChange(index)">
                 <el-option
                   v-for="v in options"
                   :key="v.value"
@@ -30,8 +30,10 @@
                   :value="v.value"
                 />
               </el-select>
-              <p v-else @click="modifyFiled(index)">{{ sourceValue[index] }}</p>
-              <div class="field-state"><span class="is-select">显示</span></div>
+              <p v-if="!item.mode" @click="textMode(index)">
+                {{ item.value }}
+              </p>
+              <div v-if="!item.mode" class="field-state"><span :class=" item.isType === 1 ? 'is-select' : 'is-hide'">{{ item.isType === 1 ? '显示': '隐藏' }}</span></div>
             </div>
           </div>
         </div>
@@ -43,7 +45,7 @@
           <div class="field-list">
             <div v-for="(item,index) in targetData" :key="index" class="field-item">
               <p>{{ item.label }}</p>
-              <div class="field-state"><span class="is-select">{{ item.isType === 1 ? '显示': '隐藏' }}</span></div>
+              <div class="field-state"><span :class=" item.isType === 1 ? 'is-select' : 'is-hide'">{{ item.isType === 1 ? '显示': '隐藏' }}</span></div>
             </div>
           </div>
         </div>
@@ -71,28 +73,13 @@ export default {
         id: null,
         name: 'ddddd'
       },
-      options: [{
-        value: '字段A',
-        label: '字段A'
-      }, {
-        value: '字段B',
-        label: '字段B'
-      }, {
-        value: '字段C',
-        label: '字段C'
-      }, {
-        value: '字段D',
-        label: '字段D'
-      }, {
-        value: '字段E',
-        label: '字段E'
-      }],
-      sourceValue: [],
-      textValue: [],
-      targetData: [],
-      isModify: [],
-      isNum: null,
-      isShow: [],
+      options: [
+        { label: '字段A', value: '字段A', isType: 1 },
+        { label: '字段B', value: '字段B', isType: 1 },
+        { label: '字段C', value: '字段C', isType: 0 },
+        { label: '字段D', value: '字段D', isType: 1 }
+      ],
+      selectStatus: [],
       rules: {
         name: [
           { required: true, message: '规则名称不可为空', trigger: 'blur' }
@@ -103,18 +90,26 @@ export default {
   created() {
     this.targetData = fieldData
     this.targetData.forEach((item, index) => {
-      this.isModify[index] = false
-      this.sourceValue[index] = ''
-      this.textValue[index] = ''
-      this.isShow[index] = true
+      this.selectStatus.push({ mode: true, value: '' })
     })
   },
   mounted() {
   },
   methods: {
+    selectChange(index) {
+      this.options.forEach((item) => {
+        if (item.value === this.selectStatus[index].value) {
+          this.selectStatus.splice(index, 1, { mode: false, value: this.selectStatus[index].value, isType: item.isType })
+        }
+      })
+    },
+    textMode(index) {
+      this.selectStatus.splice(index, 1, { mode: true, value: this.selectStatus[index].value })
+    },
     doSubmit() {
       this.$refs['cuForm'].validate((valid) => {
         console.log(this.cuform)
+        console.log(this.selectStatus)
         if (valid) {
           this.loading = true
         } else {
@@ -124,30 +119,6 @@ export default {
     },
     handleClose() {
       this.corresVisible = false
-    },
-    selectFiled(val, index) {
-      this.sourceValue[index] = val
-      this.isModify[index] = true
-      this.textValue[index] = val
-      this.isShow.forEach((item, i) => {
-        if (this.sourceValue[i] !== '' && this.isModify[i]) {
-          this.isShow[i] = false
-        }
-      })
-    },
-    modifyFiled(i) {
-      this.isModify[i] = false
-      this.sourceValue[i] = ''
-
-      this.isShow.forEach((item, index) => {
-        if (this.sourceValue[index] === '' && this.isModify[index] === false) {
-          this.isShow[i] = true
-        }
-      })
-      console.log(this.isModify)
-      console.log('sourceValue', this.sourceValue)
-      console.log('textValue', this.textValue)
-      console.log(this.isModify[i])
     }
   }
 }
@@ -214,7 +185,8 @@ export default {
           text-align: center;
         }
         ::v-deep .el-select{
-          width: 306px;
+          width: 302px;
+          border-right: 1px solid #E6E8ED;
           .el-input__inner{
             height: 38px;
             line-height: 38px;
@@ -225,17 +197,24 @@ export default {
           width: 88px;
           text-align: center;
           border-left: 1px solid #E6E8ED;
-          span.is-select{
+          span{
             display: inline-block;
             width: 48px;
             height: 22px;
             line-height: 22px;
             font-size: 12px;
-            color: #0348F3;
             border-radius: 3px;
+          }
+          span.is-select{
+            color: #0348F3;
             background-color: #EEF5FE;
             border: 1px solid #90B0F9;
           }
+          span.is-hide{
+            color: #A6ADB6;
+            background-color: #F3F5F9;
+            border: 1px solid #E6E8ED;
+          }
         }
       }
     }