修改台账树
This commit is contained in:
guanj
241
src/views/govern/sensitiveLoadMange/component/bindForm.vue
Normal file
241
src/views/govern/sensitiveLoadMange/component/bindForm.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<el-dialog class="cn-operate-dialog" draggable width="500px" v-model="dialogVisible" :title="title">
|
||||
<el-form :model="form" class="form-one" label-width="auto" ref="formRef" :rules="rules">
|
||||
<el-form-item label="治理点名称" prop="governName">
|
||||
<el-input maxlength="32" show-word-limit clearable v-model.trim="form.governName"
|
||||
placeholder="请输入治理点名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="治理类型" prop="governType">
|
||||
<el-select v-model="form.governType" placeholder="请选择治理类型" style="width: 100%">
|
||||
<el-option label="稳态" value="harmonic" />
|
||||
<el-option label="暂态" value="transient" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="治理方法" prop="governMethod">
|
||||
<el-input maxlength="32" show-word-limit clearable v-model="form.governMethod"
|
||||
placeholder="例: 250A APF 或 100kVar SVG" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="治理前-监测点">
|
||||
<el-tree-select v-model="form.governBefore" :data="lineTreeData" clearable :props="treeProps" filterable
|
||||
:filter-node-method="filterNode" check-strictly default-expand-all placeholder="请选择监测点"
|
||||
style="width: 100%">
|
||||
<template #default="{ data }">
|
||||
<span>{{ data.name }}{{ getBoundSuffix(data) }}</span>
|
||||
</template>
|
||||
</el-tree-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="治理后-监测点">
|
||||
<el-tree-select v-model="form.governAfter" :data="lineTreeData" clearable :props="treeProps" filterable
|
||||
:filter-node-method="filterNode" check-strictly default-expand-all placeholder="请选择监测点"
|
||||
style="width: 100%">
|
||||
<template #default="{ data }">
|
||||
<span>{{ data.name }}{{ getBoundSuffix(data) }}</span>
|
||||
</template>
|
||||
</el-tree-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number style="width: 100%" :min="0" v-model.number="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, inject, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { isLineTreeLeaf } from '@/components/tree/govern/lineTreeUtils'
|
||||
import { createTreeFilterNode } from '@/components/tree/govern/treeFilterUtils'
|
||||
import { getLineTree } from '@/api/cs-device-boot/csLedger'
|
||||
import { saveGovernPlan, updateGovernPlan } from '@/api/cs-device-boot/sensitiveLoadMange'
|
||||
|
||||
const props = defineProps<{
|
||||
pid: string | number
|
||||
}>()
|
||||
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const formRef = ref()
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('新增')
|
||||
const lineTreeData = ref<any[]>([])
|
||||
const filterNode = createTreeFilterNode()
|
||||
|
||||
const treeProps = {
|
||||
value: 'id',
|
||||
label: 'name',
|
||||
children: 'children',
|
||||
disabled: 'disabled'
|
||||
}
|
||||
|
||||
const form = reactive<any>({
|
||||
id: null,
|
||||
pid: null,
|
||||
governName: '',
|
||||
governMethod: '',
|
||||
governType: '',
|
||||
governBefore: '',
|
||||
governAfter: '',
|
||||
sort: 100
|
||||
})
|
||||
|
||||
const isEmptyPoint = (val: any) => val === '' || val === null || val === undefined
|
||||
|
||||
const getGovernPointError = (): string => {
|
||||
const beforeEmpty = isEmptyPoint(form.governBefore)
|
||||
const afterEmpty = isEmptyPoint(form.governAfter)
|
||||
|
||||
if (beforeEmpty && afterEmpty) return ''
|
||||
if (beforeEmpty) return '已选择治理后监测点，请同时选择治理前监测点'
|
||||
if (afterEmpty) return '已选择治理前监测点，请同时选择治理后监测点'
|
||||
if (form.governBefore === form.governAfter) return '治理前与治理后监测点不能相同'
|
||||
return ''
|
||||
}
|
||||
|
||||
const rules = {
|
||||
governName: [{ required: true, message: '请输入治理点名称', trigger: 'blur' }],
|
||||
governMethod: [{ required: true, message: '请输入治理方法', trigger: 'blur' }],
|
||||
governType: [{ required: true, message: '请选择治理类型', trigger: 'change' }],
|
||||
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
const getBoundSuffix = (node: any) => {
|
||||
if (node?.sensitiveUserName) {
|
||||
return `(已绑_${node.sensitiveUserName}_${node.governPlanName || ''})`
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
const findTreeNodeById = (nodes: any[], id: any): any => {
|
||||
for (const node of nodes) {
|
||||
if (node.id === id) return node
|
||||
if (node.children?.length) {
|
||||
const found = findTreeNodeById(node.children, id)
|
||||
if (found) return found
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
/** 监测点是否已被其他方案绑定（编辑时排除当前方案） */
|
||||
const isPointBoundConflict = (node: any) => {
|
||||
if (!node?.sensitiveUserName) return false
|
||||
if (form.id && (node.governPlanId === form.id || node.governPlanName === form.governName)) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
const getBoundPointError = (): string => {
|
||||
const messages: string[] = []
|
||||
|
||||
if (!isEmptyPoint(form.governBefore)) {
|
||||
const node = findTreeNodeById(lineTreeData.value, form.governBefore)
|
||||
if (node && isPointBoundConflict(node)) {
|
||||
messages.push(`治理前监测点「${node.name}」${getBoundSuffix(node)}`)
|
||||
}
|
||||
}
|
||||
if (!isEmptyPoint(form.governAfter)) {
|
||||
const node = findTreeNodeById(lineTreeData.value, form.governAfter)
|
||||
if (node && isPointBoundConflict(node)) {
|
||||
messages.push(`治理后监测点「${node.name}」${getBoundSuffix(node)}`)
|
||||
}
|
||||
}
|
||||
|
||||
return messages.length ? `${messages.join('；')}，请选择未绑定的监测点` : ''
|
||||
}
|
||||
|
||||
const markNonLeafDisabled = (nodes: any[] = []) => {
|
||||
nodes.forEach(node => {
|
||||
node.disabled = !isLineTreeLeaf(node)
|
||||
if (node.children?.length) {
|
||||
markNonLeafDisabled(node.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const loadLineTree = () => {
|
||||
getLineTree({ type: 'engineering' }).then(res => {
|
||||
const data = JSON.parse(JSON.stringify(res.data || []))
|
||||
markNonLeafDisabled(data)
|
||||
lineTreeData.value = data
|
||||
})
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
form.id = null
|
||||
form.pid = props.pid
|
||||
form.governName = ''
|
||||
form.governMethod = ''
|
||||
form.governType = ''
|
||||
form.governBefore = ''
|
||||
form.governAfter = ''
|
||||
form.sort = 100
|
||||
}
|
||||
|
||||
const open = (text: string, data?: anyObj) => {
|
||||
loadLineTree()
|
||||
formRef.value?.resetFields()
|
||||
title.value = text
|
||||
dialogVisible.value = true
|
||||
resetForm()
|
||||
if (data) {
|
||||
form.id = data.id
|
||||
form.governName = data.governName ?? ''
|
||||
form.governMethod = data.governMethod ?? ''
|
||||
form.governType = data.governType ?? ''
|
||||
form.governBefore = data.governBeforeId ?? data.governBefore ?? ''
|
||||
form.governAfter = data.governAfterId ?? data.governAfter ?? ''
|
||||
form.sort = data.sort ?? 100
|
||||
}
|
||||
}
|
||||
|
||||
const submit = () => {
|
||||
const pointError = getGovernPointError()
|
||||
if (pointError) {
|
||||
ElMessage.warning(pointError)
|
||||
return
|
||||
}
|
||||
|
||||
const boundError = getBoundPointError()
|
||||
if (boundError) {
|
||||
ElMessage.warning(boundError)
|
||||
return
|
||||
}
|
||||
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (!valid) return
|
||||
const payload = {
|
||||
id: form.id,
|
||||
pid: props.pid,
|
||||
governName: form.governName,
|
||||
governMethod: form.governMethod,
|
||||
governType: form.governType,
|
||||
governBefore: form.governBefore,
|
||||
governAfter: form.governAfter,
|
||||
sort: form.sort
|
||||
}
|
||||
if (form.id) {
|
||||
await updateGovernPlan(payload)
|
||||
} else {
|
||||
await saveGovernPlan(payload)
|
||||
}
|
||||
ElMessage.success('操作成功')
|
||||
tableStore.index()
|
||||
dialogVisible.value = false
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
Reference in New Issue
Block a user