mky-vent-base/src/views/vent/gas/gasInspectNonfc/index.vue

<template>
    <div class="gasReport">
        <customHeader>瓦斯巡检地点管理</customHeader>
        <div class="report-container">
            <div class="search-area">
                <a-row>
                    <a-col :span="4">
                        <div class="area-item">
                            <div class="item-text">巡检卡ID：</div>
                            <a-input style="width: 240px" v-model:value="searchId" placeholder="请输入巡检卡ID" />
                        </div>
                    </a-col>
                    <a-col :span="20">
                        <a-button type="primary" preIcon="ant-design:search-outlined" style="margin-left: 10px;"
                            @click="getSearchCardId">查询</a-button>
                        <a-button preIcon="ant-design:sync-outlined" style="margin: 0px 15px"
                            @click="getReset">重置</a-button>
                        <a-button type="primary" preIcon="ant-design:import-outlined" @click="getupload">导入</a-button>
                        <a-button type="primary" preIcon="ant-design:download-outlined" style="margin: 0px 15px"
                            @click="getdownload">导出</a-button>
                        <a-button type="primary" preIcon="ant-design:sync-outlined" style="margin-right: 15px;"
                            @click="handlerTask">任务管理</a-button>
                        <a-dropdown>
                            <template #overlay>
                                <a-menu @click="handlerFilter">
                                    <a-menu-item key="1">
                                        <UserOutlined />
                                        一次
                                    </a-menu-item>
                                    <a-menu-divider />
                                    <a-menu-item key="2">
                                        <UserOutlined />
                                        两次
                                    </a-menu-item>
                                </a-menu>
                            </template>
                            <a-button type="primary">
                                巡检次数筛选
                                <DownOutlined />
                            </a-button>
                        </a-dropdown>
                    </a-col>
                </a-row>
            </div>
            <a-table :key="keyActive" :columns="columns" size="small" :data-source="tableData" :scroll="{ y: 500 }" class="tableW"
                :pagination="pagination"  @change="pageChange">
                <template #action="{ record }">
                    <a class="table-action-link" @click="handlerEdit(record)">编辑</a>
                    <a-popconfirm title="删除内容无法恢复，是否删除" ok-text="确定" cancel-text="取消"
                        @confirm="handleDelCardInfo(record)">
                        <a class="table-action-link">删除</a>
                    </a-popconfirm>
                    <a class="table-action-link" @click="moveUp(record)">上移</a>
                    <a class="table-action-link" @click="moveDown(record)">下移</a>
                </template>
                <template #bodyCell="{ column, text }">
                    <template v-if="column.dataIndex == 'insType'">
                        <div v-if="text == '2'">
                            <div class="table-text">第一次</div>
                            <div>第二次</div>
                        </div>
                        <div v-else>第一次</div>
                    </template>
                    <template
                        v-if="column.dataIndex == 'afterNoon' || column.dataIndex == 'morning' || column.dataIndex == 'evening'">
                        <div v-if="text == '2'">
                            <div class="table-text text-y ">是</div>
                            <div class="text-y">是</div>
                        </div>
                        <div v-else>
                            <div class="table-text text-n">否</div>
                            <div class="text-n">否</div>
                        </div>
                    </template>

                </template>
            </a-table>
            <!-- 任务管理弹窗 -->
            <a-modal v-model:visible="visibleTask" width="850px" :footer="null" :title="titleTask" centered
                destroyOnClose>
                <inspectTask @handleTaskSubmit="handleTaskSubmit" @handleTaskCancel="handleTaskCancel"></inspectTask>
            </a-modal>
            <!-- 编辑弹窗 -->
            <a-modal v-model:visible="visibleEdit" width="650px" :footer="null" :title="titleEdit" centered
                destroyOnClose>
                <inspectEdit :inspectEditData="inspectEditData" @confirmEdit="confirmEdit" @cancelEdit="cancelEdit">
                </inspectEdit>
            </a-modal>

            <!-- 导入弹窗 -->
            <a-modal v-model:visible="visibleUploadorDown" width="450px" :footer="null" :title="titleUploadorDown"
                centered destroyOnClose>
                <uploadOrdown :modalType="modalType" @handlerComfirm="handlerComfirm" @handlerCancel="handlerCancel">
                </uploadOrdown>
            </a-modal>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, reactive } from 'vue';
import customHeader from '/@/components/vent/customHeader.vue';
import inspectTask from './components/inspectTask.vue'
import inspectEdit from './components/inspectEdit.vue'
import uploadOrdown from './components/uploadOrdown.vue'
import { message } from 'ant-design-vue';
import { columns, pagination } from './gasInspectNonfc.data'
import { list, importByExcel, exportGasByExcel, moveOrderNum, edit, taskSubmit, clearCardInfo } from './gasInspectNonfc.api'

let keyActive=ref(0)
let searchId = ref('')
let tableData = ref<any[]>([])//巡检列表
let visibleTask = ref(false)//控制任务管理弹窗的显示与隐藏
let titleTask = ref('')
let visibleEdit = ref(false)//控制编辑弹窗的显示与隐藏
let titleEdit = ref('')//编辑弹窗标题
let inspectEditData = reactive({})//编辑弹窗数据
let visibleUploadorDown = ref(false)//控制导入/导出弹窗的显示与隐藏
let titleUploadorDown = ref('')
let modalType = ref('')//判断当前是导入/导出弹窗


