hospital-project/src/views/indexDefine/children/define.vue

<script setup lang="ts">
defineOptions({
  name: "IndexChildrenDefine"
});
import { ref, reactive, markRaw, onMounted, computed } from "vue";
import dialogVue from "./components/dialog.vue";
import editDrawer from "./components/editDrawer.vue";
import logDrawer from "./components/logDrawer.vue";
import IndexDefineImport from "./import/index.vue";
import { Edit, More } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Check } from "@element-plus/icons-vue";
import { Search } from "@element-plus/icons-vue";
import { getSelectDictListtApi, select } from "@/api/select";
import { getQuotaPageList, delQuota, postUpdateDept } from "@/api/indexDefine";
import { getStateData, getStateType } from "@/config/tag";
import dayjs from "dayjs";
const value = ref("");
const dialogShow = ref();
const EditdrawerShow = ref();
const EditshowDrawer = ref(false);
// 日志
const logDrawerRef = ref();
const logDrawerShow = ref(false);
onMounted(() => {
  getSelectDictListtApi();
});
const options = [
  {
    value: "0",
    label: "草 稿"
  },
  {
    value: "1",
    label: "已上架"
  },
  {
    value: "2",
    label: "已下架"
  }
];
const currentPage4 = ref(5);
const pageSize4 = ref(100);
const params = reactive({
  params: {
    pageNumber: 1,
    pageSize: 10,
    param: null,
    categoryName: null,
    statue: null,
    orderField: "updateTime",
    orderType: null
  },
  records: [],
  total: 0
});
// 分页
const getQuotaPageListApi = async () => {
  const { code, data } = await getQuotaPageList(params.params);
  if (code === 200) {
    params.records = data.records;
    params.total = data.totalRow;
  }
};
getQuotaPageListApi();
const handleSizeChange = (val: number) => {
  params.params.pageSize = val;
  getQuotaPageListApi();
};
const handleCurrentChange = (val: number) => {
  params.params.pageNumber = val;
  getQuotaPageListApi();
};
const showDialog = ref(false);
const newAddIndex = () => {
  showDialog.value = true;
  dialogShow.value.open();
};
const close = () => {
  showDialog.value = false;
  getQuotaPageListApi();
};
// 编辑
const setEdit = row => {
  EditshowDrawer.value = true;
  EditdrawerShow.value.open(row);
};
// 删除
const delQuotaApi = async row => {
  const { code } = await delQuota(row.id);
  if (code === 200) {
    ElMessage({
      type: "success",
      message: "删除成功"
    });
    getQuotaPageListApi();
  }
};
const setDelete = row => {
  ElMessageBox.confirm("指标删除后无法恢复", "确定要删除这项指标吗", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      delQuotaApi(row);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消"
      });
    });
};
// 批量导入
const sizeImport = ref(false);
const GoSizeImport = () => {
  sizeImport.value = !sizeImport.value;
};
// 日志
const logs = row => {
  logDrawerRef.value.open(row);
  logDrawerShow.value = true;
};
// 发布
const release = row => {
  row.statue = 1;
  postUpdateDeptApi(row, "发布");
  // ElMessageBox.confirm("确定要发布这项指标吗", "", {
  //   confirmButtonText: "确认",
  //   cancelButtonText: "取消",
  //   type: "warning"
  // })
  //   .then(() => {
  //   })
  //   .catch(() => {
  //     ElMessage({
  //       type: "info",
  //       message: "已取消"
  //     });
  //   });
};
// 下架
const offShelf = row => {
  row.statue = 2;
  postUpdateDeptApi(row, "下架");
  // ElMessageBox.confirm("确定要下架这项指标吗", "", {
  //   confirmButtonText: "确认",
  //   cancelButtonText: "取消",
  //   type: "warning"
  // })
  //   .then(() => {

  //   })
  //   .catch(() => {
  //     ElMessage({
  //       type: "info",
  //       message: "已取消"
  //     });
  //   });
};
// 修改信息
const postUpdateDeptApi = async (row, state) => {
  const res = await postUpdateDept(row);
  if (res.code == 200) {
    ElMessage({
      type: "success",
      message: `${state}成功`
    });
    getQuotaPageListApi();
  }
};

// 更新时间返回值
const formattedTime = time => {
  if (time) {
    return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
  } else {
    return "无效日期";
  }
};
const changeSort = ({ column, prop, order }) => {
  if (order === "ascending") {
    params.params.orderType = "升序";
    getQuotaPageListApi();
  } else if (order === "descending") {
    params.params.orderType = "降序";
    getQuotaPageListApi();
  }
};
</script>

