大区列表
This commit is contained in:
刘召雪
@ -7,6 +7,9 @@ export function list() {
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 获取大区下拉列表
|
||||
export function areaSelect() {
|
||||
return request({
|
||||
url: '/system/area/select',
|
||||
@ -14,15 +17,53 @@ export function areaSelect() {
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 更新和保存
|
||||
export function save(data) {
|
||||
return request({
|
||||
url: '/system/area/save',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除
|
||||
export function del(ids) {
|
||||
return request({
|
||||
url: '/system/area/' + ids,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 保存大区地区信息
|
||||
export function saveProvince(data) {
|
||||
return request({
|
||||
url: '/system/area/saveProvince',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 根据大区ID获取地区列表
|
||||
export function getProvinceByArea(id) {
|
||||
return request({
|
||||
url: '/system/province/getProvinceByArea?areaId=' + id,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
// 根据parentCode获取地区列表
|
||||
export function getProvinceByParent(id) {
|
||||
return request({
|
||||
url: '/system/province/getProvinceByParent?parent=' + id,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
// 获取省份地区列表
|
||||
export function province() {
|
||||
return request({
|
||||
url: '/system/province/list',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
200
src/views/system/area/index.vue
Normal file
200
src/views/system/area/index.vue
Normal file
@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<section class="app-container">
|
||||
<el-row>
|
||||
<el-button type="primary" icon="el-icon-plus" size="mini" @click="addArea">添加</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" size="mini" @click="delArea">批量删除</el-button>
|
||||
</el-row>
|
||||
<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55">
|
||||
</el-table-column>
|
||||
<el-table-column prop="id" label="大区ID">
|
||||
</el-table-column>
|
||||
<el-table-column prop="areaName" label="大区名称">
|
||||
</el-table-column>
|
||||
<el-table-column prop="ordinal" label="序数">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="view(scope.row)">查看省份</el-button>
|
||||
<el-button type="primary" icon="el-icon-edit" @click="editArea(scope.row)">修改</el-button>
|
||||
<el-button type="primary" icon="el-icon-delete" @click="delArea(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
||||
<el-dialog title="省份列表" :visible.sync="open" width="800px" append-to-body>
|
||||
<el-checkbox-group v-model="areaData">
|
||||
<el-checkbox v-for="data in provinceData" :key="data.code" :label="data.code" :value="data.code">{{data.cityName}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submit">确 定</el-button>
|
||||
<el-button @click="open = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 大区弹框 -->
|
||||
<el-dialog :title="title" :visible.sync="areaOpen" width="500px" append-to-body>
|
||||
<el-form ref="areaForm" :model="areaForm" :rules="areaRules" label-width="100px">
|
||||
<el-form-item label="大区名称" prop="areaName">
|
||||
<el-input v-model="areaForm.areaName" placeholder="请输入大区名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="序数" prop="ordinal">
|
||||
<el-input v-model="areaForm.ordinal" placeholder="请输入序数"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { list, areaSelect, getProvinceByArea, getProvinceByParent, province, save, saveProvince, del } from "@/api/hardware/area";
|
||||
export default {
|
||||
name: 'AreaList',
|
||||
data () {
|
||||
return {
|
||||
ids: [],
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
areaOpen: false,
|
||||
// 表格数据
|
||||
tableData: null,
|
||||
areaData: [], // 大区省份
|
||||
provinceData: [], // 所有省份
|
||||
// 表单参数
|
||||
areaForm: {},
|
||||
row: {}, // 大区
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
areaRules: {
|
||||
areaName: [
|
||||
{ required: true, message: "大区名称不能为空", trigger: "blur" },
|
||||
],
|
||||
ordinal: [
|
||||
{ required: true, message: "序数不能为空", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
created () {
|
||||
province().then(res => {
|
||||
if (res.code == 200) {
|
||||
this.provinceData = res.rows;
|
||||
} else {
|
||||
this.$message.error(msg);
|
||||
}
|
||||
})
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleSelectionChange (selection) {
|
||||
this.ids = selection.map((item) => item.id);
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
// 表单重置
|
||||
reset () {
|
||||
this.areaForm = {
|
||||
id: "",
|
||||
areaName: "",
|
||||
ordinal: "",
|
||||
};
|
||||
this.resetForm("areaForm");
|
||||
},
|
||||
|
||||
// 取消按钮
|
||||
cancel () {
|
||||
this.areaOpen = false;
|
||||
this.reset();
|
||||
},
|
||||
|
||||
// 获取大区列表
|
||||
getList () {
|
||||
list(this.queryParams).then((response) => {
|
||||
this.tableData = response.rows;
|
||||
this.total = response.total;
|
||||
});
|
||||
},
|
||||
|
||||
// 添加大区
|
||||
addArea () {
|
||||
this.reset();
|
||||
this.areaOpen = true;
|
||||
this.title = "添加大区";
|
||||
},
|
||||
|
||||
// 修改大区
|
||||
editArea (row) {
|
||||
this.areaOpen = true;
|
||||
this.areaForm = row;
|
||||
this.title = "修改大区";
|
||||
},
|
||||
|
||||
// 提交
|
||||
submitForm () {
|
||||
save(this.areaForm).then(res => {
|
||||
if (200 == res.code) {
|
||||
this.areaOpen = false;
|
||||
this.getList();
|
||||
}else {
|
||||
this.msgSuccess(res.msg);
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
view (row) {
|
||||
this.row = row;
|
||||
getProvinceByArea(row.id).then(response => {
|
||||
this.areaData = response.data.map(v => v.code);
|
||||
this.open = true;
|
||||
});
|
||||
},
|
||||
|
||||
submit () {
|
||||
saveProvince({
|
||||
...this.row,
|
||||
"provinceIds": this.areaData
|
||||
}).then(res => {
|
||||
this.open = false;
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
|
||||
/** 删除按钮操作 */
|
||||
delArea (row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$confirm("是否确认删除?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
return del(ids);
|
||||
})
|
||||
.then((res) => {
|
||||
if (200 == res.code) {
|
||||
this.getList();
|
||||
this.msgSuccess("删除成功");
|
||||
} else {
|
||||
this.msgSuccess(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((res) => { });
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user