356 changed files with 86715 additions and 84650 deletions
@ -0,0 +1,58 @@ |
|||||||
|
import axiosApi from './AxiosApi.js' |
||||||
|
|
||||||
|
const apiList = { |
||||||
|
page: { |
||||||
|
method: 'POST', |
||||||
|
url: `/information/list`, |
||||||
|
}, |
||||||
|
update: { |
||||||
|
method: 'PUT', |
||||||
|
url: `/information` |
||||||
|
}, |
||||||
|
save: { |
||||||
|
method: 'POST', |
||||||
|
url: `/information` |
||||||
|
}, |
||||||
|
delete: { |
||||||
|
method: 'DELETE', |
||||||
|
url: `/information` |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
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 |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
@ -0,0 +1,96 @@ |
|||||||
|
import axiosApi from './AxiosApi.js' |
||||||
|
|
||||||
|
const apiList = { |
||||||
|
page: { |
||||||
|
method: 'POST', |
||||||
|
url: `/brand/page`, |
||||||
|
}, |
||||||
|
query: { |
||||||
|
method: 'POST', |
||||||
|
url: `/brand/query`, |
||||||
|
}, |
||||||
|
update: { |
||||||
|
method: 'PUT', |
||||||
|
url: `/brand` |
||||||
|
}, |
||||||
|
save: { |
||||||
|
method: 'POST', |
||||||
|
url: `/brand` |
||||||
|
}, |
||||||
|
delete: { |
||||||
|
method: 'DELETE', |
||||||
|
url: `/brand` |
||||||
|
}, |
||||||
|
export: { |
||||||
|
method: 'POST', |
||||||
|
url: `/brand/export` |
||||||
|
}, |
||||||
|
preview: { |
||||||
|
method: 'POST', |
||||||
|
url: `/brand/preview` |
||||||
|
}, |
||||||
|
import: { |
||||||
|
method: 'POST', |
||||||
|
url: `/brand/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,225 @@ |
|||||||
|
<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="brand" :rules="rules" label-position="right" label-width="100px" ref="form"> |
||||||
|
<el-form-item :label="$t('table.brand.name')" prop="name"> |
||||||
|
<el-input type="" v-model="brand.name" placeholder=""/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.brand.image')" prop="image"> |
||||||
|
<!-- <el-input type="" v-model="brand.image" placeholder=""/> --> |
||||||
|
<el-upload |
||||||
|
class="avatar-uploader" |
||||||
|
:headers="headers" |
||||||
|
:data="dataObj" |
||||||
|
:action="action" |
||||||
|
:show-file-list="false" |
||||||
|
:on-success="handleAvatarSuccess" |
||||||
|
> |
||||||
|
<el-button size="small" type="primary" |
||||||
|
>点击上传</el-button |
||||||
|
> |
||||||
|
</el-upload> |
||||||
|
<img |
||||||
|
style="margin-top:5px" |
||||||
|
v-if="brand.image" |
||||||
|
:src="brand.image" |
||||||
|
class="avatar" |
||||||
|
width="80" |
||||||
|
height="80" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.brand.video')" prop="video"> |
||||||
|
<el-input type="" v-model="brand.video" placeholder=""/> |
||||||
|
|
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.brand.desc')" prop="desc"> |
||||||
|
<el-input type="" v-model="brand.desc" placeholder=""/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.brand.content')" prop="content"> |
||||||
|
<!-- <el-input type="" v-model="brand.content" placeholder=""/> --> |
||||||
|
<Tinymce ref="content" v-if="isVisible" v-model="brand.content" :height="200" /> |
||||||
|
</el-form-item> |
||||||
|
<!-- <el-form-item :label="$t('table.brand.sort')" prop="sort"> |
||||||
|
<el-input type="" v-model="brand.sort" placeholder=""/> |
||||||
|
</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 brandApi from "@/api/Brand.js"; |
||||||
|
import db from '@/utils/localstorage' |
||||||
|
import Tinymce from '@/components/Tinymce' |
||||||
|
export default { |
||||||
|
name: "BrandEdit", |
||||||
|
directives: { elDragDialog }, |
||||||
|
components: {Tinymce }, |
||||||
|
props: { |
||||||
|
dialogVisible: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
type: { |
||||||
|
type: String, |
||||||
|
default: "add" |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
confirmDisabled: false, |
||||||
|
brand: this.initBrand(), |
||||||
|
screenWidth: 0, |
||||||
|
width: this.initWidth(), |
||||||
|
rules: { |
||||||
|
|
||||||
|
}, |
||||||
|
// 枚举 |
||||||
|
enums: { |
||||||
|
}, |
||||||
|
// 字典 |
||||||
|
dicts: { |
||||||
|
}, |
||||||
|
//图片上传 |
||||||
|
headers: { |
||||||
|
Authorization: '', |
||||||
|
}, |
||||||
|
action: `${process.env.VUE_APP_DEV_REQUEST_DOMAIN_PREFIX}/file/upload`, |
||||||
|
dataObj: { |
||||||
|
folderId: 1 |
||||||
|
}, |
||||||
|
fileList: [] |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
isVisible: { |
||||||
|
get() { |
||||||
|
return this.dialogVisible; |
||||||
|
}, |
||||||
|
set() { |
||||||
|
this.close(); |
||||||
|
this.reset(); |
||||||
|
} |
||||||
|
}, |
||||||
|
title() { |
||||||
|
return this.$t("common." + this.type); |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: {}, |
||||||
|
created() { |
||||||
|
this.headers.token = 'Bearer ' + db.get('TOKEN', '') |
||||||
|
this.headers.tenant = 'MDAwMA==' |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
window.onresize = () => { |
||||||
|
return (() => { |
||||||
|
this.width = this.initWidth(); |
||||||
|
})(); |
||||||
|
}; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleAvatarSuccess (response) { |
||||||
|
const { url } = response.data |
||||||
|
this.brand.image = url |
||||||
|
console.log(response,"response") |
||||||
|
}, |
||||||
|
initBrand() { |
||||||
|
return { |
||||||
|
id: "", |
||||||
|
name: '', |
||||||
|
image: '', |
||||||
|
video: '', |
||||||
|
desc: '', |
||||||
|
content: '', |
||||||
|
sort: 50, |
||||||
|
}; |
||||||
|
}, |
||||||
|
initWidth() { |
||||||
|
this.screenWidth = document.body.clientWidth; |
||||||
|
if (this.screenWidth < 991) { |
||||||
|
return "90%"; |
||||||
|
} else if (this.screenWidth < 1400) { |
||||||
|
return "45%"; |
||||||
|
} else { |
||||||
|
return "800px"; |
||||||
|
} |
||||||
|
}, |
||||||
|
setBrand(val = {}) { |
||||||
|
const vm = this; |
||||||
|
|
||||||
|
vm.dicts = val['dicts']; |
||||||
|
vm.enums = val['enums']; |
||||||
|
if (val['row']) { |
||||||
|
vm.brand = { ...val['row'] }; |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
close() { |
||||||
|
this.$emit("close"); |
||||||
|
}, |
||||||
|
reset() { |
||||||
|
// 先清除校验，再清除表单，不然有奇怪的bug |
||||||
|
this.$refs.form.clearValidate(); |
||||||
|
this.$refs.form.resetFields(); |
||||||
|
this.confirmDisabled = false; |
||||||
|
this.brand = this.initBrand(); |
||||||
|
}, |
||||||
|
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; |
||||||
|
brandApi.save(this.brand).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; |
||||||
|
brandApi.update(this.brand).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,352 @@ |
|||||||
|
<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="['brand:add']"> |
||||||
|
{{ $t("table.add") }} |
||||||
|
</el-button> |
||||||
|
<el-dropdown class="filter-item" trigger="click" v-has-any-permission="['brand:delete', 'brand:export', |
||||||
|
'brand: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="['brand:delete']"> |
||||||
|
{{ $t("table.delete") }} |
||||||
|
</el-dropdown-item> |
||||||
|
<el-dropdown-item @click.native="exportExcel" v-has-permission="['brand:export']"> |
||||||
|
{{ $t("table.export") }} |
||||||
|
</el-dropdown-item> |
||||||
|
<el-dropdown-item @click.native="exportExcelPreview" v-has-permission="['brand:export']"> |
||||||
|
{{ $t("table.exportPreview") }} |
||||||
|
</el-dropdown-item> |
||||||
|
<el-dropdown-item @click.native="importExcel" v-has-permission="['brand: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.brand.name')" :show-overflow-tooltip="true" align="center" prop="name" |
||||||
|
width=""> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span>{{ scope.row.name }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column :label="$t('table.brand.image')" :show-overflow-tooltip="true" align="center" prop="image" |
||||||
|
width=""> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<!-- <span>{{ scope.row.image }}</span> --> |
||||||
|
<img |
||||||
|
v-if="scope.row.image" |
||||||
|
:src="scope.row.image" |
||||||
|
class="avatar" |
||||||
|
width="80" |
||||||
|
height="80" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column :label="$t('table.brand.video')" :show-overflow-tooltip="true" align="center" prop="video" |
||||||
|
width=""> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span>{{ scope.row.video }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column :label="$t('table.brand.desc')" :show-overflow-tooltip="true" align="center" prop="desc" |
||||||
|
width=""> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span>{{ scope.row.desc }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column :label="$t('table.brand.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.brand.sort')" :show-overflow-tooltip="true" align="center" prop="sort" |
||||||
|
width=""> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span>{{ scope.row.sort }}</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="['brand:add']"/> |
||||||
|
<i @click="edit(row)" class="el-icon-edit table-operation" :title="$t('common.delete')" |
||||||
|
style="color: #2db7f5;" v-hasPermission="['brand:update']"/> |
||||||
|
<i @click="singleDelete(row)" class="el-icon-delete table-operation" :title="$t('common.delete')" |
||||||
|
style="color: #f50;" v-hasPermission="['brand:delete']"/> |
||||||
|
<el-link class="no-perm" v-has-no-permission="['brand:update', 'brand:copy', 'brand: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"/> |
||||||
|
<brand-edit :dialog-visible="dialog.isVisible" :type="dialog.type" |
||||||
|
@close="editClose" @success="editSuccess" ref="edit"/> |
||||||
|
|
||||||
|
<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 BrandEdit from "./Edit"; |
||||||
|
import brandApi from "@/api/Brand.js"; |
||||||
|
import {convertEnum} from '@/utils/utils' |
||||||
|
import {downloadFile, loadEnums, initDicts, initQueryParams} from '@/utils/commons' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "BrandManage", |
||||||
|
directives: { elDragDialog }, |
||||||
|
components: { Pagination, BrandEdit}, |
||||||
|
filters: { |
||||||
|
|
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// 编辑 |
||||||
|
dialog: { |
||||||
|
isVisible: false, |
||||||
|
type: "add" |
||||||
|
}, |
||||||
|
// 预览 |
||||||
|
preview: { |
||||||
|
isVisible: false, |
||||||
|
context: '' |
||||||
|
}, |
||||||
|
// 导入 |
||||||
|
fileImport: { |
||||||
|
isVisible: false, |
||||||
|
type: "import", |
||||||
|
action: `${process.env.VUE_APP_BASE_API}/brand/brand/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, 'brand'); |
||||||
|
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 = '导出数据'; |
||||||
|
brandApi.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 = '导出数据'; |
||||||
|
brandApi.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) { |
||||||
|
brandApi.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.setBrand({ enums: this.enums, dicts: this.dicts}); |
||||||
|
}, |
||||||
|
copy(row) { |
||||||
|
this.$refs.edit.setBrand({row, enums: this.enums, dicts: this.dicts}); |
||||||
|
this.dialog.type = "copy"; |
||||||
|
this.dialog.isVisible = true; |
||||||
|
}, |
||||||
|
edit(row) { |
||||||
|
this.$refs.edit.setBrand({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; |
||||||
|
|
||||||
|
brandApi.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> |
||||||
@ -0,0 +1,184 @@ |
|||||||
|
<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="brand" :rules="rules" label-position="right" label-width="100px" ref="form"> |
||||||
|
<el-form-item :label="$t('table.brand.name')" prop="name"> |
||||||
|
<el-input type="" v-model="brand.name" placeholder=""/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.brand.image')" prop="image"> |
||||||
|
<el-input type="" v-model="brand.image" placeholder=""/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.brand.video')" prop="video"> |
||||||
|
<el-input type="" v-model="brand.video" placeholder=""/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.brand.desc')" prop="desc"> |
||||||
|
<el-input type="" v-model="brand.desc" placeholder=""/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.brand.content')" prop="content"> |
||||||
|
<el-input type="" v-model="brand.content" placeholder=""/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.brand.sort')" prop="sort"> |
||||||
|
<el-input type="" v-model="brand.sort" placeholder=""/> |
||||||
|
</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 brandApi from "@/api/Brand.js"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "BrandEdit", |
||||||
|
directives: { elDragDialog }, |
||||||
|
components: { }, |
||||||
|
props: { |
||||||
|
dialogVisible: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
type: { |
||||||
|
type: String, |
||||||
|
default: "add" |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
confirmDisabled: false, |
||||||
|
brand: this.initBrand(), |
||||||
|
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: { |
||||||
|
initBrand() { |
||||||
|
return { |
||||||
|
id: "", |
||||||
|
name: '', |
||||||
|
image: '', |
||||||
|
video: '', |
||||||
|
desc: '', |
||||||
|
content: '', |
||||||
|
sort: null, |
||||||
|
}; |
||||||
|
}, |
||||||
|
initWidth() { |
||||||
|
this.screenWidth = document.body.clientWidth; |
||||||
|
if (this.screenWidth < 991) { |
||||||
|
return "90%"; |
||||||
|
} else if (this.screenWidth < 1400) { |
||||||
|
return "45%"; |
||||||
|
} else { |
||||||
|
return "800px"; |
||||||
|
} |
||||||
|
}, |
||||||
|
setBrand(val = {}) { |
||||||
|
const vm = this; |
||||||
|
|
||||||
|
vm.dicts = val['dicts']; |
||||||
|
vm.enums = val['enums']; |
||||||
|
if (val['row']) { |
||||||
|
vm.brand = { ...val['row'] }; |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
close() { |
||||||
|
this.$emit("close"); |
||||||
|
}, |
||||||
|
reset() { |
||||||
|
// 先清除校验，再清除表单，不然有奇怪的bug |
||||||
|
this.$refs.form.clearValidate(); |
||||||
|
this.$refs.form.resetFields(); |
||||||
|
this.confirmDisabled = false; |
||||||
|
this.brand = this.initBrand(); |
||||||
|
}, |
||||||
|
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; |
||||||
|
brandApi.save(this.brand).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; |
||||||
|
brandApi.update(this.brand).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,25 @@ |
|||||||
|
export default { |
||||||
|
table: { |
||||||
|
// 以下复制到en.js
|
||||||
|
brand: { |
||||||
|
id: 'ID', |
||||||
|
name: 'name', |
||||||
|
image: 'image', |
||||||
|
video: 'video', |
||||||
|
desc: 'desc', |
||||||
|
content: 'content', |
||||||
|
sort: 'sort', |
||||||
|
}, |
||||||
|
// 以下复制到zh.js
|
||||||
|
brand: { |
||||||
|
id: 'ID', |
||||||
|
name: 'name', |
||||||
|
image: 'image', |
||||||
|
video: 'video', |
||||||
|
desc: 'desc', |
||||||
|
content: 'content', |
||||||
|
sort: 'sort', |
||||||
|
}, |
||||||
|
// 复制之后，删除 lang.js
|
||||||
|
}, |
||||||
|
} |
||||||
@ -0,0 +1,347 @@ |
|||||||
|
<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="['brand:add']"> |
||||||
|
{{ $t("table.add") }} |
||||||
|
</el-button> |
||||||
|
<el-dropdown class="filter-item" trigger="click" v-has-any-permission="['brand:delete', 'brand:export', |
||||||
|
'brand: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="['brand:delete']"> |
||||||
|
{{ $t("table.delete") }} |
||||||
|
</el-dropdown-item> |
||||||
|
<el-dropdown-item @click.native="exportExcel" v-has-permission="['brand:export']"> |
||||||
|
{{ $t("table.export") }} |
||||||
|
</el-dropdown-item> |
||||||
|
<el-dropdown-item @click.native="exportExcelPreview" v-has-permission="['brand:export']"> |
||||||
|
{{ $t("table.exportPreview") }} |
||||||
|
</el-dropdown-item> |
||||||
|
<el-dropdown-item @click.native="importExcel" v-has-permission="['brand: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.brand.name')" :show-overflow-tooltip="true" align="center" prop="name" |
||||||
|
width=""> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span>{{ scope.row.name }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column :label="$t('table.brand.image')" :show-overflow-tooltip="true" align="center" prop="image" |
||||||
|
width=""> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span>{{ scope.row.image }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column :label="$t('table.brand.video')" :show-overflow-tooltip="true" align="center" prop="video" |
||||||
|
width=""> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span>{{ scope.row.video }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column :label="$t('table.brand.desc')" :show-overflow-tooltip="true" align="center" prop="desc" |
||||||
|
width=""> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span>{{ scope.row.desc }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column :label="$t('table.brand.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.brand.sort')" :show-overflow-tooltip="true" align="center" prop="sort" |
||||||
|
width=""> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span>{{ scope.row.sort }}</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="['brand:add']"/> |
||||||
|
<i @click="edit(row)" class="el-icon-edit table-operation" :title="$t('common.delete')" |
||||||
|
style="color: #2db7f5;" v-hasPermission="['brand:update']"/> |
||||||
|
<i @click="singleDelete(row)" class="el-icon-delete table-operation" :title="$t('common.delete')" |
||||||
|
style="color: #f50;" v-hasPermission="['brand:delete']"/> |
||||||
|
<el-link class="no-perm" v-has-no-permission="['brand:update', 'brand:copy', 'brand: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"/> |
||||||
|
<brand-edit :dialog-visible="dialog.isVisible" :type="dialog.type" |
||||||
|
@close="editClose" @success="editSuccess" ref="edit"/> |
||||||
|
<brand-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 BrandEdit from "./Edit"; |
||||||
|
import brandApi from "@/api/Brand.js"; |
||||||
|
import BrandImport from "@/components/zsw/Import" |
||||||
|
import {convertEnum} from '@/utils/utils' |
||||||
|
import {downloadFile, loadEnums, initDicts, initQueryParams} from '@/utils/commons' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "BrandManage", |
||||||
|
directives: { elDragDialog }, |
||||||
|
components: { Pagination, BrandEdit, BrandImport}, |
||||||
|
filters: { |
||||||
|
|
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// 编辑 |
||||||
|
dialog: { |
||||||
|
isVisible: false, |
||||||
|
type: "add" |
||||||
|
}, |
||||||
|
// 预览 |
||||||
|
preview: { |
||||||
|
isVisible: false, |
||||||
|
context: '' |
||||||
|
}, |
||||||
|
// 导入 |
||||||
|
fileImport: { |
||||||
|
isVisible: false, |
||||||
|
type: "import", |
||||||
|
action: `${process.env.VUE_APP_BASE_API}/brand/brand/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, 'brand'); |
||||||
|
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 = '导出数据'; |
||||||
|
brandApi.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 = '导出数据'; |
||||||
|
brandApi.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) { |
||||||
|
brandApi.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.setBrand({ enums: this.enums, dicts: this.dicts}); |
||||||
|
}, |
||||||
|
copy(row) { |
||||||
|
this.$refs.edit.setBrand({row, enums: this.enums, dicts: this.dicts}); |
||||||
|
this.dialog.type = "copy"; |
||||||
|
this.dialog.isVisible = true; |
||||||
|
}, |
||||||
|
edit(row) { |
||||||
|
this.$refs.edit.setBrand({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; |
||||||
|
|
||||||
|
brandApi.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> |
||||||
@ -0,0 +1,356 @@ |
|||||||
|
<template> |
||||||
|
<div class="brand"> |
||||||
|
<el-row :gutter="10"> |
||||||
|
<el-col :sm="12" :xs="24"> |
||||||
|
<div class="app-container"> |
||||||
|
<div class="filter-container"> |
||||||
|
<el-input :placeholder="$t('table.brand.label')" class="filter-item search-item" v-model="label"/> |
||||||
|
<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="['brand:add']"> |
||||||
|
{{ $t("table.add") }} |
||||||
|
</el-button> |
||||||
|
<el-dropdown class="filter-item" trigger="click" v-has-any-permission="['brand:import', 'brand:delete', 'brand:export']"> |
||||||
|
<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="['brand:delete']"> |
||||||
|
{{ $t("table.delete") }} |
||||||
|
</el-dropdown-item> |
||||||
|
<el-dropdown-item @click.native="exportExcel" v-has-permission="['brand:export']"> |
||||||
|
{{ $t("table.export") }} |
||||||
|
</el-dropdown-item> |
||||||
|
<el-dropdown-item @click.native="exportExcelPreview" v-has-permission="['brand:export']"> |
||||||
|
{{ $t("table.exportPreview") }} |
||||||
|
</el-dropdown-item> |
||||||
|
<el-dropdown-item @click.native="importExcel" v-has-permission="['brand:import']"> |
||||||
|
{{ $t("table.import") }} |
||||||
|
</el-dropdown-item> |
||||||
|
</el-dropdown-menu> |
||||||
|
</el-dropdown> |
||||||
|
</div> |
||||||
|
<el-tree |
||||||
|
:check-strictly="true" |
||||||
|
:data="brandTree" |
||||||
|
:filter-node-method="filterNode" |
||||||
|
@node-click="nodeClick" |
||||||
|
:load="loadTree" |
||||||
|
highlight-current |
||||||
|
node-key="id" |
||||||
|
ref="brandTree" |
||||||
|
:lazy="true" |
||||||
|
show-checkbox/> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
<el-col :sm="12" :xs="24"> |
||||||
|
<el-card class="box-card"> |
||||||
|
<div class="clearfix" slot="header"> |
||||||
|
<span> |
||||||
|
{{brand.id === "" ? this.$t("common.add") : this.$t("common.edit")}} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-form :model="brand" :rules="rules" label-position="right" label-width="100px" ref="form"> |
||||||
|
<el-form-item :hidden="true" :label="$t('table.brand.parentId')" prop="parentId"> |
||||||
|
<el-tooltip :content="$t('tips.topId')" class="item" effect="dark" placement="top-start"> |
||||||
|
<el-input readonly v-model="brand.parentId"/> |
||||||
|
</el-tooltip> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.brand.parentId')" prop="parentLabel"> |
||||||
|
<el-input readonly disabled="disabled" v-model="brand.parentLabel"/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.brand.label')" prop="label"> |
||||||
|
<el-input v-model="brand.label"/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.brand.name')" prop="name"> |
||||||
|
<el-input type="" v-model="brand.name" placeholder=""/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.brand.image')" prop="image"> |
||||||
|
<el-input type="" v-model="brand.image" placeholder=""/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.brand.video')" prop="video"> |
||||||
|
<el-input type="" v-model="brand.video" placeholder=""/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.brand.desc')" prop="desc"> |
||||||
|
<el-input type="" v-model="brand.desc" placeholder=""/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.brand.content')" prop="content"> |
||||||
|
<el-input type="" v-model="brand.content" placeholder=""/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.brand.sort')" prop="sort"> |
||||||
|
<el-input type="" v-model="brand.sort" placeholder=""/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('table.brand.sortValue')" prop="sortValue"> |
||||||
|
<el-input-number :max="100" :min="0" @change="handleNumChange" v-model="brand.sortValue"/> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
<el-card class="box-card" style="margin-top: -2rem;"> |
||||||
|
<el-row> |
||||||
|
<el-col :span="24" style="text-align: right"> |
||||||
|
<el-button @click="submit" plain type="primary"> |
||||||
|
{{brand.id === "" ? this.$t("common.add") : this.$t("common.edit") }} |
||||||
|
</el-button> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
|
||||||
|
<brand-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 brandApi from "@/api/Brand.js"; |
||||||
|
import elDragDialog from '@/directive/el-drag-dialog' |
||||||
|
import BrandImport from "@/components/zsw/Import" |
||||||
|
import {downloadFile, loadEnums, initDicts, initQueryParams} from '@/utils/commons' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "BrandManager", |
||||||
|
directives: { elDragDialog }, |
||||||
|
components: { BrandImport }, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
label: "", |
||||||
|
brandTree: [], |
||||||
|
brand: this.initBrand(), |
||||||
|
rules: { |
||||||
|
|
||||||
|
}, |
||||||
|
// 预览 |
||||||
|
preview: { |
||||||
|
isVisible: false, |
||||||
|
context: '' |
||||||
|
}, |
||||||
|
// 导入 |
||||||
|
fileImport: { |
||||||
|
isVisible: false, |
||||||
|
type: "import", |
||||||
|
action: `${process.env.VUE_APP_BASE_API}/brand/brand/import` |
||||||
|
}, |
||||||
|
// 枚举 |
||||||
|
enums: { |
||||||
|
}, |
||||||
|
// 字典 |
||||||
|
dicts: { |
||||||
|
} |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
// 初始化字典和枚举 |
||||||
|
const enumList = []; |
||||||
|
const dictList = []; |
||||||
|
loadEnums(enumList, this.enums, 'brand'); |
||||||
|
initDicts(dictList, this.dicts); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initBrand() { |
||||||
|
return { |
||||||
|
id: "", |
||||||
|
label: "", |
||||||
|
sortValue: 0, |
||||||
|
parentId: 0, |
||||||
|
parentLabel: "", |
||||||
|
name: '', |
||||||
|
image: '', |
||||||
|
video: '', |
||||||
|
desc: '', |
||||||
|
content: '', |
||||||
|
sort: null, |
||||||
|
}; |
||||||
|
}, |
||||||
|
initBrandTree(parentId = 0) { |
||||||
|
brandApi.query({parentId: parentId}).then(response => { |
||||||
|
const res = response.data; |
||||||
|
this.brandTree = res.data; |
||||||
|
}); |
||||||
|
}, |
||||||
|
loadTree(node, resolve) { |
||||||
|
brandApi.query({parentId: node.data.id ? node.data.id : 0}).then(response => { |
||||||
|
const res = response.data; |
||||||
|
resolve(res.data); |
||||||
|
}); |
||||||
|
}, |
||||||
|
exportExcelPreview() { |
||||||
|
const queryParams = initQueryParams(); |
||||||
|
queryParams.map.fileName = '导出数据'; |
||||||
|
brandApi.preview(queryParams).then(response => { |
||||||
|
const res = response.data; |
||||||
|
this.preview.isVisible = true; |
||||||
|
this.preview.context = res.data; |
||||||
|
}); |
||||||
|
}, |
||||||
|
exportExcel() { |
||||||
|
const queryParams = initQueryParams(); |
||||||
|
queryParams.map.fileName = '导出数据'; |
||||||
|
brandApi.export(queryParams).then(response => { |
||||||
|
downloadFile(response); |
||||||
|
}); |
||||||
|
}, |
||||||
|
importExcel() { |
||||||
|
this.fileImport.type = "upload"; |
||||||
|
this.fileImport.isVisible = true; |
||||||
|
this.$refs.import.setModel(false); |
||||||
|
}, |
||||||
|
importSuccess() { |
||||||
|
this.initBrandTree(0); |
||||||
|
}, |
||||||
|
importClose() { |
||||||
|
this.fileImport.isVisible = false; |
||||||
|
}, |
||||||
|
handleNumChange(val) { |
||||||
|
this.brand.sortValue = val; |
||||||
|
}, |
||||||
|
filterNode(value, data) { |
||||||
|
if (!value) return true; |
||||||
|
return data.label.indexOf(value) !== -1; |
||||||
|
}, |
||||||
|
nodeClick(val) { |
||||||
|
const vm = this; |
||||||
|
if(val){ |
||||||
|
this.brand = {...val}; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
const parent = this.$refs.brandTree.getNode(val.parentId); |
||||||
|
if (parent) { |
||||||
|
this.brand.parentLabel = parent.label; |
||||||
|
} |
||||||
|
|
||||||
|
this.$refs.form.clearValidate(); |
||||||
|
}, |
||||||
|
add() { |
||||||
|
this.resetForm(); |
||||||
|
const checked = this.$refs.brandTree.getCheckedNodes(); |
||||||
|
if (checked.length > 1) { |
||||||
|
this.$message({ |
||||||
|
message: this.$t("tips.onlyChooseOne"), |
||||||
|
type: "warning" |
||||||
|
}); |
||||||
|
} else if (checked.length > 0) { |
||||||
|
this.brand.parentId = checked[0].id; |
||||||
|
this.brand.parentLabel = checked[0].label; |
||||||
|
} else { |
||||||
|
this.brand.parentId = 0; |
||||||
|
this.brand.parentLabel = ""; |
||||||
|
} |
||||||
|
}, |
||||||
|
batchDelete() { |
||||||
|
const checked = this.$refs.brandTree.getCheckedKeys(); |
||||||
|
if (checked.length === 0) { |
||||||
|
this.$message({ |
||||||
|
message: this.$t("tips.noNodeSelected"), |
||||||
|
type: "warning" |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.$confirm(this.$t("tips.confirmDeleteNode"), this.$t("common.tips"), { |
||||||
|
confirmButtonText: this.$t("common.confirm"), |
||||||
|
cancelButtonText: this.$t("common.cancel"), |
||||||
|
type: "warning" |
||||||
|
}).then(() => { |
||||||
|
brandApi.delete({ids: checked}).then(response => { |
||||||
|
const res = response.data; |
||||||
|
if (res.isSuccess) { |
||||||
|
this.$message({ |
||||||
|
message: this.$t("tips.deleteSuccess"), |
||||||
|
type: "success" |
||||||
|
}); |
||||||
|
} |
||||||
|
this.reset(); |
||||||
|
}); |
||||||
|
}).catch(() => { |
||||||
|
this.$refs.brandTree.setCheckedKeys([]); |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
search() { |
||||||
|
this.$refs.brandTree.filter(this.label); |
||||||
|
}, |
||||||
|
reset() { |
||||||
|
this.initBrandTree(); |
||||||
|
this.label = ""; |
||||||
|
this.resetForm(); |
||||||
|
}, |
||||||
|
submit() { |
||||||
|
this.$refs.form.validate(valid => { |
||||||
|
if (valid) { |
||||||
|
if (this.brand.id) { |
||||||
|
this.update(); |
||||||
|
} else { |
||||||
|
this.save(); |
||||||
|
} |
||||||
|
} else { |
||||||
|
return false; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
save() { |
||||||
|
brandApi.save({...this.brand}).then(response => { |
||||||
|
const res = response.data; |
||||||
|
if (res.isSuccess) { |
||||||
|
this.$message({ |
||||||
|
message: this.$t("tips.createSuccess"), |
||||||
|
type: "success" |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
this.reset(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
update() { |
||||||
|
brandApi.update({...this.brand}).then(response => { |
||||||
|
const res = response.data; |
||||||
|
if (res.isSuccess) { |
||||||
|
this.$message({ |
||||||
|
message: this.$t("tips.updateSuccess"), |
||||||
|
type: "success" |
||||||
|
}); |
||||||
|
} |
||||||
|
this.reset(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
resetForm() { |
||||||
|
this.$refs.form.clearValidate(); |
||||||
|
this.$refs.form.resetFields(); |
||||||
|
this.brand = this.initBrand(); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.brand { |
||||||
|
margin: 10px; |
||||||
|
|
||||||
|
.app-container { |
||||||
|
margin: 0 0 10px 0 !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-card.is-always-shadow { |
||||||
|
box-shadow: none; |
||||||
|
} |
||||||
|
|
||||||
|
.el-card { |
||||||
|
border-radius: 0; |
||||||
|
border: none; |
||||||
|
|
||||||
|
.el-card__header { |
||||||
|
padding: 10px 20px !important; |
||||||
|
border-bottom: 1px solid #f1f1f1 !important; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,210 +1,297 @@ |
|||||||
<template> |
<template> |
||||||
<el-dialog :close-on-click-modal="false" :close-on-press-escape="true" :title="title" :type="type" |
<el-dialog |
||||||
:visible.sync="isVisible" :width="width" top="50px" v-el-drag-dialog> |
:close-on-click-modal="false" |
||||||
<el-form :model="information" :rules="rules" label-position="right" label-width="100px" ref="form"> |
:title="title" |
||||||
<el-form-item :label="$t('table.information.storeId')" prop="storeId"> |
:type="type" |
||||||
<el-input type="" v-model="information.storeId" placeholder="店铺ID"/> |
:visible.sync="isVisible" |
||||||
|
width="800px" |
||||||
|
top="50px" |
||||||
|
class="group-dialog" |
||||||
|
> |
||||||
|
<el-form :model="params" label-width="100px" :rules="rules" ref="params"> |
||||||
|
<el-form-item label="活动标题" prop="mainTitle"> |
||||||
|
<el-input v-model="params.mainTitle" style="width: 200px" /> |
||||||
</el-form-item> |
</el-form-item> |
||||||
<el-form-item :label="$t('table.information.mainTitle')" prop="mainTitle"> |
<el-form-item label="活动简介" prop="viceTitle"> |
||||||
<el-input type="" v-model="information.mainTitle" placeholder="主标题"/> |
<el-input v-model="params.viceTitle" style="width: 200px" /> |
||||||
</el-form-item> |
</el-form-item> |
||||||
<el-form-item :label="$t('table.information.viceTitle')" prop="viceTitle"> |
<el-form-item label="作者" prop="name"> |
||||||
<el-input type="" v-model="information.viceTitle" placeholder="副标题"/> |
<el-input v-model="params.name" style="width: 200px" /> |
||||||
</el-form-item> |
</el-form-item> |
||||||
<el-form-item :label="$t('table.information.content')" prop="content"> |
<el-form-item label="作者头像" prop="avatar"> |
||||||
<el-input type="" v-model="information.content" placeholder="内容"/> |
<!-- <el-input v-model="params.author.avatar" style="width: 200px" /> --> |
||||||
|
<el-upload |
||||||
|
class="avatar-uploader" |
||||||
|
:headers="headers" |
||||||
|
:data="dataObj" |
||||||
|
:action="action" |
||||||
|
:show-file-list="false" |
||||||
|
:on-success="handleAvatarSuccessAvatar" |
||||||
|
> |
||||||
|
<!-- <img |
||||||
|
v-if="params.avatar" |
||||||
|
:src="params.avatar" |
||||||
|
class="avatar" |
||||||
|
width="80" |
||||||
|
height="80" |
||||||
|
/> --> |
||||||
|
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> --> |
||||||
|
<el-button size="small" type="primary" |
||||||
|
>点击上传</el-button |
||||||
|
> |
||||||
|
</el-upload> |
||||||
|
<img |
||||||
|
style="margin-top:5px" |
||||||
|
v-if="params.avatar" |
||||||
|
:src="params.avatar" |
||||||
|
class="avatar" |
||||||
|
width="80" |
||||||
|
height="80" |
||||||
|
/> |
||||||
</el-form-item> |
</el-form-item> |
||||||
<el-form-item :label="$t('table.information.coverImg')" prop="coverImg"> |
<el-form-item label="活动封面图" prop="coverImg"> |
||||||
<el-input type="" v-model="information.coverImg" placeholder="封面图"/> |
<!-- <el-input v-model="params.coverImg" style="width: 200px" /> --> |
||||||
|
<el-upload |
||||||
|
class="avatar-uploader" |
||||||
|
:headers="headers" |
||||||
|
:data="dataObj" |
||||||
|
:action="action" |
||||||
|
:show-file-list="false" |
||||||
|
:on-success="handleAvatarSuccess" |
||||||
|
> |
||||||
|
|
||||||
|
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> --> |
||||||
|
<el-button size="small" type="primary" |
||||||
|
>点击上传</el-button |
||||||
|
> |
||||||
|
</el-upload> |
||||||
|
<img |
||||||
|
style="margin-top:5px" |
||||||
|
v-if="params.coverImg" |
||||||
|
:src="params.coverImg" |
||||||
|
class="avatar" |
||||||
|
width="80" |
||||||
|
height="80" |
||||||
|
/> |
||||||
</el-form-item> |
</el-form-item> |
||||||
<el-form-item :label="$t('table.information.startTime')" prop="startTime"> |
<el-form-item label="开始时间" prop="startTime"> |
||||||
<el-date-picker |
<el-date-picker |
||||||
v-model="information.startTime" |
v-model="params.startTime" |
||||||
placeholder="开始时间" |
type="datetime" |
||||||
:start-placeholder="$t('table.information.startTime')" |
placeholder="选择日期时间" |
||||||
value-format="yyyy-MM-dd HH:mm:ss" |
value-format="yyyy-MM-dd HH:mm:ss" |
||||||
format="yyyy-MM-dd HH:mm:ss" |
> |
||||||
class="filter-item date-range-item" |
</el-date-picker> |
||||||
type="datetime"/> |
|
||||||
</el-form-item> |
</el-form-item> |
||||||
<el-form-item :label="$t('table.information.endTime')" prop="endTime"> |
<el-form-item label="结束时间" prop="endTime"> |
||||||
<el-date-picker |
<el-date-picker |
||||||
v-model="information.endTime" |
v-model="params.endTime" |
||||||
placeholder="结束时间" |
type="datetime" |
||||||
:start-placeholder="$t('table.information.endTime')" |
placeholder="选择日期时间" |
||||||
value-format="yyyy-MM-dd HH:mm:ss" |
value-format="yyyy-MM-dd HH:mm:ss" |
||||||
format="yyyy-MM-dd HH:mm:ss" |
> |
||||||
class="filter-item date-range-item" |
</el-date-picker> |
||||||
type="datetime"/> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item :label="$t('table.information.state')" prop="state"> |
|
||||||
<el-input type="" v-model="information.state" placeholder="状态：1-上架，0-下架"/> |
|
||||||
</el-form-item> |
</el-form-item> |
||||||
<el-form-item :label="$t('table.information.isDelete')" prop="isDelete"> |
<el-form-item label="富文本" prop="content"> |
||||||
<el-input type="" v-model="information.isDelete" placeholder="逻辑删除：1-删除 0-未删除"/> |
<Tinymce ref="content" v-if="isVisible" v-model="params.content" :height="200" /> |
||||||
</el-form-item> |
</el-form-item> |
||||||
|
<!-- <el-form-item label="是否上架" prop="state"> |
||||||
|
<el-radio-group v-model="params.state" size="medium"> |
||||||
|
<el-radio-button :label="0">{{ |
||||||
|
$t('common.yes') |
||||||
|
}}</el-radio-button> |
||||||
|
<el-radio-button :label="1">{{ |
||||||
|
$t('common.no') |
||||||
|
}}</el-radio-button> |
||||||
|
</el-radio-group> |
||||||
|
</el-form-item> --> |
||||||
</el-form> |
</el-form> |
||||||
<div class="dialog-footer" slot="footer"> |
<div class="dialog-footer" slot="footer"> |
||||||
<el-button @click="isVisible = false" plain type="warning"> |
<el-button @click="isVisible = false" plain type="warning"> |
||||||
{{ $t("common.cancel") }} |
{{ $t('common.cancel') }} |
||||||
</el-button> |
</el-button> |
||||||
<el-button @click="submitForm" :disabled="confirmDisabled" plain type="primary"> |
<el-button |
||||||
{{ $t("common.confirm") }} |
@click="submitForm('params')" |
||||||
|
plain |
||||||
|
type="primary" |
||||||
|
> |
||||||
|
{{ $t('common.confirm') }} |
||||||
</el-button> |
</el-button> |
||||||
</div> |
</div> |
||||||
</el-dialog> |
</el-dialog> |
||||||
</template> |
</template> |
||||||
<script> |
<script> |
||||||
import elDragDialog from '@/directive/el-drag-dialog' |
import db from '@/utils/localstorage' |
||||||
import informationApi from "@/api/InformationApi.js"; |
import ActivityTweets from '@/api/ActivityTweets' |
||||||
|
import Tinymce from '@/components/Tinymce' |
||||||
|
// import moment from 'moment' |
||||||
export default { |
export default { |
||||||
name: "InformationEdit", |
components:{ |
||||||
directives: { elDragDialog }, |
Tinymce |
||||||
components: { }, |
}, |
||||||
props: { |
props: { |
||||||
dialogVisible: { |
dialogVisible: { |
||||||
type: Boolean, |
type: Boolean, |
||||||
default: false |
default: false, |
||||||
}, |
}, |
||||||
type: { |
type: { |
||||||
type: String, |
type: String, |
||||||
default: "add" |
default: 'add', |
||||||
} |
}, |
||||||
}, |
}, |
||||||
data() { |
data() { |
||||||
return { |
return { |
||||||
confirmDisabled: false, |
options: [], |
||||||
information: this.initInformation(), |
sizeForm: {}, |
||||||
screenWidth: 0, |
headers: { |
||||||
width: this.initWidth(), |
Authorization: '', |
||||||
rules: { |
|
||||||
|
|
||||||
}, |
}, |
||||||
// 枚举 |
action: `${process.env.VUE_APP_DEV_REQUEST_DOMAIN_PREFIX}/file/upload`, |
||||||
enums: { |
dataObj: { |
||||||
|
folderId: 1, |
||||||
}, |
}, |
||||||
// 字典 |
params: { |
||||||
dicts: { |
id: '', |
||||||
} |
mainTitle: '', |
||||||
}; |
viceTitle: 1, |
||||||
|
coverImg: '', |
||||||
|
startTime: '', |
||||||
|
endTime: '', |
||||||
|
content: '', |
||||||
|
name: '', |
||||||
|
avatar: '' |
||||||
|
}, |
||||||
|
rules: { |
||||||
|
groupName: [{ required: true, message: '不可为空', trigger: 'blur' }], |
||||||
|
}, |
||||||
|
} |
||||||
}, |
}, |
||||||
computed: { |
computed: { |
||||||
isVisible: { |
isVisible: { |
||||||
get() { |
get() { |
||||||
return this.dialogVisible; |
return this.dialogVisible |
||||||
}, |
}, |
||||||
set() { |
set() { |
||||||
this.close(); |
this.close() |
||||||
this.reset(); |
this.reset() |
||||||
} |
}, |
||||||
}, |
}, |
||||||
title() { |
title() { |
||||||
return this.$t("common." + this.type); |
return this.type === 'add' ? '新建活动' : '查看活动' |
||||||
} |
}, |
||||||
}, |
}, |
||||||
watch: {}, |
created() { |
||||||
mounted() { |
this.headers.token = 'Bearer ' + db.get('TOKEN', '') |
||||||
window.onresize = () => { |
this.headers.tenant = db.get('TENANT') |
||||||
return (() => { |
|
||||||
this.width = this.initWidth(); |
|
||||||
})(); |
|
||||||
}; |
|
||||||
}, |
}, |
||||||
methods: { |
methods: { |
||||||
initInformation() { |
|
||||||
return { |
|
||||||
id: "", |
|
||||||
storeId: null, |
|
||||||
mainTitle: '', |
|
||||||
viceTitle: '', |
|
||||||
content: '', |
|
||||||
coverImg: '', |
|
||||||
startTime: null, |
|
||||||
endTime: null, |
|
||||||
state: null, |
|
||||||
isDelete: null, |
|
||||||
}; |
|
||||||
}, |
|
||||||
initWidth() { |
|
||||||
this.screenWidth = document.body.clientWidth; |
|
||||||
if (this.screenWidth < 991) { |
|
||||||
return "90%"; |
|
||||||
} else if (this.screenWidth < 1400) { |
|
||||||
return "45%"; |
|
||||||
} else { |
|
||||||
return "800px"; |
|
||||||
} |
|
||||||
}, |
|
||||||
setInformation(val = {}) { |
|
||||||
const vm = this; |
|
||||||
|
|
||||||
vm.dicts = val['dicts']; |
|
||||||
vm.enums = val['enums']; |
|
||||||
if (val['row']) { |
|
||||||
vm.information = { ...val['row'] }; |
|
||||||
|
|
||||||
} |
|
||||||
}, |
|
||||||
close() { |
close() { |
||||||
this.$emit("close"); |
this.$emit('close') |
||||||
}, |
}, |
||||||
reset() { |
reset() { |
||||||
// 先清除校验，再清除表单，不然有奇怪的bug |
this.params = {} |
||||||
this.$refs.form.clearValidate(); |
|
||||||
this.$refs.form.resetFields(); |
|
||||||
this.confirmDisabled = false; |
|
||||||
this.information = this.initInformation(); |
|
||||||
}, |
}, |
||||||
submitForm() { |
async submitForm(params) { |
||||||
const vm = this; |
this.$refs[params].validate((valid) => { |
||||||
this.$refs.form.validate(valid => { |
|
||||||
if (valid) { |
if (valid) { |
||||||
vm.editSubmit(); |
if (this.type === 'add') { |
||||||
|
this.addGroup() |
||||||
|
} else if (this.type === 'edit') { |
||||||
|
this.updateGroup() |
||||||
|
} |
||||||
} else { |
} else { |
||||||
return false; |
// console.log(false+'123') |
||||||
|
// if( |
||||||
|
// !this.params.groupName || |
||||||
|
// !this.params.printerId ){ |
||||||
|
// this.$message.warning("请填写完整商品信息！"); |
||||||
|
// }else{ |
||||||
|
// } |
||||||
} |
} |
||||||
}); |
}) |
||||||
}, |
}, |
||||||
editSubmit() { |
async addGroup() { |
||||||
const vm = this; |
// this.params.startTime = moment(this.params.startTime).format('YYYY-MM-DD HH:mm:ss') |
||||||
if (vm.type === "edit") { |
// this.params.endTime = moment(this.params.endTime).format('YYYY-MM-DD HH:mm:ss') |
||||||
vm.update(); |
this.params.type = 2 |
||||||
} else { |
let data = { |
||||||
vm.save(); |
name: this.params.name, |
||||||
|
avatar: this.params.avatar |
||||||
|
} |
||||||
|
this.params.author = JSON.stringify(data) |
||||||
|
// console.log(this.params, '商品') |
||||||
|
const res = await ActivityTweets.save(this.params) |
||||||
|
// console.log(res, 'resxinz') |
||||||
|
const resData = res.data |
||||||
|
const { code } = resData |
||||||
|
if (code === 0) { |
||||||
|
this.isVisible = false |
||||||
|
this.$message({ |
||||||
|
message: this.$t('tips.createSuccess'), |
||||||
|
type: 'success', |
||||||
|
}) |
||||||
|
this.$emit('success') |
||||||
} |
} |
||||||
}, |
}, |
||||||
save() { |
async updateGroup() { |
||||||
const vm = this; |
let data = { |
||||||
vm.confirmDisabled = true; |
name: this.params.name, |
||||||
informationApi.save(this.information).then(response => { |
avatar: this.params.avatar |
||||||
const res = response.data; |
} |
||||||
if (res.isSuccess) { |
this.params.author = JSON.stringify(data) |
||||||
vm.isVisible = false; |
// this.params.startTime = moment(this.params.startTime).format('YYYY-MM-DD HH:mm:ss') |
||||||
vm.$message({ |
// this.params.endTime = moment(this.params.endTime).format('YYYY-MM-DD HH:mm:ss') |
||||||
message: vm.$t("tips.createSuccess"), |
this.params.type = 2 |
||||||
type: "success" |
const res = await ActivityTweets.update(this.params) |
||||||
}); |
const resData = res.data |
||||||
vm.$emit("success"); |
const { code } = resData |
||||||
} |
if (code === 0) { |
||||||
}).finally(()=> vm.confirmDisabled = false); |
this.isVisible = false |
||||||
|
this.$message({ |
||||||
|
message: this.$t('tips.updateSuccess'), |
||||||
|
type: 'success', |
||||||
|
}) |
||||||
|
this.$emit('success') |
||||||
|
} |
||||||
}, |
}, |
||||||
update() { |
handleAvatarSuccess(response) { |
||||||
const vm = this; |
const { url } = response.data |
||||||
vm.confirmDisabled = true; |
this.params.coverImg = url |
||||||
informationApi.update(this.information).then(response => { |
}, |
||||||
const res = response.data; |
handleAvatarSuccessAvatar(response) { |
||||||
if (res.isSuccess) { |
const { url } = response.data |
||||||
vm.isVisible = false; |
this.params.avatar = url |
||||||
vm.$message({ |
}, |
||||||
message: this.$t("tips.updateSuccess"), |
setParams(val = {}) { |
||||||
type: "success" |
this.params = {} |
||||||
}); |
if(val) { |
||||||
vm.$emit("success"); |
this.params = JSON.parse(JSON.stringify(val)) |
||||||
} |
this.params.name = JSON.parse(this.params.author).name |
||||||
}).finally(()=> vm.confirmDisabled = false); |
this.params.avatar = JSON.parse(this.params.author).avatar |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="less" scoped> |
||||||
|
.group-dialog { |
||||||
|
.upload-wrap { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: flex-end; |
||||||
|
.image-wrap { |
||||||
|
width: 120px; |
||||||
|
height: 120px; |
||||||
|
line-height: 120px; |
||||||
|
margin-right: 15px; |
||||||
|
margin-bottom: 15px; |
||||||
|
text-align: center; |
||||||
|
border: 1px dashed #d9d9d9; |
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
} |
} |
||||||
} |
} |
||||||
}; |
} |
||||||
</script> |
</style> |
||||||
<style lang="scss" scoped></style> |
|
||||||
|
|||||||
@ -1,370 +1,227 @@ |
|||||||
<template> |
<template> |
||||||
<div class="app-container"> |
<div class="group-page"> |
||||||
<div class="filter-container"> |
<div class="toolbar"> |
||||||
<el-input |
<el-button |
||||||
:placeholder="$t('table.information.mainTitle')" |
type="primary" |
||||||
class="filter-item search-item" |
size="mini" |
||||||
v-model="queryParams.model.mainTitle" |
|
||||||
/> |
|
||||||
|
|
||||||
<el-date-picker :range-separator="null" class="filter-item search-item date-range-item" |
@click="getActivityTweetsList" |
||||||
end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" |
icon="el-icon-zoom-in" |
||||||
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> |
||||||
<el-button @click="reset" class="filter-item" plain type="warning"> |
<el-button type="warning" size="mini" @click="reset" icon="el-icon-refresh-right"> |
||||||
{{ $t("table.reset") }} |
重置 |
||||||
</el-button> |
</el-button> |
||||||
<el-button @click="add" class="filter-item" plain type="danger" v-has-permission="['information:add']"> |
<el-button |
||||||
{{ $t("table.add") }} |
type="goon" |
||||||
|
size="mini" |
||||||
|
@click="addGroup" |
||||||
|
icon="el-icon-circle-plus-outline" |
||||||
|
> |
||||||
|
新增 |
||||||
</el-button> |
</el-button> |
||||||
<el-dropdown class="filter-item" trigger="click" v-has-any-permission="['information:delete', 'information:export', |
|
||||||
'information: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="['information:delete']"> |
|
||||||
{{ $t("table.delete") }} |
|
||||||
</el-dropdown-item> |
|
||||||
<el-dropdown-item @click.native="exportExcel" v-has-permission="['information:export']"> |
|
||||||
{{ $t("table.export") }} |
|
||||||
</el-dropdown-item> |
|
||||||
<el-dropdown-item @click.native="exportExcelPreview" v-has-permission="['information:export']"> |
|
||||||
{{ $t("table.exportPreview") }} |
|
||||||
</el-dropdown-item> |
|
||||||
<el-dropdown-item @click.native="importExcel" v-has-permission="['information:import']"> |
|
||||||
{{ $t("table.import") }} |
|
||||||
</el-dropdown-item> |
|
||||||
</el-dropdown-menu> |
|
||||||
</el-dropdown> |
|
||||||
</div> |
</div> |
||||||
|
<div class="group-content"> |
||||||
<el-table :data="tableData.records" :key="tableKey" @cell-click="cellClick" |
<el-table |
||||||
@filter-change="filterChange" @selection-change="onSelectChange" @sort-change="sortChange" |
id="tables" |
||||||
border fit row-key="id" ref="table" style="width: 100%;" v-loading="loading"> |
:data="tableData.list" |
||||||
<el-table-column align="center" type="selection" width="40px" :reserve-selection="true"/> |
style="width: 100%" |
||||||
<el-table-column :label="$t('table.information.storeId')" :show-overflow-tooltip="true" align="center" prop="storeId" |
v-loading="loading" |
||||||
width=""> |
row-key="id" |
||||||
<template slot-scope="scope"> |
> |
||||||
<span>{{ scope.row.storeId }}</span> |
<el-table-column |
||||||
</template> |
prop="mainTitle" |
||||||
</el-table-column> |
label="活动标题" |
||||||
<el-table-column :label="$t('table.information.mainTitle')" :show-overflow-tooltip="true" align="center" prop="mainTitle" |
align="center" |
||||||
width=""> |
width="200" |
||||||
<template slot-scope="scope"> |
></el-table-column> |
||||||
<span>{{ scope.row.mainTitle }}</span> |
<el-table-column |
||||||
</template> |
prop="viceTitle" |
||||||
</el-table-column> |
label="活动简介" |
||||||
<el-table-column :label="$t('table.information.viceTitle')" :show-overflow-tooltip="true" align="center" prop="viceTitle" |
align="center" |
||||||
width=""> |
width="200" |
||||||
<template slot-scope="scope"> |
></el-table-column> |
||||||
<span>{{ scope.row.viceTitle }}</span> |
<!-- <el-table-column |
||||||
</template> |
prop="coverImg" |
||||||
</el-table-column> |
label="活动封面图" |
||||||
<el-table-column :label="$t('table.information.content')" :show-overflow-tooltip="true" align="center" prop="content" |
align="center" |
||||||
width=""> |
width="200" |
||||||
<template slot-scope="scope"> |
> |
||||||
<span>{{ scope.row.content }}</span> |
<template slot-scope="scope"> |
||||||
</template> |
<img |
||||||
</el-table-column> |
v-if="scope.row.coverImg" |
||||||
<el-table-column :label="$t('table.information.coverImg')" :show-overflow-tooltip="true" align="center" prop="coverImg" |
:src="scope.row.coverImg" |
||||||
width=""> |
class="avatar" |
||||||
<template slot-scope="scope"> |
width="80" |
||||||
<span>{{ scope.row.coverImg }}</span> |
height="80" |
||||||
</template> |
/> |
||||||
</el-table-column> |
</template> |
||||||
<el-table-column :label="$t('table.information.startTime')" :show-overflow-tooltip="true" align="center" prop="startTime" |
</el-table-column> --> |
||||||
width="170"> |
<el-table-column |
||||||
<template slot-scope="scope"> |
prop="createTime" |
||||||
<span>{{ scope.row.startTime }}</span> |
label="发布时间" |
||||||
</template> |
align="center" |
||||||
</el-table-column> |
width="200" |
||||||
<el-table-column :label="$t('table.information.endTime')" :show-overflow-tooltip="true" align="center" prop="endTime" |
></el-table-column> |
||||||
width="170"> |
<el-table-column |
||||||
<template slot-scope="scope"> |
prop="storeName" |
||||||
<span>{{ scope.row.endTime }}</span> |
label="发布人(平台)" |
||||||
</template> |
align="center" |
||||||
</el-table-column> |
width="200" |
||||||
<el-table-column :label="$t('table.information.state')" :show-overflow-tooltip="true" align="center" prop="state" |
></el-table-column> |
||||||
width=""> |
<!-- <el-table-column |
||||||
<template slot-scope="scope"> |
prop="updateTime" |
||||||
<span>{{ scope.row.state }}</span> |
label="最后修改时间" |
||||||
</template> |
align="center" |
||||||
</el-table-column> |
width="200" |
||||||
<el-table-column :label="$t('table.information.isDelete')" :show-overflow-tooltip="true" align="center" prop="isDelete" |
></el-table-column> --> |
||||||
width=""> |
<el-table-column label="操作" align="center"> |
||||||
<template slot-scope="scope"> |
<template slot-scope="scope"> |
||||||
<span>{{ scope.row.isDelete }}</span> |
<el-button |
||||||
</template> |
type="text" |
||||||
</el-table-column> |
size="small" |
||||||
<el-table-column |
@click.native.prevent="editGroup(scope.row)" |
||||||
:label="$t('table.createTime')" |
> |
||||||
align="center" |
编辑 |
||||||
prop="createTime" |
</el-button> |
||||||
sortable="custom" |
<el-button |
||||||
width="170px"> |
type="text" |
||||||
<template slot-scope="scope"> |
size="small" |
||||||
<span>{{ scope.row.createTime }}</span> |
@click.native.prevent="deleteGroup(scope.row)" |
||||||
</template> |
> |
||||||
</el-table-column> |
删除 |
||||||
<el-table-column |
</el-button> |
||||||
:label="$t('table.operation')" align="center" column-key="operation" class-name="small-padding fixed-width" width="100px"> |
</template> |
||||||
<template slot-scope="{ row }"> |
</el-table-column> |
||||||
<i @click="copy(row)" class="el-icon-copy-document table-operation" :title="$t('common.delete')" |
</el-table> |
||||||
style="color: #2db7f5;" v-hasPermission="['information:add']"/> |
</div> |
||||||
<i @click="edit(row)" class="el-icon-edit table-operation" :title="$t('common.delete')" |
<pagination |
||||||
style="color: #2db7f5;" v-hasPermission="['information:update']"/> |
v-show="tableData.total > 0" |
||||||
<i @click="singleDelete(row)" class="el-icon-delete table-operation" :title="$t('common.delete')" |
:limit.sync="formParams.pageSize" |
||||||
style="color: #f50;" v-hasPermission="['information:delete']"/> |
:page.sync="formParams.pageNum" |
||||||
<el-link class="no-perm" v-has-no-permission="['information:update', 'information:copy', 'information:delete']"> |
:total="Number(tableData.total)" |
||||||
{{ $t("tips.noPermission") }} |
@pagination="fetch" |
||||||
</el-link> |
/> |
||||||
</template> |
<grope-edit |
||||||
</el-table-column> |
ref="edit" |
||||||
</el-table> |
:dialog-visible="dialog.isVisible" |
||||||
<pagination :limit.sync="queryParams.size" :page.sync="queryParams.current" |
:type="dialog.type" |
||||||
:total="Number(tableData.total)" @pagination="fetch" v-show="tableData.total > 0"/> |
@close="editClose" |
||||||
<information-edit :dialog-visible="dialog.isVisible" :type="dialog.type" |
@success="getActivityTweetsList" |
||||||
@close="editClose" @success="editSuccess" ref="edit"/> |
/> |
||||||
<information-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> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import Pagination from "@/components/Pagination"; |
import ActivityTweets from '@/api/ActivityTweets' |
||||||
import elDragDialog from '@/directive/el-drag-dialog' |
import GropeEdit from './Edit' |
||||||
import InformationEdit from "./Edit"; |
import Pagination from '@/components/Pagination' |
||||||
import informationApi from "@/api/InformationApi.js"; |
import db from '@/utils/localstorage' |
||||||
import InformationImport from "@/components/ceres/Import" |
|
||||||
import {convertEnum} from '@/utils/utils' |
|
||||||
import {downloadFile, loadEnums, initDicts, initQueryParams} from '@/utils/commons' |
|
||||||
|
|
||||||
export default { |
export default { |
||||||
name: "InformationManage", |
name: 'ActivityTweets', |
||||||
directives: { elDragDialog }, |
components: { |
||||||
components: { Pagination, InformationEdit, InformationImport}, |
GropeEdit, |
||||||
filters: { |
Pagination, |
||||||
|
|
||||||
}, |
}, |
||||||
data() { |
data() { |
||||||
return { |
return { |
||||||
// 编辑 |
loading: true, |
||||||
dialog: { |
formParams: { |
||||||
isVisible: false, |
"pageNum": 1, |
||||||
type: "add" |
"pageSize": 10, |
||||||
|
"searchKey": "", |
||||||
|
"type": 2, |
||||||
|
state: 1 |
||||||
}, |
}, |
||||||
// 预览 |
dialog: { |
||||||
preview: { |
type: 'add', |
||||||
isVisible: false, |
|
||||||
context: '' |
|
||||||
}, |
|
||||||
// 导入 |
|
||||||
fileImport: { |
|
||||||
isVisible: false, |
isVisible: false, |
||||||
type: "import", |
|
||||||
action: `${process.env.VUE_APP_BASE_API}/store/information/import` |
|
||||||
}, |
}, |
||||||
tableKey: 0, |
tableData: [], |
||||||
queryParams: initQueryParams(), |
} |
||||||
selection: [], |
|
||||||
loading: false, |
|
||||||
tableData: { |
|
||||||
total: 0 |
|
||||||
}, |
|
||||||
// 枚举 |
|
||||||
enums: { |
|
||||||
}, |
|
||||||
// 字典 |
|
||||||
dicts: { |
|
||||||
} |
|
||||||
}; |
|
||||||
}, |
}, |
||||||
computed: { |
created() { |
||||||
|
this.getActivityTweetsList() |
||||||
}, |
}, |
||||||
watch: { |
mounted(){ |
||||||
}, |
|
||||||
mounted() { |
|
||||||
this.fetch(); |
|
||||||
|
|
||||||
// 初始化字典和枚举 |
|
||||||
const enumList = []; |
|
||||||
const dictList = []; |
|
||||||
loadEnums(enumList, this.enums, 'store'); |
|
||||||
initDicts(dictList, this.dicts); |
|
||||||
}, |
}, |
||||||
methods: { |
methods: { |
||||||
editClose() { |
async getActivityTweetsList() { |
||||||
this.dialog.isVisible = false; |
this.loading = true |
||||||
}, |
const res = await ActivityTweets.page(this.formParams) |
||||||
editSuccess() { |
const resData = res.data |
||||||
this.search(); |
const { code } = resData |
||||||
}, |
if (code === 0) { |
||||||
onSelectChange(selection) { |
this.tableData = resData.data |
||||||
this.selection = selection; |
this.loading = false |
||||||
}, |
console.log(this.tableData,'this.tableData') |
||||||
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 = '导出数据'; |
|
||||||
informationApi.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 = '导出数据'; |
|
||||||
informationApi.export(this.queryParams).then(response => { |
|
||||||
downloadFile(response); |
|
||||||
}); |
|
||||||
}, |
}, |
||||||
importExcel() { |
fetch() { |
||||||
this.fileImport.type = "upload"; |
this.getActivityTweetsList() |
||||||
this.fileImport.isVisible = true; |
|
||||||
this.$refs.import.setModel(false); |
|
||||||
}, |
}, |
||||||
importSuccess() { |
reset() { |
||||||
this.search(); |
this.getActivityTweetsList() |
||||||
}, |
|
||||||
importClose() { |
|
||||||
this.fileImport.isVisible = false; |
|
||||||
}, |
|
||||||
singleDelete(row) { |
|
||||||
this.$refs.table.clearSelection() |
|
||||||
this.$refs.table.toggleRowSelection(row, true); |
|
||||||
this.batchDelete(); |
|
||||||
}, |
}, |
||||||
batchDelete() { |
addGroup() { |
||||||
if (!this.selection.length) { |
this.dialog = { |
||||||
this.$message({ |
type: 'add', |
||||||
message: this.$t("tips.noDataSelected"), |
isVisible: true, |
||||||
type: "warning" |
|
||||||
}); |
|
||||||
return; |
|
||||||
} |
} |
||||||
this.$confirm(this.$t("tips.confirmDelete"), this.$t("common.tips"), { |
this.$refs.edit.setParams(null) |
||||||
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) { |
|
||||||
informationApi.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.setInformation({ enums: this.enums, dicts: this.dicts}); |
|
||||||
}, |
|
||||||
copy(row) { |
|
||||||
this.$refs.edit.setInformation({row, enums: this.enums, dicts: this.dicts}); |
|
||||||
this.dialog.type = "copy"; |
|
||||||
this.dialog.isVisible = true; |
|
||||||
}, |
|
||||||
edit(row) { |
|
||||||
this.$refs.edit.setInformation({row, enums: this.enums, dicts: this.dicts}); |
|
||||||
this.dialog.type = "edit"; |
|
||||||
this.dialog.isVisible = true; |
|
||||||
}, |
}, |
||||||
fetch(params = {}) { |
editClose() { |
||||||
this.loading = true; |
this.dialog.isVisible = false |
||||||
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; |
|
||||||
|
|
||||||
informationApi.page(this.queryParams).then(response => { |
|
||||||
const res = response.data; |
|
||||||
if (res.isSuccess) { |
|
||||||
this.tableData = res.data; |
|
||||||
} |
|
||||||
}).finally(() => this.loading = false); |
|
||||||
}, |
}, |
||||||
sortChange(val) { |
editGroup(row) { |
||||||
this.queryParams.sort = val.prop; |
const {id, mainTitle, viceTitle, coverImg, startTime, endTime, content, state} = row |
||||||
this.queryParams.order = val.order; |
this.dialog = { |
||||||
if (this.queryParams.sort) { |
type: 'edit', |
||||||
this.search(); |
isVisible: true, |
||||||
} |
} |
||||||
|
this.$refs.edit.setParams(row) |
||||||
}, |
}, |
||||||
filterChange (filters) { |
async delete(params) { |
||||||
for (const key in filters) { |
const res = await ActivityTweets.delete(params) |
||||||
if(key.includes('.')) { |
const resData = res.data |
||||||
const val = { }; |
const { code } = resData |
||||||
val[key.split('.')[1]] = filters[key][0]; |
if (code === 0) { |
||||||
this.queryParams.model[key.split('.')[0]] = val; |
this.$message({ |
||||||
} else { |
message: this.$t('tips.deleteSuccess'), |
||||||
this.queryParams.model[key] = filters[key][0] |
type: 'success', |
||||||
} |
}) |
||||||
|
this.getActivityTweetsList() |
||||||
} |
} |
||||||
this.search() |
|
||||||
}, |
}, |
||||||
cellClick (row, column) { |
deleteGroup(row) { |
||||||
if (column['columnKey'] === "operation") { |
const { id } = row |
||||||
return; |
this.$confirm(this.$t('tips.confirmDelete'), this.$t('common.tips'), { |
||||||
} |
confirmButtonText: this.$t('common.confirm'), |
||||||
let flag = false; |
cancelButtonText: this.$t('common.cancel'), |
||||||
this.selection.forEach((item)=>{ |
type: 'warning', |
||||||
if(item.id === row.id) { |
|
||||||
flag = true; |
|
||||||
this.$refs.table.toggleRowSelection(row); |
|
||||||
} |
|
||||||
}) |
}) |
||||||
|
.then(() => { |
||||||
if(!flag){ |
this.delete({ |
||||||
this.$refs.table.toggleRowSelection(row, true); |
id, |
||||||
} |
}) |
||||||
|
}) |
||||||
|
.catch(() => {}) |
||||||
}, |
}, |
||||||
} |
}, |
||||||
}; |
} |
||||||
</script> |
</script> |
||||||
<style lang="scss" scoped></style> |
<style lang="less" scoped> |
||||||
|
.group-page { |
||||||
|
padding: 15px 20px; |
||||||
|
.toolbar { |
||||||
|
margin-bottom: 20px; |
||||||
|
text-align: left; |
||||||
|
.el-input{ |
||||||
|
margin-right: 10px !important; |
||||||
|
} |
||||||
|
.group-name { |
||||||
|
width: 180px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
|||||||
Loading…
Reference in new issue