<template>
|
<div>
|
<el-dialog v-model="approveLevelDialog" :title="title" :close-on-click-modal="false">
|
<el-form :model="approveLevelForm" label-width="150px" ref="approveLevelFormRef" :rules="approveLevelFormRule">
|
<el-col :span="24" style="margin-bottom: 24px">
|
<el-form-item label="层级名称" prop="stepName">
|
<el-input v-model="approveLevelForm.stepName" class="input-add" placeholder="请填写层级名称"> </el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24" style="margin-bottom: 24px">
|
<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" v-if="approveLevelForm.type === 2">
|
<el-form-item label="审批类型" prop="auditType">
|
<el-select v-model="approveLevelForm.auditType" placeholder="请选择审批类型" class="input-add">
|
<el-option v-for="item in auditTypeList" :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="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 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>
|
</el-select>
|
</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<div class="checkUnit-point">
|
<el-tabs class="active" v-model="activeName">
|
<el-tab-pane label="审批流程" name="ApproveAction">
|
<div class="filter-container">
|
<el-button size="default" type="primary" @click="openApproveActionDialog('新增', '', 0)">
|
<el-icon>
|
<ele-FolderAdd />
|
</el-icon>
|
新增审批项
|
</el-button>
|
</div>
|
|
<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>
|
<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>
|
<el-button type="text" size="small" style="color: red" @click="deleteApproveItem(scope.$index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
|
<div align="right" style="padding-top: 10px">
|
<el-button type="warning" @click="approveLevelDialog = false" size="default" plain>取消</el-button>
|
<el-button type="primary" @click="submitApproveLevel()" size="default">确认</el-button>
|
</div>
|
</el-form>
|
</el-dialog>
|
<approve-item-dialog ref="approveItemDialogRef" @addApprovalItem="achieveApprovalItem"></approve-item-dialog>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { reactive, toRefs, ref, nextTick, onMounted } from 'vue';
|
import approveItemDialog from '/@/views/specialWorkSystem/flow/ruleofApp/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: step;
|
approveLevelFormRule: {};
|
departmentList: [];
|
userList: [];
|
timeList: Array<type>;
|
typeList: Array<type>;
|
auditTypeList: Array<type>;
|
approveTypeList: Array<type>;
|
workLevelList: [];
|
standardList: Array<stand>;
|
actionList: Array<action>;
|
}
|
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;
|
auditType: number | null;
|
continueTime: number | null;
|
continueTimeUnit: number | null;
|
unitList: Array<personType>;
|
itemList: Array<item>;
|
}
|
interface personType {
|
bindUid: number | {};
|
}
|
interface item {}
|
interface type {
|
id: number;
|
name: string;
|
}
|
export default {
|
name: 'approveLevelDialog',
|
components: { approveItemDialog },
|
setup(props: any, context: any) {
|
const approveLevelFormRef = ref();
|
const approveItemDialogRef = ref();
|
const data = reactive<dataState>({
|
title: '',
|
activeName: 'ApproveAction',
|
approveLevelDialog: false,
|
approveLevelForm: {
|
id: null,
|
stepName: null,
|
stepSerial: null,
|
type: null,
|
auditType: null,
|
continueTime: null,
|
continueTimeUnit: null,
|
unitList: [],
|
itemList: []
|
},
|
approveLevelFormRule: {
|
stepName: [{ required: true, message: '请填写层次名称', trigger: 'blur' }],
|
type: [{ required: true, message: '请选择审批层级', trigger: 'change' }],
|
auditType: [{ required: true, message: '请选择审批类型', trigger: 'change' }],
|
unitList: [{ required: true, message: '请选择审批人', trigger: 'change' }],
|
continueTime: [{ required: true, message: '请填写有效时间', trigger: 'blur' }]
|
},
|
departmentList: [],
|
userList: [],
|
timeList: [
|
{ id: 1, name: '日' },
|
{ id: 2, name: '时' },
|
{ id: 3, name: '分' }
|
],
|
typeList: [
|
{ id: 1, name: '单人' },
|
{ id: 2, name: '多人' },
|
{ id: 3, name: '分析人' }
|
],
|
auditTypeList: [
|
{ id: 0, name: '单审' },
|
{ id: 1, name: '会审' },
|
],
|
approveTypeList: [
|
{ id: 1, name: '数值' },
|
{ id: 2, name: '选项' },
|
{ id: 3, name: '填空' }
|
],
|
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 = {
|
id: null,
|
stepName: null,
|
stepSerial: null,
|
type: null,
|
auditType: null,
|
continueTime: null,
|
continueTimeUnit: null,
|
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) => {
|
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 () => {
|
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: '请完善审批层级基本信息'
|
});
|
}
|
});
|
};
|
|
const achieveApprovalItem = (value: {}, title: string, index: number) => {
|
if (title === '新增审批项') {
|
data.approveLevelForm.itemList.push(value);
|
} else {
|
data.approveLevelForm.itemList[index] = JSON.parse(JSON.stringify(value));
|
}
|
};
|
|
const deleteApproveItem = async (index: number) => {
|
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.approveTypeList.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,
|
submitApproveLevel,
|
achieveApprovalItem,
|
showApproveLevelDialog,
|
openApproveActionDialog
|
};
|
}
|
};
|
</script>
|
|
<style scoped></style>
|
