304 lines
8.3 KiB
Vue
304 lines
8.3 KiB
Vue
<template>
|
||
<el-form :model="formData" label-width="auto" label-position="left">
|
||
<FormMessage
|
||
v-model="listQuery"
|
||
:formList="formData"
|
||
ref="elform"
|
||
:rules="rules"
|
||
>
|
||
<!-- 自定义插槽（人员标签） -->
|
||
<template #jsdwdm>
|
||
<el-select
|
||
v-model="listQuery.jsdwdm"
|
||
placeholder="请选择处置接收单位"
|
||
style="width: 240px"
|
||
>
|
||
<el-option
|
||
v-for="item in deptList"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value.toString()"
|
||
/>
|
||
</el-select>
|
||
</template>
|
||
</FormMessage>
|
||
|
||
<!-- 审批流程 -->
|
||
<div class="approval-flow">
|
||
<div class="approval-flow">
|
||
<div class="step" v-for="(item, index) in step" :key="`${index}step`">
|
||
<div class="icon">
|
||
<div class="circle"></div>
|
||
<div class="line"></div>
|
||
</div>
|
||
<div>
|
||
<div>{{ item.title }}</div>
|
||
<div class="desc">
|
||
<div class="description flexcc">
|
||
<!-- 使用方案1 + 方案2 -->
|
||
<div
|
||
class="description-item"
|
||
:class="{ 'disabled-item': item.default }"
|
||
@click="!item.default && handleSelectStep(index)"
|
||
>
|
||
{{ item.sqrXm }}
|
||
</div>
|
||
<div class="description-item">{{ item.sqrSsbmmc }}</div>
|
||
<div class="step-description" v-if="item.description">
|
||
{{ item.description }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<ChooseUser
|
||
v-model="chooseUserVisible"
|
||
@choosedUsers="handleUserSelected"
|
||
:roleIds="roleIds"
|
||
/>
|
||
</el-form>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
|
||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||
import ChooseUser from "@/components/MyComponents/ChooseUser/index.vue";
|
||
import DialogList from "@/views/backOfficeSystem/IntelligentControl/myControl/components/dialogList.vue";
|
||
import { qcckPost, qcckPut } from "@/api/qcckApi.js";
|
||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||
import { fa } from "element-plus/es/locale.mjs";
|
||
import { selectUserDeptPage } from "@/api/user-manage";
|
||
|
||
const { proxy } = getCurrentInstance();
|
||
const { D_GS_BK_CZJSDWLX, D_GS_BK_TJFS, D_BZ_SF } = proxy.$dict(
|
||
"D_GS_BK_CZJSDWLX",
|
||
"D_GS_BK_TJFS",
|
||
"D_BZ_SF"
|
||
); //获取字典数据
|
||
const listQuery = ref({}); //表单
|
||
const chooseUserVisible = ref(false); //审批流程
|
||
const roleIds = ref([]); //角色id
|
||
let currentSelectedIndex = null;
|
||
const deptList = ref([]); //部门列表
|
||
const formData = ref([
|
||
{
|
||
label: "接收单位",
|
||
prop: "jsdwdm",
|
||
type: "slot"
|
||
},
|
||
{
|
||
label: "处置接收单位类型",
|
||
prop: "jsdwlx",
|
||
type: "select",
|
||
options: D_GS_BK_CZJSDWLX
|
||
},
|
||
{ label: "是否反馈", prop: "fkSf", type: "select", options: D_BZ_SF }
|
||
]);
|
||
const rules = reactive({
|
||
bkBt: [{ required: true, message: "请选择处置接收单位", trigger: "blur" }],
|
||
// bkObj: [{ required: true, message: "请选择提交方式", trigger: "blur" }],
|
||
bkSjQs: [{ required: true, message: "请选择签收时间", trigger: "change" }]
|
||
});
|
||
const step = ref([
|
||
{ sqrXm: "发起人", sqrSsbmmc: "发起部门", title: "发起申请", default: true },
|
||
{
|
||
sqrXm: "发起人",
|
||
sqrSsbmmc: "发起部门",
|
||
title: "审核确认",
|
||
default: false,
|
||
status: "", // 动态设置状态
|
||
description: "" // 动态设置描述（如不通过原因）
|
||
},
|
||
{
|
||
sqrXm: "发起人",
|
||
sqrSsbmmc: "发起部门",
|
||
title: "审批确认",
|
||
default: false,
|
||
status: "", // 动态设置状态
|
||
description: "" // 动态设置描述（如不通过原因）
|
||
}
|
||
]);
|
||
|
||
onMounted(() => {
|
||
getdepartmentList();
|
||
});
|
||
// 获取部门列表
|
||
const getdepartmentList = () => {
|
||
selectUserDeptPage().then((res) => {
|
||
deptList.value = res?.records.map((item) => ({
|
||
label: item.deptName,
|
||
value: item.deptId
|
||
}));
|
||
// tableData.value = res?.records;
|
||
});
|
||
};
|
||
// 处理选择的人员数据
|
||
const handleUserSelected = (userData) => {
|
||
if (currentSelectedIndex !== null) {
|
||
step.value[currentSelectedIndex] = {
|
||
...step.value[currentSelectedIndex],
|
||
sqrXm: userData[0].userName,
|
||
sqrSsbmmc: userData[0].deptName,
|
||
userId: userData[0].id,
|
||
rawData: userData[0] // 保留原始数据（可选）
|
||
};
|
||
if (currentSelectedIndex == 1) {
|
||
// 同时更新listQuery（如果需要）
|
||
listQuery.value = {
|
||
...listQuery.value,
|
||
shrSfzh: userData[0].idEntityCard,
|
||
shrSsbmdm: userData[0].deptId,
|
||
shrSsbmmc: userData[0].deptName,
|
||
shrXm: userData[0].userName
|
||
};
|
||
} else if (currentSelectedIndex == 2) {
|
||
// 同时更新listQuery（如果需要）
|
||
listQuery.value = {
|
||
...listQuery.value,
|
||
sprSfzh: userData[0].idEntityCard,
|
||
sprSsbmdm: userData[0].deptId,
|
||
sprSsbmmc: userData[0].deptName,
|
||
sprXm: userData[0].userName
|
||
};
|
||
}
|
||
}
|
||
console.log(step.value, "选择的数据");
|
||
chooseUserVisible.value = false;
|
||
};
|
||
|
||
// 点击步骤触发
|
||
const handleSelectStep = (index) => {
|
||
currentSelectedIndex = index;
|
||
chooseUserVisible.value = true;
|
||
};
|
||
|
||
// 2. 暴露获取数据的方法
|
||
const getFormData = () => {
|
||
// 可以在这里添加验证逻辑
|
||
return {
|
||
formData: listQuery.value
|
||
};
|
||
};
|
||
// 接收父组件传入的数据并回显
|
||
const setFormData = (data) => {
|
||
listQuery.value = {
|
||
...data // 假设 data 包含所有需要的字段
|
||
};
|
||
console.log(data, "部门");
|
||
step.value = [
|
||
{
|
||
sqrXm: "发起人",
|
||
sqrSsbmmc: "发起部门",
|
||
title: "发起申请",
|
||
default: true
|
||
},
|
||
{
|
||
sqrXm: data.shrXm || "系统管理", // 审核人姓名
|
||
sqrSsbmmc: data.shrSsbmmc || "西藏", // 审核部门
|
||
title: "审核确认",
|
||
status: "", // 动态设置状态
|
||
description: "" // 动态设置描述（如不通过原因）
|
||
},
|
||
{
|
||
sqrXm: data.sprXm || "测试", // 审批人姓名
|
||
sqrSsbmmc: data.sprSsbmmc || "西藏", // 审批部门
|
||
title: "审批确认",
|
||
status: "", // 动态设置状态
|
||
description: "" // 动态设置描述（如不通过原因）
|
||
}
|
||
];
|
||
// 根据 bkZt 的值设置不同的状态
|
||
switch (data.bkZt) {
|
||
case "02": // 审核中
|
||
step.value[1].status = "process";
|
||
step.value[1].description = "审核中";
|
||
break;
|
||
case "03": // 审核不通过
|
||
step.value[1].status = "error";
|
||
step.value[1].description = `审核不通过（原因：${data.bkshBtgyy}）`;
|
||
break;
|
||
case "04": // 审批中
|
||
step.value[1].status = "finish"; // 审核已完成
|
||
step.value[2].status = "process"; // 审批中
|
||
step.value[2].description = "审批中";
|
||
break;
|
||
case "05": // 审批通过
|
||
step.value[1].status = "finish"; // 审核已完成
|
||
step.value[2].status = "finish"; // 审批已完成
|
||
step.value[2].description = "审批通过";
|
||
break;
|
||
case "06": // 审批不通过
|
||
step.value[1].status = "finish"; // 审核已完成
|
||
step.value[2].status = "error"; // 审批不通过
|
||
step.value[2].description = `审批不通过（原因：${data.bkshBtgyy}）`;
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
};
|
||
|
||
// 3. 暴露方法给父组件
|
||
defineExpose({
|
||
getFormData,
|
||
setFormData
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.step {
|
||
// position: relative;
|
||
display: flex;
|
||
gap: 5px;
|
||
box-sizing: border-box;
|
||
.desc {
|
||
margin: 5px;
|
||
color: #929090;
|
||
// width: 350px;
|
||
}
|
||
.icon {
|
||
// position: absolute;
|
||
// top: 0;
|
||
// left: 0;
|
||
text-align: center;
|
||
.circle {
|
||
height: 14px;
|
||
width: 14px;
|
||
border-radius: 50%;
|
||
background-color: rgb(196, 219, 240);
|
||
}
|
||
.line {
|
||
margin: 0 auto;
|
||
width: 0;
|
||
height: calc(100% - 14px);
|
||
border: 1px dashed rgb(196, 219, 240);
|
||
}
|
||
}
|
||
}
|
||
|
||
.unit-selection {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
}
|
||
.description {
|
||
gap: 10px;
|
||
}
|
||
.description-item {
|
||
width: 300px;
|
||
height: 30px;
|
||
padding: 0 20px;
|
||
line-height: 30px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 4px;
|
||
color: rgb(131, 132, 135);
|
||
box-sizing: border-box;
|
||
}
|
||
.disabled-item {
|
||
cursor: not-allowed;
|
||
opacity: 0.6;
|
||
pointer-events: none;
|
||
}
|
||
</style>
|