@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/dist/src/views/Add.vue.js

@@ -0,0 +1,734 @@
+import { createVNode, resolveComponent, createTextVNode, isVNode } from "vue";
+import { ADD_META } from "@epxing/core/src/store/actions";
+import { evalWith } from "@epxing/utils/src/eval-with";
+import component from "@epxing/core/src/mixins/component";
+import { MobileActionSheet } from "@epxing/components/src/mobile";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const _sfc_main = {
+  name: "epx-add",
+  mixins: [component],
+  $componentType: "page",
+  link: "",
+  // 表单关联对象
+  linkAddFlag: true,
+  linkSubs: null,
+  pageType: "ADD",
+  // 页面模式
+  saveSuccessText: "新增成功",
+  updateSuccessText: "编辑成功",
+  subAddFlag: "v_sublist",
+  subComponent: "sub-list",
+  saveAction: "save",
+  updateAction: "update",
+  backTarget: "list",
+  // 提交成功返回页面
+  addPage: "add",
+  submitParams: {},
+  // 提交参数
+  // 表单区域
+  formConfigs: {
+    titleFlag: true,
+    fieldGroups: [],
+    fieldConfigs: {},
+    // 字段配置
+    column: "2",
+    operates: [{
+      // 操作按钮
+      text: "保存",
+      ui: "primary",
+      handler: "submitForm",
+      option: 'pageType==="ADD"'
+    }, {
+      // 操作按钮
+      text: "保存",
+      ui: "primary",
+      handler: "submitForm",
+      option: 'pageType==="EDIT"'
+    }, {
+      text: "编辑",
+      ui: "primary",
+      handler: "editEntity",
+      option: 'pageType==="DETAIL"'
+    }, {
+      text: "返回",
+      cls: "btn_hollow",
+      handler: "backPage"
+    }]
+  },
+  props: {
+    defaultValue: Object
+  },
+  data() {
+    return {
+      renderComponents: [],
+      fieldGroups: [],
+      data: {},
+      foldList: [],
+      showSubList: [],
+      activeName: "base",
+      reload: false,
+      showPage: true,
+      showMoreOperates: false,
+      submitParams: {},
+      isRequesting: false
+    };
+  },
+  computed: {
+    formConfigs() {
+      const {
+        formConfigs = {}
+      } = this.pageConfig;
+      return formConfigs;
+    },
+    pageType() {
+      const {
+        pageType: defaultPageType
+      } = this.pageConfig;
+      const {
+        pageType = defaultPageType
+      } = this.$query;
+      return pageType;
+    },
+    operates() {
+      const {
+        operates = []
+      } = this.formConfigs;
+      return operates;
+    },
+    actionOperates() {
+      const {
+        operates = []
+      } = this.formConfigs;
+      const actionOperates = [...operates];
+      actionOperates.map((item) => item.name = item.text);
+      return actionOperates.filter((item) => this.buttonFlag(item));
+    },
+    buttonFlag() {
+      return ({
+        option,
+        rightCode
+      }) => {
+        let flag = true;
+        if (option) flag = eval(`this.${option}`);
+        return flag;
+      };
+    },
+    linkAttrs() {
+      console.log(this.pageConfig);
+      const {
+        linkSubs
+      } = this.pageConfig;
+      let linkAttrs = [];
+      if (!this.meta) return linkAttrs;
+      if (!linkSubs) {
+        if (this.pageType === "DETAIL") {
+          linkAttrs = this.meta.getRelatedEntitysOfDetail();
+        } else if (this.pageType === "EDIT") {
+          linkAttrs = this.meta.getRelatedEntitysOfEdit();
+        }
+      } else {
+        linkSubs.forEach((item) => {
+          const linkAttr = this.meta.getRelationByFlag(item);
+          if (linkAttr) {
+            linkAttrs.push(linkAttr);
+          }
+        });
+      }
+      return linkAttrs;
+    },
+    getMetaIdByRelation() {
+      return (relationId) => {
+        let relation = null;
+        let metaId = this.$metaId;
+        const relations = relationId.split("#");
+        relations.forEach(async (item) => {
+          let meta = this.getMeta(metaId);
+          if (!meta) {
+            meta = await this.$store.dispatch({
+              type: ADD_META,
+              metaId
+            });
+          }
+          relation = meta.getRelationByFlag(item);
+          metaId = relation.entityA;
+        });
+        return metaId;
+      };
+    },
+    parentId() {
+      return (relationId) => {
+        let subKey = this.$metaKey;
+        if (relationId.includes("#")) {
+          const relations = relationId.split("#");
+          const relation = this.meta.getRelationByFlag(relations[0]);
+          var linkAttri = relation.linkAttri.split("@")[0];
+          subKey = this.meta.getAttriNameById(linkAttri);
+        }
+        const id = this.data[subKey];
+        return id;
+      };
+    }
+  },
+  watch: {
+    reload(v) {
+      if (v) {
+        this.showPage = false;
+        this.$nextTick(() => {
+          const timer = setTimeout(() => {
+            this.showPage = true;
+            this.reload = false;
+            clearTimeout(timer);
+          }, 0);
+        });
+      }
+    }
+  },
+  methods: {
+    getFieldConfig() {
+      const {
+        fieldGroups,
+        fieldConfigs = {}
+      } = this.formConfigs;
+      const {
+        fieldConfigs: routeFieldConfigs = {}
+      } = this.$query;
+      if (!fieldGroups || fieldGroups.length === 0) {
+        fieldGroups.push({
+          title: "基本信息"
+        });
+      }
+      fieldGroups.forEach(async (item, index) => {
+        if (item.contentType) {
+          this.fieldGroups[index] = {
+            ...item
+          };
+        } else {
+          this.$FieldFactory.createFields({
+            defaultFieldConfigs: {
+              ...routeFieldConfigs,
+              ...fieldConfigs
+            },
+            meta: this.meta,
+            metaId: this.$metaId,
+            pageType: item.pageType || this.pageType,
+            fields: item.children
+          }).then((data) => {
+            this.fieldGroups[index] = {
+              ...item,
+              children: [...data]
+            };
+          });
+        }
+      });
+    },
+    getData() {
+      const {
+        id,
+        defaultValue = {},
+        initData = {}
+      } = this.$query;
+      const {
+        link,
+        queryParams = {}
+      } = this.pageConfig;
+      const params = {
+        entityId: this.$metaId,
+        id
+      };
+      if (link) params.link = link;
+      if (this.pageType === "ADD") {
+        params.action = "getDefault";
+        delete params.id;
+      }
+      this.$http.get({
+        ...params,
+        ...queryParams
+      }).then((res) => {
+        if (res && res.data) {
+          this.data = {
+            ...initData,
+            ...this.data,
+            ...res.data
+          };
+        }
+        if (defaultValue && this.pageType === "ADD") {
+          this.data = {
+            ...defaultValue,
+            ...this.data
+          };
+        }
+      });
+    },
+    editEntity() {
+      const {
+        flag: defaultFlag,
+        pageId
+      } = this.$query;
+      const {
+        editPageFlag = defaultFlag,
+        addPage
+      } = this.pageConfig;
+      let key = "ID";
+      if (this.meta) {
+        key = this.meta.getKey();
+      }
+      const query = {
+        metaId: this.$metaId,
+        flag: editPageFlag,
+        pageType: "EDIT",
+        pageId,
+        component: addPage,
+        id: this.data[key],
+        callback: this.getData
+      };
+      this.$createPage({
+        ...query
+      });
+    },
+    applyEntity(buttonConfig) {
+      const {
+        submitParams: querySumitParams = {}
+      } = this.$query;
+      const {
+        submitParams: pageSubmitParams = {},
+        saveSuccessText,
+        processCode: pageProcessCode,
+        startNode: pageStartNode,
+        applyAction = "apply"
+      } = this.pageConfig;
+      const {
+        processCode = pageProcessCode,
+        startNode = pageStartNode,
+        result = "1",
+        action = applyAction
+      } = buttonConfig;
+      const params = {
+        action,
+        entityId: this.$metaId,
+        processCode,
+        startNode,
+        result
+      };
+      const formParams = this.getFormData();
+      const submitParams = this.$_.assignWith(this.$formatParams(pageSubmitParams), formParams, (pageSubmitValue, formValue) => {
+        return formValue || pageSubmitValue;
+      });
+      if (!formParams) return;
+      this.$http.apply({
+        ...params,
+        ...this.submitParams,
+        ...querySumitParams,
+        ...submitParams
+      }).then((data) => {
+        this.$message.success(saveSuccessText);
+        this.backPage({
+          reload: true
+        });
+      }).catch((err) => {
+        this.$message.error(err.message || "处理失败");
+      });
+    },
+    editApplyEntity() {
+      const {
+        applyPageFlag = "v_edit_apply"
+      } = this.pageConfig;
+      let key = "ID";
+      if (this.meta) {
+        key = this.meta.getKey();
+      }
+      const query = {
+        metaId: this.$metaId,
+        flag: applyPageFlag,
+        pageType: "EDIT",
+        component: "entity-edit-apply",
+        id: this.data[key]
+      };
+      this.$createPage({
+        ...query
+      });
+    },
+    getFormData() {
+      let submitFlag = true;
+      const params = {};
+      const {
+        hiddenFields = []
+      } = this.pageConfig;
+      hiddenFields.forEach((field) => {
+        if (field.attriName && field.value) {
+          params[field.attriName] = field.value;
+        }
+      });
+      for (let index = 0; index < this.fieldGroups.length; index++) {
+        const fieldItem = this.fieldGroups[index];
+        if (!fieldItem.contentType && fieldItem.children) {
+          const form = this.$refs[`form${index}`];
+          for (let i = 0; i < fieldItem.children.length; i++) {
+            const fieldConfig = fieldItem.children[i];
+            const field = fieldItem.children[i].attriName;
+            if (this.pageType === "ADD" || this.pageType === "EDIT") {
+              form.validate((valid, err) => {
+                if (!valid) {
+                  for (const key in err) {
+                    const errMessgae = err[key][0];
+                    this.$message.error(errMessgae.message);
+                    submitFlag = false;
+                    return;
+                  }
+                }
+              });
+            }
+            if (submitFlag === false) {
+              break;
+            }
+            const formValue = form.model.data[field];
+            if (!field.includes("#")) {
+              let submitValue = formValue;
+              if (Array.isArray(formValue)) {
+                submitValue = formValue[formValue.length - 1];
+              }
+              params[fieldConfig.name || `bean.${field}`] = submitValue || "";
+            }
+          }
+        }
+      }
+      return submitFlag ? params : false;
+    },
+    submitForm() {
+      const {
+        submitParams: querySumitParams = {}
+      } = this.$query;
+      const {
+        submitParams: pageSubmitParams = {},
+        saveSuccessText,
+        updateSuccessText,
+        saveAction,
+        updateAction
+      } = this.pageConfig;
+      const params = {
+        action: saveAction,
+        entityId: this.$metaId
+      };
+      if (this.data[this.$metaKey]) {
+        params[`bean.${this.$metaKey}`] = this.data[this.$metaKey];
+      }
+      const formParams = this.getFormData();
+      let submitParams = this.$_.assignWith(this.$formatParams(pageSubmitParams), formParams, (pageSubmitValue, formValue) => {
+        return formValue || pageSubmitValue;
+      });
+      submitParams = this.$_.assignWith(submitParams, this.submitParams, (submitValue, _submitValue) => {
+        return submitValue || _submitValue;
+      });
+      if (!formParams) return;
+      if (this.pageType === "EDIT") params.action = updateAction;
+      if (this.isRequesting) return;
+      this.isRequesting = true;
+      this.$http.save({
+        ...params,
+        ...querySumitParams,
+        ...submitParams
+      }).then((data) => {
+        this.isRequesting = false;
+        this.$message.success(this.pageType === "EDIT" ? updateSuccessText : saveSuccessText);
+        this.backPage();
+      }).catch((err) => {
+        this.isRequesting = false;
+        this.$message.error(err.message || "处理失败");
+      });
+    },
+    /**
+       * 通用请求
+       * @param action 请求命令
+       * @param metaId 请求对象，默认为当前页面对象
+       * @param num 选中记录数(1,必须选中且只能选中一条记录；n：必须选中至少一条记录；0不需要选中记录)
+       * @param comfirmMsg 操作提交之前的确认信息（如果为空，就不需要确认）
+       * @param params #[列表对象的某字段名]"，(如果是选中的多条记录，将字段值拼成一个字符串，用逗号隔开) "$[当前页面的某变量名]"
+       * @param successMsg 操作成功的提示
+       * @param failMsg 操作失败的提示
+       * @param row 操作的列
+       */
+    commonAction({
+      action,
+      metaId = this.$metaId,
+      num = 0,
+      confirmMsg = null,
+      params = {},
+      successMsg = "处理成功",
+      failMsg = "处理失败"
+    }, row) {
+      const that = this;
+      const formatParams = {};
+      for (const key in params) {
+        let value = params[key];
+        if (/$\[(.+)\]/.test(params[key])) {
+          value = params[key].replace(/$\[(.+)\]/, (match, key2) => {
+            return evalWith(`that.${key2}`, {
+              that
+            }) || evalWith(`that.query.${key2}`, {
+              that
+            });
+          });
+        }
+        if (/#\[(.+)\]/.test(params[key])) {
+          value = params[key].replace(/#\[(.+)\]/, (match, key2) => {
+            return this.data[key2];
+          });
+        }
+        formatParams[key] = value;
+      }
+      const submitFn = () => {
+        const formParams = this.getFormData();
+        if (!formParams) return;
+        this.$http.$request({
+          action,
+          entityId: metaId,
+          ...formatParams,
+          ...formParams
+        }).then(() => {
+          this.$message.success(successMsg);
+          this.backPage();
+        }).catch((err) => {
+          this.$message.error(err.message || failMsg);
+        });
+      };
+      if (confirmMsg) {
+        this.$confirm(confirmMsg, this.$t("hint"), {
+          confirmButtonText: this.$t("confirm"),
+          cancelButtonText: this.$t("cancel"),
+          type: "warning"
+        }).then(() => {
+          submitFn();
+        });
+      } else {
+        submitFn();
+      }
+    },
+    verify() {
+      let flag2 = true;
+      for (let i = 0; i < this.fieldGroups.length; i++) {
+        const fields = this.fieldGroups[i];
+        if (flag2 === false) {
+          break;
+        }
+        if (!fields.contentType) {
+          for (let j = 0; j < fields.children.length; j++) {
+            const field = fields.children[j];
+            if (field.isRequired === "1" && field.showFlag) {
+              let isShow = true;
+              for (const key in field.showFlag) {
+                if (field.showFlag[key] !== (this.data[key] || this.updateData[key])) {
+                  isShow = false;
+                }
+              }
+              if (isShow && !(this.data[field.attriName] || this.updateData[field.attriName])) {
+                flag2 = false;
+                this.$message.error(`请填写${field.attriLabel}`);
+                break;
+              }
+            } else if (field.isRequired === "1" && !(this.data[field.attriName] || this.updateData[field.attriName])) {
+              flag2 = false;
+              this.$message.error(`请填写${field.attriLabel}`);
+              break;
+            }
+          }
+        }
+      }
+      return flag2;
+    },
+    foldFn(key) {
+      const index = this.foldList.indexOf(key);
+      if (index === -1) {
+        this.foldList.push(key);
+      } else {
+        this.foldList.splice(index, 1);
+      }
+    },
+    subAddEntity(index) {
+      const subListPage = this.$refs["sublist" + index];
+      if (subListPage) {
+        const subList = subListPage.$refs.component;
+        if (subList) subList.addEntity();
+      }
+    },
+    init() {
+      if (this.linkAttrs && this.linkAttrs.length > 0) {
+        this.$bus.on("reload", () => {
+          this.reload = true;
+        });
+      }
+      this.getFieldConfig();
+      this.getData();
+    },
+    renderForm(fieldItem, index) {
+      return createVNode("div", null, [createVNode(resolveComponent("epx-table-form"), {
+        "ref": `form${index}`,
+        "fieldsConfigs": fieldItem.children,
+        "modelValue": this.data,
+        "onUpdate:modelValue": ($event) => this.data = $event,
+        "column": fieldItem.column || this.formConfigs.column
+      }, null)]);
+    },
+    renderContent() {
+      const {
+        subAddFlag,
+        subComponent
+      } = this.pageConfig;
+      return createVNode("div", {
+        "class": "form-container"
+      }, [this.fieldGroups.map((fieldItem, index) => createVNode("div", {
+        "class": "form-item",
+        "key": index
+      }, [fieldItem && (fieldItem.contentType !== "sublist" || fieldItem.contentType !== "sub" || fieldItem.contentType.includes("sub") && this.pageType !== "ADD") && createVNode("div", null, [fieldItem.title && this.formConfigs.titleFlag && createVNode("p", {
+        "class": "form-title"
+      }, [createVNode("span", {
+        "class": "form-title-border"
+      }, [fieldItem.title]), createVNode("i", {
+        "class": `el-icon-caret-top ${this.foldList.includes(index) ? "fold" : ""}`,
+        "onClick": this.foldFn.bind(this, index)
+      }, null), (fieldItem.contentType === "sublist" || fieldItem.contentType === "sub") && this.pageType !== "DETAIL" && createVNode("span", {
+        "class": "sub-add-btn",
+        "onClick": this.subAddEntity.bind(this, index)
+      }, [createTextVNode("+ 新增")])]), createVNode("div", {
+        "style": this.foldList.includes(index) ? {
+          height: 0,
+          padding: 0
+        } : {},
+        "class": `form-content ${(fieldItem.contentType === "sublist" || fieldItem.contentType === "sub") && "no-padding"}`
+      }, [fieldItem.contentType === "sublist" ? createVNode("div", null, [this.data[this.$metaKey] ? createVNode(resolveComponent("epx-page"), {
+        "ref": `sublist${index}`,
+        "inline": true,
+        "formSub": true,
+        "pageType": this.pageType,
+        "pageId": fieldItem.pageId,
+        "parentMetaId": this.$metaId,
+        "metaId": this.getMetaIdByRelation(fieldItem.children[0]),
+        "flag": fieldItem.flag || subAddFlag,
+        "relationId": fieldItem.children[0],
+        "parentId": this.parentId(fieldItem.children[0]),
+        "component": subComponent,
+        "class": "sublist"
+      }, null) : null]) : fieldItem.contentType === "sub" ? createVNode("div", null, [this.data[this.$metaKey] ? createVNode(resolveComponent("epx-page"), {
+        "ref": `sublist${index}`,
+        "type": "component",
+        "inline": true,
+        "formSub": true,
+        "pageType": this.pageType,
+        "parentMetaId": this.$metaId,
+        "metaId": this.getMetaIdByRelation(fieldItem.children[0]),
+        "config": fieldItem.config,
+        "relationId": fieldItem.children[0],
+        "parentId": this.parentId(fieldItem.children[0]),
+        "component": subComponent,
+        "class": "sublist"
+      }, null) : null]) : (
+        //  :column="formConfigs.fieldGroups[index].column||formConfigs.column"
+        // <epx-form ref={`form${index}`} fieldConfigs={fieldItem.children} value={this.data} column={this.formConfigs.column}></epx-form>
+        // <epx-form ref={`form${index}`} fieldConfigs={fieldItem.children} value={this.data} column={fieldItem.column || this.formConfigs.column}></epx-form>
+        this.renderForm(fieldItem, index)
+      )])])])), this.$isMobile && this.actionOperates.length > 0 && createVNode("div", {
+        "class": "mobile-button-container"
+      }, [createVNode("div", {
+        "class": "mobile-button-inner"
+      }, [this.actionOperates.length <= 2 ? this.actionOperates.map((operate) => {
+        if (this.buttonFlag(operate)) {
+          return createVNode(resolveComponent("el-button"), {
+            "size": "default",
+            "key": operate.text,
+            "type": operate.ui,
+            "onClick": this.$handler.bind(this, operate)
+          }, {
+            default: () => [operate.text]
+          });
+        }
+      }) : createVNode("div", {
+        "style": {
+          flex: 1,
+          display: "flex"
+        }
+      }, [createVNode(resolveComponent("el-button"), {
+        "size": "default",
+        "onClick": () => this.showMoreOperates = true
+      }, {
+        default: () => [createTextVNode("操作")]
+      }), createVNode(MobileActionSheet, {
+        "modelValue": this.showMoreOperates,
+        "actions": this.actionOperates,
+        "cancelText": "取消",
+        "closeOnClickAction": true,
+        "onUpdate:modelValue": (v) => this.showMoreOperates = v,
+        "onSelect": (operate) => this.$handler(operate)
+      }, null)])])]), !this.$isMobile && this.operates.length > 0 && createVNode("div", {
+        "class": "button-container"
+      }, [this.operates.map((operate) => {
+        if (this.buttonFlag(operate)) {
+          return createVNode(resolveComponent("el-button"), {
+            "size": "default",
+            "key": operate.text,
+            "type": operate.ui,
+            "onClick": this.$handler.bind(this, operate)
+          }, {
+            default: () => [operate.text]
+          });
+        }
+      })])]);
+    },
+    renderTabs() {
+      let _slot;
+      const {
+        subAddFlag,
+        subComponent
+      } = this.pageConfig;
+      return createVNode("div", {
+        "class": "tabs-container"
+      }, [createVNode(resolveComponent("el-tabs"), {
+        "class": "tabs",
+        "modelValue": this.activeName,
+        "type": "card",
+        "lazy": true
+      }, {
+        default: () => [createVNode(resolveComponent("el-tab-pane"), {
+          "label": "基本信息",
+          "name": "base"
+        }, _isSlot(_slot = this.renderContent()) ? _slot : {
+          default: () => [_slot]
+        }), this.linkAttrs.map((linkAttr, index) => createVNode(resolveComponent("el-tab-pane"), {
+          "key": linkAttr.flag,
+          "lazy": true,
+          "label": linkAttr.title,
+          "name": linkAttr.flag
+        }, {
+          default: () => [(this.activeName !== linkAttr.flag || this.showPage) && this.data[this.$metaKey] && createVNode(resolveComponent("epx-page"), {
+            "ref": `subtablist${index}`,
+            "inline": true,
+            "parentMetaId": this.$metaId,
+            "metaId": this.getMetaIdByRelation(linkAttr.flag),
+            "flag": subAddFlag,
+            "relationId": linkAttr.flag,
+            "parentId": this.parentId(linkAttr.flag),
+            "component": subComponent,
+            "class": "sublist"
+          }, null)]
+        }))]
+      })]);
+    }
+  },
+  created() {
+    if (this.linkAttrs.length > 0 && this.pageConfig.linkAddFlag) {
+      this.renderComponents.push(this.renderTabs);
+    } else {
+      this.renderComponents.push(this.renderContent);
+    }
+    this.init();
+  },
+  render() {
+    return createVNode("div", {
+      "class": "container list"
+    }, [this.renderComponents.map((renderFn) => renderFn())]);
+  },
+  beforeUnmount() {
+  }
+};
+export {
+  _sfc_main as default
+};