通用规则

src/assets/styles/pages.scss

@@ -1158,3 +1158,46 @@
     display: none;
   }
 }
+// rule-field-edit
+.rule-field-edit {
+  display: flex;
+  align-items: stretch;
+  .field-part-source {
+    width: 200px;
+    border-radius: 10px;
+    border: 1px solid $--color-border-bold;
+  }
+  .field-part-action {
+    width: 120px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .action-body {
+      width: 80px;
+      height: 100px;
+      line-height: 50px;
+      text-align: center;
+    }
+
+    .el-button {
+      margin: 0;
+    }
+  }
+  .field-title {
+    background-color: $--color-background;
+    padding: 10px 15px;
+    line-height: 20px;
+    border-bottom: 1px solid $--color-border-bold;
+  }
+  .field-body {
+    padding: 6px 15px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    height: 246px;
+  }
+  .field-item {
+    padding: 5px 0;
+    line-height: 20px;
+  }
+}

src/modules/base/components/RuleFieldEdit.vue

@@ -1,17 +1,21 @@
 <template>
   <div class="rule-field-edit">
-    <div class="field-part field-part-left">
+    <div class="field-part field-part-source">
       <div class="field-title">
-        <el-checkbox v-model="sourceAll">来源字段</el-checkbox>
+        <el-checkbox v-model="sourceAll" @change="sourceAllChange"
+          >来源字段</el-checkbox
+        >
       </div>
       <div class="field-body">
         <div v-for="item in sourceList" :key="item.code" class="field-item">
-          <el-checkbox v-model="item.checked">{{ item.name }}</el-checkbox>
+          <el-checkbox v-model="item.checked" @change="sourceItemChange">{{
+            item.name
+          }}</el-checkbox>
         </div>
       </div>
     </div>
     <div class="field-part field-part-action">
-      <div>
+      <div class="action-body">
         <el-button
           size="small"
           icon="el-icon-arrow-left"
@@ -19,18 +23,22 @@
         ></el-button>
         <el-button
           size="small"
-          icon="el-icon-arrow-left"
+          icon="el-icon-arrow-right"
           @click="toRight"
         ></el-button>
       </div>
     </div>
-    <div class="field-part field-part-right">
+    <div class="field-part field-part-source">
       <div class="field-title">
-        <el-checkbox v-model="targetAll">目的字段</el-checkbox>
+        <el-checkbox v-model="targetAll" @change="targetAllChange"
+          >目的字段</el-checkbox
+        >
       </div>
       <div class="field-body">
         <div v-for="item in targetList" :key="item.code" class="field-item">
-          <el-checkbox v-model="item.checked">{{ item.name }}</el-checkbox>
+          <el-checkbox v-model="item.checked" @change="targetItemChange">{{
+            item.name
+          }}</el-checkbox>
         </div>
       </div>
     </div>
@@ -45,12 +53,14 @@ export default {
       type: Array,
       default() {
         return [];
+        // [{code:'',name:''}]
       }
     },
     data: {
       type: Array,
       default() {
         return [];
+        // [{code:'',name:''}]
       }
     }
   },
@@ -62,6 +72,14 @@ export default {
       targetList: []
     };
   },
+  watch: {
+    value() {
+      this.initData();
+    },
+    data() {
+      this.initData();
+    }
+  },
   methods: {
     initData() {
       const fields = this.data.map(item => {
@@ -70,11 +88,30 @@ export default {
           checked: false
         };
       });
-      this.sourceList = fields.filter(item => !this.value.includes(item.code));
-      this.targetList = fields.filter(item => this.value.includes(item.code));
+      const valCodes = this.value.map(item => item.code);
+      this.sourceList = fields.filter(item => !valCodes.includes(item.code));
+      this.targetList = this.value.map(item => {
+        return { ...item, checked: false };
+      });
+    },
+    sourceAllChange() {
+      this.sourceList.forEach(item => {
+        item.checked = this.sourceAll;
+      });
+    },
+    targetAllChange() {
+      this.targetList.forEach(item => {
+        item.checked = this.targetAll;
+      });
+    },
+    sourceItemChange() {
+      this.sourceAll = !this.sourceList.some(item => !item.checked);
+    },
+    targetItemChange() {
+      this.targetAll = !this.targetList.some(item => !item.checked);
     },
     toLeft() {
-      const checkedFields = this.targetAll.filter(item => item.checked);
+      const checkedFields = this.targetList.filter(item => item.checked);
       if (!checkedFields.length) {
         this.$message.error("请选择目的字段！");
         return;
@@ -88,6 +125,8 @@ export default {
           };
         })
       );
+      this.targetList = this.targetList.filter(item => !item.checked);
+      this.targetAll = false;
       this.emitChange();
     },
     toRight() {
@@ -105,6 +144,8 @@ export default {
           };
         })
       );
+      this.sourceList = this.sourceList.filter(item => !item.checked);
+      this.sourceAll = false;
       this.emitChange();
     },
     emitChange() {
@@ -114,10 +155,7 @@ export default {
           code: item.code
         };
       });
-      this.$emit(
-        "input",
-        this.targetList.map(item => item.code)
-      );
+      this.$emit("input", targetFields);
       this.$emit("change", targetFields);
     }
   }

src/modules/base/components/RulePackage.vue

@@ -7,10 +7,11 @@
       :rules="rules"
       label-width="170px"
     >
