diantou/src_custom/spicannualreport/xm-annual-report-form.vue

<template>
  <span>
    <sd-webflow ref="flow" :removed-tabs="['sdRelatedDoc']" :class="$style.materialListForm">
      <template v-slot:form="{ model, fields }">
        <div v-show="loading" :class="$style.loadingDiv">
          <a-spin :spinning="true" tip="创建数据中..." />
        </div>
        <table>
          <tr>
            <!-- <sd-form-item-td name="fileTitle" :colspan="10" /> -->
            <sd-form-item-td name="fileTitle" :colspan="10">
              <template>
                <a-input v-if="!isShow" v-model="model.fileTitle"></a-input>
                <span v-else read-only>{{ model.fileTitle }}</span>
              </template>
            </sd-form-item-td>
            <sd-form-item-td name="reportYear" :colspan="10">
              <template>
                <a-date-picker
                  v-if="!isShow"
                  v-model="model.reportYear"
                  mode="year"
                  picker="YYYY"
                  format="YYYY"
                  :allow-clear="false"
                  placeholder="选择年度"
                  :input-read-only="true"
                  :open="endOpen"
                  :value="year"
                  @panelChange="yearChange"
                  @openChange="handleEndOpenChange"
                ></a-date-picker>
                <span v-else read-only>{{ model.reportYear }}</span>
              </template>
            </sd-form-item-td>
          </tr>
          <tr>
            <sd-form-item-td name="auditedUnit" :colspan="10" />
            <!-- <sd-form-item-td name="lastTime" :colspan="10"> </sd-form-item-td> -->
            <sd-form-item-td name="lastTime" :colspan="10">
              <template>
                <a-date-picker v-if="!isShow" v-model="model.lastTime"></a-date-picker>
                <span v-else read-only>{{ model.lastTime | sdDateFormat('YYYY-MM-DD') }}</span>
              </template>
            </sd-form-item-td>
          </tr>
          <tr>
            <sd-form-item-td name="attachment" :colspan="10"> </sd-form-item-td>
          </tr>
          <tr>
            <sd-form-item-td name="description" :colspan="21">
              <a-textarea v-model="model.description" :rows="3" />
            </sd-form-item-td>
          </tr>
          <tr>
            <!-- 编辑人员 -->
            <sd-form-item-td name="creatorName" :colspan="10" />
            <!-- 编辑日期 -->
            <sd-form-item-td name="creationTime" :colspan="10" />
          </tr>
        </table>

        <table>
          <tr
            ><td :colspan="4">
              <sd-form-item
                name="spicAnnualReportItemEntities"
                :label="null"
                :input-td-attrs="{ class: 'materialEntities' }"
              >
                <template v-slot:read-and-edit="{ editable }">
                  <audit-advanced-group
                    :expand="expand"
                    :expand-str="'expand'"
                    :group-label="'资料清单'"
                    @changedClick="changedClick"
                  >
                    <template>
                      <div v-show="expand && editable" :class="$style.btnmubandiv">
                        <a-button type="link" :class="$style.btnmuban" @click="showImportTable"
                          ><a-icon type="check-circle" :theme="'filled'" />
                          用模板创建
                        </a-button>
                      </div>
                      <sd-child-table
                        ref="childTable"
                        v-model="model.spicAnnualReportItemEntities"
                        :class="$style.projecttable"
                        label=""
                        :read-only="!editable"
                        :sequence-column="true"
                        :fields="Array.from(fields.spicAnnualReportItemEntities.attr.dync)"
                        :columns="childColumns"
                        @change="changeCTable"
                      >
                        <!-- input-form 表示这部分是子表组件的form插槽 -->
                        <template v-slot:form="{ model, fields }">
                          <table :class="$style.xmTable">
                            <tr>
                              <sd-form-item-td name="dataName" :colspan="3" />
                            </tr>
                            <tr>
                              <sd-form-item-td name="dataDesc" :colspan="3">
                                <a-textarea v-model="model.dataDesc" :rows="3" />
                              </sd-form-item-td>
                            </tr>
                            <tr>
                              <!-- 资料类型 -->
                              <sd-form-item-td name="dataType" component="a-select" :colspan="3" />
                            </tr>
                            <tr>
                              <!-- 附件 -->
                              <sd-form-item-td name="attachment">
                                <template v-slot:read-and-edit="{ editable }">
                                  <sd-attachment
                                    v-model="model.attachment"
                                    :read-only="editable ? false : true"
                                    :group-id="JSON.parse(fields.attachment.value).value"
                                  />
                                </template>
                              </sd-form-item-td>
                            </tr>
                          </table>
                        </template>
                        <template v-slot:attachment="{ field, text, record }">
                          <div @click="attClick">
                            <sd-attachment
                              :key="key"
                              :read-only="editable ? false : true"
                              :group-id="JSON.parse(text).value ? JSON.parse(text).value : text"
                            />
                          </div>
                        </template>
                      </sd-child-table>
                    </template>
                  </audit-advanced-group>
                </template>
              </sd-form-item>
            </td>
          </tr>
        </table>
      </template>
    </sd-webflow>
    <!-- 选择导入模板 -->
    <a-modal
      :visible="visible"
      title="选择模板"
      width="50%"
      :destroy-on-close="true"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <sd-data-table-ex
        ref="importTable"
        check-type="radio"
        :filter-expressions="expressions"
        :columns="columns2"
        form-id="iamTemplate"
        page-id="audit/template/iamTemplate"
        :search-fields="['templateName', 'templateType', 'isDefault']"
        show-selection
      >
      </sd-data-table-ex>
    </a-modal>
  </span>
