From f36bf0697f85483715464f77e5abc22e19cf1789 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Wed, 1 Mar 2023 13:53:30 +0800
Subject: [PATCH] 2023-3-1

---
 src/views/finance/component/drawInfoItem.vue |  65 ++++
 src/views/finance/component/serveDraw.vue    | 318 +++++++++++--------
 src/views/finance/scheduleList.vue           |  28 +-
 src/views/finance/serveDetail.vue            |   6 +
 4 files changed, 285 insertions(+), 132 deletions(-)
 create mode 100644 src/views/finance/component/drawInfoItem.vue

diff --git a/src/views/finance/component/drawInfoItem.vue b/src/views/finance/component/drawInfoItem.vue
new file mode 100644
index 0000000..6ead336
--- /dev/null
+++ b/src/views/finance/component/drawInfoItem.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <div class="draw-title">{{ title }}</div>
+    <div style="margin-left: 2%;">
+      <template v-for="(value,key) in info">
+        <div style="margin-bottom: 8px;">
+          <span class="info-title">{{ key }}</span>
+          <span class="info-content">{{ value }}</span>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props:{
+    title:{
+      type:String,
+      default:"详情"
+    },
+    info:Object
+  },
+  data() {
+    return {}
+  },
+  methods: {},
+  computed: {},
+}
+</script>
+
+<style scoped lang="scss">
+.draw-title{
+  letter-spacing: 2px;
+  font-weight: 600;
+
+  position: relative;
+  padding: 10px 8px 10px 30px;
+  &::after{
+    content: '';
+    width: 10px;
+    height: 10px;
+    border-radius: 100%;
+    background: #B3241D;
+
+    transform: translateY(-50%);
+    position: absolute;
+    top: 50%;
+    left: 10px;
+  }
+}
+
+.info-title{
+  font-weight: 600;
+}
+.info-content{
+
+  padding-left: 10px;
+}
+
+::v-deep .el-drawer__header > :first-child{
+  font-size: 18px;
+  font-weight: 600;
+}
+</style>
diff --git a/src/views/finance/component/serveDraw.vue b/src/views/finance/component/serveDraw.vue
index 8e225f1..badc591 100644
--- a/src/views/finance/component/serveDraw.vue
+++ b/src/views/finance/component/serveDraw.vue
@@ -1,36 +1,47 @@
 <template>
   <div>
-    <el-drawer
-      size="46%"
-      :title="row.name || ''"
-      :visible.sync="isShow"
-      direction="rtl">
+    <el-drawer size="46%" title="详情" :visible.sync="isShow" direction="rtl">
       <template>
-        <div class="draw-title">用户信息</div>
-        <div style="margin-left: 2%;">
-          <div style="margin-bottom: 8px;">
-            <span class="info-title">性别</span>
-            <span class="info-content">{{ row.sex }}</span>
+        <div style="overflow-y: scroll; height: 100%; padding-bottom: 100px">
+          <drawInfoItem title="被护理人" :info="rowFormat[0]"></drawInfoItem>
+          <drawInfoItem title="护理人" :info="rowFormat[1]"></drawInfoItem>
+          <div class="draw-title">
+            {{ type === 1 ? "服务列表" : "本次服务信息" }}
           </div>
-          <div style="margin-bottom: 8px;">
-            <span class="info-title">身份证号</span>
-            <span class="info-content">{{ row.idcard }}</span>
-          </div>
-          <div style="margin-bottom: 8px;">
-            <span class="info-title">电话</span>
-            <span class="info-content">{{ row.phone }}</span>
-          </div>
-          <div style="margin-bottom: 8px;">
-            <span class="info-title">联系人</span>
-            <span class="info-content">{{ row.contact_name }} / {{ row.contact_phone }}</span>
-          </div>
-        </div>
-        <div class="draw-title">服务记录</div>
-        <div style="padding: 0 10px;">
-          <xy-table :is-page="false" :list="list" :table-item="table">
-            <template v-slot:btns>
+          <div style="padding: 0 10px">
+            <template v-if="type === 1">
+              <xy-table
+                :height="300"
+                :is-page="false"
+                :list="list"
+                :table-item="table"
+              >
+                <template v-slot:btns> </template>
+              </xy-table>
+            </template>
+            <template v-else>
+              <el-timeline style="margin-left: 8px">
+                <el-timeline-item
+                  v-for="item in list"
+                  :key="item.id"
+                  :timestamp="item.created_at"
+                  placement="top"
+                >
+                  <el-card>
+                    <h4>{{ typeFormat(item.type) }}</h4>
+                    <p>{{ item.address }}</p>
+                    <el-image
+                      :preview-src-list="picList"
+                      v-for="img in item.upload_list"
+                      :src="img.upload.url"
+                      fit="contain"
+                      style="height: 200px"
+                    ></el-image>
+                  </el-card>
+                </el-timeline-item>
+              </el-timeline>
             </template>
