From 9cb42e93ea6fc79268b7c43a4115b8f0076c84e1 Mon Sep 17 00:00:00 2001 From: Admin <978517621@qq.com> Date: 星期二, 09 八月 2022 19:18:28 +0800 Subject: [PATCH] 添加修改页面 --- src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue | 287 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 283 insertions(+), 4 deletions(-) diff --git a/src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue b/src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue index fe95193..e6e1635 100644 --- a/src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue +++ b/src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue @@ -1,11 +1,290 @@ <template> - <div>1235</div> + <div class="home-container"> + <div style="height: 100%"> + <el-row class="homeCard"> + <el-col :span="12"> + <div class="grid-content topInfo"> + <el-select v-model="searchType" @change="changeSearch" placeholder="任务名称"> + <el-option label="巡检任务类型" value="巡检任务类型" /> + <el-option label="创建人" value="创建人" /> + <el-option label="巡检班组" value="巡检班组" /> + <el-option label="检查频次" value="检查频次" /> + <el-option label="开始时间" value="开始时间" /> + </el-select> + <el-input v-model="searchContent" v-if="searchType == '任务名称'" placeholder="请输入任务名称"></el-input> + <el-input v-else-if="searchType == '检查频次'" v-model="searchContent" placeholder="请输入检查频次"> + <template #append> + <el-select v-model="searchUnit" placeholder="选择单位"> + <el-option label="分钟" value="分钟" /> + <el-option label="小时" value="小时" /> + <el-option label="天" value="天" /> + </el-select> + </template> + </el-input> + <el-select v-model="searchContent" v-else-if="searchType == '巡检任务类型'" placeholder="请选择任务类型"> + <el-option v-for="(item, index) in typeOptions" :label="item.name" :value="item.value" :key="index" /> + </el-select> + <el-select v-model="searchContent" v-else-if="searchType == '创建人'" placeholder="请选择创建人"> + <el-option v-for="(item, index) in createrOptions" :label="item.name" :value="item.value" :key="index" /> + </el-select> + <el-select v-model="searchContent" v-else-if="searchType == '巡检班组'" placeholder="请选择巡检班组"> + <el-option v-for="(item, index) in inspectorOptions" :label="item.name" :value="item.value" :key="index" /> + </el-select> + <el-date-picker v-model="searchContent" type="date" v-else :placeholder="'请选择' + searchType" size="large" style="margin-right: 20px" /> + <el-button type="primary">查询</el-button> + <el-button plain>重置</el-button> + </div> + </el-col> + </el-row> + <div class="homeCard"> + <div class="main-card"> + <el-row class="cardTop"> + <el-col :span="12" class="mainCardBtn"> + <el-button type="primary" :icon="Plus" size="default" @click="openDialog('新增', {})">新建</el-button> + <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button> + </el-col> + <el-button type="primary" :icon="Refresh" size="default" /> + </el-row> + <el-table ref="multipleTableRef" :data="tableData.inspectTaskData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }" @selection-change="handleSelectionChange"> + <el-table-column type="selection" width="55" /> + <el-table-column property="name" label="任务名称" width="200" /> + <el-table-column property="type" label="任务类型" /> + <el-table-column property="execClassgroup" label="巡检班组" /> + <el-table-column property="frequency" label="检查频次" /> + <el-table-column property="unit" label="频次单位" /> + <el-table-column property="chainLength" label="巡检链长度" width="160" /> + <el-table-column property="startTime" label="任务开始时间" width="180" /> + <!-- <el-table-column property="validTime" label="任务有效时间" width="180"/>--> + <el-table-column property="creater" label="创建人" /> + <el-table-column property="createTime" label="创建时间" width="180" /> + <el-table-column property="status" label="状态" width="60" /> + <el-table-column fixed="right" label="操作" align="center" width="300"> + <template #default="scope"> + <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button> + <el-button link type="primary" size="small" :icon="Edit" @click="openDialog('修改', scope.row)">修改</el-button> + <el-switch v-model="scope.row.status" inline-prompt active-text="开" inactive-text="关" active-value="开启" inactive-value="关闭" style="margin: 0 10px" /> + <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button> + </template> + </el-table-column> + </el-table> + <div class="pageBtn"> + <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="100" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> + </div> + </div> + </div> + </div> + <inspect-task-dialog ref="inspectTaskDialogRef"></inspect-task-dialog> + </div> </template> -<script> +<script lang="ts"> +import { toRefs, reactive, ref, onMounted } from 'vue'; +import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'; +import { ElTable, ElMessage } from 'element-plus'; +import { inspectTaskApi } from '/@/api/intellectInspectSystem/inspectTask'; +import inspectTaskDialog from './components/inspectTaskDialog.vue'; +import InspectTask from '/@/views/intellectInspect/inspectTaskManage/inspectTask/components/inspectTaskDialog.vue'; +let global: any = { + homeChartOne: null, + homeChartTwo: null, + homeCharThree: null, + dispose: [null, '', undefined] +}; + +interface stateType { + homeOne: Array<type>; +} +interface type {} export default { - name: 'index' + name: 'index', + components: { inspectTaskDialog }, + setup() { + const state = reactive({ + tableData: { + inspectTaskData: [], + total: 0, + loading: false, + params: { + pageIndex: 1, + pageSize: 10, + unitName: null, + workType: null, + createUserId: null, + execClassgroupId: null, + checkCycle: null, + checkCycleUnit: null + } + } + }); + + //获取巡检任务数据 + const getInspectionTask = async () => { + let res = await inspectTaskApi().getInspectTaskList(state.tableData.params); + if (res.data.code === '200') { + state.tableData.inspectTaskData = res.data.data; + state.tableData.total = res.data.count; + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + const openDialog = () => {}; + + // 页面加载时 + onMounted(() => { + getInspectionTask(); + }); + + return { + View, + Edit, + Delete, + Refresh, + Plus, + openDialog, + getInspectionTask, + ...toRefs(state) + }; + } }; </script> -<style scoped></style> +<style scoped lang="scss"> +$homeNavLengh: 8; +.home-container { + height: calc(100vh - 114px); + box-sizing: border-box; + overflow: hidden; + .homeCard { + width: 100%; + padding: 20px; + box-sizing: border-box; + background: #fff; + border-radius: 4px; + + .main-card { + width: 100%; + height: 100%; + .cardTop { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; + .mainCardBtn { + margin: 0; + } + } + .pageBtn { + height: 60px; + display: flex; + align-items: center; + justify-content: right; + + .demo-pagination-block + .demo-pagination-block { + margin-top: 10px; + } + .demo-pagination-block .demonstration { + margin-bottom: 16px; + } + } + } + &:last-of-type { + height: calc(100% - 100px); + } + } + .el-row { + display: flex; + align-items: center; + margin-bottom: 20px; + &:last-child { + margin-bottom: 0; + } + .grid-content { + align-items: center; + min-height: 36px; + } + + .topInfo { + display: flex; + align-items: center; + font-size: 16px; + font-weight: bold; + + & > div { + white-space: nowrap; + margin-right: 20px; + } + } + } +} +.stepItem { + width: 100%; + display: flex; + align-items: flex-start; + margin-bottom: 30px; + margin-left: 30px; + padding-bottom: 30px; + border-left: 2px solid #ccc; + &:first-of-type { + margin-top: 30px; + } + &:last-of-type { + margin-bottom: 0; + border-left: none; + } + .stepNum { + width: 30px; + height: 30px; + border-radius: 15px; + box-sizing: border-box; + color: #333; + border: 1px solid #999; + line-height: 28px; + text-align: center; + margin-right: 10px; + margin-left: -16px; + margin-top: -30px; + } + .stepCard { + width: 100%; + margin-top: -30px; + + .box-card { + width: 100%; + &:deep(.el-card__header) { + padding: 10px 15px; + } + .card-header { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + & > div:first-of-type { + margin-right: 80px; + font-size: 18px; + font-weight: bold; + } + } + } + } + &:hover .card-header { + color: #0098f5; + } + &:hover .stepNum { + border: 2px solid #0098f5; + color: #0098f5; + } +} +.el-input { + width: 100% !important; +} +:deep(.el-date-editor) { + width: 100%; +} +.el-select { + width: 100%; +} +</style> -- Gitblit v1.9.2