144 lines
5.0 KiB
Vue
144 lines
5.0 KiB
Vue
<template>
|
|
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" width="500px" :title="title" @close="cancel">
|
|
<div style="display: flex">
|
|
<el-form :inline="false" :model="form" label-width="auto" :rules="rules" ref="formRef" style="flex: 1">
|
|
<el-form-item class="top" label="上级树">
|
|
<el-cascader
|
|
v-model="form.system"
|
|
:options="customDeptOption"
|
|
:props="props"
|
|
clearable
|
|
filterable
|
|
placeholder="请选择上级树"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item class="top" label="树名称" prop="name">
|
|
<el-input v-model="form.name" placeholder="请输入组件名称"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item class="top" label="树排序" prop="sort">
|
|
<el-input v-model="form.sort" placeholder="请输入组件排序"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="cancel">取消</el-button>
|
|
<el-button type="primary" @click="submit">确认</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref, inject, onMounted, type Component, defineAsyncComponent, h, markRaw } from 'vue'
|
|
import { reactive } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { useDictData } from '@/stores/dictData'
|
|
import { getFatherComponent, componentAdd, componentEdit } from '@/api/user-boot/dept'
|
|
|
|
import { componentTree } from '@/api/user-boot/user'
|
|
import { pid } from 'process'
|
|
const dictData = useDictData()
|
|
const emit = defineEmits(['cancel', 'submit'])
|
|
const dialogVisible = ref(false)
|
|
const title = ref('')
|
|
const formRef = ref()
|
|
// 注意不要和表单ref的命名冲突
|
|
const form = ref<anyObj>({
|
|
name: '',
|
|
sort: 100,
|
|
system: [],
|
|
timeKey: '3',
|
|
code: 'base',
|
|
|
|
})
|
|
const props = { label: 'name', value: 'id', checkStrictly: true }
|
|
const rules = {
|
|
name: [{ required: true, message: '请输输入树名称', trigger: 'blur' }],
|
|
system: [{ required: true, message: '请先择父组件节点', trigger: 'change' }],
|
|
|
|
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
|
|
}
|
|
const customDeptOption: any = ref([])
|
|
onMounted(() => {})
|
|
|
|
const open = (text: string, data?: anyObj) => {
|
|
getFather()
|
|
title.value = text
|
|
dialogVisible.value = true
|
|
if (data) {
|
|
let Data = JSON.parse(JSON.stringify(data))
|
|
form.value.system = Data.systemType
|
|
form.value.name = Data.name
|
|
form.value.sort = Data.sort
|
|
}
|
|
}
|
|
// 查询父节点
|
|
const getFather = () => {
|
|
componentTree().then(res => {
|
|
customDeptOption.value = deletePathNotNull(JSON.parse(JSON.stringify(res.data)))
|
|
})
|
|
}
|
|
|
|
// 递归删除path不为null的数据
|
|
function deletePathNotNull(data: any) {
|
|
// 若为数组，遍历处理每个元素
|
|
if (Array.isArray(data)) {
|
|
const filtered = []
|
|
for (let item of data) {
|
|
// 递归处理子节点
|
|
if (item.children && item.children.length > 0) {
|
|
item.children = deletePathNotNull(item.children)
|
|
}
|
|
// 仅保留path为null或空字符串的节点
|
|
if (item.path === null || item.path === '') {
|
|
filtered.push(item)
|
|
}
|
|
}
|
|
return filtered
|
|
}
|
|
// 若为单个对象（递归子节点时用）
|
|
if (typeof data === 'object' && data !== null) {
|
|
if (data.children && data.children.length > 0) {
|
|
data.children = deletePathNotNull(data.children)
|
|
}
|
|
return data.path === null || data.path === '' ? data : null
|
|
}
|
|
return data
|
|
}
|
|
const submit = () => {
|
|
formRef.value.validate(async (valid: boolean) => {
|
|
if (valid) {
|
|
if (title.value == '新增树') {
|
|
await componentAdd({
|
|
...form.value,
|
|
systemType: form.value.system[0],
|
|
pid: form.value.system?.at(-1)
|
|
}).then(res => {
|
|
ElMessage.success('新增成功!')
|
|
emit('submit')
|
|
cancel()
|
|
})
|
|
} else {
|
|
await componentEdit({
|
|
...form.value,
|
|
systemType: form.value.system[0],
|
|
pid: form.value.system[1]
|
|
}).then(res => {
|
|
ElMessage.success('修改成功!')
|
|
emit('submit')
|
|
cancel()
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
const cancel = () => {
|
|
emit('cancel')
|
|
dialogVisible.value = false
|
|
}
|
|
defineExpose({ open })
|
|
</script>
|