<template>
  <div>
    <!-- 批量导入 -->
    <IndexDefineImport v-if="sizeImport" @handleImport="GoSizeImport" />
    <div v-else>
      <!-- 指标详情 -->
      <editDrawer
        ref="EditdrawerShow"
        v-model:drawerValue="EditshowDrawer"
        @closeEditDialog="getQuotaPageListApi"
      />
      <!-- 新建 -->
      <dialogVue
        ref="dialogShow"
        v-model:modelValue="showDialog"
        @closeDialog="close"
      />
      <!-- 日志 -->
      <logDrawer ref="logDrawerRef" v-model="logDrawerShow" />
      <div class="w-[100%]">
        <div class="mb-2 flex gap-2 justify-between flex-wrap">
          <div class="flex mt-2">
            <div class="flex mr-2">
              <div class="text-sm leading-8 mr-3">指标分类</div>
              <el-select
                v-model="params.params.categoryName"
                clearable
                filterable
                placeholder="请选择"
                style="width: 150px"
                @change="getQuotaPageListApi"
              >
                <el-option
                  v-for="(item, index) in select"
                  :key="index"
                  :label="item.dictValue"
                  :value="item.dictValue"
                />
              </el-select>
            </div>
            <div class="flex mr-2">
              <div class="text-sm leading-8 mr-3">状态</div>
              <el-select
                v-model="params.params.statue"
                clearable
                filterable
                placeholder="请选择"
                style="width: 150px"
                @change="getQuotaPageListApi"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="flex mr-2">
              <el-input
                v-model="params.params.param"
                style="width: 300px"
                :prefix-icon="Search"
                clearable
                placeholder="搜索指标名称、编码、口径、定义"
                @change="getQuotaPageListApi"
              />
            </div>
          </div>
          <div class="flex pt-2 mr-6">
            <Auth :value="['批量导入']">
              <el-button class="mr-2" @click="GoSizeImport">批量导入</el-button>
            </Auth>
            <Auth :value="['创建指标']">
              <el-button type="primary" class="mr-2" @click="newAddIndex"
                >创建指标</el-button
              >
            </Auth>
          </div>
        </div>
      </div>
      <div class="mt-8">
        <el-table
          :data="params.records"
          style="z-index: 0; width: 100%"
          @sort-change="changeSort"
        >
          <el-table-column
            prop="id"
            label="指标编号"
            width="100"
            show-overflow-tooltip
          />
          <el-table-column prop="name" label="指标名称" show-overflow-tooltip />
          <el-table-column
            prop="categoryName"
            label="指标分类"
            show-overflow-tooltip
          />
          <el-table-column prop="address" label="状态">
            <template #default="{ row }">
              <el-tag :type="getStateType(row.statue)">
                {{ getStateData(row.statue) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="define"
            label="指标定义"
            show-overflow-tooltip
          />
          <el-table-column
            prop="caliber"
            label="指标口径"
            show-overflow-tooltip
          />
          <el-table-column
            prop="source"
            label="数据来源"
            show-overflow-tooltip
          />
          <el-table-column prop="updateTime" label="更新时间" sortable="custom">
            <template #default="{ row }">
              {{ formattedTime(row.updateTime) }}
              <!-- {{ dayjs(row.updateTime).format("YYYY-MM-DD HH:mm:ss") }} -->
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <!-- <el-button link :icon="Edit" /> -->
              <Auth :value="['编辑']">
                <el-dropdown trigger="click">
                  <span
                    class="el-dropdown-link navbar-bg-hover select-none pt-1"
                  >
                    <!-- <el-text type="primary" @click="setEdit(row)">编辑</el-text>-->
                    <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 pt-1">
                  <!--<el-text type="primary">更多</el-text>-->
                  <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>
                    <el-dropdown-item
                      v-if="row.statue != 1"
                      @click="release(row)"
                    >
                      发布
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="row.statue != 2"
                      @click="offShelf(row)"
                    >
                      下架
                    </el-dropdown-item>
                    <el-dropdown-item @click="logs(row)">
                      日志
                    </el-dropdown-item>
                  </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-5 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>
  </div>
</template>

<style lang="scss" scoped>
.total {
  font-size: 14px;
  // font-family: PingFangSC-Regular;
  font-weight: 400;
  line-height: 22px;
  color: #0009;
  letter-spacing: 0;
}

.header {
  display: flex;
  width: 100%;
  line-height: 100%;
  border: 1px solid red;
}

::v-deep .el-table .el-table__header th {
  background-color: #f2f3f5;

  /* 设置背景色 */
}

::v-deep .el-table .el-table__cell {
  z-index: 99;
  // background-color: #f2f3f5; /* 设置背景色 */
}

.setting {
  font-size: 12px;
}
</style>