//打开任务管理弹窗
let handlerTask = () => {
    visibleTask.value = true
    titleTask.value = '瓦斯巡检任务管理'
}
//任务管理下发
async function handleTaskSubmit(param) {
    let res = await taskSubmit({ ...param })
    console.log(res, '任务管理下发')
    if (res) {
        visibleTask.value = false
        queryByIdList()
    }
}
//任务管理弹窗关闭
let handleTaskCancel = () => {
    visibleTask.value = false
}
//打开编辑弹窗
let handlerEdit = (record) => {
    visibleEdit.value = true
    titleEdit.value = '瓦斯巡检点编辑'
    inspectEditData = Object.assign({}, record)
}
//编辑提交
async function confirmEdit(param) {
    let res = await edit({ ...param })
    if (res) {
        queryByIdList()
        visibleEdit.value = false
    }
}
//编辑取消
let cancelEdit = () => {
    visibleEdit.value = false
}

//删除巡检卡信息
async function handleDelCardInfo(record) {
    let res = await clearCardInfo({ id: record.id })
    console.log(res, '瓦斯巡检卡信息删除')
    if (res) {
        queryByIdList()
    }
}


//通过id（巡检卡id）查询
async function queryByIdList() {
    let res = await list({ id: searchId.value, pageNo: pagination.current, pageSize: pagination.pageSize })
    console.log(res, '列表查询---')
    keyActive.value=new Date().getTime()
    tableData.value = res.records.map((el: any) => {
        return {
            morning: el.insType,
            afterNoon: el.insType,
            evening: el.insType,
            ...el
        }
    })
    pagination.total = res.total
}
//查询
let getSearchCardId = () => {
    pagination.current=1
    queryByIdList()
}
//重置
let getReset = () => {
    pagination.current=1
    searchId.value = ''
    queryByIdList()
}
//分页切换
let pageChange=(val)=> {
    pagination.current = val.current;
    pagination.pageSize = val.pageSize;
    queryByIdList()
  }
//导入
let getupload = () => {
    modalType.value = 'upload'
    visibleUploadorDown.value = true
    titleUploadorDown.value = '导入'
}
//确定导入
async function handlerComfirm(param) {
    if (modalType.value == 'upload') {
        let res = await importByExcel(param)
        if (res.code == 200) {
            visibleUploadorDown.value = false
            message.success('导入成功')
            queryByIdList()
        }
    } else {
        let res = await exportGasByExcel({ insType: param.insType })
        console.log(res, '导出数据')
        if (res) {
            let filename = `${new Date().getTime()}.xlsx`;
            downFilePublic(res, filename);
            message.success('导出成功')
        }
    }

}
//导出
let getdownload = () => {
    modalType.value = 'download'
    visibleUploadorDown.value = true
    titleUploadorDown.value = '导出'
}
//确定导出
async function handlerCancel(param) {
    modalType.value =''
}
// 下载公用方法
function downFilePublic(content, fileName) {
    const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
    // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
    // IE10以上支持blob但是依然不支持download
    if ('download' in document.createElement('a')) {
        // 支持a标签download的浏览器
        const link = document.createElement('a'); // 创建a标签
        link.download = fileName; // a标签添加属性
        link.style.display = 'none';
        link.href = URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.click(); // 执行下载
        URL.revokeObjectURL(link.href); // 释放url
        document.body.removeChild(link); // 释放标签
    } else {
        // 其他浏览器
        navigator.msSaveBlob(blob, fileName);
    }
}
//列表上移
async function moveUp(param) {
    let res = await moveOrderNum({ id: param.id, moveType: 'upp' })
    console.log(res, '向上移动')
    if (res) {
        queryByIdList()
    }
}
//列表下移
async function moveDown(param) {
    let res = await moveOrderNum({ id: param.id, moveType: 'bel' })
    console.log(res, '向下移动')
    if (res) {
        queryByIdList()
    }
}
//巡检次数筛选
let handlerFilter = (param) => {
    let data = param.key
    switch (data) {
        case '1':
            pagination.current = 1
            tableData.value = tableData.value.filter(v => v.insType == '1')
            break;
        case '2':
            pagination.current = 2
            tableData.value = tableData.value.filter(v => v.insType == '2')
            break;
    }
}

onMounted(() => {
    queryByIdList()
})

</script>

<style lang="less" scoped>
.gasReport {
    width: 100%;
    height: 100%;
    padding: 80px 10px 15px 10px;
    box-sizing: border-box;
    position: relative;

    .search-area {
        margin: 20px 0px;

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

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

    .table-text {
        margin-bottom: 5px;
    }

    .text-y {
        color: #0be716;
    }

    .text-n {
        color: #ff0000;
    }

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

}

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

:deep(.zxm-picker-input > input) {
    color: #fff;
}

:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
    border: 1px solid #3ad8ff77 !important;
    background-color: #ffffff00 !important;
}

:deep(.zxm-select-selection-item) {
    color: #fff !important;
}
</style>