<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 :xl="6" :lg="7" :md="8" :sm="24"> <a-form-item label="库区"> <a-form-model-item prop="zoneOptions"> <j-multi-select-tag v-model="queryParam.zoneCode" :options="zoneOptions" placeholder="请选择"> </j-multi-select-tag> </a-form-model-item> </a-form-item> </a-col> <a-col :xl="6" :lg="7" :md="8" :sm="24"> <a-form-item label="接口名称"> <j-input placeholder="请输入接口名称" v-model="queryParam.remark"></j-input> </a-form-item> </a-col> <a-col :xl="6" :lg="7" :md="8" :sm="24"> <a-form-item label="编码"> <j-input placeholder="请输入编码" v-model="queryParam.param"></j-input> </a-form-item> </a-col> <a-col :xl="6" :lg="7" :md="8" :sm="24"> <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> <a-button type="primary" @click="searchQuery" icon="search">{{ $t('button.search') }}</a-button> <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('button.reset') }}</a-button> </span> </a-col> </a-row> </a-form> </div> <!-- 查询区域-END --> <!-- 操作按钮区域 --> <div class="table-operator"> <a-button @click="handleAdd" v-has="'address:add'" type="primary" icon="plus">{{ $t('button.new') }}</a-button> <a-button v-has="'address:export'" type="primary" icon="download" @click="handleExportXls('接口地址')">{{ $t('button.export') }}</a-button> <a-upload v-has="'address:import'" name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel" > <a-button type="primary" icon="import">{{ $t('button.import') }}</a-button> </a-upload> <a-dropdown v-if="selectedRowKeys.length > 0"> <a-menu slot="overlay" v-has="'address:deleteBatch'"> <a-menu-item key="1" @click="batchDel"> <a-icon type="delete"/>{{$t('button.delete')}} </a-menu-item> </a-menu> <a-button style="margin-left: 8px">{{$t('button.multiSelectActions')}} <a-icon type="down"/> </a-button> </a-dropdown> <j-super-query :fieldList="superFieldList" v-has="'address:superQuery'" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query> </div> <!-- table区域-begin --> <div> <a-table ref="table" size="middle" :scroll="{ x: true }" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap" @change="handleTableChange" > <span slot="zoneCode" slot-scope="zoneCode"> <a-tag :key="zoneCode" color="blue"> {{ solutionZoneCode(zoneCode) }} </a-tag> </span> <span slot="action" slot-scope="text, record"> <a v-has="'address:edit'" @click="handleEdit(record)">{{$t('button.edit')}}</a> <a-divider type="vertical"/> <a-dropdown> <a class="ant-dropdown-link">{{$t('button.more')}} <a-icon type="down"/></a> <a-menu slot="overlay"> <a-menu-item> <a @click="handleDetail(record)">{{$t('button.details')}}</a> </a-menu-item> <a-menu-item> <a-popconfirm :title="$t('button.deletingIt')" v-has="'address:delete'" @confirm="() => handleDelete(record.id)"> <a>{{$t('button.delete')}}</a> </a-popconfirm> </a-menu-item> </a-menu> </a-dropdown> </span> </a-table> </div> <address-modal ref="modalForm" @ok="modalFormOk"></address-modal> </a-card> </template> <script> import '@/assets/less/TableExpand.less' import {mixinDevice} from '@/utils/mixin' import {JeecgListMixin} from '@/mixins/JeecgListMixin' import AddressModal from './modules/AddressModal' import {getZoneList} from '@/api/api' export default { name: 'AddressList', mixins: [JeecgListMixin, mixinDevice], components: { AddressModal }, data() { return { description: '接口地址管理页面', zoneList: [], zoneOptions: [], // 表头 columns: [ { title: '#', dataIndex: '', key: 'rowIndex', width: 60, align: 'center', customRender: function (t, r, index) { return parseInt(index) + 1 } }, { title: '接口名称', align: 'center', dataIndex: 'remark' }, { title: '编码', align: 'center', dataIndex: 'param' }, { title: '库区', align: 'center', dataIndex: 'zoneCode', key: 'zoneCode', scopedSlots: {customRender: 'zoneCode'} }, { title: '接口地址', align: 'center', dataIndex: 'url' }, { title: this.$t('system.createBy'), align: 'center', dataIndex: 'createBy' }, { title: this.$t('system.createTime'), align: 'center', dataIndex: 'createTime' }, { title: this.$t('system.updater'), align: 'center', dataIndex: 'updateBy' }, { title: this.$t('system.updateTime'), align: 'center', dataIndex: 'updateTime' }, { title: this.$t('system.options'), dataIndex: 'action', align: 'center', fixed: 'right', width: 147, scopedSlots: {customRender: 'action'} } ], url: { list: '/config/address/list', delete: '/config/address/delete', deleteBatch: '/config/address/deleteBatch', exportXlsUrl: '/config/address/exportXls', importExcelUrl: 'config/address/importExcel' }, dictOptions: {}, superFieldList: [] } }, created() { this.getSuperFieldList() getZoneList().then(res => { if (res.success) { this.zoneList = res.result //延迟半秒执行,避免组件未加载完,数据已经加载完 setTimeout(() => { //slice可以在数组的任何位置进行删除/添加操作 this.zoneOptions.splice(0, 1) for (let i = 0; i < res.result.length; i++) { this.zoneOptions.push({value: res.result[i].code, text: res.result[i].name}) } }, 500) } }) }, computed: { importExcelUrl: function () { return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}` } }, methods: { initDictConfig() { }, getSuperFieldList() { let fieldList = [] fieldList.push({type: 'string', value: 'remark', text: '接口名称', dictCode: ''}) fieldList.push({type: 'string', value: 'code', text: '编码', dictCode: ''}) fieldList.push({type: 'string', value: 'zoneCode', text: '库区', dictCode: ''}) fieldList.push({type: 'string', value: 'url', text: '接口地址', dictCode: ''}) fieldList.push({type: 'string', value: 'createBy', text: '创建人', dictCode: ''}) fieldList.push({type: 'datetime', value: 'createTime', text: '创建日期'}) fieldList.push({type: 'string', value: 'updateBy', text: '更新人', dictCode: ''}) fieldList.push({type: 'datetime', value: 'updateTime', text: '更新日期'}) this.superFieldList = fieldList }, solutionZoneCode(value) { var actions = [] Object.keys(this.zoneList).some(key => { if (this.zoneList[key].code == '' + value) { actions.push(this.zoneList[key].name) return true } }) return actions.join('') } } } </script> <style scoped> @import '~@assets/less/common.less'; </style>