shenpiguize

Your Name

2022-08-18 d9bb98ca91dc00e852ce2a8477c3e4957afa7183

 src/views/specialWorkSystem/workFlow/approveRule/components/approveRuleDialog.vue

@@ -1,40 +1,40 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog v-model="ifShowApproveRuleDialog" :title="title">
        <el-dialog v-model="ifShowApproveRuleDialog" :title="title" :close-on-click-modal="false">
            <el-form :model="approveRuleForm" label-width="120px" ref="approveRuleFormRef" :rules="approveRuleFormRules">
                <el-row>
                    <el-col :span="12" style="margin-bottom: 20px">
                        <el-form-item label="任务名称" prop="ruleName">
                            <el-input v-model="approveRuleForm.ruleName" :disabled="!inspectPointConfirm" class="input-add" placeholder="请填写任务名称"> </el-input>
                            <el-input v-model="approveRuleForm.ruleName" :disabled="!disabled" class="input-add" placeholder="请填写任务名称"> </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" style="margin-bottom: 20px">
                        <el-form-item label="部门名称" prop="depId">
                            <el-cascader :disabled="!inspectPointConfirm" placeholder="请选择部门名称" :options="departmentList" :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }" clearable filterable class="input-add" v-model="approveRuleForm.depId"> </el-cascader>
                            <el-cascader :disabled="!disabled" placeholder="请选择部门名称" :options="departmentList" :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }" clearable filterable class="input-add" v-model="approveRuleForm.depId"> </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" style="margin-bottom: 20px">
                        <el-form-item label="作业类型" prop="workType">
                            <el-select v-model="approveRuleForm.workType" :disabled="!inspectPointConfirm" placeholder="请选择作业类型" class="input-add">
                            <el-select v-model="approveRuleForm.workType" @change="clearValue" :disabled="!disabled" placeholder="请选择作业类型" class="input-add">
                                <el-option v-for="item in workTypeList" :key="item.id" :value="item.id" :label="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" style="margin-bottom: 20px">
                    <el-col :span="12" style="margin-bottom: 20px" v-if="approveRuleForm.workType === 3 || approveRuleForm.workType === 6 || approveRuleForm.workType === 8 || approveRuleForm.workType === 1">
                        <el-form-item label="作业等级" prop="workLevel">
                            <el-select v-model="approveRuleForm.workLevel" :disabled="!inspectPointConfirm" placeholder="请选择作业等级" class="input-add">
                                <el-option v-for="item in workLevelList" :key="item.id" :value="item.id" :label="item.groupName"></el-option>
                            <el-select v-model="approveRuleForm.workLevel" :disabled="!disabled" placeholder="请选择作业等级" class="input-add">
                                <el-option v-for="item in workLevelList" :key="item.id" :value="item.id" :label="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="创建审批链">
                            <div style="width: 100%; margin-bottom: 20px" v-show="inspectPointConfirm">
                            <div style="width: 100%; margin-bottom: 20px" v-show="disabled">
                                <el-button type="primary" :icon="Plus" size="default" @click="openApproveLevelDialog('新增', '')">新增巡检点</el-button>
                            </div>
                            <div style="width: 100%; margin-left: -30px">
                                <div v-for="(item, index) in approveRuleForm.stepAddReqDTOList" class="stepItem">
                                <div v-for="(item, index) in approveRuleForm.stepList" class="stepItem">
                                    <div class="stepNum">{{ index + 1 }}</div>
                                    <div class="stepCard">
                                        <el-card class="box-card">
