<template>
|
<div class="home-container">
|
<el-scrollbar height="100%">
|
<div class="homeCard">
|
<div>
|
<div v-for="(item, index) in approveSteps" class="stepItem">
|
<div class="stepNum">{{ index + 1 }}</div>
|
<div class="stepCard">
|
<el-card class="box-card" shadow="hover">
|
<template #header>
|
<div class="card-header">
|
<div>
|
步骤<span>{{ index + 1 }}</span>
|
</div>
|
<div>
|
<el-button type="primary" size="default" @click="addFlow(index)">新增</el-button>
|
<el-button type="danger" size="default" @click="deleteFlow(index)">删除</el-button>
|
</div>
|
</div>
|
</template>
|
<div class="text item">
|
审批部门：<span>{{ item.department }}</span>
|
</div>
|
<div class="text item">
|
审批人员：<span>{{ item.manager }}</span>
|
</div>
|
<div class="text item">
|
其他参数：<span>{{ item.others }}</span>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</div>
|
<el-row>
|
<el-button type="primary" @click="confirmEdit" size="large">确认</el-button>
|
<el-button @click="cancelEdit" size="large">取消</el-button>
|
</el-row>
|
</div>
|
<el-drawer v-model="showAdd" direction="rtl" @close="colseDrawer">
|
<template #title>
|
<h4>新增审批流</h4>
|
</template>
|
<template #default>
|
<el-form :model="addProgress" label-width="120px" ref="ruleFormRef" :rules="ProgressRules">
|
<el-form-item label="审批部门" prop="department">
|
<el-select v-model="addProgress.department" placeholder="请选择审批部门">
|
<el-option label="动土" value="动土" />
|
<el-option label="动火" value="动火" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="审批人员" prop="manager">
|
<el-select v-model="addProgress.manager" placeholder="请选择审批人员">
|
<el-option label="人员1" value="人员1" />
|
<el-option label="人员2" value="人员2" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="其他参数" prop="others">
|
<el-input v-model="addProgress.others" />
|
</el-form-item>
|
</el-form>
|
</template>
|
<template #footer>
|
<div style="flex: auto">
|
<el-button type="primary" @click="confirmClick(ruleFormRef)" size="default">确认</el-button>
|
<el-button @click="cancelClick" size="default">取消</el-button>
|
</div>
|
</template>
|
</el-drawer>
|
<el-dialog v-model="deleteDialog" title="提示" width="30%" center>
|
<span>您确定要删除该审批流吗？</span>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="deleteDialog = false" size="default">取消</el-button>
|
<el-button type="primary" @click="conFirmDelete" size="default">确认</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</el-scrollbar>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { toRefs, reactive, defineComponent, ref } from 'vue';
|
import { storeToRefs } from 'pinia';
|
import { initBackEndControlRoutes } from '/@/router/backEnd';
|
import { useUserInfo } from '/@/stores/userInfo';
|
import { Session } from '/@/utils/storage';
|
import { ElMessage } from 'element-plus';
|
import type { FormInstance, FormRules } from 'element-plus';
|
let global: any = {
|
homeChartOne: null,
|
homeChartTwo: null,
|
homeCharThree: null,
|
dispose: [null, '', undefined]
|
};
|
|
interface stateType {
|
homeOne: Array<type>;
|
}
|
interface type {}
|
export default defineComponent({
|
name: 'approveProcessSetting',
|
setup() {
|
const userInfo = useUserInfo();
|
const { userInfos } = storeToRefs(userInfo);
|
const approveSteps = [
|
{
|
department: '动土',
|
manager: '',
|
others: ''
|
},
|
{
|
department: '动土',
|
manager: '',
|
others: ''
|
},
|
{
|
department: '动土',
|
manager: '',
|
others: ''
|
}
|
];
|
const showAdd = ref(false);
|
const deleteDialog = ref(false);
|
const chosenIndex = ref('');
|
const addProgress = ref({
|
department: '',
|
manager: '',
|
others: ''
|
});
|
const ruleFormRef = ref<FormInstance>();
|
const ProgressRules = reactive<FormRules>({
|
department: [{ required: true, message: '该选项不能为空', trigger: 'blur' }],
|
manager: [{ required: true, message: '该选项不能为空', trigger: 'blur' }]
|
});
|
|
// 确认新增
|
const confirmClick = async (formEl: FormInstance | undefined) => {
|
if (!formEl) return;
|
await formEl.validate((valid, fields) => {
|
if (valid) {
|
approveSteps.splice(chosenIndex.value + 1, 0, addProgress.value);
|
showAdd.value = false;
|
} else {
|
console.log('error submit!', fields);
|
}
|
});
|
};
|
const cancelClick = () => {
|
showAdd.value = false;
|
};
|
|
// 新增
|
const addFlow = (index) => {
|
showAdd.value = true;
|
chosenIndex.value = index;
|
};
|
|
// 删除记录
|
const deleteFlow = (index) => {
|
if (approveSteps.length > 1) {
|
deleteDialog.value = true;
|
chosenIndex.value = index;
|
} else {
|
ElMessage({
|
message: '抱歉最后一条无法删除',
|
type: 'warning'
|
});
|
}
|
};
|
const conFirmDelete = () => {
|
const i = chosenIndex.value;
|
approveSteps.splice(i, 1);
|
deleteDialog.value = false;
|
};
|
const colseDrawer = () => {
|
addProgress.value = {
|
department: '',
|
manager: '',
|
others: ''
|
};
|
};
|
const cancelEdit = () => {};
|
const confirmEdit = () => {};
|
const state = reactive<stateType>({});
|
// 折线图
|
const renderMenu = async (value: string) => {
|
Session.set('projectId', value);
|
userInfos.value.projectId = value;
|
await initBackEndControlRoutes();
|
};
|
return {
|
renderMenu,
|
showAdd,
|
approveSteps,
|
addProgress,
|
ruleFormRef,
|
ProgressRules,
|
chosenIndex,
|
deleteDialog,
|
colseDrawer,
|
conFirmDelete,
|
cancelClick,
|
deleteFlow,
|
addFlow,
|
confirmClick,
|
cancelEdit,
|
confirmEdit,
|
...toRefs(state)
|
};
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
$homeNavLengh: 8;
|
.home-container {
|
height: 100%;
|
overflow: hidden;
|
padding: 20px;
|
.homeCard {
|
width: 100%;
|
padding: 20px;
|
background: #fff;
|
border-radius: 4px;
|
}
|
.stepItem {
|
display: flex;
|
align-items: flex-start;
|
margin-bottom: 30px;
|
margin-left: 30px;
|
padding-bottom: 30px;
|
border-left: 2px solid #ccc;
|
&:first-of-type {
|
margin-top: 30px;
|
}
|
&:last-of-type {
|
margin-bottom: 0;
|
border-left: none;
|
}
|
.stepNum {
|
width: 30px;
|
height: 30px;
|
border-radius: 15px;
|
box-sizing: border-box;
|
color: #333;
|
border: 2px solid #999;
|
line-height: 26px;
|
text-align: center;
|
margin-right: 40px;
|
margin-left: -16px;
|
margin-top: -30px;
|
}
|
.stepCard {
|
margin-top: -30px;
|
|
.box-card {
|
width: 480px;
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
span {
|
font-weight: bold;
|
margin-left: 10px;
|
}
|
}
|
|
.text {
|
font-size: 14px;
|
}
|
|
.item {
|
margin-bottom: 18px;
|
}
|
}
|
}
|
&:hover .card-header {
|
color: #0098f5;
|
}
|
&:hover .stepNum {
|
border: 2px solid #0098f5;
|
color: #0098f5;
|
}
|
}
|
|
.el-form {
|
padding: 40px 20px;
|
}
|
}
|
</style>
|
