下拉选择框为多选时,关联选项设置编辑规则

src/components/DesignForm/formControlPropertiNew.vue

@@ -1131,12 +1131,30 @@ const controlChange = (obj: any, val: any) => {
   // select多选属性，
   switch (obj.eventName) {
     case "selectMultiple":
+      //
       if (val) {
         // 多选，将值改为数组
         controlData.value.control.modelValue = [];
+        controlData.value.control.glxxsz = [];
       } else {
         // 单选
         controlData.value.control.modelValue = "";
+        for (var i = 0; i < controlData.value.options.length; i++) {
+              if (controlData.value.control.glxxsz[i] === undefined) {
+                //新增了某个option
+                controlData.value.control.glxxsz.push({
+                  conditionField: controlData.value.name,
+                  optionLabel: controlData.value.options[i].label,
+                  optionValue: controlData.value.options[i].value,
+                  tableIndex: i,
+                  id: uuidv4().replaceAll("-", "").toString(),
+                });
+              } else {
+                //修改了某个option
+                controlData.value.control.glxxsz[i].optionLabel = controlData.value.options[i].label;
+                controlData.value.control.glxxsz[i].optionValue = controlData.value.options[i].value;
+              }
+            }
       }
       break;
     case "tableColumn1":
@@ -2010,19 +2028,21 @@ watch(
     //实现关联表单设置可选字段中没有当前字段效果    start
     // console.log(controlData.value.name)
     resDataForGlxxszExceptself1 = JSON.parse(JSON.stringify(resDataForGlxxszExceptself));
-    // console.log(resDataForGlxxszExceptself1)
+    console.log(resDataForGlxxszExceptself1)
 
     for (let i = 0; i < resDataForGlxxszExceptself1.length; i++) {
       let strArr: [string] = resDataForGlxxszExceptself1[i].id.split(":");
-      // console.log(strArr)
+       console.log(strArr)
       let str = strArr[strArr.length - 1];
-      // console.log(str)
+       console.log(str)
+       console.log(newVal)
       if (str == newVal) {
+        
         resDataForGlxxszExceptself1.splice(i, 1); // 将使后面的元素依次前移，数组长度减1
         i--; // 如果不减，将漏掉一个元素
       }
     }
-    // console.log(resDataForGlxxszExceptself1)
+     console.log(resDataForGlxxszExceptself1)
     if (
       getAssociatedFormsCurrentFieldTreeData &&
       getAssociatedFormsCurrentFieldTreeData.treeAttrs &&
@@ -3317,7 +3337,7 @@ watch(
   (changedOptions: any) => {
     // console.log("radio,select添加选项时同步配置选项",changedOptions)
     // console.log("radio,select添加选项时同步配置选项------>",controlData.value)
-    if (controlData.value.type === "radio" || controlData.value.type === "select") {
+    if (controlData.value.type === "radio" || controlData.value.type === "select" && (!controlData.value.multiple)) {
       if (controlData.value.config.optionsType == 0) {
         if (changedOptions.length === 0) {
           //删没了option
@@ -3369,6 +3389,17 @@ function createRowForGlxxsz() {
     });
   }
 }
+function createRowForGlxxsz1() {
+  if (controlData.value.config.optionsType == 0) {
+    controlData.value.control.glxxsz.push({
+      conditionField: controlData.value.name,
+      selectedOptions: [],
+      showFields: [],
+      id: uuidv4().replaceAll("-", "").toString(),
+    });
+  }
+}
+
 
 function deleteRowForGlxxsz(row: { id: any }) {
   if (controlData.value.config.optionsType == 0) {
@@ -3377,6 +3408,14 @@ function deleteRowForGlxxsz(row: { id: any }) {
     );
   }
 }
+
+function deleteRowForGlxxsz1(row: { id: any }) {
+  if (controlData.value.config.optionsType == 0) {
+    controlData.value.control.glxxsz = controlData.value.control.glxxsz.filter(
+      (item: { id: any }) => item.id != row.id
+    );
+  }
+}
 /*  */
 
 const optionsValue3SettingDialogOpenFlag = ref(false);
@@ -5945,7 +5984,7 @@ const updataBase = (val: any) => {
     <template
       v-if="
         (controlData.type == 'radio' || controlData.type == 'select') &&
-        controlData.config.optionsType == 0
+        controlData.config.optionsType == 0 && (!controlData.control.multiple)
       "
     >
       <el-table
@@ -5983,6 +6022,65 @@ const updataBase = (val: any) => {
         </el-table-column>
       </el-table>
     </template>
+
+
+
+    <template 
+      v-if="controlData.type == 'select'&&
+        controlData.config.optionsType == 0 && controlData.control.multiple">
+      <el-table
+        :data="controlData.control.glxxsz"
+        stripe
+        border
+        style="width: 100%; min-height: 50px; max-height: 500px; overflow-y: auto"
+        :cell-style="{ height: '55px', paddingLeft: '15px' }"
+        :header-cell-style="{ background: '#F3F4F7', color: '#555' }"
+      >
+        <el-table-column prop="link" label="当选项为" width="300">
+          <template #default="optionScope">
+            <el-tree-select
+              v-model="
+                controlData.control.glxxsz[optionScope.$index].selectedOptions
+              "
+              style="width: 100%"
+              :data="controlData.options"
+              multiple
+            />
+          </template>
+        </el-table-column>
+
+        <el-table-column fixed="right" label="显示以下组件">
+          <template #default="fieldScope">
+            <el-tree-select
+              v-model="
+                controlData.control.glxxsz[fieldScope.$index].showFields
+              "
+              style="width: 100%"
+              :data="associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf[0].children"
+              multiple
+            />
+          </template>
+        </el-table-column>
+
+        <el-table-column fixed="right" label="操作" width="130">
+          <template #default="operateScope">
+            <el-button
+              type="danger"
+              :icon="Delete"
+              circle
+              @click="deleteRowForGlxxsz1(operateScope.row)"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-button plain type="success" style="margin-top: 10px" @click="createRowForGlxxsz1"
+        >新增</el-button
+      >
+    </template>
+
+
+
+
     <template #footer>
       <div class="dialog-footer">
         <el-button type="primary" @click="handleDetermineGlxxszDialog"> 确定 </el-button>