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

<template>
  <div>
    <base-info-form ref="baseInfoForm" v-bind="$attrs" disabled></base-info-form>
    <!--  标准文本 -->
    <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">
          <!--  todo: 还不确定这里展示的是什么  -->
          <p>企业标准</p>
          <a-button type="primary">{{ $t('workCenter.enStandardRevision.onLineEditing') }}</a-button>
        </div>
      </a-form-model-item>
    </div>
    <!--  操作区域  -->
    <div v-if="!disabled" class="table-operator">
      <!--  新增  -->
      <a-button icon="plus" type="primary" @click="handleAdd" :disabled="disabled">
        {{ $t('newlyAdded') }}
      </a-button>
    </div>

    <div>
      <j-table
        :can-drag="true"
        :scroll="{x: '100%'}"
        ref="table"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading">

      </j-table>
    </div>
    <comment-modal ref="commentModal" @ok="modalFormOk"></comment-modal>
  </div>
</template>

<script>
import BaseInfoForm from './BaseInfoForm'
import JTable from '@/components/jero/JTable'
import CommentModal from './CommentModal'

export default {
  name: 'MainDrafterCollectBaseInfo',
  components: { CommentModal, BaseInfoForm, JTable },
  props: {
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
    return {
      loading: false,
      columns: [
        {
          title: this.$t('serialNumber'),
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          width: 80,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        { // 条款号
          title: this.$t('workCenter.enStandardRevision.clauseNumber'),
          align: 'center',
          width: 180,
          dataIndex: 'clauseNumber',
          scopedSlots: { customRender: 'text' }
        },
        { // 条款名称
          title: this.$t('workCenter.enStandardRevision.clauseName'),
          align: 'center',
          width: 180,
          dataIndex: 'clauseName',
          scopedSlots: { customRender: 'text' }
        },
        { // 修改意见内容(包括修改理由和依据)
          title: this.$t('workCenter.enStandardRevision.contentOfRevisedOpinion'),
          align: 'center',
          width: 300,
          dataIndex: 'contentOfRevisedOpinion',
          scopedSlots: { customRender: 'text' }
        },
        { // 意见提出人
          title: this.$t('workCenter.enStandardRevision.proposer'),
          align: 'center',
          width: 180,
          dataIndex: 'proposer',
          scopedSlots: { customRender: 'text' }
        },
        { // 处理意见
          title: this.$t('workCenter.enStandardRevision.handlingSuggestion'),
          align: 'center',
          width: 180,
          dataIndex: 'handlingSuggestion',
          customRender: (text, row, index) => {
            const obj = {
              children: <a-select v-model={this.dataSource[index].deductionScoreReason}
                placeholder={this.$t('pleaseSelect')} class={'handle-suggest-select'}
                options={this.handlingSuggestionOption}
              />,
              attrs: {}
            }
            return obj
          }
        },
        { // 理由
          title: this.$t('workCenter.enStandardRevision.reason'),
          align: 'center',
          width: 180,
          dataIndex: 'reason',
          customRender: (text, row, index) => {
            const obj = {
              children: <a-input v-model={this.dataSource[index].reason} maxLength={50}
                title={this.dataSource[index].reason} placeholder={this.$t('pleaseEnter')}
                onChange={ e => {
                  e.target.value = e.target.value.trim()
                  this.dataSource[index].reason = (e.target.value.replace(/[^0-9-]/g, '')).trim()
                } }
              />,
              attrs: {}
            }
            return obj
          }
        }
      ],
      dataSource: [],
      handlingSuggestionOption: [
        { value: 1, label: '采纳' },
        { value: 2, label: '部分采纳' },
        { value: 3, label: '不采纳' }
      ]
    }
  },
  methods: {
    // 拿到外面传进来的数据初始化，因为套了几层就不在外层初始化数据了
    initData (data) {
      this.data = data
      // 给表格赋值,在线编辑不知道要怎么赋值？
      // this.dataSource =
      // 给表单赋值
      // this.$nextTick(() => {
      //   this.$refs.baseInfoForm.formInline =
      // })
    },
    // 外层要获取数据
    getData () {
      // 把数据抛出，在线编辑不知道要不要抛
      const data = {}
      data.dataSource = this.dataSource
      return data
    },
    // 外层获取数据要过校验,返回false表示没有通过校验
    getDataValidate () {
      let hasErr = false
      for (const item of this.dataSource) {
        // 不采纳，部分采纳必填理由
        if ((item.handlingSuggestion === 2 || item.handlingSuggestion === 3) && !item.deductionScoreReason) {
          hasErr = true
          break
        }
      }
      let data = {} // 需要返回的数据
      if (hasErr) {
        this.$message.warning(this.$t('workCenter.enStandardRevision.pleaseEnterAllMarkItem'))
        data = false
      } else {
        data.dataSource = this.dataSource
      }
      return data
    },
    // 新增征求意见
    handleAdd () {
      // 不知道左侧要预览哪个文件
      const file = ''
      this.$refs.commentModal.title = this.$t('newlyAdded')
      this.$refs.commentModal.add(file)
    },
    // 征求意见的编辑
    handleEdit (record, index) {
      // 不知道左侧要预览哪个文件
      const file = ''
      this.$refs.commentModal.title = this.$t('edit')
      this.$refs.commentModal.edit(file, record, index)
    },
    // 征求意见的删除
    handleDelete (index) {
      this.dataSource.splice(index, 1)
    },
    // 征求意见新增编辑完成
    modalFormOk (value, index) {
      console.log(value, index)
      if (index || index === 0) {
        // 有下标，说明是编辑
        this.dataSource.splice(index, 1, value)
      } else {
        // 没有下标， 是新增
        this.dataSource.push(value)
      }
    }
  }
}
</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;
  }
}

.handle-suggest-select {
  width: 100%;
}
</style>