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

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

import ComboxGrid from "../../../packages/components/CodeTable/ComboxGrid";
import CardList from "../../../packages/components/CardList/CardList";
import Transfer from "../../../packages/components/Transfer/Transfer";
import BaseTable from "../../../packages/BaseTable";
import KBatch from "../../../packages/KBatch/NewBatch";
import UploadFile from "../../../packages/UploadFile";
import UploadImg from "../../../packages/UploadImg";
import KEditor from "../../../packages/KEditor";
import JDate from "../../../packages/components/Ctos/JDate";
import KTimePicker from "../../../packages/KTimePicker";
import JRadioGroup from "../../../packages/components/CodeTable/JRadioGroup";
import JDictSelectTag from "../../../packages/components/CodeTable/JDictSelectTag";
import JMultiSelectTag from "../../../packages/components/CodeTable/JMultiSelectTag";
import JSearchSelectTag from "../../../packages/components/CodeTable/JSearchSelectTag";
import CodeView from "../../../packages/KFormDesign/module/codeView";
import JInput from "../../../packages/components/Ctos/JInput";
import JTextArea from "../../../packages/components/Ctos/JTextArea";
import AreaCascader from "../../../packages/components/AreaCascader/index.vue";
import JSwitch from "../../../packages/components/Ctos/JSwitch.vue";

import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
import { batchTrim, isNotNil } from "../../../packages/utils/util";
import { ctos3CommonApi } from "../../../packages/api/manage";
import lodash from "lodash";

