olp-table 5.3.1 → 5.3.4

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

@@ -0,0 +1,537 @@
+<template>
+  <el-dialog
+      v-model="state.dialogVisible"
+      :title="state.title"
+      align-center
+      destroy-on-close
+      :width="state.width"
+      v-loading="state.loading"
+      :close-on-click-modal="false"
+  >
+    <el-scrollbar :max-height="state.maxHeight" style="padding-right: 10px">
+      <avue-form v-if="state.type == '0'" :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>
+      <VFormRender v-else :form-json="form" :form-data="formData"
+                   :option-data="optionData"
+                   ref="formRef">
+      </VFormRender>
+    </el-scrollbar>
+    <template #footer>
+      <el-button @click="state.dialogVisible = false;">返 回</el-button>
+      <el-button type="primary" :loading="state.loading" @click="doSave">保 存</el-button>
+    </template>
+  </el-dialog>
+</template>
+<script>
+import {setArrayObjectKeyValue} from "@/utils/object";
+import {useMessage} from "@/utils/message";
+import {get, post, postAes, put} from "@/utils/http/httpUtils";
+import {handleTree} from "@/utils/tree";
+import {doGetColumnAndValueMap} from "@/utils/util";
+import {initDictTable} from "@/api/dist";
+import {pinyin as olPinyin} from "pinyin-pro";
+import {storeDict} from "@/store/dict";
+import {storeDictType} from "@/store/dictType";
+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: "olForm",
+  components: {OlTableSelect},
+  inject: ['http'],
+  data() {
+    return {
+      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: '',
+        theme: 't1',
+        tableConfigId: '',
+        dbName: '',
+        tableName: '',
+      },
+    }
+  },
+  methods: {
+    hideColumn(prop) {
+      setArrayObjectKeyValue(this.form.column, 'display', false, prop)
+    },
+    showColumn(prop) {
+      setArrayObjectKeyValue(this.form.column, 'display', true, prop)
+    },
+    getParams() {
+      let params = {
+        tableConfigId: this.state.tableConfigId,
+        dbName: this.state.dbName,
+        tableName: this.state.tableName,
+        columnAndValueMap: {},
+      };
+      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.columnAndValueMap[prop] = value;
+        }
+      } else {
+        // for (let {prop} of this.form.column) {
+        //   let value = this.formData[prop];
+        //   if (value) {
+        //     if (value instanceof String) {
+        //       value = value.trim();
+        //     }
+        //     params.columnAndValueMap[prop] = value;
+        //   }
+        // }
+        params.columnAndValueMap = this.getTableUpdateValue(this.form.column, this.formData);
+      }
+      if (this.state.saveUrl) {
+        return params.columnAndValueMap;
+      }
+      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.whereMap[kvs[0]] = params.columnAndValueMap[kvs[1]]
+              delete params.columnAndValueMap[kvs[0]];
+            } else {
+              let val = params.columnAndValueMap[kvs];
+              params.whereMap[kvs] = val != undefined ? val : this.formData[kvs];
+              delete params.columnAndValueMap[kvs];
+            }
+          }
+        } else {
+          // 编辑时默认更新条件为id
+          params.whereMap['id'] = this.formData['id'];
+          if (!params.whereMap['id']) {
+            params.whereMap['id'] = this.formData['t1_id'];
+          }
+          delete params.columnAndValueMap['id'];
+        }
+      } else if (this.state.updateKey) {
+        let split = this.state.updateKey.split(',');
+        params['genIdMap'] = {};
+        for (let kv of split) {
+          let kvs = kv.split("=");
+          if (kvs.length == 2) {
+            params['genIdMap'][kvs[0]] = kvs[1]
+          } else {
+            params['genIdMap'][kvs[0]] = 'uuid'
+          }
+        }
+      }
+      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 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()
+        })
+      }
+    },
+    async save() {
+      this.state.loading = true;
+      try {
+        let params = this.getParams()
+        let url = this.state.saveUrl ? this.state.saveUrl : this.state.edit ? '/online/crudAes/modify' : '/online/crudAes/save'
+        if (this.state.requestType.toLowerCase() == "put") {
+          await put(this.http, url, params).then(status => {
+            this.state.loading = false;
+            if (status) {
+              this.state.dialogVisible = false;
+              this.$emit('query')
+            }
+          })
+        } else if (this.state.saveUrl) {
+          await post(this.http, url, params).then(status => {
+            this.state.loading = false;
+            if (status) {
+              this.state.dialogVisible = false;
+              this.$emit('query')
+            }
+          })
+        } else {
+          await postAes(this.http, url, 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;
+      }
+    },
+    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.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]
+        }
+      }
+      if (this.state.type == 0) {
+        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)
+              }
+            }
+          }
+        }
+      }
+    },
+    initDict(column) {
+      if (column.dictCode) {
+        column.dicData = dict.val(column.dictCode)
+        if (column.selectDom == 1) {
+          column.type = "select";
+        }
+        //”number”、”string”、”boolean”、”object”、”function” 和 “undefined”
+        let dataType = typeof (this.formData[column.prop]);
+        if (["number", "boolean"].indexOf(dataType) != -1) {
+          this.formData[column.prop] = String(this.formData[column.prop])
+          column.value = this.formData[column.prop];
+        }
+
+        if (this.state.edit) {
+          return;
+        }
+        if (this.formData[column.prop] != undefined) {
+          this.formData[column.prop] = String(this.formData[column.prop])
+          column.value = this.formData[column.prop]
+        } else if (column.value != undefined) {
+          this.formData[column.prop] = String(column.value)
+        } 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() {
+  }
+};
+</script>