diantou/src_product/iam/audit/matters/template/audit-matters-template-form.vue

<template>
  <span>
    <audit-form-top-banner
      :handel-save-form="saveForm"
      :form-data="mode"
      @handelSaveForm="saveForm"
    >
      <sd-detail-form
        ref="docform"
        page-id="audit/matters/template/iamAuditMattersTemplate"
        :record-id="this.$route.query.record ? parseInt(this.$route.query.record) : null"
        :class="[$style.form, 'readonlyform']"
        @close="close(true)"
        @saved="saved"
        @sdFormReady="sdFormReady"
      >
        <template v-slot="{ model, fields }">
          <table>
            <tr>
              <audit-advanced-group
                :expand="expandC"
                :expand-str="'expandC'"
                :group-label="'基本信息'"
                @changedClick="changedClick"
              />
            </tr>
          </table>

          <table v-show="expandC">
            <tr :class="$style.displayTr">
              <td class="ant-form-item-label ant-form-item-label"></td>
              <td></td>
              <td class="ant-form-item-label ant-form-item-label"></td>
              <td></td>
            </tr>
            <tr>
              <!-- 模板名称 -->
              <sd-form-item-td name="templateName" :colspan="3" />
            </tr>
            <tr>
              <sd-form-item-td name="creatorName" />
              <sd-form-item-td name="id" :hidden="true" />
              <sd-form-item-td name="creationTime" />
            </tr>
            <tr>
              <!-- 所属单位 -->
              <sd-form-item-td name="createDeptName" :colspan="3"> </sd-form-item-td>
            </tr>
          </table>

          <table>
            <tr>
              <td :class="$style.selectTd">
                <audit-advanced-group
                  :expand="expandY"
                  :expand-str="'expandY'"
                  :group-label="'审计事项'"
                  @changedClick="changedClick"
                />
                <a-button
                  v-if="mode === 'EDIT'"
                  :class="$style.selectBtn"
                  type="link"
                  @click="matterSelect"
                >
                  <a-icon type="check-circle" :theme="'filled'" />
                  选择
                </a-button>
              </td>
            </tr>
          </table>

          <div v-show="expandY" :class="$style.wrapHeight">
            <div :class="$style.rowHeight">
              <div :class="$style.leftcard">
                <audit-matters-template-tree
                  :key="key"
                  :newtree="newtree"
                  :default-tree-data="teplatemTreeData"
                  :template-id="templateId"
                  :tree-data-type="'templateTree'"
                  @treeSelect="treeSelect"
                ></audit-matters-template-tree>
              </div>

              <div v-show="mmShows" :class="$style.rightcard">
                <a-card :class="$style.acard">
                  <sd-detail-form
                    ref="iamAuditMattersform"
                    page-id="audit/matters/iamAuditMatters"
                    :record-id="recordId"
                    :read-only="true"
                    :class="[$style.form, 'readonlyform']"
                  >
                    <template v-slot="{ model, fields }">
                      <table>
                        <tr>
                          <td style="padding-left:5px;border:none">
                            <audit-advanced-group
                              :expand="expandA"
                              :expand-str="'expandA'"
                              :group-label="'基本信息'"
                              @changedClick="changedClick"
                            />
                          </td>
                        </tr>
                      </table>

                      <table v-show="expandA">
                        <tr>
                          <!-- 审计事项编号 -->
                          <sd-form-item-td name="auditMattersCode">
                            <span>{{ model.auditMattersCode }}</span>
                          </sd-form-item-td>
                          <!-- 审计事项名称 -->
                          <sd-form-item-td name="auditMattersName">
                            <span>{{ model.auditMattersName }}</span>
                          </sd-form-item-td>
                        </tr>
                        <tr>
                          <!-- 风险点名称 -->
                          <sd-form-item-td name="riskPointName" :colspan="3">
                            <span>{{ model.riskPointName }}</span>
                          </sd-form-item-td>
                        </tr>

                        <!-- 风险点描述 -->

                        <tr>
                          <sd-form-item-td name="riskPointDesc" :colspan="3">
                            <span>{{ model.riskPointDesc }}</span>
                          </sd-form-item-td>
                        </tr>
                        <tr>
                          <!-- 检查资料 -->
                          <sd-form-item-td name="checkMaterial" :colspan="3">
                            <span>{{ model.checkMaterial }}</span>
                          </sd-form-item-td>
                        </tr>
                      </table>

                      <table>
                        <tr>
                          <td style="padding-left:5px;border:none">
                            <audit-advanced-group
                              :expand="expandX"
                              :expand-str="'expandX'"
                              :group-label="'审计程序'"
                              @changedClick="changedClick"
                            />
                          </td>
                        </tr>
                      </table>

                      <table v-if="expandX">
                        <tr
                          ><td :colspan="4">
                            <sd-form-item name="iamAuditProcedureEntitys" :label="null">
                              <template v-slot:read-and-edit="{ editable }">
                                <xm-child-table
                                  ref="zzzz"
                                  v-model="model.iamAuditProcedureEntitys"
                                  :columns="columns"
                                  :read-only="true"
                                  label=""
                                  :captionvisiable="false"
                                  :fields="
                                    [
                                      {
                                        caption: '序号',
                                        name: 'sortNum',
                                        dataType: 'number',
                                        attr: {},
                                      },
                                    ].concat(Array.from(fields.iamAuditProcedureEntitys.attr.dync))
                                  "
                                  :width="1200"
                                >
                                </xm-child-table>
                              </template> </sd-form-item></td></tr
                      ></table>

                      <table>
                        <tr
                          ><td style="padding-left:5px;border:none">
                            <audit-advanced-group
                              :expand="expandZ"
                              :expand-str="'expandZ'"
                              :group-label="'法律制度依据'"
                              @changedClick="changedClick"/></td
                        ></tr> </table

                      ><table>
                        <tr v-if="expandZ"
                          ><td :colspan="4">
                            <sd-form-item name="iamAuditLawsRelEntitys" :label="null">
                              <template v-slot:read-and-edit="{ editable }">
                                <xm-child-table
                                  v-model="model.iamAuditLawsRelEntitys"
                                  :read-only="true"
                                  label=""
                                  :captionvisiable="false"
                                  :fields="
                                    [
                                      {
                                        caption: '序号',
                                        name: 'sortNum',
                                        dataType: 'number',
                                        attr: {},
                                      },
                                    ].concat(Array.from(fields.iamAuditLawsRelEntitys.attr.dync))
                                  "
                                  :width="1200"
                                  :columns="columns1"
                                >
                                </xm-child-table>
                              </template> </sd-form-item
                          ></td>
                        </tr>
                      </table>
                    </template>
                  </sd-detail-form>
                </a-card>
              </div>
            </div>
          </div>
        </template>
      </sd-detail-form>
    </audit-form-top-banner>
    <audit-matters-modal :visible="visible" @handleOk="handleOk"></audit-matters-modal>
  </span>
