mooho-base-admin-plus 2.3.7 → 2.3.8

package/src/components/view/view-form-draggable.vue

@@ -188,15 +188,36 @@
                             </template> -->
               <template v-else-if="column.controlType === 'ComboSelect'">
                 <Select
-                  :model-value="parseData(data, column.code)"
+                  :ref="'control_' + column.code"
+                  :model-value="parseComboData(data, column)"
                   @update:model-value="$event => setData(data, column.code, $event)"
                   :disabled="column.isReadonly"
-                  clearable
+                  :clearable="true"
                   filterable
+                  remote
+                  :remote-method="search => loadOption(data, column, search)"
                   :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
                   :placeholder="column.description"
                   :transfer="true"
-                  @on-change="onDataChange(column)"
+                  @on-change="selected => onSelectDataChange(column, selected)"
+                >
+                  <Option v-for="item in getDataSource(data, column)" :key="item.id" :value="item.id">{{ item.name }}</Option>
+                </Select>
+              </template>
+              <template v-else-if="column.controlType === 'MultiComboSelect'">
+                <Select
+                  :ref="'control_' + column.code"
+                  :model-value="parseMultiComboData(data, column)"
+                  @update:model-value="$event => setArrayData(data, column.code, $event)"
+                  :clearable="true"
+                  :multiple="true"
+                  filterable
+                  remote
+                  :remote-method="search => loadOption(data, column, search)"
+                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
+                  :placeholder="column.description"
+                  :transfer="true"
+                  @on-change="selected => onSelectDataChange(column, selected)"
                 >
                   <Option v-for="item in getDataSource(data, column)" :key="item.id" :value="item.id">{{ item.name }}</Option>
                 </Select>
@@ -486,7 +507,7 @@
         if (!(column.dataType || '').trim()) {
           return null;
         }
