mooho-base-admin-plus 2.4.43 → 2.4.45

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mooho-base-admin-plus",
   "description": "MOOHO basic framework for admin by Vue3",
-  "version": "2.4.43",
+  "version": "2.4.45",
   "author": "jinyifan <jinyifan@mooho.com.cn>",
   "license": "MIT",
   "private": false,

package/src/components/input/combo-select.vue

@@ -0,0 +1,218 @@
+<template>
+  <div>
+    <Select
+      ref="select"
+      :size="size"
+      :model-value="parseComboData()"
+      @update:model-value="$event => setComboData($event)"
+      :disabled="readonly"
+      :clearable="true"
+      :multiple="multi"
+      filterable
+      remote
+      :remote-method="remoteMethod"
+      :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
+      :placeholder="column.placeholder"
+      :transfer="true"
+      @on-change="selected => onChange(selected)"
+      @on-query-change="query => onComboQueryChange(query)"
+      @on-clear="remoteMethod"
+    >
+      <Option v-for="(item, index) in getDataSource(data, column)" :key="index" :value="item.id">{{ item.name }}</Option>
+    </Select>
+  </div>
+</template>
+<script>
+  import mixinPage from '../../mixins/page';
+  import modelApi from '../../api/model';
+  import customModelApi from '../../api/customModel';
+
+  /**
+   * @displayName combo-select 可筛选选择框
+   */
+  export default {
+    mixins: [mixinPage],
+    data() {
+      return {
+        selected: null,
+        selectedData: null
+      };
+    },
+    props: {
+      /**
+       * @model
+       */
+      modelValue: {
+        type: [Array, Number, String]
+      },
+      /**
+       * 大小
+       * @values small, default, large
+       */
+      size: {
+        type: String
+      },
+      /**
+       * 数据源数据列名
+       */
+      remoteMethod: {
+        type: Function
+      },
+      /**
+       * 只读
+       */
+      readonly: {
+        type: Boolean,
+        default: false
+      },
+      /**
+       * 数据
+       */
+      data: {
+        type: Object,
+        default() {
+          return {};
+        }
+      },
+      /**
+       * 参数
+       */
+      param: {
+        type: Object,
+        default() {
+          return {};
+        }
+      },
+      /**
+       * 列
+       */
+      column: {
+        type: Object,
+        default() {
+          return {};
+        }
+      },
+      /**
+       * 能否多选
+       */
+      multi: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {},
+    watch: {
+      modelValue(value) {
+        this.selected = value;
+        this.showSelected();
+      }
+    },
+    mounted() {
+      //this.showSelected();
+    },
+    methods: {
+      parseComboData() {},
+      setComboData(value) {
+        /**
+         * 输入事件
+         * @property {object} value 选中的值 }
+         */
+        this.$emit('update:modelValue', value);
+      },
+      // 加载可筛选选择框显示内容
+      async showSelected() {
+        if (this.column.isStaticItem || (this.column.dataType && this.column.dataType.startsWith('Enum:'))) {
+          return;
+        }
+
+        if (this.$refs.select) {
+          let values = this.$refs.select.values;
+          //values.length = 0;
+
+          let pendings = [];
+          if (this.multi) {
+            values.length = 0;
+            this.selected.forEach(value => {
+              if (!values.some(v => v.value == value)) {
+                // 不在选中项中
+                let newValue = { value, label: null, disabled: false };
+
+                values.push(newValue);
+                pendings.push(newValue);
+              }
+            });
+          } else {
+            values.length = 0;
+            this.$refs.select.query = '';
+            if (!values.some(v => v.value == this.selected)) {
+              // 不在选中项中
+              let newValue = { value: this.selected, label: null, disabled: false };
+
+              values.push(newValue);
+
+              if (this.selected != null && this.selected != '') {
+                pendings.push(newValue);
+              }
+            }
+          }
+
+          // 读取显示内容
+          setTimeout(async () => {
+            if (pendings.length > 0) {
+              let param = this.param;
+              param[this.column.sourceDataCode] = pendings.map(item => item.value).join(',');
+              let res;
+
+              if (this.column.isSourceCustom) {
+                res = await customModelApi.query(this.column.source, param);
+              } else {
+                res = await modelApi.query(this.column.source, param);
+              }
+
+              res.data.forEach(item => {
+                let v = this.parseData(item, this.column.sourceDataCode);
+                let label = this.parseData(item, this.column.sourceDisplayCode);
+
+                if (!this.multi) {
+                  // 添加筛选内容
+                  this.$refs.select.query = label;
+                }
+
+                let newValue = pendings.find(i => i.value == v);
+
+                if (newValue) {
+                  newValue.label = label;
+                }
+              });
+
+              this.$forceUpdate();
+            }
+          });
+        }
+      },
+      // 可筛选下拉框搜索条件变化
+      onComboQueryChange(query) {
+        if (!(query || '').trim()) {
+          this.remoteMethod(query);
+        }
+      },
+      // 数据变化
+      onChange(selected) {
+        /**
+         * 选中项变化事件
+         * @property {object} row 选中项 }
+         */
+        this.$emit('on-change', selected);
+      },
+      // 获取数据源
+      getDataSource() {
+        if (!this.column.isStaticItem && this.column.dataType.startsWith('Enum:')) {
+          // 枚举
+          return this.getEnumList(this.column.dataType.split(':')[1]);
+        } else {
+          return this.column.dataSource == null ? [] : this.column.dataSource;
+        }
+      }
+    }
+  };
+</script>

package/src/components/input/dialog-select.vue

@@ -14,7 +14,7 @@
         <Button :size="size" custom-icon="fa fa-search" @click="dialogSelectOpen()"></Button>
       </template>
     </Input>
-    <modal-table ref="dialogTable" :view-code="source" :selectEnable="multi" :check-cross-page="true" :footer-enable="multi" :load-data-enable="loadDataEnable" v-if="dialogActive">
+    <modal-table ref="dialogTable" :view-code="source" :autoLoad="false" :selectEnable="multi" :check-cross-page="true" :footer-enable="multi">
       <template #command="{ row }">
         <Button size="small" v-if="!multi" type="primary" custom-icon="fa fa-check" @click="dialogCheck(row)">{{ $t('Front_Btn_Select') }}</Button>
       </template>
@@ -42,7 +42,6 @@
         //changed: false,
         selected: null,
         selectedData: null,
-        dialogActive: false,
         loadDataEnable: true
       };
     },
