sl-sfy-safety/src/views/datamanager/platformdata/compoents/common/PlatformTable.vue

<template>
  <div class="form">
    <el-form ref="ruleFormRef" :model="ruleForm" inline label-width="60px">
      <!-- <el-form-item label="姓名：" prop="nickName" style="margin-top: 15px;">
                <el-input v-model="ruleForm.nickName" placeholder="请输入姓名！" style="width: 150px;"></el-input>
            </el-form-item>
            <el-form-item label="工号：" prop="staffNo" style="margin-top: 15px;">
                <el-input v-model="ruleForm.staffNo" placeholder="请输入工号！" style="width: 150px;"></el-input>
            </el-form-item> -->

      <el-input
        v-model="searchValue"
        style="max-width: 251px; margin-right: 50px"
        :placeholder="'请输入' + searchLabel"
      >
        <template #prepend>
          <el-select v-model="searchLabel" style="width: 74px">
            <el-option value="姓名" />
            <el-option value="工号" />
          </el-select>
        </template>
      </el-input>

      <el-form-item label="部门：" prop="dept" style="margin-bottom: 0; margin-right: 0">
        <el-select v-model="ruleForm.dept" placeholder="请选择部门" style="width: 200px">
          <el-option
            v-for="item in departmentList"
            :key="item.deptId"
            :value="item.deptName"
            :label="item.deptName"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-button
        type="primary"
        @click="submitForm(ruleFormRef)"
        style="width: 65px; height: 32px; position: absolute; right: 134px"
        >搜 索</el-button
      >
      <el-button
        @click="resetForm(ruleFormRef)"
        style="width: 65px; height: 32px; position: absolute; right: 57px"
        >重 置</el-button
      >
    </el-form>

    <el-table
      style="width: 100%; margin-top: 18px"
      stripe
      :data="tableData"
      highlight-current-row
      :default-sort="{ prop: 'todayVisits', order: 'descending' }"
    >
      <el-table-column label="姓名" prop="nickName" align="center"></el-table-column>
      <el-table-column label="工号" prop="staffNo" align="center"></el-table-column>
      <el-table-column label="部门" prop="deptName" align="center"></el-table-column>
      <el-table-column
        :label="'当日' + props.tableLabel"
        prop="todayVisits"
        sortable
        align="right"
      ></el-table-column>
      <el-table-column
        :label="'本月' + tableLabel"
        prop="monthVisits"
        sortable
        align="right"
      ></el-table-column>
      <el-table-column
        :label="'累计' + tableLabel"
        prop="totalVisits"
        sortable
        align="right"
      ></el-table-column>
      <el-table-column v-if="tableLabel === '访问次数'" label="访问次数统计图" align="center">
        <img
          style="display: inline-block; margin-right: 20px"
          src="@/assets/icons/chart-bar.png"
          alt=""
        />
        <img style="display: inline-block" src="@/assets/icons/chart-line.png" alt="" />
      </el-table-column>
    </el-table>

    <!-- <el-pagination v-model="currentPage" v-model:currentPageSize="currentPageSize" :page-sizes="[10, 20, 50, 100, 200]"
            layout="->, total,sizes,prev,pager,next,jumper" :total="total" @size-change="handeSizeChange"
            @current-change="handleCurrentPageChange" /> -->
  </div>

  <!-- <TableEcharts v-model="dialogVisible" :dialog-visible="dialogVisible" :userId="userId"
        :current-day-chart="currentDayData" :current-month-chart="currentMonthData" :all-datas-chart="currentAllData"
        :close-dialog="closeDialog">
    </TableEcharts> -->
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { defineProps } from 'vue';
  import { FormInstance } from 'element-plus';
  import { DepartMentModel } from '@/api/datamanagement/dataplatform';
  import { TableModel } from '@/api/datamanagement/dataplatform';
  // import { DepartMentModel, Records, Visits, VisitsModel, getDeptList } from '@/api/datamanagement/dataplatform';

  const searchLabel = ref('姓名');
  const searchValue = ref('');

  const props = defineProps<{
    tableData: TableModel[];
    tableLabel: string;
  }>();

  export interface FormModelCommon {
    dept: string;
    nickName: string;
    staffNo: string;
  }

  const ruleForm = ref<FormModelCommon>({
    dept: '',
    nickName: '',
    staffNo: '',
  });

  const ruleFormRef = ref<FormInstance>();

  const departmentList = ref<DepartMentModel[]>([]);

  // 搜索数据
  function submitForm(formE1: FormInstance | undefined) {
    console.log('搜索数据');

    if (!formE1) return;
    // formE1.validate((valid, fields) => {
    //     if (valid) {
    //         getPersonalVisits(ruleForm.value)
    //     }
    //     else {
    //         console.log('error submit!', fields);s
    //     }
    // })
  }

  // 重置表单
  function resetForm(formE1: FormInstance | undefined) {
    console.log('重置表单');

    if (!formE1) return;
    // formE1.resetFields()
    // console.log('resetForm')
    // queryData();
  }

  // const props = defineProps<{ type: string }>()
  // const props = defineProps<{
  // queryData: (d1: number, d2: number) => Promise<Visits<Records>>,
  // currentDayData: (d: number) => Promise<VisitsModel[]>,
  // currentMonthData: (d: number) => Promise<VisitsModel[]>,
  // currentAllData: (d: number) => Promise<VisitsModel[]>,
  // getPersonalVisits: (d1: number | undefined, d2: string, d3: number, d4: number, d5: string) => Promise<Visits<Records>>,
  // }>();

  // const dialogVisible = ref(false);//控制弹框显示
  // const currentPage = ref(1);
  // const currentPageSize = ref(10);
  // const total = ref(11);
  // const tableData = ref<TableModel[]>()
  // const userId = ref(10014);

  // const getDepartmentList = () => {
  //     getDeptList().then((res) => {
  //         departmentList.value = res;
  //         console.log('department:', res)
  //     });
  // };

  // 查询数据列表
  // async function queryData() {
  //     const res = await props.queryData(currentPage.value, currentPageSize.value);
  //     console.log('tablecommon-querydata:', res);
  //     tableData.value = res.records;
  //     console.log('tablecommon-querydata1:', tableData.value);
  //     total.value = res.totalRow;
  // }

  // 根据指定参数查询数据-搜索数据
  // function queryDataByParams() {
  //     props.queryDataByParams().then(res => {
  //         console.log(res)
  //     })
  //     // emit('queryDataByParams', data);
  // }

  // interface FormTable {
  //     text: string,
  //     dept: string,
  // }

  // // 翻页
  // function handleCurrentPageChange(val: number) {
  //     currentPage.value = val
  //     console.log('currentPage:' + currentPage.value)
  //     queryData();
  // }

  // // 页数
  // function handeSizeChange(val: number) {
  //     currentPageSize.value = val
  //     console.log('currentPageSize:' + currentPageSize.value)
  //     queryData()
  // }

  // function closeDialog() {
  //     dialogVisible.value = false;
  // }

  // // 查询今日访问次数
  // function currentDayData(userId: number) {
  //     console.log('table-common-currentDayData:', userId)
  //     return props.currentDayData(userId).then(res => {
  //         console.log('table-common-currentdaydata:', res)
  //         return res
  //     })
  // }

  // // 查询本月访问次数
  // function currentMonthData(userId: number) {
  //     console.log('table-common-currentMonthData:', userId)
  //     return props.currentMonthData(userId).then(res => {
  //         console.log('table-common-currentmonthdata:', res);
  //         return res
  //     })
  // }

  // // 查询累计访问次数
  // function currentAllData(userId: number) {
  //     return props.currentAllData(userId).then(res => {
  //         console.log('table-common:', res);
  //         return res;
  //     })
  // }

  // // 查询个人访问次数-搜索数据
  // function getPersonalVisits(data: FormModelCommon) {
  //     const departId = ref();
  //     departmentList.value.forEach(item => {
  //         if (item.deptName === data.dept) {
  //             departId.value = item.deptId;
  //         }
  //     })
  //     const newParam = {
  //         pageNumber: currentPage.value,
  //         pageSize: currentPageSize.value,
  //         nickName: data.nickName,
  //         // deptId: data.dept === BoardDeptEnum.all ? undefined : data.dept,
  //         deptId: departId.value,
  //         staffNo: data.staffNo,
  //     }
  //     console.log('getPersonalVisits:', newParam);
  //     props.getPersonalVisits(newParam.deptId, newParam.nickName, newParam.pageNumber, newParam.pageSize, newParam.staffNo).then(res => {
  //         console.log('table-common-getPersonalVisits:', res)
  //         tableData.value = res.records;

  //     })
  // }

  // // 打开数据表
  // function openDialog(row: TableModel) {
  //     console.log('tablecommon-opendialog');
  //     console.log(row.userId);
  //     // tbData.value=row;
  //     userId.value = row.userId;
  //     dialogVisible.value = true;
  //     // currentDayData();
  // }

  // onMounted(() => {
  //     queryData()
  //     getDepartmentList();
  // })
</script>

<style scoped>
  .form {
    /* width: 1100px; */
    margin-top: 18px;
  }

  .el-pagination {
    margin-top: 30px;
  }
</style>