-          </xy-table>
+          </div>
         </div>
       </template>
     </el-drawer>
@@ -40,138 +51,190 @@
 </template>
 
 <script>
-import { scheduleLog } from '@/api/schedule'
-import { getList } from '@/api/serveDetail'
+import { scheduleLog } from "@/api/schedule";
 import moment from "moment";
+import { getAgeByIdcard } from "@/utils";
 
-import detail from './detailServe'
+import detail from "./detailServe";
+import drawInfoItem from "./drawInfoItem.vue";
 export default {
-  components:{
-    detail
+  components: {
+    detail,
+    drawInfoItem,
   },
-  provide(){
+  inject: ["selectedRow"],
+  provide() {
     return {
-      scheduleInfo:()=>this.scheduleInfo
-    }
+      scheduleInfo: () => this.scheduleInfo,
+    };
+  },
+  props: {
+    type: {
+      type: Number,
+      default: 1,
+    },
   },
   data() {
     return {
-      isShow:false,
-      row:{},
-      scheduleInfo:{},
+      isShow: false,
+      row: {},
+      scheduleInfo: {},
+      picList: [],
 
-      select:{
-        page: 1,
-        page_size:9999,
-        customer_id:'',
-        year:'',
-        month:'',
-        id:''
+      select: {
+        customer_id: "",
+        id: "",
+        order_id: "",
+        type: "",
       },
-      list:[],
-      table:[
+      list: [],
+      table: [
         {
-          prop:'nurse.name',
-          label:'护工',
-          width: 124
+          prop: "type",
+          label: "类型",
+          width: 140,
+          formatter: (cell, data, val) => {
+            switch (val) {
+              case 1:
+                return "签到";
+                break;
+              case 2:
+                return "过程打卡";
+                break;
+              case 3:
+                return "签退";
+                break;
+              case 4:
+                return "更新定位";
+                break;
+              default:
+                return val;
+            }
+          },
         },
         {
-          prop:'customer_address.address',
-          label:'上门地址',
-          minWidth: 160,
-          align:'left'
+          prop: "created_at",
+          label: "时间",
+          width: 170,
         },
         {
-          label:'服务时间',
-          width: 200,
-          customFn:(row) => {
-            return (
-              <div>{ moment(row.start_time).format('YYYY-MM-DD HH:mm') }~{ moment(row.end_time).format('HH:mm') }</div>
-            )
-          }
+          prop: "updated_at",
+          label: "更新",
+          width: 170,
         },
         {
-          label:'状态',
-          width: 80,
-          customFn:(row) => {
-            let map1 = new Map([
-              [0,'待护理'],
-              [1,'进行中'],
-              [2,'已完成']
-            ])
-            let map2 = new Map([
-              [0,'blue'],
-              [1,'red'],
-              [2,'green']
-            ])
-            return (
-              <div style={{'color':map2.get(row.status)}}>
-                {map1.get(row.status)}
-              </div>
-            )
-          }
+          prop: "address",
+          label: "定位地址",
+          minWidth: 220,
+          align: "left",
         },
         {
-          label:'详情',
-          width: 74,
-          fixed:"right",
-          customFn:(row) => {
-            let _this = this
+          label: "照片",
+          minWidth: 200,
+          customFn: (row) => {
             return (
-              <div>
-                <Button
-                  type="primary"
-                  size="small"
-                  on={
-                    {
-                      ['click']:() => {
-                        _this.scheduleInfo = row
-                        _this.$refs['detail'].time =  moment(row.start_time).format('YYYY-MM-DD HH:mm') + '~' + moment(row.end_time).format('HH:mm')
-                        _this.$refs['detail'].id = row.id
-                        _this.$refs['detail'].isShow = true
-                        _this.isShow = false
-                      }
-                    }
-                  }>查看</Button>
+              <div
+                style={{
+                  display: "flex",
+                  "flex-wrap": "wrap",
+                }}
+                on={{ ["click"]: (e) => this.setPicList(row) }}
+              >
+                {row.upload_list.map((item) => {
+                  return (
+                    <el-image
+                      preview-src-list={this.picList}
+                      src={item.upload.url}
+                      fit="contain"
+                      style="height: 200px;"
+                    ></el-image>
+                  );
+                })}
               </div>
-            )
-          }
-        }
-      ]
-    }
+            );
+          },
+        },
+      ],
+    };
   },
   methods: {
-    async getList(){
-      const res = await scheduleLog(this.select)
-      console.log(111,res)
-      // const res = await getList(this.select)
-      // this.list = res.data
-      // console.log(this.list)
-    }
+    init() {
+      this.select = {
+        customer_id: "",
+        id: "",
+        order_id: "",
+        type: "",
+      };
+    },
+
+    async getList() {
+      const res = await scheduleLog(this.select);
+      this.list = res;
+      this.picList = [];
+      this.list.forEach((item) => {
+        let pics = item.upload_list?.map((upload) => upload.upload?.url) || [];
+        this.picList.push(...pics);
+      });
+    },
   },
