1.行政区划：（高德，腾讯） 使用elementUI的树型控件

陶杰

2024-12-24 68701c15efe225d38348c0b1c0d65aac98c03889

1.行政区划：（高德，腾讯） 使用elementUI的树型控件

 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>

 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>