</template>

<script>
import components from './_import-components/xm-annual-report-form-import'
import { Message } from 'ant-design-vue'
import TableColumnTypes from '@/common/services/table-column-types'
import xmSpicAnnualReportService from './xm-spic-annual-report-service'
import auditAdvancedGroupMixins from '@product/iam/components/audit-advanced-group-mixins'
import auditAdvancedGroup from '@product/iam/components/audit-advanced-group.vue'

export default {
  name: 'XmAnnualReportForm',
  metaInfo() {
    return {
      title: '年度报告库',
    }
  },
  components: { ...components, auditAdvancedGroup },
  mixins: [auditAdvancedGroupMixins],
  data() {
    return {
      loading: false,
      projectId: null,
      visible: false,
      expand: true,
      isShow: false,
      key: 1,
      endOpen: false,
      childFields: [],
      expressions: [
        {
          dataType: 'str',
          name: 'templateType',
          op: 'like',
          stringValue: '%4%',
        },
      ],
      childColumns: [
        {
          title: '序号',
          dataIndex: 'sortNum',

          customRender: (text, record, index) => `${index + 1}`,
        },
        {
          title: '资料名称',
          width: '350px',
          dataIndex: 'dataName',
        },
        {
          title: '资料描述',
          width: '350px',
          dataIndex: 'dataDesc',
        },
        {
          title: '资料类型',
          width: '100px',
          dataIndex: 'dataType',
        },
        {
          title: '附件',
          width: '200px',
          dataIndex: 'attachment',
        },
      ],
      columns2: [
        {
          title: '序号',
          dataIndex: 'sortNumber',
          width: '70px',
          customRender: (text, record, index) => `${index + 1}`,
        },
        {
          title: '模板名称',
          dataIndex: 'templateName',
          scopedSlots: { customRender: 'islink' },
        },
        {
          title: '模板类型',
          dataIndex: 'templateType',
        },
        {
          title: '编制日期',
          dataIndex: 'authTime',
          sdRender: TableColumnTypes.date,
          sorter: true,
          defaultSortOrder: 'desc',
        },
        {
          title: '附件',
          dataIndex: 'attachment',
          sdHidden: true,
        },
      ],
    }
  },
  mounted() {
    debugger
    const autoCreate = this.$refs.flow.getFieldValue('autoCreate')
    if (autoCreate === '1') {
      this.isShow = true
    }
    // const fileTitle = this.$refs.flow.getFieldValue('fileTitle')
    // this.$refs.flow.setFieldValue('title', fileTitle + '的年度报告')
  },
  methods: {
    showImportTable() {
      this.visible = !this.visible
    },
    yearChange(value) {
      this.year = value
      this.$refs.flow.setFieldValue('reportYear', value.format('YYYY'))
      this.$refs.flow.validateField('reportYear').then((res) => {
        console.log(res)
      })
      if (document.getElementsByClassName('ant-calendar-picker-container').length > 0) {
        document.getElementsByClassName('ant-calendar-picker-container')[0].style.display = 'none'
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open
    },

    // 弹出窗确认
    handleOk() {
      this.loading = true
      this.showImportTable()
      // 获取别选择的行信息
      const selectInfo = this.$refs.importTable.getSelectedRows()
      xmSpicAnnualReportService.importAnnualPeportInfo(selectInfo[0].attachment).then((res) => {
        Message.success('模板创建成功')
        const data = this.$refs.flow.getFieldValue('spicAnnualReportItemEntities') || []
        const tableData = data.concat(res.data)
        tableData.forEach((item, index) => {
          if (!item.id) {
            item.id = 'fakeId' + index + 1
          }
        })
        this.$refs.flow.setFieldValue('spicAnnualReportItemEntities', tableData)
        this.loading = false
      })
    },
    // 附件列点击，停止默认事件
    attClick() {
      event.stopPropagation()
    },
    // 弹出窗取消
    handleCancel() {
      this.showImportTable()
    },
    changeCTable() {
      this.key++
    },
  },
}
</script>

<style module lang="scss">
@import '@/webflow/sd-flow-form.scss';
.xm-table {
  :global(td.ant-form-item-label) {
    width: 15%;
  }
}
.btnmubandiv {
  position: relative;
  .btnmuban {
    position: absolute;
    top: 0;
    right: 190px;
    z-index: 100;
  }
}
:global(.ant-upload) {
  background: transparent !important;
  border: none !important;
}
// :global(.ant-upload-text) {
//   display: none !important;
// }
:global(.ant-upload-drag-icon) {
  margin-bottom: 0 !important;
  :global(.anticon) {
    font-size: 26px !important;
  }
}
.material-list-form {
  :global(.child-table-title) {
    display: none;
  }
}
.child-td {
  :global(.groupstyle_audit-advanced-group_product) {
    margin-left: 4px;
  }
}
.loading-div {
  position: absolute;
  z-index: 101;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgb(255 255 255 / 70%);
}
</style>