-        if (column.dataType.indexOf('Enum:') === 0) {
+        if (column.dataType.startsWith('Enum:')) {
           return 'string';
         }
 
@@ -627,18 +648,31 @@
       },
       // 填充数据源
       async fillDataSource(data, column, param) {
+        let value;
+        if (column.controlType === 'TreeSelect' || column.controlType === 'MultiTreeSelect') {
+          // 树选择框重新加载数据源时，需要先清空数据源，否则无法直接点击清空按钮清除数据。
+          value = this.parseTreeData(data, column.code);
+          column.dataSource = null;
+        }
+
+        if (column.controlType === 'ComboSelect' || column.controlType === 'MultiComboSelect') {
+          param.per = 20;
+        }
+
         // 参数完整，查询数据
+        this.disableLoader();
         let res;
         if (column.isSourceCustom) {
           res = await customModelApi.query(column.source, param);
         } else {
           res = await modelApi.query(column.source, param);
         }
+        this.enableLoader();
 
         column.rawData = res.data;
 
         if (column.controlType === 'TreeSelect' || column.controlType === 'MultiTreeSelect') {
-          let data = res.data.map(item => {
+          let treeData = res.data.map(item => {
             return {
               id: !(column.sourceDataCode || '').trim() ? item.id : this.parseData(item, column.sourceDataCode),
               name: this.parseData(item, column.sourceDisplayCode),
@@ -646,7 +680,8 @@
             };
           });
 
-          column.dataSource = this.getTreeDataSource(data, column, null);
+          column.dataSource = this.getTreeDataSource(treeData, column, null);
+          this.setData(data, column.code, value);
         } else {
           column.dataSource = res.data.map(item => {
             return {
@@ -659,6 +694,14 @@
           if (data) {
             if (this.parseData(data, column.code) == null && column.isDefaultFirst && res.data.length > 0) {
               this.setData(data, column.code, this.parseData(res.data[0], column.sourceDataCode));
+              /**
+               * 数据变化事件
+               * @property {object} sender 触发的列对象
+               * @property {object} oldValue 原数据
+               * @property {object} newValue 新数据
+               * @property {object} selected 选中对象（弹出选择框等有效）
+               */
+              this.$emit('on-change', column, null, column.rawData[0], null);
 
               if (column.sourceDataCode == 'id' && column.code.length > 2) {
                 let code = column.code.substr(0, column.code.length - 2);
@@ -672,10 +715,8 @@
           }
         }
 
-        //this.$forceUpdate();
-
         // 级联更新时清空数据
-        if (column.controlType == 'Select' || column.controlType == 'ComboSelect' || column.controlType == 'Radio') {
+        if (column.controlType == 'Select' || column.controlType == 'Radio') {
           if (
             !column.dataSource.some(item => {
               return item.id == this.parseData(data, column.code);
@@ -717,38 +758,13 @@
       },
       // 获取数据源
       getDataSource(data, column) {
-        if (!column.isStaticItem && column.dataType && column.dataType.indexOf('Enum:') === 0) {
+        if (!column.isStaticItem && column.dataType && column.dataType.startsWith('Enum:')) {
           // 枚举
           return this.getEnumList(column.dataType.split(':')[1]);
         } else {
           return column.dataSource == null ? [] : column.dataSource;
         }
       },
-      // // 可筛选下拉框加载数据
-      // loadOption(data, column, keyword) {
-      //     let param = this.getParam(data, column);
-
-      //     if (param != null) {
-      //         if (!(keyword || '').trim() && this.parseData(data, column.code) != null && column.controlType !== 'AutoComplete') {
-      //             param[column.sourceDataCode] = this.parseData(data, column.code);
-      //         } else {
-      //             param.keyword = keyword;
-      //         }
-      //         param.per = 20;
-
-      //         this.fillDataSource(data, column, param);
-      //     } else {
-      //         // 参数不完整，清空数据
-      //         column.dataSource = [];
-      //         this.setData(data, column.code, null);
-      //         // column.displayValue = null;
-
-      //         // 触发
-      //         column.triggers.forEach(item => {
-      //             item.needRefresh = true;
-      //         });
-      //     }
-      // },
       // 数据变化事件
       async onDataChange(sender) {
         // 计算需要刷新的字段
@@ -795,6 +811,7 @@
               column.controlType === 'MultiTreeSelect' ||
               column.controlType === 'SelectWithOther' ||
               column.controlType === 'ComboSelect' ||
+              column.controlType === 'MultiComboSelect' ||
               column.controlType === 'Radio' ||
               column.controlType === 'CheckGroup'
               // column.controlType === 'AutoComplete'
@@ -1024,6 +1041,111 @@
             col.parentNode.insertBefore(line, col);
           }
         });
+      },
+      // 可筛选下拉框加载数据
+      async loadOption(data, column, keyword) {
+        if (column.isStaticItem || (column.dataType && column.dataType.startsWith('Enum:'))) {
+          return;
+        }
+
+        let param = this.getParam(data, column);
+
+        if (param != null) {
+          param[column.sourceDisplayCode + '_c'] = keyword;
+          this.fillDataSource(data, column, param);
+        } else {
+          // 参数不完整，清空数据
+          column.rawData = [];
+          column.dataSource = [];
+          this.setData(data, column.code, null);
+          // column.displayValue = null;
+
+          // 触发
+          column.triggers.forEach(item => {
+            item.needClear = true;
+          });
+        }
+      },
+      // 根据表达式取值(可筛选选择框)
+      parseComboData(model, column) {
+        let value = this.parseData(model, column.code);
+
+        this.loadComboDataLabel(model, column, value);
+
+        return value;
+      },
+      // 根据表达式取值(可筛选多选选择框)
+      parseMultiComboData(model, column) {
+        let data = [];
+        let value = this.parseData(model, column.code);
+
+        if (this.isJSON(value)) {
+          data = JSON.parse(value);
+        }
+
+        this.loadComboDataLabel(model, column, data);
+
+        return data;
+      },
+      // 加载可筛选选择框显示内容
+      async loadComboDataLabel(model, column, data) {
+        if (column.isStaticItem || (column.dataType && column.dataType.startsWith('Enum:'))) {
+          return;
+        }
+
+        if (this.$refs['control_' + column.code]) {
+          let values = this.$refs['control_' + column.code][0].$data.values;
+
+          let pendings = [];
+          if (column.controlType == 'MultiComboSelect') {
+            data.forEach(value => {
+              if (!values.some(v => v.value == value)) {
+                // 不在选中项中
+                let newValue = { value, label: null, disabled: false };
+                values.push(newValue);
+                pendings.push(newValue);
+              }
+            });
+          } else {
+            if (!values.some(v => v.value == data)) {
+              // 不在选中项中
+              let newValue = { value: data, label: null, disabled: false };
+              values.push(newValue);
+              pendings.push(newValue);
+            }
+          }
+
+          // 读取显示内容
+          if (pendings.length > 0) {
+            let param = this.getParam(model, column);
+            param[column.sourceDataCode] = pendings.map(item => item.value).join(',');
+            let res;
+
+            if (column.isSourceCustom) {
+              res = await customModelApi.query(column.source, param);
+            } else {
+              res = await modelApi.query(column.source, param);
+            }
+
+            res.data.forEach(item => {
+              let v = this.parseData(item, column.sourceDataCode);
+              let label = this.parseData(item, column.sourceDisplayCode);
+
+              if (column.controlType == 'ComboSelect') {
+                // 添加筛选内容
+                this.$refs['control_' + column.code][0].$data.query = label;
+              }
+
+              let newValue = pendings.find(i => i.value == v);
+
+              if (newValue) {
+                newValue.label = label;
+              }
+            });
+
+            this.$forceUpdate();
+          }
+        }
       }
     }
   };

package/src/components/view/view-form.vue

@@ -207,11 +207,33 @@
               </template> -->
               <template v-else-if="column.controlType === 'ComboSelect'">
                 <Select
-                  :model-value="parseData(data, column.code)"
+                  :ref="'control_' + column.code"
+                  :model-value="parseComboData(data, column)"
                   @update:model-value="$event => setData(data, column.code, $event)"
                   :disabled="readonly || column.isReadonly"
                   :clearable="true"
                   filterable
+                  remote
+                  :remote-method="search => loadOption(data, column, search)"
+                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
+                  :placeholder="column.description"
+                  :transfer="true"
+                  @on-change="selected => onSelectDataChange(column, selected)"
+                >
+                  <Option v-for="item in getDataSource(data, column)" :key="item.id" :value="item.id">{{ item.name }}</Option>
+                </Select>
+              </template>
+              <template v-else-if="column.controlType === 'MultiComboSelect'">
+                <Select
+                  :ref="'control_' + column.code"
+                  :model-value="parseMultiComboData(data, column)"
+                  @update:model-value="$event => setArrayData(data, column.code, $event)"
+                  :disabled="readonly || column.isReadonly"
+                  :clearable="true"
+                  :multiple="true"
+                  filterable
+                  remote
+                  :remote-method="search => loadOption(data, column, search)"
                   :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
                   :placeholder="column.description"
                   :transfer="true"
@@ -464,7 +486,7 @@
 <script>
   import mixinPage from '../../mixins/page';
   import mixin from './mixin';
-  import { mapActions } from 'vuex';
+  import { mapActions, mapMutations } from 'vuex';
   import modelApi from '../../api/model';
   import customModelApi from '../../api/customModel';
   import richEditor from '../richEditor/index.vue';
@@ -1054,13 +1076,19 @@
           column.dataSource = null;
         }
 
+        if (column.controlType === 'ComboSelect' || column.controlType === 'MultiComboSelect') {
+          param.per = 20;
+        }
+
         // 参数完整，查询数据
+        this.disableLoader();
         let res;
         if (column.isSourceCustom) {
           res = await customModelApi.query(column.source, param);
         } else {
           res = await modelApi.query(column.source, param);
         }
+        this.enableLoader();
 
         column.rawData = res.data;
 
@@ -1087,7 +1115,14 @@
           if (data) {
             if (this.parseData(data, column.code) == null && column.isDefaultFirst && res.data.length > 0) {
               this.setData(data, column.code, this.parseData(res.data[0], column.sourceDataCode));
-              this.$emit('on-change', column, null, value, null);
+              /**
+               * 数据变化事件
+               * @property {object} sender 触发的列对象
+               * @property {object} oldValue 原数据
+               * @property {object} newValue 新数据
+               * @property {object} selected 选中对象（弹出选择框等有效）
+               */
+              this.$emit('on-change', column, null, column.rawData[0], null);
 
               if (column.sourceDataCode == 'id' && column.code.length > 2) {
                 let code = column.code.substr(0, column.code.length - 2);
@@ -1101,10 +1136,8 @@
           }
         }
 
-        //this.$forceUpdate();
-
         // 级联更新时清空数据
-        if (column.controlType == 'Select' || column.controlType == 'ComboSelect' || column.controlType == 'Radio') {
+        if (column.controlType == 'Select' || column.controlType == 'Radio') {
           if (
             !column.dataSource.some(item => {
               return item.id == this.parseData(data, column.code);
@@ -1146,38 +1179,13 @@
       },
       // 获取数据源
       getDataSource(data, column) {
-        if (!column.isStaticItem && column.dataType.indexOf('Enum:') === 0) {
+        if (!column.isStaticItem && column.dataType.startsWith('Enum:')) {
           // 枚举
           return this.getEnumList(column.dataType.split(':')[1]);
         } else {
           return column.dataSource == null ? [] : column.dataSource;
         }
       },
-      // // 可筛选下拉框加载数据
-      // loadOption(data, column, keyword) {
-      //     let param = this.getParam(data, column);
-
-      //     if (param != null) {
-      //         if (!(keyword || '').trim() && this.parseData(data, column.code) != null && column.controlType !== 'AutoComplete') {
-      //             param[column.sourceDataCode] = this.parseData(data, column.code);
-      //         } else {
-      //             param.keyword = keyword;
-      //         }
-      //         param.per = 20;
-
-      //         this.fillDataSource(data, column, param);
-      //     } else {
-      //         // 参数不完整，清空数据
-      //         column.dataSource = [];
-      //         this.setData(data, column.code, null);
-      //         // column.displayValue = null;
-
-      //         // 触发
-      //         column.triggers.forEach(item => {
-      //             item.needClear = true;
-      //         });
-      //     }
-      // },
       // 选项变化事件
       onSelectDataChange(sender, selected) {
         let code;
@@ -1283,7 +1291,6 @@
            * @property {object} oldValue 原数据
            * @property {object} newValue 新数据
            * @property {object} selected 选中对象（弹出选择框等有效）
-           * @property {boolean} loading 加载数据时触发
            */
           this.$emit('on-change', sender, null, null, this.$refs['table_' + sender.code][0].data);
         } else if (sender != null) {
@@ -1376,6 +1383,7 @@
               column.controlType === 'MultiTreeSelect' ||
               column.controlType === 'SelectWithOther' ||
               column.controlType === 'ComboSelect' ||
+              column.controlType === 'MultiComboSelect' ||
               column.controlType === 'Radio' ||
               column.controlType === 'CheckGroup'
               // column.controlType === 'AutoComplete'
@@ -1459,7 +1467,7 @@
         if (!(column.dataType || '').trim()) {
           return null;
         }
-        if (column.dataType.indexOf('Enum:') === 0) {
+        if (column.dataType.startsWith('Enum:')) {
           return 'string';
         }
 
@@ -1591,6 +1599,111 @@
         } else {
           return column.name;
         }
+      },
+      // 可筛选下拉框加载数据
+      async loadOption(data, column, keyword) {
+        if (column.isStaticItem || (column.dataType && column.dataType.startsWith('Enum:'))) {
+          return;
+        }
+
+        let param = this.getParam(data, column);
+
+        if (param != null) {
+          param[column.sourceDisplayCode + '_c'] = keyword;
+          this.fillDataSource(data, column, param);
+        } else {
+          // 参数不完整，清空数据
+          column.rawData = [];
+          column.dataSource = [];
+          this.setData(data, column.code, null);
+          // column.displayValue = null;
+
+          // 触发
+          column.triggers.forEach(item => {
+            item.needClear = true;
+          });
+        }
+      },
+      // 根据表达式取值(可筛选选择框)
+      parseComboData(model, column) {
+        let value = this.parseData(model, column.code);
+
+        this.loadComboDataLabel(model, column, value);
+
+        return value;
+      },
+      // 根据表达式取值(可筛选多选选择框)
+      parseMultiComboData(model, column) {
+        let data = [];
+        let value = this.parseData(model, column.code);
+
+        if (this.isJSON(value)) {
+          data = JSON.parse(value);
+        }
+
+        this.loadComboDataLabel(model, column, data);
+
+        return data;
+      },
+      // 加载可筛选选择框显示内容
+      async loadComboDataLabel(model, column, data) {
+        if (column.isStaticItem || (column.dataType && column.dataType.startsWith('Enum:'))) {
+          return;
+        }
+
+        if (this.$refs['control_' + column.code]) {
+          let values = this.$refs['control_' + column.code][0].$data.values;
+
+          let pendings = [];
+          if (column.controlType == 'MultiComboSelect') {
+            data.forEach(value => {
+              if (!values.some(v => v.value == value)) {
+                // 不在选中项中
+                let newValue = { value, label: null, disabled: false };
+                values.push(newValue);
+                pendings.push(newValue);
+              }
+            });
+          } else {
+            if (!values.some(v => v.value == data)) {
+              // 不在选中项中
+              let newValue = { value: data, label: null, disabled: false };
+              values.push(newValue);
+              pendings.push(newValue);
+            }
+          }
+
+          // 读取显示内容
+          if (pendings.length > 0) {
+            let param = this.getParam(model, column);
+            param[column.sourceDataCode] = pendings.map(item => item.value).join(',');
+            let res;
+
+            if (column.isSourceCustom) {
+              res = await customModelApi.query(column.source, param);
+            } else {
+              res = await modelApi.query(column.source, param);
+            }
+
+            res.data.forEach(item => {
+              let v = this.parseData(item, column.sourceDataCode);
+              let label = this.parseData(item, column.sourceDisplayCode);
+
+              if (column.controlType == 'ComboSelect') {
+                // 添加筛选内容
+                this.$refs['control_' + column.code][0].$data.query = label;
+              }
+
+              let newValue = pendings.find(i => i.value == v);
+
+              if (newValue) {
+                newValue.label = label;
+              }
+            });
+
+            this.$forceUpdate();
+          }
+        }
       }
     }
   };