New file |
| | |
| | | <template> |
| | | <div class="row"> |
| | | <el-row type="flex" justify="left"> |
| | | <el-col :span="24" style="position: relative"> |
| | | <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> |
| | | <el-menu-item index="0" @click="changeUnit(null, '全部')"> |
| | | 全部单位 |
| | | </el-menu-item> |
| | | <el-menu-item index="1"> |
| | | 自流井运维单位(70/70) |
| | | </el-menu-item> |
| | | <el-menu-item index="2"> |
| | | 大安运维(50/50) |
| | | </el-menu-item> |
| | | <el-menu-item index="3">富顺运维单位(20/70)</el-menu-item> |
| | | <el-menu-item index="4">高新运维单位(15/40)</el-menu-item> |
| | | <el-menu-item index="5">荣县运维单位(90/90)</el-menu-item> |
| | | <el-menu-item index="6">贡井运维单位(45/45)</el-menu-item> |
| | | <el-menu-item index="7">沿滩运维单位(70/70)</el-menu-item> |
| | | </el-menu> |
| | | <el-tooltip class="item" effect="dark" content="自动下发设置" placement="left"> |
| | | <el-button class="setting" style="" type="success" icon="el-icon-s-tools" circle></el-button> |
| | | </el-tooltip> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row class="op-warp" type="flex" justify="left" > |
| | | <el-col :span="24"> |
| | | <el-button size="small" type="info" @click="selectedDistribute" class="op">下发选中工单</el-button> |
| | | <el-button size="small" type="danger" @click="allDistribute" class="op">全部下发</el-button> |
| | | <el-popover |
| | | class="op" |
| | | placement="right" |
| | | width="300px" |
| | | trigger="click"> |
| | | <span style="font-weight: bold;font-size: 16px">快速下发</span> |
| | | <el-form ref="fastDistributeForm" :model="fastDistributeForm" :rules="fastDistributeRules" label-width="80px"> |
| | | <el-form-item label="快捷方式" prop="fastWay"> |
| | | <el-radio v-model="fastDistributeForm.fastWay" label="0">最近30分钟</el-radio> |
| | | <el-radio v-model="fastDistributeForm.fastWay" label="01">最近1小时</el-radio> |
| | | <el-radio v-model="fastDistributeForm.fastWay" label="10">最近2小时</el-radio> |
| | | <el-radio v-model="fastDistributeForm.fastWay" label="11">最近1天</el-radio> |
| | | <el-radio v-model="fastDistributeForm.fastWay" label="101">自定义</el-radio> |
| | | </el-form-item> |
| | | <el-form-item v-if="fastDistributeForm.fastWay === '101'" label="时间范围"> |
| | | <el-date-picker |
| | | style="width: 100%" |
| | | v-model="fastTimeRange" |
| | | type="datetimerange" |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="数量限制" prop="fastNumLimit"> |
| | | <el-input v-model="fastDistributeForm.fastNumLimit" size="small" type="number" placeholder="此次工单下发最大数量"></el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" size="small" @click="fastDistribute">立即下发</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <el-button slot="reference" type="primary" size="small">快捷下发</el-button> |
| | | </el-popover> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row class="content-warp" type="flex" justify="left"> |
| | | <el-col :span="24"> |
| | | <el-table v-loading="loading" :data="workOrderList" @selection-change="handleSelectionChange"> |
| | | <el-table-column type="selection" width="55" align="center" /> |
| | | <el-table-column label="工单号" align="center" prop="workOrderNo"/> |
| | | <el-table-column label="运维单位" align="center" prop="unitName"/> |
| | | <el-table-column label="工单来源" align="center" prop="source"/> |
| | | <el-table-column label="故障类型" align="center" prop="errorType"/> |
| | | <el-table-column label="产生时间" align="center" prop="createTime"/> |
| | | </el-table> |
| | | |
| | | <pagination |
| | | v-show="total>0" |
| | | :total="total" |
| | | :page.sync="queryParams.pageNum" |
| | | :limit.sync="queryParams.pageSize" |
| | | @pagination="getList" |
| | | /> |
| | | </el-col> |
| | | |
| | | </el-row> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: 'index', |
| | | data() { |
| | | return { |
| | | // 当前运维单位 |
| | | unitId: null, |
| | | unitName: "", |
| | | // 多选 |
| | | multipleSelection: [], |
| | | // 下发时间范围 |
| | | fastTimeRange: [], |
| | | // 下发 |
| | | fastDistributeForm: { |
| | | fastWay: '', |
| | | fastNumLimit: null, |
| | | start: null, |
| | | end: null, |
| | | unitId: null |
| | | }, |
| | | // 下发表单验证 |
| | | fastDistributeRules: { |
| | | fastWay: [ |
| | | { required: true, message: "请选择快速分发方式", trigger: "change" } |
| | | ], |
| | | fastNumLimit: [ |
| | | { required: true, message: "请输入快速分发数量限制", trigger: "change" } |
| | | ], |
| | | }, |
| | | queryParams: { |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | }, |
| | | // 总条数 |
| | | total: 0, |
| | | // 非多个禁用 |
| | | multiple: true, |
| | | activeIndex: '0', |
| | | loading: false, |
| | | workOrderList: [], |
| | | } |
| | | }, |
| | | methods: { |
| | | changeUnit(unitId, unitName) { |
| | | this.unitId = unitId; |
| | | this.unitName = unitName; |
| | | // todo 触发数据查询 |
| | | }, |
| | | clearFastDistributeForm() { |
| | | this.fastDistributeForm.fastWay = '' |
| | | this.fastDistributeForm.start = null |
| | | this.fastDistributeForm.end = null |
| | | this.fastDistributeForm.fastNumLimit = null |
| | | this.fastTimeRange = [] |
| | | }, |
| | | allDis() {}, |
| | | // 全部下发 |
| | | allDistribute() { |
| | | this.$modal.confirm("确定要下发" + (this.unitId ? this.unitName + "下的" : "所有工单") + "吗?").then(function() { |
| | | return this.allDis(); |
| | | }).then(() => { |
| | | // this.getList(); |
| | | // this.$modal.msgSuccess("删除成功"); |
| | | }).catch(() => {}); |
| | | }, |
| | | // 快速下发 |
| | | fastDistribute() { |
| | | this.$refs['fastDistributeForm'].validate((valid) => { |
| | | if (valid) { |
| | | // 如果是自定义方式,那么时间段必填 |
| | | if (this.fastDistributeForm.fastWay === '101' && !this.fastTimeRange.length > 0) { |
| | | this.$message.warning("请选择时间范围") |
| | | return false |
| | | } |
| | | if (this.fastTimeRange.length > 0) { |
| | | this.fastDistributeForm.start = this.fastTimeRange[0] |
| | | this.fastDistributeForm.end = this.fastTimeRange[1] |
| | | } |
| | | this.fastDistributeForm.unitId = this.unitId |
| | | // todo 提交快速发布请求 |
| | | } else { |
| | | return false |
| | | } |
| | | }) |
| | | }, |
| | | // 选中工单下发 |
| | | selectedDistribute() { |
| | | if (this.multipleSelection.length < 1) { |
| | | this.$message.warning("请先选择要下发的工单") |
| | | return |
| | | } |
| | | // todo 下发工单 |
| | | }, |
| | | handleSelect(key, keyPath) { |
| | | console.log(key, keyPath); |
| | | }, |
| | | getList() { |
| | | |
| | | }, |
| | | // 多选框选中数据 |
| | | handleSelectionChange(selection) { |
| | | this.multipleSelection = selection.map(item => item.id) |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .row { |
| | | padding: 0 20px; |
| | | } |
| | | .op-warp { |
| | | margin-top: 10px; |
| | | } |
| | | .content-warp { |
| | | margin-top: 10px; |
| | | } |
| | | .op { |
| | | margin-right: 5px; |
| | | } |
| | | .setting { |
| | | position: absolute; |
| | | top: 10px; |
| | | right:5px |
| | | } |
| | | </style> |