diantou/src_custom/spiccompositedatabase/xm-composite-database-form.vue

<template>
  <sd-webflow ref="flow" :removed-tabs="['sdRelatedDoc']" @actionBtnClick="actionBtnClick">
    <template v-slot:form="{ model, fields }">
      <table>
        <colgroup>
          <col style="width:15%;" />
          <col />
          <col style="width:15%;" />
          <col />
        </colgroup>
        <tr>
          <!-- <sd-form-item-td name="title" /> -->
          <sd-form-item-td name="title">
            <template>
              <a-input v-if="!isShow" v-model="model.title"></a-input>
              <span v-else read-only>{{ model.title }}</span>
            </template>
          </sd-form-item-td>
          <sd-form-item-td name="reportYear">
            <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="reportUnitCode" />
          <!-- 在线反馈截至时间 -->
          <!-- <sd-form-item-td name="endTime" /> -->
          <sd-form-item-td name="endTime">
            <template>
              <a-date-picker v-if="!isShow" v-model="model.endTime"></a-date-picker>
              <span v-else read-only>{{ model.endTime | sdDateFormat('YYYY-MM-DD') }}</span>
            </template>
          </sd-form-item-td>
        </tr>

        <tr>
          <!-- 参考附件 -->
          <sd-form-item-td name="referenceTemplate" :colspan="3">
            <template v-slot:read-and-edit="{ editable }">
              <sd-attachment
                v-model="model.referenceTemplate"
                :group-id="JSON.parse(fields.referenceTemplate.value).value"
                :read-only="true"
              />
            </template>
          </sd-form-item-td>
        </tr>

        <tr>
          <!-- 附件 -->
          <td class="ant-form-item-label cell_sd-form-item-td-label_common">
            <label title="附件" class="ant-form-item-required">附&emsp;&emsp;件</label>
          </td>
          <td colspan="3" class="ant-form-item-control-wrapper">
            <sd-form-item name="attachment" :colspan="3" :label="null">
              <template v-slot:read-and-edit="{ editable }">
                <XmAttachmentCus
                  v-model="model.attachment"
                  :group-id="JSON.parse(fields.attachment.value).value"
                  :read-only="!editable"
                />
              </template>
            </sd-form-item>
            <span style="color: red;"
              >小于3G的附件随意传,超过3G的附件,请拆分为多个文件进行上传</span
            >
          </td>
        </tr>

        <tr>
          <!-- 资料描述 -->
          <sd-form-item-td name="infoDesc" :colspan="3">
            <a-textarea v-model="model.infoDesc" :rowspan="4" />
          </sd-form-item-td>
        </tr>
        <tr>
          <sd-form-item-td name="remark" :colspan="3">
            <a-textarea v-model="model.remark" :rowspan="3" />
          </sd-form-item-td>
        </tr>
        <tr>
          <!-- 编制人员 -->
          <sd-form-item-td name="creatorName" />
          <!-- 编制日期 -->
          <sd-form-item-td name="creationTime" />
        </tr>
      </table>
    </template>
  </sd-webflow>
</template>

<script>
import { Message, Modal } from 'ant-design-vue'
import components from './_import-components/xm-composite-database-form-import'
import moment from 'moment'
import axios from '@/common/services/axios-instance'
import XmAttachmentCus from '@product/iam/core/attachment/xm-attachment-cus'
export default {
  name: 'XmCompositeDatabaseForm',
  metaInfo: {
    title: '综合资料',
  },
  components: {
    ...components,
    XmAttachmentCus,
  },
  data() {
    return {
      endOpen: false,
      year: null,
      isShow: false,
    }
  },
  created() {
    // if (this.$refs.flow.getFieldValue('reportYear')) {
    //   this.year = this.$refs.flow.getFieldValue('reportYear')
    // }
  },

  mounted() {
    debugger
    const autoCreate = this.$refs.flow.getFieldValue('autoCreate')
    if (autoCreate === '1') {
      this.isShow = true
    }
  },
  methods: {
    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
    },
    actionBtnClick(evt, { button, FlowData }) {
      if (
        button.buttonId === 'G_1_SPIC_COMPOSITE_DATABASE.1' ||
        button.buttonId === 'G_1_SPIC_COMPOSITE_DATABASE.3'
      ) {
        let instId = this.$refs.flow.flowData.instId
        if (instId === null) {
          instId = 0
        }
        let beanId = this.$refs.flow.flowData.processFormData.beanId
        if (beanId === null) {
          beanId = 0
        }
        const formId = this.$refs.flow.flowData.processFormData.formId
        const attachment = this.$refs.flow.FlowData.processFormData.processFormPropertyValues.find(
          (item) => item.name === 'attachment'
        )?.value
        const attachmentId = JSON.parse(attachment).value
        console.log('attachment========' + attachmentId)
        evt.waitUntil(
          new Promise((resolve, reject) => {
            evt.defaultPrevented = true
            // 校验附件是否上传
            axios({
              url: `api/xcoa-mobile/v1/attachment-extend/attachments-info-perm/${attachmentId}?formId=${formId}&beanId=${beanId}&instId=${instId}`,
              method: 'get',
            }).then((res) => {
              if (res.data.length === 0) {
                axios({
                  url: `api/framework/v1/large-file/attachments-info-perm/${attachmentId}`,
                  method: 'get',
                }).then((res) => {
                  if (res.data.largeAttachments.length === 0) {
                    Modal.warning({
                      title: '提示',
                      content: '请上传附件',
                    })
                    resolve(false)
                  } else {
                    evt.defaultPrevented = false
                    resolve(true)
                  }
                })
              } else {
                evt.defaultPrevented = false
                resolve(true)
              }
            })
          })
        )
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$carousel-title: 64px;

.syslt > td {
  border-top: none !important;
}
.prebtn {
  top: 42px;
}
.preivewbox {
  width: 100%;
  height: 300px;
  overflow: hidden;
  text-align: center;
  :global(.previewimg) {
    height: 100%;
  }
  .slider-title {
    // position: relative;
    bottom: $carousel-title;
    display: inline-block;
    width: 100%;
    height: $carousel-title;
    padding: 0 100px 0 15px;
    overflow: hidden;
    font-size: $font-size-lg;
    line-height: $carousel-title;
    color: $white;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.7);
  }
}
:global(.prebtnatt) {
  top: 42px;
}
:global(.preivewboxatt) {
  width: 100%;
  height: 300px;
  overflow: hidden;
  text-align: center;
  :global(.previewimg) {
    height: 100%;
  }
  :global(.slider-titleatt) {
    // position: relative;
    bottom: $carousel-title;
    display: inline-block;
    width: 100%;
    height: $carousel-title;
    padding: 0 100px 0 15px;
    overflow: hidden;
    font-size: $font-size-lg;
    line-height: $carousel-title;
    color: $white;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.7);
  }
}
</style>