<template>
|
<div class="app-container">
|
<el-row>
|
<el-col :span="10">
|
<el-tree :expand-on-click-node="false" :props="defaultProps" lazy :load="loadNode" @node-click="handleNodeClick" />
|
</el-col>
|
<el-col :span="12" v-if="formData.isOpenFormData">
|
<el-form ref="formRef" :model="data" :rules="formData.rules">
|
<el-form-item label="区划编号">
|
<el-input v-model="data.code"></el-input>
|
</el-form-item>
|
<el-form-item label="区划名称">
|
<el-input v-model="data.name"></el-input>
|
</el-form-item>
|
<el-form-item label="区划等级">
|
<el-radio-group v-model="data.regionLevel">
|
<el-radio :label="dict.value" v-for="dict in region_level" :key="dict.value">{{ dict.label }}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="区划排序">
|
<el-input-number v-model="data.sort" :min="0" :max="100" :step="1"></el-input-number>
|
</el-form-item>
|
<el-form-item label="备注">
|
<el-input v-model="data.remark" placeholder="备注" style="width: 300px" />
|
</el-form-item>
|
</el-form>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { getRegionThreeList, getRegionInfo, saveRegion, updateRegion, deleteRegion } from "@/api/system/region";
|
import { sysRegionDTO, TypesysRegionDTO } from "@/types/DTO/sysRegionDTO";
|
import type Node from "element-plus/es/components/tree/src/model/node";
|
import { TypeThreeDTO } from "@/types/commons/three";
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
const { region_level } = proxy.useDict("region_level");
|
//#region 树形查询 /配置
|
|
const queryParams = reactive({
|
//查询配置参数
|
id: "",
|
parentId: "",
|
title: "",
|
});
|
|
const defaultProps = {
|
children: "zones",
|
label: "title",
|
isLeaf: "hasChildren",
|
};
|
|
const loadNode = async (node: Node, resolve: (data: TypeThreeDTO[]) => void) => {
|
if (node.level > 0) {
|
queryParams.parentId = node.data.id;
|
}
|
let list = await getDataList();
|
return resolve(list);
|
};
|
const getDataList = async () => {
|
let list: TypeThreeDTO[] = [];
|
await getRegionThreeList(queryParams).then((res) => {
|
if (res.code == 200) {
|
for (const el of res.data) {
|
el.hasChildren = !el.hasChildren;
|
}
|
list = res.data;
|
}
|
});
|
return list;
|
};
|
|
//#endregion
|
|
//#region 操作
|
|
/**
|
* 树形数据点击事件/获取详情
|
*/
|
const handleNodeClick = async (e: Node) => {
|
// console.log("e=========>", e);
|
await getRegionInfo(e.id).then((res) => {
|
if (res.code == 200) {
|
res.data.regionLevel = res.data.regionLevel.toString();
|
formData.data = res.data;
|
formData.isOpenFormData = true;
|
}
|
});
|
};
|
|
//#endregion
|
|
//#region 新增/修改
|
|
const formData = reactive<Common.formDataType<TypesysRegionDTO>>({
|
data: {} as TypesysRegionDTO,
|
isOpenFormData: false, //是否显示新增对话框
|
dialogTitle: "", //弹窗标题
|
handleStatus: 0,
|
formRef: null,
|
rules: {
|
docTitle: [{ required: true, message: "请填写文档标题", trigger: "change" }],
|
docContent: [{ required: true, message: "请填写文档内容", trigger: "change" }],
|
docType: [{ required: true, message: "请选择文档类型", trigger: "change" }],
|
},
|
});
|
const { data, formRef } = toRefs(formData);
|
|
//#endregion
|
</script>
|
|
<style lang="scss"></style>
|
