1
This commit is contained in:
张成
394
demo/src/views/business/hot_city_qr.vue
Normal file
394
demo/src/views/business/hot_city_qr.vue
Normal file
@@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<div class="content-view">
|
||||
<div class="table-head-tool">
|
||||
<Button type="primary" @click="showAddWarp">新增城市二维码</Button>
|
||||
<Form ref="formInline" :model="gridOption.param.seachOption" inline :label-width="80">
|
||||
<FormItem label="城市名称" :label-width="80">
|
||||
<Input v-model="gridOption.param.seachOption.city_name" style="width: 200px" placeholder="请输入城市名称"
|
||||
@on-enter="query(1)" clearable />
|
||||
</FormItem>
|
||||
<FormItem label="状态" :label-width="60">
|
||||
<Select v-model="gridOption.param.seachOption.is_active" style="width: 120px" clearable>
|
||||
<Option :value="1">启用</Option>
|
||||
<Option :value="0">禁用</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="query(1)">查询</Button>
|
||||
<Button type="default" @click="resetQuery" class="ml10">重置</Button>
|
||||
<Button type="warning" @click="batchDelete" class="ml10" :disabled="selectedIds.length === 0">
|
||||
批量删除 ({{ selectedIds.length }})
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<tables :columns="listColumns" :value="gridOption.data" :pageOption="gridOption.param.pageOption"
|
||||
@changePage="query" @on-selection-change="handleSelectionChange"></tables>
|
||||
</div>
|
||||
<editModal ref="editModal" :columns="editColumns" :rules="gridOption.rules"> </editModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import funTool from '@/libs/funTool'
|
||||
import uiTool from '@/libs/uiTool'
|
||||
import hotCityQrServer from '@/api/business/hot_city_qr_server.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
let rules = {}
|
||||
|
||||
rules["city_name"] = [{ required: true, message: '请填写城市名称', trigger: 'blur' }];
|
||||
rules["qr_code_url"] = [{ required: true, message: '请上传二维码图片', trigger: 'change' }];
|
||||
rules["sort_order"] = [{ required: false, type: "number", message: '请填写排序顺序', trigger: 'change' }];
|
||||
|
||||
return {
|
||||
selectedIds: [],
|
||||
gridOption: {
|
||||
param: {
|
||||
seachOption: {
|
||||
city_name: '',
|
||||
is_active: ''
|
||||
},
|
||||
pageOption: {
|
||||
page: 1,
|
||||
pageSize: 20
|
||||
}
|
||||
},
|
||||
data: [],
|
||||
rules: rules
|
||||
},
|
||||
listColumns: [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 60,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
width: 80,
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: '城市名称',
|
||||
key: 'city_name',
|
||||
minWidth: 120,
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: '二维码图片',
|
||||
key: 'qr_code_url',
|
||||
minWidth: 150,
|
||||
type: 'template',
|
||||
render: (h, params) => {
|
||||
if (params.row.qr_code_url) {
|
||||
return h('div', {
|
||||
style: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px'
|
||||
}
|
||||
}, [
|
||||
h('img', {
|
||||
attrs: {
|
||||
src: params.row.qr_code_url,
|
||||
alt: '二维码'
|
||||
},
|
||||
style: {
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
objectFit: 'contain',
|
||||
cursor: 'pointer',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px'
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.previewImage(params.row.qr_code_url)
|
||||
}
|
||||
}
|
||||
}),
|
||||
h('a', {
|
||||
attrs: {
|
||||
href: params.row.qr_code_url,
|
||||
target: '_blank'
|
||||
},
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
color: '#2d8cf0'
|
||||
}
|
||||
}, '查看原图')
|
||||
])
|
||||
}
|
||||
return h('span', '-')
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '描述说明',
|
||||
key: 'description',
|
||||
minWidth: 200,
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
key: 'sort_order',
|
||||
width: 100,
|
||||
sortable: true,
|
||||
type: 'template',
|
||||
render: (h, params) => {
|
||||
return h('Tag', {
|
||||
props: {
|
||||
color: 'blue'
|
||||
}
|
||||
}, params.row.sort_order || 0)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'is_active',
|
||||
width: 100,
|
||||
type: 'template',
|
||||
render: (h, params) => {
|
||||
return h('Tag', {
|
||||
props: {
|
||||
color: params.row.is_active === 1 ? 'success' : 'default'
|
||||
}
|
||||
}, params.row.is_active === 1 ? '启用' : '禁用')
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'create_time',
|
||||
width: 160,
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
key: 'update_time',
|
||||
width: 160,
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
fixed: 'right',
|
||||
type: 'template',
|
||||
render: (h, params) => {
|
||||
let btns = [
|
||||
{
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
size: 'small',
|
||||
click: () => {
|
||||
this.showEditWarp(params.row)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '删除',
|
||||
type: 'error',
|
||||
size: 'small',
|
||||
click: () => {
|
||||
this.delConfirm(params.row)
|
||||
},
|
||||
},
|
||||
]
|
||||
return uiTool.getBtn(h, btns)
|
||||
},
|
||||
}
|
||||
],
|
||||
editColumns: [
|
||||
{
|
||||
title: '城市名称',
|
||||
key: 'city_name',
|
||||
type: 'text',
|
||||
required: true,
|
||||
placeholder: '请输入城市名称，如：北京、上海'
|
||||
},
|
||||
{
|
||||
title: '二维码图片',
|
||||
key: 'qr_code_url',
|
||||
com: 'UploadSingle',
|
||||
required: true,
|
||||
uploadType: 'image',
|
||||
tip: '建议上传正方形图片，支持 JPG、PNG 格式'
|
||||
},
|
||||
{
|
||||
title: '描述说明',
|
||||
key: 'description',
|
||||
com: 'TextArea',
|
||||
placeholder: '请输入描述说明（选填）',
|
||||
rows: 3
|
||||
},
|
||||
{
|
||||
title: '排序顺序',
|
||||
key: 'sort_order',
|
||||
data_type: 'number',
|
||||
placeholder: '数字越小越靠前，默认为 0',
|
||||
min: 0,
|
||||
max: 9999
|
||||
},
|
||||
{
|
||||
title: '是否启用',
|
||||
key: 'is_active',
|
||||
com: 'i-switch',
|
||||
data_type: 'boolean',
|
||||
activeValue: 1,
|
||||
inactiveValue: 0,
|
||||
activeText: '启用',
|
||||
inactiveText: '禁用'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.query(1)
|
||||
},
|
||||
methods: {
|
||||
// 查询列表
|
||||
query(page) {
|
||||
if (page) {
|
||||
this.gridOption.param.pageOption.page = page
|
||||
}
|
||||
|
||||
const params = {
|
||||
page: this.gridOption.param.pageOption.page,
|
||||
pageSize: this.gridOption.param.pageOption.pageSize,
|
||||
...this.gridOption.param.seachOption
|
||||
}
|
||||
|
||||
hotCityQrServer.page(params).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.gridOption.data = res.data.list || []
|
||||
this.gridOption.param.pageOption.total = res.data.total || 0
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 重置查询
|
||||
resetQuery() {
|
||||
this.gridOption.param.seachOption = {
|
||||
city_name: '',
|
||||
is_active: ''
|
||||
}
|
||||
this.query(1)
|
||||
},
|
||||
|
||||
// 显示新增弹窗
|
||||
showAddWarp() {
|
||||
this.$refs.editModal.addShow({
|
||||
city_name: '',
|
||||
qr_code_url: '',
|
||||
description: '',
|
||||
sort_order: 0,
|
||||
is_active: 1
|
||||
}, (data) => {
|
||||
hotCityQrServer.add(data).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$Message.success('添加成功')
|
||||
this.query(1)
|
||||
} else {
|
||||
this.$Message.error(res.message || '添加失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 显示编辑弹窗
|
||||
showEditWarp(row) {
|
||||
this.$refs.editModal.editShow(row, (data) => {
|
||||
hotCityQrServer.edit(row.id, data).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$Message.success('编辑成功')
|
||||
this.query()
|
||||
} else {
|
||||
this.$Message.error(res.message || '编辑失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 删除确认
|
||||
delConfirm(row) {
|
||||
this.$Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定要删除城市"${row.city_name}"的二维码配置吗？`,
|
||||
onOk: () => {
|
||||
hotCityQrServer.del(row.id).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$Message.success('删除成功')
|
||||
this.query()
|
||||
} else {
|
||||
this.$Message.error(res.message || '删除失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 选择变化
|
||||
handleSelectionChange(selection) {
|
||||
this.selectedIds = selection.map(item => item.id)
|
||||
},
|
||||
|
||||
// 批量删除
|
||||
batchDelete() {
|
||||
if (this.selectedIds.length === 0) {
|
||||
this.$Message.warning('请先选择要删除的记录')
|
||||
return
|
||||
}
|
||||
|
||||
this.$Modal.confirm({
|
||||
title: '确认批量删除',
|
||||
content: `确定要删除选中的 ${this.selectedIds.length} 条记录吗？`,
|
||||
onOk: () => {
|
||||
hotCityQrServer.batchDel(this.selectedIds).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$Message.success('批量删除成功')
|
||||
this.selectedIds = []
|
||||
this.query()
|
||||
} else {
|
||||
this.$Message.error(res.message || '批量删除失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 预览图片
|
||||
previewImage(url) {
|
||||
this.$Modal.info({
|
||||
title: '二维码预览',
|
||||
render: (h) => {
|
||||
return h('div', {
|
||||
style: {
|
||||
textAlign: 'center',
|
||||
padding: '20px'
|
||||
}
|
||||
}, [
|
||||
h('img', {
|
||||
attrs: {
|
||||
src: url,
|
||||
alt: '二维码'
|
||||
},
|
||||
style: {
|
||||
maxWidth: '100%',
|
||||
maxHeight: '500px'
|
||||
}
|
||||
})
|
||||
])
|
||||
},
|
||||
width: 600
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ml10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user