242 lines
8.3 KiB
Vue
242 lines
8.3 KiB
Vue
<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>
|