| | |
| | | <div class="system-user-search mb15"> |
| | | <el-form :inline="true" :model="formInline" class="demo-form-inline"> |
| | | <el-form-item> |
| | | <el-input size="default" placeholder="预案名称" style="max-width: 215px;"> </el-input> |
| | | <el-input size="default" v-model="formInline.searchParams.name" placeholder="预案名称" style="max-width: 215px;"> </el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-select size="default" v-model="value" placeholder="请选择预案类型" class="ml10" style="max-width: 215px;"> |
| | | <el-select size="default" v-model="formInline.searchParams.type" placeholder="请选择预案类型" class="ml10" style="max-width: 215px;"> |
| | | <el-option label="综合应急预案" value="admin"></el-option> |
| | | <el-option label="现场处置方案" value="common"></el-option> |
| | | <el-option label="专项应急预案" value="common"></el-option> |
| | |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button size="default" type="primary" class="ml10"> |
| | | <el-button size="default" type="primary" class="ml10" @click="onSubmit"> |
| | | 查询 |
| | | </el-button> |
| | | <el-button size="default" class="ml10" @click="submitReset"> |
| | | <el-button size="default" class="ml10"> |
| | | 重置 |
| | | </el-button> |
| | | </el-form-item> |
| | |
| | | </el-button> |
| | | </div> |
| | | <div class="button_Right"> |
| | | <el-button @click="upButton"> |
| | | <el-button size="default" @click="upButton"> |
| | | <el-icon> |
| | | <Upload /> |
| | | </el-icon> |
| | | </el-button> |
| | | <el-button> |
| | | <el-button size="default"> |
| | | <el-icon> |
| | | <Download /> |
| | | </el-icon> |
| | | </el-button> |
| | | <el-button> |
| | | <el-button size="default"> |
| | | <el-icon> |
| | | <Refresh /> |
| | | </el-icon> |
| | |
| | | </div> |
| | | </div> |
| | | <el-table |
| | | :data="tableData" |
| | | :data="tableData.data" |
| | | style="width: 100%" |
| | | ref="multipleTableRef" |
| | | > |
| | |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <!-- <el-pagination--> |
| | | <!-- @size-change="onHandleSizeChange"--> |
| | | <!-- @current-change="onHandleCurrentChange"--> |
| | | <!-- class="mt15"--> |
| | | <!-- :pager-count="5"--> |
| | | <!-- :page-sizes="[10, 20, 30]"--> |
| | | <!-- v-model:current-page="tableData.param.pageNum"--> |
| | | <!-- background--> |
| | | <!-- v-model:page-size="tableData.param.pageSize"--> |
| | | <!-- layout="total, sizes, prev, pager, next, jumper"--> |
| | | <!-- :total="tableData.total"--> |
| | | <!-- >--> |
| | | <!-- </el-pagination>--> |
| | | <div class="pages"> |
| | | <el-pagination |
| | | v-model:currentPage="pageIndex" |
| | | v-model:page-size="pageSize" |
| | | v-if="tableData.length == 0 ? false : true" |
| | | v-model:currentPage="formInline.pageIndex" |
| | | v-model:page-size="formInline.pageSize" |
| | | :page-sizes="[10, 20, 30]" |
| | | :pager-count="5" |
| | | :small="small" |
| | | :disabled="disabled" |
| | | :background="background" |
| | | class="mt15" |
| | | background |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="40" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | :total="tableData.total" |
| | | @size-change="onHandleSizeChange" |
| | | @current-change="onHandleCurrentChange" |
| | | /> |
| | | </div> |
| | | </el-card> |
| | | <OpenAdd ref="addRef" /> |
| | | <OpenAdd ref="addRef" @refreshRoleList="initTableData"/> |
| | | <AbolishLibrary ref="abolishRef"/> |
| | | <upData ref="upShow"></upData> |
| | | <el-dialog v-model="dialogFormVisible" width="30%" title="启动" :fullscreen="full"> |
| | |
| | | |
| | | <script lang="ts"> |
| | | import { |
| | | // toRefs, |
| | | toRefs, |
| | | reactive, |
| | | // onMounted, |
| | | onMounted, |
| | | ref, |
| | | defineComponent |
| | | } from 'vue'; |
| | |
| | | Upload, |
| | | Download, |
| | | Refresh, |
| | | View, |
| | | VideoPause, |
| | | VideoPlay, |
| | | EditPen, |
| | |
| | | // // describe: string; |
| | | // createTime: string; |
| | | } |
| | | |
| | | // |
| | | interface TableDataState { |
| | | tableData: { |
| | | data: Array<TableDataRow>; |
| | | total: number; |
| | | loading: boolean; |
| | | }; |
| | | } |
| | | export default defineComponent({ |
| | | name: 'systemUser', |
| | | components: { |
| | | OpenAdd, |
| | | AbolishLibrary, |
| | | View, |
| | | EditPen, |
| | | Plus, |
| | | Edit, |
| | |
| | | Refresh, |
| | | VideoPause, |
| | | VideoPlay, |
| | | UpData |
| | | UpData, |
| | | emergencyPlanApi |
| | | }, |
| | | setup() { |
| | | // const seeRef = ref(); |
| | | // 选择框 |
| | | // const value = ref(''); |
| | | // const options = |
| | | // { |
| | | // value: 'Option1', |
| | | // label: 'Option1', |
| | | // }; |
| | | // 定义表单搜索 |
| | | const formInline = reactive({ |
| | | pageIndex: 1, |
| | | pageSize: 10, |
| | | searchParams: { |
| | | name: "", |
| | | type: "", |
| | | } |
| | | }) |
| | | // 搜索按钮 |
| | | const onSubmit = async () => { |
| | | let res = await emergencyPlanApi().getEmergencyPlanList(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 state = reactive<TableDataState>({ |
| | | tableData: { |
| | | data: [], |
| | | total: 0, |
| | | loading: false, |
| | | }, |
| | | }) |
| | | // 初始化表格数据 |
| | | const initTableData = async () => { |
| | | let res = await emergencyPlanApi().getEmergencyPlanList(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 multipleTableRef = ref<InstanceType<typeof ElTable>>() |
| | | const multipleSelection = ref<User[]>([]) |
| | | |
| | |
| | | const upButton=()=>{ |
| | | upShow.value.openDialog() |
| | | } |
| | | // 定义表格数据 |
| | | const tableData: User[] = [ |
| | | { |
| | | teamName: '应急救援组', |
| | | teamLevel: '公司', |
| | | teamDescription: '实施抢险抢险的应急方案和措施实施 ;', |
| | | teamPhone: '051383830321', |
| | | phone: '13603812900', |
| | | describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + |
| | | '(2)负责现场被困人员、受伤人员抢救工作;\n' + |
| | | '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + |
| | | '(4)抢险抢修或救援结束后,对结果进行复查和评估。', |
| | | responsibleDepartment: '仪表班', |
| | | teamLeader: '王磊', |
| | | }, |
| | | { |
| | | teamName: '应急救援组', |
| | | teamLevel: '公司', |
| | | teamDescription: '实施抢险抢险的应急方案和措施实施 ;', |
| | | teamPhone: '051383830321', |
| | | phone: '13603812900', |
| | | describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + |
| | | '(2)负责现场被困人员、受伤人员抢救工作;\n' + |
| | | '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + |
| | | '(4)抢险抢修或救援结束后,对结果进行复查和评估。', |
| | | responsibleDepartment: '仪表班', |
| | | teamLeader: '王磊', |
| | | }, |
| | | { |
| | | teamName: '应急救援组', |
| | | teamLevel: '公司', |
| | | teamDescription: '实施抢险抢险的应急方案和措施实施 ;', |
| | | teamPhone: '051383830321', |
| | | phone: '13603812900', |
| | | describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + |
| | | '(2)负责现场被困人员、受伤人员抢救工作;\n' + |
| | | '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + |
| | | '(4)抢险抢修或救援结束后,对结果进行复查和评估。', |
| | | responsibleDepartment: '仪表班', |
| | | teamLeader: '王磊', |
| | | }, |
| | | { |
| | | teamName: '应急救援组', |
| | | teamLevel: '公司', |
| | | teamDescription: '实施抢险抢险的应急方案和措施实施 ;', |
| | | teamPhone: '051383830321', |
| | | phone: '13603812900', |
| | | describe: '(1)实施抢险抢险的应急方案和措施实施 ;\n' + |
| | | '(2)负责现场被困人员、受伤人员抢救工作;\n' + |
| | | '(3)在事故有可能扩大进行抢险抢修或救援时,高度注意避免意外伤害;\n' + |
| | | '(4)抢险抢修或救援结束后,对结果进行复查和评估。', |
| | | responsibleDepartment: '仪表班', |
| | | teamLeader: '王磊', |
| | | } |
| | | ] |
| | | // 启动弹窗 |
| | | const dialogTableVisible = ref(false) |
| | | const dialogFormVisible = ref(false) |
| | |
| | | .catch(() => {}); |
| | | }; |
| | | // 页面加载时 |
| | | // onMounted(() => { |
| | | // initTableData(); |
| | | // }); |
| | | // 分页 |
| | | const pageIndex = ref(4); |
| | | const pageSize = ref(10); |
| | | onMounted(() => { |
| | | initTableData(); |
| | | }); |
| | | // 分页改变 |
| | | 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 router=useRouter() |
| | |
| | | } |
| | | }; |
| | | return { |
| | | // value, |
| | | // options, |
| | | multipleSelection, |
| | | multipleTableRef, |
| | | upButton, |
| | | upShow, |
| | | tableData, |
| | | initTableData, |
| | | dialogTableVisible, |
| | | dialogFormVisible, |
| | | form, |
| | | // seeRef, |
| | | onSubmit, |
| | | onOpenAdd, //新增 |
| | | onabolishLibrary, |
| | | addRef, |
| | | abolishRef, |
| | | onRowDel, |
| | | pageIndex, |
| | | pageSize, |
| | | handleSizeChange, |
| | | handleCurrentChange, |
| | | onHandleSizeChange, |
| | | onHandleCurrentChange, |
| | | jumpFrom, |
| | | abolish, |
| | | router, |
| | | toggleFullscreen, |
| | | FullScreen, |
| | | full, |
| | | formInline, |
| | | onMounted, |
| | | ...toRefs(state), |
| | | }; |
| | | }, |
| | | }); |
| | |
| | | display: flex; |
| | | flex-direction: row; |
| | | justify-content: space-between; |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | .el-form .el-form-item { |
| | | margin-bottom: 0 !important; |
| | | } |
| | | .el-button--text { |
| | | margin-right: 15px; |
| | | } |