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

<template>
  <div>
    <base-info-form ref="baseInfoForm" v-bind="$attrs" disabled></base-info-form>
    <a-form-model :model="formInline" class="form-add" :rules="rules" ref="ruleForm">
      <div class="form-flex-box">
        <!--  标准文本 -->
        <div class="box-title-text form-flex-item">
          <div class="title-text">
            <span class="title-text-text" :title="$t('workCenter.enStandardRevision.standardText')">
                  {{ $t('workCenter.enStandardRevision.standardText') }}
                </span>
          </div>
          <a-form-model-item class="item-model">
            <div class="online-edit-wrapper">
              <p>{{ $t('enterpriseStandard') }}</p>
              <a-button type="primary" @click="onlineEditView">{{ $t('view') }}</a-button>
            </div>
          </a-form-model-item>
        </div>
        <!--  征求意见截止日期,限制要比计划的时间早 -->
        <div class="box-title-text form-flex-item">
          <div class="title-text">
            <span class="required">*</span>
            <span class="title-text-text" :title="$t('workCenter.enStandardRevision.deadlineForComments')">
                  {{ $t('workCenter.enStandardRevision.deadlineForComments') }}
                </span>
          </div>
          <a-form-model-item class="item-model" prop="adviceDeadline">
            <a-date-picker
              v-model="formInline.adviceDeadline"
              :disabled-date="adviceDeadlineDisabledDate"
              :showTime="false"
              :disabled="disabled"
              value-format="YYYY-MM-DD">
            </a-date-picker>
          </a-form-model-item>
        </div>
        <!--  工作组  -->
        <div class="box-title-text form-flex-item">
          <div class="title-text">
            <span class="required">*</span>
            <span class="title-text-text" :title="$t('workCenter.enStandardRevision.solicitOpinionObject')">
                  {{ $t('workCenter.enStandardRevision.solicitOpinionObject') }}
                </span>
          </div>
          <a-form-model-item class="item-model" prop="workGroup">
            <user-selection v-model="formInline.workGroup"
                                       :placeholder="$t('pleaseSelect')+$t('workCenter.enStandardRevision.solicitOpinionObject')"
                                       :disabled="disabled"
                                       filedName="workGroup"
                                       @nameChange="userSelectNameChange"
                                       :nameStr="formInline.workGroup_dictText"
                                       type="checkbox"/>
          </a-form-model-item>
        </div>
      </div>
    </a-form-model>
  </div>
</template>

<script>
import BaseInfoForm from './BaseInfoForm'
import UserSelection from '@comp/selection/UserSelection'
import Vue from 'vue'
import { kkFilePreview } from '@/utils/kkFilePreview'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { queryFileInfoByEditId } from '../../../../api/workCenter'
import { Base64 } from 'js-base64'

export default {
  name: 'DepartLiaisonIssueBaseInfo',
  components: { BaseInfoForm, UserSelection },
  props: {
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
    return {
      formInline: {},
      rules: {
        // 征求意见截止日期
        adviceDeadline: [
          {
            required: true,
            message: this.$t('workCenter.enStandardRevision.deadlineForComments') + this.$t('cannotEmpty'),
            trigger: 'change'
          }
        ],
        // 工作组
        workGroup: [
          {
            required: true,
            message: this.$t('workCenter.enStandardRevision.workingGroup') + this.$t('cannotEmpty'),
            trigger: 'change'
          }
        ]
      },
      onEditFile: '' // 在线编辑的文件id
    }
  },
  methods: {
    // 拿到外面传进来的数据初始化，因为套了几层就不在外层初始化数据了
    initData (data) {
      // 给表单赋值,在线编辑不知道要怎么赋值？
      this.formInline = Object.assign({}, data)
      this.onEditFile = data.onEditFile
      // 给表单赋值
      this.$nextTick(() => {
        this.$refs.baseInfoForm.initData(data)
      })
    },
    // 外层要获取数据
    getData () {
      // 把数据抛出，在线编辑不知道要不要抛
      const data = Object.assign({}, this.formInline)
      // 在线编辑文件id
      data.onEditFile = this.onEditFile
      return data
    },
    // 外层获取数据要过校验,返回false表示没有通过校验
    async getDataValidate () {
      let data = {}
      await this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // 有标准化确认是否开启征求意见节点的征求意见截止日期和征求意见截止日期，需要征求意见截止日期比标准化确认是否开启征求意见节点的征求意见截止日期早可以等于
          // if (this.formInline.totalAdviceDeadline && this.formInline.adviceDeadline) {
          //   console.log('征求意见稿计划完成日期', this.formInline.totalAdviceDeadline)
          //   const planDate = new Date(Date.parse(this.formInline.totalAdviceDeadline))
          //   const deadlineDate = new Date(Date.parse(this.formInline.adviceDeadline))
          //   if (deadlineDate <= planDate) {
          //     // 截止日期比完成日期早
          //     data = Object.assign({}, this.formInline)
          //   } else {
          //     this.$message.warning(this.$t('workCenter.enStandardRevision.deadlineNeedGreaterThan'))
          //     data = false
          //   }
          // } else {
          //   data = Object.assign({}, this.formInline)
          // }
          data = Object.assign({}, this.formInline)
        } else {
          data = false
        }
      })
      return data
    },
    // 征求意见截止日期，不可选的日期，标准化设置的截止日期之前可选
    adviceDeadlineDisabledDate (current) {
      const totalAdviceDeadline = new Date(this.formInline.totalAdviceDeadline + ' 23:59:59')
      return current && current > totalAdviceDeadline
    },
    // 选择用户得到用户名
    userSelectNameChange (value, fieldName) {
      this.formInline[fieldName + '_dictText'] = value
    },
    // 在线编辑的查看
    onlineEditView () {
      this.$emit('onlineEditView', this.onEditFile)
    }
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';

.online-edit-wrapper {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  p {
    margin-bottom: 0;
    height: 100%;
  }
  .ant-btn {
    margin-right: 20px;
  }
}

.title-text-long {
  width: 200px !important;
}

/deep/ .ant-form-item-children > * {
  width: 100%;
}
</style>