</template>

<script>
import { message } from 'ant-design-vue'
import crossWindowWatcher from '@/common/services/cross-window-watcher'
import auditFormTopBanner from '../../../components/audit-form-top-banner'
import auditAdvancedGroup from '../../../components/audit-advanced-group.vue'
import auditAdvancedGroupMixins from '../../../components/audit-advanced-group-mixins'
import auditMattersModal from './audit-matters-modal'
import auditMattersTemplateTree from './audit-matters-template-tree'
import auditMattersTreeService from './audit-matters-tree-service'
import components from './_import-components/audit-matters-template-form-import'
export default {
  name: 'AuditMattersTemplateForm',
  metaInfo: {
    title: '事项模板',
  },
  components: {
    ...components,
    auditFormTopBanner,
    auditAdvancedGroup,
    auditMattersModal,
    auditMattersTemplateTree,
  },
  mixins: [auditAdvancedGroupMixins],
  data() {
    return {
      orgName: undefined, // 审计机构名称
      key: 0,
      visible: false,
      expandA: true,
      expandC: true,
      mode: null,
      expandY: true,
      expandX: true,
      expandZ: true,
      teplatemTreeData: [],
      recordId: null,
      newtree: true,
      mmShows: false,
      templateId: this.$route.query.record ? parseInt(this.$route.query.record) : null,
      columns: [
        {
          title: '序号',
          dataIndex: 'sortNum',
          width: '80px',
          customRender: (text, record, index) => `${index + 1}`,
        },
        { dataIndex: 'stepName', width: '60%' },
        {
          dataIndex: 'importance',
          width: '100px',
          sdHidden: false,
        },
        {
          dataIndex: 'attachment',
          width: '30%',
        },
      ],
      columns1: [
        {
          title: '序号',
          dataIndex: 'sortNum',
          width: '80px',
          customRender: (text, record, index) => `${index + 1}`,
        },
        {
          dataIndex: 'lawsTitle',
          width: '40%',
        },
        {
          dataIndex: 'lawsDocNumber',
          width: '15%',
        },
        {
          dataIndex: 'lawsArticle',
        },
        { dataIndex: 'lawsLibraryId', sdHidden: true },
        { dataIndex: 'lawsType', sdHidden: true },
      ],
    }
  },
  created() {
    // 初始化地址树
    this.initTreeData()
  },
  methods: {
    // 页面加载完成后
    sdFormReady() {
      this.mode = this.$refs.docform.formData.mode
      const ini = setInterval(() => {
        if (
          this.$refs.docform &&
          (this.$refs.docform.$refs.form || this.$refs.docform.$refs.sdForm)
        ) {
          clearInterval(ini)
          if (!this.$refs.docform.getFieldValue('id')) {
            auditMattersTreeService.getCurrentUserGroup().then((res) => {
              this.$refs.docform.setFieldValue('createDeptName', res.data.name)
            })
          }
        }
      }, 100)
    },
    close(flag) {
      crossWindowWatcher.notifyChange(this.$route.fullPath, flag)
      window.close()
    },
    saved() {
      message.success('保存成功！')
      setTimeout(() => {
        this.close(true)
      }, 800)
    },
    // 保存
    saveForm() {
      const templateRel = []

      this.getDate(this.teplatemTreeData, templateRel)
      this.$refs.docform.setFieldValue('iamAuditMattersTemplateRelEntitys', templateRel)
      this.$refs.docform.saveBtnClick()
    },

    getDate(nodeinfo, templateRel) {
      // 获取树 数据
      const templateId = this.$route.query.record ? parseInt(this.$route.query.record) : null
      nodeinfo.forEach((node, nodeindex) => {
        // 封装
        const obj = {}
        if (node.props.isItem) {
          obj.itemType = 'item'
          const mm = node.id.toString().split('-')
          node.id = Number(mm[0])
        } else {
          obj.itemType = 'catalog'
        }
        obj.templateId = templateId
        obj.parentId = node.props.parentId
        obj.relationId = node.id
        if (node.disabled) {
          obj.disabled = 1
        } else {
          obj.disabled = 0
        }

        templateRel.push(obj)

        if (node.children) {
          // 判断子节点是否有选中的节点
          this.getDate(node.children, templateRel)
        }
      })
    },

    matterSelect() {
      // 选择事项分类
      this.visible = true
    },
    handleOk(checkednode) {
      this.newtree = false
      this.key++
      this.teplatemTreeData = []
      this.teplatemTreeData = checkednode
      this.recordId = null
      // 根据选中的数据展示 左边的表单
      this.mmShows = false
    },

    treeSelect(info) {
      // 根据事项id获取事项信息
      if (info.node.dataRef.props.isItem) {
        const mm = info.node.dataRef.id.toString().split('-')
        this.recordId = Number(mm[0])
        this.mmShows = true
      } else {
        // 分类
        this.mmShows = false
      }
    },

    transformData(data) {
      return data.map((d) => {
        const { children, ...rest } = d
        return {
          ...rest,
          children: children && this.transformData(children),
          scopedSlots: { title: 'title' },
        }
      })
    },

    // 初始化地址树
    initTreeData() {
      this.newtree = true
      const id = null
      var templateId = this.$route.query.record ? parseInt(this.$route.query.record) : parseInt(0)
      auditMattersTreeService
        .findIamAuditMattersTree(templateId, id, 'templateTree')
        .then((res) => {
          if (res.data) {
            this.teplatemTreeData = this.transformData(res.data)
            this.teplatemTreeData.filter((act) => {
              if (act.props.disabled) {
                act.disabled = true
              } else {
                act.disabled = false
              }
              return act
            })
          }
        })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
@import '@/webflow/sd-flow-form.scss';
.wrap-height {
  width: 90%;
  height: 100%;
  margin: auto;
  .row-height {
    display: flex;
    flex: auto;
    height: 100%;
    .leftcard {
      width: 20%;
      height: 100%;
      overflow: auto;
    }
    .rightcard {
      flex: 1;
      width: calc(100% - 20%);
      height: 100%;
      :global(.title_sd-detail-form_common) {
        display: none;
      }
      :global(.ant-card-body) {
        padding: 16px 0;
        table {
          width: 100%;
          margin: 0;
        }
      }
    }
  }
}
.select-td {
  position: relative;
  .select-btn {
    position: absolute;
    top: -3px;
    right: 0;
  }
}
.display-tr {
  td {
    border: none !important;
  }
}
</style>