9 changed files with 682 additions and 30 deletions
@ -0,0 +1,96 @@ |
|||||||
|
import axiosApi from './AxiosApi.js' |
||||||
|
|
||||||
|
const apiList = { |
||||||
|
page: { |
||||||
|
method: 'POST', |
||||||
|
url: `/banner/page`, |
||||||
|
}, |
||||||
|
query: { |
||||||
|
method: 'POST', |
||||||
|
url: `/banner/query`, |
||||||
|
}, |
||||||
|
update: { |
||||||
|
method: 'PUT', |
||||||
|
url: `/banner` |
||||||
|
}, |
||||||
|
save: { |
||||||
|
method: 'POST', |
||||||
|
url: `/banner` |
||||||
|
}, |
||||||
|
delete: { |
||||||
|
method: 'DELETE', |
||||||
|
url: `/banner` |
||||||
|
}, |
||||||
|
export: { |
||||||
|
method: 'POST', |
||||||
|
url: `/banner/export` |
||||||
|
}, |
||||||
|
preview: { |
||||||
|
method: 'POST', |
||||||
|
url: `/banner/preview` |
||||||
|
}, |
||||||
|
import: { |
||||||
|
method: 'POST', |
||||||
|
url: `/banner/import` |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default { |
||||||
|
page (data, custom = {}) { |
||||||
|
return axiosApi({ |
||||||
|
...apiList.page, |
||||||
|
data, |
||||||
|
custom |
||||||
|
}) |
||||||
|
}, |
||||||
|
query (data, custom = {}) { |
||||||
|
return axiosApi({ |
||||||
|
...apiList.query, |
||||||
|
data, |
||||||
|
custom |
||||||
|
}) |
||||||
|
}, |
||||||
|
save (data, custom = {}) { |
||||||
|
return axiosApi({ |
||||||
|
...apiList.save, |
||||||
|
data, |
||||||
|
custom |
||||||
|
}) |
||||||
|
}, |
||||||
|
update (data, custom = {}) { |
||||||
|
return axiosApi({ |
||||||
|
...apiList.update, |
||||||
|
data, |
||||||
|
custom |
||||||
|
}) |
||||||
|
}, |
||||||
|
delete (data, custom = {}) { |
||||||
|
return axiosApi({ |
||||||
|
...apiList.delete, |
||||||
|
data, |
||||||
|
custom |
||||||
|
}) |
||||||
|
}, |
||||||
|
export (data, custom = {}) { |
||||||
|
return axiosApi({ |
||||||
|
...apiList.export, |
||||||
|
responseType: "blob", |
||||||
|
data, |
||||||
|
custom |
||||||
|
}) |
||||||
|
}, |
||||||
|
preview (data, custom = {}) { |
||||||
|
return axiosApi({ |
||||||
|
...apiList.preview, |
||||||
|
data, |
||||||
|
custom |
||||||
|
}) |
||||||
|
}, |
||||||
|
import (data, custom = {}) { |
||||||
|
return axiosApi({ |
||||||
|
...apiList.import, |
||||||
|
data, |
||||||
|
custom |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,180 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog :close-on-click-modal="false" :close-on-press-escape="true" :title="title" :type="type" |
||||||
|
:visible.sync="isVisible" :width="width" top="50px" v-el-drag-dialog> |
||||||
|
<el-form :model="banner" :rules="rules" label-position="right" label-width="100px" ref="form"> |
||||||
|
<el-form-item :label="$t('table.banner.imgUrl')" prop="imgUrl"> |
||||||
|
<el-input type="" v-model="banner.imgUrl" placeholder="url"/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.banner.type')" prop="type"> |
||||||
|
<el-input type="" v-model="banner.type" placeholder="dict type value"/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.banner.content')" prop="content"> |
||||||
|
<el-input type="" v-model="banner.content" placeholder="用于做跳转"/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.banner.isDelete')" prop="isDelete"> |
||||||
|
<el-radio-group v-model="banner.isDelete" size="medium"> |
||||||
|
<el-radio-button :label="true">{{ $t("common.yes") }}</el-radio-button> |
||||||
|
<el-radio-button :label="false">{{ $t("common.no") }}</el-radio-button> |
||||||
|
</el-radio-group> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<div class="dialog-footer" slot="footer"> |
||||||
|
<el-button @click="isVisible = false" plain type="warning"> |
||||||
|
{{ $t("common.cancel") }} |
||||||
|
</el-button> |
||||||
|
<el-button @click="submitForm" :disabled="confirmDisabled" plain type="primary"> |
||||||
|
{{ $t("common.confirm") }} |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import elDragDialog from '@/directive/el-drag-dialog' |
||||||
|
import bannerApi from "@/api/Banner.js"; |
||||||
|
import {initDicts} from '@/utils/commons' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "BannerEdit", |
||||||
|
directives: { elDragDialog }, |
||||||
|
components: { }, |
||||||
|
props: { |
||||||
|
dialogVisible: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
type: { |
||||||
|
type: String, |
||||||
|
default: "add" |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
confirmDisabled: false, |
||||||
|
banner: this.initBanner(), |
||||||
|
screenWidth: 0, |
||||||
|
width: this.initWidth(), |
||||||
|
rules: { |
||||||
|
|
||||||
|
}, |
||||||
|
// 枚举 |
||||||
|
enums: { |
||||||
|
}, |
||||||
|
// 字典 |
||||||
|
dicts: { |
||||||
|
} |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
isVisible: { |
||||||
|
get() { |
||||||
|
return this.dialogVisible; |
||||||
|
}, |
||||||
|
set() { |
||||||
|
this.close(); |
||||||
|
this.reset(); |
||||||
|
} |
||||||
|
}, |
||||||
|
title() { |
||||||
|
return this.$t("common." + this.type); |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: {}, |
||||||
|
mounted() { |
||||||
|
window.onresize = () => { |
||||||
|
return (() => { |
||||||
|
this.width = this.initWidth(); |
||||||
|
})(); |
||||||
|
}; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initBanner() { |
||||||
|
return { |
||||||
|
id: "", |
||||||
|
imgUrl: '', |
||||||
|
type: '', |
||||||
|
content: '', |
||||||
|
isDelete: true, |
||||||
|
}; |
||||||
|
}, |
||||||
|
initWidth() { |
||||||
|
this.screenWidth = document.body.clientWidth; |
||||||
|
if (this.screenWidth < 991) { |
||||||
|
return "90%"; |
||||||
|
} else if (this.screenWidth < 1400) { |
||||||
|
return "45%"; |
||||||
|
} else { |
||||||
|
return "800px"; |
||||||
|
} |
||||||
|
}, |
||||||
|
setBanner(val = {}) { |
||||||
|
const vm = this; |
||||||
|
|
||||||
|
vm.dicts = val['dicts']; |
||||||
|
vm.enums = val['enums']; |
||||||
|
if (val['row']) { |
||||||
|
vm.banner = { ...val['row'] }; |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
close() { |
||||||
|
this.$emit("close"); |
||||||
|
}, |
||||||
|
reset() { |
||||||
|
// 先清除校验，再清除表单，不然有奇怪的bug |
||||||
|
this.$refs.form.clearValidate(); |
||||||
|
this.$refs.form.resetFields(); |
||||||
|
this.confirmDisabled = false; |
||||||
|
this.banner = this.initBanner(); |
||||||
|
}, |
||||||
|
submitForm() { |
||||||
|
const vm = this; |
||||||
|
this.$refs.form.validate(valid => { |
||||||
|
if (valid) { |
||||||
|
vm.editSubmit(); |
||||||
|
} else { |
||||||
|
return false; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
editSubmit() { |
||||||
|
const vm = this; |
||||||
|
if (vm.type === "edit") { |
||||||
|
vm.update(); |
||||||
|
} else { |
||||||
|
vm.save(); |
||||||
|
} |
||||||
|
}, |
||||||
|
save() { |
||||||
|
const vm = this; |
||||||
|
vm.confirmDisabled = true; |
||||||
|
bannerApi.save(this.banner).then(response => { |
||||||
|
const res = response.data; |
||||||
|
if (res.isSuccess) { |
||||||
|
vm.isVisible = false; |
||||||
|
vm.$message({ |
||||||
|
message: vm.$t("tips.createSuccess"), |
||||||
|
type: "success" |
||||||
|
}); |
||||||
|
vm.$emit("success"); |
||||||
|
} |
||||||
|
}).finally(()=> vm.confirmDisabled = false); |
||||||
|
}, |
||||||
|
update() { |
||||||
|
const vm = this; |
||||||
|
vm.confirmDisabled = true; |
||||||
|
bannerApi.update(this.banner).then(response => { |
||||||
|
const res = response.data; |
||||||
|
if (res.isSuccess) { |
||||||
|
vm.isVisible = false; |
||||||
|
vm.$message({ |
||||||
|
message: this.$t("tips.updateSuccess"), |
||||||
|
type: "success" |
||||||
|
}); |
||||||
|
vm.$emit("success"); |
||||||
|
} |
||||||
|
}).finally(()=> vm.confirmDisabled = false); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped></style> |
||||||
@ -0,0 +1,335 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container"> |
||||||
|
<div class="filter-container"> |
||||||
|
|
||||||
|
<el-date-picker :range-separator="null" class="filter-item search-item date-range-item" |
||||||
|
end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" |
||||||
|
type="daterange" v-model="queryParams.timeRange" value-format="yyyy-MM-dd HH:mm:ss" |
||||||
|
/> |
||||||
|
<el-button @click="search" class="filter-item" plain type="primary"> |
||||||
|
{{ $t("table.search") }} |
||||||
|
</el-button> |
||||||
|
<el-button @click="reset" class="filter-item" plain type="warning"> |
||||||
|
{{ $t("table.reset") }} |
||||||
|
</el-button> |
||||||
|
<el-button @click="add" class="filter-item" plain type="danger" v-has-permission="['banner:add']"> |
||||||
|
{{ $t("table.add") }} |
||||||
|
</el-button> |
||||||
|
<el-dropdown class="filter-item" trigger="click" v-has-any-permission="['banner:delete', 'banner:export', |
||||||
|
'banner:import']"> |
||||||
|
<el-button> |
||||||
|
{{ $t("table.more") }}<i class="el-icon-arrow-down el-icon--right" /> |
||||||
|
</el-button> |
||||||
|
<el-dropdown-menu slot="dropdown"> |
||||||
|
<el-dropdown-item @click.native="batchDelete" v-has-permission="['banner:delete']"> |
||||||
|
{{ $t("table.delete") }} |
||||||
|
</el-dropdown-item> |
||||||
|
<el-dropdown-item @click.native="exportExcel" v-has-permission="['banner:export']"> |
||||||
|
{{ $t("table.export") }} |
||||||
|
</el-dropdown-item> |
||||||
|
<el-dropdown-item @click.native="exportExcelPreview" v-has-permission="['banner:export']"> |
||||||
|
{{ $t("table.exportPreview") }} |
||||||
|
</el-dropdown-item> |
||||||
|
<el-dropdown-item @click.native="importExcel" v-has-permission="['banner:import']"> |
||||||
|
{{ $t("table.import") }} |
||||||
|
</el-dropdown-item> |
||||||
|
</el-dropdown-menu> |
||||||
|
</el-dropdown> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-table :data="tableData.records" :key="tableKey" @cell-click="cellClick" |
||||||
|
@filter-change="filterChange" @selection-change="onSelectChange" @sort-change="sortChange" |
||||||
|
border fit row-key="id" ref="table" style="width: 100%;" v-loading="loading"> |
||||||
|
<el-table-column align="center" type="selection" width="40px" :reserve-selection="true"/> |
||||||
|
<el-table-column :label="$t('table.banner.imgUrl')" :show-overflow-tooltip="true" align="center" prop="imgUrl" |
||||||
|
width=""> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span>{{ scope.row.imgUrl }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column :label="$t('table.banner.type')" :show-overflow-tooltip="true" align="center" prop="type" |
||||||
|
width=""> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span>{{ scope.row.type }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column :label="$t('table.banner.content')" :show-overflow-tooltip="true" align="center" prop="content" |
||||||
|
width=""> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span>{{ scope.row.content }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column :label="$t('table.banner.isDelete')" :show-overflow-tooltip="true" align="center" prop="isDelete" |
||||||
|
width=""> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span>{{ scope.row.isDelete }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
:label="$t('table.createTime')" |
||||||
|
align="center" |
||||||
|
prop="createTime" |
||||||
|
sortable="custom" |
||||||
|
width="170px"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span>{{ scope.row.createTime }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
:label="$t('table.operation')" align="center" column-key="operation" class-name="small-padding fixed-width" width="100px"> |
||||||
|
<template slot-scope="{ row }"> |
||||||
|
<i @click="copy(row)" class="el-icon-copy-document table-operation" :title="$t('common.delete')" |
||||||
|
style="color: #2db7f5;" v-hasPermission="['banner:add']"/> |
||||||
|
<i @click="edit(row)" class="el-icon-edit table-operation" :title="$t('common.delete')" |
||||||
|
style="color: #2db7f5;" v-hasPermission="['banner:update']"/> |
||||||
|
<i @click="singleDelete(row)" class="el-icon-delete table-operation" :title="$t('common.delete')" |
||||||
|
style="color: #f50;" v-hasPermission="['banner:delete']"/> |
||||||
|
<el-link class="no-perm" v-has-no-permission="['banner:update', 'banner:copy', 'banner:delete']"> |
||||||
|
{{ $t("tips.noPermission") }} |
||||||
|
</el-link> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<pagination :limit.sync="queryParams.size" :page.sync="queryParams.current" |
||||||
|
:total="Number(tableData.total)" @pagination="fetch" v-show="tableData.total > 0"/> |
||||||
|
<banner-edit :dialog-visible="dialog.isVisible" :type="dialog.type" |
||||||
|
@close="editClose" @success="editSuccess" ref="edit"/> |
||||||
|
<banner-import ref="import" :dialog-visible="fileImport.isVisible" :type="fileImport.type" |
||||||
|
:action="fileImport.action" accept=".xls,.xlsx" @close="importClose" @success="importSuccess" /> |
||||||
|
<el-dialog :close-on-click-modal="false" :close-on-press-escape="true" |
||||||
|
title="预览" width="80%" top="50px" :visible.sync="preview.isVisible" v-el-drag-dialog> |
||||||
|
<el-scrollbar> |
||||||
|
<div v-html="preview.context"></div> |
||||||
|
</el-scrollbar> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Pagination from "@/components/Pagination"; |
||||||
|
import elDragDialog from '@/directive/el-drag-dialog' |
||||||
|
import BannerEdit from "./Edit"; |
||||||
|
import bannerApi from "@/api/Banner.js"; |
||||||
|
import BannerImport from "@/components/ceres/Import" |
||||||
|
import {convertEnum} from '@/utils/utils' |
||||||
|
import {downloadFile, loadEnums, initDicts, initQueryParams} from '@/utils/commons' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "BannerManage", |
||||||
|
directives: { elDragDialog }, |
||||||
|
components: { Pagination, BannerEdit, BannerImport}, |
||||||
|
filters: { |
||||||
|
|
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// 编辑 |
||||||
|
dialog: { |
||||||
|
isVisible: false, |
||||||
|
type: "add" |
||||||
|
}, |
||||||
|
// 预览 |
||||||
|
preview: { |
||||||
|
isVisible: false, |
||||||
|
context: '' |
||||||
|
}, |
||||||
|
// 导入 |
||||||
|
fileImport: { |
||||||
|
isVisible: false, |
||||||
|
type: "import", |
||||||
|
action: `${process.env.VUE_APP_BASE_API}/banner/banner/import` |
||||||
|
}, |
||||||
|
tableKey: 0, |
||||||
|
queryParams: initQueryParams(), |
||||||
|
selection: [], |
||||||
|
loading: false, |
||||||
|
tableData: { |
||||||
|
total: 0 |
||||||
|
}, |
||||||
|
// 枚举 |
||||||
|
enums: { |
||||||
|
}, |
||||||
|
// 字典 |
||||||
|
dicts: { |
||||||
|
} |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.fetch(); |
||||||
|
|
||||||
|
// 初始化字典和枚举 |
||||||
|
const enumList = []; |
||||||
|
const dictList = []; |
||||||
|
loadEnums(enumList, this.enums, 'banner'); |
||||||
|
initDicts(dictList, this.dicts); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
editClose() { |
||||||
|
this.dialog.isVisible = false; |
||||||
|
}, |
||||||
|
editSuccess() { |
||||||
|
this.search(); |
||||||
|
}, |
||||||
|
onSelectChange(selection) { |
||||||
|
this.selection = selection; |
||||||
|
}, |
||||||
|
search() { |
||||||
|
this.fetch({ |
||||||
|
...this.queryParams |
||||||
|
}); |
||||||
|
}, |
||||||
|
reset() { |
||||||
|
this.queryParams = initQueryParams(); |
||||||
|
this.$refs.table.clearSort(); |
||||||
|
this.$refs.table.clearFilter(); |
||||||
|
this.search(); |
||||||
|
}, |
||||||
|
exportExcelPreview() { |
||||||
|
if (this.queryParams.timeRange) { |
||||||
|
this.queryParams.map.createTime_st = this.queryParams.timeRange[0]; |
||||||
|
this.queryParams.map.createTime_ed = this.queryParams.timeRange[1]; |
||||||
|
} |
||||||
|
this.queryParams.map.fileName = '导出数据'; |
||||||
|
bannerApi.preview(this.queryParams).then(response => { |
||||||
|
const res = response.data; |
||||||
|
this.preview.isVisible = true; |
||||||
|
this.preview.context = res.data; |
||||||
|
}); |
||||||
|
}, |
||||||
|
exportExcel() { |
||||||
|
if (this.queryParams.timeRange) { |
||||||
|
this.queryParams.map.createTime_st = this.queryParams.timeRange[0]; |
||||||
|
this.queryParams.map.createTime_ed = this.queryParams.timeRange[1]; |
||||||
|
} |
||||||
|
this.queryParams.map.fileName = '导出数据'; |
||||||
|
bannerApi.export(this.queryParams).then(response => { |
||||||
|
downloadFile(response); |
||||||
|
}); |
||||||
|
}, |
||||||
|
importExcel() { |
||||||
|
this.fileImport.type = "upload"; |
||||||
|
this.fileImport.isVisible = true; |
||||||
|
this.$refs.import.setModel(false); |
||||||
|
}, |
||||||
|
importSuccess() { |
||||||
|
this.search(); |
||||||
|
}, |
||||||
|
importClose() { |
||||||
|
this.fileImport.isVisible = false; |
||||||
|
}, |
||||||
|
singleDelete(row) { |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
this.$refs.table.toggleRowSelection(row, true); |
||||||
|
this.batchDelete(); |
||||||
|
}, |
||||||
|
batchDelete() { |
||||||
|
if (!this.selection.length) { |
||||||
|
this.$message({ |
||||||
|
message: this.$t("tips.noDataSelected"), |
||||||
|
type: "warning" |
||||||
|
}); |
||||||
|
return; |
||||||
|
} |
||||||
|
this.$confirm(this.$t("tips.confirmDelete"), this.$t("common.tips"), { |
||||||
|
confirmButtonText: this.$t("common.confirm"), |
||||||
|
cancelButtonText: this.$t("common.cancel"), |
||||||
|
type: "warning" |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
const ids = this.selection.map(u => u.id); |
||||||
|
this.delete(ids); |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
this.clearSelections(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
clearSelections() { |
||||||
|
this.$refs.table.clearSelection(); |
||||||
|
}, |
||||||
|
delete(ids) { |
||||||
|
bannerApi.delete({ ids: ids }).then(response => { |
||||||
|
const res = response.data; |
||||||
|
if (res.isSuccess) { |
||||||
|
this.$message({ |
||||||
|
message: this.$t("tips.deleteSuccess"), |
||||||
|
type: "success" |
||||||
|
}); |
||||||
|
this.search(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
add() { |
||||||
|
this.dialog.type = "add"; |
||||||
|
this.dialog.isVisible = true; |
||||||
|
this.$refs.edit.setBanner({ enums: this.enums, dicts: this.dicts}); |
||||||
|
}, |
||||||
|
copy(row) { |
||||||
|
this.$refs.edit.setBanner({row, enums: this.enums, dicts: this.dicts}); |
||||||
|
this.dialog.type = "copy"; |
||||||
|
this.dialog.isVisible = true; |
||||||
|
}, |
||||||
|
edit(row) { |
||||||
|
this.$refs.edit.setBanner({row, enums: this.enums, dicts: this.dicts}); |
||||||
|
this.dialog.type = "edit"; |
||||||
|
this.dialog.isVisible = true; |
||||||
|
}, |
||||||
|
fetch(params = {}) { |
||||||
|
this.loading = true; |
||||||
|
if (this.queryParams.timeRange) { |
||||||
|
this.queryParams.map.createTime_st = this.queryParams.timeRange[0]; |
||||||
|
this.queryParams.map.createTime_ed = this.queryParams.timeRange[1]; |
||||||
|
} |
||||||
|
|
||||||
|
this.queryParams.current = params.current ? params.current : this.queryParams.current; |
||||||
|
this.queryParams.size = params.size ? params.size : this.queryParams.size; |
||||||
|
|
||||||
|
bannerApi.page(this.queryParams).then(response => { |
||||||
|
const res = response.data; |
||||||
|
if (res.isSuccess) { |
||||||
|
this.tableData = res.data; |
||||||
|
} |
||||||
|
}).finally(() => this.loading = false); |
||||||
|
}, |
||||||
|
sortChange(val) { |
||||||
|
this.queryParams.sort = val.prop; |
||||||
|
this.queryParams.order = val.order; |
||||||
|
if (this.queryParams.sort) { |
||||||
|
this.search(); |
||||||
|
} |
||||||
|
}, |
||||||
|
filterChange (filters) { |
||||||
|
for (const key in filters) { |
||||||
|
if(key.includes('.')) { |
||||||
|
const val = { }; |
||||||
|
val[key.split('.')[1]] = filters[key][0]; |
||||||
|
this.queryParams.model[key.split('.')[0]] = val; |
||||||
|
} else { |
||||||
|
this.queryParams.model[key] = filters[key][0] |
||||||
|
} |
||||||
|
} |
||||||
|
this.search() |
||||||
|
}, |
||||||
|
cellClick (row, column) { |
||||||
|
if (column['columnKey'] === "operation") { |
||||||
|
return; |
||||||
|
} |
||||||
|
let flag = false; |
||||||
|
this.selection.forEach((item)=>{ |
||||||
|
if(item.id === row.id) { |
||||||
|
flag = true; |
||||||
|
this.$refs.table.toggleRowSelection(row); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
if(!flag){ |
||||||
|
this.$refs.table.toggleRowSelection(row, true); |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped></style> |
||||||
Loading…
Reference in new issue