feat✨: 1.对接全域布控下菜单的增删查改功能，以及用户操作流程优化。2.对接人力情报采集系统采集流转列表，搜索，新增接口

src/views/backOfficeSystem/DeploymentDisposal/mpvGroup/components/approvalInfo.vue

@@ -0,0 +1,303 @@
+<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>