@@ -218,7 +217,15 @@
       // 弹出选择框
       dialogSelectOpen() {
         if (!this.readonly && this.source) {
-          this.dialogActive = true;
+          if (this.param) {
+            // 参数完整
+            this.loadDataEnable = true;
+          } else {
+            // 参数不完整
+            this.loadDataEnable = false;
+          }
+
+          this.$refs.dialogTable.loadData();
 
           setTimeout(async () => {
             if (this.multi) {
@@ -229,14 +236,6 @@
               }
             }
 
-            if (this.param) {
-              // 参数完整
-              this.loadDataEnable = true;
-            } else {
-              // 参数不完整
-              this.loadDataEnable = false;
-            }
-
             this.$refs.dialogTable.open(this.param);
           });
         }

package/src/components/view/table-filter.vue

@@ -125,46 +125,31 @@
             />
           </template>
           <template v-else-if="column.controlType === 'ComboSelect'">
-            <Select
-              :ref="'control_' + column.code"
+            <combo-select
               size="small"
-              :model-value="parseComboData(data, column)"
+              :model-value="parseFilterData(data, column)"
               @update:model-value="$event => setFilterData(data, column, $event)"
-              :clearable="true"
-              filterable
-              remote
+              :multi="false"
               :remote-method="search => loadOption(data, column, search)"
-              :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
-              :placeholder="column.description"
-              :transfer="true"
+              :data="data"
+              :param="getParam(data, column)"
+              :column="column"
               @on-change="selected => onSelectDataChange(column, selected)"
-              @on-query-change="query => onComboQueryChange(column, query)"
-              @on-clear="loadOption(data, column, null)"
-            >
-              <Option v-for="item in getDataSource(data, column)" :key="item.id" :value="item.id">{{ item.name }}</Option>
-            </Select>
+            ></combo-select>
           </template>
           <template v-else-if="column.controlType === 'MultiComboSelect'">
-            <Select
-              :ref="'control_' + column.code"
+            <combo-select
               size="small"
-              :model-value="parseMultiComboData(data, column)"
+              :model-value="parseArrayFilterData(data, column)"
               @update:model-value="$event => setArrayFilterData(data, column, $event)"
-              :clearable="true"
-              :multiple="true"
-              filterable
-              remote
+              :multi="true"
               :remote-method="search => loadOption(data, column, search)"
-              :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
-              :placeholder="column.description"
-              :transfer="true"
+              :data="data"
+              :param="getParam(data, column)"
+              :column="column"
               @on-change="selected => onSelectDataChange(column, selected)"
-              @on-query-change="query => onComboQueryChange(column, query)"
-            >
-              <Option v-for="item in getDataSource(data, column)" :key="item.id" :value="item.id">{{ item.name }}</Option>
-            </Select>
+            ></combo-select>
           </template>
-
           <template v-else-if="column.controlType === 'DialogSelect'">
             <dialog-select
               size="small"
