| | |
| | | <template> |
| | | <div class="system-user-container"> |
| | | <el-card shadow="hover"> |
| | | <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> |
| | | <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> |
| | | <el-tab-pane label="待评价" name="first"></el-tab-pane> |
| | | <el-tab-pane label="已评价" name="second"></el-tab-pane> |
| | | </el-tabs> |
| | | </el-tabs> --> |
| | | <div class="system-user-search mb15"> |
| | | <el-input size="default" placeholder="物资名称" style="max-width: 215px"> </el-input> |
| | | <el-button size="default" type="primary" class="ml10"> 查询 </el-button> |
| | | <el-input size="default" v-model="listQuery.searchParams.name" placeholder="物资名称" style="max-width: 215px" /> |
| | | <el-button size="default" type="primary" class="ml10" @click="listApi"> 查询 </el-button> |
| | | <el-button size="default" class="ml10" @click="submitReset"> 重置 </el-button> |
| | | </div> |
| | | <div class="button_Line"> |
| | | <div class="button_Left"> |
| | | <el-button size="default" type="primary" @click="onOpenAdd('新建')"> |
| | | <el-icon> |
| | | <Plus /> </el-icon |
| | | >新建 |
| | | <el-icon> <Plus /> </el-icon>新建 |
| | | </el-button> |
| | | <el-button size="default" type="warning" plain disabled> |
| | | <el-icon> |
| | | <Edit /> </el-icon |
| | | >修改 |
| | | <el-icon> <Edit /> </el-icon>修改 |
| | | </el-button> |
| | | <el-button size="default" type="danger" plain disabled> |
| | | <el-icon> |
| | | <Delete /> </el-icon |
| | | >删除 |
| | | <el-icon> <Delete /> </el-icon>删除 |
| | | </el-button> |
| | | </div> |
| | | <div class="button_Right"> |
| | | <el-button @click="upButton"> |
| | | <!-- <el-button @click="upButton"> |
| | | <el-icon> |
| | | <Upload /> |
| | | </el-icon> |
| | |
| | | <el-icon> |
| | | <Refresh /> |
| | | </el-icon> |
| | | </el-button> |
| | | </el-button> --> |
| | | </div> |
| | | </div> |
| | | <el-table :data="tableData" style="width: 100%" ref="multipleTableRef"> |
| | | <el-table-column type="selection" width="55" /> |
| | | <el-table-column prop="teamName" label="物资名称" min-width="120" show-overflow-tooltip sortable></el-table-column> |
| | | <el-table-column prop="teamLevel" label="物资编号" min-width="120" show-overflow-tooltip sortable></el-table-column> |
| | | <el-table-column prop="teamDescription" label="负责部门" min-width="120" show-overflow-tooltip sortable></el-table-column> |
| | | <el-table-column prop="materialClassification" label="物资分类" min-width="120" show-overflow-tooltip sortable></el-table-column> |
| | | <el-table-column prop="location" label="存放位置" min-width="120" show-overflow-tooltip sortable></el-table-column> |
| | | <el-table-column prop="number" label="存储数量" min-width="120" show-overflow-tooltip sortable></el-table-column> |
| | | <el-table-column prop="name" label="物资名称" min-width="120" show-overflow-tooltip sortable></el-table-column> |
| | | <el-table-column prop="number" label="物资编号" min-width="120" show-overflow-tooltip sortable></el-table-column> |
| | | <el-table-column prop="departmentId" label="负责部门" min-width="120" show-overflow-tooltip sortable></el-table-column> |
| | | <el-table-column prop="classification" label="物资分类" min-width="120" show-overflow-tooltip sortable></el-table-column> |
| | | <el-table-column prop="place" label="存放位置" min-width="120" show-overflow-tooltip sortable></el-table-column> |
| | | <el-table-column prop="count" label="存储数量" min-width="120" show-overflow-tooltip sortable></el-table-column> |
| | | <el-table-column label="操作" width="200" align="center" fixed="right"> |
| | | <template #default="scope"> |
| | | <el-button size="small" text type="primary" @click="onMaintain(scope.row)"> |
| | | <el-icon style="margin-right: 5px"> |
| | | <EditPen /> </el-icon |
| | | >保养 |
| | | <el-icon style="margin-right: 5px"> <EditPen /> </el-icon>保养 |
| | | </el-button> |
| | | <el-button size="small" text type="primary" @click="onMaintain(scope.row)"> |
| | | <el-icon style="margin-right: 5px"> |
| | | <EditPen /> </el-icon |
| | | >检查 |
| | | <el-icon style="margin-right: 5px"> <EditPen /> </el-icon>检查 |
| | | </el-button> |
| | | <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)"> |
| | | <el-icon style="margin-right: 5px"> |
| | | <View /> </el-icon |
| | | >查看 |
| | | <el-icon style="margin-right: 5px"> <View /> </el-icon>查看 |
| | | </el-button> |
| | | <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)"> |
| | | <el-icon style="margin-right: 5px"> |
| | |
| | | 修改 |
| | | </el-button> |
| | | <el-button size="small" text type="primary" @click="onRowDel(scope.row)"> |
| | | <el-icon> |
| | | <Delete /> </el-icon |
| | | >删除 |
| | | <el-icon> <Delete /> </el-icon>删除 |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <div class="pages"> |
| | | <el-pagination |
| | | v-if="tableData.length == 0 ? false : true" |
| | | v-model:currentPage="pageIndex" |
| | | v-model:page-size="pageSize" |
| | | :page-sizes="[10, 20, 30]" |
| | | :pager-count="5" |
| | | :small="small" |
| | | :disabled="disabled" |
| | | :background="background" |
| | | |
| | | |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="40" |
| | | :total="total" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | |
| | | // onMounted, |
| | | ref, |
| | | defineComponent, |
| | | reactive, |
| | | onMounted, |
| | | } from 'vue'; |
| | | import { ElMessageBox, ElMessage, ElTable } from 'element-plus'; |
| | | import { |
| | |
| | | import OpenEdit from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/openEdit.vue'; |
| | | import Maintain from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintain.vue'; |
| | | import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue'; |
| | | |
| | | import { emergencyResourcesApi } from '/@/api/emergencyResources'; |
| | | // 定义表格数据类型 |
| | | interface User { |
| | | teamName: string; |
| | | teamLevel: string; |
| | | teamDescription: string; |
| | | location: string; |
| | | materialClassification: string; |
| | | id: number; |
| | | name: string; |
| | | number: string; |
| | | departmentId: number; |
| | | classification: string; |
| | | place: string; |
| | | count: number; |
| | | } |
| | | |
| | | // 定义接口来定义对象的类型 |
| | |
| | | setup() { |
| | | const multipleTableRef = ref<InstanceType<typeof ElTable>>(); |
| | | const multipleSelection = ref<User[]>([]); |
| | | |
| | | // 列表参数 |
| | | const listQuery = reactive({ |
| | | pageIndex: 1, |
| | | pageSize: 10, |
| | | searchParams: { |
| | | name: '', |
| | | }, |
| | | }); |
| | | // 定义表格数据 |
| | | const tableData = ref([]); |
| | | // 请求列表数据 |
| | | const listApi = async () => { |
| | | let res = await emergencyResourcesApi().emergencySuppliesList(listQuery); |
| | | console.log(res); |
| | | if (res.data.code == 200) { |
| | | tableData.value = res.data.data; |
| | | pageIndex.value = res.data.pageIndex; |
| | | pageSize.value = res.data.pageSize; |
| | | total.value = res.data.total; |
| | | } else { |
| | | ElMessage.error(res.data.msg); |
| | | } |
| | | }; |
| | | //重置 |
| | | const submitReset = () => { |
| | | listQuery.searchParams.name = ''; |
| | | listApi(); |
| | | }; |
| | | onMounted(() => { |
| | | listApi(); |
| | | }); |
| | | // 上传 |
| | | const upShow = ref(); |
| | | const upButton = () => { |
| | | upShow.value.openDialog(); |
| | | }; |
| | | // 定义表格数据 |
| | | const tableData: User[] = [ |
| | | { |
| | | teamName: '消防安全绳', |
| | | teamLevel: 'YJWZ20210208104332', |
| | | teamDescription: '安全管理部', |
| | | materialClassification: '事故气体吸收装置', |
| | | location: '3#岗微型消防站', |
| | | number: '5', |
| | | }, |
| | | { |
| | | teamName: '消防安全绳', |
| | | teamLevel: 'YJWZ20210208104332', |
| | | teamDescription: '安全管理部', |
| | | materialClassification: '事故气体吸收装置', |
| | | location: '3#岗微型消防站', |
| | | number: '5', |
| | | }, |
| | | { |
| | | teamName: '消防安全绳', |
| | | teamLevel: 'YJWZ20210208104332', |
| | | teamDescription: '安全管理部', |
| | | materialClassification: '事故气体吸收装置', |
| | | location: '3#岗微型消防站', |
| | | number: '5', |
| | | }, |
| | | { |
| | | teamName: '消防安全绳', |
| | | teamLevel: 'YJWZ20210208104332', |
| | | teamDescription: '安全管理部', |
| | | materialClassification: '事故气体吸收装置', |
| | | location: '3#岗微型消防站', |
| | | number: '5', |
| | | }, |
| | | ]; |
| | | |
| | | //查看用户弹窗 |
| | | const seeRef = ref(); |
| | | const onMaintain = (row: TableDataRow) => { |
| | |
| | | .catch(() => {}); |
| | | }; |
| | | // 分页 |
| | | const pageIndex = ref(4); |
| | | const pageSize = ref(10); |
| | | // 分页改变 |
| | | const pageIndex = ref(); |
| | | const pageSize = ref(); |
| | | const total = ref(); |
| | | // 分页条数 |
| | | const handleSizeChange = (val: number) => { |
| | | console.log(`${val} items per page`); |
| | | // console.log(`${val} items per page`); |
| | | listQuery.pageSize = val; |
| | | }; |
| | | // 分页未改变 |
| | | // 分页数 |
| | | const handleCurrentChange = (val: number) => { |
| | | console.log(`current page: ${val}`); |
| | | // console.log(`current page: ${val}`); |
| | | listQuery.pageIndex = val; |
| | | }; |
| | | return { |
| | | multipleSelection, |
| | |
| | | onRowDel, |
| | | pageIndex, |
| | | pageSize, |
| | | total, |
| | | handleSizeChange, |
| | | handleCurrentChange, |
| | | listQuery, |
| | | listApi, |
| | | onMounted, |
| | | submitReset, |
| | | // ...toRefs(state), |
| | | }; |
| | | }, |