U 修改工单列表页面

he wei

2021-11-05 74c60c36aef44eb3b9c033704a67edb4b4d333cd

U 修改工单列表页面

 src/pages/alarmWork/components/listCard.vue

@@ -7,9 +7,9 @@
    >
      <div class="">
        <span>工单编号: {{data.orderId}}</span>
        <span>工单生成时间: {{data.workflowAlarm.alarmTime}}</span>
        <span>工单生成时间: {{data.createTime}}</span>
      </div>
      <div class="timer">处理时限:3333</div>
      <div class="timer">处理时限: ---</div>
    </div>
    <!-- 内容 -->
    <div class="contain">
@@ -28,18 +28,18 @@
      <div class="item">
        <div class="inner">
          <div class="title">当前处理环节</div>
          <div class="content strong">T1处理中</div>
          <div class="content strong">{{status}}</div>
        </div>
      </div>
      <div class="item">
        <div class="inner">
          <div class="title">告警是否清除</div>
          <div class="content strong">未清除</div>
          <div class="content strong">---</div>
        </div>
      </div>
      <div class="item">
        <div class="inner">
          <div class="state">待处理</div>
          <div class="state">{{orderStatus}}</div>
        </div>
      </div>
    </div>
@@ -47,6 +47,11 @@
</template>

<script>
import {
  STATUS,
  ORDERTYPE
} from '../js/const';

export default {
  props: {
    data: {
@@ -58,6 +63,14 @@
      }
    }
  },
  computed: {
    status () {
      return STATUS[this.data.status] || '状态错误';
    },
    orderStatus () {
      return ORDERTYPE[this.$route.meta.unitType];
    }
  },
  methods: {
    itemClick () {
      this.$emit('itemclick', this.data);

 src/pages/alarmWork/index.vue

@@ -1,5 +1,5 @@
<template>
    <router-view></router-view>
    <router-view :key="$route.fullPath"></router-view>
</template>

<script>

 src/pages/alarmWork/js/const.js

New file
@@ -0,0 +1,20 @@
// 当前状态
const STATUS = {
  "0": "自动派单",
  "2": "人工派单",
  "3": "T1处理中",
  "4": "T2处理中",
  "5": "归档",
  "6": "撤销"
};

// 工单状态
const ORDERTYPE = {
  "0": "待处理",
  "1": "已处理"
}

export {
  STATUS,
  ORDERTYPE
};

 src/pages/alarmWork/list.vue

@@ -7,7 +7,7 @@
          <el-col :span="12">
            <label>
              <span class="label">标题内容:</span>
              <el-input v-model="title" size="small" placeholder="请输入关键词"></el-input>
              <el-input v-model="title" size="small" @change="keyWordChanged" placeholder="请输入关键词"></el-input>
            </label>
          </el-col>
          <el-col :span="12">
@@ -20,13 +20,14 @@
                range-separator=" ~ "
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="dateChanged"
              >
              </el-date-picker>
            </label>
          </el-col>
        </el-row>
        <div class="" slot="footer">
          <el-button type="primary" icon="el-icon-search">查询</el-button>
          <el-button type="primary" @click="getList" icon="el-icon-search">查询</el-button>
        </div>
      </flex-layout>
    </div>
@@ -40,10 +41,11 @@
          @itemclick="details"
          :data="item"
        ></list-card>
        <el-empty :image-size="200" v-if="!list.length"></el-empty>
      </div>
      <!-- 分页 -->
      <div class="pagination" slot="footer">
        <el-button type="primary" size="mini" icon="el-icon-arrow-left">上一页</el-button>
        <el-button type="primary" :disabled="!page.hasPreviousPage" size="mini" icon="el-icon-arrow-left" @click="prevPage">上一页</el-button>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
@@ -53,7 +55,7 @@
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
        <el-button type="primary" size="mini" icon="el-icon-arrow-right">下一页</el-button>
        <el-button type="primary" :disabled="!page.hasNextPage" size="mini" icon="el-icon-arrow-right" @click="nextPage">下一页</el-button>
      </div>
    </flex-layout>
  </flex-layout>
@@ -72,17 +74,17 @@
        return {
            unitType: 1,
      title: "",
      desc: "",
      datetime: "",
      level: 0,
      fileList: [],
      operate: 0,
      list: [],
      page: {
        currentPage: 1,
        pageSizes: [1, 5, 10, 20],
        pageSize: 5,
        total: 0
        total: 0,
        hasNextPage: false,
        hasPreviousPage: false,
        prePage: 0,
        nextPage: 0
      }
        }
    },
@@ -99,31 +101,67 @@
  methods: {
    details (data) {
      console.log(data);
      this.$message({
        type: 'success',
        message: '注意, 我要跳转详情页面了 单号：' + data.orderId
      });
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      // console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.getList();
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      // console.log(`当前页: ${val}`);
      this.page.currentPage = val;
      this.getList();
    },
    // 上一页
    prevPage () {
      this.page.currentPage = this.page.prePage;
      this.getList();
    },
    // 下一页
    nextPage () {
      this.page.currentPage = this.page.nextPage;
      this.getList();
    },
    keyWordChanged () {
      this.getList();
    },
    dateChanged () {
      // TODO
      this.$message({
        type: 'warning',
        message: '功能开发中...'
      });
    },
    // 查列表
    getList () {
      let param = {
        pageNum: 1,
        pageSize: 1,
        type: 1
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
        type: this.unitType
      };
      let data = {

      };
      let data = {};
      if (this.title) {
        data.title = this.title;
      }
      getList(param, data).then((res) => {
        res = res.data;
        console.log(res, '=====');
        // console.log(res, '=====');
        let list = [];
        if (res.code) {
          list = res.data;
          let _data = res.data;
          list = _data.list;
          // 更新分页数据
          this.page.total = _data.total;
          this.page.hasNextPage = _data.hasNextPage;
          this.page.hasPreviousPage = _data.hasPreviousPage;
          this.page.prePage = _data.prePage;
          this.page.nextPage = _data.nextPage;
        }
        console.log(list);
        // console.log(list);
        this.list = list;
      }).catch((err) => {
        console.error(err);

 src/router/routes.js

@@ -22,14 +22,14 @@
                    path: 'pending',
                    meta: {
                        title: '待处理列表',
                        unitType: 1
                        unitType: 0
                    },
                    component: (resolve) => require(['@/pages/alarmWork/list.vue'], resolve),
                }, {
                    path: 'processed',
                    meta: {
                        title: '已处理列表',
                        unitType: 2
                        unitType: 1
                    },
                    component: (resolve) => require(['@/pages/alarmWork/list.vue'], resolve),
                },