factory-issue-app-front/src/views/qualityProblem/list.vue

<template>
  <div class="page">
    <nav1 :title="`质量问题列表(${unFinish})`" @backClick="backClick">
      <img @click="$router.push('/qualityProblemCount')" slot="right" src="../../assets/images/tongji.png" alt="">
    </nav1>
    <!-- 顶部搜索 -->
    <div class="top">
      <div style="overflow: hidden">
        <input type="text" v-model="search" placeholder="请输入搜索条件" class="search">
        <button class="searchButton" @click="onRefresh">
          <img :src="searchicon" alt="">
        </button>
        <div class="right" @click="filterShow = true">
          筛选
          <img :src="filtericon" alt="">
        </div>
      </div>
    </div>
    <!-- 列表 -->
    <div class="list" ref="listMain">
      <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" @load="loadMore" :immediate-check="false"
          :finished-text="list.length ? '没有更多了':'无数据'">
          <div slot="loading">加载中...</div>
          <div class="listItems" v-for="item in list" @click="toDetail(item.id)" style=" overflow: hidden">
            <van-swipe-cell>
              <div style="width: 100%;" class="listContent">
                <div class="listLeft">
                  <div style="overflow: hidden;margin-bottom: 8px;font-size: 13px">
                    <span>No.{{ item.id }}</span>
                    <span class="rightStatus" style="background: #2196F3" v-if="item.status == 0">OPEN</span>
                    <span class="rightStatus" style="background: #E1E1E1" v-else-if="item.status == 1">CLOSED</span>
                    <span class="rightStatus" style="background: #FE0000" v-else>TIMEOUT</span>
                  </div>
                  <div class="line">
                    <span style="margin-right:30px">
                      <span style="color:#ff7c2d" v-if="item.shortDepartmentStatus == 0">
                        短期部门：{{  zrbmList[0].filter(a => a.id == item.shortDepartment).length ? zrbmList[0].filter(a => a.id == item.shortDepartment)[0].name : "" }}
                        <span style="background:#ff7c2d" class="bgspan">待指派</span>
                      </span>
                      <span style="color:#FFB403" v-else-if="item.shortDepartmentStatus == 1">
                        短期部门：{{  zrbmList[0].filter(a => a.id == item.shortDepartment).length ? zrbmList[0].filter(a => a.id == item.shortDepartment)[0].name : "" }}
                        <span style="background:#FFB403" class="bgspan">待处理</span>
                      </span>
                      <span style="color:#4674C1" v-else-if="item.shortDepartmentStatus == 2">
                        短期部门：{{  zrbmList[0].filter(a => a.id == item.shortDepartment).length ? zrbmList[0].filter(a => a.id == item.shortDepartment)[0].name : "" }}
                        <span style="background: #4674C1" class="bgspan">处理中</span>
                      </span>
                      <span style="color:#2196F3" v-else>
                        短期部门：{{  zrbmList[0].filter(a => a.id == item.shortDepartment).length ? zrbmList[0].filter(a => a.id == item.shortDepartment)[0].name : "" }}
                        <span style="background: #2196F3" class="bgspan">已完成</span>
                      </span>
                    </span>
                    <span>
                      <span style="color:#ff7c2d" v-if="item.longDepartmentStatus == 0">
                        长期部门：{{  zrbmList[0].filter(a => a.id == item.longDepartment).length ? zrbmList[0].filter(a => a.id == item.longDepartment)[0].name : "" }}
                        <span style="background:#ff7c2d" class="bgspan">待指派</span>
                      </span>
                      <span style="color:#FFB403" v-else-if="item.longDepartmentStatus == 1">
                        长期部门：{{  zrbmList[0].filter(a => a.id == item.longDepartment).length ? zrbmList[0].filter(a => a.id == item.longDepartment)[0].name : "" }}
                        <span style="background:#FFB403" class="bgspan">待处理</span>
                      </span>
                      <span style="color:#4674C1" v-else-if="item.longDepartmentStatus == 2">
                        长期部门：{{  zrbmList[0].filter(a => a.id == item.longDepartment).length ? zrbmList[0].filter(a => a.id == item.longDepartment)[0].name : "" }}
                        <span style="background: #4674C1" class="bgspan">处理中</span>
                      </span>
                      <span style="color:#2196F3" v-else>
                        长期部门：{{  zrbmList[0].filter(a => a.id == item.longDepartment).length ? zrbmList[0].filter(a => a.id == item.longDepartment)[0].name : "" }}
                        <span style="background: #2196F3" class="bgspan">已完成</span>
                      </span>
                    </span>
                  </div>
                  <div class="line">
                    描述：{{ item.detail }}
                  </div>
                  <div class="line">
                    <!-- <span style="margin-right:30px">责任部门：质量部门</span> -->
                    <span>发生时间： {{ item.startTime }}</span>
                  </div>
                </div>
                <div class="listRight">
                  <van-icon name="arrow" />
                </div>
              </div>
              <template #right>
                <van-button style="width: 10px;padding: 5px;visibility: hidden" />
                <van-button @click="deleteIssue(item.id)" square text="删除" type="danger" class="listButton" />
              </template>
            </van-swipe-cell>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <!-- 筛选弹窗 -->
    <van-popup v-model="filterShow" position="right" style="width: 75%;height: 100%;overflow-y: auto">
      <div style="padding: 10px">
        <p class="popTitle">筛选</p>
        <div class="selectGroup">
          <div class="select" @click="myChange"
            :style="{background: filter.my ? '#2196F3':'#F5F5F5', color: filter.my ? '#fff':'#333333'}">
            我的任务
          </div>
        </div>
        <p class="popTitle2">LSSUE状态</p>
        <div class="selectGroup">
          <group gutter="0" style="margin-bottom: 10px; width: 100%">
            <popup-picker show-name title="" placeholder="请选择" :data="statusList" v-model="filter.status"
              value-text-align="left">
            </popup-picker>
          </group>
        </div>
  <!--      <p class="popTitle2">责任部门</p>
        <div class="selectGroup">
          <group gutter="0" style="margin-bottom: 10px; width: 100%">
            <popup-picker show-name title="" placeholder="请选择" :data="zrbmList" v-model="filter.zrbm"
              value-text-align="left">
            </popup-picker>
          </group>
        </div> -->
        <!-- from zzp-->
        <p class="popTitle2">长期责任部门</p>
        <div class="selectGroup">
          <group gutter="0" style="margin-bottom: 10px; width: 100%">
            <popup-picker show-name title="" placeholder="请选择" :data="zrbmList" v-model="filter.cqzrbm"
              value-text-align="left">
            </popup-picker>
          </group>
        </div>
        <p class="popTitle2">短期责任部门</p>
        <div class="selectGroup">
          <group gutter="0" style="margin-bottom: 10px; width: 100%">
            <popup-picker show-name title="" placeholder="请选择" :data="zrbmList" v-model="filter.dqzrbm"
              value-text-align="left">
            </popup-picker>
          </group>
        </div>
        <!---->
        <p class="popTitle2">区域</p>
        <div class="selectGroup">
          <group gutter="0" style="margin-bottom: 10px; width: 100%">
            <popup-picker show-name title="" placeholder="请选择" :data="qyList" v-model="filter.qy"
              value-text-align="left">
            </popup-picker>
          </group>
        </div>
   <!--     <p class="popTitle2">措施状态</p>
        <div class="selectGroup">
          <group gutter="0" style="margin-bottom: 10px; width: 100%">
            <popup-picker show-name title="" placeholder="请选择" :data="csztList" v-model="filter.cszt"
              value-text-align="left">
            </popup-picker>
          </group>
        </div> -->
        <!-- from zzp-->
        <p class="popTitle2">长期措施状态</p>
        <div class="selectGroup">
          <group gutter="0" style="margin-bottom: 10px; width: 100%">
            <popup-picker show-name title="" placeholder="请选择" :data="csztList" v-model="filter.cqcszt"
              value-text-align="left">
            </popup-picker>
          </group>
        </div>
        <p class="popTitle2">短期措施状态</p>
        <div class="selectGroup">
          <group gutter="0" style="margin-bottom: 10px; width: 100%">
            <popup-picker show-name title="" placeholder="请选择" :data="csztList" v-model="filter.dqcszt"
              value-text-align="left">
            </popup-picker>
          </group>
        </div>
        <!---->
        <p class="popTitle2">缺陷分类</p>
        <div class="selectGroup">
          <group gutter="0" style="margin-bottom: 10px; width: 100%">
            <popup-picker show-name title="" placeholder="请选择" :data="qxflList" v-model="filter.qxfl"
              value-text-align="left">
            </popup-picker>
          </group>
        </div>
        <div class="buttonBox">
          <div @click="reset">重置</div>
          <div @click="filterShow = false ; onRefresh()">确认</div>
        </div>
      </div>
    </van-popup>
    <!-- 新增跳转按钮 -->
    <div class=" footer" @click="go" v-show="canAdd">新增问题</div>
  </div>
