1
This commit is contained in:
张成
@@ -1,145 +0,0 @@
|
||||
<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>
|
||||
<Button type="default" @click="exportCsv">导出</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 tools from '@/utils/tools'
|
||||
import uiTool from '@/utils/uiTool'
|
||||
import wch_citiesServer from '@/api/venues/wch_cities_server.js'
|
||||
export default {
|
||||
data() {
|
||||
let rules = {}
|
||||
|
||||
rules["cn_city"] = [{ required: true, message: '请填写城市名称' }];
|
||||
rules["city_code"] = [{ required: true, message: '请填写城市代码' }];
|
||||
rules["cn_state"] = [{ required: false, message: '请填写省份' }];
|
||||
rules["cn_country"] = [{ required: false, message: '请填写国家' }];
|
||||
|
||||
return {
|
||||
seachTypes: [
|
||||
{ key: 'cn_city', value: '城市名称' },
|
||||
{ key: 'city_code', value: '城市代码' },
|
||||
{ key: 'cn_state', value: '省份' },
|
||||
{ key: 'cn_country', value: '国家' }
|
||||
],
|
||||
seachTypePlaceholder: '请选择搜索类型',
|
||||
gridOption: {
|
||||
param: {
|
||||
seachOption: {
|
||||
key: 'cn_city',
|
||||
value: ''
|
||||
},
|
||||
pageOption: {
|
||||
page: 1,
|
||||
pageSize: 20
|
||||
}
|
||||
},
|
||||
data: [],
|
||||
rules: rules
|
||||
},
|
||||
listColumns: [
|
||||
{ title: 'ID', key: 'id', minWidth: 80 },
|
||||
{ title: '城市名称', key: 'cn_city', minWidth: 120 },
|
||||
{ title: '城市代码', key: 'city_code', minWidth: 100 },
|
||||
{ title: '省份', key: 'cn_state', minWidth: 120 },
|
||||
{ title: '国家', key: 'cn_country', minWidth: 100 },
|
||||
{ title: '英文城市', key: 'city', minWidth: 120 },
|
||||
{ title: '英文省份', key: 'state', minWidth: 120 },
|
||||
{ title: '英文国家', key: 'country', minWidth: 100 },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
type: 'template',
|
||||
render: (h, params) => {
|
||||
let btns = [
|
||||
{
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.showEditWarp(params.row)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '删除',
|
||||
type: 'error',
|
||||
click: () => {
|
||||
this.del(params.row)
|
||||
},
|
||||
},
|
||||
]
|
||||
return uiTool.getBtn(h, btns)
|
||||
}
|
||||
}
|
||||
],
|
||||
editColumns: [
|
||||
{ title: '城市名称(中文)', key: 'cn_city', type: 'text', required: true },
|
||||
{ title: '城市代码', key: 'city_code', type: 'text', required: true },
|
||||
{ title: '省份(中文)', key: 'cn_state', type: 'text' },
|
||||
{ title: '国家(中文)', key: 'cn_country', type: 'text' },
|
||||
{ title: '城市名称(英文)', key: 'city', type: 'text' },
|
||||
{ title: '省份(英文)', key: 'state', type: 'text' },
|
||||
{ title: '国家(英文)', key: 'country', type: 'text' },
|
||||
{ title: '省份代码', key: 'state_code', type: 'text' },
|
||||
{ title: '国家代码', key: 'country_code', type: 'text' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.query(1);
|
||||
},
|
||||
methods: {
|
||||
query(page) {
|
||||
this.gridOption.param.pageOption.page = page;
|
||||
wch_citiesServer.page(this.gridOption.param).then(res => {
|
||||
this.gridOption.data = res.data.rows;
|
||||
this.gridOption.param.pageOption.total = res.data.count;
|
||||
});
|
||||
},
|
||||
showAddWarp() {
|
||||
this.$refs.editModal.showModal();
|
||||
},
|
||||
showEditWarp(row) {
|
||||
this.$refs.editModal.showModal(row);
|
||||
},
|
||||
del(row) {
|
||||
this.$Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: '确定要删除这条记录吗？',
|
||||
onOk: () => {
|
||||
wch_citiesServer.del({ id: row.id }).then(res => {
|
||||
this.$Message.success('删除成功');
|
||||
this.query(1);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
exportCsv() {
|
||||
wch_citiesServer.exportCsv(this.gridOption.param).then(res => {
|
||||
tools.downloadFile(res, '城市管理.csv');
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,239 +0,0 @@
|
||||
<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>
|
||||
<Button type="default" @click="exportCsv">导出</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 tools from '@/utils/tools'
|
||||
import uiTool from '@/utils/uiTool'
|
||||
import menuServer from '@/api/system_high/menuServer.js'
|
||||
import wch_professionsServer from '@/api/system/wch_professions_server.js'
|
||||
export default {
|
||||
data() {
|
||||
let rules = {}
|
||||
|
||||
rules["level_one"] = [{ required: true, message: '请填写一级分类' }];
|
||||
rules["level_two"] = [{ required: true, message: '请填写二级分类' }];
|
||||
rules["level_three"] = [{ required: true, message: '请填写三级分类' }];
|
||||
rules["sort_order"] = [{ required: false, type: "number", message: '请填写排序', trigger: 'change' }];
|
||||
rules["is_active"] = [{ required: false, message: '请选择是否启用', trigger: 'change' }];
|
||||
|
||||
return {
|
||||
seachTypes: [
|
||||
{ key: "id", value: "ID" },
|
||||
{ key: "level_one", value: "一级分类" },
|
||||
{ key: "level_two", value: "二级分类" },
|
||||
{ key: "level_three", value: "三级分类" }
|
||||
],
|
||||
gridOption: {
|
||||
param: {
|
||||
seachOption: { key: "level_one", value: "" },
|
||||
pageOption: {
|
||||
total: 0,
|
||||
page: 1,
|
||||
pageSize: 20
|
||||
}
|
||||
},
|
||||
rules,
|
||||
columns: [
|
||||
{ key: "id", title: "ID", disabled: true, is_show_edit: 1, is_show_list: 1, com: "Input" },
|
||||
{
|
||||
key: "level_one",
|
||||
title: "一级分类",
|
||||
disabled: false,
|
||||
is_show_edit: 1,
|
||||
is_show_list: 1,
|
||||
com: "Input",
|
||||
render: (h, params) => {
|
||||
return h('Tag', { props: { color: 'blue' } }, params.row.level_one);
|
||||
}
|
||||
},
|
||||
{
|
||||
key: "level_two",
|
||||
title: "二级分类",
|
||||
disabled: false,
|
||||
is_show_edit: 1,
|
||||
is_show_list: 1,
|
||||
com: "Input",
|
||||
render: (h, params) => {
|
||||
return h('Tag', { props: { color: 'green' } }, params.row.level_two);
|
||||
}
|
||||
},
|
||||
{
|
||||
key: "level_three",
|
||||
title: "三级分类",
|
||||
disabled: false,
|
||||
is_show_edit: 1,
|
||||
is_show_list: 1,
|
||||
com: "Input",
|
||||
render: (h, params) => {
|
||||
return h('Tag', { props: { color: 'orange' } }, params.row.level_three);
|
||||
}
|
||||
},
|
||||
{
|
||||
key: "sort_order",
|
||||
title: "排序",
|
||||
disabled: false,
|
||||
is_show_edit: 1,
|
||||
is_show_list: 1,
|
||||
data_type: "number",
|
||||
com: "InputNumber",
|
||||
render: (h, params) => {
|
||||
return h('span', params.row.sort_order || 0);
|
||||
}
|
||||
},
|
||||
{
|
||||
key: "is_active",
|
||||
title: "状态",
|
||||
disabled: false,
|
||||
is_show_edit: 1,
|
||||
is_show_list: 1,
|
||||
com: "Radio",
|
||||
options: [
|
||||
{ value: "1", label: "启用" },
|
||||
{ value: "0", label: "禁用" }
|
||||
],
|
||||
render: (h, params) => {
|
||||
const statusMap = {
|
||||
'1': { text: '启用', color: 'success' },
|
||||
'0': { text: '禁用', color: 'default' }
|
||||
};
|
||||
const status = statusMap[params.row.is_active] || { text: '未知', color: 'default' };
|
||||
return h('Tag', { props: { color: status.color } }, status.text);
|
||||
}
|
||||
},
|
||||
{ key: 'create_time', title: '创建时间', minWidth: 160, is_show_edit: 0 },
|
||||
{ key: 'last_modify_time', title: '更新时间', minWidth: 160, is_show_edit: 0 },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
type: 'template',
|
||||
is_show_list: 1,
|
||||
render: (h, params) => {
|
||||
let btns = [
|
||||
{
|
||||
title: '修改',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.showEditWarp(params.row)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '删除',
|
||||
type: 'error',
|
||||
click: () => {
|
||||
this.delConfirm(params.row)
|
||||
},
|
||||
},
|
||||
]
|
||||
return uiTool.getBtn(h, btns)
|
||||
},
|
||||
},
|
||||
],
|
||||
data: []
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
seachTypePlaceholder() {
|
||||
return this.seachTypes.map(p => p.value).slice(0, 3).join('/')
|
||||
},
|
||||
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 === 1)
|
||||
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 wch_professionsServer.all(this.gridOption.param)
|
||||
this.gridOption.data = res.data
|
||||
},
|
||||
async query(page) {
|
||||
if (page) {
|
||||
this.gridOption.param.pageOption.page = page
|
||||
}
|
||||
let res = await wch_professionsServer.page(this.gridOption.param)
|
||||
this.gridOption.data = res.data.rows
|
||||
this.gridOption.param.pageOption.total = res.data.count
|
||||
},
|
||||
async showAddWarp() {
|
||||
this.$refs.editModal.addShow({
|
||||
'level_one': '',
|
||||
'level_two': '',
|
||||
'level_three': '',
|
||||
'sort_order': 0,
|
||||
'is_active': '1'
|
||||
}, async (newRow) => {
|
||||
let res = await wch_professionsServer.add(newRow)
|
||||
this.$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 wch_professionsServer.edit(newRow)
|
||||
this.$Message.success('修改成功！')
|
||||
this.init()
|
||||
}
|
||||
})
|
||||
},
|
||||
async delConfirm(row) {
|
||||
uiTool.delConfirm(async () => {
|
||||
await wch_professionsServer.del(row)
|
||||
this.$Message.success('删除成功！')
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
async exportCsv() {
|
||||
let res = await wch_professionsServer.exportCsv(this.gridOption.param)
|
||||
tools.downloadFile(res, '职业管理.csv')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="less"></style>
|
||||
Reference in New Issue
Block a user