hospital-project/src/views/evaluate/children/change/mould/manageObject.vue

<script setup lang="ts">
defineOptions({
  name: "evaluateChangeManageObject"
});
import { getState, getStateType, assessmentStatus } from "@/config/tag";
import { ref, reactive, onMounted } from "vue";
import {
  getAssessmentQuotaDetails,
  delAssessmentObject
} from "@/api/assessment";
import { getTemplateInfoList } from "@/api/templateInfo";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { treeDept, postListTreeWithUserApi } from "@/api/department";
import { Search } from "@element-plus/icons-vue";
import messagePerson from "./message.vue";
const $props = defineProps({
  message: {
    type: Object
  }
});
const valSelection = ref(false);
const messageData = ref({});
const initParams = reactive({
  params: {
    pageNumber: 1,
    pageSize: 10,
    userName: "",
    modelName: "",
    quotaName: "",
    assessmentId: "",
    orderField: "",
    orderType: ""
  },
  tmpParams: {
    page: 1,
    pageSize: 100
  },
  list: [],
  tmpList: []
});
onMounted(() => {
  Object.assign(messageData.value, $props.message);
  initParams.params.assessmentId = messageData.value.id;
  getAssessmentQuotaDetailsApi();
  getTemplateInfoListApi();
  postListTreeWithUserApi();
  console.log("onMounted", $props.message);
});
// 分页查询
const getAssessmentQuotaDetailsApi = async () => {
  const res = await getAssessmentQuotaDetails(initParams.tmpParams);
  if (res.code === 200) {
    initParams.tmpList = res.data.records;
  }
};
// 考核模板
const getTemplateInfoListApi = async () => {
  const { data, code } = await getTemplateInfoList(initParams.params);
  if (code == 200) {
    initParams.tmpList = data.records;
  }
};
// 删除
const delParams = reactive({
  assessmentId: "",
  objectAddVoList: [
    {
      assessmentObjectId: "",
      assessmentObjectName: ""
    }
  ]
});
// 被考核对象
const addPersonParams = reactive({
  assessmentId: "",
  objectAddVoList: [
    {
      assessmentObjectId: "",
      assessmentObjectName: ""
    }
  ]
});
const aaa = ref();
const delAssessmentObjectApi = async () => {
  if (valSelection.value) {
    ElMessageBox.confirm(
      "该员工考核删除后不可恢复，请谨慎操作！",
      "确定删除该员工考核吗？",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    ).then(async () => {
      const { code, msg } = await delAssessmentObject(delParams);
      if (code === 200) {
        getAssessmentQuotaDetailsApi();
        ElMessage.success("删除成功");
      } else {
        ElMessage.error(msg);
      }
    });
  } else {
    ElMessage.warning("请选择要删除的考核对象");
  }
};
// 批量选中
const changeSelection = val => {
  if (val) {
    valSelection.value = true;
    delParams.assessmentId = messageData.value.id;
    addPersonParams.assessmentId = messageData.value.id;
    val.forEach((item, index) => {
      delParams.objectAddVoList.forEach((item1, index1) => {
        if (index == index1) {
          item1.assessmentObjectId = item.id;
          item1.assessmentObjectName = item.name;
        }
      });
    });
  }
};
const router = useRouter();
const activeName = ref("first");
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    show: false
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    show: false
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    show: false
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    show: false
  }
];
// 批量导入
const addsImport = () => {
  router.push("/import/index");
};
const publishShow = ref(true);
const publish = () => {
  publishShow.value = false;
  ElMessage({
    message: "成功",
    type: "success"
  });
};
// 添加被考核人
const dialogVisibleAdd = ref(false);
const handleRreeSelect = data => {
  console.log("1111111", data);
};
const dialogVisibleAddShow = () => {
  dialogVisibleAdd.value = true;
};
// 跳转对应科室
const GoView = row => {
  router.push("/evaluate/children/change/mould/view");
};
</script>

