hospital-project/src/views/evaluate/children/change/manage.vue

<script setup lang="ts">
defineOptions({
  name: "evaluateChangeManage"
});
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
import addExam from "./manage/addExam.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import manageObject from "./mould/manageObject.vue";
import dayjs from "dayjs";
import {
  getAssessmentPageList,
  getDelAssessment,
  postCopyAssessment
} from "@/api/manage";
import { assessmentStatus, getStateType } from "@/config/tag";
const manageObjectRef = ref();
const manageObjectShow = ref(false);
const addExamRef = ref();
const addExamShow = ref(false);
const router = useRouter();

const newAdd = () => {
  addExamRef.value.open();
};
const params = reactive({
  tableData: [],
  params: {
    pageNumber: 1,
    pageSize: 10,
    name: ""
  },
  total: 0
});
const getAssessmentPageListApi = async () => {
  const { code, msg, data } = await getAssessmentPageList(params.params);
  if (code === 200) {
    params.tableData = data.records;
    params.total = data.totalRow;
  } else {
    ElMessage.error(msg);
  }
};
getAssessmentPageListApi();
const handleRowClick = (row: any) => {
  console.log(row);
};
const manageObjectItme = ref({});
const setEdit = (row: any) => {
  // router.push({ path: "/evaluate/children/change/mould/manageObject" });\
  manageObjectShow.value = true;
  Object.assign(manageObjectItme.value, row);
};
// 删除
const setDelete = (row: any) => {
  ElMessageBox.confirm("此操作将永久删除该考核, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    const { code, msg } = await getDelAssessment(row.id);
    if (code === 200) {
      getAssessmentPageListApi();
      ElMessage.success("删除成功");
    } else {
      ElMessage.error(msg);
    }
  });
};
const handleCurrentChange = (val: number) => {
  params.params.pageNumber = val;
  getAssessmentPageListApi();
};
const handleSizeChange = (val: number) => {
  params.params.pageSize = val;
  getAssessmentPageListApi();
};
// 复制考核
const dialogVisibleCopy = ref(false);
const copyTitle = ref("");
const copyForm = reactive({ name: "" });
const copyManage = (row: any) => {
  console.log(row);
  Object.assign(copyForm, row);
  copyTitle.value = row.name;
  dialogVisibleCopy.value = true;
};
const handleClose = () => {
  dialogVisibleCopy.value = false;
};
const saveCopy = async () => {
  const { code, msg } = await postCopyAssessment(copyForm);
  if (code === 200) {
    ElMessage.success("复制成功");
    dialogVisibleCopy.value = false;
    getAssessmentPageListApi();
  } else {
    ElMessage.error(msg);
  }
};
</script>

<template>
  <div class="w-[100%]">
    <!-- 发起考核 -->
    <addExam
      ref="addExamRef"
      v-model="addExamShow"
      @addHandClick="getAssessmentPageListApi"
    />
    <manageObject v-if="manageObjectShow" :message="manageObjectItme" />
    <div v-else>
      <div class="mb-2 flex gap-2 justify-between flex-wrap">
        <div class="flex mt-2">
          <div class="flex mr-2">
            <el-input
              v-model="params.params.name"
              style="width: 500px"
              placeholder="搜索考核模板"
              :prefix-icon="Search"
              clearable
              @change="getAssessmentPageListApi"
            />
          </div>
        </div>
        <div class="flex pt-2 mr-6">
          <Auth :value="['发起考核']">
            <el-button type="primary" class="mr-8" @click="newAdd"
              >发起考核</el-button
            >
          </Auth>
        </div>
      </div>
      <div class="mt-8">
        <el-table
          :data="params.tableData"
          style="width: 100%"
          max-height="250"
          @row-click="handleRowClick"
        >
          <el-table-column prop="name" label="考核名称" width="300" fixed />
          <el-table-column prop="cycle" label="周期" />
          <el-table-column prop="cycleValue" label="执行期" />
          <el-table-column prop="name" label="考核模板" width="250" />
          <el-table-column prop="assessmentStatus" label="状态">
            <template #default="{ row }">
              <el-tag :type="getStateType(row.assessmentStatus)">
                {{ assessmentStatus(row.assessmentStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createUser" label="创建人" />
          <el-table-column prop="updateTime" label="更新时间">
            <template #default="{ row }">
              <div v-if="row.updateTime">
                {{ dayjs(row.updateTime).format("YYYY-MM-DD HH:mm:ss") }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template #default="{ row }">
              <!-- <el-button link :icon="Edit" /> -->
              <Auth :value="['编辑']">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link navbar-bg-hover select-none">
                    <el-icon @click="setEdit(row)"><Edit /></el-icon>
                  </span>
                </el-dropdown>
              </Auth>
              <el-dropdown class="ml-2" trigger="click">
                <span class="el-dropdown-link navbar-bg-hover select-none">
                  <el-icon><More /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu class="setting">
                    <Auth :value="['删除']">
                      <el-dropdown-item @click="setDelete(row)">
                        <el-text type="danger">删除</el-text>
                      </el-dropdown-item>
                    </Auth>
                    <Auth :value="['复制']">
                      <el-dropdown-item @click="copyManage(row)">
                        复制
                      </el-dropdown-item>
                    </Auth>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="flex justify-between item-center">
        <div class="float-left mt-5 ml-2 total">共{{ params.total }}条数据</div>
        <div class="float-right mt-8 mr-8">
          <el-pagination
            v-model:current-page="params.params.pageNumber"
            v-model:page-size="params.params.pageSize"
            background
            layout="prev, pager, next"
            :total="params.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <el-dialog
      v-model="dialogVisibleCopy"
      :title="'复制来源：' + copyTitle"
      width="500"
    >
      <el-form :model="copyForm" label-width="auto" style="max-width: 600px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="copyForm.name" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="saveCopy"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped>
.total {
  font-size: 14px;

  /* font-family: PingFangSC-Regular; */
  font-weight: 400;
  line-height: 22px;
  color: #0009;
  letter-spacing: 0;
}
</style>