U 修改工单列表页面

he wei

2021-11-05 74c60c36aef44eb3b9c033704a67edb4b4d333cd

 src/pages/alarmWork/list.vue

@@ -1,34 +1,238 @@
<template>
   <div class="">
      <div v-if="unitType==1">
         待处理工单
      </div>
      <div v-if="unitType==2">
         已处理工单
      </div>
   </div>

  <flex-layout class="main">
    <!-- 搜索 -->
    <div slot="header" class="contain-search">
      <flex-layout direction="row">
        <el-row :gutter="20">
          <el-col :span="12">
            <label>
              <span class="label">标题内容:</span>
              <el-input v-model="title" size="small" @change="keyWordChanged" placeholder="请输入关键词"></el-input>
            </label>
          </el-col>
          <el-col :span="12">
            <label>
              <span class="label">选择时间:</span>
              <el-date-picker
                v-model="datetime"
                type="daterange"
                size="small"
                range-separator=" ~ "
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="dateChanged"
              >
              </el-date-picker>
            </label>
          </el-col>
        </el-row>
        <div class="" slot="footer">
          <el-button type="primary" @click="getList" icon="el-icon-search">查询</el-button>
        </div>
      </flex-layout>
    </div>
    <!-- 列表 -->
    <flex-layout class="list-contain">
      <div class="scroll">
        <list-card
          class="list-item"
          v-for="(item, idx) in list"
          :key="'list_' + idx"
          @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" :disabled="!page.hasPreviousPage" size="mini" icon="el-icon-arrow-left" @click="prevPage">上一页</el-button>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
        <el-button type="primary" :disabled="!page.hasNextPage" size="mini" icon="el-icon-arrow-right" @click="nextPage">下一页</el-button>
      </div>
    </flex-layout>
  </flex-layout>
</template>

<script>
import FlexLayout from "@/components/FlexLayout.vue";
import ListCard from "./components/listCard.vue";

import {
  getList
} from './js/api';

export default {
   data() {
      return {
         unitType: 1
         unitType: 1,
      title: "",
      datetime: "",
      list: [],
      page: {
        currentPage: 1,
        pageSizes: [1, 5, 10, 20],
        pageSize: 5,
        total: 0,
        hasNextPage: false,
        hasPreviousPage: false,
        prePage: 0,
        nextPage: 0
      }
      }
   },
  components: {
    FlexLayout
    ,ListCard
  },
   watch: {
      '$route'() {
         // 监听路由变化，获取unitType
         this.unitType = this.$route.meta.unitType
      },
   },
  methods: {
    details (data) {
      console.log(data);
      this.$message({
        type: 'success',
        message: '注意, 我要跳转详情页面了 单号：' + data.orderId
      });
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.getList();
    },
    handleCurrentChange (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: this.page.currentPage,
        pageSize: this.page.pageSize,
        type: this.unitType
      };
      let data = {};
      if (this.title) {
        data.title = this.title;
      }
      getList(param, data).then((res) => {
        res = res.data;
        // console.log(res, '=====');
        let list = [];
        if (res.code) {
          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);
        this.list = list;
      }).catch((err) => {
        console.error(err);
      });
    }
    
  },
   mounted() {
      this.unitType = this.$route.meta.unitType
    this.unitType = this.$route.meta.unitType;

    this.getList();
   }

}
</script>

<style scoped>
</style>
.contain-search {
  background: #fff;
  border-bottom: 1px solid #c4c4c4;
  margin-bottom: 16px;
  padding: 14px 30px;
}
.contain-search span.label {
  font-size: 18px;
  font-weight: bold;
  color: #666;
  padding-right: 1em;
}
.list-contain {
  background: #fff;
  height: 100%;
  margin-left: 16px;
  border-top: 1px #c4c4c4 solid;
  border-left: 1px #c4c4c4 solid;
  padding: 30px 0 10px 30px;
}
.scroll {
  overflow-y: auto;
  padding-right: 30px;
}
.title {
  color: #04409a;
  font-size: 24px;
}
.list-item {
  margin-bottom: 18px;
}
.pagination {
  display: flex;
  padding-top: 10px;
  justify-content: center;
}
>>> .el-pagination {
  display: flex;
  padding: 0 1em;
}
>>> .el-pagination .el-input__inner {
  background: #343345;
  color: #fff;
}
>>> .el-input {
  width: 30em;
}
>>> .el-textarea {
  width: 40em;
}
>>> .el-select .el-input {
  width: 16em;
}
>>> .el-pagination .el-input {
  width: auto;
}
</style>