</template>

<script>
  import searchicon from "@/assets/images/sousuo.png"
  import filtericon from "@/assets/images/shaixuan.png"
  import nav1 from "@/components/nav"
  import {
    PopupPicker,
    Group
  } from 'vux'
  export default {
    components: {
      PopupPicker,
      Group,
      nav1
    },
    data() {
      return {
        unFinish: 0,
        search: "",
        filterShow: false,
        canAdd: false,
        searchicon: searchicon,
        filtericon: filtericon,
        loading: false,
        isNoData: false,
        finished: false,
        isRefresh: false,
        pageIndex: 1,
        totalPage: -10,
        filter: {
          my: false,
          status: [],
          zrbm: [],
          cqzrbm: [],
          dqzrbm: [],
          qy: [],
          cszt: [],
          cqcszt: [],
          dqcszt: [],
          qxfl: []
        },
        statusList: [
          [{
            name: '开启中',
            value: '0'
          }, {
            name: '已关闭',
            value: '1'
          }, {
            name: '已超时',
            value: '2'
          }]
        ],
        zrbmList: [
          [{
            name: '无内容',
            value: '0'
          }]
        ],
        qyList: [
          [{
            name: '无内容',
            value: '0'
          }]
        ],
        csztList: [
          [{
            name: '待指派',
            value: '0'
          }, {
            name: '待处理',
            value: '1'
          }, {
            name: '处理中',
            value: '2'
          }, {
            name: '已完成',
            value: '3'
          }]
        ],
        qxflList: [
          [{
            name: '无内容',
            value: '0'
          }]
        ],
        list: [],
      }
    },
    created() {
      if (this.$route.query.token) {
        sessionStorage.setItem("token", this.$route.query.token)
      }
      if (this.$route.query.id) {
        sessionStorage.setItem("id", this.$route.query.id)
      }
      this.api.getIssueUnFinished({
        id: 1
      }).then(res => {
        if (res.status == 20000) {
          this.unFinish = res.data
        }
      })
      // 责任部门下拉列
      this.api.getDept().then(res => {
        if (res.status == 20000) {
          for (let i in res.data) {
            res.data[i].value = String(res.data[i].id)
          }
          this.$set(this.zrbmList, 0, res.data)
        }
      })
      // 区域下拉列
      this.api.getRegion().then(res => {
        if (res.status == 20000) {
          for (let i in res.data) {
            res.data[i].value = String(res.data[i].id)
          }
          this.$set(this.qyList, 0, res.data)
        }
      })
      // 缺陷分类下拉列
      this.api.getFlawClassify().then(res => {
        if (res.status == 20000) {
          for (let i in res.data) {
            res.data[i].value = String(res.data[i].id)
            res.data[i].name = res.data[i].type
          }
          this.$set(this.qxflList, 0, res.data)
        }
      })
      this.onRefresh();
    },
    methods: {
      backClick() {
        console.log("back")
        try {
          YifengPlugins.onBackKeyDown();
        } catch (error) {}
      },
      go() {
        this.$router.push("qualityProblemAdd")
      },
      onRefresh() {
        this.list = [];
        this.isNoData = false;
        this.pageIndex = 1;
        this.totalPage = -10;
        // this.$refs.listMain.scrollTop = 0;
        this.finished = false;
        // this.finished = true;
        this.getData();
      },
      loadMore() {
        // console.log('asd')
        // this.finished = true;
        if (this.finished) return;
        this.pageIndex += 1;
        this.getData()
      },
      //筛选 我的任务选择
      myChange() {
        if (this.filter.my) {
          this.filter.my = false
        } else {
          this.filter.my = true
        }
      },
      //删除问题
      deleteIssue(id) {
        let _this = this
        let postData = {
          id: id,
          issueType: 1
        }
        this.$dialog.confirm({
          title: '确认',
          message: '请确认是否删除该问题',
        }).then(() => {
          _this.api.removeIssue(postData).then(res => {
            if (res.status == 20000) {
              _this.$toast('删除成功');
              _this.onRefresh();
            } else {
               _this.$toast(res.message);
            }
          })
        }).catch(() => {

        })
      },
      //筛选 重置筛选
      reset() {
        this.$set(this.filter, 'cszt', [])
        this.$set(this.filter, 'cqcszt', [])
        this.$set(this.filter, 'dqcszt', [])
        this.$set(this.filter, 'qxfl', [])
        this.$set(this.filter, 'qy', [])
        this.$set(this.filter, 'status', [])
        this.$set(this.filter, 'zrbm', [])
        this.$set(this.filter, 'cqzrbm', [])
        this.$set(this.filter, 'dqzrbm', [])
        this.filter.my = false
        this.filterShow = false
        this.onRefresh()
      },
      // 详情跳转
      toDetail(id) {
        this.$router.push({
          path: "/qualityProblemEdit",
          query: {
            id: id
          }
        })
      },
      getData() {
        let postData = {
          page: this.pageIndex,
          size: 10,
          issueStatus: this.filter.status[0],
          longtimeDepartmentId: this.filter.cqzrbm[0],
          shorttimeDepartmentId: this.filter.dqzrbm[0],
          areaId: this.filter.qy[0],
          id: this.search,
          defecttype: this.filter.qxfl[0],
          issueStatusLong: this.filter.cqcszt[0],
          issueStatusShort: this.filter.dqcszt[0]
        }
        if (this.filter.my) {
          postData.myJob = 1
        }
        if (this.pageIndex == this.totalPage + 1) {
          this.finished = true;
          this.loading = false;
          return false;
        }
        this.loading = true;
        this.api.pageQualityIssue(postData).then(res => {
          this.loading = false;
          if (res.status == 20000) {
            if (res.message == "true") {
              this.canAdd = true
            } else {
              this.canAdd = false
            }
            if (this.pageIndex == 1 && res.data.row.length == 0) {
              this.finished = true;
            }
            for (let i in res.data.row) {
              this.list.push(res.data.row[i])
            }
            this.totalPage = res.data.page
          } else {
            this.$toast(res.messgae)
            this.finished = true
          }
        })
        this.isRefresh = false;
      }
    }
  }

