| | |
| | | <div class="system-user-search mb15"> |
| | | <el-form :inline="true" :model="formInline" class="demo-form-inline"> |
| | | <el-form-item> |
| | | <el-input size="default" v-model="formInline.name" placeholder="队伍名称"> </el-input> |
| | | <el-input size="default" v-model="formInline.teamName" placeholder="队伍名称"> </el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-select size="default" v-model="formInline.level" placeholder="请选择队伍级别"> |
| | | <el-select size="default" v-model="formInline.teamType" placeholder="请选择队伍级别"> |
| | | <el-option label="公司" value="shanghai"></el-option> |
| | | <el-option label="分厂-车间" value="beijing"></el-option> |
| | | <el-option label="工序-班组等" value="beijing"></el-option> |
| | |
| | | </div> |
| | | </div> |
| | | <el-table |
| | | :data="tableData" |
| | | :data="tableData.data" |
| | | style="width: 100%" |
| | | ref="multipleTableRef" |
| | | > |
| | |
| | | type="selection" |
| | | width="55" |
| | | /> |
| | | <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="teamDescription" label="队伍描述" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="teamPhone" label="负责人手机" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip sortable></el-table-column> |
| | | <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip sortable></el-table-column> |
| | | <el-table-column prop="teamDescription" label="队伍描述" show-overflow-tooltip sortable></el-table-column> |
| | | <el-table-column prop="teamPhone" label="负责人手机" show-overflow-tooltip sortable></el-table-column> |
| | | <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip sortable></el-table-column> |
| | | <el-table-column label="操作" width="200" align="center"> |
| | | <template #default="scope"> |
| | | <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)"> |
| | |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <div class="pages"> |
| | | <el-pagination |
| | | v-model:currentPage="currentPage" |
| | | v-model:page-size="pageSize" |
| | | :page-sizes="[10,20,50,100]" |
| | | :small="small" |
| | | :disabled="disabled" |
| | | :background="background" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="400" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | | </div> |
| | | <el-pagination |
| | | @size-change="onHandleSizeChange" |
| | | @current-change="onHandleCurrentChange" |
| | | class="mt15" |
| | | :pager-count="5" |
| | | :page-sizes="[10, 20, 30]" |
| | | v-model:current-page="formInline.pageIndex" |
| | | background |
| | | v-model:page-size="formInline.pageSize" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="tableData.total" |
| | | > |
| | | </el-pagination> |
| | | </el-card> |
| | | <OpenSee ref="seeRef" /> |
| | | <OpenAdd ref="addRef" /> |
| | |
| | | |
| | | <script lang="ts"> |
| | | import { |
| | | // toRefs, |
| | | toRefs, |
| | | reactive, |
| | | // onMounted, |
| | | onMounted, |
| | | ref, |
| | | defineComponent |
| | | } from 'vue'; |
| | |
| | | import OpenEdit from '/@/views/contingencyManagement/contingency/component/openEdit.vue'; |
| | | import OpenSee from '/@/views/contingencyManagement/contingency/component/openSee.vue'; |
| | | import UpData from '/@/views/contingencyManagement/contingency/component/upData.vue'; |
| | | import {contingencyApi} from "/@/api/contingency"; |
| | | import {Session} from "/@/utils/storage"; |
| | | import {initBackEndControlRoutes} from "/@/router/backEnd"; |
| | | |
| | | |
| | | // 定义表格数据类型 |
| | | interface User { |
| | |
| | | |
| | | // 定义接口来定义对象的类型 |
| | | interface TableDataRow { |
| | | // userName: string; |
| | | // userNickname: string; |
| | | // roleSign: string; |
| | | // department: string[]; |
| | | // phone: string; |
| | | // email: string; |
| | | // sex: string; |
| | | // password: string; |
| | | // overdueTime: Date; |
| | | // // describe: string; |
| | | // createTime: string; |
| | | // teamName: string; |
| | | // teamLevel: string; |
| | | // teamDescription: string; |
| | | // teamPhone: string; |
| | | // attachments: string; |
| | | } |
| | | |
| | | // |
| | | interface TableDataState { |
| | | tableData: { |
| | | data: Array<TableDataRow>; |
| | | total: number; |
| | | loading: boolean; |
| | | param: { |
| | | pageIndex: number; |
| | | pageSize: number; |
| | | } |
| | | }; |
| | | } |
| | | export default defineComponent({ |
| | | name: 'systemUser', |
| | | components: { |
| | |
| | | Upload, |
| | | Download, |
| | | Refresh, |
| | | UpData |
| | | UpData, |
| | | contingencyApi |
| | | }, |
| | | setup() { |
| | | // 定义表单搜索 |
| | | const formInline = reactive({ |
| | | name: '', |
| | | level: '', |
| | | pageIndex: 1, |
| | | pageSize: 10, |
| | | searchParams: { |
| | | teamName: "", |
| | | teamType: "", |
| | | } |
| | | }) |
| | | // 搜索按钮 |
| | | const onSubmit = () => { |
| | | console.log('submit!') |
| | | const onSubmit = async () => { |
| | | // let res = await contingencyApi().getTeamManagementList(formInline) |
| | | // if(res.data.code === '200'){ |
| | | // state.tableData.data = res.data.data; |
| | | // state.tableData.total = state.tableData.data.length; |
| | | // }else{ |
| | | // ElMessage({ |
| | | // type:'warning', |
| | | // message:res.data.msg |
| | | // }) |
| | | // } |
| | | } |
| | | const seeRef = ref(); |
| | | const editRef = ref(); |
| | | |
| | | const multipleTableRef = ref<InstanceType<typeof ElTable>>() |
| | | const multipleSelection = ref<User[]>([]) |
| | | |
| | |
| | | upShow.value.openDialog() |
| | | } |
| | | // 定义表格数据 |
| | | const tableData: User[] = [ |
| | | { |
| | | teamName: '应急救援组', |
| | | teamLevel: '公司', |
| | | teamDescription: '实施抢险抢险的应急方案和措施实施 ;', |
| | | telephone: '051383830321', |
| | | teamPhone: '13603812900', |
| | | describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + |
| | | '(2)负责现场被困人员、受伤人员抢救工作;\n' + |
| | | '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + |
| | | '(4)抢险抢修或救援结束后,对结果进行复查和评估。', |
| | | responsibleDepartment: '仪表班', |
| | | teamLeader: '王磊', |
| | | const state = reactive<TableDataState>({ |
| | | tableData: { |
| | | data: [], |
| | | total: 0, |
| | | loading: false, |
| | | }, |
| | | { |
| | | teamName: '应急救援组', |
| | | teamLevel: '公司', |
| | | teamDescription: '实施抢险抢险的应急方案和措施实施 ;', |
| | | telephone: '051383830321', |
| | | teamPhone: '13603812900', |
| | | describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + |
| | | '(2)负责现场被困人员、受伤人员抢救工作;\n' + |
| | | '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + |
| | | '(4)抢险抢修或救援结束后,对结果进行复查和评估。', |
| | | responsibleDepartment: '仪表班', |
| | | teamLeader: '王磊', |
| | | }, |
| | | { |
| | | teamName: '应急救援组', |
| | | teamLevel: '公司', |
| | | teamDescription: '实施抢险抢险的应急方案和措施实施 ;', |
| | | telephone: '051383830321', |
| | | teamPhone: '13603812900', |
| | | describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + |
| | | '(2)负责现场被困人员、受伤人员抢救工作;\n' + |
| | | '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + |
| | | '(4)抢险抢修或救援结束后,对结果进行复查和评估。', |
| | | responsibleDepartment: '仪表班', |
| | | teamLeader: '王磊', |
| | | }, |
| | | { |
| | | teamName: '应急救援组', |
| | | teamLevel: '公司', |
| | | teamDescription: '实施抢险抢险的应急方案和措施实施 ;', |
| | | telephone: '051383830321', |
| | | teamPhone: '13603812900', |
| | | describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + |
| | | '(2)负责现场被困人员、受伤人员抢救工作;\n' + |
| | | '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + |
| | | '(4)抢险抢修或救援结束后,对结果进行复查和评估。', |
| | | responsibleDepartment: '仪表班', |
| | | teamLeader: '王磊', |
| | | }) |
| | | // 初始化表格数据 |
| | | const initTableData = async () => { |
| | | let res = await contingencyApi().getTeamManagementList(formInline) |
| | | if(res.data.code === '200'){ |
| | | state.tableData.data = res.data.data; |
| | | state.tableData.total = state.tableData.data.length; |
| | | }else{ |
| | | ElMessage({ |
| | | type:'warning', |
| | | message:res.data.msg |
| | | }) |
| | | } |
| | | ] |
| | | }; |
| | | // const tableData: User[] = [ |
| | | // { |
| | | // teamName: '应急救援组', |
| | | // teamLevel: '公司', |
| | | // teamDescription: '实施抢险抢险的应急方案和措施实施 ;', |
| | | // telephone: '051383830321', |
| | | // teamPhone: '13603812900', |
| | | // describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + |
| | | // '(2)负责现场被困人员、受伤人员抢救工作;\n' + |
| | | // '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + |
| | | // '(4)抢险抢修或救援结束后,对结果进行复查和评估。', |
| | | // responsibleDepartment: '仪表班', |
| | | // teamLeader: '王磊', |
| | | // }, |
| | | // { |
| | | // teamName: '应急救援组', |
| | | // teamLevel: '公司', |
| | | // teamDescription: '实施抢险抢险的应急方案和措施实施 ;', |
| | | // telephone: '051383830321', |
| | | // teamPhone: '13603812900', |
| | | // describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + |
| | | // '(2)负责现场被困人员、受伤人员抢救工作;\n' + |
| | | // '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + |
| | | // '(4)抢险抢修或救援结束后,对结果进行复查和评估。', |
| | | // responsibleDepartment: '仪表班', |
| | | // teamLeader: '王磊', |
| | | // }, |
| | | // { |
| | | // teamName: '应急救援组', |
| | | // teamLevel: '公司', |
| | | // teamDescription: '实施抢险抢险的应急方案和措施实施 ;', |
| | | // telephone: '051383830321', |
| | | // teamPhone: '13603812900', |
| | | // describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + |
| | | // '(2)负责现场被困人员、受伤人员抢救工作;\n' + |
| | | // '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + |
| | | // '(4)抢险抢修或救援结束后,对结果进行复查和评估。', |
| | | // responsibleDepartment: '仪表班', |
| | | // teamLeader: '王磊', |
| | | // }, |
| | | // { |
| | | // teamName: '应急救援组', |
| | | // teamLevel: '公司', |
| | | // teamDescription: '实施抢险抢险的应急方案和措施实施 ;', |
| | | // telephone: '051383830321', |
| | | // teamPhone: '13603812900', |
| | | // describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + |
| | | // '(2)负责现场被困人员、受伤人员抢救工作;\n' + |
| | | // '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + |
| | | // '(4)抢险抢修或救援结束后,对结果进行复查和评估。', |
| | | // responsibleDepartment: '仪表班', |
| | | // teamLeader: '王磊', |
| | | // } |
| | | // ] |
| | | //查看用户弹窗 |
| | | const seeRef = ref(); |
| | | const onOpenSee = (row: TableDataRow) => { |
| | | seeRef.value.openDialog(row); |
| | | }; |
| | |
| | | addRef.value.openDialog(); |
| | | }; |
| | | // 打开修改用户弹窗 |
| | | const editRef = ref(); |
| | | const onOpenEdit = (row: TableDataRow) => { |
| | | editRef.value.openDialog(row); |
| | | }; |
| | |
| | | .catch(() => {}); |
| | | }; |
| | | // 分页改变 |
| | | const currentPage = ref(4); |
| | | const pageSize = ref(10); |
| | | const handleSizeChange = (val: number) => { |
| | | console.log(`${val} items per page`); |
| | | const onHandleSizeChange = (val: number) => { |
| | | formInline.pageSize = val; |
| | | }; |
| | | const handleCurrentChange = (val: number) => { |
| | | console.log(`current page: ${val}`); |
| | | const onHandleCurrentChange = (val: number) => { |
| | | formInline.pageIndex = val; |
| | | }; |
| | | // const onHandleSizeChange = (val: number) => { |
| | | // state.tableData.param.pageSize = val; |
| | | // }; |
| | | // // 分页改变 |
| | | // 页面加载时 |
| | | // onMounted(() => { |
| | | // initTableData(); |
| | | // }); |
| | | onMounted(() => { |
| | | initTableData(); |
| | | }); |
| | | return { |
| | | // value, |
| | | // options, |
| | |
| | | multipleTableRef, |
| | | upButton, |
| | | upShow, |
| | | tableData, |
| | | // tableData, |
| | | onOpenSee, //查看 |
| | | seeRef, |
| | | onOpenEdit, //编辑 |
| | |
| | | onOpenAdd, //新增 |
| | | addRef, |
| | | onRowDel, |
| | | currentPage, |
| | | pageSize, |
| | | handleSizeChange, |
| | | handleCurrentChange, |
| | | // ...toRefs(state), |
| | | onHandleSizeChange, |
| | | onHandleCurrentChange, |
| | | ...toRefs(state), |
| | | }; |
| | | }, |
| | | }); |