1
This commit is contained in:
张成
297
demo/src/views/ball/venues.vue
Normal file
297
demo/src/views/ball/venues.vue
Normal file
@@ -0,0 +1,297 @@
|
||||
<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-width="20" class="flex">
|
||||
<Select v-model="gridOption.param.seachOption.key" style="width: 120px"
|
||||
:placeholder="seachTypePlaceholder">
|
||||
<Option v-for="item in seachTypes" :value="item.key" :key="item.key">{{ item.value }}</Option>
|
||||
</Select>
|
||||
<Input class="ml10" v-model="gridOption.param.seachOption.value" style="width: 200px" search
|
||||
placeholder="请输入关键字" @on-search="query(1)" />
|
||||
</FormItem>
|
||||
<FormItem label="场地类型">
|
||||
<Select v-model="gridOption.param.seachOption.venue_type" style="width: 120px" clearable @on-change="query(1)">
|
||||
<Option value="indoor">室内</Option>
|
||||
<Option value="outdoor">室外</Option>
|
||||
<Option value="semi-outdoor">半室外</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="地面类型">
|
||||
<Select v-model="gridOption.param.seachOption.surface_type" style="width: 120px" clearable @on-change="query(1)">
|
||||
<Option value="hard">硬地</Option>
|
||||
<Option value="clay">红土</Option>
|
||||
<Option value="grass">草地</Option>
|
||||
<Option value="carpet">地毯</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="状态">
|
||||
<Select v-model="gridOption.param.seachOption.status" style="width: 120px" clearable @on-change="query(1)">
|
||||
<Option value="active">营业中</Option>
|
||||
<Option value="inactive">暂停营业</Option>
|
||||
<Option value="closed">已关闭</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="query(1)">查询</Button>
|
||||
<Button type="default" @click="resetQuery" class="ml10">重置</Button>
|
||||
<Button type="default" @click="exportCsv" class="ml10">导出</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<tables :columns="listColumns" :value="gridOption.data" :pageOption="gridOption.param.pageOption"
|
||||
@changePage="query"></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 menuServer from '@/api/system_high/menuServer.js'
|
||||
import venuesServer from '@/api/ball/venues_server.js'
|
||||
export default {
|
||||
data() {
|
||||
let rules = {}
|
||||
|
||||
rules["id"] = [{ required: true, message: '请填写' }];
|
||||
rules["name"] = [{ required: true, message: '请填写场地名称' }];
|
||||
rules["address"] = [{ required: true, message: '请填写详细地址' }];
|
||||
rules["latitude"] = [{ required: true, message: '请填写纬度' }];
|
||||
rules["longitude"] = [{ required: true, message: '请填写经度' }];
|
||||
rules["venue_type"] = [{ required: true, message: '请填写场地类型' }];
|
||||
rules["court_count"] = [{ required: true, type: "number", message: '请选择场地数量', trigger: 'change' }];
|
||||
rules["price_per_hour"] = [{ required: true, message: '请填写每小时价格' }];
|
||||
rules["facilities"] = [{ required: true, message: '请填写设施描述' }];
|
||||
rules["surface_type"] = [{ required: true, message: '请选择地面类型' }];
|
||||
rules["timeSlot"] = [{ required: false, message: '请填写营业时间' }];
|
||||
|
||||
|
||||
return {
|
||||
// 搜索类型：只包含适合文本搜索的字段
|
||||
seachTypes: [
|
||||
{ key: "name", value: "场地名称" },
|
||||
{ key: "address", value: "详细地址" },
|
||||
{ key: "facilities", value: "设施描述" }
|
||||
],
|
||||
gridOption: {
|
||||
param: {
|
||||
seachOption: {
|
||||
key: "name",
|
||||
value: "",
|
||||
venue_type: null, // 场地类型筛选
|
||||
surface_type: null, // 地面类型筛选
|
||||
status: null // 状态筛选
|
||||
},
|
||||
pageOption: {
|
||||
total: 0,
|
||||
page: 1,
|
||||
pageSize: 20
|
||||
}
|
||||
},
|
||||
rules,
|
||||
columns: [
|
||||
{ key: 'id', title: 'id', is_show_edit: 0 },
|
||||
{ key: "name", title: "场地名称", disabled: false, is_show_edit: 1, is_show_list: 1, com: "Input" },
|
||||
{ key: "address", title: "详细地址", disabled: false, is_show_edit: 1, is_show_list: 1, com: "Input" },
|
||||
{ key: "latitude", title: "纬度", disabled: false, is_show_edit: 1, is_show_list: 1, com: "InputNumber", data_type: "number" },
|
||||
{ key: "longitude", title: "经度", disabled: false, is_show_edit: 1, is_show_list: 1, com: "InputNumber", data_type: "number" },
|
||||
{
|
||||
key: "venue_type",
|
||||
title: "场地类型",
|
||||
disabled: false,
|
||||
is_show_edit: 1,
|
||||
is_show_list: 1,
|
||||
com: "Select",
|
||||
options: [
|
||||
{ value: "indoor", label: "室内" },
|
||||
{ value: "outdoor", label: "室外" },
|
||||
{ value: "semi-outdoor", label: "半室外" }
|
||||
],
|
||||
render: (h, params) => {
|
||||
const typeMap = {
|
||||
'indoor': { text: '室内', color: 'blue' },
|
||||
'outdoor': { text: '室外', color: 'green' },
|
||||
'semi-outdoor': { text: '半室外', color: 'cyan' }
|
||||
};
|
||||
const type = typeMap[params.row.venue_type] || { text: params.row.venue_type || '未知', color: 'default' };
|
||||
return h('Tag', { props: { color: type.color } }, type.text);
|
||||
}
|
||||
},
|
||||
{
|
||||
key: "surface_type",
|
||||
title: "地面类型",
|
||||
disabled: false,
|
||||
is_show_edit: 1,
|
||||
is_show_list: 1,
|
||||
com: "Select",
|
||||
options: [
|
||||
{ value: "hard", label: "硬地" },
|
||||
{ value: "clay", label: "红土" },
|
||||
{ value: "grass", label: "草地" },
|
||||
{ value: "carpet", label: "地毯" },
|
||||
{ value: "indoor", label: "室内地面" },
|
||||
{ value: "other", label: "其他" }
|
||||
],
|
||||
render: (h, params) => {
|
||||
const surfaceMap = {
|
||||
'hard': { text: '硬地', color: 'cyan' },
|
||||
'clay': { text: '红土', color: 'orange' },
|
||||
'grass': { text: '草地', color: 'green' },
|
||||
'carpet': { text: '地毯', color: 'purple' },
|
||||
'indoor': { text: '室内地面', color: 'blue' },
|
||||
'other': { text: '其他', color: 'default' }
|
||||
};
|
||||
const surface = surfaceMap[params.row.surface_type] || { text: params.row.surface_type || '未知', color: 'default' };
|
||||
return h('Tag', { props: { color: surface.color } }, surface.text);
|
||||
}
|
||||
},
|
||||
{ key: "court_count", title: "场地数量", disabled: false, is_show_edit: 1, is_show_list: 1, data_type: "number", com: "InputNumber" },
|
||||
{ key: "price_per_hour", title: "每小时价格", disabled: false, is_show_edit: 1, is_show_list: 1, com: "InputNumber", data_type: "number" },
|
||||
{ key: "facilities", title: "设施描述", disabled: false, is_show_edit: 1, is_show_list: 0, com: "TextArea" },
|
||||
{ key: "timeSlot", title: "营业时间", disabled: false, is_show_edit: 1, is_show_list: 1, com: "Input" },
|
||||
{
|
||||
key: "status",
|
||||
title: "状态",
|
||||
disabled: false,
|
||||
is_show_edit: 1,
|
||||
is_show_list: 1,
|
||||
com: "Select",
|
||||
options: [
|
||||
{ value: "active", label: "营业中" },
|
||||
{ value: "inactive", label: "暂停营业" },
|
||||
{ value: "closed", label: "已关闭" }
|
||||
],
|
||||
render: (h, params) => {
|
||||
const statusMap = {
|
||||
'active': { text: '营业中', color: 'green' },
|
||||
'inactive': { text: '暂停营业', color: 'orange' },
|
||||
'closed': { text: '已关闭', color: 'red' }
|
||||
};
|
||||
const status = statusMap[params.row.status] || { text: params.row.status || '未知', color: 'default' };
|
||||
return h('Tag', { props: { color: status.color } }, status.text);
|
||||
}
|
||||
},
|
||||
{ key: 'create_time', title: '创建时间', is_show_edit: 0 },
|
||||
{ key: 'last_modify_time', title: '更新时间', is_show_edit: 0 },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
type: 'template',
|
||||
render: (h, params) => {
|
||||
let btns = [
|
||||
{
|
||||
title: '修改',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.showEditWarp(params.row)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '删除',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.delConfirm(params.row)
|
||||
},
|
||||
},
|
||||
]
|
||||
return uiTool.getBtn(h, btns)
|
||||
},
|
||||
}
|
||||
|
||||
],
|
||||
data: []
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
seachTypePlaceholder() {
|
||||
const selected = this.seachTypes.find(item => item.key === this.gridOption.param.seachOption.key);
|
||||
return selected ? selected.value : '请选择搜索类型';
|
||||
},
|
||||
editColumns() {
|
||||
let editTempColumns = this.gridOption.columns.filter(p => p.is_show_edit === 1)
|
||||
return editTempColumns
|
||||
},
|
||||
listColumns() {
|
||||
let listTempColumns = this.gridOption.columns.filter(p => p.is_show_list !== 0)
|
||||
return listTempColumns
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
this.initCol()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.query(1)
|
||||
},
|
||||
async initCol() {
|
||||
|
||||
let columnRows = []
|
||||
let columnKeys = columnRows.map(p => p.key)
|
||||
let newColumns = this.gridOption.columns.filter(p => columnKeys.indexOf(p.key) > -1)
|
||||
for (let i = 0; i < newColumns.length; i++) {
|
||||
let curColumn = newColumns[i]
|
||||
let modelMap = columnRows[i].map_option
|
||||
let res = await menuServer.modelInterface({ model_key: columnRows[i].modelKey, map_option: modelMap })
|
||||
curColumn.source = res.data
|
||||
}
|
||||
|
||||
},
|
||||
async inquiry() {
|
||||
let res = await venuesServer.all(this.gridOption.param)
|
||||
this.gridOption.data = res.data
|
||||
},
|
||||
async query(page) {
|
||||
if (page) {
|
||||
this.gridOption.param.pageOption.page = page
|
||||
}
|
||||
let res = await venuesServer.page(this.gridOption.param)
|
||||
this.gridOption.data = res.data.rows
|
||||
this.gridOption.param.pageOption.total = res.data.count
|
||||
},
|
||||
async showAddWarp() {
|
||||
this.$refs.editModal.addShow({ 'venue_type': 'indoor', 'surface_type': 'hard', 'court_count': '1', 'status': 'active', 'create_time': 'CURRENT_TIMESTAMP', 'updated_at': 'CURRENT_TIMESTAMP', }, async (newRow) => {
|
||||
let res = await venuesServer.add(newRow)
|
||||
rootVue.$Message.success('新增成功！')
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
async showEditWarp(row) {
|
||||
this.$refs.editModal.editShow(row, async (newRow) => {
|
||||
let valid = await this.$refs['editModal'].$refs['From'].validate()
|
||||
if (valid) {
|
||||
let res = await venuesServer.edit(newRow)
|
||||
rootVue.$Message.success('修改成功！')
|
||||
this.init()
|
||||
}
|
||||
})
|
||||
},
|
||||
async delConfirm(row) {
|
||||
uiTool.delConfirm(async () => {
|
||||
await venuesServer.del(row)
|
||||
rootVue.$Message.success('删除成功！')
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
resetQuery() {
|
||||
this.gridOption.param.seachOption = {
|
||||
key: 'name',
|
||||
value: '',
|
||||
venue_type: null,
|
||||
surface_type: null,
|
||||
status: null
|
||||
};
|
||||
this.query(1);
|
||||
},
|
||||
async exportCsv(row) {
|
||||
await venuesServer.exportCsv(row)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less"></style>
|
||||
Reference in New Issue
Block a user