| | |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-row> |
| | | <el-table :data="tableData" style="width: 100%;margin-top:20px"> |
| | | <el-table-column type="selection" width="55" /> |
| | | <el-table-column align="center" prop="date" label="id" /> |
| | | <el-table-column align="center" prop="name" label="事故名称"/> |
| | | <el-table-column align="center" prop="date" label="事故部门" /> |
| | | <el-table-column align="center" prop="name" label="发生地点"/> |
| | | <el-table-column align="center" prop="name" label="发生时间"/> |
| | | <!--<el-table :data="tableData" style="width: 100%;margin-top:20px">--> |
| | | <!--<el-table-column type="selection" width="55" />--> |
| | | <!--<el-table-column align="center" prop="date" label="id" />--> |
| | | <!--<el-table-column align="center" prop="name" label="事故名称"/>--> |
| | | <!--<el-table-column align="center" prop="date" label="事故部门" />--> |
| | | <!--<el-table-column align="center" prop="name" label="发生地点"/>--> |
| | | <!--<el-table-column align="center" prop="name" label="发生时间"/>--> |
| | | <!--</el-table>--> |
| | | <!--<div class="pages">--> |
| | | <!--<el-pagination--> |
| | | <!--v-model:currentPage="currentPage4"--> |
| | | <!--v-model:page-size="pageSize4"--> |
| | | <!--:page-sizes="[100, 200, 300, 400]"--> |
| | | <!--:small="small"--> |
| | | <!--:disabled="disabled"--> |
| | | <!--:background="background"--> |
| | | <!--layout="total, sizes, prev, pager, next, jumper"--> |
| | | <!--:total="400"--> |
| | | <!--@size-change="handleSizeChange"--> |
| | | <!--@current-change="handleCurrentChange"--> |
| | | <!--/>--> |
| | | <!--</div>--> |
| | | <el-table |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | ref="multipleTableRef" |
| | | > |
| | | <el-table-column align="center"> |
| | | <template #default="scope"> |
| | | <el-radio-group v-model="radio1"> |
| | | <el-radio :label="scope.row.id" size="large">{{ null }}</el-radio> |
| | | </el-radio-group> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="accidentExpressId" label="事故名称" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="accidentDepartmentId" label="事故部门" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="accidentType" label="事故类别" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="accidentGrade" label="事故等级" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="occurrencePlace" label="发生地点" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="occurrenceTime" label="发生时间" show-overflow-tooltip></el-table-column> |
| | | </el-table> |
| | | <div class="pages"> |
| | | <el-pagination |
| | | v-model:currentPage="currentPage4" |
| | | v-model:page-size="pageSize4" |
| | | :page-sizes="[100, 200, 300, 400]" |
| | | :small="small" |
| | | :disabled="disabled" |
| | | :background="background" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="400" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | v-model:currentPage="pageIndex" |
| | | v-model:page-size="pageSize" |
| | | :page-sizes="[10, 20, 30]" |
| | | :pager-count="5" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="40" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | | </div> |
| | | </el-col> |
| | |
| | | import { |
| | | defineComponent, |
| | | reactive, |
| | | ref |
| | | ref, |
| | | onMounted |
| | | } from 'vue'; |
| | | import { |
| | | Delete, |
| | | FullScreen |
| | | } from '@element-plus/icons-vue'; |
| | | import { |
| | | // ElTable, |
| | | ElMessage, |
| | | } from 'element-plus'; |
| | | import {accidentManagementSystemApi} from "/@/api/workInjuryDeclaration"; |
| | | export default defineComponent({ |
| | | setup() { |
| | | const dialogVisible = ref<boolean>(false); |
| | |
| | | const ruleForm = reactive({ |
| | | pass: '', |
| | | }); |
| | | // 表格 |
| | | const tableData = [ |
| | | { |
| | | date: '6421cbc6cbb5493eabf9b27e83372d78', |
| | | name: '应急救援组', |
| | | // 定义表格数据 |
| | | const tableData = ref([]); |
| | | // 列表参数 |
| | | const listQuery = reactive({ |
| | | pageIndex: 1, |
| | | pageSize: 10, |
| | | searchParams: { |
| | | name: '', |
| | | }, |
| | | { |
| | | date: '6421cbc6cbb5493eabf9b27e83372d78', |
| | | name: '工艺抢险组', |
| | | }, |
| | | { |
| | | date: '6421cbc6cbb5493eabf9b27e83372d78', |
| | | name: '后勤保障组', |
| | | }, |
| | | { |
| | | date: '6421cbc6cbb5493eabf9b27e83372d78', |
| | | name: '应急救援组', |
| | | }, |
| | | ]; |
| | | const pageSize4 = ref(100); |
| | | }); |
| | | //单选按钮 |
| | | const radio1 = ref(''); |
| | | // 分页 |
| | | const pageIndex = ref(); |
| | | const pageSize = ref(); |
| | | const total = ref(); |
| | | // 分页改变 |
| | | const handleSizeChange = (val: number) => { |
| | | console.log(`${val} items per page`); |
| | | listQuery.pageSize = val; |
| | | }; |
| | | // 分页未改变 |
| | | const handleCurrentChange = (val: number) => { |
| | | console.log(`current page: ${val}`); |
| | | listQuery.pageIndex = val; |
| | | }; |
| | | //查询list数据 |
| | | const listApi = async () => { |
| | | let res = await accidentManagementSystemApi().getAccidentReportList(listQuery); |
| | | 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); |
| | | } |
| | | }; |
| | | // 页面加载时 |
| | | onMounted(() => { |
| | | listApi(); |
| | | }); |
| | | // 右方点击添加后显示标签 |
| | | const dynamicTags = ref(['应急救援组', '工艺抢险组', '后勤保障组']); |
| | | const handleClose = (tag: string) => { |
| | |
| | | openDailog, |
| | | ruleForm, |
| | | tableData, |
| | | pageSize4, |
| | | handleSizeChange, |
| | | handleCurrentChange, |
| | | dynamicTags, |
| | |
| | | toggleFullscreen, |
| | | FullScreen, |
| | | full, |
| | | pageIndex, |
| | | pageSize, |
| | | total, |
| | | listApi, |
| | | listQuery, |
| | | radio1 |
| | | }; |
| | | }, |
| | | }); |