@@ -44,30 +44,47 @@
                                            <!--                                            <div class="text item">-->
                                            <!--                                                所属设备区域：<span>{{ item.regionId }}</span>-->
                                            <!--                                            </div>-->
                                            <div class="text item">
                                                审批类型：<span>{{ item.type }}</span>
                                            <div class="text item" v-for="i in typeList">
                                                <div v-if="i.id === item.type">
                                                    审批层级：<span>{{ i.name }}</span>
                                                </div>
                                            </div>
                                            <!--                                            <div class="text item">-->
                                            <!--                                                关联RFID：<span>{{ item.rfidId }}</span>-->
                                            <!--                                            </div>-->
                                            <div class="text item">
                                                审批人：<span>{{ item.type }}</span>
                                                审批人：<span>{{
                                                    item.unitList
                                                        .map((item) => {
                                                            return userList.find((i) => i.uid === item.bindUid)?.realName;
                                                        })
                                                        .join('、')
                                                }}</span>
                                            </div>
                                            <!--                                            <div class="text item">-->
                                            <!--                                                巡检指标：<span>{{ item.quotaId }}</span>-->
                                            <!--                                            </div>-->
                                            <div class="text item">
                                                审批有效时长：<span>{{ item.name }}</span>
                                            <div class="text item" v-for="i in timeList">
                                                <div v-if="i.id === item.continueTimeUnit">
                                                    审批有效时长：<span>{{ item.continueTime }}</span>
                                                    <span>{{ i.name }}</span>
                                                </div>
                                            </div>
                                            <!--                                            <div class="text item">-->
                                            <!--                                                数据填报类型：<span>{{ item.dataReportType }}</span>-->
                                            <!--                                            </div>-->
                                            <div class="text item">
                                                审批项：<span>{{ item.firstReferenceValue ? item.firstReferenceValue : item.secondReferenceValue ? item.secondReferenceValue : item.thirdReferenceValue }}</span>
                                                审批项：<span>{{
                                                    item.itemList
                                                        .map((item) => {
                                                            return item.itemName;
                                                        })
                                                        .join('、')
                                                }}</span>
                                            </div>
                                        </el-card>
                                    </div>
                                    <div v-show="inspectPointConfirm">
                                    <div v-show="disabled">
                                        <!--                        <el-button type="primary" size="default" @click="addFlow(index)">新增下一区域</el-button>-->
                                        <el-button type="primary" style="margin-left: 12px" size="default" @click="openApproveLevelDialog('修改', item)">修改</el-button>
                                        <el-button type="danger" size="default" @click="deleteApproveLevel(index, item)">删除</el-button>
@@ -77,8 +94,8 @@
                        </el-form-item>
                    </el-col>
                </el-row>
                <div align="right" v-show="inspectPointConfirm">
                    <el-button type="warning" @click="inspectPointDialog = false" size="default" plain>取消</el-button>
                <div align="right" v-show="disabled">
                    <el-button type="warning" @click="ifShowApproveRuleDialog = false" size="default" plain>取消</el-button>
                    <el-button type="primary" @click="submitApproveRule()" size="default">确认</el-button>
                </div>
            </el-form>
@@ -95,39 +112,39 @@
interface dataState {
    title: string;
    pointTitle: string;
    inspectPointConfirm: boolean;
    inspectPointDialog: boolean;
    disabled: boolean;
    ifShowApproveRuleDialog: boolean;
    inspectPointForm: stepAddReqDTO;
    inspectPointForm: step;
    approveRuleForm: {
        id: number | null;
        ruleName: number | null;
        depId: number | null;
        workType: number | null;
        workLevel: number | null;
        stepAddReqDTOList: Array<stepAddReqDTO>;
        stepList: Array<step>;
    };
    approveRuleFormRules: {};
    departmentList: [];
    userList: [];
    workTypeList: [];
    workLevelList: [];
    workTypeList: Array<type>;
    timeList: Array<type>;
    typeList: Array<type>;
    workLevelList: Array<type>;
}

