<template>
|
<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 {
|
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,
|
}
|
},
|
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
|
},
|
|
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>
|
