U 修改列表页面

he wei

2021-11-05 1a136c4df1ddee2fedb119a264e73147b79bfb1c

 src/pages/alarmWork/list.vue

@@ -1,18 +1,200 @@
<template>
   <div class="">
      工单列表
   </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" 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="结束日期"
              >
              </el-date-picker>
            </label>
          </el-col>
        </el-row>
        <div class="" slot="footer">
          <el-button type="primary" 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>
      </div>
      <!-- 分页 -->
      <div class="pagination" slot="footer">
        <el-button type="primary" size="mini" icon="el-icon-arrow-left">上一页</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" size="mini" icon="el-icon-arrow-right">下一页</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,
      title: "",
      desc: "",
      datetime: "",
      level: 0,
      fileList: [],
      operate: 0,
      list: [],
      page: {
        currentPage: 1,
        pageSizes: [1, 5, 10, 20],
        pageSize: 5,
        total: 0
      }
      }
   },
  components: {
    FlexLayout
    ,ListCard
  },
   watch: {
      '$route'() {
         // 监听路由变化，获取unitType
         this.unitType = this.$route.meta.unitType
      },
   },
  methods: {
    details (data) {
      console.log(data);
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
    },
    // 查列表
    getList () {
      let param = {
        pageNum: 1,
        pageSize: 1,
        type: 1
      };
      let data = {

      };
      getList(param, data).then((res) => {
        res = res.data;
        console.log(res, '=====');
        let list = [];
        if (res.code) {
          list = res.data;
        }
        console.log(list);
        this.list = list;
      }).catch((err) => {
        console.error(err);
      });
    }
    
  },
   mounted() {
    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>