<template>
  <div class="w-full">
    <div class="w-full flex items-center justify-between">
      <div class="flex items-center justify-between mt-2">
        <div class="bg-icon">
          <div>
            <el-icon><Tickets /></el-icon>
          </div>
        </div>
        <div>
          <div class="flex items-center justify-between">
            <h5>{{ messageData.name }}</h5>
            <el-tag :type="getStateType(messageData.assessmentStatus)">
              {{ assessmentStatus(messageData.assessmentStatus) }}
            </el-tag>
          </div>
          <el-text type="info" class="text-xs">
            {{ messageData.cycleValue }}
          </el-text>
        </div>
      </div>
      <div class="mr-10">
        <el-button v-if="publishShow" type="primary" @click="publish"
          >公布考核结果</el-button
        >
      </div>
    </div>
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="考核对象" name="first">
        <div class="w-full flex items-center justify-between">
          <div class="w-1/2 flex items-center justify-between">
            <el-text class="w-1/5">考核模板</el-text>
            <el-select
              v-model="initParams.params.modelName"
              placeholder="请选择"
              filterable
              clearable
              style="width: 250px"
              @change="getAssessmentQuotaDetailsApi"
            >
              <el-option
                v-for="itemTmp in initParams.tmpList"
                :key="itemTmp.id"
                :label="itemTmp.tpName"
                :value="itemTmp.tpName"
              />
            </el-select>
            <el-input
              v-model="initParams.params.userName"
              class="ml-2"
              clearable
              placeholder="搜索人员"
              :prefix-icon="Search"
              @change="getAssessmentQuotaDetailsApi"
            />
          </div>
          <div class="mr-10">
            <el-button type="primary" plain>批量调整执行人</el-button>
            <el-button type="primary" plain>批量重置流程</el-button>
            <el-button type="primary" plain @click="delAssessmentObjectApi">
              批量删除
            </el-button>
            <el-button type="primary" plain @click="dialogVisibleAddShow"
              >添加被考核人</el-button
            >
          </div>
        </div>
        <el-table
          :data="initParams.list"
          style="width: 100%"
          max-height="250"
          @selection-change="changeSelection"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            prop="assessmentModelName"
            label="考核名称"
            width="300"
            fixed
          />
          <el-table-column prop="date" label="周期" width="250" />
          <el-table-column prop="name" label="执行期" width="250" />
          <el-table-column prop="name" label="考核模板" width="300" />
          <el-table-column prop="name" label="状态" width="150" />
          <el-table-column prop="name" label="创建人" width="150" />
          <el-table-column prop="name" label="更新时间" width="150" />
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <!-- <el-button link :icon="Edit" /> -->
              <el-icon @click="GoView(row)"><View /></el-icon>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="考核指标" name="second"
        ><div class="w-full flex items-center justify-between">
          <div class="w-1/2 flex items-center justify-between">
            <el-text class="w-1/5">考核模板</el-text>
            <el-input class="ml-1" />
            <el-input class="ml-2" :prefix-icon="Search" />
          </div>
          <div class="mr-10">
            <el-button type="primary" plain @click="addsImport"
              >批量导入</el-button
            >
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="统计分析" name="third">
        <!--  -->
      </el-tab-pane>
      <el-tab-pane label="基础信息" name="fourth">
        <messagePerson />
      </el-tab-pane>
    </el-tabs>
    <!-- 添加被考核人 -->
    <el-dialog v-model="dialogVisibleAdd" title="添加被考核人" width="744">
      <div>
        <el-form
          ref="ruleFormRef"
          label-position="top"
          label-width="auto"
          :model="addPersonParams"
        >
          <el-form-item label="维度权重" label-position="top">
            <el-tree-select
              v-model="aaa"
              :data="treeDept"
              multiple
              :props="{
                label: 'userName',
                value: 'userCode',
                children: 'childrenRes'
              }"
              :render-after-expand="false"
              show-checkbox
              check-strictly
              check-on-click-node
              style="width: 240px"
              @node-click="handleRreeSelect"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer w-full flex justify-between mt-4">
          <div>
            <el-button>取消</el-button>
            <el-button type="primary"> 确认 </el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.bg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  margin-right: 5px;
  background: #00a870;
  border-radius: 5px;

  div {
    // border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    height: 60%;
    color: #00a870;
    background: #fff;
    border-radius: 2px;
  }
}
</style>