olp-table 5.3.1 → 5.3.4

package/src/components/table/ol-main-form-sub-table/index.vue

@@ -0,0 +1,601 @@
+<template>
+  <el-dialog
+      v-model="state.dialogVisible"
+      :title="state.title"
+      align-center
+      destroy-on-close
+      fullscreen
+      v-loading="state.loading"
+      :close-on-click-modal="false"
+  >
+    <div style="padding-right: 10px; height: 86vh">
+      <avue-form :key="state.key" ref="formRef" :option="form"
+                 v-model="formData">
+        <!-- 动态生成插槽 -->
+        <template v-for="slotRow in dynamicSlotsTable" :key="slotRow.slotName" #[slotRow.slotName]="{ disabled, size }">
+          <!-- 根据配置动态渲染插槽内容 -->
+          <ol-table-select @olTableSelectChange="olTableSelectChange" :slotName="slotRow.slotName" :http="http"
+                           :defaultValue="formData[slotRow.slotName]"
+                           :uuid="slotRow.config.uuid" :disabled="disabled" :size="size"
+                           :config="slotRow.config"></ol-table-select>
+        </template>
+      </avue-form>
+      <model-index ref="subTable" v-if="uuid" :uuid="uuid" :http="https" @initOk="ok"/>
+    </div>
+    <div class="footer-container">
+      <el-row style="height: 50px; padding: 10px 20px 0 0;border-top: 1px solid #e8eaec;background: white;justify-content: right">
+        <el-button @click="state.dialogVisible = false;">取 消</el-button>
+        <el-button type="primary" :loading="state.loading" @click="doSave">保 存</el-button>
+      </el-row>
+    </div>
+
+  </el-dialog>
+</template>
+<script>
+import {setArrayObjectKeyValue} from "@/utils/object";
+import {useMessage} from "@/utils/message";
+import {get, post, postAes} from "@/utils/http/httpUtils";
+import {handleTree} from "@/utils/tree";
+import {initDictTable} from "@/api/dist";
+import {storeDict} from "@/store/dict";
+import {storeDictType} from "@/store/dictType";
+import ModelIndex from "@/components/table/model/model-index.vue";
+import OlTableSelect from "@/components/ol-table-select.vue";
+
+const dict = storeDict();
+const dictType = storeDictType();
+
+function replaceDollarBraces(str) {
+  return str.toString().replace(/\$\{?([^{}]+)\}?/g, function (match, innerContent) {
+    return innerContent ? `'${innerContent}'` : match;
+  });
+}
+
+function parseJson(column) {
+  let attrs = column.attrs;
+  if (attrs) {
+    try {
+      attrs = JSON.parse(attrs)
+      for (let key of Object.keys(attrs)) {
+        column[key] = attrs[key];
+      }
+    } catch (e) {
+      console.error("解析attrs异常", attrs)
+    }
+  }
+}
+
+export default {
+  name: "olMainFormSubTable",
+  components: {OlTableSelect, ModelIndex},
+  inject: ['http'],
+  data() {
+    return {
+      url: {
+        saveUrl: "/online/crudAes/saveMainAndSubs",
+      },
+      uuid: undefined,
+      subForeignKey: '',
+      formData: {},
+      optionData: {},
+      form: {
+        column: []
+      },
+      dynamicSlotsTable: [],
+      dynamicSlotsField: {},
+      dynamicSlotsOtherResult: {},
+      state: {
+        loading: false,
+        fullscreen: false,
+        dialogVisible: false,
+        title: "",
+        width: '60%',
+        comCommit: true,
+        maxHeight: '400px',
+        type: '0',
+        edit: false,
+        saveUrl: '',
+        requestType: 'post',
+        updateKey: '',
+        deleteId: '',
+        theme: 't1',
+        tableConfigId: '',
+        dbName: '',
+        tableName: '',
+      },
+    }
+  },
+  computed: {
+    https() {
+      return this.http;
+    }
+  },
+  methods: {
+    hideColumn(prop) {
+      setArrayObjectKeyValue(this.form.column, 'display', false, prop)
+    },
+    showColumn(prop) {
+      setArrayObjectKeyValue(this.form.column, 'display', true, prop)
+    },
+    getDeleteId(param) {
+      for (let key of Object.keys(param)) {
+        if (key != '$parentId') {
+          return key;
+        }
+      }
+    },
+    getSubUpdateList(table) {
+      let subColumnAndValueList = []
+      for (const row of table.data) {
+        subColumnAndValueList.push(this.getSubUpdate(row, table.columns))
+      }
+      return subColumnAndValueList;
+    },
+    getSubUpdate(row, columns) {
+      let subColumnAndValue = {}
+      for (const column of columns) {
+        if (!column.tableSaveToOtherProp || column.tableSaveToOtherProp != '1') {
+          subColumnAndValue[column.tableField ? column.tableField : column.field] = row[column.field]
+        }
+      }
+      return subColumnAndValue;
+    },
+    getParams() {
+      // 子表信息
+      let subTable = this.$refs.subTable.table.t1;
+      let deleteId = this.getDeleteId(subTable.deleteParameter);
+      console.log('getParams:', this)
+      let params = {
+        tableConfigId: this.state.tableConfigId,
+        dbName: this.state.dbName,
+        tableName: this.state.tableName,
+        // 主表的唯一字段
+        mainTableKey: [this.state.deleteId],//主表的唯一字段
+        // 子表要自动生成的唯一字段 如果没有 可以忽略
+        mainGenIdMap: {[this.state.deleteId]: 'uuid'},
+        mianColumnAndValueMap: {},
+        // 子表名称
+        subTableName: subTable.tableConfig.mainTable,
+        // 子表要自动生成的唯一字段 如果没有 可以忽略
+        subGenIdMap: {[deleteId]: 'uuid'},
+        // 子表子主表的数据
+        subColumnAndValueList: this.getSubUpdateList(subTable.table),
+        // 子表的唯一字段
+        subTableKey: [deleteId],
+        // 表的关联key，这里框架自动复制 {主表字段,子表的字段}
+        subForeignKey: {
+          [this.state.deleteId]: this.subForeignKey
+        },
+      };
+      if (this.state.type != '0') {
+        let formData = this.$refs.value.getFormData(false);
+        for (let prop of Object.keys(formData)) {
+          let value = formData[prop];
+          if (value instanceof String) {
+            value = value.trim();
+          }
+          params.mianColumnAndValueMap[prop] = value;
+        }
+      } else {
+        params.mianColumnAndValueMap = this.getTableUpdateValue(this.form.column, this.formData);
+      }
+      if (this.state.saveUrl) {
+        return params.mianColumnAndValueMap;
+      }
+      if (this.state.edit) {
+        params.whereMap = {}
+        if (this.state.updateKey) {
+          let split = this.state.updateKey.split(',');
+          for (let kv of split) {
+            let kvs = kv.split("=");
+            if (kvs.length == 2) {
+              params.mianColumnAndValueMap[kvs[0]] = params.mianColumnAndValueMap[kvs[1]]
+            } else {
+              let val = params.mianColumnAndValueMap[kvs];
+              params.mianColumnAndValueMap[kvs] = val != undefined ? val : this.formData[kvs];
+            }
+          }
+
+        } else {
+          // 编辑时默认更新条件为id
+          params.mianColumnAndValueMap['id'] = this.formData['id'];
+          if (!params.mianColumnAndValueMap['id']) {
+            params.mianColumnAndValueMap['id'] = this.formData['t1_id'];
+          }
+        }
+      }
+      return params
+    },
+    /**
+     * 根据列配置获取数据库表更新数据
+     * @param column
+     * @param formData
+     * @returns {{}}
+     */
+    getTableUpdateValue(column, formData) {
+      let columnAndValueMap = {}
+      for (let {prop, tableField} of column) {
+        if (tableField && tableField == '1') {
+          continue
+        }
+        let value = formData[prop];
+        if (value) {
+          if (value instanceof String) {
+            value = value.trim();
+          }
+          columnAndValueMap[prop] = value;
+        }
+      }
+      return columnAndValueMap;
+    },
+    async doValidate() {
+      let dom = undefined;
+      let keys = [];
+      let status = true;
+      if (this.state.type != '0') {
+        await this.$refs.formRef.getNativeForm().validate((valid, msg) => {
+          if (!valid) {
+            keys = Object.keys(msg);
+            dom = this.$refs.formRef.getWidgetRef(keys[0]);
+            status = false;
+          }
+        })
+      } else {
+        await this.$refs.formRef.validate((valid, done, msg) => {
+          if (!valid) {
+            keys = Object.keys(msg);
+            dom = this.$refs.formRef.getPropRef(keys[0]);
+            status = false;
+          }
+          done()
+        })
+      }
+      if (dom) {
+        // 定位代码
+        dom.$el.scrollIntoView({
+          block: "center",
+          behavior: "smooth",
+        });
+        useMessage().error("您还有" + keys.length + "项信息未填写，请填写后再操作！");
+        status = false;
+      }
+      return status
+    },
+    async doSave() {
+      let dom ;
+      let keys ;
+      if (this.state.type != '0') {
+        await this.$refs.formRef.getNativeForm().validate((valid, msg) => {
+          if (!valid) {
+            keys = Object.keys(msg);
+            dom = this.$refs.formRef.getWidgetRef(keys[0]);
+            dom.$el.scrollIntoView({
+              block: "center",
+              behavior: "smooth",
+            });
+            useMessage().error("您还有" + keys.length + "项信息未填写，请填写后再操作！");
+          }else{
+            this.save()
+          }
+        })
+      } else {
+        await this.$refs.formRef.validate((valid, done, msg) => {
+          if (!valid) {
+            keys = Object.keys(msg);
+            dom = this.$refs.formRef.getPropRef(keys[0]);
+            dom.$el.scrollIntoView({
+              block: "center",
+              behavior: "smooth",
+            });
+            useMessage().error("您还有" + keys.length + "项信息未填写，请填写后再操作！");
+          }else{
+            this.save()
+          }
+          done()
+        })
+      }
+    },
+    save() {
+      this.state.loading = true;
+      try {
+        let params = this.getParams()
+        postAes(this.http, this.url.saveUrl, params).then(status => {
+          this.state.loading = false;
+          if (status) {
+            this.state.dialogVisible = false;
+            this.$emit('query')
+          }
+        })
+      } catch (e) {
+        console.error(e)
+      } finally {
+        this.state.loading = false;
+      }
+    },
+    setUUID(data) {
+      this.uuid = data.uuid;
+      this.subForeignKey = data.foreignKey
+    },
+    init(data) {
+      // 初始化动态插槽表格
+      data.form.column.forEach(column => {
+        if (column.selectDom === '22') {//表格选取
+          let slotObj = {
+            slotName: column.prop,
+            config: JSON.parse(column.attrs).olTableSelect,
+          }
+          this.dynamicSlotsField[column.prop] = column //收集继续动态改变值的字段信息，以便动态改变值时更新表单数据
+          this.dynamicSlotsTable.push(slotObj)//收集需要的动态插槽字段信息
+          const otherResult = slotObj.config.otherResult //返回额外参数字段配置
+          if (otherResult !== null && otherResult !== undefined && otherResult !== '') {
+            let otherResultArray = []
+            otherResult.split(",").forEach(m => {
+              let k = m.split(":")
+              otherResultArray.push({targetField: k[1], sourceField: k[0]})
+            });
+            this.dynamicSlotsOtherResult[column.prop] = otherResultArray
+          }
+        }
+      })
+      if (data.saveUrl) {
+        this.state.saveUrl = data.saveUrl.trim();
+        if (data.requestType) {
+          this.state.requestType = data.requestType;
+        }
+      }
+      this.setUUID(data);
+      this.state.edit = data['code'] == 'edit' == true;
+      this.state.title = data.title ? data.title : this.state.edit ? '编辑' : '新增';
+      //赋值弹窗宽度和高度
+      if (data.form.diaLogWidth) {
+        this.state.width = data.form.diaLogWidth
+      }
+      if (data.form.diaLogHeight) {
+        this.state.maxHeight = data.form.diaLogHeight + 'px'
+      }
+      if (data.form.title) {
+        this.state.title = data.form.title
+      }
+      this.state.dialogVisible = true;
+      this.form = data.form;
+      this.formData = data.formData;
+      for (let key of Object.keys(this.state)) {
+        if (data[key]) {
+          this.state[key] = data[key]
+        }
+      }
+    }, ok(e) {
+      for (let column of this.form.column) {
+        if (column.disabled == 1) {
+          column.disabled = true;
+        }
+        this.initDict(column);
+        parseJson(column);
+        for (let event of ['change']) {
+          if (column[event] && !(column[event] instanceof Function)) {
+            try {
+              column[event] = eval("(params)=>{this.$nextTick(()=>{" +
+                  "let formData = this.formData;console.log(formData);" +
+                  "let {value} = params;" + replaceDollarBraces(column[event]) +
+                  "})" +
+                  "}")
+            } catch (e) {
+              console.error(e)
+            }
+          }
+        }
+      }
+      this.setParameter(e)
+      if (this.state.edit) {
+        e.query()
+      }
+    }, setParameter(e) {
+      let param = {
+        [this.subForeignKey]: this.formData[this.state.deleteId]
+      }
+      e.parameter = {...e.parameter, ...param}
+    }, initDict(column) {
+      if (column.dictCode) {
+        column.dicData = dict.val(column.dictCode)
+        if (column.selectDom == 1) {
+          column.type = "select";
+        }
+        if (this.state.edit) {
+          return;
+        }
+        if (this.formData[column.prop] != undefined) {
+          this.formData[column.prop] = String(this.formData[column.prop])
+        } else if (column.value != undefined) {
+          this.formData[column.prop] = String(column.value)
+        } else {
+          //”number”、”string”、”boolean”、”object”、”function” 和 “undefined”
+          let dataType = typeof (this.formData[column.prop]);
+          // 数据字典与值类型不一致
+          if (this.formData[column.prop] != undefined && this.formData[column.prop] != '' && ["number", "boolean"].indexOf(dataType) != -1) {
+            this.formData[column.prop] = String(this.formData[column.prop])
+            column.value = this.formData[column.prop];
+          } else if (this.formData[column.prop] == undefined) {
+            setTimeout(() => {
+              if (column.dicData) {
+                for (let dicDatum of column.dicData) {
+                  if (dicDatum.isDefault == 1) {
+                    this.formData[column.prop] = dicDatum.value;
+                    column.value = this.formData[column.prop];
+                  }
+                }
+              }
+            }, 100)
+          }
+        }
+      } else if (column.dictTable || column.dictUrl) {
+        if (column.selectDom == 1) {
+          column.type = "select";
+        }
+        column.filterable = true;
+        column.dicData = [];
+        setTimeout(() => {
+          this.setDictTable(column, undefined);
+        }, 10)
+        if (column.type == 'tree') {
+          column.filterable = column.filterable == undefined ? true : column.clearable;
+          column.clearable = column.clearable == undefined ? true : column.clearable;
+        } else {
+          column.filterMethod = (e) => {
+            this.$nextTick(() => {
+              this.setDictTable(column, e);
+            })
+          };
+        }
+      }
+    },
+    setDictUrl(column, like) {
+      let dictUrl = column.dictUrl.split(",");
+      let url;
+      let label = 'label';
+      let value = 'value';
+      let parentId = 'parentId';
+      // get,url,label,value,parent_id
+      let doGet = true;
+      if (dictUrl.length > 1
+      ) {
+        if (dictUrl[0].toString().toLowerCase() == 'post') {
+          doGet = false;
+        }
+        url = dictUrl[1];
+        label = dictUrl[2];
+        value = dictUrl[3];
+        parentId = dictUrl[4];
+      } else {
+        url = dictUrl[0];
+      }
+
+      if (doGet) {
+        get(this.http, url + "?label=" + like).then((data) => {
+          column.dicData.length = 0;
+          if (column.type == 'tree') {
+            for (let da of data) {
+              da['label'] = da[label]
+              da['value'] = da[value]
+            }
+            column.dicData = handleTree(data, value, parentId);
+          } else {
+            data.forEach((d) => {
+              column.dicData.push(d);
+            })
+          }
+        })
+      } else {
+        let params = {}
+        if (like) {
+          params['label'] = like;
+        }
+        post(this.http, column.dictUrl, params, false).then(({data}) => {
+          column.dicData.length = 0;
+          if (column.type == 'tree') {
+            for (let da of data) {
+              da['label'] = da[label]
+              da['value'] = da[value]
+            }
+            column.dicData = handleTree(data, value, parentId);
+          } else {
+            data.forEach((da => {
+              da['label'] = da[label];
+              da['value'] = da[value];
+              column.dicData.push(da);
+            }))
+          }
+        })
+      }
+    }, setDictTable(column, like) {
+      if (column.dictTable && column.dictTable.toString().trim() != '') {
+        this.doSetDictTable(column, like);
+      } else if (column.dictUrl) {
+        this.setDictUrl(column, like);
+      }
+    },
+    doSetDictTable(column, like) {
+      let value = this.formData[column.prop];
+      /*String tableName;
+      String dataBase;
+      String label;
+      String value;
+      Map<String, Object> where;*/
+      // olp-vue-pro,system_users,nickname,id,parentId
+      let params = {}
+      let dictTable = JSON.parse(JSON.stringify(column.dictTable));
+      if (dictTable instanceof Object) {
+        params = dictTable;
+      } else {
+        dictTable = column.dictTable.split(",");
+        params["dbName"] = dictTable[0];
+        params["tableName"] = dictTable[1];
+        params["label"] = dictTable[2];
+        params["value"] = dictTable[3];
+        if (dictTable[4]) {
+          params["parentValue"] = dictTable[4];
+        }
+      }
+
+      if (like || value) {
+        if (!params.where) {
+          params.where = {};
+        }
+
+      }
+      if (!params["parentValue"]) {
+        if (like) {
+          params.where['_like_' + params["label"]] = like;
+        }
+        if (value) {
+          params.defaultValue = value;
+        }
+      }
+      initDictTable(this.http, params).then((data) => {
+        column.dicData.length = 0;
+        if (params["parentValue"]) {
+          column.dicData = handleTree(data, 'dictValue', 'parentValue');
+        } else {
+          data.forEach((d) => {
+            column.dicData.push(d);
+          })
+        }
+      })
+    },
+    /**
+     * 表格选择器回调函数
+     * @param data
+     */
+    olTableSelectChange(slotName, data) {
+      // console.info('插槽名称', slotName, '表格回传的数据', data)
+      // console.info('表格', this.form.column)
+      this.formData[slotName] = data.value;//修改表单数据，以便后续提交
+      if (typeof this.dynamicSlotsField[slotName].change === 'function') {
+        this.dynamicSlotsField[slotName].change(data.value)//字段数据更新回调
+      }
+      //给其他字段赋值
+      this.dynamicSlotsOtherResult[slotName]?.forEach(item => {
+        this.formData[item.targetField] = data.data[item.sourceField]
+      })
+    }
+
+  },
+  mounted() {
+    this.$nextTick(() => {
+      storeDict().init(this.http)
+    })
+  },
+  created() {
+    // console.info("我是主子表")
+  }
+};
+</script>
+<style scoped>
+.footer-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000; /* 确保在其他元素上方 */
+  text-align: center; /* 确保按钮居中 */
+}
+</style>

