yinghe-lowcode-zln/src/views/demo/baseModalMixin.js

基于vue、ant-design-vue,datagrid的低代码平台

import { ctos3Api, ctos3CommonApi } from "../../../packages/api/manage"
import { packageRpcParam } from "../../../packages/utils/util";

export default {
  name: "BaseModal",
  props: {
    // 弹窗页面操作按钮'端接口'
    serviceName: {
      type: String,
      default: "codeService",
    },
    initPosition: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    // 是否可以穿透mask,点击modal的下一层
    canClickMask: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    leftPosition: {
      type: String,
      default: () => {
        return "";
      },
    },
    topPosition: {
      type: String,
      default: () => {
        return "";
      },
    },
    // 码表特殊处理''
    baseCodeType: {
      type: String,
      default: "",
    },

    //操作按钮后端方法
    url: {
      type: Object,
      default: () => {
        return {
          add: "save",
          update: "updateById",
        };
      },
    },
    //弹窗操作按钮
    operateBtn: {
      type: Array,
      default: () => [],
    },
    /* eslint-disable */
    dynamicData: {
      type: Object,
    },

    confirm: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false,
      model: {},
      disableSubmit: false,
      confirmLoading: false,
      pageIdTemp: "",
      enableList: [],
      disableList: [],
      ctos3CommonApi: ctos3CommonApi,
      packageRpcParam: packageRpcParam,
      uploadUrl: process.env.VUE_APP_UPLOAD_BASE_URL,
      operateBizBtn: this.operateBtn,
    };
  },
  methods: {
    // 显示
    show(title, width, type, pageId){
      this.dialogTitle = title
      this.dialogWidth = width,
      this.pageIdTemp = pageId
      this.edit({})
    },
    //新增方法
    add(record) {
      this.edit(record ? record : {});
    },
    //编辑初始化方法
    edit(record) {
      this.confirmLoading = true;
      this.dynamicData.commonFunc = this.commonFunc;
      this.model = Object.assign({}, record);
      this.dynamicData.record = record;
      if (this.model.hasOwnProperty("tailInfos")) {
        Object.assign(this.model, this.model["tailInfos"]);
        delete this.model.tailInfos;
      }
      this.initForm(record);
    },
    // 初始化表单设计器的内容，数据维护在T_UM_FORM_CONFIG表中
    initForm(record) {
      this.visible = true;
      this.$nextTick(() => {
        this.callInMountedCustom()
        this.setData(record);
        this.disable(this.disableList);
        this.enable(this.enableList);
        this.disableList = [];
        this.enableList = [];
        if (!record.id) {
          this.reset();
        }
        this.confirmLoading = false;
      })
      
    },
    close() {
      this.$emit("close");
      this.visible = false;
      this.disableSubmit = false;
    },
    /* 保存表单内容 */
    handleOk() {
      const that = this;
      // 触发表单验证
      this.getData()
        .then((values) => {
          that.confirmLoading = true;
          const formData = Object.assign(this.model, values);
          var params = {};
          params.serviceName = this.dialogServiceName;
          if (this.dialogBaseCodeType) {
            params.rpcParams = [formData, this.dialogBaseCodeType];
          } else {
            params.rpcParams = [formData];
          }
          if (!this.model.id) {
            params.methodName = this.dialogUrl.add;
          } else {
            params.methodName = this.dialogUrl.update;
          }
          // 发起请求
          ctos3Api(params)
            .then((response) => {
              const res = response.responseData;
              if (res.statusCode === 0) {
                that.$message.success("操作成功");
                //handleOk是默认方法
                that.$emit("ok", "handleOk");
                that.$emit('handleOk', res.resultData)
              } else {
                that.$message.warning("操作失败");
              }
            })
            .finally(() => {
              that.confirmLoading = false;
              that.handleClose();
            });
        })
        .catch(() => {});
    },
    handleClose() {
      this.$emit("close");
      this.visible = false;

      this.$nextTick(() => {
        this.model = {};
        this.dialogTitle = "新增";
        this.dialogServiceName = this.serviceName;
        this.dialogBaseCodeType = this.baseCodeType;
        this.dialogWidth = "40%";
        this.dialogModalType = "dialog";
        this.dialogUrl = {
          add: "save",
          update: "updateById",
        };
        this.confirmLoading = false;
        this.pageIdTemp = "";
        this.disableSubmit = false;
        this.reset();
      })
    },
    handleChange(value, key) {
      if (this.handleChangeCustom) {
        this.handleChangeCustom(value, key)
      }
    },

    /**
     * grid相关事件捕获
     * @param value 值
     * @param key 事件名称
     */
    logEvent(value, key) {
      // 只有当以下三个事件时才可以使用在线编程，不然会频繁触发调用动态函数
      if (
        value.event === "onRowDblClick" ||
        value.event === "onRowClick" ||
        value.event === "onSelectionChanged" ||
        value.event === "onRowUpdated" ||
        value.event === "onRowRemoved" ||
        value.event === "onRowInserted"
      ) {
        this.logEventCustom(value, key)
      }
    },

    commonFunc(operation) {
      this.dynamicFuncCustom(operation)
    },
    handleBusiness(operation) {
      //此脚本已注释，建议在dialog按钮点击后手动调用下面的函数，调用后会触发父组件的handleDialogBusiness函数
      // this.$emit("ok", operation);
      this.handleBusinessCustom(operation)
    },
  },
}