<template>
|
<div class="app-container">
|
<el-form :inline="true" :model="queryParams" class="search-form">
|
<el-form-item label="供应商名称">
|
<el-input
|
v-model="queryParams.supplierName"
|
placeholder="请输入"
|
clearable
|
:style="{ width: '100%' }"
|
/>
|
</el-form-item>
|
<el-form-item label="煤种">
|
<el-input
|
v-model="queryParams.coal"
|
placeholder="请输入"
|
clearable
|
:style="{ width: '100%' }"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleQuery">查询</el-button>
|
<el-button @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<el-card>
|
<!-- 标签页 -->
|
<el-tabs
|
v-model="activeTab"
|
class="info-tabs"
|
@tab-click="handleTabClick"
|
>
|
<el-tab-pane
|
v-for="tab in tabs"
|
:key="tab.name"
|
:label="tab.label"
|
:name="tab.name"
|
/>
|
</el-tabs>
|
<!-- 操作按钮区 -->
|
<el-space>
|
<el-button type="primary" :icon="Plus" @click="handleAdd">新建</el-button>
|
<el-button type="danger" :icon="Delete" @click="handleDelete">删除</el-button>
|
<el-button type="info" plain :icon="Download">导出</el-button>
|
</el-space>
|
<div>
|
<div>
|
<ETable :loading="tableLoading"
|
:table-data="tableData"
|
:columns="columns"
|
@selection-change="handleSelectionChange"
|
:show-selection="true"
|
:border="true"
|
:maxHeight="480"
|
@edit="handleAdd"></ETable>
|
</div>
|
<pagination
|
v-if="total>0"
|
:page-num="pageNum"
|
:page-size="pageSize"
|
:total="total"
|
@pagination="handleQuery"
|
:layout="'total, prev, pager, next, jumper'"
|
/>
|
</div>
|
</el-card>
|
<form-dia ref="formDia" @closeDia="handleQuery"></form-dia>
|
<qr-code-dia ref="qrCodeDia" @closeDia="handleQuery"></qr-code-dia>
|
</div>
|
</template>
|
|
<script setup>
|
import {Download, Delete, Plus} from "@element-plus/icons-vue";
|
import {onMounted, ref} from "vue";
|
const { proxy } = getCurrentInstance()
|
import Pagination from "@/components/Pagination/index.vue";
|
import ETable from "@/components/Table/ETable.vue";
|
import FormDia from "@/views/inspectionManagement/components/formDia.vue";
|
import QrCodeDia from "@/views/inspectionManagement/components/qrCodeDia.vue";
|
import {delInspectionTask, inspectionTaskList} from "@/api/inspectionManagement/index.js";
|
|
const formDia = ref()
|
const qrCodeDia = ref()
|
// 查询参数
|
const queryParams = reactive({
|
supplierName: "",
|
coal: "",
|
})
|
// 当前标签
|
const activeTab = ref("task");
|
const tabName = ref("task");
|
// 标签页数据
|
const tabs = reactive([
|
{ name: "task", label: "任务下发" },
|
{ name: "qrCode", label: "二维码管理" },
|
]);
|
// 表格
|
const selectedRows = ref([]);
|
const tableData = ref([]);
|
const tableLoading = ref(false);
|
const total = ref(0);
|
const pageNum = ref(1);
|
const pageSize = ref(10);
|
const columns = ref([
|
{ prop: "taskName", label: "巡检任务名称", minWidth: 160 },
|
{ prop: "port", label: "地点", minWidth: 120 },
|
{ prop: "remarks", label: "备注", minWidth: 150 },
|
{ prop: "inspector", label: "执行巡检人", minWidth: 150 },
|
{ prop: "registrant", label: "登记人", minWidth: 100 },
|
{ prop: "createTime", label: "登记日期", minWidth: 100 },
|
]);
|
|
onMounted(() => {
|
handleTabClick({ props: { name: "task" } });
|
});
|
// 标签页点击
|
const handleTabClick = (tab) => {
|
tabName.value = tab.props.name;
|
tableData.value = [];
|
getList();
|
};
|
// 点击查询
|
const handleQuery = () => {
|
pageNum.value = 1
|
pageSize.value = 10
|
getList()
|
}
|
const getList = () => {
|
tableLoading.value = true;
|
inspectionTaskList({...queryParams, size: pageSize.value, current: pageNum.value}).then(res => {
|
console.log(res)
|
tableLoading.value = false;
|
tableData.value = res.data.records;
|
total.value = res.data.total;
|
})
|
};
|
// 重置查询
|
const resetQuery = () => {
|
Object.keys(queryParams).forEach((key) => {
|
if (key !== "pageNum" && key !== "pageSize") {
|
queryParams[key] = "";
|
}
|
});
|
handleQuery();
|
};
|
|
// 新增、编辑
|
const handleAdd = (row) => {
|
const type = row === undefined ? 'add' : 'edit'
|
nextTick(() => {
|
if (tabName.value === "task") {
|
formDia.value?.openDialog(type, row)
|
} else {
|
qrCodeDia.value?.openDialog(type, row)
|
}
|
})
|
};
|
// 删除任务
|
const handleDelete = () => {
|
if (selectedRows.value.length === 0) {
|
proxy.$modal.msgWarning("请选择要删除的数据");
|
return;
|
}
|
const deleteIds = selectedRows.value.map(item => item.id);
|
proxy.$modal.confirm('是否确认删除所选数据项？').then(function() {
|
return delInspectionTask(deleteIds)
|
}).then(() => {
|
handleQuery()
|
proxy.$modal.msgSuccess("删除成功")
|
}).catch(() => {})
|
};
|
// 选择行
|
const handleSelectionChange = (selection) => {
|
selectedRows.value = selection;
|
};
|
</script>
|
|
<style scoped>
|
|
</style>
|