-  watch:{
-    isShow(val){
-      if(val){
-        this.getList()
+  computed: {
+    rowFormat() {
+      if (this.selectedRow()) {
+        return [
+          {
+            姓名: this.selectedRow().customer?.name,
+            性别: this.selectedRow().customer?.sex,
+            年龄: getAgeByIdcard(this.selectedRow().customer?.idcard),
+            地址: this.selectedRow().customer_address?.address,
+            联系人: this.selectedRow().customer?.contact_name,
+            联系人电话: this.selectedRow().customer?.contact_phone,
+          },
+          {
+            姓名: this.selectedRow().nurse?.name,
+            性别: this.selectedRow().nurse?.sex,
+            年龄: getAgeByIdcard(this.selectedRow().nurse?.idcard),
+            手机号: this.selectedRow().nurse?.mobile,
+          },
+        ];
       }
-    }
-  }
-}
+    },
+    typeFormat() {
+      return function (type) {
+        let map = new Map([
+          [1, "签到"],
+          [2, "过程打卡"],
+          [3, "签退"],
+          [4, "更新定位"],
+        ]);
+        return map.get(type);
+      };
+    },
+  },
+  watch: {
+    isShow(val) {
+      if (val) {
+        this.getList();
+      } else {
+        this.init();
+      }
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-.draw-title{
+.draw-title {
   letter-spacing: 2px;
   font-weight: 600;
 
   position: relative;
   padding: 10px 8px 10px 30px;
-  &::after{
-    content: '';
+  &::after {
+    content: "";
     width: 10px;
     height: 10px;
     border-radius: 100%;
-    background: #B3241D;
+    background: #b3241d;
 
     transform: translateY(-50%);
     position: absolute;
@@ -180,15 +243,14 @@ export default {
   }
 }
 
-.info-title{
+.info-title {
   font-weight: 600;
 }
-.info-content{
-
+.info-content {
   padding-left: 10px;
 }
 
-::v-deep .el-drawer__header > :first-child{
+::v-deep .el-drawer__header > :first-child {
   font-size: 18px;
   font-weight: 600;
 }
diff --git a/src/views/finance/scheduleList.vue b/src/views/finance/scheduleList.vue
index cd01f85..8130814 100644
--- a/src/views/finance/scheduleList.vue
+++ b/src/views/finance/scheduleList.vue
@@ -117,14 +117,17 @@
 
                 <div class="select-item">
                   <div class="select-item__label">状态</div>
+                  <el-radio v-model="select.schedule_status" :label="0"
+                    >待护理</el-radio
+                  >
                   <el-radio v-model="select.schedule_status" :label="1"
-                    >已排</el-radio
+                    >进行中</el-radio
                   >
                   <el-radio v-model="select.schedule_status" :label="2"
-                    >未排</el-radio
+                    >已完成</el-radio
                   >
                   <el-radio v-model="select.schedule_status" label=""
-                    >全部</el-radio
+                  >全部</el-radio
                   >
                 </div>
               </template>
@@ -178,12 +181,19 @@
               ghost
               type="primary"
               style="margin-right: 6px"
+              @click="e => {
+                selectedRow = scope.row;
+                $refs['draw'].select.id = scope.row.id;
+                $refs['draw'].isShow = true;
+              }"
             >查看</Button
             >
           </template>
         </el-table-column>
       </template>
     </xy-table>
+
+    <draw ref="draw" :type="2"></draw>
   </div>
 </template>
 
@@ -192,11 +202,21 @@ import { scheduleDelete } from "@/api/schedule/index"
 import { getList as customerIndex } from "@/api/customer"
 import { scheduleList } from "@/api/schedule";
 import { getList as nurseList} from "@/api/worker"
-
 import { download } from "@/utils/downloadRequest"
+
+import draw from "./component/serveDraw.vue"
 export default {
+  components:{
+    draw
+  },
+  provide(){
+    return {
+      selectedRow:() => this.selectedRow
+    }
+  },
   data() {
     return {
+      selectedRow:{},
       customers:[],
       nurses:[],
       select: {
diff --git a/src/views/finance/serveDetail.vue b/src/views/finance/serveDetail.vue
index 268b1e7..2173fbd 100644
--- a/src/views/finance/serveDetail.vue
+++ b/src/views/finance/serveDetail.vue
@@ -111,8 +111,14 @@ export default {
   components: {
     serveDraw,
   },
+  provide(){
+    return {
+      selectedRow:() => this.selectedRow
+    }
+  },
   data() {
     return {
+      selectedRow:{},
       isShowDraw: false,
       isShowDetail: false,
       datePickMode: 1, //0为年1为月