package/src/components/table/ol-pager/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <vxe-pager v-bind="$attrs">
+    <template #left>
+      <div class="page-left" v-if="$attrs.showDetails">
+        <div v-if="$attrs.htmlValue == undefined">
+<!--          提示：双击查看详细-->
+          <span v-if="$attrs.rowSelection != false"><!--，-->已选择
+               <a style="font-weight: 600">{{ $attrs.selectionRowsLength }}</a>项
+               <a v-if="$attrs.selectionRowsLength !== 0" style="margin-left:5px;color: blue;cursor: pointer"
+                  @click="$emit('clearSelected')">清空选择</a>
+              </span>
+        </div>
+        <div v-else v-html="$attrs.htmlValue"></div>
+      </div>
+      <slot name="left"></slot>
+    </template>
+    <template #right>
+      <slot name="right"></slot>
+    </template>
+  </vxe-pager>
+</template>
+<script>
+export default {
+  name: 'olPager',
+}
+</script>
+<style lang="less" scoped>
+/deep/ .vxe-pager--left-wrapper{
+  float: left;
+  //width: 50%;
+}
+/deep/ .vxe-pager--goto{
+  height: 26px !important;
+}
+.page-left {
+  position: relative;
+  float: left;
+  padding-right: 15px;
+  z-index: 10;
+}
+
+.vxe-pager {
+  height: 35px;
+  top: 5px;
+}
+</style>