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

陶杰

2024-12-24 68701c15efe225d38348c0b1c0d65aac98c03889

 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>