<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="depId">
|
<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-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">
|
<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="success" @click="openApproveActionDialog('新增', '', 0)">
|
<el-icon>
|
<ele-FolderAdd />
|
</el-icon>
|
新增审批流程
|
</el-button>
|
</div>
|
|
<el-table ref="table" :data="approveLevelForm.itemAddReqDTOList" 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 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 } from 'vue';
|
import approveItemDialog from '/@/views/specialWorkSystem/workFlow/approveRule/components/approveItemDialog.vue';
|
import { ElMessage } from 'element-plus/es';
|
interface dataState {
|
title: string;
|
activeName: string;
|
approveLevelDialog: boolean;
|
approveLevelForm: stepAddReqDTO;
|
approveLevelFormRule: {};
|
departmentList: [];
|
userList: [];
|
timeList: Array<type>;
|
typeList: Array<type>;
|
workLevelList: [];
|
}
|
interface stepAddReqDTO {
|
id: number | null;
|
stepName: null;
|
stepSerial: number | null;
|
type: number | null;
|
continueTime: number | null;
|
continueTimeUnit: number | null;
|
unitAddReqDTOList: [];
|
itemAddReqDTOList: [];
|
}
|
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,
|
continueTime: null,
|
continueTimeUnit: null,
|
unitAddReqDTOList: [],
|
itemAddReqDTOList: []
|
},
|
approveLevelFormRule: {},
|
departmentList: [],
|
userList: [],
|
timeList: [
|
{ id: 1, name: '日' },
|
{ id: 2, name: '时' },
|
{ id: 3, name: '分' }
|
],
|
typeList: [
|
{ id: 1, name: '单人' },
|
{ id: 2, name: '多人' },
|
{ id: 3, name: '分析人' }
|
],
|
workLevelList: []
|
});
|
|
const showApproveLevelDialog = (type: string, value: {}, userList: []) => {
|
data.approveLevelDialog = true;
|
data.userList = userList;
|
if (type === '新增') {
|
data.title = '新增审批层级';
|
data.approveLevelForm = {
|
id: null,
|
stepName: null,
|
stepSerial: null,
|
type: null,
|
continueTime: null,
|
continueTimeUnit: null,
|
unitAddReqDTOList: [],
|
itemAddReqDTOList: []
|
};
|
} else {
|
data.title = '修改审批层级';
|
data.approveLevelForm = JSON.parse(JSON.stringify(value));
|
}
|
};
|
|
const openApproveActionDialog = (type: string, value: {}, index: number) => {
|
approveItemDialogRef.value.showApproveItemDialog(type, value, index);
|
};
|
|
const submitApproveLevel = async () => {
|
data.approveLevelForm.unitAddReqDTOList = data.approveLevelForm.unitAddReqDTOList.map((item) => {
|
return {
|
bindUid: item
|
};
|
});
|
context.emit('addApprovalLevel', data.approveLevelForm, data.title);
|
data.approveLevelDialog = false;
|
};
|
|
const achieveApprovalItem = (value: stepAddReqDTO, title: string, index: number) => {
|
if (title === '新增审批项') {
|
data.approveLevelForm.itemAddReqDTOList.push(value);
|
} else {
|
data.approveLevelForm.itemAddReqDTOList[index] = JSON.parse(JSON.stringify(value));
|
}
|
};
|
|
const deleteApproveItem = async (index: number) => {
|
data.approveLevelForm.itemAddReqDTOList.splice(index, 1);
|
};
|
|
return {
|
...toRefs(data),
|
approveLevelFormRef,
|
approveItemDialogRef,
|
deleteApproveItem,
|
submitApproveLevel,
|
achieveApprovalItem,
|
showApproveLevelDialog,
|
openApproveActionDialog
|
};
|
}
|
};
|
</script>
|
|
<style scoped></style>
|
