From 5139f883e44c23958ad11643b87d0334b8ceddfa Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Fri, 25 Aug 2023 17:36:18 +0800
Subject: [PATCH] xbot

---
 .../AppWorkOrderXbot/AppWorkOrderXbot.vue     | 353 ++++++++++++------
 1 file changed, 246 insertions(+), 107 deletions(-)

diff --git a/src/apps/AppWorkOrderXbot/AppWorkOrderXbot.vue b/src/apps/AppWorkOrderXbot/AppWorkOrderXbot.vue
index 830de2c6..6139a73e 100644
--- a/src/apps/AppWorkOrderXbot/AppWorkOrderXbot.vue
+++ b/src/apps/AppWorkOrderXbot/AppWorkOrderXbot.vue
@@ -1,151 +1,290 @@
 <template>
-  <div class="AppHandSnapshot">
-    <component v-if="refresh && isGridMember" :is="component" @change="onChange" :params="params" :ref="component"/>
-    <div class="tabs" v-if="isTab && isGridMember">
-      <div class="item" @click="tabClick(index, item.component)" v-for="(item, index) in tabs" :key="index">
-        <img :src="tabIndex == index ? item.activeImg : item.img" alt=""/>
-        <p :class="tabIndex == index ? 'color-3267F0' : ''">{{ item.text }}</p>
+  <div class="AppWorkOrder">
+    <AiTopFixed>
+      <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff"
+              @change="change"></u-tabs>
+      <div class="select-top">
+        <!-- <div class="tab-item">
+          <AiPagePicker type="gird" v-model="searchGrid" @change="confirm" valueObj nodeKey="id" formType="2">
+            <AiMore v-model="searchGrid.girdName" icon="arrow-down" placeholder="所属网格"/>
+          </AiPagePicker>
+        </div> -->
+        <div class="tab-item" @click="showType = true">
+          <AiMore v-model="eventStatusText" icon="arrow-down" placeholder="办件状态"/>
+        </div>
+        <u-select v-model="showType" :list="listType" value-name="dictValue" label-name="dictName" @confirm="confirm"></u-select>
       </div>
-    </div>
-    <div v-if="!isGridMember" class="empty">
-      <img src="./components/img/no-admin.png" alt="">
-      <p>没有网格员权限<br/>无法查看巡查上报信息哦~</p>
-    </div>
+    </AiTopFixed>
+    <template>
+      <AiCard v-for="(item, i) in datas" :key="i" @click.native="goDetail(item, 1)">
+        <template #custom>
+          <div class="card-top">
+            <div class="titles">{{ item.content }}</div>
+
+            <div class="types">
+              <span>事件类型</span>
+              <span class="types-right">{{ $dict.getLabel('xbotReportEventType', item.type)}}</span>
+            </div>
+            <div class="types">
+              <span>所属群聊</span>
+              <span class="types-right">{{ item.groupName }}</span>
+            </div>
+
+            <div class="gards">
+              <span>上报时间</span>
+              <span class="gards-right">{{ item.createTime }}</span>
+            </div>
+          </div>
+
+          <div class="status" :class="item.eventStatus == 0 ? 'status0' : item.eventStatus == 1 ? 'status1' : item.eventStatus == 2 ? 'status2' : 'status3'"
+               v-if="item.eventStatus">
+            <span class="icon"></span>
+            <span>
+              {{ $dict.getLabel('clapEventStatus', item.eventStatus) }}
+            </span>
+          </div>
+        </template>
+      </AiCard>
+      <AiEmpty v-if="!datas.length"></AiEmpty>
+    </template>
+    <div class="pad-b120" v-if="datas.length"></div>
   </div>
 </template>
 
 <script>
