0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 区域管理编辑和删除

This commit is contained in:
100011797 2023-10-26 13:38:53 +08:00
parent c5d70916dd
commit a38aff28d7
4 changed files with 119 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/system/Region/LeftTree/index.vue
View File

@ -106,7 +106,10 @@ const onSearch = debounce((v: string) => {
_treeData.value = filterTreeNodes(treeData.value, v);
});
const onSave = () => {};
const onSave = () => {
visible.value = false;
handleSearch()
};
const onClose = () => {
visible.value = false;

75
src/views/system/Region/Save/BuildIn.vue
View File

@ -26,20 +26,27 @@
<script lang="ts" setup>
import { getBuiltinRegionTree } from '@/api/system/region';
import { omit } from 'lodash-es';
import { onMounted, ref } from 'vue';
import { onMounted, ref, watch } from 'vue';
const props = defineProps({
value: {
type: String,
default: '',
},
name: {
type: String,
default: '',
},
children: {
type: Array,
default: () => [],
},
});
const emits = defineEmits(['update:value']);
const emits = defineEmits(['update:value', 'update:name', 'update:children']);
const features = ref<any>();
const _value = ref<string>('100000')
const features = ref<any>({});
const _value = ref<string>();
const builtInAreaList = ref<Record<string, any>[]>([]);
const _checked = ref<boolean>(false);
@ -55,23 +62,63 @@ const queryBuiltinRegionTree = async () => {
const onCheckChange = (e: any) => {
if (e.target.checked) {
emits('update:value', features.value);
emits('update:children', features.value?.children || []);
} else {
emits('update:value', omit(features.value, 'children'));
emits('update:children', []);
}
};
const getObj = (node: any): any => {
const _children = (node?.children || []).map((item: any) => {
return {
code: item.code,
name: item.name,
parentId: item.parentId,
};
});
return {
code: node.code,
name: node.name,
parentId: node.parentId,
children: _children,
};
};
const onSelect = (val: string, node: any) => {
features.value = node;
_value.value = val
if (_checked.value) {
emits('update:value', node);
} else {
emits('update:value', omit(node, 'children'));
}
features.value = getObj(node);
_value.value = val;
emits('update:name', features.value?.name);
emits('update:value', features.value?.code);
};
onMounted(() => {
queryBuiltinRegionTree();
});
watch(
() => props.value,
() => {
if (props.value) {
_value.value = props.value
} else {
emits('update:name', '中国');
emits('update:value', 100000);
}
},
{
deep: true,
immediate: true,
},
);
watch(
() => props.children,
() => {
_checked.value = !!props.children?.length
},
{
deep: true,
immediate: true,
},
);
</script>

2
src/views/system/Region/Save/TracePoint.vue
View File

@ -1,5 +1,5 @@
<template>
<j-button v-if="_value.length" type="link">请在地图上描点</j-button>
<j-button v-if="!_value.length" type="link">请在地图上描点</j-button>
<div v-else>
已完成描点<j-button type="link">编辑</j-button>
</div>

73
src/views/system/Region/Save/index.vue
View File

@ -3,7 +3,7 @@
:maskClosable="false"
width="650px"
:visible="true"
:title="!!data?.id ? '编辑区域' : '新增区域'"
:title="mode === 'edit' ? '编辑区域' : '新增区域'"
@ok="handleSave"
@cancel="handleCancel"
:confirmLoading="loading"
@ -25,22 +25,26 @@
tree-node-filter-prop="name"
/>
</j-form-item>
<j-form-item name="type" label="添加方式">
<j-form-item :name="['properties', 'type']" label="添加方式">
<j-radio-group
v-model:value="modelRef.type"
v-model:value="modelRef.properties.type"
button-style="solid"
@change="onChange"
>
<a-radio-button value="builtIn"
>内置行政区</a-radio-button
<j-radio-button value="builtin"
>内置行政区</j-radio-button
>
<a-radio-button value="Custom"
>自定义数据</a-radio-button
<j-radio-button value="Custom"
>自定义数据</j-radio-button
>
</j-radio-group>
</j-form-item>
<j-form-item v-if="modelRef.type === 'builtIn'">
<BuildIn v-model:value="modelRef.features" />
<j-form-item v-if="modelRef.properties.type === 'builtin'">
<BuildIn
v-model:value="modelRef.code"
v-model:children="modelRef.children"
v-model:name="modelRef.name"
/>
</j-form-item>
<j-form-item
label="区域名称"
@ -88,7 +92,7 @@
/>
</j-form-item>
<j-form-item
v-if="modelRef.type !== 'builtIn'"
v-if="modelRef.properties.type !== 'builtin'"
label="区划划分"
required
name="features"
@ -108,7 +112,9 @@ import {
validateName,
getRegionTree,
validateCode,
updateRegion,
} from '@/api/system/region';
import { onlyMessage } from '@/utils/comm';
const emit = defineEmits(['close', 'save']);
const props = defineProps({
@ -126,20 +132,36 @@ const loading = ref<boolean>(false);
const formRef = ref();
const modelRef = reactive({
const init = {
parentId: undefined,
id: undefined,
name: undefined,
code: undefined,
type: 'builtIn',
features: undefined,
});
children: [],
properties: {
type: 'builtin',
},
};
const modelRef = reactive(init);
watch(
() => props.data,
() => {
console.log(props.data);
Object.assign(modelRef, {});
if (props.mode === 'add' && props.data?.id) {
// 添加子
Object.assign(modelRef, {
...init,
parentId: props.data.id,
});
} else if (props.mode === 'edit') {
// 编辑
Object.assign(modelRef, props.data);
} else {
Object.assign(modelRef, init);
}
},
{ immediate: true, deep: true },
);
@ -153,6 +175,16 @@ const handleSave = () => {
.validate()
.then(async (_data: any) => {
loading.value = true;
const resp = await updateRegion({
...props.data,
...modelRef,
}).finally(() => {
loading.value = false;
});
if (resp.status === 200) {
onlyMessage('操作成功！');
emit('save');
}
})
.catch((err: any) => {
console.log('error', err);
@ -162,8 +194,8 @@ const handleSave = () => {
const vailName = async (_: Record<string, any>, value: string) => {
if (!props?.data?.id && value) {
const resp = await validateName(value, props.data.id);
if (resp.status === 200 && resp.result) {
return Promise.reject('区域名称重复');
if (resp.status === 200 && !resp.result?.passed) {
return Promise.reject(resp.result?.reason || '区域名称重复');
} else {
return Promise.resolve();
}
@ -175,8 +207,8 @@ const vailName = async (_: Record<string, any>, value: string) => {
const vailCode = async (_: Record<string, any>, value: string) => {
if (!props?.data?.id && value) {
const resp = await validateCode(value, props.data.id);
if (resp.status === 200 && resp.result) {
return Promise.reject('行政区域代码重复');
if (resp.status === 200 && !resp.result?.passed) {
return Promise.reject(resp.result?.reason || '行政区域代码重复');
} else {
return Promise.resolve();
}
@ -186,9 +218,8 @@ const vailCode = async (_: Record<string, any>, value: string) => {
};
const onChange = () => {
// console.log(e.target.value)
modelRef.features = undefined
}
modelRef.features = undefined;
};
const handleSearch = async () => {
const resp = await getRegionTree();