From 68701c15efe225d38348c0b1c0d65aac98c03889 Mon Sep 17 00:00:00 2001
From: 陶杰 <1378534974@qq.com>
Date: 星期二, 24 十二月 2024 16:46:56 +0800
Subject: [PATCH] 1.行政区划：（高德，腾讯） 使用elementUI的树型控件
---
pages/district/tengxun/index.vue | 287 ++++++++++++++++++-------
pages/district/gaode/index.vue | 315 +++++++++++++++++++---------
2 files changed, 411 insertions(+), 191 deletions(-)
diff --git a/pages/district/gaode/index.vue b/pages/district/gaode/index.vue
index 72a241a..c91519e 100644
--- a/pages/district/gaode/index.vue
+++ b/pages/district/gaode/index.vue
@@ -1,114 +1,217 @@
<template>
- <div class="custom-crud-page">
- <el-bus-crud ref="crud" v-bind="crudConfig"></el-bus-crud>
- </div>
+ <div class="custom-crud-page">
+ <el-button type="primary" @click="openDialog">新增</el-button>
+ <el-table :data="data" style="width: 100%" row-key="id" v-loading="loading"
+ :tree-props="{ children: 'children' }">
+ <el-table-column prop="name" label="名称"></el-table-column>
+ <el-table-column prop="adcode" label="区域编码"></el-table-column>
+ <el-table-column prop="level" label="行政区划级别"></el-table-column>
+ <el-table-column prop="citycode" label="城市编码"></el-table-column>
+ <el-table-column prop="center" label="区域中心点"></el-table-column>
+ <el-table-column label="操作" width="200">
+ <template #default="scope">
+ <el-button type="text" size="small" @click="handleAddChildren(scope.row)">新增下级</el-button>
+ <el-button type="text" size="small" @click="handleEdit(scope.row)">修改</el-button>
+ <el-button type="text" size="small" @click="handleDelete(scope.row)"><span
+ style="color: red;">删除</span></el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <el-dialog :visible.sync="dialogVisible" :title="form.id ? '修改' : '新增'" width="50%">
+ <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="form-container">
+ <el-form-item v-if="form.parentName" label="父级节点：" prop="parentName">
+ <el-input v-model="form.parentName" readonly></el-input>
+ </el-form-item>
+ <el-form-item label="名称：" prop="name">
+ <el-input v-model="form.name" placeholder="请输入名称"></el-input>
+ </el-form-item>
+ <el-form-item label="区域编码：" prop="adcode">
+ <el-input v-model="form.adcode" placeholder="请输入区域编码"></el-input>
+ </el-form-item>
+ <el-form-item label="行政区划级别：" prop="level">
+ <el-input v-model="form.level" placeholder="行政区划级别"></el-input>
+ </el-form-item>
+ <el-form-item label="层城市编码：" prop="citycode">
+ <el-input v-model="form.citycode" placeholder="请输入城市编码"></el-input>
+ </el-form-item>
+ <el-form-item label="区域中心点：" prop="center">
+ <el-input v-model="form.center" placeholder="请输入区域中心点"></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="handleSubmit">提交</el-button>
+ <el-button @click="handleReset">重置</el-button>
+ </el-form-item>
+ </el-form>
+ </el-dialog>
+
+ </div>
</template>
<script>
export default {
- data() {
- return {
- crudConfig: {
- url: 'flower/v2/district-gaode/list',
- newUrl: 'flower/v2/district-gaode',
- viewUrl: 'flower/v2/district-gaode',
- viewOnPath: true,
- editUrl: 'flower/v2/district-gaode',
- editMethodType: 'put',
- editOnPath: true,
- deleteUrl: 'flower/v2/district-gaode',
- deleteMethodType: 'delete',
- deleteOnPath: true,
- hasPagination: false,
- saveQuery: false,
- isTree: true,
- hasView: false,
- hasOperation:true,
- hasNew:true,
- deleteMessage: () => '此操作将会删除所有子区划, 是否继续？',
- beforeOpen(row, isNew) {
- if (isNew && row.name) {
- row.parentName = row.name
- }
- if (!isNew) {
- row.parentName = ''
- }
- },
- extraParentKeys: ['parentName'],
- tableAttrs: {
- rowKey: 'id',
- lazy:true,
- load: (row, resolve) => {
- alert(1)
- },
- },
- columns: [
- { label: '名称', prop: 'name' },
- {label: '区域编码',prop: 'adcode',},
- {label: '行政区划级别',prop: 'level',},
- {label: '城市编码',prop: 'citycode',},
- {label: '区域中心点',prop: 'center',},
- ],
- form: [
- {
- label: '父级节点：',
- id: 'parentName',
- type: 'input',
- readonly: true,
- hidden: (row) => !row.parentName,
- },
- {
- label: '名称：',
- id: 'name',
- type: 'input',
- el: { placeholder: '请输入名称：' },
- rules: { required: true, message: '请输入名称：', trigger: 'blur' },
- },
- {
- label: '区域编码：',
- id: 'adcode',
- type: 'input',
- el: {
- min: 0,
- precision: 0,
- controlsPosition: 'right',
- placeholder: '请输入区域编码：',
+ data() {
+ return {
+ dialogVisible: false,
+ loading: false,
+ data: [],
+ form: {
+ parentName: '',
+ parentId: null,
+ id: '',
+ name: '',
+ adcode: '',
+ level: '',
+ citycode: '',
+ center: '',
},
- rules: { required: true, message: '请输入区域编码', trigger: 'blur' },
- },
- {
- label: '城市编码',
- id: 'citycode',
- type: 'input',
- el: {
- min: 0,
- precision: 0,
- controlsPosition: 'right',
- placeholder: '请输入城市编码：',
+ rules: {
+ name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+ adcode: [{ required: true, message: '请输入区域编码', trigger: 'blur' }],
+ // citycode: [{ required: true, message: '请输入城市编码', trigger: 'blur' }],
+ // center: [{ required: true, message: '请输入区域中心点', trigger: 'blur' }],
+ // level: [{ required: true, message: '行政区划级别', trigger: 'blur' }],
},
- },
-
- {
- label: '区域中心点',
- id: 'center',
- type: 'input',
- el: { placeholder: '请输入区域中心点' },
-
- },
- {
- label: '行政区划级别',
- id: 'level',
- type: 'input',
- el: { placeholder: '请输入行政区划级别' },
- },
- ],
- },
- }
- },
- head() {
- return {
- title: '高德行政区划管理',
- }
- },
-}
+ tableData: [],
+ };
+ },
+ mounted() {
+ this.getData();
+ },
+ methods: {
+
+ openDialog() {
+ this.dialogVisible = true;
+ this.handleReset()
+ this.form = {
+ parentName: '',
+ parentId: null,
+ id: '',
+ name: '',
+ fullname: '',
+ code: '',
+ level: null,
+ }
+ },
+ async getData() {
+ this.loading = true
+ const resp = await this.$elBusHttp.request('flower/v2/district-gaode/list', {
+ params: {},
+ });
+ if (resp.code === 0) {
+ console.log(resp.data)
+ this.data = resp.data
+ }
+ this.loading = false
+ },
+
+ handleSubmit() {
+ this.$refs.form.validate(async valid => {
+ if (valid) {
+ // Handle form submission logic
+ console.log('Form data:', this.form);
+ if (this.form.id) {
+
+ const { code } = await this.$elBusHttp.request(
+ `flower/v2/district-gaode/${this.form.id}`,
+ {
+ method: 'put',
+ data: this.form,
+ }
+ )
+ if (code === 0) {
+ this.$message.success('修改成功')
+ this.dialogVisible = false
+ this.getData()
+ }
+ } else {
+ const { code } = await this.$elBusHttp.request(
+ 'flower/v2/district-gaode',
+ {
+ method: 'post',
+ data: this.form,
+ }
+ )
+ if (code === 0) {
+ this.$message.success('新增成功')
+ this.dialogVisible = false
+ this.getData()
+ }
+ }
+
+ }
+ });
+ },
+ handleReset() {
+ this.$refs.form?.resetFields();
+ },
+
+ handleAddChildren(row) {
+ this.handleReset()
+ this.form = {
+ parentName: row.name,
+ parentId: row.id,
+ id: '',
+ name: '',
+ fullname: '',
+ code: '',
+ level: null,
+ }
+ this.dialogVisible = true;
+ },
+
+ async handleEdit(row) {
+ this.form = { ...row };
+ console.log(row)
+ if (row.parentId) {
+ const resp = await this.$elBusHttp.request(`flower/v2/district-gaode/${row.parentId}`, {
+ params: {},
+ });
+ if (resp.code === 0) {
+ console.log(resp.data)
+ this.form.parentName = resp.data.name;
+ }
+ }
+ this.dialogVisible = true;
+ },
+ async handleDelete(row) {
+ try {
+ await this.$elBusUtil.confirm(`此操作将会删除所有子行政区划, 是否继续？`)
+ const { code } = await this.$elBusHttp.request(
+ `flower/v2/district-gaode/${row.id}`,
+ {
+ method: 'delete',
+ }
+ )
+ if (code === 0) {
+ this.$message.success(`删除成功`)
+ this.getData()
+ } else {
+ return false
+ }
+ } catch (error) {
+ return false
+ }
+
+
+ },
+ },
+
+ head() {
+ return {
+ title: '高德行政区划管理',
+ }
+ },
+};
</script>
+
+<style>
+.custom-crud-page {
+ padding: 20px;
+ background-color: #FFFFFF;
+}
+
+.form-container {
+ margin-bottom: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/pages/district/tengxun/index.vue b/pages/district/tengxun/index.vue
index 49fdb26..d382d04 100644
--- a/pages/district/tengxun/index.vue
+++ b/pages/district/tengxun/index.vue
@@ -1,93 +1,210 @@
<template>
- <div class="custom-crud-page">
- <el-bus-crud ref="crud" v-bind="crudConfig"></el-bus-crud>
- </div>
+ <div class="custom-crud-page">
+ <el-button type="primary" @click="openDialog">新增</el-button>
+ <el-table :data="data" style="width: 100%" row-key="id" v-loading="loading"
+ :tree-props="{ children: 'children' }">
+ <el-table-column prop="name" label="名称"></el-table-column>
+ <el-table-column prop="fullname" label="全称"></el-table-column>
+ <el-table-column prop="code" label="编码"></el-table-column>
+ <el-table-column prop="level" label="层级"></el-table-column>
+ <el-table-column label="操作" width="200">
+ <template #default="scope">
+ <el-button type="text" size="small" @click="handleAddChildren(scope.row)">新增下级</el-button>
+ <el-button type="text" size="small" @click="handleEdit(scope.row)">修改</el-button>
+ <el-button type="text" size="small" @click="handleDelete(scope.row)"><span
+ style="color: red;">删除</span></el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <el-dialog :visible.sync="dialogVisible" :title="form.id ? '修改' : '新增'" width="50%">
+ <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="form-container">
+ <el-form-item v-if="form.parentName" label="父级节点：" prop="parentName">
+ <el-input v-model="form.parentName" readonly></el-input>
+ </el-form-item>
+ <el-form-item label="名称：" prop="name">
+ <el-input v-model="form.name" placeholder="请输入名称："></el-input>
+ </el-form-item>
+ <el-form-item label="全称：" prop="fullname">
+ <el-input v-model="form.fullname" placeholder="请输入全称："></el-input>
+ </el-form-item>
+ <el-form-item label="编码：" prop="code">
+ <el-input v-model="form.code" placeholder="请输入编码"></el-input>
+ </el-form-item>
+ <el-form-item label="层级：" prop="level">
+ <el-input-number v-model="form.level" placeholder="请输入层级"></el-input-number>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="handleSubmit">提交</el-button>
+ <el-button @click="handleReset">重置</el-button>
+ </el-form-item>
+ </el-form>
+ </el-dialog>
+
+ </div>
</template>
<script>
export default {
- data() {
- return {
- crudConfig: {
- url: 'flower/v2/district-tengxun/list',
- newUrl: 'flower/v2/district-tengxun',
- viewUrl: 'flower/v2/district-tengxun',
- viewOnPath: true,
- editUrl: 'flower/v2/district-tengxun',
- editMethodType: 'put',
- editOnPath: true,
- deleteUrl: 'flower/v2/district-tengxun',
- deleteMethodType: 'delete',
- deleteOnPath: true,
- hasPagination: false,
- saveQuery: false,
- isTree: true,
- hasView: false,
- hasOperation:true,
- hasNew:true,
- deleteMessage: () => '此操作将会删除所有子行政区划, 是否继续？',
- beforeOpen(row, isNew) {
- if (isNew && row.name) {
- row.parentName = row.name
- }
- if (!isNew) {
- row.parentName = ''
- }
+ data() {
+ return {
+ dialogVisible: false,
+ loading: false,
+ data: [],
+ form: {
+ parentName: '',
+ parentId: null,
+ id: '',
+ name: '',
+ fullname: '',
+ code: '',
+ level: null,
+ },
+ rules: {
+ name: [{ required: true, message: '请输入名称：', trigger: 'blur' }],
+ fullname: [{ required: true, message: '请输入全称', trigger: 'blur' }],
+ code: [{ required: true, message: '请输入编码', trigger: 'blur' }],
+ level: [{ required: true, message: '请输入层级', trigger: 'blur' }],
+ },
+ tableData: [],
+ };
+ },
+ mounted() {
+ this.getData();
+ },
+ methods: {
+
+ openDialog() {
+ this.dialogVisible = true;
+ this.handleReset()
+ this.form = {
+ parentName: '',
+ parentId: null,
+ id: '',
+ name: '',
+ fullname: '',
+ code: '',
+ level: null,
+ }
},
- extraParentKeys: ['parentName'],
- tableAttrs: {
- rowKey: 'id',
+ async getData() {
+ this.loading = true
+ const resp = await this.$elBusHttp.request('flower/v2/district-tengxun/list', {
+ params: {},
+ });
+ if (resp.code === 0) {
+ console.log(resp.data)
+ this.data = resp.data
+ }
+ this.loading = false
},
- columns: [
- { label: '名称', prop: 'name' },
- {label: '全称',prop: 'fullname',},
- {label: '编码',prop: 'code',},
- {label: '层级',prop: 'level',},
- ],
- form: [
- {
- label: '父级节点：',
- id: 'parentName',
- type: 'input',
- readonly: true,
- hidden: (row) => !row.parentName,
- },
- {
- label: '名称：',
- id: 'name',
- type: 'input',
- el: { placeholder: '请输入名称：' },
- rules: { required: true, message: '请输入名称：', trigger: 'blur' },
- },
- {
- label: '全称',
- id: 'fullname',
- type: 'input',
- el: { placeholder: '请输入全称：' },
- rules: { required: true, message: '请输入全称', trigger: 'blur' },
- },
- {
- label: '编码',
- id: 'code',
- type: 'input',
- el: { placeholder: '请输入编码' },
- rules: { required: true, message: '请输入编码', trigger: 'blur' },
- },
- {
- label: '层级',
- id: 'level',
- type: 'input-number',
- el: { placeholder: '请输入层级' },
- // rules: {required: true,message: '请输入层级',trigger: 'blur',},
- },
- ],
- },
- }
- },
- head() {
- return {
- title: '腾讯行政区划管理',
- }
- },
-}
+
+ handleSubmit() {
+ this.$refs.form.validate(async valid => {
+ if (valid) {
+ // Handle form submission logic
+ console.log('Form data:', this.form);
+ if (this.form.id) {
+
+ const { code } = await this.$elBusHttp.request(
+ `flower/v2/district-tengxun/${this.form.id}`,
+ {
+ method: 'put',
+ data: this.form,
+ }
+ )
+ if (code === 0) {
+ this.$message.success('修改成功')
+ this.dialogVisible = false
+ this.getData()
+ }
+ } else {
+ const { code } = await this.$elBusHttp.request(
+ 'flower/v2/district-tengxun',
+ {
+ method: 'post',
+ data: this.form,
+ }
+ )
+ if (code === 0) {
+ this.$message.success('新增成功')
+ this.dialogVisible = false
+ this.getData()
+ }
+ }
+
+ }
+ });
+ },
+ handleReset() {
+ this.$refs.form?.resetFields();
+ },
+
+ handleAddChildren(row) {
+ this.handleReset()
+ this.form = {
+ parentName: row.name,
+ parentId: row.id,
+ id: '',
+ name: '',
+ fullname: '',
+ code: '',
+ level: null,
+ }
+ this.dialogVisible = true;
+ },
+
+ async handleEdit(row) {
+ this.form = { ...row };
+ console.log(row)
+ if (row.parentId) {
+ const resp = await this.$elBusHttp.request(`flower/v2/district-tengxun/${row.parentId}`, {
+ params: {},
+ });
+ if (resp.code === 0) {
+ console.log(resp.data)
+ this.form.parentName = resp.data.name;
+ }
+ }
+ this.dialogVisible = true;
+ },
+ async handleDelete(row) {
+ try {
+ await this.$elBusUtil.confirm(`此操作将会删除所有子行政区划, 是否继续？`)
+ const { code } = await this.$elBusHttp.request(
+ `flower/v2/district-tengxun/${row.id}`,
+ {
+ method: 'delete',
+ }
+ )
+ if (code === 0) {
+ this.$message.success(`删除成功`)
+ this.getData()
+ } else {
+ return false
+ }
+ } catch (error) {
+ return false
+ }
+
+
+ },
+ },
+ head() {
+ return {
+ title: '腾讯行政区划管理',
+ }
+ },
+};
</script>
+
+<style>
+.custom-crud-page {
+ padding: 20px;
+ background-color: #FFFFFF;
+}
+
+.form-container {
+ margin-bottom: 20px;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3