-import List from './List.vue'
-import Statistics from './Statistics.vue'
 import {mapState} from 'vuex'
 
 export default {
-  name: "AppWorkOrder",
-  appName: "工单管理",
+  name: 'AppWorkOrderXbot',
+  appName: '工单管理',
   data() {
     return {
-      component: 'List',
-      params: {},
-      refresh: true,
-      tabIndex: 0,
-      tabs: [
+      datas: [],
+      tabList: [
         {
-          img: require('./components/img/handle-icon.png'),
-          activeImg: require('./components/img/handle-icon-active.png'),
-          text: '办理',
-          component: 'List',
+          name: '全部待办',
         },
         {
-          img: require('./components/img/statistics-icon.png'),
-          activeImg: require('./components/img/statistics-icon-active.png'),
-          text: '统计',
-          component: 'Statistics',
+          name: '办件历史',
         },
       ],
-      isTab: true,
+      currentTabs: 0,
+      current: 1,
+      pages: 0,
+      searchGrid: {},
+      showType: false,
+      eventStatus: '',
+      eventStatusText: '',
     }
   },
   computed: {
     ...mapState(['user']),
-    isGridMember() {
-      return this.user.girdCheckType > 0
+    listType() {
+      return this.$dict.getDict(this.currentTabs == 0 ? 'clapEventStatusAll' : 'clapEventStatusHistory')
     }
   },
-  components: {
-    List,
-    Statistics,
-    Set,
-  },
-
-  methods: {
-    onChange(e) {
-      this.params = e.params
-      this.component = e.type
-    },
-    tabClick(index, component) {
-      this.tabIndex = index
-      this.component = component
-      this.refresh = false
-      this.$nextTick(() => {
-        this.refresh = true
-      })
-    }
-  },
-  onShow() {
-    document.title = '巡查上报'
-    uni.$on('hideTab', () => {
-      this.isTab = false
-    })
-    uni.$on('showTab', () => {
-      this.isTab = true
+  onLoad() {
+    uni.$on('nextList', () => {
+      this.current++
+      this.getList()
     })
     uni.$on('getListInit', () => {
-      this.$nextTick(() => this.$refs['List'].getListInit())
+      this.current = 1
+      this.getList()
     })
-    
-    this.$nextTick(() => this.$refs['List'].getListInit())
+
   },
-  onReachBottom() {
-    if (!this.tabIndex) {
-      this.$nextTick(() => this.$refs['List'].nextPage())
-    }
+  onShow() {
+    document.title = '工单管理'
+  },
+  created() {
+    this.$dict.load('clapEventStatus', 'clapEventStatusAll', 'clapEventStatusHistory', 'xbotReportEventType').then(() => {
+      this.getList()
+    })
+  },
+  methods: {
+    getListInit() {
+      this.current = 1
+      this.getList()
+    },
+    nextPage() {
+      this.current++
+      this.getList()
+    },
+    
+    getList() {
+      let {current, eventStatus, searchGrid: {id: girdId}} = this
+      this.$http.post(`/app/appsessionarchivereportinfo/list`, null, {
+        params: {
+          size: 10,
+          current, searchType: this.currentTabs == 1 ? '1' : '0',
+          eventStatus, girdId
+        },
+      })
+      .then((res) => {
+        if (res.code == 0) {
+          this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
+          this.pages = res.data.pages
+          this.$forceUpdate()
+        }
+      })
+    },
+
+    confirm(e) {
+      if (this.showType) {
+        this.eventStatus = e[0].value
+        this.eventStatusText = e[0].label
+      }
+      this.current = 1
+      this.getList()
+    },
+
+    goDetail(item) {
+      uni.navigateTo({url: `./Detail?id=${item.id}`})
+    },
+
+    change(index) {
+      this.current = 1
+      this.datas = []
+      this.eventStatus = ''
+      this.currentTabs = index
+      this.getList()
+    },
+
+    linkTo(url) {
+      uni.navigateTo({url})
+    },
   },
 }
 </script>
 
-<style lang="scss" scoped>
-.AppHandSnapshot {
+<style scoped lang="scss">
+.AppWorkOrder {
   height: 100%;
-}
+  padding: 0;
+  width: 100vw;
 
-.tabs {
-  width: 100%;
-  height: 98px;
-  background: #fff;
-  border-top: 1px solid #ddd;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  display: flex;
+  .select-top {
+    background: #fff;
+    display: flex;
+    padding: 24px 0;
 
-  .item {
-    flex: 1;
-    text-align: center;
+    .tab-item {
+      flex: 1;
+      text-align: center;
+      line-height: 48px;
+      font-size: 26px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #666;
 
-    img {
-      width: 56px;
-      height: 56px;
-      margin-top: 8px;
+      img {
+        width: 32px;
+        height: 32px;
+        margin-left: 8px;
+        vertical-align: middle;
+      }
     }
 
-    p {
-      font-size: 22px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #c4cad4;
-      line-height: 8px;
-    }
-
-    .color-3267F0 {
-      color: #3267f0;
+    .tab-item:nth-of-type(1) {
+      border-right: 1px solid #eee;
     }
   }
-}
 
-.empty {
-  text-align: center;
-
-  img {
-    width: 282px;
-    height: 306px;
-    margin: 136px auto 0;
+  ::v-deep .AiTopFixed .content {
+    padding: 0;
   }
 
-  p {
-    font-size: 28px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    color: #999;
-    line-height: 40px;
+  ::v-deep .AiCard {
+    background: #f3f6f9;
+    padding: 24px 40px 0 32px;
+
+    .start {
+      background: #fff;
+      border-radius: 16px;
+
+      .card-top {
+        padding: 32px;
+
+        .titles {
+          margin-bottom: 34px;
+          font-size: 32px;
+          font-weight: 500;
+          color: #333333;
+          line-height: 1.4;
+          word-break: break-all;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+
+        .types,
+        .gards {
+          margin-top: 8px;
+          font-size: 26px;
+
+          .types-right,
+          .gards-right {
+            margin-left: 32px;
+            color: #333333;
+          }
+        }
+      }
+
+      .status {
+        padding: 32px;
+        border-top: 1px solid #dddddd;
+
+        .icon {
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          vertical-align: middle;
+          margin-right: 8px;
+        }
+      }
+
+      .status0 {
+        color: #ff883c;
+
+        .icon {
+          background: #ff883c;
+        }
+      }
+
+      .status1 {
+        color: #1aaaff;
+
+        .icon {
+          background: #1aaaff;
+        }
+      }
+
+      .status2 {
+        color: #42d784;
+
+        .icon {
+          background: #42d784;
+        }
+      }
+
+      .status3 {
+        color: #ff4466;
+
+        .icon {
+          background: #ff4466;
+        }
+      }
+    }
+  }
+
+  // ::v-deep .AiCard:last-child {
+  //   padding-bottom: 24px;
+  // }
+  .pad-b120 {
+    background-color: #f3f6f9;
+    padding-bottom: 120px;
   }
 }
 </style>