laws-sinotruk-client/src/views/workCenter/enterpriseStandardChange/modules/ApproveBaseInfo.vue

<template>
  <div>
    <base-info-form ref="baseInfoForm" :disabled="true"></base-info-form>

    <div>
      <j-table
        :can-drag="true"
        :scroll="{x: '100%'}"
        ref="table"
        rowKey="uid"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">

        <!--   修改前  -->
        <template v-slot:beforeUpdate="{text, record}">
          <a-button type="primary" @click="beforeUpdateClick(record)">{{ $t('workCenter.enStandardChange.lookUpdateBeforeContent') }}</a-button>
        </template>

      </j-table>
    </div>
    <!--  标准文本 -->
    <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>
    <!--  修改前 弹框显示  -->
    <text-content-modal ref="textContentModal" />
  </div>
</template>

<script>
import BaseInfoForm from './BaseInfoForm'
import JTable from '@/components/jero/JTable'
import TextContentModal from '../../../businessSupport/askForAdvice/modules/TextContentModal'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { kkFilePreview } from '@/utils/kkFilePreview'
import { queryFileInfoByEditId } from '../../../../api/workCenter'
import { Base64 } from 'js-base64'

export default {
  name: 'ApproveBaseInfo',
  components: { BaseInfoForm, JTable, TextContentModal },
  props: {
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
    return {
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '30', '50', '100', '150', '200'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' ' + this.$t('total') + total + this.$t('strip')
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      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.enStandardChange.revisedOpinionContent'),
          children: [
            { // 修改前
              title: this.$t('workCenter.enStandardChange.beforeUpdate'),
              align: 'center',
              width: 180,
              dataIndex: 'beforeUpdate',
              scopedSlots: { customRender: 'beforeUpdate' }
            },
            { // 修改后
              title: this.$t('workCenter.enStandardChange.afterUpdate'),
              align: 'center',
              width: 180,
              dataIndex: 'afterUpdate',
              scopedSlots: { customRender: 'text' }
            },
            { // 修改理由
              title: this.$t('workCenter.enStandardChange.updateReason'),
              align: 'center',
              width: 180,
              dataIndex: 'updateReason',
              scopedSlots: { customRender: 'text' }
            }
          ]
        },
        { // 提出部门
          title: this.$t('workCenter.enStandardChange.proposingDepartment'),
          align: 'center',
          width: 180,
          dataIndex: 'createUnit_dictText',
          scopedSlots: { customRender: 'text' }
        },
        { // 提出人
          title: this.$t('workCenter.enStandardChange.introducer'),
          align: 'center',
          width: 180,
          dataIndex: 'createUser_dictText',
          scopedSlots: { customRender: 'text' }
        }
      ],
      dataSource: [],
      loading: false,
      onEditFile: '',
      documentUrl: window._CONFIG.documentUrl
    }
  },
  methods: {
    // 拿到外面传进来的数据初始化，因为套了几层就不在外层初始化数据了
    initData (data) {
      // 给表格赋值，在线编辑不知道要怎么赋值？
      this.dataSource = data.list.map(item => {
        const uidGenerator = () => {
          return '-' + parseInt(Math.random() * 10000 + 1, 10)
        }
        return {
          uid: uidGenerator(),
          ...item
        }
      })
      this.onEditFile = data.onEditFile
      // 给表单赋值
      this.$nextTick(() => {
        this.$refs.baseInfoForm.initData(data)
      })
    },
    // 外层要获取数据
    getData () {
      // 把数据抛出，在线编辑不知道要不要抛
      const data = {}
      data.formInline = this.$refs.baseInfoForm.getData()
      data.dataSource = this.dataSource
      return data
    },
    handleTableChange (pagination) {
      this.ipagination = pagination
    },
    // 修改前按钮点击
    beforeUpdateClick (record) {
      this.$refs.textContentModal.open(record.beforeUpdate)
    },
    // 在线编辑的查看
    onlineEditView () {
      queryFileInfoByEditId({ id: this.onEditFile }).then(res => {
        if (res.success) {
          const file = res.result
          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))}`
          window.open(url, '_blank')
        }
      })
    }
  }
}
</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;
  }
}
</style>