ZhangXianQiang
2024-03-18 19e30a39d6c080d657c092d823fc0925ea622582
Merge branch 'master' of http://42.193.1.25:9521/r/zgyw-ui
1个文件已添加
216 ■■■■■ 已修改文件
src/views/system/work-order/distribute/index.vue 216 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/system/work-order/distribute/index.vue
New file
@@ -0,0 +1,216 @@
<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>