const formBuildMixin = {
  props: {
    excelName: {
      type: String,
      default: "excelName",
    },
    config: {
      type: Object,
      default: () => ({}),
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    selectMode: {
      type: String,
      default: "multiple",
    },
    selectDeferred: {
      type: Boolean,
      default: true,
    },
    rowAlternationEnabled: {
      type: Boolean,
      default: true,
    },
    tabChanged: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    KBatch,
    BaseTable,
    UploadImg,
    UploadFile,
    JDate,
    KTimePicker,
    KEditor,
    JInput,
    JTextArea,
    JSwitch,
    ComboxGrid,
    Transfer,
    CardList,
    JDictSelectTag,
    JMultiSelectTag,
    JSearchSelectTag,
    JRadioGroup,
    AreaCascader,
    CodeView,
  },
  data() {
    return {
      //formBuild
      form: this.$form.createForm(this),
      locale: zhCN,
      formatDataSource: {},
      recordModelMapList: [],

      //buildBlocks
      activeKey: "",
      //formItem
      treeData: []
    }
  },
  methods: {
    /* FormBuild Methods Start */
    handleSubmit(e) {
      e.preventDefault();
      this.$emit("submit", this.getData());
    },
    handleCancel() {
      this.$emit("cancel");
    },
    getFieldsValue() {
      return new Promise((resolve, reject) => {
        try {
          const values = this.form.getFieldsValue();
          const newValue = this.formatData(values);
          resolve(newValue);
        } catch (err) {
          reject(err);
        }
      });
    },
    getFieldItemValue(fieldName) {
      const fieldValue = this.form.getFieldValue(fieldName);
      return fieldValue || "";
    },
    getFieldValue(fieldName) {
      return new Promise((resolve, reject) => {
        try {
          const value = this.form.getFieldValue(fieldName);
          const newValue = this.formatData(value);
          resolve(newValue);
        } catch (err) {
          reject(err);
        }
      });
    },
    resetFields(array) {
      this.form.resetFields(array);
    },
    reset() {
      this.form.resetFields();
    },
    addValidateFields(validateFields) {
      this.$nextTick(() => {
        this.form.validateFields(validateFields, { force: true });
      });
    },
    validateFields(validateFields) {
      return new Promise((resolve, reject) => {
        try {
          this.form.validateFields(validateFields, (errors, values) => {
            const newValue = this.formatData(values);
            if (errors) {
              reject(errors);
            }
            batchTrim(newValue);
            resolve(newValue);
          });
        } catch (err) {
          reject(err);
        }
      });
    },
    getFielesData(fieldName) {
      return this.form.getFieldValue(fieldName);
    },
    getData() {
      return new Promise((resolve, reject) => {
        try {
          this.form.validateFieldsAndScroll((err, values) => {
            const newValue = this.formatData(values);
            if (err) {
              reject(err);
            }
            batchTrim(newValue);
            resolve(newValue);
            this.$store.dispatch("setFormData", newValue);
          });
        } catch (err) {
          reject(err);
        }
      });
    },
    validateAndGetData(validateFields) {
      return new Promise((resolve, reject) => {
        try {
          this.form.validateFieldsAndScroll(validateFields, (err, values) => {
            if (err) {
              reject(err);
            }
            batchTrim(values);
            resolve(values);
          });
        } catch (err) {
          reject(err);
        }
      });
    },
    formatData(values) {
      const newData = Object.assign({}, values);
      if (
        this.formatDataSource !== undefined &&
        this.formatDataSource !== undefined &&
        Object.keys(this.formatDataSource).length > 0
      ) {
        for (const item in this.formatDataSource) {
          newData[item] = {};
          for (const subItem of this.formatDataSource[item]) {
            newData[item][subItem] = values[subItem];
            delete newData[subItem];
          }
        }
      }
      return newData;
    },
    setData(json) {
      this.$nextTick(() => {
        const newJson = this.formatSetValue(json);
        let data =  lodash.pick(newJson, Object.keys(this.form.getFieldsValue()))
        this.form.setFieldsValue(
         data
        );
      });
    },
    formatSetValue(json) {
      const newJson = Object.assign({}, json);
      let keys = Object.keys(newJson);
      if (keys.length > 0) {
        keys.forEach((key) => {
          if (newJson[key] instanceof Array) {
            newJson[key].forEach((item) => {
              Object.assign(item, item.tailInfos);
            });
          } else if (newJson[key] instanceof Object) {
            Object.assign(newJson[key], newJson[key].tailInfos);
          }
        });
      }

      const newValue = [];
      const reg = /^[a-zA-Zd]+$/;
      const groupFieldList = this.groupFieldList ? this.groupFieldList : {};
      if (Object.keys(groupFieldList).length > 0) {
        for (const list in groupFieldList) {
          if (
            Object.keys(groupFieldList[list]).length > 0 &&
            json.hasOwnProperty(list)
          ) {
            json[list].forEach((item) => {
              for (const group in groupFieldList[list]) {
                item[group] = "";
                groupFieldList[list][group].forEach((field) => {
                  if (!reg.test(field.trim()) && item[group] !== "") {
                    item[group] += "/";
                  }
                  item[group] += item[field.trim()] ? item[field.trim()] : "";
                });
              }
              newValue.push(item);
            });
            newJson[list] = newValue;
          }
        }
      }
      return newJson;
    },
    setDeepOptions(fields, value) {
      eval(`${fields}=${value}`);
    },
    disableTab(fields) {
      this.setDeepOptions(fields, true);
    },
    enableTab(fields) {
      this.setDeepOptions(fields, false);
    },
    hide(fields) {
      this.setOptions(fields, "hidden", true);
    },
    show(fields) {
      this.setOptions(fields, "hidden", false);
    },
    disable(fields) {
      setTimeout(() => {
        this.setOptions(fields, "disabled", true);
      }, 100);
    },
    enable(fields) {
      setTimeout(() => {
        this.setOptions(fields, "disabled", false);
      }, 100);
    },
    setOptions(fields, optionName, value) {
      const _this = this
      fields.forEach((fieldItem) => {
        if(_this[`data_${fieldItem}_record`] && _this[`data_${fieldItem}_record`]["options"]) {
          _this[`data_${fieldItem}_record`]["options"][optionName] = value
        }
      })
    },
    handleChange(value, key, record) {
      if(this.handleChangeCustom) {
        this.handleChangeCustom(value, key)
      } else {
        this.$emit('handleChange', value, key)
      }

      if (record && record.type === "select") {
        if (record.options.storageable) {
          localStorage.setItem("lowcode_save_" + key, value);
        } else {
          localStorage.removeItem("lowcode_save_" + key);
        }
      }
    },
    handleEnter(value, key, record) {
      if (
        record &&
        record.options &&
        record.options.enterMethodConfig !== undefined &&
        Object.keys(record.options.enterMethodConfig).length > 0
      ) {
        this.handleServiceRes(value, key, record.options.enterMethodConfig);
      } else {
        if(this.handleEnterCustom) {
          this.handleEnterCustom(value, key)
        } else {
          this.$emit('handleEnter', value, key)
        }
      }
    },
    handleFocus(value, key) {
      this.$emit("focus", value, key);
    },
    handleBlur(value, key, record) {
      if (record && record.options) {
        if (record.type === "number" || record.type === "input") {
          if (record.options.storageable) {
            localStorage.setItem("lowcode_save_" + key, value);
          } else {
            localStorage.removeItem("lowcode_save_" + key);
          }
        }
        if (
          record.options.blurMethodConfig !== undefined &&
          Object.keys(record.options.blurMethodConfig).length > 0
        ) {
          this.handleServiceRes(value, key, record.options.blurMethodConfig);
        }
      } else {
        if(this.handleBlurCustom) {
          this.handleBlurCustom(value, key)
        } else {
          this.$emit('handleBlur', value, key)
        }
      }
    },
    handleSearch(value, key, record) {
      this.$emit("handleSearch", value, key);
    },
    handleSelect(selectedKey, info) {
      this.$emit("select", selectedKey, info);
    },
    logEvent(value, key, record) {
      if (
        record &&
        record.options.rowClickMethodConfig &&
        Object.keys(record.options.rowClickMethodConfig).length > 0 &&
        value.event === "onRowClick"
      ) {
        this.handleServiceRes(value, key, record.options.rowClickMethodConfig);
      } else if (
        record &&
        record.options.dbClickMethodConfig &&
        Object.keys(record.options.dbClickMethodConfig).length > 0 &&
        value.event === "onRowDblClick"
      ) {
        this.handleServiceRes(value, key, record.options.dbClickMethodConfig);
      } else if (
        record &&
        record.options.rowSelectedMethodConfig &&
        Object.keys(record.options.rowSelectedMethodConfig).length > 0 &&
        value.selectedRowsData.length > 0 &&
        value.event === "onSelectionChanged"
      ) {
        value.data = value.selectedRowsData;
        this.handleServiceRes(
          value,
          key,
          record.options.rowSelectedMethodConfig
        );
      } else if (
        value.data &&
        value.data.length > 0 &&
        value.event === "operationBtn"
      ) {
        let operateBtn = record.options.operateBtns.find(
          (item) => item.operation == value.operation
        );
        operateBtn.methodConfig.refreshGrid = operateBtn.refreshGrid;
        this.handleServiceRes(value, key, operateBtn.methodConfig, record);
      } else {
        if (this.logEventCustom) {
          this.logEventCustom(value, key)
        } else {
          this.$emit('logEvent', value, key)
        }
      }
    },
    // 行编辑事件执行方法
    buttonEventSetting(value, type,record, config) {
      if( type === 'type1' && config.toRoutePath !== '') {
        // 打开页面
        let queryParams = {}
        for( let item of config.routePathParams) {
          if(item.key !== '' && item.value !== '' ) {
            let itemValue = this.form.getFieldValue(item.value)
            if(itemValue === undefined || itemValue === '') {
              queryParams[item.key] = item.value
            } else {
              queryParams[item.key] = itemValue
            }
          }
        }
        this.$router.push({ path: config.toRoutePath, query: queryParams })
      } else if(type === 'type5' && config.openLink !== '') {
        // 打开链接
        window.open(config.openLink, "_blank");
      } else if( type === 'type4' && config.modalPageId !== '' && config.modalTitle != '') {
        // 打开弹窗
        this.$refs.indexModalForm.show(config.modalTitle,config.modalWidth, config.modalType, config.modalPageId)
      } else if(type === 'type2' && config.popupMessage && Object.keys(config.changeMethodPopupConfig).length > 0) {
        // 弹出确认框
        let that = this
        let resConfig = config.changeMethodPopupConfig
        this.$confirm({
          title: "确认操作",
          content: config.popupMessage,
          onOk: () => {
            
            that.handleServiceRes(value, value, resConfig, record);
          },
        });
      } else if(type === 'type6'){
        // 自定义代码
        this.handleLogEventCodeMethod(config, value, type);
      } else if(type === 'type3') {
        // 自定义api
        this.handleServiceRes(value, value, config.changeMethodAPIConfig,record );
      }
    },
    invokeGetFormData(key, extraData) {
      let that = this;
      return new Promise((resolve, reject) => {
        try {
          if (extraData && extraData.length > 0) {
            that.form.validateFields(extraData, (err, values) => {
              if (err) {
                reject(err);
              }
              that.$store.dispatch("setFormData", values);
              resolve(values);
            });
          }
        } catch (err) {
          reject(err);
        }
      });
    },
    //行编辑事件执行自定义代码框
    handleLogEventCodeMethod(config, values, formKey){
      const val = new Function('value', 'key', 'context', config.code)
      val(values, formKey, this)
    },
    handleServiceRes(value, key, methodConfig, record) {
      if (!methodConfig.serviceName) {
        return;
      }
      const serviceName = methodConfig.serviceName;
      const methodName = methodConfig.methodName;
      const rpcParams = [];
      methodConfig.paramsSettings.forEach((element) => {
        if (element.requestDataType === "固定值") {
          rpcParams.push(element.requestV1);
        } else if (element.requestDataType === "动态值") {
          if (key === element.requestV1) {
            rpcParams.push(value);
          } else {
            rpcParams.push(this.form.getFieldValue(element.requestV1));
          }
        } else if (element.requestDataType === "表格行") {
          rpcParams.push(value.data);
        } else if (element.requestDataType === "表格行内属性") {
          let obj = value.data;
          if(obj[element.requestV1[1]] !== undefined) {
            rpcParams.push(obj[element.requestV1[1]]);
          }
        } else if (element.requestDataType === "表格多行") {
          let list = this.batchListSelections[element.requestV1[0]]
          if(list !== undefined) {
            rpcParams.push(list);
          }
        } else if (element.requestDataType === "表格多行属性") {
          let list = this.batchListSelections[element.requestV1[0]]
          if(list !== undefined) {
            let arr = [];
            list.forEach((item) => {
              arr.push(item[element.requestV1[1]]);
            });
            rpcParams.push(arr);
          }
        }
      });
      ctos3CommonApi(serviceName, methodName, rpcParams).then((response) => {
        if (response.responseData.statusCode === 0) {
          const resultData = response.responseData.resultData;
          if (methodConfig.dataSettings.length > 0) {
            let formData = {};
            methodConfig.dataSettings.forEach((element) => {
              if (element.returnParamName === "resultData") {
                formData[element.returnv1] = resultData
              } else {
                formData[element.returnv1] = resultData[element.returnParamName]
              }
            });
            this.form.setFieldsValue(formData); //  setValue
          } else {
            this.$message.success("操作成功");
          }
        } else {
          this.$message.warning(response.responseData.errorMessage);
        }
      });
    },
    // 弹窗事件
    // kform batch value change event
    modalLogEvent (value, key) {
      this.$emit('modalLogEvent', value, key)
    },
    modalHandleChange(e) {
      this.$emit('modalHandleChange', e)
    },
    // select 更改后，联动更改其他组件的值
    handleUploadData(value) {
      this.setData(value)
    },
    /* FormBuild Methods End */

    /* buildBlocks Methods Start */
    handleTabChange(key) {
      this.$emit("change", key, "tab");
      if (!this.tabChanged) {
        this.activeKey = key;
      }
    },
    handleFormatModel(record) {
      this.$emit("formatModel", record);
    },
    /* buildBlocks Methods End */

    /* FormItem Methods Start */
    handleSelectChange(value) {
      //TODO 待改造 
      // if(this.record.type === "select" && this.record.options.dynamic === 1 && this.record.options.relateItemValue && 
      //   this.record.options.relateItemConfig.length > 0) {
      //   let valueObject = JSON.parse(value)
      //   let updateValue = {}
      //   for(let element of this.record.options.relateItemConfig) {
      //     updateValue[element.key] = valueObject[element.value]
      //   }
      //   this.$emit('uploadData', updateValue);
      // }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toUpperCase()
          .indexOf(input.toUpperCase()) >= 0
      );
    },
    // kform batch value change event
    modalLogEvent (value, key) {
      this.$emit('modalLogEvent', value, key)
    },
    modalHandleChange(e) {
      this.$emit('modalHandleChange', e)
    },
    // tree根据controller配置获取数据
    getTreeList(record) {
      if(isNotNil( record.options.controllerName ) && 
          isNotNil( record.options.controllerValue ) && 
          isNotNil( record.options.controllerTitle ) && 
          isNotNil( record.options.controllerKey ) ) {
        // 必传，布尔值，是否返回全部数据
        let getAllDataFlag = record.options.getAllDataFlag === undefined ? false : record.options.getAllDataFlag
        let urlString = record.options.controllerName + '?title=' + record.options.controllerTitle + '&value=' +record.options.controllerValue + '&key='+record.options.controllerKey + '&getAllDataFlag=' + getAllDataFlag
        commonController(urlString, 'get', '').then( ( res )=> {
          if (res.responseData.statusCode === 0) {
            this.treeData =  res.responseData.resultData
          }
        })
      }
    },
    // 按钮点击事件（配置）
    buttonClick(record) {
      this.$emit("logEvent", 'buttonClickConfig', record.label,record);
    }
    /* FormItem Methods End */
  },
}

export default formBuildMixin