sgxt_web/src/views/backOfficeSystem/DeploymentDisposal/mpvGroup/components/approvalInfo.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>