Files
admin-sjzx/src/views/pqs/supervise/plan/components/effectProblem/addForm.vue
2024-05-29 15:06:53 +08:00

416 lines
14 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<el-dialog
v-model="dialogFormVisible"
:title="title"
width="60%"
: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"
:disabled="openType != 'add'"
label-width="auto"
class="form-two"
>
<el-form-item for="-" label="责任单位:" prop="dutyOrgId">
<Area ref="areaRef" v-model="form.dutyOrgId" />
</el-form-item>
<el-form-item for="-" label="监测点类型:" prop="monitorType">
<el-select v-model="form.monitorType" clearable style="width: 100%" placeholder="请选择监测点类型">
<el-option
v-for="item in monitorTypeList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item for="-" label="是否发布预警:" prop="ifReleaseWarning">
<el-select
v-model="form.ifReleaseWarning"
clearable
style="width: 100%"
placeholder="请选择是否发布预警"
>
<el-option label="是" value="1"></el-option>
<el-option label="否" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item for="-" label="计划整改时间:" prop="planRectificationTime">
<el-date-picker
style="width: 100%"
v-model="form.planRectificationTime"
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="rectificationStatus">
<el-select
v-model="form.rectificationStatus"
clearable
style="width: 100%"
placeholder="请选择整改情况"
>
<el-option
v-for="item in rectificationStatusList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item for="-" label="整改时间:" prop="rectificationTime">
<el-date-picker
style="width: 100%"
v-model="form.rectificationTime"
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="supvStandard">
<el-input v-model="form.supvStandard" autocomplete="off" placeholder="请输入监督标准" />
</el-form-item>
<el-form-item for="-" label="监督标准序号:" prop="supvStandardSort">
<el-input v-model="form.supvStandardSort" autocomplete="off" placeholder="请输入监督标准序号" />
</el-form-item>
<el-form-item for="-" label="标准出处:" prop="supvResouce">
<el-input v-model="form.supvResouce" autocomplete="off" placeholder="请输入标准出处" />
</el-form-item>
<el-form-item for="-" label="问题等级:" prop="problemLevel">
<el-select v-model="form.problemLevel" clearable style="width: 100%" placeholder="请选择问题等级">
<el-option
v-for="item in problemLevelList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item for="-" label="问题类型:" prop="problemType">
<el-select v-model="form.problemType" clearable style="width: 100%" placeholder="请选择问题类型">
<el-option
v-for="item in problemTypeList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item for="-" label="问题发现时间:" prop="discoveryTime">
<el-date-picker
style="width: 100%"
v-model="form.discoveryTime"
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="problemLevelReason" style="width:100%;">
<el-input type="textarea" v-model="form.problemLevelReason" autocomplete="off" placeholder="请输入定级依据" />
</el-form-item>
<el-form-item for="-" label="问题简要描述:" prop="simpleProblemDesc" style="width:100%;">
<el-input type="textarea" v-model="form.simpleProblemDesc" autocomplete="off" placeholder="请输入问题简要描述" />
</el-form-item>
<el-form-item for="-" label="问题描述:" prop="problemDesc" style="width:100%;">
<el-input type="textarea" v-model="form.problemDesc" autocomplete="off" placeholder="请输入问题描述" />
</el-form-item>
<el-form-item for="-" label="整改方案:" prop="rectificationProgramme" style="width:100%;">
<el-input type="textarea" v-model="form.rectificationProgramme" autocomplete="off" placeholder="请输入整改方案" />
</el-form-item>
<el-form-item for="-" label="整改措施:" prop="rectificationMeasure" style="width:100%;">
<el-input type="textarea" v-model="form.rectificationMeasure" autocomplete="off" placeholder="请输入整改措施" />
</el-form-item>
<el-form-item for="-" label="备注:" style="width:100%;">
<el-input type="textarea" v-model="form.remark" autocomplete="off" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer v-if="openType != 'detail'">
<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, reactive, defineExpose, defineProps, defineEmits, watch, onUnmounted } from 'vue'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { genFileId, ElMessage } from 'element-plus'
import { useDictData } from '@/stores/dictData'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { queryByAllCode } from '@/api/system-boot/dictTree'
import { useAdminInfo } from '@/stores/adminInfo'
import { uploadFile } from '@/api/system-boot/file'
import { addPlanFormData, getUserByDeptId, addPlanProblemFormData } from '@/api/supervision-boot/plan/index'
import { getAreaList } from '@/api/common'
import Area from '@/components/form/area/index.vue'
const emits = defineEmits(['onSubmit'])
const props = defineProps({
planId: {
type: String,
default: ''
}
})
const dictData = useDictData()
const dialogFormVisible = ref(false)
const form: any = ref({})
const title: any = ref('')
const ruleFormRef = ref(null)
//获取登陆用户姓名和部门
const adminInfo = useAdminInfo()
//字典获取监测点类型
const monitorTypeList = dictData.getBasicData('monitor_type')
//字典获取问题类型
const problemTypeList = dictData.getBasicData('problem_type')
//字典整改情况
const rectificationStatusList = dictData.getBasicData('rectification_type')
//字典问题等级
const problemLevelList = dictData.getBasicData('problem_level_type')
const resetForm = () => {
form.value = {
discoveryTime: '', //问题发现时间
dutyOrgId: '', // 责任单位id取ISC平台上的组织id
ifReleaseWarning: '0', // 是否发布预告警
monitorType: '', //监测点类型 ,仅供电电压监督计划必填
orderBy: '',
pageNum: 0,
pageSize: 0,
planId: '', //关联计划表id
planRectificationTime: '', //计划整改时间
problemDesc: '', // 问题描述
problemLevel: '', // 问题等级
problemLevelReason: '', // 定级依据
problemType: '', //问题类型
rectificationMeasure: '', // 整改措施
rectificationProgramme: '', // 整改方案
rectificationStatus: '', // 整改情况
rectificationTime: '', //整改时间
remark: '', // 备注
searchBeginTime: '',
searchEndTime: '',
searchState: 0,
searchValue: '',
simpleProblemDesc: '', // 问题简要描述
sortBy: '',
supvResouce: '', // 标准出处
supvStandard: '', // 监督标准
supvStandardSort: '' // 监督标准序号
}
}
//初始化数据
resetForm()
//定义校验规则
const rules = ref({
discoveryTime: [
{
required: true,
message: '请选择问题发现时间',
trigger: 'change'
}
],
dutyOrgId: [
{
required: true,
message: '请选择责任单位',
trigger: 'change'
}
],
ifReleaseWarning: [
{
required: true,
message: '请选择是否发布预警',
trigger: 'change'
}
],
monitorType: [
{
required: true,
message: '请选择监测点类型',
trigger: 'change'
}
],
planRectificationTime: [
{
required: true,
message: '请选择计划整改时间',
trigger: 'change'
}
],
problemDesc: [
{
required: true,
message: '请输入问题描述',
trigger: 'blur'
}
],
problemLevel: [
{
required: true,
message: '请选择问题等级',
trigger: 'change'
}
],
problemLevelReason: [
{
required: true,
message: '请输入定级依据',
trigger: 'blur'
}
],
problemType: [
{
required: true,
message: '请选择问题类型',
trigger: 'change'
}
],
rectificationMeasure: [
{
required: false,
message: '请输入整改措施',
trigger: 'change'
}
],
rectificationProgramme: [
{
required: true,
message: '请输入整改方案',
trigger: 'blur'
}
],
rectificationStatus: [
{
required: true,
message: '请选择整改情况',
trigger: 'change'
}
],
rectificationTime: [
{
required: true,
message: '请选择整改时间',
trigger: 'change'
}
],
remark: [
{
required: false,
message: '请输入备注',
trigger: 'blur'
}
],
simpleProblemDesc: [
{
required: true,
message: '请输入问题简要描述',
trigger: 'blur'
}
],
supvResouce: [
{
required: true,
message: '请输入标准出处',
trigger: 'blur'
}
],
supvStandard: [
{
required: true,
message: '请输入监督标准',
trigger: 'blur'
}
],
supvStandardSort: [
{
required: true,
message: '请输入监督标准序号',
trigger: 'blur'
}
]
})
watch(
() => form.value,
(val, oldVal) => {},
{
deep: true,
immediate: true
}
)
const openType: any = ref('')
const open = (row: any, val: any) => {
//详情(后面做编辑,再修改判断条件)
if (val == 'detail') {
for (let key in row) {
if (form.value.hasOwnProperty(key)) {
form.value[key] = row[key] // 对相同的key进行赋值
}
}
title.value = '技术计划监督实施问题详情'
openType.value = 'detail'
}
//新增
else if (val == 'add') {
title.value = '技术计划监督实施问题新增'
openType.value = 'add'
nextTick(() => {
ruleFormRef.value.resetFields()
resetForm()
})
}
dialogFormVisible.value = true
}
const close = () => {
//重置表单内容
//取消表单校验状态
ruleFormRef.value && ruleFormRef.value.resetFields()
dialogFormVisible.value = false
emits('onSubmit')
resetForm()
}
onMounted(() => {
console.log()
})
//设置监督类型时间选择范围不能<今天
const disabledDate = time => {
return time.getTime() < Date.now() - 8.64e7 // 8.64e7 毫秒数代表一天
}
//提交
const confirmForm = () => {
// 提交终端信息
ruleFormRef.value.validate(valid => {
if (valid) {
form.value.planId = props.planId
let confirmFormData = JSON.parse(JSON.stringify(form.value))
addPlanProblemFormData(confirmFormData).then(res => {
if (res.code == 'A0000') {
ElMessage({
message: '新增实施问题成功',
type: 'success'
})
ruleFormRef.value.resetFields()
resetForm()
close()
}
})
} else {
console.log('表单验证失败')
return false
}
})
}
defineExpose({ open })
</script>