epx-frame 3.5.0-shpgy.1

package/src/frame/packages/add-form/AddForm.vue

@@ -0,0 +1,2128 @@
+
+<script>
+import SignaturePad from 'signature_pad'
+import component from '@/utils/mixins/component'
+export default {
+  name: 'epx-add-form',
+  mixins: [component],
+  saveSuccessText: '',
+  updateSuccessText: '',
+  subAddFlag: 'v_sublist',
+  subComponent: 'sub-list',
+  saveAction: 'save',
+  updateAction: 'update',
+  backTarget: 'list', // 提交成功返回页面
+  editPage: 'entity-edit-page',
+  showCatalog: false,
+  catalogPosition: 'left',
+  catalogLoadWay: 'all',
+  showCatalogHeader: false,
+  submitParams: {}, // 提交参数
+  // 表单区域
+  titleFlag: true,
+  editOne: false,
+  column: 2,
+  operateFlag: true,
+  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'
+  }
+  ],
+  items: [
+    {
+      title: '基本信息',
+      id: 'form-base',
+      contentType: 'add-form-item'
+    }
+  ],
+  flex: true,
+  data () {
+    return {
+      operates: [],
+      fieldGroups: [],
+      data: null,
+      foldList: [],
+      componentConfigs: {},
+      showMobileAction: false,
+      editDrawer: false,
+      editComponent: null,
+      checkOptionDialogVisible: false,
+      option: '',
+      submitData: {},
+      submitParams: {},
+      formConfigs: {},
+      compElemMap: {},
+      catalogList: [],
+      activeIndex: '',
+      openCatalogId: '',
+      scrollTop: 0,
+      catalogRows: [],
+      componentOperateMap: {},
+      checkPersonList: null,
+      showCheckPersonDialog: false,
+      selectPersonList: [],
+      screenHeightNoChange: true,
+      fieldScope: null,
+      fieldRelation: null
+    }
+  },
+  computed: {
+    pageType () {
+      // 页面配置
+      const { pageType: defaultPageType = 'DETAIL' } = this.upPage ? this.upPage.$configs : {}
+      // 页面传递参数
+      const { pageType: queryPageType = defaultPageType } = this.upPage ? this.upPage.$query : {}
+      // 组件状态
+      const { pageType = queryPageType } = this.$configs
+      return pageType
+    },
+    readonly () {
+      return this.pageType === 'READONLY'
+    },
+    buttonFlag () {
+      return ({ option, action }) => {
+        let flag = true
+        // eslint-disable-next-line no-eval
+        if (option) flag = eval(`this.${option}`)
+        // eslint-disable-next-line no-eval
+        return flag
+      }
+    },
+    checkRightOperates () {
+      const { operates = [] } = this.$configs
+      const _operates = this.$_.cloneDeep(operates)
+      return _operates.filter(item => this.$checkOperateRight(item)).filter(item => {
+        if (item.operates) {
+          item.operates = item.operates.filter(operate => this.$checkOperateRight(operate)).filter(operate => {
+            return !operate.showCondition || operate.showCondition.length === 0 || this.$util.runExpByScope.call(this, operate.showCondition, this.data)
+          })
+        }
+        return !item.showCondition || item.showCondition.length === 0 || this.$util.runExpByScope.call(this, item.showCondition, this.data)
+      })
+    },
+    actionOperates () {
+      const { operates = [] } = this.$configs
+      const actionOperates = [...operates]
+      actionOperates.map(item => (item.name = item.text))
+      return actionOperates.filter(item => this.buttonFlag(item))
+    },
+    components () {
+      const { items = [] } = this.$component
+      const { showCatalog, catalogLoadWay } = this.$configs
+      if (showCatalog && !this.$isMobile && catalogLoadWay === 'one' && this.activeIndex) {
+        // 获取其组件
+        const findComponent = (catalogList = []) => {
+          for (let i = 0; i < catalogList.length; i++) {
+            const catalog = catalogList[i]
+            if (catalog.id === this.activeIndex) {
+              return catalog
+            } else {
+              if (catalog.children) {
+                const child = findComponent(catalog.children)
+                if (child) return child
+              }
+            }
+          }
+        }
+        const component = findComponent(this.catalogList)
+        component.id = component.id.replace(/\w+-/, '')
+        return [component]
+      }
+      return items.filter(item => !(this.pageType === 'ADD' && item.contentType === 'sub-list2'))
+    },
+    getComponentId () {
+      return component => {
+        if (!this.isPage) {
+          const { id } = this.$component
+          return id + '-' + component.id
+        }
+        return component.id
+      }
+    },
+    scopeParams () {
+      const { scopeParams = [] } = this.$configs
+      // 格式化scopeParams
+      const _scopeParams = this.$_.cloneDeep(scopeParams)
+      // eslint-disable-next-line no-unused-vars
+      const that = this
+      for (const scopeKey in _scopeParams) {
+        const scope = _scopeParams[scopeKey]
+        if (!scope) continue
+        let values = scope.values
+        if (/\$\[(.+)\]/.test(values)) {
+          values = values.replace(/\$\[(.+)\]/, (match, key) => {
+            try {
+              // eslint-disable-next-line no-eval
+              return eval(`that.$query.${key}`) || eval(`that.$tab.${key}`) || eval(`that.${key}`) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        if (/#\{(.+)\}/.test(values)) {
+          values = values.replace(/#\{(.+)\}/, (match, key) => {
+            try {
+              // eslint-disable-next-line no-eval
+              return eval(`that.$query.${key}`) || eval(`that.$tab.${key}`) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        scope.values = values
+      }
+      return _scopeParams
+    }
+  },
+  watch: {
+    checkRightOperates: {
+      handler (v) {
+        this.getOperates()
+      }
+    },
+    checkOptionDialogVisible (v) {
+      if (v) {
+        this.$nextTick(() => {
+          const signatureContainer = this.$refs.signatureContainer
+          const signature = this.$refs.signature
+          signature.width = signatureContainer.offsetWidth
+          signature.height = signatureContainer.offsetHeight
+          this.signaturePad = new SignaturePad(signature)
+        })
+      }
+    },
+    data (v) {
+      this.$event.emit('set-form-data', v)
+    }
+  },
+  methods: {
+    beforeCreateComponent () {
+      this.$options.style = { margin: 0 }
+    },
+    init () {
+      // this.getOperates()
+      this.getFieldScope()
+      this.getFieldRelation()
+      this.getData()
+    },
+    async getOperates () {
+      let _operates = []
+      for (let i = 0; i < this.checkRightOperates.length; i++) {
+        const operate = this.checkRightOperates[i]
+        const flag = this.buttonFlag(operate)
+        // 审核操作
+        if (!flag) continue
+        if (operate.handler === 'checkEntity') {
+          // 获取审核按钮
+          const checkOperates = await this.getCheckOperateList(operate)
+          _operates = [..._operates, ...checkOperates]
+        } else {
+          _operates.push(operate)
+        }
+      }
+      const httpLoading = {}
+      _operates.forEach(item => {
+        httpLoading[item.handler + '-' + item.text] = false
+      })
+      this.httpLoading = httpLoading
+      this.operates = _operates
+    },
+    async getCheckOperateList (operate) {
+      const { taskId, viewDetail } = this.$query
+      if (viewDetail) return Promise.resolve([])
+      const params = {
+        action: 'getTaskDestFlow',
+        entityId: 'ACT_RU_EXECUTION',
+        id: this.$query.id,
+        currentMetaId: this.$metaId
+      }
+      if (taskId) {
+        params.taskId = taskId
+      }
+      return this.$http.get(params)
+        .then(data => {
+          return Promise.resolve(data.map(item => ({ ...operate, text: item.name || item.id, destActivityId: item.id })))
+        })
+        .catch(() => {
+          return Promise.resolve([])
+        })
+    },
+    getFieldScope () {
+      const { role } = this.$route.params
+      this.$http.get({
+        action: 'getEntityRoleFieldScope',
+        entityId: 'FM_ROLE_FIELDSCOPE',
+        metaId: this.$metaId,
+        roleCode: role
+      })
+        .then(data => {
+          this.fieldScope = data || {}
+        })
+    },
+    getFieldsConfigs () {
+      const { fieldGroups, fieldConfigs = {} } = this.$configs
+      const { fieldConfigs: routeFieldConfigs = {} } = this.$query
+      if (!fieldGroups || fieldGroups.length === 0) {
+        fieldGroups.push({
+          title: this.$t('basic information')
+        })
+      }
+      fieldGroups.forEach(async (item, index) => {
+        // 生成字段配置
+        if (item.contentType) {
+          this.$set(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.$set(this.fieldGroups, index, { ...item, children: [...data] })
+            })
+        }
+      })
+    },
+    getFieldRelation () {
+      const { config = {} } = this.upPage ? this.upPage.page || {} : {}
+      const { link = '', catalogRows = [], catalogIconField = [] } = this.$configs
+      let linkArr = []
+      if (link) {
+        linkArr = link.split(',')
+      }
+      const itemConfigs = config.itemConfigs || {}
+      const { id: compId } = this.$component
+      const getLink = (field = '') => {
+        if ((field.attriName || field).includes('|')) {
+          const arr = (field.attriName || field).split('|')
+          arr.pop()
+          var flags = []
+          arr.forEach((flag, index) => {
+            if (index > 0) {
+              flags.push(flags[index - 1] + '#' + flag.toLowerCase())
+            } else {
+              flags.push(flag.toLowerCase())
+            }
+          })
+          flags.forEach(flag => {
+            if (!linkArr.includes(flag)) {
+              linkArr.push(flag)
+            }
+          })
+        }
+      }
+
+      catalogIconField.forEach(getLink)
+      catalogRows.forEach(rowItem => rowItem.forEach(getLink))
+      // 获取所有子集和配置
+      this.components.forEach(component => {
+        const itemConfig = itemConfigs[compId + '-' + component.id] || {}
+        const compConfig = { ...(component.configs || {}), ...itemConfig }
+        const { fields = [], rows = [], iconFields = [] } = compConfig
+
+        fields.forEach(getLink)
+        iconFields.forEach(getLink)
+        rows.forEach(rowItem => rowItem.forEach(getLink))
+      })
+      this.$http.get({
+        action: 'getFieldRelation',
+        entityId: 'FM_ATTRIBUTE_RELATION',
+        metaId: this.$metaId,
+        link: linkArr.join(',')
+      })
+        .then(data => {
+          this.fieldRelation = data.field_relation
+        })
+    },
+    getComponent (id, component) {
+      this.$set(this.componentConfigs, id, component.configs)
+    },
+    getData () {
+      // 获取关联
+      const query = this.$query || (this.upPage ? this.upPage.$query : {})
+      const { config = {} } = this.upPage ? this.upPage.page || {} : {}
+      const { id, defaultValue = {}, initData = {} } = query
+      const { link = '', queryParams = {}, action = 'get', catalogRows = [], catalogIconField = [] } = this.$configs
+      const newQueryParams = this.$formatParams(queryParams)
+      const params = {
+        action,
+        entityId: this.$metaId,
+        id: id
+      }
+      if (this.scopeParams && this.scopeParams.length > 0) params.scopeParams = JSON.stringify(this.scopeParams)
+      let linkArr = []
+      if (link) {
+        linkArr = link.split(',')
+      }
+      const itemConfigs = config.itemConfigs || {}
+      const { id: compId } = this.$component
+      const getLink = (field = '') => {
+        if ((field.attriName || field).includes('|')) {
+          const arr = (field.attriName || field).split('|')
+          arr.pop()
+          var flags = []
+          arr.forEach((flag, index) => {
+            if (index > 0) {
+              flags.push(flags[index - 1] + '#' + flag.toLowerCase())
+            } else {
+              flags.push(flag.toLowerCase())
+            }
+          })
+          flags.forEach(flag => {
+            if (!linkArr.includes(flag)) {
+              linkArr.push(flag)
+            }
+          })
+        }
+      }
+
+      catalogIconField.forEach(getLink)
+      catalogRows.forEach(rowItem => rowItem.forEach(getLink))
+      // 获取所有子集和配置
+      this.components.forEach(component => {
+        const itemConfig = itemConfigs[compId + '-' + component.id] || {}
+        const compConfig = { ...(component.configs || {}), ...itemConfig }
+        const { fields = [], rows = [], iconFields = [] } = compConfig
+
+        fields.forEach(getLink)
+        iconFields.forEach(getLink)
+        rows.forEach(rowItem => rowItem.forEach(getLink))
+      })
+      if (linkArr.length > 0) params.link = linkArr.join(',')
+      if (this.pageType === 'ADD') {
+        params.action = 'getDefault'
+        delete params.id
+      } else if (this.$query.noSubmit === true) {
+        this.data = { ...initData, ...this.$query.data }
+        return
+      }
+      this.$http.$post({ ...params, ...newQueryParams })
+        .then(res => {
+          const data = this.data || {}
+          if (res.data) {
+            this.data = { ...initData, ...data, ...res.data }
+          }
+          if (defaultValue && this.pageType === 'ADD') {
+            this.data = { ...defaultValue, ...this.data }
+          }
+        })
+        .catch((err) => {
+          console.error(err)
+          this.data = {}
+        })
+    },
+    /**
+       * 页面跳转
+       * @param num 选中记录数(1,必须选中且只能选中一条记录；n：必须选中至少一条记录；0不需要选中记录)
+       * @param pageFlag 目标页面的标识符
+       * @param metaId 目标页面的对象
+       * @param openMode 打开方式
+       * @param params #[列表对象的某字段名]"，(如果是选中的多条记录，将字段值拼成一个字符串，用逗号隔开) "$[当前页面的某变量名]"
+       * @param comfirmMsg 操作提交之前的确认信息（如果为空，就不需要确认）
+       */
+    goPage ({ pageFlag, metaId = this.$metaId, num = 0, openMode = '3', component, pageId, menuId, pageType, confirmMsg = null, confirmButtonText, params = {} }) {
+      // eslint-disable-next-line no-unused-vars
+      const that = this
+      const formatParams = {}
+      const _params = { ...params }
+      // 检测是否选中元素
+      if (!_params.id) {
+        _params.id = `#[${this.$metaKey}]`
+      }
+      // 格式化params
+      for (const key in _params) {
+        let value = _params[key]
+        if (/\$\[(.+)\]/.test(_params[key])) {
+          try {
+            const valueKey = _params[key].replace(/\$\[(.+)\]/, (match, key) => key)
+            // eslint-disable-next-line no-eval
+            value = eval(`that.${valueKey}`) || eval(`that.$query.${valueKey}`) || ''
+          } catch (err) {
+            value = ''
+          }
+        }
+        if (/#\{(.+)\}/.test(_params[key])) {
+          try {
+            const valueKey = _params[key].replace(/#\{(.+)\}/, (match, key) => key)
+            // eslint-disable-next-line no-eval
+            value = eval(`that.${valueKey}`) || eval(`that.$query.${valueKey}`) || ''
+          } catch (err) {
+            value = ''
+          }
+        }
+        if (/#\[(.+)\]/.test(_params[key])) {
+          value = _params[key].replace(/#\[(.+)\]/, (match, key) => {
+            return this.data[key] || ''
+          })
+        }
+        formatParams[key] = value
+      }
+      // 提交方法
+      const submitFn = () => {
+        this.$createPage({
+          flag: pageFlag,
+          metaId: metaId,
+          pageId,
+          menuId,
+          openType: openMode,
+          component,
+          pageType,
+          ...formatParams
+        })
+      }
+      if (confirmMsg) {
+        this.$confirm(confirmMsg, this.$t('hint'), {
+          confirmButtonText: confirmButtonText || this.$t('determine'),
+          cancelButtonText: this.$t('cancel'),
+          type: 'warning'
+        }).then(() => {
+          submitFn()
+        })
+      } else {
+        submitFn()
+      }
+    },
+    $refesh () {
+      this.getData()
+    },
+    reloadData () {
+      this.getData()
+    },
+    foldFn (key) {
+      const index = this.foldList.indexOf(key)
+      if (index === -1) {
+        this.foldList.push(key)
+      } else {
+        this.foldList.splice(index, 1)
+      }
+    },
+    editEntity () {
+      // 获取当前metaId和flag
+      const { flag: defaultFlag, pageId, isSub, fieldConfigs, parentId } = this.upPage.$query
+      const { editPageFlag = defaultFlag, editPage } = this.$configs
+      let key = 'ID'
+      if (this.$meta) {
+        key = this.$meta.getKey()
+      }
+      const query = {
+        metaId: this.$metaId,
+        flag: editPageFlag,
+        pageType: 'EDIT',
+        pageId,
+        component: editPage,
+        id: this.data[key],
+        isSub,
+        fieldConfigs,
+        parentId,
+        callback: this.getData
+      }
+      this.$createPage({
+        ...query
+      })
+    },
+    getProcessPeople (params) {
+      return this.$http.$post(params, {
+        requestKey: 'process'
+      })
+        .then(data => {
+          return data.entityList
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    async applyEntity (buttonConfig) {
+      const { submitParams: querySumitParams = {}, processCode: queryProcessCode = '' } = this.upPage.$query
+      const { submitParams: pageSubmitParams = {}, saveSuccessText, processCode: pageProcessCode = queryProcessCode, startNode: pageStartNode = '', applyAction = 'apply' } = this.$configs
+      const { processCode = pageProcessCode, processNode = '', startNode = pageStartNode, result = '1', action = applyAction, params: configParams, afterTrigger, afterTriggerPage, afterTriggerParams, processOptional = false, mask } = buttonConfig
+      let params = {
+        action,
+        entityId: this.$metaId,
+        processCode
+      }
+      if (processNode) {
+        params.destActivityId = processNode
+      } else {
+        params.startNode = startNode
+        params.result = result
+      }
+      params = { ...params, ...this.$formatParams(configParams) }
+      // 从各自表单获取数据
+      const formParams = this.getFormData(buttonConfig)
+      const submitParams = this.$_.assignWith(this.$formatParams(pageSubmitParams), formParams, (pageSubmitValue, formValue) => {
+        return formValue || pageSubmitValue
+      })
+
+      if (!formParams) return
+      if (processOptional && this.selectPersonList.length === 0) {
+        const personList = await this.getProcessPeople({ ...params, action: 'getAssignUserList', entityId: this.$metaId })
+        this.checkPersonList = [...personList]
+        this.showCheckPersonDialog = true
+        this.applyButtonConfig = buttonConfig
+        return
+      }
+      if (this.isRequesting) return
+      this.isRequesting = true
+      let loading = null
+      if (mask) {
+        loading = this.$loading({
+          target: this.$el,
+          background: 'rgba(255, 255, 255, 0.5)',
+          text: this.$t('Operating, please wait...')
+        })
+      }
+      this.$http.apply({
+        ...params,
+        ...this.submitParams,
+        ...querySumitParams,
+        ...submitParams,
+        assigneeUser: this.selectPersonList.join(',')
+      }, {
+        requestKey: 'process'
+      })
+        .then(data => {
+          this.selectPersonList = []
+          this.$message.success(saveSuccessText)
+          this.isRequesting = false
+          if (loading) loading.close()
+          if (afterTrigger) {
+            this[afterTrigger]({ pageId: afterTriggerPage, params: afterTriggerParams })
+          } else {
+            this.backPage()
+          }
+        })
+        .catch(err => {
+          this.$message.error(err.message || this.$t('deal with failure'))
+          this.isRequesting = false
+          if (loading) loading.close()
+        })
+    },
+    dataURLtoFile (dataurl) {
+      var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]
+      var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n)
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n)
+      }
+      const blob = new Blob([u8arr], { type: mime })
+
+      return new File([blob], 'signature.png', { type: mime })
+    },
+    uploadSign (signUrl) {
+      const file = this.dataURLtoFile(signUrl)
+      return this.$http.$post({
+        action: 'upload',
+        file
+      }, {
+        requestType: 'formData'
+      })
+    },
+    check (operate) {
+      this.checkEntity(operate)
+    },
+    async checkEntity (operate) {
+      const { action = 'handleTask', destActivityId, params: buttonParams = {}, openOpinion = true, checkSign = true, opinionRequire = false, signRequire = false, confirmMsg = '', confirmButtonText, mask, afterTrigger, afterTriggerParams, afterTriggerPage } = operate
+      const { submitParams: pageSubmitParams = {}, checkEntityId = this.$metaId, checkSuccessText } = this.$configs
+      const { taskId, callback } = this.$query
+      let signFile = null
+      const formParams = this.getFormData(operate)
+      if (!formParams) return
+      // 判断是否有弹窗
+      if (openOpinion && !this.checkOptionDialogVisible) {
+        this.checkOptionDialogVisible = operate
+        return
+      }
+      if (openOpinion && checkSign && this.signaturePad) {
+        // 获取是否需要签名
+        const isEmptySign = this.signaturePad.isEmpty()
+        if (!isEmptySign) {
+          const checkSignUrl = this.signaturePad.toDataURL()
+          const data = await this.uploadSign(checkSignUrl)
+          signFile = data.bean
+        }
+      }
+      if (openOpinion && opinionRequire && !this.option) {
+        // 必填校验
+        this.$message.error('请填写审核意见')
+        return
+      }
+      if (checkSign && signRequire && !signFile) {
+        this.$message.error('请填写签名字段')
+        return
+      }
+
+      const submitParams = this.$_.assignWith(this.$formatParams({ ...pageSubmitParams, ...buttonParams }), formParams, (pageSubmitValue, formValue) => {
+        return formValue || pageSubmitValue
+      })
+      const params = {
+        action,
+        entityId: checkEntityId,
+        currentMetaId: this.$metaId,
+        id: this.$query.id,
+        destActivityId,
+        ...submitParams
+      }
+      if (taskId) {
+        params.taskId = taskId
+      }
+
+      const submitFn = () => {
+        if (this.isRequesting) return
+        this.isRequesting = true
+        let loading = null
+        if (mask) {
+          loading = this.$loading({
+            target: document.body,
+            background: 'rgba(255, 255, 255, 0.5)',
+            text: this.$t('Operating, please wait...')
+          })
+        }
+        this.$http.$post({
+          action,
+          entityId: this.$metaId,
+          ...params,
+          'check.MESSAGE': this.option,
+          'check.SIGN': signFile
+        }, {
+          requestKey: 'process'
+        })
+          .then(data => {
+            this.isRequesting = false
+            this.$message.success(checkSuccessText || this.$t('handle a successful'))
+            this.checkOptionDialogVisible = false
+            if (loading) loading.close()
+            if (afterTrigger) {
+              this[afterTrigger]({ pageId: afterTriggerPage, params: afterTriggerParams })
+            } else {
+              this.backPage({
+                callback () {
+                  callback && callback(data)
+                }
+              })
+            }
+          })
+          .catch(err => {
+            this.isRequesting = false
+            this.$message.error(err.message || this.$t('deal with failure'))
+            if (loading) loading.close()
+          })
+      }
+      if (confirmMsg) {
+        this.$confirm(confirmMsg, this.$t('hint'), {
+          confirmButtonText: confirmButtonText || this.$t('determine'),
+          cancelButtonText: this.$t('cancel'),
+          type: 'warning'
+        }).then(() => {
+          submitFn()
+        })
+      } else {
+        submitFn()
+      }
+    },
+    editApplyEntity () {
+      const { applyPageFlag = 'v_edit_apply' } = this.$configs
+      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 (operate) {
+      let submitFlag = true
+      let params = {}
+      const { fieldConfigs = {} } = this.$query
+      for (const key in fieldConfigs) {
+        const field = fieldConfigs[key]
+        if (field.attriName && field.value) {
+          params[`bean.${field.attriName}`] = field.value
+        }
+      }
+      // 获取formItemData
+      Object.keys(this.$refs).forEach(key => {
+        if (key.includes('component-')) {
+          const component = this.$refs[key].$refs.component
+          const form = component.$refs.form
+          if (component && form) {
+            const { hiddenFields = [] } = component.configs
+            hiddenFields.forEach(field => {
+              if (field.attriName && field.value) {
+                params[`bean.${field.attriName}`] = field.value
+              }
+            })
+            if (component.componentType === 'ADD' || component.componentType === 'EDIT') {
+              form.validate((valid, err) => {
+                if (!valid && operate.validateForm !== false) {
+                  for (const key in err) {
+                    const errMessgae = err[key][0]
+                    this.$message.error(errMessgae.message)
+                    submitFlag = false
+                    return
+                  }
+                }
+              })
+            }
+            for (const field in form.model.data) {
+              const formValue = form.model.data[field]
+              const fieldsConfigs = component.fieldsConfigs || []
+              if (!field.includes('#')) {
+                let submitValue = formValue
+                const fieldConfigs = fieldsConfigs.find(item => item.attriName === field) || {}
+                if (Array.isArray(formValue)) {
+                  submitValue = formValue[formValue.length - 1]
+                }
+                this.submitData[field] = submitValue || ''
+                if (fieldConfigs.state === 'READONLY' || fieldConfigs.state === 'HIDDEN-READONLY' || (fieldConfigs.dataType === 'password' && !submitValue)) continue
+                params[fieldConfigs.name || `bean.${field}`] = submitValue || ''
+              }
+            }
+            const fieldsConfigs = component.fieldsConfigs || []
+            fieldsConfigs.forEach(field => {
+              if (field.state === 'HIDDEN' && field.isDateNow) {
+                this.submitData[field] = this.$moment().format('YYYY-MM-DD HH:mm:ss')
+                params[`bean.${field.attriName}`] = this.$moment().format('YYYY-MM-DD HH:mm:ss')
+              }
+            })
+          }
+        }
+      })
+      params = this.$formatParams({ ...params })
+      if (this.data.subEntitys) {
+        params.subEntitys = this.data.subEntitys
+      }
+      return submitFlag ? params : false
+    },
+    getCatalogList () {
+      const { id, items = [] } = this.$component
+      const formatCatalog = (parent, item) => {
+        const id = parent + '-' + item.id
+        const children = item.items ? item.items.map(catalog => formatCatalog(id, catalog)) : []
+        return { ...item, contentType: item.contentType, id, title: item.title, children }
+      }
+      this.catalogList = items.map(item => formatCatalog(id, item))
+      this.activeIndex = this.catalogList[0].id
+    },
+    initComponent () {
+      this.getCatalogFields()
+    },
+    // 获取字段配置，生成columns
+    getCatalogFields () {
+      const { fieldConfigs = {}, catalogRows = [] } = this.$configs
+      // 获取rows
+      const fields = [].concat(...catalogRows)
+      this.$FieldFactory.createFields({
+        defaultFieldConfigs: fieldConfigs,
+        fields: fields,
+        meta: this.$meta
+      })
+        .then(data => {
+          this.catalogRows = catalogRows.map(row => {
+            return row.map(field => {
+              const item = data.find(item => item.attriName === (field.attriName || field))
+              if (item) return item
+              else return field
+            })
+          })
+        })
+    },
+    getCompElems (vnode) {
+      const compElems = []
+      for (let i = 0; i < this.catalogList.length; i++) {
+        const item = this.catalogList[i]
+        const elemId = item.id
+        const elem = this.$getPageComponent(elemId)
+        if (elem) {
+          compElems.push({ elem, item })
+        }
+        if (item.children) {
+          for (let i = 0; i < item.children.length; i++) {
+            const child = item.children[i]
+            const elemId = child.id
+            const elem = this.$getPageComponent(elemId)
+            if (elem) {
+              compElems.push({ elem, item: child, upId: item.id })
+            }
+          }
+        }
+      }
+      return compElems
+    },
+    openComponent (id, event) {
+      event.stopPropagation()
+      this.openCatalogId = this.openCatalogId === id ? '' : id
+    },
+    compAnchor (id) {
+      // 获取组件所在位置
+      this.activeIndex = id
+      let elem = null
+      if (this.compElemMap[id]) {
+        elem = this.compElemMap[id]
+      } else if (this.compElemArr) {
+        const component = this.compElemArr.find(item => {
+          return item.item.id === id
+        })
+        elem = component.elem
+        if (elem) {
+          this.compElemMap[id] = elem
+          // this.$refs.scroll.scrollTop = elem.$el.offsetTop - 60
+        }
+      } else {
+        const elemId = id
+        elem = this.$getPageComponent(elemId)
+        this.compElemMap[id] = elem
+        // this.$refs.scroll.scrollTop = elem.$el.offsetTop - 60
+      }
+      this.upPage.$el.scrollTop = elem.$el.offsetTop - 120
+    },
+    addScrollListener () {
+      const scrollContainer = this.upPage.$el
+      if (scrollContainer) {
+        this.scrollTop = scrollContainer.scrollTop
+        scrollContainer.addEventListener('scroll', () => {
+          const scrollTop = scrollContainer.scrollTop
+          this.scrollTop = scrollTop
+          if (!this.compElemArr) {
+            this.compElemArr = this.getCompElems()
+            return
+          }
+          const distance = []
+          this.compElemArr.forEach(item => {
+            distance.push({
+              ...item,
+              dis: Math.abs(item.elem.$el.offsetTop - scrollTop)
+            })
+          })
+          distance.sort((a, b) => a.dis - b.dis)
+          const item = distance[0].item
+          this.activeIndex = item.id
+          this.scrollTop = scrollTop
+          // 指定元素选中
+          if (item.id) {
+            this.activeItem = item.id
+            if (distance[0].upId) {
+              this.openCatalogId = distance[0].upId
+            }
+          }
+        })
+      }
+      // }
+    },
+    validateForm () {
+      let submitFlag = true
+      Object.keys(this.$refs).forEach(key => {
+        if (key.includes('component-')) {
+          const component = this.$refs[key].$refs.component
+          const form = component.$refs.form
+          if (component && form) {
+            form.validate((valid, err) => {
+              if (!valid) {
+                for (const key in err) {
+                  const errMessgae = err[key][0]
+                  this.$message.error(errMessgae.message)
+                  submitFlag = false
+                  return
+                }
+              }
+            })
+          }
+        }
+      })
+      return submitFlag
+    },
+    submitForm (buttonConfig = {}, cb, errorFn) {
+      const { submitParams: querySumitParams = {}, callback, submitBackPage = true } = this.$query
+      const { submitParams: pageSubmitParams = {}, saveSuccessText, updateSuccessText, saveAction, updateAction } = this.$configs
+      const { action = saveAction, params: buttonParams = {}, text, mask } = buttonConfig
+      const params = {
+        action,
+        entityId: this.$metaId
+      }
+      if (this.data[this.$metaKey]) {
+        params[`bean.${this.$metaKey}`] = this.data[this.$metaKey]
+      }
+      // 获取form表单 提交
+      const formParams = this.getFormData(buttonConfig)
+      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.$query.noSubmit === true) {
+        const data = { ...this.data, ...this.submitData }
+        return this.backPage({
+          callback () {
+            callback && callback(data)
+          }
+        })
+      }
+      if (this.pageType === 'EDIT' && this.data[this.$metaKey]) params.action = updateAction
+      this.$set(this.httpLoading, 'submitForm-' + text, true)
+      let loading = null
+      if (mask) {
+        loading = this.$loading({
+          target: this.$el,
+          background: 'rgba(255, 255, 255, 0.5)',
+          text: this.$t('Operating, please wait...')
+        })
+      }
+      this.$http.save({
+        ...params,
+        ...querySumitParams,
+        ...submitParams,
+        ...this.submitParams,
+        ...this.$formatParams(buttonParams)
+      })
+        .then(data => {
+          this.$set(this.httpLoading, 'submitForm-' + text, false)
+          const entity = { ...this.data, ...this.submitData }
+          if (this.pageType === 'ADD') entity[this.$metaKey] = data
+          entity.id = entity[this.$metaKey]
+          entity.name = this.$meta ? entity[this.$meta.label] : ''
+          if (loading) loading.close()
+          this.$message.success(this.pageType === 'EDIT' ? updateSuccessText : saveSuccessText)
+          if (cb && typeof cb === 'function') {
+            cb(entity)
+          } else {
+            if (submitBackPage) {
+              this.backPage({
+                // reload: true,
+                callback () {
+                  callback && callback(entity)
+                }
+              })
+            } else {
+              callback && callback(entity)
+            }
+          }
+        })
+        .catch(err => {
+          this.$set(this.httpLoading, 'submitForm-' + text, false)
+          if (loading) loading.close()
+          this.$message.error(err.message || this.$t('deal with failure'))
+          if (errorFn) errorFn(err)
+        })
+    },
+    /**
+       * 通用请求
+       * @param action 请求命令
+       * @param metaId 请求对象，默认为当前页面对象
+       * @param num 选中记录数(1,必须选中且只能选中一条记录；n：必须选中至少一条记录；0不需要选中记录)
+       * @param comfirmMsg 操作提交之前的确认信息（如果为空，就不需要确认）
+       * @param params #[列表对象的某字段名]"，(如果是选中的多条记录，将字段值拼成一个字符串，用逗号隔开) "$[当前页面的某变量名]"
+       * @param successMsg 操作成功的提示
+       * @param failMsg 操作失败的提示
+       * @param row 操作的列
+       */
+    commonAction ({ action, rule, metaId = this.$metaId, text, num = 0, confirmMsg = null, confirmButtonText, mask = false, validateForm = true, params = {}, successMsg = this.$t('handle a successful'), failMsg = this.$t('deal with failure'), afterTrigger, afterTriggerPage, afterTriggerParams }, row) {
+      // eslint-disable-next-line no-unused-vars
+      const that = this
+      const formatParams = {}
+      // 格式化params
+      for (const key in params) {
+        let value = params[key]
+        if (/\$\[(.+)\]/.test(params[key])) {
+          value = params[key].replace(/\$\[(.+)\]/, (match, key) => {
+            // eslint-disable-next-line no-eval
+            return eval(`that.${key}`) || eval(`that.$query.${key}`)
+          })
+        }
+        if (/#\[(.+)\]/.test(params[key])) {
+          value = params[key].replace(/#\[(.+)\]/, (match, key) => {
+            return this.data[key]
+          })
+        }
+        formatParams[key] = value
+      }
+
+      // 提交方法
+      const submitFn = () => {
+        const formParams = this.getFormData({ validateForm })
+        if (!formParams) return
+        this.$set(this.httpLoading, 'commonAction-' + text, true)
+        let loading = null
+        if (mask) {
+          loading = this.$loading({
+            target: this.$el,
+            background: 'rgba(255, 255, 255, 0.5)',
+            text: this.$t('Operating, please wait...')
+          })
+        }
+        this.$http.$post({
+          action,
+          entityId: metaId,
+          rule,
+          ...formatParams,
+          ...formParams
+        })
+          .then(() => {
+            this.$set(this.httpLoading, 'commonAction-' + text, false)
+            if (loading) loading.close()
+            this.$message.success(successMsg)
+            if (afterTrigger) {
+              this[afterTrigger]({ pageId: afterTriggerPage, params: afterTriggerParams })
+            } else {
+              this.backPage()
+            }
+          })
+          .catch(err => {
+            this.$set(this.httpLoading, 'commonAction-' + text, false)
+            if (loading) loading.close()
+            this.$message.error(err.message || failMsg)
+          })
+      }
+      // 判断是否需要确认弹窗
+      if (confirmMsg) {
+        this.$confirm(confirmMsg, this.$t('hint'), {
+          confirmButtonText: confirmButtonText || this.$t('determine'),
+          cancelButtonText: this.$t('cancel'),
+          type: 'warning'
+        }).then(() => {
+          submitFn()
+        })
+      } else {
+        submitFn()
+      }
+    },
+    /**
+     * 通用打印
+     */
+    print ({ num = 1, printWay = 'custom', printCode = '', cptName = '', params = {}, ...props }, row) {
+      // eslint-disable-next-line no-unused-vars
+      const that = this
+      // 格式化params
+      const formatParams = {}
+      // 添加主键
+      if (!params.id) params.id = `#[${this.$metaKey}]`
+      for (const key in params) {
+        let value = params[key]
+        if (/\$\[(.+)\]/.test(params[key])) {
+          value = params[key].replace(/\$\[(.+)\]/, (match, key) => {
+            // eslint-disable-next-line no-eval
+            return eval(`that.${key}`) || eval(`that.$query.${key}`) || eval(`that.$tab.${key}`) || ''
+          })
+        }
+        if (/#\[(.+)\]/.test(params[key])) {
+          value = params[key].replace(/#\[(.+)\]/, (match, key) => {
+            return this.data[key]
+          })
+        }
+        formatParams[key] = value
+      }
+      // 帆软报表
+      if (printWay === 'fine') {
+        formatParams.id = `'${this.data[this.$metaKey]}'`
+        this.finePrint(cptName, formatParams)
+      } else {
+        this.customPrint(printCode, formatParams, props)
+      }
+    },
+    // 帆软报表打印
+    finePrint (cptName, formatParams) {
+      const rootPath = this.$util.getAbsPath('/ReportServer')
+      let query = `&reportlet=com.epxing.frame.core.report.ReportReader&__bypagesize__=false&cptname=${cptName}`
+      formatParams.id = this.data[this.$metaKey] || ''
+      for (const key in formatParams) {
+        query += '&' + key + '=' + formatParams[key]
+      }
+      window.open(rootPath + query)
+    },
+    // 自定义报表
+    customPrint (code, params, props) {
+      this.$http.find({
+        entityId: 'FM_FORM',
+        'scope.CODE': code
+      })
+        .then(data => {
+          const { NAME, TYPE } = data.data
+          if (TYPE === 'excelReport') {
+            this.$createPage({
+              component: 'excel-preview',
+              name: NAME,
+              code,
+              params,
+              showDownload: props.showDownload
+            })
+          } else {
+            this.$http.$post({
+              action: 'exportPdf',
+              querySystem: this.appConfig.SYSTEM,
+              entityId: 'FM_FORM',
+              code,
+              ...params
+            }, {
+              responseType: 'blob'
+            })
+              .then(({ blob }) => {
+                const url = window.URL.createObjectURL(blob, { type: 'application/pdf' })
+                window.open(url)
+              })
+              .catch(err => {
+                this.$message.error(err.message)
+              })
+          }
+        })
+    },
+    verify () {
+      // 校验字段
+      let flag = true
+      for (let i = 0; i < this.fieldGroups.length; i++) {
+        const fields = this.fieldGroups[i]
+        if (flag === 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])) {
+                flag = false
+                this.$message.error(this.$t('please fill in') + field.attriLabel)
+                break
+              }
+            } else if (field.isRequired === '1' && !(this.data[field.attriName] || this.updateData[field.attriName])) {
+              flag = false
+              this.$message.error(this.$t('please fill in') + field.attriLabel)
+              break
+            }
+          }
+        }
+      }
+      return flag
+    },
+    editSave () {
+      const params = {}
+      let submitFlag = true
+      const { submitParams: querySumitParams = {} } = this.$query
+      const component = this.$refs['edit-component'].$refs.component
+      const form = component.$refs.form
+      if (component && form) {
+        const { hiddenFields = [] } = component.configs
+        hiddenFields.forEach(field => {
+          if (field.attriName && field.value) {
+            params[`bean.${field.attriName}`] = field.value
+          }
+        })
+        form.validate((valid, err) => {
+          if (!valid) {
+            for (const key in err) {
+              const errMessgae = err[key][0]
+              this.$message.error(errMessgae.message)
+              submitFlag = false
+              return
+            }
+          }
+        })
+        for (const field in form.model.data) {
+          const formValue = form.model.data[field]
+          const fieldsConfigs = component.fieldsConfigs || []
+          if (!field.includes('#')) {
+            let submitValue = formValue
+            const fieldConfigs = fieldsConfigs.find(item => item.attriName === field) || {}
+            if (Array.isArray(formValue)) {
+              submitValue = formValue[formValue.length - 1]
+            }
+            params[fieldConfigs.name || `bean.${field}`] = submitValue || ''
+          }
+        }
+      }
+      if (!submitFlag) return
+      this.$http.update({
+        entityId: this.$metaId,
+        ...querySumitParams,
+        [`bean.${this.$metaKey}`]: this.data[this.$metaKey],
+        ...params
+      })
+        .then(() => {
+          this.$message.success(this.$t('save successfully'))
+          this.editDrawer = false
+          this.editComponent = null
+          this.getData()
+        })
+        .catch(err => {
+          this.$message.error(err.message || this.$t('fail to save'))
+        })
+    },
+    editFormItem (component) {
+      if (this.$isMobile) {
+        this.editDrawer = true
+      }
+      this.oldData = { ...this.data }
+      this.editComponent = component
+    },
+    cancelEdit (finish) {
+      if (this.oldData && !finish) this.data = { ...this.oldData }
+      this.oldData = null
+      this.editComponent = null
+      this.editDrawer = false
+    },
+    setComponentOperates (id, v) {
+      this.$set(this.componentOperateMap, id, v)
+    },
+    callCompOperate (id, operate) {
+      const component = this.$refs[`component-${id}`]
+      if (component && component.$children[0]) {
+        component.$children[0].$handler(operate)
+      }
+    },
+    selectPersonConfirm () {
+      if (this.selectPersonList.length === 0) {
+        this.$message.error('请选择审核人')
+        return
+      }
+      this.applyEntity(this.applyButtonConfig)
+      this.showCheckPersonDialog = false
+    },
+    closeCheckPerson () {
+      this.selectPersonList = []
+      this.showCheckPersonDialog = false
+    },
+    renderCheckPerson (e) {
+      return (
+        <el-dialog
+          title="审核人"
+          visible={this.showCheckPersonDialog}
+          modal-append-to-body={false}
+          append-to-body={true}
+          width="500px"
+          onClose={this.closeCheckPerson}
+        >
+          <el-checkbox-group class="check-person__list" vModel={this.selectPersonList}>
+            {
+              this.checkPersonList && this.checkPersonList.map(item => (
+                <el-checkbox class="check-person" label={item.ID}>
+                  <span class="check-person__item">
+                    {
+                      item.PHOTO ? (
+                        <el-avatar fit="cover" size="small" src={this.$util.getFileUrl(item.PHOTO)}></el-avatar>
+                      ) : (
+                        <el-avatar fit="cover" size="small" icon="el-icon-user-solid"></el-avatar>
+
+                      )
+                    }
+                    <span class="check-person__name">{item.NAME}</span>
+                  </span>
+                </el-checkbox>
+              ))
+            }
+          </el-checkbox-group>
+          <div class="check-person-button__group">
+            <el-button onClick={this.closeCheckPerson}>取 消</el-button>
+            <el-button type="primary" onClick={this.selectPersonConfirm}>确 定</el-button>
+          </div>
+        </el-dialog>
+      )
+    },
+    renderFormTitle (component, index) {
+      const config = this.componentConfigs[component.id] || {}
+      const operates = this.componentOperateMap[component.id]
+
+      const { formTitleStyle = 'default' } = config
+      return (
+        <p class={['form-title', `form-tilte__${formTitleStyle}`]}>
+          <span class="form-title-border">{component.title}</span>
+          <span class="form-title__operate fr">
+            {
+              !this.readonly && this.componentConfigs[component.id] && this.componentConfigs[component.id].editable &&
+              <span class="form-title-edit" onClick={this.editFormItem.bind(this, component)}>
+                <i class="el-icon-edit-outline"></i>
+                {this.$t('edit')}
+              </span>
+            }
+            {
+              operates && (
+                <span>
+                  {
+                    this.componentConfigs[component.id].operates.map(operate => (
+                      <el-button loading={this.httpLoading[operate.handler + '-' + operate.text]} type="text" onClick={this.callCompOperate.bind(this, component.id, operate)}>{operate.text}</el-button>
+                    ))
+                  }
+                </span>
+              )
+            }
+            <i class={['form-title-fold__icon', 'el-icon-caret-top']} onClick={this.foldFn.bind(this, 'comp-' + index)}></i>
+          </span>
+        </p>
+      )
+    },
+    renderComponent (component) {
+      return (
+        <epx-component
+          ref={'component-' + component.id}
+          name={component.contentType} { ...component }
+          comp-id={this.getComponentId(component)}
+          comp-title={component.title}
+          contentType={component.contentType}
+          comp-configs={{ metaId: this.$metaId, ...component.configs }}
+          items={component.items}
+          formData={this.data}
+          pageType={this.pageType}
+          edit={this.editComponent && this.editComponent.id === component.id}
+          formConfigs={this.formConfigs}
+          fieldScope={this.fieldScope}
+          fieldRelation={this.fieldRelation}
+          form={this}
+          showTitle={this.components.length > 1}
+          onGet-component={v => this.getComponent(component.id, v)}
+          onSet-operates={v => this.setComponentOperates(component.id, v)}
+          onCancel-edit={this.cancelEdit}
+          onChange={v => (this.data = v)}
+          {...{ on: { 'update:formData': v => { this.data = v } } }}
+        ></epx-component>
+      )
+    },
+    renderCatalogList (catalogList = [], parent) {
+      return (
+        <ul class="catalog-list">
+          {
+            catalogList.map(item => (
+              <li class={['catalog-item', { 'catalog-subitem': !!parent }, { active: this.activeIndex === item.id }, { 'is-opened': this.openCatalogId === item.id }]} key={item.id}>
+                <p class="catalog-item__title" onClick={this.compAnchor.bind(this, item.id)}>
+                  <span>{item.title}</span>
+                  { item.children && item.children.length > 0 && <i class="catalog-item__icon el-icon-arrow-down" onClick={this.openComponent.bind(this, item.id)}></i>}
+                </p>
+                { this.renderCatalogList(item.children, item) }
+              </li>
+            ))
+          }
+        </ul>
+      )
+    },
+    renderCatalog () {
+      return (
+        <div ref="catalogContainer" style={{ display: 'inline-block' }}>
+          <div ref="catalog" class="catalog" style={{ top: this.scrollTop + 'px' }}>
+            { this.renderBase() }
+            { this.renderCatalogList(this.catalogList) }
+          </div>
+        </div>
+      )
+    },
+    renderBase () {
+      const item = this.data || {}
+      const { catalogIconField = [], catalogRows = [], showCatalogHeader, operateEllipsis = 2 } = this.$configs
+      if (catalogIconField.length === 0 && catalogRows.length === 0 && this.operates.length === 0) return null
+      return (
+        <div class="nav-base">
+          {showCatalogHeader && <epx-card-form-item formData={item} pageType={this.pageType} readonly={this.readonly} comp-configs={{ rows: catalogRows, iconField: catalogIconField }}></epx-card-form-item>}
+          <div class="button-group">
+            {
+              this.operates.map((operate, index) => {
+                if ((this.operates.length > operateEllipsis && index === 0) || this.operates.length <= operateEllipsis) {
+                  return <el-button loading={this.httpLoading[operate.handler + '-' + operate.text]} size="medium" key={operate.text} style={{ width: operate.width ? operate.width + 'px' : 'auto' }} type={operate.ui} onClick={this.$handler.bind(this, operate)}>{operate.text}</el-button>
+                }
+              })
+            }
+            {
+              this.operates.length > operateEllipsis && (
+                <el-dropdown class="more-table-operates" trigger="click">
+                  <el-button size="medium">
+                    <i class="el-icon-more"></i> {this.$t('more')}
+                  </el-button>
+                  <el-dropdown-menu slot="dropdown">
+                    {
+                      this.operates.map((operate, index) => {
+                        if (index !== 0) {
+                          return <el-dropdown-item key={operate.text} nativeOnClick={this.$handler.bind(this, operate, null)}>{operate.text}</el-dropdown-item>
+                        }
+                      })
+                    }
+                  </el-dropdown-menu>
+                </el-dropdown>
+              )
+            }
+          </div>
+        </div>
+      )
+    },
+    renderForm () {
+      const { operateFlag, showCatalog } = this.$configs
+      return (
+        <div class="add-form" style={this.$component.style} >
+          <div class="field-group">
+            <div>
+              {
+                this.components
+                  .map((component, index) => {
+                    // const compConfig = this.componentConfigs[component.id] || {}
+                    // const { formTitleFlag, showTitle = 'more' } = compConfig
+                    const { split } = this.$configs
+                    return (
+                      <div
+                        class={['field-item', { 'm-field-item': this.$isMobile }, { fold: this.foldList.includes('comp-' + index) }]}
+                        style={{ marginBottom: split + 'px' }}
+                        key={component.id}
+                      >
+                        {/*
+                          (showTitle === 'always' || this.components.length > 1) && showTitle !== 'none' && formTitleFlag !== false &&
+                        this.renderFormTitle(component, index)
+                        */}
+                        {/** 备注说明 */}
+                        {/*
+                            this.componentConfigs[component.id] && this.componentConfigs[component.id].note && (
+                              <p class="form-note" >
+                                <i class="el-icon-info"></i>
+                                <span>{ this.componentConfigs[component.id].note}</span>
+                              </p>
+                            ) */
+                        }
+                        { this.renderComponent(component)}
+                      </div>
+                    )
+                  })
+              }
+            </div>
+          </div>
+          {
+            !this.readonly && operateFlag && !(showCatalog && !this.$isMobile) && (
+              <div>
+                {
+                  this.$isMobile ? (
+                    <div class={['m-button-group', { 'm-button-more': this.operates.length > 3 }]}>
+                      <div class={['m-button-inner', { 'm-button-change': !this.screenHeightNoChange }]}>
+                        {
+                          this.operates.length > 3 ? (
+                            <div class="m-operate">
+                              <van-action-sheet
+                                vModel={this.showMobileAction}
+                                actions={this.operates.map(item => ({ ...item, name: item.text }))}
+                                cancel-text={this.$t('cancel')}
+                                close-on-click-action
+                                onSelect={this.$handler.bind(this)}
+                              />
+                              <el-button class="m-button" size="medium" onClick={() => (this.showMobileAction = true)}>{this.$t('operation')}</el-button>
+                            </div>
+                          ) : this.operates.map(operate => (
+                            <el-button loading={this.httpLoading[operate.handler + '-' + operate.text]} class="m-button-one" key={operate.text} type={operate.ui} onClick={this.$handler.bind(this, operate)}>{operate.text}</el-button>
+                          ))
+                        }
+                      </div>
+                    </div>
+                  ) : (
+                    <div class="button-group">
+                      {
+                        this.operates.map(operate => (
+                          <el-button loading={this.httpLoading[operate.handler + '-' + operate.text]} size="medium" key={operate.text} type={operate.ui} onClick={this.$handler.bind(this, operate)}>{operate.text}</el-button>
+                        ))
+                      }
+                    </div>
+                  )
+                }
+              </div>
+            )
+          }
+
+        </div>
+      )
+    },
+    renderCheck () {
+      if (this.$isMobile) {
+        return this.renderCheckDrawer()
+      } else {
+        return this.rendercheckDialog()
+      }
+    },
+    rendercheckDialog () {
+      const { checkOpinion = true, checkSign = true, text } = this.checkOptionDialogVisible || {}
+      return (
+        <el-dialog
+          title={this.$t('Submission of Comments')}
+          visible={!!this.checkOptionDialogVisible}
+          width="50%"
+          append-to-body={true}
+          class="popup-dialog"
+          onClose={() => (this.checkOptionDialogVisible = false)}
+        >
+          <div class="entity-check-option-container">
+            <div class="input-item">
+              <label>{this.$t('audit')}：</label>
+              <span>{{ text }}</span>
+            </div>
+            {
+              checkOpinion &&
+              <div class="input-item">
+                <label>{this.$t('opinion')}：</label>
+                <el-input
+                  type="textarea"
+                  class="textarea"
+                  rows="5"
+                  placeholder={this.$t('please enter')}
+                  value={this.option}
+                  onInput={e => (this.option = e)}
+                  clearable
+                >
+                </el-input>
+              </div>
+            }
+            {
+              checkSign &&
+              <div class="input-item">
+                <label>{this.$t('signature')}：</label>
+                <div class="entity-check-option-sign">
+                  <div class="entity-check-option-sign-container" ref="signatureContainer">
+                    <canvas ref="signature" width="100%" height="100%"></canvas>
+                  </div>
+                  <el-button type="text" onClick={() => this.signaturePad.clear()}>{this.$t('re-sign')}</el-button>
+                </div>
+              </div>
+            }
+            <div class="entity-check-option-button-group">
+              <el-button size="middle" type="primary" onClick={this.$handler.bind(this, this.checkOptionDialogVisible)}>{this.$t('determine')}</el-button>
+              <el-button size="middle" onClick={() => (this.checkOptionDialogVisible = false)}>{this.$t('return')}</el-button>
+            </div>
+          </div>
+        </el-dialog>
+      )
+    },
+    renderCheckDrawer () {
+      const { checkOpinion = true, checkSign = true } = this.checkOptionDialogVisible || {}
+      return (
+        <el-drawer
+          visible={!!this.checkOptionDialogVisible}
+          direction="rtl"
+          size="100%"
+          modal={false}
+          custom-class="check-form-edit__drawer"
+          destroy-on-close={true}
+        >
+          <p slot="title">
+            <van-nav-bar
+              class="edit-drawer__nav"
+              title={this.$t('submission of audit comments')}
+              left-text=""
+              left-arrow
+              onClick-left={() => (this.checkOptionDialogVisible = false)}
+            />
+          </p>
+          <div class="check-form-options">
+            {
+              checkOpinion &&
+              <div class="m-input-item">
+                <p class="m-input-item__title">{this.$t('audit opinion')}</p>
+                <el-input
+                  type="textarea"
+                  class="textarea"
+                  rows="5"
+                  placeholder={this.$t('please enter')}
+                  value={this.option}
+                  onInput={e => (this.option = e)}
+                  clearable
+                >
+                </el-input>
+              </div>
+            }
+            {
+              checkSign &&
+              <div class="m-input-item">
+                <p class="m-input-item__title">
+                  <span>{this.$t('handwritten signature')}</span>
+                  <span class="fr clear-sign-btn" onClick={() => this.signaturePad.clear()}>
+                    <i class="epx-icon-clear"></i>
+                    {this.$t('re-sign')}
+                  </span>
+                </p>
+                <div class="entity-check-option-sign">
+                  <div class="entity-check-option-sign-container" ref="signatureContainer">
+                    <canvas ref="signature" width="100%" height="100%"></canvas>
+                  </div>
+                </div>
+              </div>
+            }
+            <div class="check-form-button__group">
+              <el-button onClick={() => (this.checkOptionDialogVisible = false)}>{this.$t('cancel')}</el-button>
+              <el-button type="primary" onClick={this.$handler.bind(this, this.checkOptionDialogVisible)}>{this.$t('submit')}</el-button>
+            </div>
+          </div>
+        </el-drawer>
+      )
+    }
+  },
+  created () {
+    this.$configs.saveSuccessText = this.$t('add success')
+    this.$configs.updateSuccessText = this.$t('edit successfully')
+    this.oldFullHeight = document.documentElement.clientHeight
+    this.init()
+    this.$event.on('submitForm', (configs = {}, cb, err) => {
+      this.submitForm(configs, cb, err)
+    })
+    // 校验表单
+    this.$event.on('validateForm', (cb) => {
+      const flag = this.validateForm()
+      cb(flag)
+    })
+  },
+  mounted () {
+    this.formConfigs = { ...this.$configs }
+    if (this.$configs.showCatalog && !this.$isMobile) {
+      this.getCatalogList()
+      if (this.$configs.catalogLoadWay === 'all') {
+        this.addScrollListener()
+      }
+    }
+    const self = this
+    window.onresize = () => {
+      if (self.oldFullHeight) {
+        self.screenHeightNoChange = document.documentElement.clientHeight === self.oldFullHeight
+      }
+    }
+  },
+  updated () {
+    if (this.$configs.showCatalog && !this.$isMobile) {
+      this.$nextTick(() => {
+        if (this.$refs.catalogContainer && !this.$refs.catalogContainer.height) {
+          this.$refs.catalogContainer.style.height = this.upPage.$el.offsetHeight - this.$refs.container.offsetTop - 20 + 'px'
+        }
+      })
+    }
+  },
+  render () {
+    if (!this.data || !this.fieldScope) return
+    const { showCatalog, catalogPosition } = this.$configs
+    return (
+      <div ref="container" style={this.$component.style} class={['add-form-container', { 'has-catalog': showCatalog && !this.$isMobile }, `has-catalog__${catalogPosition}`]}>
+        {/** 目录 **/}
+        { showCatalog && !this.$isMobile && this.renderCatalog() }
+        {/** 表单 **/ }
+        { this.renderForm() }
+        { this.renderCheck() }
+        { this.renderCheckPerson() }
+      </div>
+    )
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add-form-container {
+  // display: flex;
+  position: relative;
+  height: 100%;
+}
+.add-form {
+  height: 100%;
+  overflow: auto;
+}
+.has-catalog {
+  .add-form {
+    width: calc(100% - 290px);
+    float: right;
+  }
+}
+.has-catalog__right {
+  .add-form {
+    float: none
+  }
+  .catalog {
+    right: 0;
+  }
+}
+// .add-form {
+//   flex: 1;
+// }
+.field-group {
+}
+.field-item {
+  margin-bottom: 16px;
+  &.fold {
+    i {
+      transform: rotate(180deg);
+    }
+    .form-content {
+      display: none;
+    }
+  }
+}
+
+.check-person-button__group {
+  text-align: right;
+}
+
+.check-person__list {
+  max-height: 300px;
+  overflow: auto;
+  margin-top: 10px;
+}
+
+.check-person{
+  display: flex;
+  align-items: center;
+  padding: 4px 0;
+}
+.check-person__item {
+  display: flex;
+  align-items: center;
+  line-height: 28px;
+  img {
+    width: 100%;
+  }
+}
+.check-person__name {
+  margin-left: 10px;
+}
+
+.edit-drawer {
+  height: 100%;
+  overflow: auto;
+}
+.edit-drawer__nav {
+  .van-icon {
+    color: #333
+  }
+}
+
+/**移动端 */
+.m-field-item {
+  display: block;
+  margin-bottom:10px;
+  .form-title {
+    font-size: 18px;
+    padding: 0 15px;
+    line-height: 50px;
+    border: none;
+    .form-title-fold__icon {
+      display: none;
+    }
+    &::after {
+      display: none;
+    }
+  }
+  .form-title-border {
+    padding: 0 15px;
+    border:none;
+    position: relative;
+    line-height: 1;
+    &::before {
+      position: absolute;
+      content: '';
+      display: block;
+      width: 4px;
+      top: 2px;
+      height: 18px;
+      border-radius: 2px;
+      @include bg_color_primary;
+      left: -4px;
+    }
+  }
+  .form-title-edit {
+    display: block;
+    line-height: 50px;
+   }
+}
+
+.form-content {
+  padding: 12px;
+  overflow: hidden;
+  background: #fff;
+  &.no-padding {
+    padding: 0;
+  }
+}
+.button-group {
+  margin: 6px 0;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  &::v-deep {
+    .el-button {
+      padding: 10px 12px;
+      margin: 8px;
+      i {
+        margin-right: 4px;
+      }
+    }
+  }
+}
+.m-button-group {
+  width: 100%;
+  height: 72px;
+}
+.m-button-more {
+  height: 48px;
+
+  .m-button-inner {
+    padding: 0;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
+  }
+}
+.m-button-inner {
+  position: absolute;
+  box-sizing: border-box;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 16px 12px;
+  // box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
+  z-index: 2;
+  background-color: #fff;
+}
+.m-button-change{
+  position: absolute;
+}
+.m-operate {
+  flex: 1;
+  display: flex;
+
+}
+.m-button {
+  flex: 1;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  height: 46px;
+  line-height: 46px;
+  padding: 0;
+}
+
+.m-button-one {
+  width: 120px
+}
+
+.catalog {
+  position: absolute;
+  top: 0;
+  overflow: auto;
+  background: #fff;
+  width: 280px;
+  flex-shrink: 0;
+}
+.catalog-item {
+  padding: 0 20px;
+  .catalog-list {
+    display: none;
+  }
+  &.is-opened {
+    .catalog-list {
+      display: block;
+    }
+    .catalog-item__icon {
+      transform: rotate(180deg);
+    }
+  }
+  &.active {
+    >.catalog-item__title {
+      @include font_color_primary;
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 48px;
+        @include bg_color_primary(.2);
+      }
+      &::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        width: 0;
+        height: 48px;
+        border-left: 2px solid;
+        @include border_color_primary;
+      }
+    }
+  }
+}
+
+.catalog-item__title {
+  height: 48px;
+  line-height: 48px;
+  font-size: 16px;
+  font-weight: 700;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items:center;
+  &:hover {
+    @include font_color_primary;
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      width: 100%;
+      height: 48px;
+      @include bg_color_primary(.2);
+    }
+  }
+}
+
+.catalog-item__icon {
+  color: #999;
+  transition: all .5s;
+  font-size: 14px;
+  position: relative;
+  z-index: 1
+}
+
+.catalog-subitem {
+  .catalog-item__title {
+    font-weight: 500;
+    font-size: 14px;
+  }
+}
+
+@media screen and (max-width: 992px) {
+  .form-content {
+    padding: 0
+  }
+  .form-note{
+    margin: 12px 20px 12px;
+  }
+}
+</style>
+<style lang="scss">
+.entity-check-option-container {
+  padding: 14px 14px 4px;
+  .input-item {
+    display: flex;
+    white-space: nowrap;
+    margin-bottom: 24px;
+    overflow: hidden;
+  }
+  .entity-check-option-sign {
+    flex: 1;
+    flex-shrink: 1;
+    overflow: hidden;
+  }
+  .entity-check-option-sign-container {
+    width: 100%;
+    height: 160px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    background: rgb(246, 246, 246);
+    border: 1px solid #e3e3e3;
+  }
+  .entity-check-option-button-group {
+    text-align: center;
+    .el-button + .el-button {
+      margin-left: 40px;
+    }
+  }
+}
+
+// 通过流程颜色
+  .djs-visual.pass {
+    rect {
+      stroke: #67C23A!important;
+    }
+    text {
+      fill: #67C23A!important;
+    }
+    path {
+      stroke: #67C23A!important;
+      &:last-child {
+        fill: #67C23A!important;
+      }
+    }
+    circle, polygon {
+      stroke: #67C23A!important;
+    }
+  }
+   // 通过流程颜色
+.djs-visual.wait {
+  rect {
+    stroke: #E6A23C!important;
+  }
+  text {
+    fill: #E6A23C!important;
+  }
+  path {
+    stroke: #E6A23C!important;
+    &:last-child {
+      fill: #E6A23C!important;
+    }
+  }
+}
+.djs-visual.flow {
+  path {
+    &:last-child {
+      fill: none!important;
+    }
+  }
+}
+</style>
+<style lang="scss">
+.check-form-edit__drawer {
+  .el-drawer__header {
+    padding: 0;
+    margin:0;
+  }
+  .el-drawer__close-btn {
+    display: none;
+  }
+  .el-drawer__body {
+    overflow: auto;
+    background: #F7F8FA;
+  }
+}
+.check-form-options{
+  .m-input-item {
+    background: #fff;
+    margin-bottom: 10px;
+    padding: 16px;
+  }
+  .m-input-item__title {
+    margin-bottom: 16px;
+  }
+  .entity-check-option-sign-container {
+    height: 190px;
+    background: #F4F3F3;
+    border-radius: 4px;
+    border: 1px solid #E3E3E3;
+  }
+  .clear-sign-btn {
+    @include font_color_primary;
+    cursor: pointer;
+    > i {
+      margin-right: 4px;
+    }
+  }
+}
+.check-form-button__group {
+  position: fixed;
+  bottom: 0;
+  padding: 20px;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  >.el-button {
+    width: 120px;
+  }
+  >.el-button--primary {
+    flex: 1;
+  }
+}
+</style>