vent-template/src/views/vent/monitorManager/comment/gasReportCount.vue

<template>
    <div class="gasReport">
        <div class="search-area">
            <a-row>
                <a-col :span="4">
                    <div class="area-item">
                        <div class="item-text">巡检类型：</div>
                        <a-select ref="select" v-model:value="searchData.insType" style="width: 240px"
                            placeholder="请选择巡检类型" @change="typeChange">
                            <a-select-option v-for="(item, index) in classList" :key="item.value" :value="item.value">{{
                                item.label }}</a-select-option>
                        </a-select>
                    </div>
                </a-col>
                <a-col :span="4">
                    <a-button type="primary" preIcon="ant-design:search-outlined" style="margin-left: 10px"
                        @click="getSearch">查询</a-button>
                    <a-button preIcon="ant-design:sync-outlined" style="margin: 0px 15px"
                        @click="getReset">重置</a-button>
                </a-col>
            </a-row>
        </div>
        <div class="content-area">
            <a-table :columns="ColumnsReport" size="small" :data-source="gaspatrolTableData" class="tableW"
                :pagination="false">
                <template #action="{ record }">
                    <a class="table-action-link" @click="handlerLocation(record)">定位</a>
                </template>
            </a-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue';
import { columnsGas1, columnsGas2 } from './comment.data';
let props = defineProps({
    tableData: {
        type: Array,
        default: () => {
            return [];
        },
    },
});

let searchData = reactive({
    insType: 'gasDay1',
});
let classList = reactive<any[]>([
    { label: '一次巡检', value: 'gasDay1' },
    { label: '二次巡检', value: 'gasDay2' },
]);
let ColumnsReport = ref<any>(columnsGas1)
let gaspatrolTableData = ref<any[]>([]);
let $emit = defineEmits(['getSearchReport', 'locate']);
//巡检班次选项切换
let typeChange = (val) => {
    searchData.insType = val;
    switch (searchData.insType) {
        case 'gasDay1':
            ColumnsReport.value = columnsGas1
            break;
        case 'gasDay2':
            ColumnsReport.value = columnsGas2
            break;
    }
};
//查询
let getSearch = () => {
    $emit('getSearchReport', searchData.insType);
};
//重置
let getReset = () => {
    searchData.insType = '';
};
//定位
function handlerLocation(record) {
    $emit('locate', record);
}
watch(
    () => props.tableData,
    (newV, oldV) => {
        gaspatrolTableData.value = newV
    },
    { immediate: true }
);
onMounted(() => { });
</script>

<style lang="less" scoped>
@ventSpace: zxm;

.gasReport {
    .search-area {
        margin: 15px;

        .area-item {
            display: flex;
            align-items: center;

            .item-text {
                color: #fff;
            }
        }
    }

    .zxm-picker,
    .zxm-input {
        border: 1px solid #3ad8ff77;
        background-color: #ffffff00;
        color: #fff;
    }
}

:deep(.@{ventSpace}-table-body) {
    height: auto !important;

    tr>td {
        background: #ffffff00 !important;
    }

    tr.@{ventSpace}-table-row-selected {
        td {
            background: #007cc415 !important;
        }
    }
}

:deep(.jeecg-basic-table .@{ventSpace}-table-wrapper .@{ventSpace}-table-title) {
    min-height: 0;
}

:deep(.@{ventSpace}-pagination) {
    margin-right: 20px !important;
}

// :deep(.zxm-table-thead > tr > th:last-child) {
//   border-right: 1px solid #91e9fe55 !important;
// }</style>