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

<template>
  <div>
    <base-info-form ref="baseInfoForm" v-bind="$attrs" :disabled="disabled" @processNameChange="processNameChange"></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>
    <!--  其他起草人  -->
    <!--  添加其他起草人  -->
    <p class="base-info-inner-title">{{ $t('workCenter.enStandardRevision.addOtherDrafter') }}</p>
    <!--  操作区域  -->
    <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">

        <!--    操作栏   -->
        <div slot="action" slot-scope="{record, index}" class="action-span-cell">
          <a @click="handleEdit(record, index)" class="table-ope-btn" :disabled="disabled">{{ $t('edit') }}</a>
          <a-divider type="vertical" />
          <a @click="handleDelete(record.id, index)" class="table-ope-btn" :disabled="disabled">{{ $t('delete') }}</a>
        </div>

      </j-table>
    </div>
    <add-edit-drafter-drawer ref="addEditDrafterDrawer" @ok="modalFormOk"></add-edit-drafter-drawer>
  </div>
</template>

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

export default {
  name: 'MainDrafterSentBaseInfo',
  components: { AddEditDrafterDrawer, BaseInfoForm, JTable },
  props: {
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
    return {
      columns: [
        { // 起草单位
          title: this.$t('workCenter.enStandardRevision.draftingUnit'),
          align: 'center',
          width: 180,
          dataIndex: 'dept_dictText',
          scopedSlots: { customRender: 'text' }
        },
        { // 起草人
          title: this.$t('workCenter.enStandardRevision.drafter'),
          align: 'center',
          width: 180,
          dataIndex: 'user_dictText',
          scopedSlots: { customRender: 'text' }
        },
        { // 起草范围
          title: this.$t('workCenter.enStandardRevision.draftingScope'),
          align: 'center',
          width: 180,
          dataIndex: 'scope',
          scopedSlots: { customRender: 'text' }
        },
        { // 截止日期
          title: this.$t('expirationDate'),
          align: 'center',
          width: 180,
          dataIndex: 'deadline',
          scopedSlots: { customRender: 'text' }
        },
        { // 操作
          title: this.$t('operation'),
          scopedSlots: { customRender: 'action' },
          align: 'center',
          fixed: 'right',
          width: 200
        }
      ],
      dataSource: [],
      loading: false,
      modalType: undefined // 当前是新增还是编辑编辑的话是edit+编辑行的下标
    }
  },
  methods: {
    // 拿到外面传进来的数据初始化，因为套了几层就不在外层初始化数据了
    initData (data) {
      // 给表格赋值,在线编辑不知道要怎么赋值？
      this.dataSource = data.otherDraftUserVOS || []
      // 给表单赋值
      this.$nextTick(() => {
        this.$refs.baseInfoForm.initData(data)
      })
    },
    // 外层要获取数据
    getData () {
      // 把数据抛出，在线编辑不知道要不要抛
      const data = {}
      data.otherDraftUserVOS = this.dataSource || []
      data.businessJson = JSON.stringify(this.$refs.baseInfoForm.getData())
      return data
    },
    // 外层获取数据要过校验,返回false表示没有通过校验
    async getDataValidate () {
      const formData = await this.$refs.baseInfoForm.getDataValidate()
      console.log(formData)
      if (formData) {
        // 有数据可以抛出
        const data = {}
        data.otherDraftUserVOS = this.dataSource || []
        data.formInline = formData.formInline
        return data
      } else {
        return false
      }
    },
    processNameChange (value) {
      this.$emit('processNameChange', value)
    },
    handleAdd () {
      this.modalType = 'add'
      this.$refs.addEditDrafterDrawer.add()
    },
    // 编辑
    handleEdit (record, index) {
      this.modalType = 'edit' + index
      this.$refs.addEditDrafterDrawer.edit(record)
    },
    // 删除
    handleDelete (id, index) {
      this.dataSource.splice(index, 1)
    },
    // 新增或编辑完成
    modalFormOk (value) {
      if (this.modalType === 'add') {
        this.dataSource.push(value)
      } else if (this.modalType && this.modalType.split(',')[0] === 'edit') {
        this.dataSource.splice(Number(this.modalType.split(',')[1]), 1, value)
      }
    }
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';
.collapsible-content-no-head {
  border-top: 1px solid #E5E6EB;
  border-radius: 8px 8px 8px 8px;
}

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

.base-info-inner-title {
  color: #1D2129;
  font-size: 16px;
  font-weight: 500;
}
</style>