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

<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"
            label-width="140px"
            label-position="right"
            :disabled="openType!='add'"
        >
            <el-row>
                <el-col :span="12">
                    <el-form-item label="责任单位：" prop="dutyOrgId">
                        <Area ref="areaRef" v-model="form.dutyOrgId" />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item 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-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item 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-col>

                <el-col :span="12">
                    <el-form-item 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-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item 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-col>

                <el-col :span="12">
                    <el-form-item 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-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="监督标准：" prop="supvStandard">
                        <el-input v-model="form.supvStandard" autocomplete="off" placeholder="请输入监督标准" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="监督标准序号：" prop="supvStandardSort">
                        <el-input v-model="form.supvStandardSort" autocomplete="off" placeholder="请输入监督标准序号" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="标准出处：" prop="supvResouce">
                        <el-input v-model="form.supvResouce" autocomplete="off" placeholder="请输入标准出处" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item 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-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item 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-col>

                <el-col :span="12">
                    <el-form-item label="问题简要描述：" prop="simpleProblemDesc">
                        <el-input
                            v-model="form.simpleProblemDesc"
                            autocomplete="off"
                            placeholder="请输入问题简要描述"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="问题描述：" prop="problemDesc">
                        <el-input v-model="form.problemDesc" autocomplete="off" placeholder="请输入问题描述" />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item 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-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="定级依据：" prop="problemLevelReason">
                        <el-input v-model="form.problemLevelReason" autocomplete="off" placeholder="请输入定级依据" />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="整改方案：" prop="rectificationProgramme">
                        <el-input
                            v-model="form.rectificationProgramme"
                            autocomplete="off"
                            placeholder="请输入整改方案"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="整改措施：" prop="rectificationMeasure">
                        <el-input v-model="form.rectificationMeasure" autocomplete="off" placeholder="请输入整改措施" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="required_position">
                    <span class="required_icon_white">*</span>
                    <el-form-item label="备注：">
                        <el-input v-model="form.remark" autocomplete="off" placeholder="请输入备注" />
                    </el-form-item>
                </el-col>
            </el-row>
        </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, 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 => {
                ruleFormRef.value.resetFields()
                resetForm()
                close()
            })
        } else {
            console.log('表单验证失败')
            return false
        }
    })
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.fixed-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
}
.el-form {
    width: 96%;
    height: 400px;
    margin: 0 auto;
    overflow-y: auto;
    padding-top: 20px;
}
.dialog-footer {
    padding: 10px;
}
/* 调整标签的换行行为 */
.label_over_warp::v-deep .el-form-item__label {
    // white-space: pre-line !important;
    line-height: 16px !important;
}
::v-deep .el-form-item {
    padding: 0 10px;
    height: auto !important;
}
::v-deep .el-form-item__label {
    justify-content: flex-start !important;
}
.form-label-left-align {
    text-align: left;
}
::v-deep .el-input-number .el-input__inner {
    text-align: left;
}
.no_required::v-deep .el-form-item__label {
    padding-left: 10px !important;
}

::v-deep .el-input {
    width: 200px !important;
}
::v-deep .el-select {
    width: 200px !important;
}
::v-deep .required_position {
    position: relative;
    .required_icon {
        position: absolute;
        left: -10px;
        margin-top: 8px;
        color: #f56c6c;
        margin-left: 20px;
        margin-right: 10px;
    }
    .required_icon_white {
        color: #fff;
        position: absolute;
        left: -10px;
        padding-left: 10px;
        margin: 8px 10px 0 10px;
    }
    .required_text {
        // padding-left: 20px;
    }
    .el-form-item__label {
        padding-left: 10px;
    }
}
// ::v-deep .tabs_form{
//     height:300px !important;
// }
</style>