yinghe-lowcode-zln/src/mixins/FormMixin.js

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

import {
  ctos3CommonApi,
  commonApi,
  getFormConfig
} from '@/api/manage'
import {
  packageRpcParam,
  useCodeEvent,
  customCodeEvent,
  getUUID
} from '@/utils/util'

import BaseDialog from '@/components/BaseModel/BaseDialog'
export const FormMixin = {
  components: {
    BaseDialog
  },
  data() {
    return {
      // 配置到数据库的pageId，根据业务需要进行修改
      pageId: '',
      spinning: false,
      /* table选中records */
      packageRpcParam: packageRpcParam,
      ctos3CommonApi: ctos3CommonApi,
      commonApi: commonApi,
      getFormConfig: getFormConfig,
      getUUID: getUUID,
      uploadUrl: process.env.VUE_APP_UPLOAD_BASE_URL,
      // EventBus:EventBus,
      selectedRowKeys: [],
      defaultValue: {},
      jsonData: {},
      pageType: 'form',
      defaultFilter: {},
      dynamicVariable: {

      },
      dynamicData: {
        commonFunc: this.commonFunc
      },
      loading: false,
      // 搜素框配置
      searchConfigJson: {},
      //modal相关设置
      modalServiceName: '', //弹窗内提交接口
      modalUrl: { //弹窗提交接口地址
        add: 'save',
        update: 'updateById',
      },
      modalBaseCodeType: '', //第一层弹窗提交后台模型，非必须
      modalPageId: '', //第一层弹窗内页面PageId
      modalDialogWidth: '', //第一层弹窗宽度
      dialogType: 'dialog', //第一层弹窗类型
      modalDynamicData: {}, //第一层弹窗表单配置内容

      //以下属性用于第二层弹窗
      dialogServiceName: '', //第二层弹窗内提交接口
      dialogSubmitUrl: { //第二层弹窗提交接口地址
        add: 'save',
        update: 'updateById',
      },
      dialogBaseCodeType: '', //第二层弹窗提交后台模型，非必须
      dialogPageId: '', //第二层弹窗内页面PageId
      secondDialogWidth: '', //第二层弹窗宽度
      dialogShowType: 'drawer', //第二层弹窗类型
      dialogDynamicData: {} //第二层弹窗表单配置内容
    }
  },
  created() {
    this.pageId = this.$route.meta.pageId
  },
  async mounted() {
    if (!this.pageId) {
      return
    }
    // 加载动态表单，采用同步方式
    const response = await getFormConfig(this.pageId)
    if (response && response.responseData.statusCode === 0) {
      const result = response.responseData.resultData
      this.jsonData = JSON.parse(result.configJson)
      if (result.searchConfigJson) {
        this.searchConfigJson = JSON.parse(result.searchConfigJson)
        // if(this.searchConfigJson.isFirstLoad){
        //   this.getFormData({})
        // }
      }
      setTimeout(() => {
        useCodeEvent(this.jsonData.config, 'callInMounted', this)(ctos3CommonApi, packageRpcParam, this)
      }, 300)
    } else {
      this.$message.error('加载动态表单失败!')
    }
  },
  methods: {
    /**
     * 接收第一层弹窗中按钮回调事件
     * @param operation 事件名称,按钮的名称，默认保存按钮是handleOk
     */
    handleOk(operation, data) {
      console.log(data)
      useCodeEvent(this.jsonData.config, 'handleDialogBusiness', this)(operation, this,data )
    },

    /**
     * 接收第2层弹窗中按钮回调事件
     * @param operation 事件名称,按钮的名称，默认保存按钮是handleOk
     * @param data 二层弹窗数据，如果这些数据要对一层弹窗赋值的话，请使用this.$refs.modalForm.assignData(data);
     */
    handleDialogOk(operation, data) {
      console.log(data)
      useCodeEvent(this.jsonData.config, 'handleDialogBusiness', this)(operation, this,data)
      //  useCodeEvent(this.jsonData.config, 'handleSecondDialogBusiness', this)(operation, this)
    },
    /**
     * 表单值变化事件
     * @param value 值
     * @param key 事件名称
     */
    handleChange(value, key) {
      useCodeEvent(this.jsonData.config, 'handleChange', this)(value, key, this)
    },
    /**
     * 表单内回车事件
     * @param value 值
     * @param key 事件名称
     */
    handleEnter(value, key) {
      useCodeEvent(this.jsonData.config, 'handleEnter', this)(value, key, this)
    },
    /**
     * 表单内失去焦点事件
     * @param value 值
     * @param key 事件名称
     */
    handleBlur(value, key) {
      useCodeEvent(this.jsonData.config, 'handleBlur', this)(value, key, this)
    },
    /**
     * 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 === 'onRowButtonClick' ||
        value.event === 'cellSelectChanged' ||
        value.event === 'onRowPrepared' ||
        value.event === 'onRowInserted' ||
        value.event === 'importOk' ||
        //子表相关事件
        value.event === 'onSubRowUpdated' ||
        value.event === 'onSubRowInserted' ||
        value.event === 'onSubRowRemoved' ||
        value.event === 'onSubSelectionChanged' ||
        //子表事件结束
        value.event === 'deleteSelection') {
        if (value.event === 'onRowInserted' && value.data.id) {
          delete value.data.id
        }
        useCodeEvent(this.jsonData.config, 'logEvent', this)(value, key, this)
      }
    },
    /**
     * 右侧操作栏按钮点击后事件
     * @param operation 操作方法
     */
    handleBusiness(operation) {
      useCodeEvent(this.jsonData.config, 'handleBusiness', this)(operation, this)
    },

    /**
     * 右侧查询栏查询按钮点击后事件
     * @param value 查询参数
     */
    searchQuery(value) {
      this.defaultFilter = value
      delete value.defaultFilter
      if (!this.searchConfigJson || !this.searchConfigJson.interfaceName || !this.searchConfigJson.methodName) {
        this.$message.error('未配置搜索后端接口和方法!')
        return
      }
      if (!this.searchConfigJson.code) {
        this.getFormData(value)
      } else {
        // 使用脚本触发事件
        customCodeEvent(this.searchConfigJson.code, this)(value, this)
      }
    },
    commonFunc(operation) {
      useCodeEvent(this.jsonData.config, 'dynamicFunc', this)(operation, this)
      // if (methodConfig) {
      //   this.btnEventFunc(methodConfig)
      // }
    },
    /**
     * 调用默认搜索方法
     * @param value 查询参数
     */
    getFormData(value) {
      const rpcParams = packageRpcParam(value, [], [])
      this.loading = true
      if (this.searchConfigJson.codeClasz) {
        rpcParams.push(this.searchConfigJson.codeClasz)
      }
      ctos3CommonApi(this.searchConfigJson.interfaceName, this.searchConfigJson.methodName, rpcParams)
        .then(result => {
          if (result && result.responseData.statusCode === 0) {
            this.$refs.kfb.setData({
              data: result.responseData.resultData
            })
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

    //通用处理事件按钮
    btnEventFunc(item) {
      const that = this
      if (item.eventType === 'popoverConfirm') {
        this.$confirm({
          title: '确认操作',
          content: '是否确认进行此操作 ?',
          onOk: () => {
            that.handleServiceRes(item)
          },
        })
      } else if (item.eventType === 'bizHandle') {
        this.handleServiceRes(item)
      } else if (item.eventType === 'dialog') {
        this.modalPageId = item.pageId
        let data = {}
        data.pageId = item.pageId
        if (this.selectedRowsData.length === 0) {
          this.$refs.modalForm.add(data)
        } else {
          data = this.selectedRowsData[0]
          this.$refs.modalForm.edit(data)
        }
      } else if (item.eventType === 'link') {
        const path = item.linkUrl
        const param = {}
        if (item.attribute) {
          const data = this.selectedRowsData[0]
          param[item.attribute] = data[item.attribute]
        }
        this.$router.push({
          path: path,
          query: param
        })
      }
    },
    /**
     * @Date: 2021-06-18 15:10:49
     * @method: 处理方法配置调用接口(handleChange, handleBlur, handleEnter, handleSubmit,rowClickMethodConfig, dbClickMethodConfig, rowSelectedMethodConfig)
     * @param methodConfig{string} 配置
     * @return:
     * @Author: 九哥
     */
    handleServiceRes(methodConfig) {
      this.$refs.kfb.getData().then(value => {
        if (!methodConfig.serviceName) {
          return
        }
        var serviceName = methodConfig.serviceName
        var methodName = methodConfig.methodName
        var rpcParams = []
        methodConfig.paramsSettings.forEach(element => {
          if (element.requestDataType === '固定值') {
            rpcParams.push(element.requestV1)
          } else if (element.requestDataType === '动态值') {
            rpcParams.push(value(element.requestV1))
          } else if (element.requestDataType === '表格行') {
            rpcParams.push(value.requestV1[value.requestV1.length - 1])
          } else if (element.requestDataType === '表格行内属性') {
            const obj = value.requestV1[value.requestV1.length - 1]
            rpcParams.push(obj[element.requestV2])
          } else if (element.requestDataType === '表格多行') {
            rpcParams.push(value.requestV1)
          } else if (element.requestDataType === '表格多行属性') {
            const arr = []
            value.requestV1.forEach(item => {
              arr.push(item[element.requestV2])
            })
            rpcParams.push(arr)
          } else if (element.requestDataType === '对象') {
            const requestV1 = JSON.parse(element.requestV1)
            const obj = {}
            requestV1.forEach(item => {
              //固定值
              if (item.operator === '1') {
                obj[item.targetField] = item.currentField
              }
              //动态值
              if (item.operator === '2') {
                obj[item.targetField] = value[item.currentField]
              }
              //为空
              if (item.operator === '3') {
                obj[item.targetField] = null
              }
            })
            rpcParams.push(obj)
          } else if (element.requestDataType === '数组对象') {
            const requestV1 = JSON.parse(element.requestV1)

            var indexs = []
            const arr = []
            const firstField = requestV1[0].targetField
            for (var i = 0; i < requestV1.length; i++) {
              const item = requestV1[i]
              if (firstField === item.targetField && i > 0) {
                indexs.push(i - 1)
              }
            }
            indexs.push(requestV1.length - 1)
            let obj = {}
            for (var j = 0; j < requestV1.length; j++) {
              const item = requestV1[j]
              console.log(item)
              //固定值
              if (item.operator === '1') {
                obj[item.targetField] = item.currentField
              }
              //动态值
              if (item.operator === '2') {
                obj[item.targetField] = value[item.currentField]
              }
              //上下文
              if (item.operator === '3') {
                obj[item.targetField] = this[item.currentField]
              }
              //为空
              if (item.operator === '4') {
                obj[item.targetField] = null
              }
              if (indexs.indexOf(j) >= 0) {
                arr.push(obj)
                obj = {}
              }
            }
            rpcParams.push(arr)
          }
        })
        ctos3CommonApi(serviceName, methodName, rpcParams).then(response => {
          if (response.responseData.statusCode === 0) {
            const resultData = response.responseData.resultData
            if (methodConfig.dataSettings.length > 0) {
              var formData = {}
              var jsonString = '{'
              methodConfig.dataSettings.forEach(element => {
                var responseParamData
                if (element.returnParamName === 'resultData') {
                  responseParamData = resultData
                } else {
                  var returnParamArray = element.returnParamName.split('.')
                  var i = 0
                  responseParamData = resultData
                  while (i <= returnParamArray.length - 1) {
                    responseParamData = responseParamData[returnParamArray[i]]
                    i++
                  }
                }
                if (
                  element.returnDataType === '固定值' &&
                  responseParamData !== undefined &&
                  responseParamData.length > 0
                ) {
                  const dataString =
                    '"' +
                    element.returnv1 +
                    '":' +
                    '"' +
                    responseParamData +
                    '",'
                  jsonString += dataString
                } else if (element.returnDataType === '数组') {
                  var jsonString2 =
                    '{"' +
                    element.returnv1 +
                    '":' +
                    JSON.stringify(responseParamData) +
                    '}'
                  this.$refs.kfb.setData(JSON.parse(jsonString2))
                }
              })
              if (jsonString.length > 2) {
                jsonString = jsonString.substring(0, jsonString.length - 1)
                jsonString += '}'
                formData = JSON.parse(jsonString)
                this.$refs.kfb.setData(formData) //  setValue
              }
            } else {
              if (methodConfig.refreshGrid) {
                this.EventBus.$emit('refresh', [methodConfig.refreshGridModel])
              }
              if (methodConfig.resetFields) {
                this.$refs.kfb.resetFields(methodConfig.resetFieldsModel)
              }
              this.$message.success('操作成功')
            }
          } else {
            this.$message.warning(response.responseData.errorMessage)
          }
        })

      })
    }
  }
}