-      <el-form-item prop="selectCodes" label="卷袋贴显示字段：">
+      <el-form-item prop="packageScope" label="卷袋贴显示字段：">
         <rule-field-edit
-          v-model="modalForm.selectCodes"
+          v-model="modalForm.packageScope"
           :data="fieldSources"
+          @change="validateField('packageScope')"
         ></rule-field-edit>
       </el-form-item>
       <el-form-item>
@@ -41,10 +42,10 @@ export default {
       examRule: {},
       fieldSources: [],
       modalForm: {
-        selectCodes: []
+        packageScope: []
       },
       rules: {
-        selectCodes: [
+        packageScope: [
           {
             required: true,
             validator: (rule, value, callback) => {
@@ -60,6 +61,9 @@ export default {
       }
     };
   },
+  mounted() {
+    this.getFields();
+  },
   methods: {
     async getFields() {
       const examRule = await examRuleDetail();
@@ -77,20 +81,20 @@ export default {
           };
         });
 
-      this.modalForm.selectCodes = examRule.packageScope
-        ? JSON.parse(examRule.packageScope).map(item => item.code)
+      this.modalForm.packageScope = examRule.packageScope
+        ? JSON.parse(examRule.packageScope)
         : [];
     },
+    validateField(field) {
+      this.$refs.modalFormComp.validateField(field, () => {});
+    },
     async submit() {
       const valid = await this.$refs.modalFormComp.validate().catch(() => {});
       if (!valid) return;
 
       if (this.isSubmit) return;
       this.isSubmit = true;
-      const packageScope = this.fieldSources.filter(item =>
-        this.modalForm.selectCodes.includes(item.code)
-      );
-      this.examRule.packageScope = JSON.stringify(packageScope);
+      this.examRule.packageScope = JSON.stringify(this.modalForm.packageScope);
       const data = await saveExamRule(this.examRule).catch(() => {});
       this.isSubmit = false;
       if (!data) return;

src/modules/base/components/RuleSign.vue

@@ -7,16 +7,18 @@
       :rules="rules"
       label-width="170px"
     >
-      <el-form-item prop="basicCodes" label="签到表表头字段：">
+      <el-form-item prop="basic" label="签到表表头字段：">
         <rule-field-edit
-          v-model="modalForm.basicCodes"
+          v-model="modalForm.basic"
           :data="basicSources"
+          @change="validateField('basic')"
         ></rule-field-edit>
       </el-form-item>
-      <el-form-item prop="tableCodes" label="签到表考生信息字段：">
+      <el-form-item prop="table" label="签到表考生信息字段：">
         <rule-field-edit
-          v-model="modalForm.tableCodes"
+          v-model="modalForm.table"
           :data="tableSources"
+          @change="validateField('table')"
         ></rule-field-edit>
       </el-form-item>
       <el-form-item>
@@ -48,8 +50,8 @@ export default {
       basicSources: [],
       tableSources: [],
       modalForm: {
-        basicCodes: [],
-        tableCodes: []
+        basic: [],
+        table: []
       },
       stdInfoCodes: [
         "siteNumber",
@@ -59,7 +61,7 @@ export default {
         "ticketNumber"
       ],
       rules: {
-        basicCodes: [
+        basic: [
           {
             required: true,
             validator: (rule, value, callback) => {
@@ -72,7 +74,7 @@ export default {
             trigger: "change"
           }
         ],
-        tableCodes: [
+        table: [
           {
             required: true,
             validator: (rule, value, callback) => {
@@ -88,6 +90,9 @@ export default {
       }
     };
   },
+  mounted() {
+    this.getFields();
+  },
   methods: {
     async getFields() {
       const examRule = await examRuleDetail();
@@ -111,11 +116,12 @@ export default {
         this.stdInfoCodes.includes(item.code)
       );
 
-      const signScope = examRule.signScope
+      this.modalForm = examRule.signScope
         ? JSON.parse(examRule.signScope)
         : { basic: [], table: [] };
-      this.modalForm.basicCodes = signScope.basic.map(item => item.code);
-      this.modalForm.tableCodes = signScope.table.map(item => item.code);
+    },
+    validateField(field) {
+      this.$refs.modalFormComp.validateField(field, () => {});
     },
     async submit() {
       const valid = await this.$refs.modalFormComp.validate().catch(() => {});
@@ -123,16 +129,7 @@ export default {
 
       if (this.isSubmit) return;
       this.isSubmit = true;
-      const baiscFields = this.basicSources.filter(item =>
-        this.modalForm.basicCodes.includes(item.code)
-      );
-      const tableFields = this.tableSources.filter(item =>
-        this.modalForm.tableCodes.includes(item.code)
-      );
-      this.examRule.signScope = JSON.stringify({
-        basic: baiscFields,
-        table: tableFields
-      });
+      this.examRule.signScope = JSON.stringify(this.modalForm);
       const data = await saveExamRule(this.examRule).catch(() => {});
       this.isSubmit = false;
       if (!data) return;

src/modules/base/views/CommonRule.vue

@@ -45,7 +45,11 @@ export default {
   },
   methods: {
     selectMenu(item) {
-      if (item.id !== "1" && !this.$refs.RuleDetail.checkRuleExist()) {
+      if (
+        this.curMenu.id === "1" &&
+        item.id !== "1" &&
+        !this.$refs.RuleDetail.checkRuleExist()
+      ) {
         this.$message.error("请先保存考务规则配置！");
         return;
       }