hospital-project/src/views/draw/children/department/componements/seachOld.vue

<script setup>
import { ref, reactive, nextTick } from "vue";
import { getTemplateInfoList } from "@/api/templateInfo";
import { userPageWhitOrganization } from "@/api/userSetting";
import { getAssessmentPageList } from "@/api/manage";
import { postListTree } from "@/api/department";
import {
  getAssessmentList,
  getModelListByAssessmentId,
  getUserListObjectByModelId
} from "@/api/draw";
import { useRouter, useRoute } from "vue-router";

const $emit = defineEmits(["handClick"]);

const dataList = reactive({
  teplist: [],
  personList: [],
  magList: [],
  deptList: [],
  params: {
    assessmentId: "",
    assessmentModelId: "",
    deptCode: "",
    assessmentObjectId: ""
  }
});

// 考核模板
const getTemplateInfoListApi = async selectedItem => {
  const { data, code } = await getModelListByAssessmentId(selectedItem);
  if (code === 200) {
    dataList.teplist = data;
  }
};
// 员工
const userPageWhitOrganizationApi = async (selectedItem, type) => {
  const { data, code } = await getUserListObjectByModelId({
    type: 1,
    assessmentId: selectedItem.assessmentId,
    modelId: selectedItem.assessmentModelId
  });
  if (code === 200) {
    dataList.personList = data;
  }
};

// 部门
const postListTreeApi = async selectedItem => {
  const { data, code } = await getUserListObjectByModelId({
    type: 1,
    assessmentId: selectedItem.assessmentId,
    modelId: selectedItem.assessmentModelId
  });
  if (code === 200) {
    dataList.deptList = data;
  }
};
// ----------------------------
const init = reactive({
  assessmentName: "",
  assessmentModelName: "",
  deptName: "",
  assessmentObjectName: "",
  dimensionName: ""
});
const handClickInit1 = value => {
  if (value) {
    const selectedItem = dataList.magList.find(item => item.id === value);
    init.assessmentName = selectedItem.name;
    localStorage.setItem("fileName", selectedItem.name);
    getTemplateInfoListApi(selectedItem);
  }
  Object.assign(dataList.params, {
    assessmentModelId: "",
    assessmentObjectId: ""
  });
  Object.assign(init, {
    assessmentModelName: "",
    deptName: "",
    assessmentObjectName: "",
    dimensionName: ""
  });
  $emit(
    "handClick",
    {
      ...dataList.params,
      ...init
    },
    0
  );
};
const handClickInit2 = value => {
  if (value) {
    const selectedItem = dataList.teplist.find(
      item => item.assessmentModelId === value
    );
    init.assessmentModelName = selectedItem.assessmentModelName;
    userPageWhitOrganizationApi(selectedItem, 0);
    postListTreeApi(selectedItem);
  }

  Object.assign(dataList.params, {
    assessmentObjectId: ""
  });
  $emit(
    "handClick",
    {
      ...dataList.params,
      ...init
    },
    0
  );
};

const handClickInit3 = value => {
  if (value) {
    const selectedItem = dataList.deptList.find(
      item => item.assessmentObjectId === value
    );
    init.assessmentObjectName = selectedItem.assessmentObjectName;
    // init.deptName = value.deptName;
  }

  $emit(
    "handClick",
    {
      ...dataList.params,
      ...init
    },
    1
  );
};

const route = useRoute();
const getSearchFrom = () => {
  if (Object.keys(route.query).length > 0) {
    console.log("路由", route.query);
    const {
      assessmentId,
      assessmentModelId,
      assessmentObjectId,
      assessmentName,
      assessmentModelName,
      assessmentObjectName
    } = route.query;
    const obj = ["assessmentId", "assessmentModelId", "assessmentObjectId"];
    const initObj = [
      "assessmentName",
      "assessmentModelName",
      "assessmentObjectName"
    ];
    obj.map(item => {
      dataList.params[item] = route.query[item];
    });
    initObj.map(item => {
      init[item] = route.query[item];
    });
    const selectedItem = dataList.magList.find(
      item => item.id === assessmentId
    );
    getTemplateInfoListApi(selectedItem);

    setTimeout(() => {
      const selectedItems = dataList.teplist.find(
        item => item.assessmentModelId === assessmentModelId
      );
      console.log("selectedItems", selectedItems);
      userPageWhitOrganizationApi(selectedItems, 1);
      postListTreeApi(selectedItems, 1);
      setTimeout(() => {
        $emit(
          "handClick",
          {
            ...dataList.params,
            ...init
          },
          1
        );
      }, 100);
    }, 300);
  }
};

// 考核活动
const getAssessmentPageListApi = async () => {
  const { data, code } = await getAssessmentList({
    type: 1
  });
  if (code === 200) {
    dataList.magList = data;
    getSearchFrom();
  }
};
getAssessmentPageListApi();

// 清除条件
const handClickClear1 = () => {
  dataList.teplist = [];
  dataList.deptList = [];
};
const handClickClear2 = () => {
  dataList.deptList = [];
  dataList.params.assessmentObjectId = "";
};
</script>

<template>
  <div class="w-full">
    <div class="mb-2 flex gap-2 justify-between flex-wrap">
      <div class="w-[100%] flex mt-2">
        <div class="flex mr-2">
          <div class="text-sm leading-8 mr-3">考核活动</div>
          <el-select
            v-model="dataList.params.assessmentId"
            clearable
            filterable
            placeholder="请选择"
            style="width: 200px"
            @change="handClickInit1"
            @clear="handClickClear1"
          >
            <el-option
              v-for="item in dataList.magList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="flex mr-2">
          <div class="text-sm leading-8 mr-3">考核模板</div>
          <el-select
            v-model="dataList.params.assessmentModelId"
            clearable
            filterable
            placeholder="请选择"
            style="width: 200px"
            @change="handClickInit2"
            @clear="handClickClear2"
          >
            <el-option
              v-for="item in dataList.teplist"
              :key="item.assessmentModelId"
              :label="item.assessmentModelName"
              :value="item.assessmentModelId"
            />
          </el-select>
        </div>
        <div class="flex mr-2">
          <div class="text-sm leading-8 mr-3">科室</div>
          <el-select
            v-model="dataList.params.assessmentObjectId"
            clearable
            filterable
            placeholder="请选择"
            style="width: 200px"
            @change="handClickInit3"
          >
            <el-option
              v-for="item in dataList.deptList"
              :key="item.assessmentObjectId"
              :label="item.assessmentObjectName"
              :value="item.assessmentObjectId"
            />
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>