interface quota {
interface type {
    id: number;
    type: string;
    unit: string;
    name: string;
}
interface stepAddReqDTO {
interface step {
    id: number | null;
    stepName: null;
    stepSerial: number | null;
    type: number | null;
    continueTime: number | null;
    continueTimeUnit: number | null;
    unitAddReqDTOList: [];
    itemAddReqDTOList: [];
    unitList: [];
    itemList: [];
}
export default {
    name: 'approveRuleDialog',
@@ -138,8 +155,7 @@
        const data = reactive<dataState>({
            title: '',
            pointTitle: '',
            inspectPointConfirm: true,
            inspectPointDialog: false,
            disabled: true,
            ifShowApproveRuleDialog: false,
            inspectPointForm: {
                id: null,
@@ -148,8 +164,8 @@
                type: null,
                continueTime: null,
                continueTimeUnit: null,
                unitAddReqDTOList: [],
                itemAddReqDTOList: []
                unitList: [],
                itemList: []
            },
            approveRuleForm: {
                id: null,
@@ -157,21 +173,36 @@
                depId: null,
                workType: null,
                workLevel: null,
                stepAddReqDTOList: []
                stepList: []
            },
            approveRuleFormRules: {
                unitName: [{ required: true, message: '请填写巡检任务单元名称', trigger: 'blur' }],
                workType: [{ required: true, message: '请选择巡检任务类型', trigger: 'change' }],
                execClassgroupId: [{ required: true, message: '请选择巡检班组', trigger: 'change' }],
                execDepId: [{ required: true, message: '请选择巡检部门', trigger: 'blur' }],
                checkCycle: [{ required: true, message: '请填写巡检周期', trigger: 'blur' }],
                noticeTime: [{ required: true, message: '请填写提前通知时间', trigger: 'blur' }],
                validTime: [{ required: true, message: '请填写有效时间', trigger: 'blur' }],
                firstStartTime: [{ required: true, message: '请选择周期开始时间', trigger: 'change' }]
                ruleName: [{ required: true, message: '请填写规则名称', trigger: 'blur' }],
                depId: [{ required: true, message: '请选择部门', trigger: 'change' }],
                workLevel: [{ required: true, message: '请选择作业等级', trigger: 'change' }],
                workType: [{ required: true, message: '请选择作业类型', trigger: 'cahnge' }]
            },
            departmentList: [],
            userList: [],
            workTypeList: [],
            typeList: [
                { id: 1, name: '单人' },
                { id: 2, name: '多人' },
                { id: 3, name: '分析人' }
            ],
            timeList: [
                { id: 1, name: '日' },
                { id: 2, name: '时' },
                { id: 3, name: '分' }
            ],
            workTypeList: [
                { id: 1, name: '动火作业' },
                { id: 2, name: '受限空间作业' },
                { id: 3, name: '吊装作业' },
                { id: 4, name: '动土作业' },
                { id: 5, name: '断路作业' },
                { id: 6, name: '高处作业' },
                { id: 7, name: '临时用电作业' },
                { id: 8, name: '盲板抽堵作业' }
            ],
            workLevelList: []
        });

@@ -179,28 +210,28 @@
            approveLevelDialogRef.value.showApproveLevelDialog(type, value, data.userList);
        };

