olp-table 5.3.1 → 5.3.4

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

@@ -0,0 +1,455 @@
+<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="state.form"
+                 v-model="state.formData"></avue-form>
+      <VFormRender v-else :form-json="state.form" :form-data="state.formData"
+                   :option-data="state.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>
+export default {
+  name: "olForm",
+};
+</script>
+<script scope setup>
+import {defineExpose, reactive, nextTick, defineEmits, ref, inject, onMounted} from "vue";
+import {storeDict} from "@/store/dict";
+import {pinyin} from "pinyin-pro";
+import {useMessage} from "@/utils/message";
+import {get, post, put} from "@/utils/http/httpUtils";
+import {handleTree} from "@/utils/tree";
+import {initDictTable} from "@/api/dist";
+import {setArrayObjectKeyValue} from "@/utils/object";
+
+const dict = storeDict();
+onMounted(() => {
+  dict.init(http)
+})
+const events = ['change'];
+const olPinyin = pinyin;
+const http = inject("http")
+const olMsg = useMessage() // 消息弹窗
+const state = reactive({
+  key: 1,
+  loading: false,
+  fullscreen: false,
+  dialogVisible: false,
+  title: "",
+  width: '60%',
+  comCommit: true,
+  maxHeight: '400px',
+  type: '0',
+  edit: false,
+  form: {
+    column: []
+  },
+  saveUrl: '',
+  formData: {},
+  requestType: 'post',
+  updateKey: '',
+  theme: 't1',
+  tableConfigId: '',
+  optionData: {},
+})
+const formRef = ref()
+
+const hideColumn = (prop) => {
+  setArrayObjectKeyValue(state.form.column, 'display', false, prop)
+}
+const showColumn = (prop) => {
+  setArrayObjectKeyValue(state.form.column, 'display', true, prop)
+}
+
+function getParams() {
+  let params = {
+    tableConfigId: state.tableConfigId,
+    columnAndValueMap: {},
+  };
+
+  if (state.type != '0') {
+    let formData = formRef.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 state.form.column) {
+      let value = state.formData[prop];
+      if (value) {
+        if (value instanceof String) {
+          value = value.trim();
+        }
+        params.columnAndValueMap[prop] = value;
+      }
+    }
+  }
+
+  if (state.saveUrl) {
+    return params.columnAndValueMap;
+  }
+  if (state.edit) {
+    params.whereMap = {}
+    if (state.updateKey) {
+      let split = 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 : state.formData[kvs];
+          delete params.columnAndValueMap[kvs];
+        }
+      }
+    } else {
+      // 编辑时默认更新条件为id
+      params.whereMap['id'] = state.formData['id'];
+      if (!params.whereMap['id']) {
+        params.whereMap['id'] = state.formData['t1_id'];
+      }
+      delete params.columnAndValueMap['id'];
+    }
+  }
+  return params
+}
+
+async function doValidate() {
+  let dom = undefined;
+  let keys = [];
+  let status = true;
+  if (state.type != '0') {
+    await formRef.value.getNativeForm().validate((valid, msg) => {
+      if (!valid) {
+        keys = Object.keys(msg);
+        dom = formRef.value.getWidgetRef(keys[0]);
+        status = false;
+      }
+    })
+  } else {
+    await formRef.value.validate((valid, done, msg) => {
+      if (!valid) {
+        keys = Object.keys(msg);
+        dom = formRef.value.getPropRef(keys[0]);
+        status = false;
+      }
+      done()
+    })
+  }
+  if (dom) {
+    // 定位代码
+    dom.$el.scrollIntoView({
+      block: "center",
+      behavior: "smooth",
+    });
+    olMsg.error("您还有" + keys.length + "项信息未填写，请填写后再操作！");
+    status = false;
+  }
+  return status
+}
+
+async function doSave() {
+  let validate = await doValidate();
+  if (!validate) {
+    return
+  }
+  state.loading = true;
+  try {
+    let params = getParams()
+    let url = state.saveUrl ? state.saveUrl : state.edit ? '/online/crud/modify' : '/online/crud/save'
+    if (state.requestType.toLowerCase() == "put") {
+      await put(http, url, params).then(status => {
+        state.loading = false;
+        if (status) {
+          state.dialogVisible = false;
+          emits('query')
+        }
+      })
+    } else {
+      await post(http, url, params).then(status => {
+        state.loading = false;
+        if (status) {
+          state.dialogVisible = false;
+          emits('query')
+        }
+      })
+    }
+  } catch (e) {
+    console.error(e)
+  } finally {
+    state.loading = false;
+  }
+
+}
+
+function init(data) {
+  if (data.saveUrl) {
+    state.saveUrl = data.saveUrl.trim();
+    if (data.requestType) {
+      state.requestType = data.requestType;
+    }
+  }
+  state.key++;
+  state.edit = data['code'] == 'edit' == true;
+  state.title = data.title ? data.title : state.edit ? '编辑' : '新增';
+  //赋值弹窗宽度和高度
+  if (data.form.diaLogWidth) {
+    state.width = data.form.diaLogWidth
+  }
+  if (data.form.diaLogHeight) {
+    state.maxHeight = data.form.diaLogHeight + 'px'
+  }
+  if (data.form.title) {
+    state.title = data.form.title
+  }
+  state.dialogVisible = true
+  for (let key of Object.keys(state)) {
+    if (data[key]) {
+      state[key] = data[key]
+    }
+  }
+  if (state.type == 0) {
+    for (let column of state.form.column) {
+      if (column.disabled == 1) {
+        column.disabled = true;
+      }
+      initDict(column);
+      parseJson(column);
+      for (let event of events) {
+        if (column[event] && !(column[event] instanceof Function)) {
+          try {
+            column[event] = getFunction(column[event])
+          } catch (e) {
+            console.error(e)
+          }
+        }
+      }
+    }
+  }
+}
+
+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)
+    }
+  }
+}
+
+function initDict(column) {
+  if (column.dictCode) {
+    column.dicData = dict.val(column.dictCode)
+    if (column.selectDom == 1) {
+      column.type = "select";
+    }
+    if (state.edit) {
+      return;
+    }
+    if (column.value != undefined) {
+      state.formData[column.prop] = String(column.value)
+    } else {
+      //”number”、”string”、”boolean”、”object”、”function” 和 “undefined”
+      let dataType = typeof (state.formData[column.prop]);
+      // 数据字典与值类型不一致
+      if (state.formData[column.prop] != undefined && state.formData[column.prop] != '' && ["number", "boolean"].indexOf(dataType) != -1) {
+        state.formData[column.prop] = String(state.formData[column.prop])
+        column.value = state.formData[column.prop];
+      } else if (state.formData[column.prop] == undefined) {
+        setTimeout(() => {
+          if (column.dicData) {
+            for (let dicDatum of column.dicData) {
+              if (dicDatum.isDefault == 1) {
+                state.formData[column.prop] = dicDatum.value;
+                column.value = state.formData[column.prop];
+              }
+            }
+          }
+        }, 100)
+      }
+    }
+  } else if (column.dictTable || column.dictUrl) {
+    if (column.selectDom == 1) {
+      column.type = "select";
+    }
+    column.filterable = true;
+    column.dicData = [];
+    setTimeout(() => {
+      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) => {
+        nextTick(() => {
+          setDictTable(column, e);
+        })
+      };
+    }
+  }
+}
+
+const doSetDictTable = (column, like) => {
+  let value = state.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(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);
+      })
+    }
+  })
+}
+const 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(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(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);
+        }))
+      }
+    })
+  }
+}
+const setDictTable = (column, like) => {
+  if (column.dictTable && column.dictTable.toString().trim() != '') {
+    doSetDictTable(column, like);
+  } else if (column.dictUrl) {
+    setDictUrl(column, like);
+  }
+
+}
+const aws = async () => {
+  await nextTick()
+}
+
+function getFunction(v) {
+  return eval(" async (params)=>{await aws();let {formData} = state;let {value} = params;" + replaceDollarBraces(v) + "}")
+}
+
+function replaceDollarBraces(str) {
+  return str.toString().replace(/\$\{?([^{}]+)\}?/g, function (match, innerContent) {
+    return innerContent ? `'${innerContent}'` : match;
+  });
+}
+
+
+// 子组件调用父组件
+const emits = defineEmits(['emits']) //声明 emits
+
+// 对外暴露
+defineExpose({
+  init,
+})
+</script>