laws-sinotruk-client/src/views/documentTool/documentSplit/modules/ImportSplitResultModal.vue

<template>
  <j-modal
    :title="$t('docTool.split.importResults')"
    :width="width"
    :visible="visible"
    switchFullscreen
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    :ok-text="$t('docTool.split.split')"
    :cancel-text="$t('cancel')"
    @ok="handleOk"
    @cancel="handleCancel">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <!--标准号-->
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardSelect.standardNumber')">
          <standard-selection :placeholder="$t('pleaseSelect') + $t('standardSelect.standardNumber')"
                              type="radio"
                              @nameChange="handleStandardNumberChange"
                              @listChange="handleStandardListChange"
                              :select-only="true"
                              :can-selected-source="[StandardSource.DOMESTIC.value, StandardSource.ENTERPRISE.value]"
                              class="readonly-input"
                              v-decorator="['serialNumber', validatorRules.serialNumber]" />
        </a-form-item>
        <!--标准名称-->
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardSelect.standardName')">
          <a-input :placeholder="$t('pleaseEnter') + $t('standardSelect.standardName')"
                   :maxLength="50"
                   disabled
                   v-decorator="['title', validatorRules.title]" />
        </a-form-item>
        <!--文本状态-->
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('docTool.comparison.textStatus')">
          <j-dict-select-tag
            class="box-input"
            v-decorator="['fileType', validatorRules.fileType]"
            :placeholder="$t('pleaseSelect') + $t('docTool.comparison.textStatus')"
            :type="'select'"
            :triggerChange="false"
            :dictCode="'process_manuscript'" />
        </a-form-item>
        <!--拆分结果文件-->
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('docTool.split.splitResultFile')">
          <div class="result-file-box">
            <j-upload v-decorator="['splitFileId', validatorRules.splitFileId]"
                      return-id
                      :number="1"
                      class="line-btn"
                      file-type="zip" />
            <a-button class="line-btn" @click="downTemplate($t('docTool.split.documentSplitTemplate'), '.zip')">
              {{ $t('templateDownload') }}
            </a-button>
          </div>
        </a-form-item>
      </a-form>

      <div class="tip">
        <a-icon type="exclamation-circle" class="tip-icon" />
        <span>{{ $t('docTool.split.splitImportResultTip') }}</span>
        <span class="tip-click" @click="showTips">{{ $t('docTool.split.clickToView') }}</span>
      </div>
    </a-spin>
  </j-modal>
</template>

<script>
import StandardSelection from '../../../../components/selection/StandardSelection.vue'
import { importSplitResult } from '@api/documentToolApi'
import { getFileInfo } from '@api/api'
import { downloadFile } from '@api/manage'
import { StandardSource } from '../../../../enums/commonEnums'

export default {
  name: 'ImportSplitResultModal',
  components: { StandardSelection },
  data () {
    return {
      StandardSource,
      width: 600,
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      validatorRules: {
        // 标准号
        serialNumber: {
          rules: [{ required: true, message: this.$t('pleaseSelect') + this.$t('standardSelect.standardNumber') }],
          validateTrigger: 'change'
        },
        // 标准名称
        title: {
          rules: [{ required: false, message: this.$t('pleaseEnter') + this.$t('standardSelect.standardName') }],
          validateTrigger: 'blur'
        },
        // 文本状态
        fileType: {
          rules: [{ required: true, message: this.$t('pleaseSelect') + this.$t('docTool.comparison.textStatus') }],
          validateTrigger: 'change'
        },
        // 拆分结果文件
        splitFileId: {
          rules: [{ required: true, message: this.$t('uploadFile.pleaseUpload') + this.$t('docTool.split.splitResultFile') }],
          validateTrigger: 'change'
        }
      },
      standardInfo: {}, // 选择的标准
      downTemplateUrl: '/laws/DocumentTool/documentSplit/downloadImportTemplate' // 模板下载
    }
  },
  methods: {
    open () {
      this.visible = true
    },
    handleOk () {
      this.form.validateFields(async (errors, values) => {
        if (!errors) {
          this.confirmLoading = true
          const formData = Object.assign({}, values)
          const fileInfo = await getFileInfo({ id: formData.splitFileId })
          formData.standardId = this.standardInfo.id
          if (fileInfo.success) {
            formData.fileName = fileInfo.result.fileName
          }
          importSplitResult(formData).then(res => {
            if (res.success) {
              this.$message.success(res.message)
              this.$emit('ok')
              this.close()
            } else {
              this.$message.warning(res.message)
            }
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    handleCancel () {
      this.close()
    },
    close () {
      this.visible = false
      this.form.resetFields()
    },
    showTips () {
      this.$info({
        closeable: true, // 展示右上角关闭
        cancelText: this.$t('docTool.split.gotIt'),
        title: this.$t('docTool.split.formatRequirement'),
        content: (h) => {
          const contentArr = [this.$t('docTool.split.formatRequirementContentOne'), this.$t('docTool.split.formatRequirementContentTwo'), this.$t('docTool.split.formatRequirementContentThree'), this.$t('docTool.split.formatRequirementContentFour')]
          const contentDomArr = []
          for (const content of contentArr) {
            console.log(content)
            contentDomArr.push(h('div', {}, content))
          }
          return contentDomArr
        }
      })
    },
    handleStandardNumberChange (name) {
      this.form.setFieldsValue({ title: name })
    },
    handleStandardListChange (list) {
      this.standardInfo = list[0] || {}
    },
    // 下载导入模板
    downTemplate (fileName, fileSuffix = '.xls') {
      if (!fileName || typeof fileName !== 'string') {
        fileName = '模板文件'
      }
      downloadFile(this.downTemplateUrl, fileName + fileSuffix)
    }
  }
}
</script>

<style scoped lang="less">
.line-btn {
  display: inline-block;
}

.line-btn:last-child {
  margin-left: 12px;
}

.tip {
  margin: 0 42px;

  &-icon {
    color: @primary-color;
    margin-right: 8px;
  }

  &-click {
    color: @primary-color;
    cursor: pointer;
  }
}

.result-file-box {
  display: flex;
  align-items: baseline;
}

.result-file-box > div {
  flex: 1;
  width: 0;
}

.readonly-input {
  /deep/ .ant-input[disabled] {
    background-color: white;
    color: rgba(0, 0, 0, 0.65);
  }
}
</style>