laws-sinotruk-client/src/views/documentTool/customComparison/CustomComparisonList.vue

<template>
  <a-card :bordered="false">
    <!--查询-->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <!--清单名称-->
          <a-col :md="6" :sm="8">
            <a-form-item :label="$t('docTool.customComparison.listName')" :labelCol="{span: 6}" :wrapperCol="{span: 14}">
              <a-input :placeholder="$t('pleaseEnter') + $t('docTool.customComparison.listName')"
                       v-model="queryParam.listName"></a-input>
            </a-form-item>
          </a-col>
          <!--标准编号-->
          <a-col :md="6" :sm="8">
            <a-form-item :label="$t('standardNumber')" :labelCol="{span: 6}" :wrapperCol="{span: 14}">
              <a-input :placeholder="$t('pleaseEnter') + $t('standardNumber')"
                       v-model="queryParam.referenceStandard"></a-input>
            </a-form-item>
          </a-col>
          <!--涉及国家-->
          <a-col :md="6" :sm="8">
            <a-form-item :label="$t('docTool.customComparison.countriesInvolved')" :labelCol="{span: 6}" :wrapperCol="{span: 14}">
              <a-tree-select v-model="queryParam.referenceCountry"
                             :getPopupContainer="triggerNode=> triggerNode.parentNode"
                             style="width: 100%"
                             :tree-data="countriesInvolvedOptions"
                             :label-in-value="false"
                             :placeholder="$t('pleaseSelect')+$t('docTool.customComparison.countriesInvolved')" />
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <!--操作人-->
            <a-col :md="6" :sm="8">
              <a-form-item :label="$t('docTool.customComparison.operator')" :labelCol="{span: 6}" :wrapperCol="{span: 14}">
                <a-input :placeholder="$t('pleaseEnter') + $t('docTool.customComparison.operator')" v-model="queryParam.author" />
              </a-form-item>
            </a-col>
            <!--是否公开-->
            <a-col :md="6" :sm="8">
              <a-form-item :label="$t('docTool.customComparison.whetherToMakePublic')"
                           :labelCol="{span: 6}"
                           :wrapperCol="{span: 14}">
                <j-dict-select-tag v-model="queryParam.isShow"
                                   :placeholder="$t('pleaseSelect')+$t('docTool.customComparison.whetherToMakePublic')"
                                   type="select"
                                   :triggerChange="false"
                                   dict-code="yn" />
              </a-form-item>
            </a-col>
          </template>
          <div style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
            <a @click="handleToggleSearch">
              {{ toggleSearchStatus ? $t('putAway') : $t('open') }}
              <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
            </a>
            <a-button type="primary" @click="searchQuery" icon="search" v-has="'customComparison:search'">{{ $t('query') }}</a-button>
            <a-button style="margin-left: 8px" @click="searchReset" icon="reload">{{ $t('reset') }}</a-button>
          </div>
        </a-row>
      </a-form>
    </div>
    <!--操作按钮-->
    <div class="table-operator">
      <!--新增-->
      <a-button icon="plus" type="primary" @click="handleAdd" v-has="'customComparison:add'">{{ $t('newlyAdded') }}</a-button>
    </div>
    <div>
      <j-table
        ref="table"
        size="middle"
        :columns="columns"
        :data-source="dataSource"
        rowKey="id"
        :can-drag="true"
        :loading="loading"
        :pagination="ipagination"
        :scroll="{x: '100%', y: yScrollHeight}"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :operation-list="operationList"
        @change="handleTableChange"
        @operationClick="operationClick">
      </j-table>
    </div>

    <custom-comparison-drawer ref="modalForm" @ok="modalFormOk" />
  </a-card>
</template>

<script>
import { JeroListMixin } from '@/mixins/JeroListMixin'
import { getFormDictTreeList } from '@api/api'
import CustomComparisonDrawer from './modules/CustomComparisonDrawer'
import JTable from '../../../components/jero/JTable'

export default {
  name: 'CustomComparisonList',
  components: { JTable, CustomComparisonDrawer },
  mixins: [JeroListMixin],
  data () {
    return {
      countriesInvolvedOptions: [], // 涉及国家树形下拉数据
      columns: [
        // 清单名称
        {
          title: this.$t('docTool.customComparison.listName'),
          width: 200,
          dataIndex: 'listName'
        },
        // 涉及标准
        {
          title: this.$t('docTool.customComparison.referenceStandard'),
          width: 200,
          dataIndex: 'referenceStandard'
        },
        // 涉及国家
        {
          title: this.$t('docTool.customComparison.countriesInvolved'),
          width: 150,
          dataIndex: 'referenceCountry_dictText'
        },
        // 是否公开
        {
          title: this.$t('docTool.customComparison.whetherToMakePublic'),
          width: 100,
          dataIndex: 'isShow_dictText'
        },
        // 比对时间
        {
          title: this.$t('docTool.customComparison.comparisonTime'),
          width: 150,
          dataIndex: 'createTime'
        },
        // 操作人
        {
          title: this.$t('docTool.customComparison.operator'),
          width: 150,
          dataIndex: 'author'
        },
        // 操作
        {
          title: this.$t('operation'),
          fixed: 'right',
          width: 150,
          scopedSlots: { customRender: 'action' }
        }
      ],
      operationList: [
        { // 查看
          text: this.$t('view'),
          clickEvent: 'handleDetail',
          has: 'customComparison:view'
        },
        // 编辑
        {
          text: this.$t('edit'),
          clickEvent: 'handleEdit',
          has: 'customComparison:edit'
        },
        { // 删除
          text: this.$t('delete'),
          clickEvent: 'handleDelete',
          has: 'customComparison:delete'
        }
      ],
      url: {
        list: '/customCompare/lawsCustomCompareInfo/queryByPage',
        delete: '/customCompare/lawsCustomCompareInfo/delById'
      }
    }
  },
  methods: {
    initDictConfig () {
      // 涉及国家
      getFormDictTreeList({ dictId: '1706192138039345153' }).then(res => {
        if (res.success) {
          this.countriesInvolvedOptions = res.result || []
        }
      })
    },
    handleEdit ({ id }) {
      this.$refs.modalForm.edit(id)
      this.$refs.modalForm.title = this.$t('edit')
      this.$refs.modalForm.disableSubmit = false
    },
    handleDetail ({ id }) {
      this.$refs.modalForm.edit(id)
      this.$refs.modalForm.title = this.$t('details')
      this.$refs.modalForm.disableSubmit = false
    }
  }
}
</script>

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

</style>