243 lines
9.0 KiB
Vue
243 lines
9.0 KiB
Vue
|
<template>
|
|||
|
|
<div class="default-main">
|
|||
|
|
<div>
|
|||
|
|
<TableHeader datePicker ref="TableHeaderRef">
|
|||
|
|
<template #select>
|
|||
|
|
<el-form-item label="用户类型">
|
|||
|
|
<el-input
|
|||
|
|
v-model="tableStore.table.params.searchValue"
|
|||
|
|
clearable
|
|||
|
|
placeholder="输入关键字筛选"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</template>
|
|||
|
|
<template #operation>
|
|||
|
|
<el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
|
|||
|
|
|
|||
|
|
</template>
|
|||
|
|
</TableHeader>
|
|||
|
|
<Table ref="tableRef" />
|
|||
|
|
<el-dialog v-model="dialogVisible" :title="title" width="600" :before-close="handleClose">
|
|||
|
|
<el-form ref="ruleFormRef" :model="form" label-width="auto" :disabled="disabled" :rules="rules">
|
|||
|
|
<el-form-item label="用户名称：" prop="name">
|
|||
|
|
<el-input v-model="form.name" clearable placeholder="请输入用户名称" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="用户类型：" prop="userType">
|
|||
|
|
<el-select v-model="form.userType" clearable collapse-tagsplaceholder="请选择用户类型">
|
|||
|
|
<el-option v-for="item in uesrList" :key="item.id" :label="item.name" :value="item.id" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="电压等级：" prop="level">
|
|||
|
|
<el-select v-model="form.level" clearable collapse-tags placeholder="请选择电压等级">
|
|||
|
|
<el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="用户协议容量(MVA)：" prop="mav1">
|
|||
|
|
<el-input v-model="form.mav1" clearable placeholder="请输入用户协议容量" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="拟接入容量(MVA)：" prop="mav2">
|
|||
|
|
<el-input v-model="form.mav2" clearable placeholder="请输入拟接入容量" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="区域">
|
|||
|
|
<Area v-model="form.deptIndex" style="width: 100%" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="详细地址：" prop="detailed">
|
|||
|
|
<el-input
|
|||
|
|
clearable
|
|||
|
|
v-model="form.detailed"
|
|||
|
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
|||
|
|
type="textarea"
|
|||
|
|
placeholder="请输入详细地址"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
|
|||
|
|
<template #footer v-if="!disabled">
|
|||
|
|
<div class="dialog-footer">
|
|||
|
|
<el-button @click="handleClose">取消</el-button>
|
|||
|
|
<el-button type="primary" @click="onSubmit">确定</el-button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, onMounted, provide, reactive } from 'vue'
|
|||
|
|
import TableStore from '@/utils/tableStore'
|
|||
|
|
import Table from '@/components/table/index.vue'
|
|||
|
|
import TableHeader from '@/components/table/header/index.vue'
|
|||
|
|
import Area from '@/components/form/area/index.vue'
|
|||
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|||
|
|
import { mainHeight } from '@/utils/layout'
|
|||
|
|
import { useDictData } from '@/stores/dictData'
|
|||
|
|
defineOptions({
|
|||
|
|
name: 'estimate/userManagement'
|
|||
|
|
})
|
|||
|
|
const dictData = useDictData()
|
|||
|
|
const levelList = dictData.getBasicData('Dev_Voltage_Stand')
|
|||
|
|
const uesrList = dictData.getBasicData('Interference_Source')
|
|||
|
|
const dialogVisible = ref(false)
|
|||
|
|
const disabled = ref(false)
|
|||
|
|
const TableHeaderRef = ref()
|
|||
|
|
const title = ref('')
|
|||
|
|
interface RuleForm {
|
|||
|
|
name: string
|
|||
|
|
level: string
|
|||
|
|
deptIndex: string
|
|||
|
|
userType: string
|
|||
|
|
type: string
|
|||
|
|
mav1: string
|
|||
|
|
mav2: string
|
|||
|
|
user: string
|
|||
|
|
time: string
|
|||
|
|
detailed: string
|
|||
|
|
}
|
|||
|
|
const form = ref<RuleForm>({
|
|||
|
|
name: '',
|
|||
|
|
level: '',
|
|||
|
|
deptIndex: dictData.state.area[0].id,
|
|||
|
|
userType: '光伏电站',
|
|||
|
|
type: '光伏电站',
|
|||
|
|
mav1: '100',
|
|||
|
|
mav2: '100',
|
|||
|
|
user: 'Admin',
|
|||
|
|
time: '2024-01-03',
|
|||
|
|
detailed: '详细地址'
|
|||
|
|
})
|
|||
|
|
const rules = {
|
|||
|
|
name: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
|
|||
|
|
userType: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
|
|||
|
|
level: [{ required: true, message: '请选择电压等级', trigger: 'change' }],
|
|||
|
|
mav1: [{ required: true, message: '请输入用户协议容量', trigger: 'blur' }],
|
|||
|
|
mav2: [{ required: true, message: '请输入拟接入容量', trigger: 'blur' }],
|
|||
|
|
detailed: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
|
|||
|
|
}
|
|||
|
|
const ruleFormRef = ref()
|
|||
|
|
const tableStore = new TableStore({
|
|||
|
|
url: '/advance-boot/process/querySagEventsPage',
|
|||
|
|
method: 'POST',
|
|||
|
|
column: [
|
|||
|
|
{ width: '60', type: 'checkbox' },
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
field: 'index',
|
|||
|
|
title: '序号',
|
|||
|
|
width: '60',
|
|||
|
|
formatter: (row: any) => {
|
|||
|
|
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{ field: 'name', title: '用户名称' },
|
|||
|
|
{ field: 'type', title: '用户类型' },
|
|||
|
|
|
|||
|
|
{ field: 'Area', title: '所属区域' },
|
|||
|
|
{ field: 'level', title: '电压等级(V)' },
|
|||
|
|
{ field: 'mav1', title: '用户协议容量(MVA)' },
|
|||
|
|
{ field: 'mav2', title: '拟接入容量(MVA)' },
|
|||
|
|
{ field: 'detailed', title: '详细地址' },
|
|||
|
|
{ field: 'user', title: '创建者' },
|
|||
|
|
{ field: 'time', title: '创建日期' },
|
|||
|
|
{
|
|||
|
|
title: '操作',
|
|||
|
|
width: '180',
|
|||
|
|
render: 'buttons',
|
|||
|
|
buttons: [
|
|||
|
|
{
|
|||
|
|
name: 'edit',
|
|||
|
|
title: '查看',
|
|||
|
|
type: 'primary',
|
|||
|
|
|
|||
|
|
icon: 'el-icon-Plus',
|
|||
|
|
render: 'basicButton',
|
|||
|
|
click: row => {
|
|||
|
|
if (ruleFormRef.value) ruleFormRef.value.resetFields()
|
|||
|
|
|
|||
|
|
disabled.value = true
|
|||
|
|
title.value = '查看承载能力预评估用户'
|
|||
|
|
form.value = JSON.parse(JSON.stringify(row))
|
|||
|
|
dialogVisible.value = true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'edit',
|
|||
|
|
title: '编辑',
|
|||
|
|
type: '',
|
|||
|
|
icon: 'el-icon-Plus',
|
|||
|
|
render: 'basicButton',
|
|||
|
|
click: row => {
|
|||
|
|
if (ruleFormRef.value) ruleFormRef.value.resetFields()
|
|||
|
|
disabled.value = false
|
|||
|
|
title.value = '编辑承载能力预评估用户'
|
|||
|
|
form.value = JSON.parse(JSON.stringify(row))
|
|||
|
|
dialogVisible.value = true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'del',
|
|||
|
|
text: '删除',
|
|||
|
|
type: 'danger',
|
|||
|
|
icon: 'el-icon-Delete',
|
|||
|
|
render: 'confirmButton',
|
|||
|
|
popconfirm: {
|
|||
|
|
confirmButtonText: '确认',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
confirmButtonType: 'danger',
|
|||
|
|
title: '确定删除？'
|
|||
|
|
},
|
|||
|
|
click: row => {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
loadCallback: () => {
|
|||
|
|
tableStore.table.data = [
|
|||
|
|
{
|
|||
|
|
name: '光伏电站用户1',
|
|||
|
|
type: '光伏电站',
|
|||
|
|
Area: '中国',
|
|||
|
|
level: '220',
|
|||
|
|
mav1: '100',
|
|||
|
|
mav2: '100',
|
|||
|
|
detailed: '详情',
|
|||
|
|
user: 'Admin',
|
|||
|
|
time: '2024-01-03'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
tableStore.table.params.searchValue = ''
|
|||
|
|
|
|||
|
|
provide('tableStore', tableStore)
|
|||
|
|
onMounted(() => {
|
|||
|
|
TableHeaderRef.value.setDatePicker([{ label: '周', value: 4 }])
|
|||
|
|
TableHeaderRef.value.setInterval(4)
|
|||
|
|
tableStore.index()
|
|||
|
|
})
|
|||
|
|
// 新增
|
|||
|
|
const add = () => {
|
|||
|
|
disabled.value = false
|
|||
|
|
title.value = '新增承载能力预评估用户'
|
|||
|
|
dialogVisible.value = true
|
|||
|
|
}
|
|||
|
|
// 保存
|
|||
|
|
const onSubmit = () => {
|
|||
|
|
ruleFormRef.value.validate((valid: boolean) => {
|
|||
|
|
if (valid) {
|
|||
|
|
if (title.value == '新增承载能力预评估用户') {
|
|||
|
|
} else if (title.value == '编辑承载能力预评估用户') {
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 取消
|
|||
|
|
const handleClose = () => {
|
|||
|
|
ruleFormRef.value.resetFields()
|
|||
|
|
dialogVisible.value = false
|
|||
|
|
}
|
|||
|
|
</script>
|