</script>

<style lang="scss" scoped>
  .page {
    width: 100%;
    height: 100%;
    background: #F1F2F6;
    overflow-y: auto;
  }

  .top {
    background: #fff;
    padding: 8px 14px;
    margin-bottom: 10px;

    .right {
      float: right;
      line-height: 32px;
      color: #2196F3;

      img {
        width: 16px;
        height: 16px;
        vertical-align: middle;
      }
    }
  }

  .list {
    padding: 0 10px 60px 10px;
    height: calc(100% - 58px - 45px);
    overflow-y: auto;

    .listItems {
      font-size: 12px;
      margin-bottom: 10px;

      .listContent {
        display: flex;
        width: 100%;
        padding: 10px;
        background: #fff;
        overflow: hidden;

        .listLeft {
          width: calc(100% - 30px);

          .bgspan {
            color: #fff;
            padding: 3px 6px
          }
        }

        .listRight {
          width: 20px;
          margin-left: 10px;
          font-size: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .line {
        margin-bottom: 3px;
      }

      .listButton {
        width: 111px;
        height: 100%;
        // border-radius: 5px;
      }

      .rightStatus {
        width: 70px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background: red;
        color: #fff;
        // border-radius: 20px;
        float: right;
      }
    }
  }

  .popTitle,
  .popTitle2 {
    font-size: 16px;
    font-family: SimHei;
    font-weight: 400;
    color: #ADADAD;
    margin-bottom: 10px;
  }

  .popTitle2 {
    color: #676767;
  }

  .selectGroup {
    display: flex;
    flex-wrap: wrap;

    /deep/ .weui-cells {
      font-size: 14px;
    }

    .select {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 85px;
      margin-right: 10px;
      margin-bottom: 10px;
      height: 54px;
      background: #F5F5F5;
      // border-radius: 10px;
      font-size: 13px;
      font-family: SimHei;
      font-weight: 500;
      color: #333333;
    }
  }

  .buttonBox {
    margin-top: 50px;
    display: flex;
    justify-content: flex-end;

    div {
      width: 35%;
      height: 45px;
      text-align: center;
      font-size: 17px;
      border: 1px solid #2196F3;
      line-height: 45px;
    }

    div:nth-child(1) {
      display: inline-block;
      // border-radius: 35px 0px 0px 35px;
      background: #F5F5F5;
      color: #2196F3;
    }

    div:nth-child(2) {
      display: inline-block;
      background: #2196F3;
      // border-radius: 0px 35px 35px 0px;
      color: #fff;
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #FFFFFF;
    font-size: 16px;
    font-family: SimHei;
    font-weight: 400;
    color: #2196F3;
  }

  .search {
    width: 70%;
    height: 32px;
    padding: 0 10px;
    background: #F1F2F6;
    font-size: 15px;
    font-family: SimHei;
    font-weight: 400;
    color: #333333;
    float: left;
  }

  .searchButton {
    width: 32px;
    height: 32px;
    background: #2196F3;
    border: none;
    float: left;

    img {
      width: 16px;
      height: 16px;
      vertical-align: middle;
    }
  }

  /deep/ .van-overlay {
    z-index: 100 !important
  }

  .van-popup {
    z-index: 101 !important
  }

</style>