sl-sfy-safety/src/views/datamanager/platformdata/compoents/query/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: 70px">
                        <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;" :data="tableData" stripe 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="当日访问次数" prop="todayVisits" sortable align="right"></el-table-column>
            <el-table-column label="本月访问次数" prop="monthVisits" sortable align="right"></el-table-column>
            <el-table-column label="累计访问次数" prop="totalVisits" sortable align="right"></el-table-column>
            <el-table-column 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 { FormInstance } from 'element-plus';
import { DepartMentModel } from '@/api/datamanagement/dataplatform';
// import { DepartMentModel, Records, Visits, VisitsModel, getDeptList } from '@/api/datamanagement/dataplatform';

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

export interface TableModel {
    deptId: number,
    deptName: string,
    monthVisits: number,
    nickName: string,
    staffNo: string,
    todayVisits: number,
    totalVisits: number,
    userId: number,
}

const tableData = ref<TableModel[]>([
    { deptId: 1, deptName: '部门1', monthVisits: 1, nickName: '张三', staffNo: '10001', todayVisits: 1, totalVisits: 1, userId: 10014 },
    { deptId: 2, deptName: '部门2', monthVisits: 2, nickName: '李四', staffNo: '10002', todayVisits:2, totalVisits: 2, userId: 10014 },
    { deptId: 3, deptName: '部门3', monthVisits: 3, nickName: '王五', staffNo: '10003', todayVisits: 3, totalVisits: 3, userId: 10014 },
    { deptId: 4, deptName: '部门4', monthVisits: 4, nickName: '赵六', staffNo: '10004', todayVisits: 4, totalVisits: 4, userId: 10014 },
    { deptId: 5, deptName: '部门5', monthVisits: 5, nickName: '孙七', staffNo: '10005', todayVisits:5, totalVisits: 5, userId: 10014 },
    { deptId: 6, deptName: '部门6', monthVisits: 6, nickName: '周八', staffNo: '10006', todayVisits: 6, totalVisits: 6, userId: 10014 },
    { deptId: 7, deptName: '部门7', monthVisits: 7, nickName: '吴九', staffNo: '10007', todayVisits:7, totalVisits: 7, userId: 10014 },
    { deptId: 8, deptName: '部门8', monthVisits: 8, nickName: '郑十', staffNo: '10008', todayVisits: 8, totalVisits: 8, userId: 10014 },
    { deptId: 9, deptName: '部门9', monthVisits: 9, nickName: '王十一', staffNo: '10009', todayVisits:9, totalVisits: 9, userId: 10014 },
    { deptId: 10, deptName: '部门10', monthVisits: 10, nickName: '李十二', staffNo: '10010', todayVisits: 10, totalVisits: 10, userId: 10014 },
    { deptId: 11, deptName: '部门11', monthVisits: 11, nickName: '赵十三', staffNo: '10011', todayVisits: 11, totalVisits: 11, userId: 10014 },
])

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>