laws-sinotruk-client/src/views/workCenter/enterpriseStandardRevision/modules/CommentModal.vue

<template>
  <j-modal
    :title="title"
    :maskClosable="true"
    :width="500"
    :closable="true"
    @cancel="handleCancel"
    fullscreen
    :visible="visible">
    <div class="content">
      <!--  左侧文件预览  -->
      <div class="content-left">
        <iframe v-if="iframeSrc" :src="iframeSrc" width="100%" frameborder="0"></iframe>
        <a-empty class="empty-file" v-else :description="$t('noFileAvailableForPreview')"></a-empty>
      </div>
      <!--  右侧表单区域  -->
      <div class="content-right">
        <a-spin :spinning="confirmLoading">
          <a-form :form="form">
            <!--  条款号  -->
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('workCenter.enStandardRevision.clauseNumber')">
              <a-input :placeholder="$t('pleaseEnter') + $t('workCenter.enStandardRevision.clauseNumber')"
                       :maxLength="50"
                       @change="event => event.target.value = event.target.value.trim()"
                       v-decorator.trim="[ 'clauseNum', validatorRules.clauseNum ]" />
            </a-form-item>
            <!--  条款名称  -->
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('workCenter.enStandardRevision.clauseName')">
              <a-input :placeholder="$t('pleaseEnter') + $t('workCenter.enStandardRevision.clauseName')"
                       :maxLength="50"
                       @change="event => event.target.value = event.target.value.trim()"
                       v-decorator.trim="[ 'clauseName', validatorRules.clauseName ]" />
            </a-form-item>
            <!--  修改意见内容(包括修改理由和依据)  -->
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('workCenter.enStandardRevision.contentOfRevisedOpinion')">
              <a-textarea :placeholder="$t('pleaseEnter') + $t('workCenter.enStandardRevision.contentOfRevisedOpinion')"
                          :maxLength="500" :rows="4"
                          v-decorator.trim="[ 'editAdvice', validatorRules.editAdvice ]" />
            </a-form-item>
          </a-form>
        </a-spin>
      </div>
    </div>

    <!--  操作按钮  -->
    <template slot="footer">
      <a-button :loading="confirmLoading" @click="handleCancel">
        {{ $t('cancel') }}
      </a-button>
      <a-button v-if="isAdd" type="primary" :loading="confirmLoading" @click="handleSubmitAddAdd">
        {{ $t('submitAddAdd') }}
      </a-button>
      <a-button type="primary" :loading="confirmLoading" @click="handleOk">
        {{ $t('submit') }}
      </a-button>
    </template>

  </j-modal>
</template>

<script>
import pick from 'lodash.pick'
import { getFileInfo } from '@/api/api'
import { previewPdf } from '@/utils/previewPdf'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { USER_INFO } from '../../../../store/mutation-types'
import { queryFileInfoByEditId } from '../../../../api/workCenter'

const Base64 = require('js-base64').Base64

export default {
  name: 'CommentModal',
  data () {
    return {
      title: '',
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        xxl: { span: 10 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 10 },
        xxl: { span: 12 }
      },
      // labelLongCol: {
      //   xs: { span: 24 },
      //   sm: { span: 21, offset: 1 }
      // },
      // wrapperLongCol: {
      //   xs: { span: 24 },
      //   sm: { span: 21, offset: 1 }
      // },
      validatorRules: {
        // 条款号
        clauseNum: {
          rules: [
            { required: true, message: this.$t('pleaseEnter') + this.$t('workCenter.enStandardRevision.clauseNumber') }
          ],
          validateTrigger: 'blur'
        },
        // 条款名称
        clauseName: {
          rules: [
            { required: true, message: this.$t('pleaseEnter') + this.$t('workCenter.enStandardRevision.clauseName') }
          ],
          validateTrigger: 'blur'
        },
        // 修改意见内容（包括修改理由和依据）
        editAdvice: {
          rules: [
            { required: true, message: this.$t('pleaseEnter') + this.$t('workCenter.enStandardRevision.contentOfRevisedOpinion') }
          ],
          validateTrigger: 'blur'
        }
      },
      index: undefined, // 编辑的表格的下标
      iframeSrc: '', // 左侧预览的路径
      isAdd: false, // 是否是新增，新增才有提交并新增按钮
      documentUrl: window._CONFIG.documentUrl
    }
  },
  methods: {
    add (file) {
      this.getFileInfo(file).then(res => {
        this.handlePreview(res)
      })
      this.isAdd = true
      this.visible = true
      this.form.resetFields()
    },
    edit (file, record, index) {
      this.getFileInfo(file).then(res => {
        this.handlePreview(res)
      })
      this.visible = true
      this.index = index
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'clauseNum', 'clauseName', 'editAdvice'))
      })
    },
    getFileInfo (fileId) {
      return new Promise(resolve => {
        let fileInfo
        queryFileInfoByEditId({ id: fileId }).then(res => {
          if (res.success) {
            fileInfo = res.result
          }
        }).finally(() => {
          resolve(fileInfo)
        })
      })
    },
    handlePreview (file) {
      const filePaths = file.editFilePath.split('/')
      const fileName = filePaths[filePaths.length - 1]
      const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(this.documentUrl + file.editFilePath + '&fullfilename=' + fileName))}`
      this.iframeSrc = url
    },
    close () {
      this.visible = false
      this.model = {}
      this.index = undefined
      this.iframeSrc = ''
      this.isAdd = false
    },
    handleCancel () {
      this.close()
    },
    // 提交并新增
    handleSubmitAddAdd () {
      if (this.confirmLoading) return
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          const param = Object.assign({}, values)
          const currentUser = Vue.ls.get(USER_INFO)
          param.createUserId_dictText = currentUser.realname + '(' + currentUser.username + ')'
          console.log(param)
          this.$emit('ok', param, this.index)
          this.form.resetFields()
          this.model = {}
          this.confirmLoading = false
        }
      })
    },
    handleOk () {
      if (this.confirmLoading) return
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          const param = Object.assign({}, values)
          if (this.isAdd) {
            const currentUser = Vue.ls.get(USER_INFO)
            param.createUserId_dictText = currentUser.realname + '(' + currentUser.username + ')'
          }
          console.log(param)
          this.$emit('ok', param, this.index)
          this.close()
          this.confirmLoading = false
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.content {
  width: 100%;
  height: 100%;
  display: flex;
  .content-left {
    width: 60%;
    height: 100%;
    overflow-y: scroll;
    iframe {
      height: calc(100% - 20px) !important;
    }
  }
  .content-right {
    width: 40%;
    height: 100%;
    overflow-y: scroll;
  }
}

.empty-file {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

</style>