Files
admin-sjzx/src/views/pqs/supervise/plan/components/addForm.vue

715 lines
26 KiB
Vue

<template>
<el-dialog
v-model="dialogFormVisible"
:title="title"
width="65%"
:append-to-body="true"
:before-close="close"
:close-on-click-modal="false"
:lazy="true"
draggable
custom-class="fixed-dialog"
>
<el-form
:model="form"
:validate-on-rule-change="false"
:scroll-to-error="true"
:rules="rules"
ref="ruleFormRef"
label-width="auto"
class="form-two"
>
<el-form-item for="-" label="计划名称:" prop="workPlanName">
<el-input v-model="form.workPlanName" autocomplete="off" placeholder="请输入计划名称" />
</el-form-item>
<el-form-item for="-" label="监督单位:" prop="supvOrgId">
<Area ref="areaRef" v-model="form.supvOrgId" />
</el-form-item>
<el-form-item for="-" label="计划编制单位:" prop="planOrgId">
<Area ref="areaRef" v-model="form.planOrgId" />
</el-form-item>
<el-form-item for="-" label="监督类型:" prop="supvType">
<el-select v-model="form.supvType" clearable style="width: 100%" placeholder="请选择监督类型">
<el-option
v-for="item in supvTypeList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item for="-" label="监督阶段:" prop="supvStage">
<el-select v-model="form.supvStage" clearable style="width: 100%" placeholder="请选择监督阶段">
<el-option
v-for="item in supvStageList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item for="-" label="计划监督时间:" prop="planSupvDate">
<el-date-picker
style="width: 100%"
v-model="form.planSupvDate"
type="datetime"
format="YYYY-MM-DD hh:mm:ss"
value-format="YYYY-MM-DD hh:mm:ss"
placeholder="请选择计划监督时间"
/>
</el-form-item>
<el-form-item for="-" label="监督对象类型:" prop="supvObjType">
<el-select v-model="form.supvObjType" clearable style="width: 100%" placeholder="请选择监督对象类型">
<el-option
v-for="item in supvObjTypeList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item for="-" label="监督对象名称:" prop="supvObjName">
<el-input v-model="form.supvObjName" autocomplete="off" placeholder="请输入监督对象名称" />
</el-form-item>
<el-form-item for="-" label="监督对象电压等级:" prop="objVoltageLevel">
<el-select
v-model="form.objVoltageLevel"
clearable
style="width: 100%"
placeholder="请选择监督对象电压等级"
>
<el-option
v-for="item in voltageLevelList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item for="-" label="监督对象属性:" prop="objType">
<el-select v-model="form.objType" clearable style="width: 100%" placeholder="请选择监督对象属性">
<el-option
v-for="item in objTypeList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item for="-" label="监督对象属性名称:" prop="objTypeName">
<el-input v-model="form.objTypeName" autocomplete="off" placeholder="请输入监督对象属性名称" />
</el-form-item>
<el-form-item for="-" label="监督对象协议容量:" prop="objCapacity">
<el-input
oninput="value=value.replace(/[^0-9.]/g,'')"
v-model="form.objCapacity"
autocomplete="off"
placeholder="请输入监督对象监督对象协议容量"
>
<template #append>MVA</template>
</el-input>
</el-form-item>
<el-form-item for="-" label="监督对象关联电站:" prop="substationName">
<el-input v-model="form.substationName" autocomplete="off" placeholder="请输入监督对象关联电站" />
</el-form-item>
<el-form-item for="-" label="监督对象关联电站电压等级:" prop="substationVoltageLevel">
<el-select
v-model="form.substationVoltageLevel"
clearable
style="width: 100%"
placeholder="请选择监督对象关联电站电压等级"
>
<el-option
v-for="item in voltageLevelList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item for="-" label="实施状态:" prop="effectStatus">
<el-select v-model="form.effectStatus" clearable style="width: 100%" placeholder="请选择实施状态">
<el-option
v-for="item in effectStatusList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item for="-" label="实施人员:">
<el-select v-model="form.effectUserId" clearable style="width: 100%" placeholder="请选择实施人员">
<el-option
v-for="item in effectUserIdList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item for="-" label="开始实施时间:">
<el-date-picker
style="width: 100%"
v-model="form.effectStartTime"
type="datetime"
format="YYYY-MM-DD hh:mm:ss"
value-format="YYYY-MM-DD hh:mm:ss"
placeholder="请选择开始实施时间"
/>
</el-form-item>
<el-form-item for="-" label="结束实施时间:">
<el-date-picker
style="width: 100%"
v-model="form.effectEndTime"
type="datetime"
format="YYYY-MM-DD hh:mm:ss"
value-format="YYYY-MM-DD hh:mm:ss"
placeholder="请选择结束实施时间"
/>
</el-form-item>
<el-form-item for="-" label="报告出具时间:">
<el-date-picker
style="width: 100%"
v-model="form.reportIssueTime"
type="datetime"
format="YYYY-MM-DD hh:mm:ss"
value-format="YYYY-MM-DD hh:mm:ss"
placeholder="请选择报告出具时间"
/>
</el-form-item>
<el-form-item for="-" label="电能质量问题发生时间:">
<el-date-picker
style="width: 100%"
v-model="form.problemOcTime"
type="datetime"
format="YYYY-MM-DD hh:mm:ss"
value-format="YYYY-MM-DD hh:mm:ss"
placeholder="请选择电能质量问题发生时间"
/>
</el-form-item>
<el-form-item for="-" label="计划状态:">
<el-select v-model="form.planStatus" clearable style="width: 100%" placeholder="请选择计划状态">
<el-option
v-for="item in planStatusList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item for="-" label="其他要求:" style="width: 100%">
<el-input
type="textarea"
v-model="form.otherRemark"
autocomplete="off"
placeholder="请输入其他要求"
style="width: 100%"
/>
</el-form-item>
<el-form-item
for="-"
v-if="false"
label="盖章报告:"
class="uploadFile"
prop="informationSecurityTestReport"
>
<el-upload
v-model:file-list="form.informationSecurityTestReport"
ref="uploadRef"
action=""
:accept="acceptType"
:limit="1"
:on-exceed="handleExceed"
:on-change="choose"
:auto-upload="false"
:on-progress="uploadFileName('informationSecurityTestReport')"
>
<template #trigger>
<el-button type="primary">上传文件</el-button>
</template>
</el-upload>
</el-form-item>
<el-form-item
for="-"
v-if="false"
label="佐证材料:"
class="uploadFile"
prop="acceptanceInspectionReportSingle"
>
<el-upload
v-model:file-list="form.acceptanceInspectionReportSingle"
ref="uploadRef"
action=""
:accept="acceptType"
:limit="1"
:on-exceed="handleExceed"
:on-change="choose"
:auto-upload="false"
:on-progress="uploadFileName('acceptanceInspectionReportSingle')"
>
<template #trigger>
<el-button type="primary">上传文件</el-button>
</template>
</el-upload>
</el-form-item>
<el-form-item
for="-"
v-if="false"
label="计划变更材料:"
class="uploadFile"
prop="acceptanceInspectionReport"
>
<el-upload
v-model:file-list="form.acceptanceInspectionReport"
ref="uploadRef"
action=""
:accept="acceptType"
:limit="1"
:on-exceed="handleExceed"
:on-change="choose"
:auto-upload="false"
:on-progress="uploadFileName('acceptanceInspectionReport')"
>
<template #trigger>
<el-button type="primary">上传文件</el-button>
</template>
</el-upload>
</el-form-item>
<el-form-item
for="-"
v-if="false"
label="告预警单材料:"
class="uploadFile"
prop="typeExperimentReport"
:show-message="false"
>
<el-upload
v-model:file-list="form.typeExperimentReport"
ref="uploadRef"
action=""
:accept="acceptType"
:limit="1"
:on-exceed="handleExceed"
:on-change="choose"
:auto-upload="false"
:on-progress="uploadFileName('typeExperimentReport')"
>
<template #trigger>
<el-button type="primary">上传文件</el-button>
</template>
</el-upload>
</el-form-item>
<el-form-item
for="-"
v-if="false"
label="告预警单反馈材料:"
class="uploadFile"
prop="factoryInspectionReport"
>
<el-upload
v-model:file-list="form.factoryInspectionReport"
ref="uploadRef"
action=""
:accept="acceptType"
:limit="1"
:on-exceed="handleExceed"
:on-change="choose"
:auto-upload="false"
:on-progress="uploadFileName('factoryInspectionReport')"
>
<template #trigger>
<el-button type="primary">上传文件</el-button>
</template>
</el-upload>
</el-form-item>
<el-form-item
for="-"
v-if="false"
label="评估报告:"
class="uploadFile"
prop="performanceTestReport"
:show-message="false"
>
<el-upload
v-model:file-list="form.performanceTestReport"
ref="uploadRef"
action=""
:accept="acceptType"
:limit="1"
:on-exceed="handleExceed"
:on-change="choose"
:auto-upload="false"
:on-progress="uploadFileName('performanceTestReport')"
>
<template #trigger>
<el-button type="primary">上传文件</el-button>
</template>
</el-upload>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="close()">取消</el-button>
<el-button type="primary" @click="confirmForm()">确定</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, onMounted, defineExpose, defineEmits, watch } from 'vue'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { genFileId, ElMessage } from 'element-plus'
import { useDictData } from '@/stores/dictData'
import { useAdminInfo } from '@/stores/adminInfo'
import { uploadFile } from '@/api/system-boot/file'
import { addPlanFormData, getUserByDeptId, getPlanDetailsById } from '@/api/supervision-boot/plan/index'
import Area from '@/components/form/area/index.vue'
const emits = defineEmits(['onSubmit'])
const dictData = useDictData()
const dialogFormVisible = ref(false)
const form: any = ref({})
const title = ref('')
const ruleFormRef = ref(null)
// .xls,.xlsx
const acceptType = ''
//获取登陆用户姓名和部门
const adminInfo = useAdminInfo()
//字典获取监督类型
const supvTypeList = dictData.getBasicData('supv_type')
//字典获取监督阶段
const supvStageList = dictData.getBasicData('supv_stage')
//字典获取监督对象类型
const supvObjTypeList = dictData.getBasicData('supv_obj_type')
//字典获取实施状态
const effectStatusList = dictData.getBasicData('effect_status')
//字典获取计划状态
const planStatusList = dictData.getBasicData('plan_status')
//字典获取电压等级
const voltageLevelList = dictData.getBasicData('Dev_Voltage_Stand')
//监督对象属性
const objTypeList = [
{
id: '1',
name: '在运站'
},
{
id: '2',
name: '新(改、扩)建站'
}
]
const effectUserIdList: any = ref([])
//根据当前登陆用户的部门id查询实施人员
const getEffectUserList = () => {
getUserByDeptId({ deptId: adminInfo.$state.deptId }).then(res => {
effectUserIdList.value = res.data
})
}
getEffectUserList()
const resetForm = () => {
form.value = {
workPlanName: '', //计划名称
supvOrgId: '', //监督单位
planOrgId: '', //计划编制单位
supvType: supvTypeList[0].id, //监督类型
supvStage: supvStageList[0]?.id, //监督阶段
planSupvDate: '', //计划监督时间
supvObjType: supvObjTypeList[0]?.id, //监督对象类型
supvObjName: '', //监督对象名称
objVoltageLevel: voltageLevelList[0].id, // 监督对象电压等级
objType: objTypeList[0].id, //监督对象属性
objTypeName: '', //监督对象属性名称
objCapacity: '0', //监督对象协议容量
substationName: '', //监督对象关联电站
substationVoltageLevel: voltageLevelList[0].id, // 监督对象关联电站电压等级
effectStatus: effectStatusList[0].id, //实施状态
effectStartTime: '', //开始实施时间
effectEndTime: '', //结束实施时间
reportIssueTime: '', //报告出具时间
problemOcTime: '', //电能质量问题发生时间
effectUserId: effectUserIdList.value[0]?.id, //实施人员
planStatus: planStatusList[0].id, //计划状态
otherRemark: '', //其他要求
planUserId: '' //计划编制人,挡墙登陆用户
// sealReport: '', //盖章报告
// evidenceMaterials:'', //佐证材料
// planChangeMaterials: '', //计划变更材料
// alarmMaterials:'', //告预警单材料
// alarmFeedbackMaterials: '', //告预警单反馈材料
// assessReport:'' //评估报告
}
}
//初始化数据
resetForm()
//定义校验规则
const rules = ref({
//基础信息
workPlanName: [
{
required: true,
message: '请输入计划名称',
trigger: 'blur'
}
],
supvOrgId: [
{
required: true,
message: '请选择监督单位',
trigger: 'change'
}
],
planOrgId: [
{
required: true,
message: '请选择计划编制单位',
trigger: 'change'
}
],
supvType: [
{
required: true,
message: '请选择监督类型',
trigger: 'change'
}
],
supvStage: [
{
required: true,
message: '请选择监督阶段',
trigger: 'change'
}
],
planSupvDate: [
{
required: true,
message: '请选择计划监督时间',
trigger: 'change'
}
],
supvObjType: [
{
required: true,
message: '请选择监督对象类型',
trigger: 'change'
}
],
supvObjName: [
{
required: true,
message: '请输入监督对象名称',
trigger: 'blur'
}
],
objVoltageLevel: [
{
required: true,
message: '请选择监督对象电压等级',
trigger: 'change'
}
],
objType: [
{
required: true,
message: '请选择监督对象属性',
trigger: 'change'
}
],
objTypeName: [
{
required: false,
message: '请输入监督对象属性名称',
trigger: 'blur'
}
],
objCapacity: [
{
required: true,
message: '请输入监督对象监督对象协议容量',
trigger: 'blur'
}
],
substationName: [
{
required: true,
message: '请输入监督对象关联电站',
trigger: 'blur'
}
],
substationVoltageLevel: [
{
required: true,
message: '请选择监督对象关联电站电压等级',
trigger: 'change'
}
],
effectStatus: [
{
required: true,
message: '请选择实施状态',
trigger: 'change'
}
]
})
watch(
() => form.value,
(val, oldVal) => {},
{
deep: true,
immediate: true
}
)
const open = (row: any) => {
title.value = row.title
dialogFormVisible.value = true
if (row.row) {
getPlanDetailsById({ id: '861efbc90d1fae8e276f477081dd85fe' }).then(res => {
form.value = res.data
})
}
}
const close = () => {
//重置表单内容
//取消表单校验状态
ruleFormRef.value && ruleFormRef.value.resetFields()
dialogFormVisible.value = false
emits('onSubmit')
resetForm()
}
onMounted(() => {
console.log()
})
// 上传报告
const uploadRef = ref()
const handleExceed: UploadProps['onExceed'] = files => {
uploadRef.value!.clearFiles()
const file = files[0] as UploadRawFile
file.uid = genFileId()
uploadRef.value!.handleStart(file)
}
let uploadName = ref('')
//上传报告改变
const uploadFileName = val => {
uploadName.value = val
}
// 盖章报告
const sealReport = ref('')
// 佐证材料
const evidenceMaterials = ref('')
// 计划变更材料
const planChangeMaterials = ref('')
//告预警单材料
const alarmMaterials = ref('')
//告预警单反馈材料
const alarmFeedbackMaterials = ref('')
//评估报告
const assessReport = ref('')
const choose = (e: any) => {
uploadFile(e.raw, '/supervision/').then(res => {
//盖章报告
if (uploadName.value == 'sealReport') {
sealReport.value = res.data.name
}
//佐证材料
else if (uploadName.value == 'evidenceMaterials') {
evidenceMaterials.value = res.data.name
}
//计划变更材料
else if (uploadName.value == 'planChangeMaterials') {
planChangeMaterials.value = res.data.name
}
//告预警单材料
else if (uploadName.value == 'alarmMaterials') {
alarmMaterials.value = res.data.name
}
//告预警单反馈材料
else if (uploadName.value == 'alarmFeedbackMaterials') {
alarmFeedbackMaterials.value = res.data.name
}
//评估报告
else if (uploadName.value == 'assessReport') {
assessReport.value = res.data.name
}
})
}
//设置监督类型时间选择范围不能<今天
const disabledDate = time => {
return time.getTime() < Date.now() - 8.64e7 // 8.64e7 毫秒数代表一天
}
//提交
const confirmForm = () => {
// 提交终端信息
ruleFormRef.value.validate(valid => {
if (valid) {
form.value.planUserId = adminInfo.$state.id
let confirmFormData = JSON.parse(JSON.stringify(form.value))
//1.判断是否上传
// if (!sealReport.value) {
// return ElMessage({
// message: '请上传盖章报告',
// type: 'warning'
// })
// }
// if (!evidenceMaterials.value) {
// return ElMessage({
// message: '请上传佐证材料',
// type: 'warning'
// })
// }
// if (!planChangeMaterials.value) {
// return ElMessage({
// message: '请上传计划变更材料',
// type: 'warning'
// })
// }
// if (!alarmMaterials.value) {
// return ElMessage({
// message: '请上传告预警单材料',
// type: 'warning'
// })
// }
// if (!alarmFeedbackMaterials.value) {
// return ElMessage({
// message: '请上传告预警单反馈材料',
// type: 'warning'
// })
// }
// if (!assessReport.value) {
// return ElMessage({
// message: '请上传评估报告',
// type: 'warning'
// })
// }
//提交终端信息
// confirmFormData = {
// ...confirmFormData,
// sealReport: sealReport?.value, //盖章报告
// evidenceMaterials: evidenceMaterials.value, //佐证材料
// planChangeMaterials: planChangeMaterials.value, //计划变更材料
// alarmMaterials: alarmMaterials.value, //告预警单材料
// alarmFeedbackMaterials: alarmFeedbackMaterials.value, //告预警单反馈材料
// assessReport: assessReport.value //评估报告
// }
if (title.value == '技术监督计划') {
addPlanFormData(confirmFormData).then(res => {
if (res.code == 'A0000') {
ElMessage({
message: '新建技术监督计划成功',
type: 'success'
})
ruleFormRef.value.resetFields()
resetForm()
close()
}
})
} else {
console.log(confirmFormData)
}
} else {
console.log('表单验证失败')
return false
}
})
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>