thridLargeScreen/src/views/dataCenter/components/DialogRegisterData.vue

<template>
  <div>
    <el-dialog title="" v-model="dialogVisible">
      <div>
        <div class="flex justify-between mb-3">
          <h3 class="flex items-center">
            本次数据集共包含
            <h2 style="color: #f56c6c; font-size: 30px">
              {{ state.dataCount.total }}人
            </h2>
            的数据，已注册
            <h2 style="color: #f56c6c; font-size: 30px">
              {{ state.dataCount.registered }}人
            </h2>
            ，未注册
            <h2 style="color: #f56c6c; font-size: 30px">
              {{ state.dataCount.notRegistered }}人
            </h2>
          </h3>
          <el-button type="primary" plain @click="getDataCount">刷新</el-button>
        </div>
        <div class="mt-2" style="width: 500px">
          <el-input
            v-model="state.query.key"
            placeholder="请输入搜索内容"
            class="input-with-select"
          >
            <template #prepend>
              <el-select
                v-model="state.query.type"
                placeholder="请选择"
                style="width: 115px"
                clearable
              >
                <el-option
                  :label="item.name"
                  :value="item.key"
                  v-for="item in keyList"
                  :key="item.type"
                />
              </el-select>
            </template>
            <template #append>
              <el-button
                :icon="Search"
                @click="
                  () => {
                    state.query.page = 1;
                    getUserList();
                  }
                "
                >搜索</el-button
              >
            </template>
          </el-input>
        </div>

        <el-table
          :data="state.tableData"
          ref="multipleTableRef"
          @selection-change="handleSelectionChange"
          class="w-full mt-4"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="gender" label="性别"></el-table-column>
          <el-table-column label="检查时年龄 " prop="age"></el-table-column>
          <el-table-column label="ID " prop="userId"></el-table-column>
          <el-table-column label="手机号" prop="mobile"></el-table-column>
          <el-table-column label="身份证号" prop="IDCard"></el-table-column>
          <el-table-column label="注册状态" #default="{ row }">
            <span :class="reportDataStatus[row.registerStatus]?.class">{{
              reportDataStatus[row.registerStatus].label
            }}</span>
          </el-table-column>
          <el-table-column label="档案号" #default="{ row }">
            <el-tag
              class="cursor-copy"
              size="large"
              v-copy:click="row.archiveId"
              v-if="row.archiveId"
            >
              <span class="align-middle select-none">{{ row.archiveId }}</span>
              <CopyDocument class="inline-block align-middle ml-2 w-4 h-4" />
            </el-tag>
            <span v-else>-</span>
          </el-table-column>
        </el-table>

        <el-pagination
          class="justify-end mt-4"
          :current-page="state.query.page"
          :page-size="state.query.pageSize"
          :total="state.count"
          background
          layout="total, prev, pager, next, jumper"
          @current-change="
            page => {
              state.query.page = page;
              getUserList();
            }
          "
        ></el-pagination>
      </div>
      <template #footer>
        <div>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="handleSubmit"
            :disabled="
              state.tableData.filter(v => v.registerStatus == 1).length
            "
            >确认注册</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  defineProps,
  defineEmits,
  watch,
  reactive,
  h
} from "vue";
import { Search } from "@element-plus/icons-vue";
import { request } from "@/utils";
import { ElMessage, ElMessageBox } from "element-plus";
import { nextTick, title } from "process";

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  id: {
    type: [Number, String]
  }
});
const emits = defineEmits(["update:show", "success"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      initData();
    } else {
    }
  }
);

const state = reactive({
  query: {
    key: "",
    value: "",
    page: 1,
    pageSize: 15
  },
  tableData: [],
  count: 0,
  dataCount: {},
  multipleSelection: []
});

const keyList = [
  {
    key: "name",
    name: "姓名"
  },
  {
    key: "user_id",
    name: "ID"
  },
  {
    key: "mobile",
    name: "手机号"
  },
  {
    key: "id_card",
    name: "身份证号"
  }
];
const reportDataStatus = {
  0: {
    label: "未注册",
    class: "text-yellow-500"
  },
  1: {
    label: "注册成功",
    class: "text-green-500"
  },
  2: {
    label: "注册失败",
    class: "text-red-500"
  }
};
const multipleTableRef = ref();
const getUserList = () => {
  request
    .get("/dataService/dataParse/mechanism/parsed/users", {
      params: { ...state.query, dataId: props.id }
    })
    .then(resp => {
      let responseList = resp.data.list;

      state.tableData = responseList;
      state.count = resp.data.total;
      nextTick(() => {
        // 默认全选
        responseList.map(v => {
          if (v.registerStatus != 1) {
            multipleTableRef.value!.toggleRowSelection(v);
          }
        });
      });
    });
};
const getDataCount = () => {
  request
    .get("/dataService/dataParse/mechanism/parsed/users/count", {
      params: { dataId: props.id }
    })
    .then(resp => {
      state.dataCount = resp.data;
    });
};
const handleSelectionChange = val => {
  state.multipleSelection = val;
};
const handleSubmit = async () => {
  if (!state.multipleSelection.length) {
    return ElMessage.error("请勾选要注册的数据");
  }
  let excludeIds = state.tableData
    .filter(v => !state.multipleSelection.map(v => v.id)?.includes(v.id))
    .map(v => v.id);

  await ElMessageBox.confirm(
    `本次数据集未注册数据<span style="color: #F56C6C">${state.dataCount.notRegistered}人</span>,已选择数据<span style="color: #F56C6C">${state.multipleSelection.length}人</span>,确定无误吗`,
    "提示",
    {
      dangerouslyUseHTMLString: true
    }
  );
  request
    .post("/dataService/dataParse/mechanism/parsed/register", {
      dataId: props.id,
      excludeIds: excludeIds
    })
    .then(resp => {
      ElMessage.success(resp.message);
      dialogVisible.value = false;
      emits("success");
    });
};
const initData = () => {
  getUserList();
  getDataCount();
};
</script>