<!-- 案例库前端列表页vue源代码文件 -->
<template>
<a-row :gutter="24">
<!-- 列表部分 -->
<a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" style="padding-left: 0;">
<a-card :bordered="false">
<!-- 查询 -->
<div class="table-page-search-wrapper">
<a-form>
<a-row :gutter="12">
<a-col :lg="6" :md="8" :sm="24" >
<a-form-item :label="$t('caseBase.文件名称')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
:placeholder="$t('cm.plzEnter') + '文件名称'"
v-model="queryParam.fileName__eq"
>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="8" :sm="24" >
<a-form-item :label="$t('caseBase.上传人')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
:placeholder="$t('cm.plzEnter') + '上传人'"
v-model="queryParam.uploader__eq"
>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="8" :sm="24" >
<a-form-item :label="$t('caseBase.上传日期')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-date-picker
:placeholder="$t('cm.plzChoose') + '上传日期'"
v-model="queryParam.uploadDate__eq"
style="min-width: 100%;width: 100%;"
:show-time="false"
format="YYYY-MM-DD"
valueFormat="YYYY-MM-DD"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="8" :sm="24" style="float: right;text-align: right;">
<span class="table-page-search-custom-button table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">{{ $t('systemAction.search') }}</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('systemAction.reset') }}</a-button>
</span>
</a-col>
</a-row>
</a-form>
<!-- 操作按钮 -->
<div class="table-operator" style="border-top: 5px">
<span class="table-operator-buttons">
<a-button
v-if="handleButtonShowExpandFunction('handleAdd', undefined)"
v-has="'klny:jdjh:caseBase:insert'"
ref="handleAdd"
@click="handleAdd"
type="primary"
icon="plus">{{ $t('systemAction.add') }}</a-button>
<a-button
v-if="handleButtonShowExpandFunction('batchDelete', undefined)"
v-has="'klny:jdjh:caseBase:delete'"
ref="batchDelete"
@click="batchDel(mainDataObj.hasAnnex)"
type="primary"
icon="delete">{{ $t('systemAction.BatchDelete') }}</a-button>
<a-button
ref="handleAdd"
@click="'fe50eaf4989bfcae087642545b53b2a7'===ZH_GLOBAL.BUTTON_COMMON ? handleAdd() : jsEnhance['handleAdd'](that)"
v-show="handleButtonShowExpandFunction('handleAdd', undefined)"
v-has="'klny:jdjh:caseBase:handleAdd'"
type="primary"
icon="">
新增
</a-button>
<a-button
ref="batchDelete"
@click="'fe50eaf4989bfcae087642545b53b2a7'===ZH_GLOBAL.BUTTON_COMMON ? batchDelete() : jsEnhance['batchDelete'](that)"
v-show="handleButtonShowExpandFunction('batchDelete', undefined)"
v-has="'klny:jdjh:caseBase:batchDelete'"
type="primary"
icon="">
批量删除
</a-button>
</span>
</div>
<!-- 数据列表 -->
<a-table
ref="table"
rowKey="id"
size="middle"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
:expandedRowKeys="expandedRowKeys"
@change="handleTableChange"
>
<!-- 操作列 -->
<span slot="action" slot-scope="text, record">
<!-- 编辑事件 -->
<a
v-if="handleButtonShowExpandFunction('handleEdit', record)"
v-has="'klny:jdjh:caseBase:update'"
@click="handleEdit(record)">
<a-icon type="edit"/> {{ $t('systemAction.edit') }} <a-divider type="vertical"/>
</a>
<!-- 业务查看按钮 -->
<a
v-if="handleButtonShowExpandFunction('handleRead', record)"
v-has="'klny:jdjh:caseBase:view'"
@click="handleRead(record)">
<a-icon type="eye"/> {{ $t('systemAction.view') }} <a-divider type="vertical"/>
</a>
<!-- 删除 -->
<a-popconfirm
v-if="handleButtonShowExpandFunction('handleDelete', record)"
v-has="'klny:jdjh:caseBase:delete'"
:title="$t('systemAction.sureDelete')"
@confirm="() =>handleDelete(record.id, true)">
<a> <a-icon type="delete"/> {{ $t('systemAction.delete') }} <a-divider type="vertical"/></a>
</a-popconfirm>
<a-dropdown>
<a class="ant-dropdown-link">{{ $t('systemAction.more') }} <a-icon type="down"/> </a>
<a-menu slot="overlay">
<a-menu-item>
<a
@click="handleRead(record)"
v-has="'klny:jdjh:caseBase:handleRead'"
v-show="handleButtonShowExpandFunction('handleRead', record)">
<a-icon type=""/> 查看
</a>
</a-menu-item>
<a-menu-item>
<a
@click="handleEdit(record)"
v-has="'klny:jdjh:caseBase:handleEdit'"
v-show="handleButtonShowExpandFunction('handleEdit', record)">
<a-icon type=""/> 编辑
</a>
</a-menu-item>
<a-menu-item>
<a
@click="handleDelete(record)"
v-has="'klny:jdjh:caseBase:handleDelete'"
v-show="handleButtonShowExpandFunction('handleDelete', record)">
<a-icon type=""/> 删除
</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<!-- form表单 -->
<CaseBaseForm
ref="modalForm"
@ok="modalFormOk"
/>
</a-card>
</a-col>
</a-row>
</template>
<script>
import CaseBaseForm from './modules/CaseBaseForm'
import { ZVueListMixin } from '@/mixins/ZVueListMixin'
import {
caseBaseListUrl,
caseBaseExportUrl,
caseBaseImportExcelUrl,
caseBaseImportTemplate,
caseBaseDeleteUrl
} from '@/api/api'
export default {
name: 'CaseBaseList',
mixins: [ZVueListMixin],
components: { CaseBaseForm },
data () {
return {
description: this.$t('caseBase.description'),
dataTable: 'CASE_BASE',
columns: [
{ title: '序号', dataIndex: '', key: 'rowIndex', width: 120, align: 'center', customRender: this.rowIndex },
{ title: '文件名称', dataIndex: 'fileName', align: 'center' },
{ title: '上传人', dataIndex: 'uploader', align: 'center' },
{ title: '上传日期', dataIndex: 'uploadDate', align: 'center' },
{ title: '操作', dataIndex: 'action', align: 'center', scopedSlots: { customRender: 'action' } }
],
labelCol: { span: 6 },
wrapperCol: { span: 18 },
queryParam: {},
expandedRowKeys: [],
selectedRowKeys: [],
form: this.$form.createForm(this),
url: {
list: caseBaseListUrl,
export: caseBaseExportUrl,
import: caseBaseImportExcelUrl,
importTemplate: caseBaseImportTemplate,
delete: caseBaseDeleteUrl,
deleteBatch: caseBaseDeleteUrl
}
}
},
created () {
// Do someting when created
this.initSelectOption()
},
computed: {
importExcelUrl: function () {
return process.env.VUE_APP_API_BASE_URL + `${this.url.import}`
}
},
methods: {
initSelectOption () {
},
// 重置搜索框内容
searchReset () {
this.queryParam = {}
this.loadData()
},
handleButtonShowExpandFunction (buttonCode, record) {
record = record || {}
switch (buttonCode) {
default: return true
}
},
// select过滤
filterSelectOption (input, option) {
return option.data.attrs.text.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
}
}
</script>
<style lang="less">
/*列表上方操作按钮区域*/
.ant-card-body .table-operator {
margin-bottom: 18px;
}
/** Button按钮间距 */
.table-operator .ant-btn {
margin-right: 6px
}
</style>
讲解一下,并提出那里不合理如何修改