easydo-ops/src/views/dataMock/tower/components/attendance.vue

<template>
    <scTable ref="xGridTable" batchDel :apiObj="$API.tower.attendance" :formConfig="formConfig" :paramsColums="paramsColums" :toolbarConfig="toolbarConfig" :columns="columns">
        <template #default_imgText="{ row, column }">
            <template v-if="formatCertificate(row, column)">
                <el-button type="primary" link @click="handlePreview(row, column)">{{ XEUtils.get(formatCertificate(row, column), "certificateNo") }}</el-button>
            </template>
        </template>
        
        <template #action="{ row }">
            <el-button type="primary" link @click="table_del(row)">
                <template #icon><sc-iconify icon="ant-design:delete-outlined"></sc-iconify></template>删除
            </el-button>
        </template>
    </scTable>

    <file-viewer v-if="showViewer" ref="viewerRef" @closed="showViewer = false"></file-viewer>
</template>

<script setup>
import moment from "moment";
import XEUtils from "xe-utils";
import API from "@/api";
import TOOL from "@/utils/tool";
import { mapFormItemSelect, mapFormItemDatePicker } from "@/components/scTable/helper";
import { dataSource } from "@/utils/basicDic";
import { folderKeyDic } from "@/views/dataMock/tower/main";

const formatCertificate = (row, { field }) => XEUtils.find(XEUtils.get(XEUtils.toStringJSON(XEUtils.get(row, "person.features")), "certificate", []), item => item.type == XEUtils.get(folderKeyDic, field));

const proConfig = reactive({
    span: 5,
    storageKey: "PROJECT",
    resetValue: TOOL.data.get("PROJECT_ID"),
    optionProps: { label: "projectName", value: "fpiId" },
    events: {
        change: data => XEUtils.assign(formConfig.data, { ...data, mountedId: null })
    }
})

const mountedConfig = reactive({
    api: {
        key: "tower.mounted",
        query: {
            projectId: computed(() => formConfig.data.projectId),
            projectIdNot: 1
        }
    },
    slot: {
        style: { float: "right", paddingLeft: "6px", color: "#8492a6" }
    },
    optionProps: { label: "mountedName", value: "id", slot: ({ data }) => XEUtils.get(XEUtils.find(TOOL.data.get("PROJECT"), item => item.fpiId === data.projectId), "projectName") },
    events: {
        change: data => XEUtils.assign(formConfig.data, data)
    }
})

const datetimerangeConfig = reactive({
    span: 7,
    resetValue: () => [moment().startOf("month").format("YYYY-MM-DD HH:mm:ss"), moment().add(1, "hour").format("YYYY-MM-DD HH:mm:ss")],
    props: {
        type: "datetimerange",
        startPlaceholder: "开始时间",
        endPlaceholder: "结束时间",
        format: "YYYY-MM-DD HH:mm"
    }
})

const toolbarConfig = reactive({
    enabled: true,
    print: false
})

const formConfig = reactive({
    data: {
        projectId: TOOL.data.get("PROJECT_ID"),
        projectIdNot: 1,
        recordType: "TCM_RECORD_ENTER",
        createTime: [moment().startOf("month").format("YYYY-MM-DD HH:mm:ss"), moment().add(1, "hour").format("YYYY-MM-DD HH:mm:ss")]
    },
    items: [
        mapFormItemSelect("projectId", "所属项目", proConfig),
        mapFormItemSelect("mountedId", "设备安装点", mountedConfig),
        mapFormItemDatePicker("createTime", "监测时间", datetimerangeConfig)
    ]
})

const paramsColums = reactive([
    { column: "projectId" },
    { column: "projectIdNot" },
    { column: "mountedId" },
    { column: "recordType" },
    { column: "createTimeBegin", field: "createTime[0]" },
    { column: "createTimeEnd", field: "createTime[1]" }
])

const columns = reactive([
    { type: "checkbox", fixed: "left", width: 40 },
    { type: "seq", fixed: "left", width: 60 },
    { type: "html", field: "person.name", title: "人员姓名", minWidth: 100, sortable: true },
    { type: "html", field: "person.idCard", title: "身份证号", minWidth: 160, sortable: true },
    { type: "html", field: "person.phoneNumber", title: "手机号", minWidth: 160, sortable: true },
    { type: "html", field: "createTime", title: "打卡时间", minWidth: 160, sortable: true },
    { type: "html", field: "projectName", title: "项目名称", minWidth: 160, sortable: true, formatter: ({ cellValue, row }) => cellValue || XEUtils.get(XEUtils.find(TOOL.data.get("PROJECT"), item => item.fpiId == row.projectId), "projectName") },
    { type: "html", field: "groundName", title: "工地场区", minWidth: 160, sortable: true },
    { type: "html", field: "mountedName", title: "设备安装点", minWidth: 160, sortable: true },
    { field: "facerec/towerCrane_zs", title: "特种作业证", minWidth: 140, align: "center", slots: { default: "default_imgText" } },
    { type: "html", field: "dataSource", title: "数据来源", fixed: "right", minWidth: 100, sortable: true, formatter: ({ cellValue }) => XEUtils.get(dataSource, cellValue, cellValue) },
    { title: "操作", fixed: "right", width: 120, align: "center", slots: { default: "action" } }
])

// 显示隐藏 筛选表单
const xGridTable = ref();
const toggleFormEnabled = () => xGridTable.value.toggleFormEnabled();

const refreshTable = () => {
    xGridTable.value.reloadColumn(columns);
    xGridTable.value.searchData();
}

const showViewer = ref(false);
const viewerRef = ref();
const handlePreview = (row, { field }) => {
    showViewer.value = true;
    nextTick(() => viewerRef.value.init(XEUtils.get(row, `person.folders.${field}.entities[0]`)));
}

const table_del = ({ id }) => {
    ElMessageBox.confirm("是否确认删除该考勤记录?", "删除警告", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(() => {
        API.tower.attendance.del({ id }).then(() => {
            ElMessage.success("操作成功");
            refreshTable();
        });
    });
}
</script>