mky-vent-base/src/views/vent/gas/gasInspect/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-button type="primary" preIcon="ant-design:appstore-outlined" style="margin-right: 15px;"
                            @click="handlerTeam">区队管理</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: 650 }" class="tableW"
                :pagination="pagination" @change="pageChange">
                <template #action="{ record }">
                    <a class="table-action-link" @click="handlerEdit(record)">编辑</a>
                    <a class="table-action-link" @click="handlerDel(record)">删除</a>
                    <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 == '1'">
                            <div class="table-text text-y ">是</div>
                            <!-- <div class="text-y">否</div> -->
                        </div>
                        <div v-else>
                            <div class="table-text text-y">是</div>
                            <!-- <div class="text-n">是</div> -->
                            <div class="table-text text-y">是</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="visibleDel" width="450px" :footer="null" :title="titleDel" centered
                destroyOnClose>
                <inspectDel @handleDelCard="handleDelCard" @handleDelCardInfo="handleDelCardInfo"
                    @handleCancelDelCard="handleCancelDelCard"></inspectDel>
            </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>
            <!-- 区队管理弹窗 -->
            <a-modal v-model:visible="visibleTeam" width="850px" :footer="null" :title="titleTeam" centered
                destroyOnClose>
              <inspectTeam></inspectTeam>
            </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 inspectDel from './components/inspectDel.vue'
import uploadOrdown from './components/uploadOrdown.vue'
import inspectTeam from './components/inspectTeam.vue'
import { message } from 'ant-design-vue';
import { columns, pagination } from './gasInspect.data'
import { list, importByExcel, exportGasByExcel, moveOrderNum, edit, deleteCard, taskSubmit, clearCardInfo, teamList } from './gasInspect.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 visibleTeam=ref(false)//控制区队管理弹窗的显示与隐藏
let titleTeam=ref('')//区队管理弹窗标题
let inspectEditData = reactive({})//编辑弹窗数据
let visibleDel = ref(false)//控制删除弹窗的显示与隐藏
let titleDel = ref('')//删除弹窗标题
let inspectDelData = ref('')
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) {
        visibleEdit.value = false
        queryByIdList()
    }
}
//编辑取消
let cancelEdit = () => {
    visibleEdit.value = false
}
//代开删除弹窗
let handlerDel = (record) => {
    visibleDel.value = true
    titleDel.value = '瓦斯巡检点删除'
    inspectDelData.value = record.id
}
//删除巡检卡
async function handleDelCard() {
    let res = await deleteCard({ id: inspectDelData.value })
    if (res) {
        visibleDel.value = false
        inspectDelData.value = ''
        queryByIdList()
    }
}
//删除巡检卡信息
async function handleDelCardInfo() {
    let res = await clearCardInfo({ id: inspectDelData.value })
    console.log(res, '瓦斯巡检卡信息删除')
    if (res) {
        visibleDel.value = false
        inspectDelData.value = ''
        queryByIdList()
    }
}
//取消删除巡检卡或者巡检卡信息
let handleCancelDelCard = () => {
    inspectDelData.value = ''
    visibleDel.value = false
}
//打开区队管理弹窗
let handlerTeam=()=>{
    visibleTeam.value=true
    titleTeam.value='区队管理'
}

//通过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 = () => {
    searchId.value = ''
    pagination.current=1
    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);
            visibleUploadorDown.value = false
            message.success('导出成功')
        }
    }

}
//导出
let getdownload = () => {
    modalType.value = 'download'
    visibleUploadorDown.value = true
    titleUploadorDown.value = '导出'
}
//导入/导出取消
let handlerCancel = () => {
    visibleUploadorDown.value = false
}
// 下载公用方法
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>