shenpiguize

Your Name

2022-08-18 d9bb98ca91dc00e852ce2a8477c3e4957afa7183

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

@@ -8,22 +8,22 @@
                    </el-form-item>
                </el-col>
                <el-col :span="24" style="margin-bottom: 24px">
                    <el-form-item label="审批层级" prop="depId">
                    <el-form-item label="审批层级" prop="type">
                        <el-select v-model="approveLevelForm.type" placeholder="请选择审批层级" class="input-add">
                            <el-option v-for="item in typeList" :key="item.id" :value="item.id" :label="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24" style="margin-bottom: 24px">
                    <el-form-item label="审批人" prop="unitAddReqDTOList">
                        <el-select v-model="approveLevelForm.unitAddReqDTOList" multiple placeholder="请选择审批人" class="input-add">
                    <el-form-item label="审批人" prop="unitList">
                        <el-select v-model="approveLevelForm.unitList" multiple placeholder="请选择审批人" class="input-add">
                            <el-option v-for="item in userList" :key="item.uid" :value="item.uid" :label="item.realName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24" style="margin-bottom: 20px">
                    <el-form-item label="审批有效时间" prop="continueTime">
                        <el-input v-model="approveLevelForm.continueTime" placeholder="请输入审批有效时间" class="input-add">
                        <el-input type="number" v-model="approveLevelForm.continueTime" placeholder="请输入审批有效时间" class="input-add">
                            <template #prepend>
                                <el-select v-model="approveLevelForm.continueTimeUnit" placeholder="选择单位">
                                    <el-option v-for="item in timeList" :key="item.id" :value="item.id" :label="item.name"></el-option>
