mooho-base-admin-plus 2.3.7 → 2.3.9

package/package.json

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

package/public/setting.js

@@ -82,7 +82,7 @@ window.setting = {
     // 筛选标题栏宽度
     filterWidth: 125,
     // 每页默认数量
-    pageSize: 20
+    pageSize: 10
   },
   /**
    * 多语言配置

package/src/components/view/column-edit.vue

@@ -71,6 +71,7 @@
                 data.controlType == 'SelectWithOther' ||
                 data.controlType == 'ComboSelect' ||
                 data.controlType == 'MultiSelect' ||
+                data.controlType == 'MultiComboSelect' ||
                 data.controlType == 'Radio' ||
                 data.controlType == 'CheckGroup'
               "
@@ -95,6 +96,7 @@
                   data.controlType == 'SelectWithOther' ||
                   data.controlType == 'ComboSelect' ||
                   data.controlType == 'MultiSelect' ||
+                  data.controlType == 'MultiComboSelect' ||
                   data.controlType == 'Radio' ||
                   data.controlType == 'CheckGroup') &&
                 !data.isStaticItem
@@ -123,6 +125,7 @@
                   data.controlType == 'SelectWithOther' ||
                   data.controlType == 'ComboSelect' ||
                   data.controlType == 'MultiSelect' ||
+                  data.controlType == 'MultiComboSelect' ||
                   data.controlType == 'Radio' ||
                   data.controlType == 'CheckGroup')
               "
@@ -676,6 +679,7 @@
               this.data.controlType === 'MultiTreeSelect' ||
               this.data.controlType === 'SelectWithOther' ||
               this.data.controlType === 'ComboSelect' ||
+              this.data.controlType === 'MultiComboSelect' ||
               this.data.controlType === 'Radio' ||
               this.data.controlType === 'CheckGroup') &&
               !this.data.isStaticItem &&

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

@@ -63,6 +63,7 @@
                 data.controlType == 'MultiSelect' ||
                 data.controlType == 'SelectWithOther' ||
                 data.controlType == 'ComboSelect' ||
+                data.controlType == 'MultiComboSelect' ||
                 data.controlType == 'Radio' ||
                 data.controlType == 'CheckGroup'
               "
@@ -84,8 +85,9 @@
               v-if="
                 (data.controlType == 'Select' ||
                   data.controlType == 'SelectWithOther' ||
-                  data.controlType == 'ComboSelect' ||
                   data.controlType == 'MultiSelect' ||
+                  data.controlType == 'ComboSelect' ||
+                  data.controlType == 'MultiComboSelect' ||
                   data.controlType == 'Radio' ||
                   data.controlType == 'CheckGroup') &&
                 !data.isStaticItem
@@ -114,6 +116,7 @@
                   data.controlType == 'MultiSelect' ||
                   data.controlType == 'SelectWithOther' ||
                   data.controlType == 'ComboSelect' ||
+                  data.controlType == 'MultiComboSelect' ||
                   data.controlType == 'Radio' ||
                   data.controlType == 'CheckGroup')
               "
@@ -452,6 +455,7 @@
               this.data.controlType === 'MultiTreeSelect' ||
               this.data.controlType === 'SelectWithOther' ||
               this.data.controlType === 'ComboSelect' ||
+              this.data.controlType === 'MultiComboSelect' ||
               this.data.controlType === 'Radio' ||
               this.data.controlType === 'CheckGroup') &&
               !this.data.isStaticItem &&

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

@@ -174,6 +174,7 @@
             item.id == 'SelectWithOther' ||
             item.id == 'MultiSelect' ||
             item.id == 'ComboSelect' ||
+            item.id == 'MultiComboSelect' ||
             item.id == 'DialogSelect' ||
             item.id == 'MultiDialogSelect' ||
             item.id == 'TreeSelect' ||

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

@@ -120,18 +120,20 @@
               @update:model-value="$event => setFilterData(data, column, $event)"
               :style="{ width: column.controlWidth == null ? '40%' : column.controlWidth + 'px' }"
               style="margin-left: 4px"
-              :maxlength="column.maxLength"
               :placeholder="column.description"
               @on-change="onDataChange(column)"
             />
           </template>
           <template v-else-if="column.controlType === 'ComboSelect'">
             <Select
+              :ref="'control_' + column.code"
               size="small"
-              :model-value="parseFilterData(data, column)"
+              :model-value="parseComboData(data, column)"
               @update:model-value="$event => setFilterData(data, column, $event)"
-              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"
@@ -140,6 +142,26 @@
               <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"
+              size="small"
+              :model-value="parseMultiComboData(data, column)"
+              @update:model-value="$event => setArrayFilterData(data, column, $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>
+          </template>
+
           <template v-else-if="column.controlType === 'DialogSelect'">
             <dialog-select
               size="small"
@@ -221,6 +243,16 @@
               </Radio>
             </RadioGroup>
           </template>
+          <template v-else-if="column.controlType === 'TextArea'">
+            <Input
+              type="textarea"
+              :model-value="parseFilterData(data, column.code)"
+              @update:model-value="$event => setFilterData(data, column.code, $event)"
+              :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
+              :rows="column.controlHeight / 20"
+              :placeholder="column.description"
+            />
+          </template>
           <template v-else>{{ $t('Front_Label_Control_Type_Not_Supported') }} {{ column.controlType }}</template>
         </FormItem>
       </template>
@@ -239,7 +271,6 @@
   import customModelApi from '../../api/customModel';
   import DialogSelect from '../input/dialog-select.vue';
   import dateFormat from 'date-fns/format';
-  import { assign, defaultsDeep } from 'lodash';
 
   export default {
     mixins: [mixin, mixinPage],
@@ -257,10 +288,6 @@
       tableView: {
         type: Object
       },
-      // 筛选项数据
-      filter: {
-        type: Object
-      },
       // 字段
       columns: {
         type: Array
@@ -276,12 +303,6 @@
       init() {
         let data = this.data;
 
-        // 默认值
-        if (this.filter) {
-          defaultsDeep(data, this.filter);
-          assign(this.filter, data);
-        }
-
         this.columns.forEach(item => {
           if (item.defaultValue) {
             if (item.defaultValue == '{today}') {
@@ -407,18 +428,31 @@
       },
       // 填充数据源
       async fillDataSource(data, column, param) {
+        let value;
+        if (column.controlType === 'TreeSelect' || column.controlType === 'MultiTreeSelect') {
+          // 树选择框重新加载数据源时，需要先清空数据源，否则无法直接点击清空按钮清除数据。
+          value = this.parseTreeFilterData(data, column);
+          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),
@@ -426,7 +460,8 @@
             };
           });
 
-          column.dataSource = this.getTreeDataSource(data, column, null);
+          column.dataSource = this.getTreeDataSource(treeData, column, null);
+          this.setFilterData(data, column, value);
         } else {
           column.dataSource = res.data.map(item => {
             return {
@@ -439,17 +474,43 @@
           if (data) {
             if (this.parseFilterData(data, column) == null && column.isDefaultFirst && res.length > 0) {
               this.setData(data, column.code, this.parseData(res[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);
+                let model = column.rawData.find(item => {
+                  return item.id == this.parseData(data, column.code);
+                });
+
+                this.setData(data, code, model);
+              }
             }
           }
         }
 
-        //this.$forceUpdate();
-
-        // 更新data触发刷新
-        // this.data = { ...this.data };
+        // 级联更新时清空数据
+        if (column.controlType == 'Select' || column.controlType == 'Radio') {
+          if (
+            !column.dataSource.some(item => {
+              return item.id == this.parseData(data, column.code);
+            })
+          ) {
+            // 数据不存在于此数据源，清空数据
+            this.setData(data, column.code, null);
 
-        // 触发
-        this.onDataChange(column);
+            // 触发
+            column.triggers.forEach(item => {
+              item.needClear = true;
+            });
+          }
+        }
       },
       // 获取树结构数据源
       getTreeDataSource(data, column, parentID) {
@@ -477,7 +538,7 @@
       },
       // 获取数据源
       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 {
@@ -597,6 +658,7 @@
             column.controlType === 'MultiTreeSelect' ||
             column.controlType === 'SelectWithOther' ||
             column.controlType === 'ComboSelect' ||
+            column.controlType === 'MultiComboSelect' ||
             column.controlType === 'Radio'
           ) {
             // 选择框、单选框组
@@ -636,8 +698,8 @@
       parseArrayFilterData(model, column) {
         let data = [];
         let value = this.parseFilterData(model, column);
-        if (value != null && value !== '') {
-          data = value.split(',');
+        if (this.isJSON(value)) {
+          data = JSON.parse(value);
         }
 
         return data;
@@ -646,7 +708,7 @@
       setArrayFilterData(model, column, value) {
         let data = '';
         if (value != null) {
-          data = value.join(',');
+          data = JSON.stringify(value);
         }
 
         this.setFilterData(model, column, data);
@@ -753,6 +815,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.parseFilterData(model, column);
+
+        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]) {
+          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-chart.vue

@@ -250,7 +250,7 @@
           };
 
           // 预先加载枚举值
-          if (this.setting.chartGroupCodeType && this.setting.chartGroupCodeType.indexOf('Enum:') === 0) {
+          if (this.setting.chartGroupCodeType && this.setting.chartGroupCodeType.startsWith('Enum:')) {
             await this.loadEnum(this.setting.chartGroupCodeType.replace('Enum:', ''));
           }
 
@@ -279,7 +279,7 @@
                     this.data.map(item => {
                       let value = this.parseData(item, this.setting.chartGroupCode);
 
-                      if (this.setting.chartGroupCodeType && this.setting.chartGroupCodeType.indexOf('Enum:') === 0) {
+                      if (this.setting.chartGroupCodeType && this.setting.chartGroupCodeType.startsWith('Enum:')) {
                         value = this.getEnum(this.setting.chartGroupCodeType.replace('Enum:', ''), value);
                       }
 
@@ -297,7 +297,7 @@
                   .filter(data => {
                     let value = this.parseData(data, this.setting.chartGroupCode);
 
-                    if (this.setting.chartGroupCodeType && this.setting.chartGroupCodeType.indexOf('Enum:') === 0) {
+                    if (this.setting.chartGroupCodeType && this.setting.chartGroupCodeType.startsWith('Enum:')) {
                       value = this.getEnum(this.setting.chartGroupCodeType.replace('Enum:', ''), value);
                     }
 
@@ -334,7 +334,7 @@
                     this.data.map(item => {
                       let value = this.parseData(item, this.setting.chartGroupCode);
 
-                      if (this.setting.chartGroupCodeType && this.setting.chartGroupCodeType.indexOf('Enum:') === 0) {
+                      if (this.setting.chartGroupCodeType && this.setting.chartGroupCodeType.startsWith('Enum:')) {
                         value = this.getEnum(this.setting.chartGroupCodeType.replace('Enum:', ''), value);
                       }
 
@@ -352,7 +352,7 @@
                   .filter(data => {
                     let value = this.parseData(data, this.setting.chartGroupCode);
 
-                    if (this.setting.chartGroupCodeType && this.setting.chartGroupCodeType.indexOf('Enum:') === 0) {
+                    if (this.setting.chartGroupCodeType && this.setting.chartGroupCodeType.startsWith('Enum:')) {
                       value = this.getEnum(this.setting.chartGroupCodeType.replace('Enum:', ''), value);
                     }