sl-sfy-safety/src/views/datamanager/platformdata/components/common/QueryTable.vue

<template>
  <div class="form">
    <div class="table-query-form">
      <el-input
        v-model="tableQueryTypeContent"
        style="max-width: 251px; margin-right: 50px"
        :placeholder="'请输入' + tableQueryType"
      >
        <template #prepend>
          <el-select
            v-model="tableQueryType"
            style="width: 74px"
            @change="handleTableQueryTypeChange"
          >
            <el-option value="姓名" />
            <el-option value="工号" />
          </el-select>
        </template>
      </el-input>
      <div class="dept-select">
        <span>请选择组织：</span>
        <el-tree-select
          v-model="tableQueryDept"
          :data="props.departmentList"
          :render-after-expand="false"
          :default-expand-all="true"
          @change="handleDeptChange"
          style="width: 200px"
          check-strictly
          placeholder="请选择组织"
          class="protocal-select"
        />
      </div>
      <div style="min-width: 150px; float: right">
        <el-button type="primary" @click="submitTableQuery" style="width: 65px; height: 32px"
          >搜 索</el-button
        >
        <el-button @click="resetTable" style="width: 65px; height: 32px">重 置</el-button>
      </div>
    </div>
    <el-table
      ref="queryTableRef"
      max-height="calc(100vh - 350px)"
      style="width: 100%; margin-top: 18px"
      stripe
      :data="tableData.list"
      highlight-current-row
      @sort-change="handleSortChange"
    >
      <el-table-column label="姓名" prop="nickname" align="center"></el-table-column>
      <el-table-column label="工号" prop="username" align="center"></el-table-column>
      <el-table-column label="部门" prop="deptName" align="center"></el-table-column>
      <el-table-column
        v-if="tableLabel === '访问次数'"
        :label="'当日' + props.tableLabel"
        prop="statisticDay"
        sortable="custom"
        align="right"
      ></el-table-column>
      <el-table-column
        v-if="tableLabel === '访问次数'"
        :label="'本月' + tableLabel"
        prop="statisticMonth"
        sortable="custom"
        align="right"
      ></el-table-column>
      <el-table-column
        :label="'累计' + tableLabel"
        prop="statisticAll"
        sortable="custom"
        :align="tableLabel === '访问次数' ? 'right' : 'center'"
      ></el-table-column>
      <el-table-column v-if="tableLabel === '访问次数'" label="访问次数统计图" align="center">
        <template #default="scope">
          <img
            style="display: inline-block; margin-right: 20px; cursor: pointer"
            src="@/assets/icons/chart-bar.png"
            alt=""
            @click="showBargraph(scope.row)"
          />
          <img
            style="display: inline-block; cursor: pointer"
            src="@/assets/icons/chart-line.png"
            alt=""
            @click="showLinechart(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="tableQueryParams.pageNumber"
      v-model:currentPageSize="tableQueryParams.pageSize"
      :total="tableData.total"
      :page-sizes="[10, 20, 50, 100, 200]"
      layout="->, total,sizes,prev,pager,next,jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentPageChange"
    />
  </div>
  <el-dialog
    v-model="bargraphVisible"
    :title="chartTitle"
    :close-on-click-modal="true"
    :destroy-on-close="true"
    width="1000px"
    center
  >
    <DialogNavBar @chart-params-changed="onDialogParamsChanged" />
    <BarChart :chart-data="chartData.val" :chart-lable="chartData.label" />
  </el-dialog>
  <el-dialog
    v-model="linechartVisible"
    :title="chartTitle"
    :close-on-click-modal="true"
    :destroy-on-close="true"
    width="1000px"
    center
  >
    <DialogNavBar
      chart-type="line"
      :workshop-list="workshopList"
      @chart-params-changed="onDialogParamsChanged"
    />
    <LineChart :chart-data="chartData.val" :chart-lable="chartData.label" />
  </el-dialog>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { defineProps } from 'vue';
  import DialogNavBar from '../common/DialogNavBar.vue';
  import BarChart from '../../charts/BarChart.vue';
  import LineChart from '../../charts/LineChart.vue';
  import {
    type ChartQuery,
    type UserAccessRecordList,
    type UserAccessRecordQueryParams,
    getUserVisitTimes,
    getUserDailyVisitTimes,
  } from '@/api/datamanagement/dataplatform';
  import { formatWorkshopChart, formatTimeChart } from '@/utils/platformUtils';
  import { PaginationRequest } from '@/types/common/type';

  const queryTableRef = ref();

  // 获取下拉菜单数据和表格数据
  const props = defineProps<{
    departmentList: any[];
    workshopList: any[];
    tableData: UserAccessRecordList;
    tableLabel: string;
  }>();

  // 表格查询参数和修改事件
  const tableQueryParams = ref<PaginationRequest & { queryParam: UserAccessRecordQueryParams }>({
    pageNumber: 1,
    pageSize: 10,
    queryParam: {},
    // nickname: "",
    // username: "",
    // sortKey: "",
    // sortType: "",
  });
  const emits = defineEmits<{
    (
      e: 'tableParamsChanged',
      parmas: PaginationRequest & { queryParam: UserAccessRecordQueryParams },
    );
  }>();

  // 页码导航栏修改事件
  const handleSizeChange = (v: number) => {
    tableQueryParams.value.pageSize = v;
    emits('tableParamsChanged', tableQueryParams.value);
  };
  const handleCurrentPageChange = (v: number) => {
    tableQueryParams.value.pageNumber = v;
    emits('tableParamsChanged', tableQueryParams.value);
  };

  // 表格排序事件
  const handleSortChange = (data: any) => {
    if (data.order !== null) {
      tableQueryParams.value.queryParam.sortKey = data.prop;
      tableQueryParams.value.queryParam.sortType = data.order.includes('a') ? 'asc' : 'desc';
    } else {
      delete tableQueryParams.value.queryParam.sortKey;
      delete tableQueryParams.value.queryParam.sortType;
    }
    tableQueryParams.value.pageNumber = 1;
    emits('tableParamsChanged', tableQueryParams.value);
  };

  // 复用输入框类型和变化事件
  const tableQueryType = ref<string>('姓名');
  const handleTableQueryTypeChange = (v: string) => {
    if (v === '姓名') {
      delete tableQueryParams.value.queryParam.staffNo;
    } else {
      delete tableQueryParams.value.queryParam.nickname;
    }
    tableQueryTypeContent.value = '';
  };

  // 部门筛选框变化
  const handleDeptChange = (v: string) => {
    tableQueryParams.value.queryParam.deptId = v;
  };

  // 复用输入框绑定内容、提交事件、重置事件
  const tableQueryTypeContent = ref<string>();
  function submitTableQuery() {
    if (tableQueryType.value === '姓名') {
      tableQueryParams.value.queryParam.nickname = tableQueryTypeContent.value;
    } else {
      tableQueryParams.value.queryParam.staffNo = tableQueryTypeContent.value;
    }
    emits('tableParamsChanged', tableQueryParams.value);
  }
  function resetTable() {
    queryTableRef.value.clearSort();
    tableQueryTypeContent.value = '';
    tableQueryDept.value = undefined;
    tableQueryParams.value = {
      pageNumber: 1,
      pageSize: 10,
      queryParam: {},
    };
    emits('tableParamsChanged', tableQueryParams.value);
  }
  // 组织列表筛选数据
  const tableQueryDept = ref<string>();

  // dialog显示和画图
  const chartTitle = ref('');
  const ChartQueryUserId = ref('');
  const bargraphVisible = ref(false);
  const showBargraph = (rowData) => {
    bargraphVisible.value = true;
    chartTitle.value = rowData.nickname + '访问车间统计柱状图';
    ChartQueryUserId.value = rowData.userId;
  };
  const linechartVisible = ref(false);
  const showLinechart = (rowData) => {
    linechartVisible.value = true;
    chartTitle.value = rowData.nickname + '访问车间统计折线图';
    ChartQueryUserId.value = rowData.userId;
  };

  // 请求画图数据
  const getChartData = async (cp: ChartQuery) => {
    if (chartTitle.value.includes('柱状')) {
      const data = await getUserVisitTimes(cp);
      chartData.value = formatWorkshopChart(data);
    } else {
      const data = await getUserDailyVisitTimes(cp);
      chartData.value = formatTimeChart(data);
    }
  };
  const chartData = ref<{
    label: string[];
    val: any[];
  }>({
    label: [],
    val: [],
  });
  const onDialogParamsChanged = async (v: ChartQuery) => {
    v.userId = ChartQueryUserId.value;
    await getChartData(v);
  };
</script>

<style scoped lang="scss">
  .testbox {
    width: 930px;
    height: 480px;
  }
  .form {
    /* width: 1100px; */
    margin-top: 18px;
  }

  .el-pagination {
    margin-top: 30px;
  }

  .table-query-form {
    padding-right: 25px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .dept-select {
      min-width: 300px;
      margin-right: 50px;
    }
  }
</style>