@@ -36,19 +36,37 @@
                    <el-tabs class="active" v-model="activeName">
                        <el-tab-pane label="审批流程息" name="ApproveAction">
                            <div class="filter-container">
                                <el-button size="default" type="success" @click="openApproveActionDialog('新增', '', 0)">
                                <el-button size="default" type="primary" @click="openApproveActionDialog('新增', '', 0)">
                                    <el-icon>
                                        <ele-FolderAdd />
                                    </el-icon>
                                    新增审批流程
                                    新增审批项
                                </el-button>
                            </div>

                            <el-table ref="table" :data="approveLevelForm.itemAddReqDTOList" style="width: 100%">
                            <el-table ref="table" :data="approveLevelForm.itemList" style="width: 100%">
                                <el-table-column property="itemName" label="审批项名称" show-overflow-tooltip> </el-table-column>
                                <el-table-column property="type" label="审批项类型" show-overflow-tooltip> </el-table-column>
                                <el-table-column property="measureId" label="措施名称" show-overflow-tooltip></el-table-column>
                                <el-table-column property="standId" label="标准名称" show-overflow-tooltip> </el-table-column>
                                <el-table-column property="type" label="审批项类型" show-overflow-tooltip>
                                    <template #default="scope">
                                        <span>
                                            {{ parseNumber(scope.row.type, '审批项类型') }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column property="measureId" label="措施名称" show-overflow-tooltip>
                                    <template #default="scope">
                                        <span>
                                            {{ parseNumber(scope.row.measureId, '措施名称') }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column property="standId" label="标准名称" show-overflow-tooltip>
                                    <template #default="scope">
                                        <span>
                                            {{ parseNumber(scope.row.standId, '标准名称') }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="150" align="center">
                                    <template #default="scope">
                                        <el-button type="text" size="small" @click="openApproveActionDialog('修改', scope.row, scope.$index)">修改</el-button>
@@ -71,31 +89,47 @@
</template>

<script lang="ts">
import { reactive, toRefs, ref } from 'vue';
import { reactive, toRefs, ref, nextTick, onMounted } from 'vue';
import approveItemDialog from '/@/views/specialWorkSystem/workFlow/approveRule/components/approveItemDialog.vue';
import { ElMessage } from 'element-plus/es';
import { safetyActionApi } from '/@/api/specialWorkSystem/safetyAction';
import { approveBasicApi } from '/@/api/specialWorkSystem/approveBasic';
interface dataState {
    title: string;
    activeName: string;
    approveLevelDialog: boolean;
    approveLevelForm: stepAddReqDTO;
    approveLevelForm: step;
    approveLevelFormRule: {};
    departmentList: [];
    userList: [];
    timeList: Array<type>;
    typeList: Array<type>;
    workLevelList: [];
    standardList: Array<stand>;
    actionList: Array<action>;
}
interface stepAddReqDTO {
interface action {
    id: number;
    context: string;
}
interface stand {
    ruleStandId: number;
    title: string;
}
interface step {
    id: number | null;
    stepName: null;
    stepSerial: number | null;
    type: number | null;
    continueTime: number | null;
    continueTimeUnit: number | null;
    unitAddReqDTOList: [];
    itemAddReqDTOList: [];
    unitList: Array<personType>;
    itemList: Array<item>;
}
interface personType {
    bindUid: number | {};
}
interface item {}
interface type {
    id: number;
    name: string;
@@ -117,10 +151,15 @@
                type: null,
                continueTime: null,
                continueTimeUnit: null,
                unitAddReqDTOList: [],
                itemAddReqDTOList: []
                unitList: [],
                itemList: []
            },
            approveLevelFormRule: {},
            approveLevelFormRule: {
                stepName: [{ required: true, message: '请填写层次名称', trigger: 'blur' }],
                type: [{ required: true, message: '请选择审批层级', trigger: 'change' }],
                unitList: [{ required: true, message: '请选择审批人', trigger: 'change' }],
                continueTime: [{ required: true, message: '请填写有效时间', trigger: 'blur' }]
            },
            departmentList: [],
            userList: [],
            timeList: [
@@ -133,12 +172,17 @@
                { id: 2, name: '多人' },
                { id: 3, name: '分析人' }
            ],
            workLevelList: []
            workLevelList: [],
            actionList: [],
            standardList: []
        });

        const showApproveLevelDialog = (type: string, value: {}, userList: []) => {
            data.approveLevelDialog = true;
            data.userList = userList;
            nextTick(() => {
                approveLevelFormRef.value.clearValidate();
            });
            if (type === '新增') {
                data.title = '新增审批层级';
                data.approveLevelForm = {
@@ -148,43 +192,104 @@
                    type: null,
                    continueTime: null,
                    continueTimeUnit: null,
                    unitAddReqDTOList: [],
                    itemAddReqDTOList: []
                    unitList: [],
                    itemList: []
                };
            } else {
                data.title = '修改审批层级';
                data.approveLevelForm = JSON.parse(JSON.stringify(value));
                data.approveLevelForm.unitList = data.approveLevelForm.unitList.map((item) => {
                    return item.bindUid;
                }) as [];
            }
        };

        const openApproveActionDialog = (type: string, value: {}, index: number) => {
            approveItemDialogRef.value.showApproveItemDialog(type, value, index);
            approveLevelFormRef.value.validate((valid: Boolean) => {
                if (valid) {
                    approveItemDialogRef.value.showApproveItemDialog(type, value, index, data.approveLevelForm, data.standardList, data.actionList);
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '请先完善审批层级信息，才能选择审批项'
                    });
                }
            });
        };

        const submitApproveLevel = async () => {
            data.approveLevelForm.unitAddReqDTOList = data.approveLevelForm.unitAddReqDTOList.map((item) => {
                return {
                    bindUid: item
                };
            approveLevelFormRef.value.validate((valid: Boolean) => {
                if (valid) {
                    data.approveLevelForm.unitList = data.approveLevelForm.unitList.map((item) => {
                        return { bindUid: item };
                    });
                    context.emit('addApprovalLevel', data.approveLevelForm, data.title);
                    data.approveLevelDialog = false;
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '请完善审批层级基本信息'
                    });
                }
            });
            context.emit('addApprovalLevel', data.approveLevelForm, data.title);
            data.approveLevelDialog = false;
        };

        const achieveApprovalItem = (value: stepAddReqDTO, title: string, index: number) => {
        const achieveApprovalItem = (value: {}, title: string, index: number) => {
            if (title === '新增审批项') {
                data.approveLevelForm.itemAddReqDTOList.push(value);
                data.approveLevelForm.itemList.push(value);
            } else {
                data.approveLevelForm.itemAddReqDTOList[index] = JSON.parse(JSON.stringify(value));
                data.approveLevelForm.itemList[index] = JSON.parse(JSON.stringify(value));
            }
        };

        const deleteApproveItem = async (index: number) => {
            data.approveLevelForm.itemAddReqDTOList.splice(index, 1);
            data.approveLevelForm.itemList.splice(index, 1);
        };

        //获取措施项
        const getActionData = async () => {
            let res = await safetyActionApi().getAllSafetyActionList({ workType: null, type: null, context: null });
            if (res.data.code === '200') {
                data.actionList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        //获取标准
        const getStandardData = async () => {
            let res = await approveBasicApi().getAllApproveBasicList({ ruleStandType: null, title: null });
            if (res.data.code === '200') {
                data.standardList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const parseNumber = (value: number, type: string) => {
            if (type === '审批项类型') {
                return data.typeList.find((item) => item.id === value)?.name;
            } else if (type === '措施名称') {
                return data.actionList.find((item) => item.id === value)?.context;
            } else {
                return data.standardList.find((item) => item.ruleStandId === value)?.title;
            }
        };

        onMounted(() => {
            getActionData();
            getStandardData();
        });

        return {
            ...toRefs(data),
            parseNumber,
            approveLevelFormRef,
            approveItemDialogRef,
            deleteApproveItem,