封装case-list暂存

src/view/drawers/case-drawer.vue

@@ -114,7 +114,9 @@ export default defineComponent({
       if (!caseInfo) return []
       return [
         {
-          title: `${caseInfo.phase} · ${caseInfo.reportPersonnel}`,
+          title: `${caseInfo.status} ${
+            caseInfo.reportPersonnel ? '· ' + caseInfo.reportPersonnel : ''
+          }`,
           sub: caseInfo.acceptTime,
           content: caseInfo.reportContent,
           imgs: [],
@@ -129,26 +131,6 @@ export default defineComponent({
     //       '案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
     //     imgs: [detail1, detail2],
     //   },
-    //   {
-    //     title: '立案 · 举报人',
-    //     sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
-    //     content:
-    //       '内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
-    //     imgs: [detail1, detail2],
-    //   },
-    //   {
-    //     title: '派遣 · 举报人',
-    //     sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
-    //     content:
-    //       '内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
-    //   },
-    //   {
-    //     title: '处置 · 举报人',
-    //     sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
-    //     content:
-    //       '内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
-    //     imgs: [detail1, detail2],
-    //   },
     // ])
     return {
       communityData,

src/view/drawers/case-list.vue

+<template>
+  <div class="case-list" :class="{ 'select-able': selectAble }">
+    <template v-if="list && list.length > 0">
+      <div
+        v-for="(item, i) in list"
+        :key="i"
+        class="case-item"
+        :class="{
+          done: item && item.status && item.status.indexOf('已结') >= 0,
+        }"
+        @click="handleClick(item)"
+      >
+        <div>
+          <p>
+            {{ item.address }}
+            <span v-show="item.managementScoreType">
+              <b>{{ item.managementScoreType }}</b>
+            </span>
+            <span v-show="item.managementType">
+              <b>{{ item.managementType }}</b>
+            </span>
+          </p>
+          <p>{{ item.acceptTime }}</p>
+        </div>
+        <div>{{ item.reportContent || '无' }}</div>
+        <div
+          v-if="item && item.status && item.status.indexOf('已结') >= 0"
+          class="flag"
+        >
+          已结案
+        </div>
+        <div v-else class="flag">处置中</div>
+      </div>
+    </template>
+    <m-empty v-else :img="empty" hidden-text />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import empty from '@/assets/images/empty.png'
+
+export default defineComponent({
+  name: 'CaseList',
+  props: {
+    list: {
+      type: Array as PropType<any[] | null>,
+      default: () => {
+        return []
+      },
+    },
+    selectAble: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+  },
+  emits: ['select'],
+  setup(_, ctx) {
+    const handleClick = (data: unknown) => {
+      ctx.emit('select', data)
+    }
+    return {
+      empty,
+      handleClick,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+
+.case-list
+  width 100%
+  height 100%
+  padding-right .05rem
+  overflow-y auto
+  &.select-able
+    .case-item
+      cursor pointer
+      transition all .1s ease
+      &:hover
+        background rgba(70,83,97,.25)
+        box-shadow none
+  .case-item
+    position relative
+    margin-top .08rem
+    padding .05rem .08rem
+    overflow hidden
+    background rgba(70,83,97,.45)
+    box-shadow 0 0 .04rem 0 rgba(44,51,70,.65), inset 0 .01rem .02rem 0 rgba(204,204,204,.2)
+    border-radius .04rem
+    &.done
+      .flag
+        background #27C5A2
+    >div
+      &:nth-of-type(1)
+        border-bottom .01rem dotted rgba(91,213,255,.5)
+        margin-bottom .05rem
+        p
+          &:first-child
+            width 94%
+            font-size .11rem
+            font-weight bold
+          &:last-child
+            font-size .09rem
+            color #ccc
+            margin .04rem 0
+          span
+            display inline-block
+            font-size .08rem
+            padding 0 .1rem
+            border-radius .08rem
+            margin-left .1rem
+            transform skew(-30deg)
+            background linear-gradient(to right, #FFF764, #BBA619)
+            >b
+              display inline-block
+              transform skew(30deg)
+              font-weight normal
+              color #000
+            &:last-child
+              background linear-gradient(to right, #64DCFF, #02B2D2)
+    .flag
+      background $orange
+      position absolute
+      top -0.16rem
+      right -0.36rem
+      transform rotate(45deg)
+      height .4rem
+      width .8rem
+      display flex
+      color #000
+      align-items flex-end
+      justify-content center
+      font-size .08rem
+</style>

src/view/drawers/community-drawer.vue

@@ -6,7 +6,9 @@
           v-for="(item, i) in caseInfo"
           :key="i"
           class="case-item"
-          :class="{ done: item && item.phase === '结案' }"
+          :class="{
+            done: item && item.status && item.status.indexOf('已结') >= 0,
+          }"
         >
           <div>
             <p>
@@ -21,7 +23,12 @@
             <p>{{ item.acceptTime }}</p>
           </div>
           <div>{{ item.reportContent || '无' }}</div>
-          <div v-if="item && item.phase === '结案'" class="flag">已结案</div>
+          <div
+            v-if="item && item.status && item.status.indexOf('已结') >= 0"
+            class="flag"
+          >
+            已结案
+          </div>
           <div v-else class="flag">处置中</div>
         </div>
       </div>

src/view/drawers/population-drawer.vue

@@ -2,31 +2,7 @@
   <div class="population-drawer">
     <m-card title="相关案件">
       <div class="case-wrap">
-        <template v-if="caseInfo && caseInfo.length > 0">
-          <div
-            v-for="(item, i) in caseInfo"
-            :key="i"
-            class="case-item"
-            :class="{ done: item && item.phase === '结案' }"
-          >
-            <div>
-              <p>
-                {{ item.address }}
-                <span v-show="item.managementScoreType">
-                  <b>{{ item.managementScoreType }}</b>
-                </span>
-                <span v-show="item.managementType">
-                  <b>{{ item.managementType }}</b>
-                </span>
-              </p>
-              <p>{{ item.acceptTime }}</p>
-            </div>
-            <div>{{ item.reportContent || '无' }}</div>
-            <div v-if="item && item.phase === '结案'" class="flag">已结案</div>
-            <div v-else class="flag">处置中</div>
-          </div>
-        </template>
-        <m-empty v-else :img="empty" hidden-text />
+        <CaseList :list="caseInfo" />
       </div>
     </m-card>
     <m-card title="人口详情">
@@ -114,11 +90,11 @@
 import { defineComponent, ref, PropType, computed } from 'vue'
 import Tabs, { TabsProp } from '../components/tabs.vue'
 import SubTitle from '../components/sub-title.vue'
-import empty from '@/assets/images/empty.png'
+import CaseList from './case-list.vue'
 
 export default defineComponent({
   name: 'PopulationDrawer',
-  components: { Tabs, SubTitle },
+  components: { Tabs, SubTitle, CaseList },
   props: {
     communityInfo: {
       type: Object as PropType<{ [key: string]: any } | null>,
@@ -238,7 +214,6 @@ export default defineComponent({
       showPersonDetail.value = true
     }
     return {
-      empty,
       curTab,
       tabs,
       tabs2,
@@ -255,7 +230,6 @@ export default defineComponent({
 
 <style lang="stylus" scoped>
 @import '../../components/MyComponent/main.styl'
-$border = .01rem solid rgba(91,213,255,.3)
 
 .population-drawer
   display flex
@@ -266,56 +240,7 @@ $border = .01rem solid rgba(91,213,255,.3)
       width 64%
   .case-wrap
     height 85vh
-    overflow-y auto
-    .case-item
-      position relative
-      margin-top .08rem
-      padding .05rem .08rem
     overflow hidden
-      background rgba(70,83,97,.45)
-      box-shadow 0 0 .04rem 0 rgba(44,51,70,.65)
-      border-radius .04rem
-      &.done
-        .flag
-          background #27C5A2
-      >div
-        &:nth-of-type(1)
-          border-bottom $border
-          padding-bottom .05rem
-          margin-bottom .05rem
-          p
-            &:last-child
-              font-size .09rem
-              color #ccc
-              margin .04rem 0
-            span
-              display inline-block
-              font-size .08rem
-              padding 0 .1rem
-              border-radius .08rem
-              margin-left .1rem
-              transform skew(-30deg)
-              background linear-gradient(to right, #FFF764, #BBA619)
-              >b
-                display inline-block
-                transform skew(30deg)
-                font-weight normal
-                color #000
-              &:last-child
-                background linear-gradient(to right, #64DCFF, #02B2D2)
-      .flag
-        background $secondary-color
-        position absolute
-        top -0.16rem
-        right -0.36rem
-        transform rotate(45deg)
-        height .4rem
-        width .8rem
-        display flex
-        color #000
-        align-items flex-end
-        justify-content center
-        font-size .09rem
 .person-bar
   display flex
   justify-content space-between