diantou/src_product/iam/law/lawcheckapply/law-check-apply-form.vue

<template>
  <sd-webflow ref="webflow" :class="$style.webflow" :validate-form="validForm">
    <template v-slot:extra-tabs="{ FlowData }">
      <!-- 增加的tab页默认在最后，通过sd-before、sd-after可以指定位置 -->
      <a-tab-pane key="other" :tab="tabTitle" sd-before="sdFlowchart">
        <!-- 关联案件组件 -->
        <law-case-report-relate-doc
          v-model="relatedDoc"
          :flow-data="FlowData"
          :fields="
            FlowData.processFormData.processFormPropertyValues.find(
              (item) => item.name === 'LAW_APPLY_RELATED'
            ).attrFD.dync
          "
          :related.sync="relatedDoc"
          @update:related="fnRelatedDoc"
        ></law-case-report-relate-doc>
      </a-tab-pane>
    </template>
    <template v-slot:form="{ model, FlowData }">
      <sd-form-by-builder
        :class="$style.builderTable"
        :form-data="filter(FlowData.processFormData)"
      />
    </template>
  </sd-webflow>
</template>

<script>
import lawCaseReportRelateDoc from '../report/law-case-report-relate-doc.vue'
import components from './_import-components/law-check-apply-form-import'
import { getUserInfo } from '@/common/store-mixin'

export default {
  name: 'LawCheckApplyForm',
  metaInfo: {
    title: '法律审查申请',
  },
  components: {
    lawCaseReportRelateDoc,
    ...components,
  },
  data() {
    return {
      tabTitle: '关联文件',
      relatedDoc: [],
    }
  },
  mounted() {
    const ini = setInterval(() => {
      if (
        this.$refs.webflow &&
        (this.$refs.webflow.$refs.form || this.$refs.webflow.$refs.sdForm)
      ) {
        clearInterval(ini)
        this.relatedDoc = this.$refs.webflow.getFieldValue('LAW_APPLY_RELATED') || []
        this.setTabTitle()

        // 进入页面后 将选中的流程参与者赋值到审核人字段
        const userinfo = getUserInfo()
        const authUser = this.$refs.webflow.getFieldValue('AUTH_USER')
        const checkUser = this.$refs.webflow.getFieldValue('CHECK_USER')
        const curuser = userinfo.account
        if (
          this.$refs.webflow.FlowData.mode === 'EDIT' &&
          authUser?.some((user) => user.code === curuser) &&
          !checkUser?.some((user) => user.code === curuser)
        ) {
          const userArr = [
            ...checkUser,
            { code: userinfo.account, name: userinfo.name, type: 'User' },
          ]
          this.$refs.webflow.setFieldValue('CHECK_USER', userArr)
        }
      }
    }, true)
  },
  methods: {
    validForm() {
      // 自定义校验，适用于多个字段联合校验，支持promise
      const arr = this.$refs.webflow.getFieldValue('CHECK_USER')
      if (arr) {
        const str = arr
          .map((obj) => {
            return obj.code
          })
          .join(',')
        this.$refs.webflow.setFieldValue('CHECK_USER_ID', str)
        return Promise.resolve(true)
      } else {
        return Promise.resolve(true)
      }
    },
    fnRelatedDoc(data) {
      this.$refs.webflow.setFieldValue('LAW_APPLY_RELATED', data)
      this.setTabTitle()
    },
    setTabTitle() {
      if (this.relatedDoc.length > 0) {
        this.tabTitle = '关联案件' + ' (' + this.relatedDoc.length + ')'
      } else {
        this.tabTitle = '关联案件'
      }
    },
    filter(pageFormData) {
      const formData = pageFormData
      formData.processFormPropertyValues.forEach((item) => {
        // 关联文件
        if (item.name === 'LAW_APPLY_RELATED') {
          item.attrFD.formItemProps.inputProps.class = this.$style.relateTable
        }
      })
      return formData
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.webflow {
  :global(.ant-space-horizontal) {
    :global(.ant-space-item):nth-child(4) {
      display: none;
    }
  }
  .lawyer-table {
    :global(.header_sd-child-table_common) {
      button {
        &:first-child {
          display: none;
        }
      }
    }
  }
  .relate-table {
    display: none;
  }
  .builder-table {
    & > tr {
      &:last-child {
        display: none;
      }
    }
  }
}
</style>