@@ -178,6 +163,20 @@
               @on-change="selected => onSelectDataChange(column, selected)"
             ></dialog-select>
           </template>
+          <template v-else-if="column.controlType === 'MultiDialogSelect'">
+            <dialog-select
+              size="small"
+              :model-value="parseFilterData(data, column)"
+              @update:model-value="$event => setFilterData(data, column, $event)"
+              :multi="true"
+              :source="column.source"
+              :source-data-code="column.sourceDataCode"
+              :source-display-code="column.sourceDisplayCode"
+              :param="getParam(data, column)"
+              :controlWidth="column.controlWidth"
+              @on-change="selected => onSelectDataChange(column, selected)"
+            ></dialog-select>
+          </template>
           <template
             v-else-if="
               column.controlType === 'Date' ||
@@ -817,97 +816,6 @@
             item.needClear = true;
           });
         }
-      },
-      // 根据表达式取值(可筛选选择框)
-      parseComboData(model, column) {
-        let value = this.parseFilterData(model, column);
-
-        setTimeout(() => {
-          this.loadComboDataLabel(model, column, value);
-        });
-
-        return value;
-      },
-      // 根据表达式取值(可筛选多选选择框)
-      parseMultiComboData(model, column) {
-        let data = [];
-        let value = this.parseFilterData(model, column);
-
-        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] && data) {
-          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);
-            }
-          }
-
-          // 读取显示内容
-          setTimeout(async () => {
-            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();
-            }
-          });
-        }
-      },
-      // 可筛选下拉框搜索条件变化
-      onComboQueryChange(column, query) {
-        if (!(query || '').trim()) {
-          this.loadOption(this.data, column, null);
-        }
       }
     }
   };

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

@@ -170,60 +170,31 @@
                   @on-change="onDataChange(column)"
                 />
               </template>
-              <!-- <template v-else-if="column.controlType === 'AutoComplete'">
-                                <AutoComplete :value="parseData(data, column.code) ? parseData(data, column.code) : ''"
-                                    @update:model-value="$event => setData(data, column.code, $event)"
-                                    :disabled="column.isReadonly"
-                                    clearable
-                                    @on-search="search => loadOption(data, column, search)"
-                                    @on-clear="() => loadOption(data, column)"
-                                    :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
-                                    :placeholder="column.description"
-                                    :transfer="true"
-                                    @on-change="selected => onDataChange(column, selected)">
-                                    <Option v-for="item in getDataSource(data, column)"
-                                        :key="item.id"
-                                        :value="item.name">{{ item.name }}</Option>
-                                </AutoComplete>
-                            </template> -->
               <template v-else-if="column.controlType === 'ComboSelect'">
-                <Select
-                  :ref="'control_' + column.code"
-                  :model-value="parseComboData(data, column)"
+                <combo-select
+                  :model-value="parseData(data, column.code)"
                   @update:model-value="$event => setData(data, column.code, $event)"
-                  :disabled="column.isReadonly"
-                  :clearable="true"
-                  filterable
-                  remote
+                  :multi="false"
+                  :readonly="column.isReadonly"
                   :remote-method="search => loadOption(data, column, search)"
-                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
-                  :placeholder="column.description"
-                  :transfer="true"
+                  :data="data"
+                  :param="getParam(data, column)"
+                  :column="column"
                   @on-change="selected => onSelectDataChange(column, selected)"
-                  @on-query-change="query => onComboQueryChange(column, query)"
-                  @on-clear="loadOption(data, column, null)"
-                >
-                  <Option v-for="item in getDataSource(data, column)" :key="item.id" :value="item.id">{{ item.name }}</Option>
-                </Select>
+                ></combo-select>
               </template>
               <template v-else-if="column.controlType === 'MultiComboSelect'">
-                <Select
-                  :ref="'control_' + column.code"
-                  :model-value="parseMultiComboData(data, column)"
+                <combo-select
+                  :model-value="parseArrayData(data, column.code)"
                   @update:model-value="$event => setArrayData(data, column.code, $event)"
-                  :clearable="true"
-                  :multiple="true"
-                  filterable
-                  remote
+                  :multi="true"
+                  :readonly="column.isReadonly"
                   :remote-method="search => loadOption(data, column, search)"
-                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
-                  :placeholder="column.description"
-                  :transfer="true"
+                  :data="data"
+                  :param="getParam(data, column)"
+                  :column="column"
                   @on-change="selected => onSelectDataChange(column, selected)"
-                  @on-query-change="query => onComboQueryChange(column, query)"
-                >
-                  <Option v-for="item in getDataSource(data, column)" :key="item.id" :value="item.id">{{ item.name }}</Option>
-                </Select>
+                ></combo-select>
               </template>
               <template v-else-if="column.controlType === 'DialogSelect'">
                 <dialog-select