        const achieveApprovalLevel = (value: stepAddReqDTO, title: string) => {
            debugger;
        const achieveApprovalLevel = (value: step, title: string) => {
            if (title === '新增审批层级') {
                if (data.approveRuleForm.stepAddReqDTOList.length === 0) {
                if (data.approveRuleForm.stepList.length === 0) {
                    value.stepSerial = 1;
                    data.approveRuleForm.stepAddReqDTOList.push(value);
                    data.approveRuleForm.stepList.push(value);
                } else {
                    value.stepSerial = data.approveRuleForm.stepAddReqDTOList[data.approveRuleForm.stepAddReqDTOList.length - 1].stepSerial + 1;
                    data.approveRuleForm.stepAddReqDTOList.push(value);
                    value.stepSerial = (data.approveRuleForm.stepList[data.approveRuleForm.stepList.length - 1]?.stepSerial as number) + 1;
                    data.approveRuleForm.stepList.push(value);
                }
            } else {
                let result = data.approveRuleForm.stepAddReqDTOList.findIndex((item) => item.stepSerial === value.stepSerial);
                data.approveRuleForm.stepAddReqDTOList[result] = JSON.parse(JSON.stringify(value));
                let result = data.approveRuleForm.stepList.findIndex((item) => item.stepSerial === value.stepSerial);
                data.approveRuleForm.stepList[result] = JSON.parse(JSON.stringify(value));
            }
        };

        const showApproveRuleDialog = (type: string, value: {}, departmentList: [], userList: [], workTypeList: []) => {
        const showApproveRuleDialog = (type: string, value: { workType: number }, departmentList: [], userList: [], workTypeList: []) => {
            data.ifShowApproveRuleDialog = true;
            data.userList = userList;
            data.workTypeList = workTypeList;
            data.departmentList = departmentList;
            if (type === '新增') {
                data.disabled = true;
                data.title = '新增审批规则';
                data.approveRuleForm = {
                    id: null,
@@ -208,16 +239,95 @@
                    depId: null,
                    workType: null,
                    workLevel: null,
                    stepAddReqDTOList: []
                    stepList: []
                };
            } else {
            } else if (type === '修改') {
                data.disabled = true;
                data.title = '修改审批规则';
                data.approveRuleForm = JSON.parse(JSON.stringify(value));
                setValue(value.workType);
            } else {
                data.disabled = false;
                data.title = '查看审批规则';
                setValue(value.workType);
                data.approveRuleForm = JSON.parse(JSON.stringify(value));
            }
        };

        const deleteApproveLevel = (index: number, item: any) => {
            data.approveRuleForm.stepAddReqDTOList.splice(index, 1);
            data.approveRuleForm.stepList.splice(index, 1);
        };

        const clearValue = () => {
            if (data.approveRuleForm.workType === 1) {
                data.approveRuleForm.workLevel = null;
                data.workLevelList = [
                    { id: 1, name: '一级动火作业' },
                    { id: 2, name: '二级动火作业' },
                    { id: 3, name: '三级动火作业' }
                ];
            } else if (data.approveRuleForm.workType === 3) {
                data.approveRuleForm.workLevel = null;
                data.workLevelList = [
                    { id: 8, name: '一级吊装作业' },
                    { id: 9, name: '二级吊装作业' },
                    { id: 10, name: '三级吊装作业' }
                ];
            } else if (data.approveRuleForm.workType === 6) {
                data.approveRuleForm.workLevel = null;
                data.workLevelList = [
                    { id: 4, name: '一级高处作业' },
                    { id: 5, name: '二级高处作业' },
                    { id: 6, name: '三级高处作业' },
                    { id: 7, name: '四级高处作业' }
                ];
            } else if (data.approveRuleForm.workType === 8) {
                data.approveRuleForm.workLevel = null;
                data.workLevelList = [
                    { id: 11, name: '抽盲板作业' },
                    { id: 12, name: '堵盲板作业' }
                ];
            } else {
                data.approveRuleForm.workLevel = null;
                data.workLevelList = [];
            }
        };

        const setValue = (workType: number) => {
            if (workType === 1) {
                data.workLevelList = [
                    { id: 1, name: '一级动火作业' },
                    { id: 2, name: '二级动火作业' },
                    { id: 3, name: '三级动火作业' }
                ];
            } else if (workType === 3) {
                data.workLevelList = [
                    { id: 8, name: '一级吊装作业' },
                    { id: 9, name: '二级吊装作业' },
                    { id: 10, name: '三级吊装作业' }
                ];
            } else if (workType === 6) {
                data.workLevelList = [
                    { id: 4, name: '一级高处作业' },
                    { id: 5, name: '二级高处作业' },
                    { id: 6, name: '三级高处作业' },
                    { id: 7, name: '四级高处作业' }
                ];
            } else if (workType === 8) {
                data.workLevelList = [
                    { id: 11, name: '抽盲板作业' },
                    { id: 12, name: '堵盲板作业' }
                ];
            } else {
                data.workLevelList = [];
            }
        };

        const parseNumber = (type: string, value: number) => {
            if (type === '时间单位') {
                debugger;
                return data.timeList.find((item) => item.id === value)?.name;
            }
        };

        const submitApproveRule = () => {
@@ -267,6 +377,8 @@

        return {
            ...toRefs(data),
            clearValue,
            parseNumber,
            approveLevelDialog,
            approveRuleFormRef,
            approveLevelDialogRef,