From 8af56966d2101b185a7a9d82c504817fe6162f23 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Mon, 27 Feb 2023 17:39:16 +0800
Subject: [PATCH] 2023-2-27

---
 src/components/XyTable/index.vue             |   6 +-
 src/views/customer/component/addCustomer.vue |   4 +-
 src/views/customer/customer.vue              | 662 +++++++++++--------
 src/views/finance/component/detailServe.vue  |  35 +-
 src/views/finance/serveDetail.vue            | 277 +++++---
 5 files changed, 597 insertions(+), 387 deletions(-)

diff --git a/src/components/XyTable/index.vue b/src/components/XyTable/index.vue
index 15f14ba..47b61de 100644
--- a/src/components/XyTable/index.vue
+++ b/src/components/XyTable/index.vue
@@ -241,8 +241,10 @@ export default {
               ['select']: selectClick,
               ['cell-click']: cellClick,
               ['select-all']: selectAllClick,
-              ['selection-change']:selectChange}}>
-              
+              ['selection-change']:selectChange,
+              ['expand-change']:(row,expanded) => this.$emit('expand-change', {row,expanded})
+          }}>
+
               <el-table-column
                  type="index"
                  width="50" fixed="left" align="center" >
diff --git a/src/views/customer/component/addCustomer.vue b/src/views/customer/component/addCustomer.vue
index 46a2954..208ee1e 100644
--- a/src/views/customer/component/addCustomer.vue
+++ b/src/views/customer/component/addCustomer.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <xy-dialog ref="dialog" :form="flag === 1 ? form : form1" :is-show.sync="isShow" :rules="flag === 1 ? rules : rules1" title="编辑客户"
+    <xy-dialog ref="dialog" :form="{...this.form,...this.form1}" :is-show.sync="isShow" :rules="flag === 1 ? rules : rules1" title="编辑客户"
                :width="74" type="form">
       <template v-if="type === 'add'" v-slot:headerContent>
         <el-steps :active="flag" simple style="width: 72%;margin: auto;">
@@ -718,6 +718,8 @@ export default {
     },
     submit1(){
       this.$refs['dialog'].validate().then(res => {
+        this.form.sex = getSex(this.form.idcard)
+        this.form.birthday = getBirth(this.form.idcard)
         Object.defineProperty(this.form,'city_id',{
           value:this.form.area[0] || '',
           enumerable: true,
diff --git a/src/views/customer/customer.vue b/src/views/customer/customer.vue
index 253bb98..a015ef4 100644
--- a/src/views/customer/customer.vue
+++ b/src/views/customer/customer.vue
@@ -3,20 +3,51 @@
     <!--查询-->
     <div>
       <div ref="lxHeader">
-        <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="客户列表">
+        <lx-header
+          icon="md-apps"
+          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
+          text="客户列表"
+        >
           <div slot="content"></div>
 
           <slot>
             <div>
-              <el-select placeholder="关联板块" multiple v-model="select.product_type_id" size="small" style="width:300px;margin-right: 10px;">
-                <el-option v-for="(item,index) in types" :key="item.id" :value="item.id" :label="item.name" ></el-option>
+              <el-select
+                placeholder="关联板块"
+                multiple
+                v-model="select.product_type_id"
+                size="small"
+                style="width: 300px; margin-right: 10px"
+              >
+                <el-option
+                  v-for="(item, index) in types"
+                  :key="item.id"
+                  :value="item.id"
+                  :label="item.name"
+                ></el-option>
               </el-select>
 
-              <el-input size="small" placeholder="关键字搜索" v-model="select.keyword" style="width: 200px; margin-right: 10px" />
+              <el-input
+                size="small"
+                placeholder="关键字搜索"
+                v-model="select.keyword"
+                style="width: 200px; margin-right: 10px"
+              />
 
-              <Button style="margin-left: 10px" type="primary" @click="select.page = 1,getCustomers()">查询</Button>
-              <Button style="margin-left: 10px" type="primary"
-                @click="$refs['addCustomer'].type = 'add',$refs['addCustomer'].isShow = true">新增客户
+              <Button
+                style="margin-left: 10px"
+                type="primary"
+                @click="(select.page = 1), getCustomers()"
+                >查询</Button
+              >
+              <Button
+                style="margin-left: 10px"
+                type="primary"
+                @click="
+                  ($refs['addCustomer'].type = 'add'),
+                    ($refs['addCustomer'].isShow = true)
+                "
+                >新增客户
               </Button>
             </div>
           </slot>
@@ -24,316 +55,383 @@
       </div>
     </div>
 
-    <xy-table ref="table" :total="total" :list="list" :table-item="tableItem" :default-expand-all="false"
-      @pageSizeChange="e => {select.page_size = e;select.page=1;getCustomers()}"
-      @pageIndexChange="e => {select.page = e;getCustomers()}">
+    <xy-table
+      ref="table"
+      :total="total"
+      :list="list"
+      :table-item="tableItem"
+      :default-expand-all="false"
+      @pageSizeChange="
+        (e) => {
+          select.page_size = e;
+          select.page = 1;
+          getCustomers();
+        }
+      "
+      @pageIndexChange="
+        (e) => {
+          select.page = e;
+          getCustomers();
+        }
+      "
+    >
       <template v-slot:btns>
-        <el-table-column fixed="right" width="166" header-align="center" align="center" label="操作">
+        <el-table-column
+          fixed="right"
+          width="166"
+          header-align="center"
+          align="center"
+          label="操作"
+        >
           <template v-slot:default="scope">
-            <Poptip transfer confirm title="确认要删除?" @on-ok="destroy(scope.row)">
-              <Button size="small" type="error" ghost style="margin-right: 6px">删除</Button>
+            <Poptip
+              transfer
+              confirm
+              title="确认要删除?"
+              @on-ok="destroy(scope.row)"
+            >
+              <Button size="small" type="error" ghost style="margin-right: 6px"
+                >删除</Button
+              >
             </Poptip>
-            <Button size="small" ghost type="primary" @click="editor(scope.row)" style="margin-right: 6px">编辑</Button>
-            <Button size="small" type="primary"
-              @click="$refs['addOrder'].customerIdcard = scope.row.idcard,$refs['addOrder'].isShow = true,$refs['addOrder'].form.customer_id = scope.row.id">录入</Button>
+            <Button
+              size="small"
+              ghost
+              type="primary"
+              @click="editor(scope.row)"
+              style="margin-right: 6px"
+              >编辑</Button
+            >
+            <Button
+              size="small"
+              type="primary"
+              @click="
+                ($refs['addOrder'].customerIdcard = scope.row.idcard),
+                  ($refs['addOrder'].isShow = true),
+                  ($refs['addOrder'].form.customer_id = scope.row.id)
+              "
+              >录入</Button
+            >
           </template>
         </el-table-column>
       </template>
     </xy-table>
 
-    <addOrder ref="addOrder" :types="types" :accounts="accounts" @refresh="getCustomers"></addOrder>
-    <add-customer ref="addCustomer" :level-types="levelTypes" :types="types" :accounts="accounts" :cities="cities"
-      :disability-level="disabilityLevel" @refresh="getCustomers"></add-customer>
+    <addOrder
+      ref="addOrder"
+      :types="types"
+      :accounts="accounts"
+      @refresh="getCustomers"
+    ></addOrder>
+    <add-customer
+      ref="addCustomer"
+      :level-types="levelTypes"
+      :types="types"
+      :accounts="accounts"
+      :cities="cities"
+      :disability-level="disabilityLevel"
+      @refresh="getCustomers"
+    ></add-customer>
   </div>
 </template>
 
 <script>
-  import {
-    getList,
-    destroy
-  } from '@/api/customer'
-  import {
-    getparameter
-  } from '@/api/system/dictionary'
-  import {
-    getList as getUnit
-  } from "@/api/payUnit";
-  import {
-    getList as getTypes
-  } from '@/api/productType'
-  import { deepCopy } from '@/utils'
+import { getList, destroy } from "@/api/customer";
+import { getparameter } from "@/api/system/dictionary";
+import { getList as getUnit } from "@/api/payUnit";
+import { getList as getTypes } from "@/api/productType";
+import { deepCopy } from "@/utils";
 
-  import addCustomer from "@/views/customer/component/addCustomer";
-  import addOrder from './component/addOrder'
-  export default {
-    components: {
-      addCustomer,
-      addOrder
-    },
-    data() {
-      return {
-        select: {
-          product_type_id:[],
-          page: 1,
-          page_size: 10,
-          keyword: ''
-        },
-        disabilityLevel: [],
-        levelTypes: [],
-        cities: [],
-        accounts: [],
-        types: [],
+import addCustomer from "@/views/customer/component/addCustomer";
+import addOrder from "./component/addOrder";
+export default {
+  components: {
+    addCustomer,
+    addOrder,
+  },
+  data() {
+    return {
+      select: {
+        product_type_id: [],
+        page: 1,
+        page_size: 10,
+        keyword: "",
+      },
+      disabilityLevel: [],
+      levelTypes: [],
+      cities: [],
+      accounts: [],
+      types: [],
 
-        total: 0,
-        list: [],
-        tableItem: [{
-            type: 'expand',
-            expandFn: (props) => {
-              return ( <
-                Table style = {
+      total: 0,
+      list: [],
+      tableItem: [
+        {
+          type: "expand",
+          expandFn: (props) => {
+            return (
+              <Table
+                style={{
+                  margin: "0 166px 0 40px",
+                }}
+                width={1370}
+                stripe={true}
+                border={true}
+                size="small"
+                columns={[
                   {
-                    'margin': '0 166px 0 40px'
-                  }
-                }
-                width = {
-                  1370
-                }
-                stripe = {
-                  true
-                }
-                border = {
-                  true
-                }
-                size = "small"
-                columns = {
-                  [{
-                      title: '订单编号',
-                      key: 'no',
-                      width: 220,
-                      align: 'center'
-                    },
-                    {
-                      title: '订单产品',
-                      width: 200,
-                      align: 'center',
-                      render: (h, params) => {
-                        return h('div', params.row.product.name)
-                      }
-                    },
-                    {
-                      title: '时间',
-                      width: 270,
-                      align: 'center',
-                      render: (h, params) => {
-                        return h('div', [
-                          h('span', params.row.start_date),
-                          h('span', ' ~ '),
-                          h('span', params.row.end_date)
-                        ])
-                      }
-                    },
-                    {
-                      title: '单次价格',
-                      width: 180,
-                      align: 'right',
-                      key: 'unit_price'
-                    },
-                    {
-                      title: '总计时长',
-                      width: 160,
-                      align: 'center',
-                      key: 'total_time'
+                    title: "订单编号",
+                    key: "no",
+                    width: 220,
+                    align: "center",
+                  },
+                  {
+                    title: "订单产品",
+                    width: 200,
+                    align: "center",
+                    render: (h, params) => {
+                      return h("div", params.row.product.name);
                     },
-                    {
-                      title: '总计金额',
-                      width: 190,
-                      align: 'right',
-                      key: 'total_money'
+                  },
+                  {
+                    title: "时间",
+                    width: 270,
+                    align: "center",
+                    render: (h, params) => {
+                      return h("div", [
+                        h("span", params.row.start_date),
+                        h("span", " ~ "),
+                        h("span", params.row.end_date),
+                      ]);
                     },
-                    {
-                      title: '执行状态',
-                      align: 'center',
-                      render: (h, params) => {
-                        let statusName = new Map([
-                          [0, '未开始'],
-                          [1, '进行中'],
-                          [2, '已完成'],
-                        ])
-                        let statusColor = new Map([
-                          [0, 'blue'],
-                          [1, 'red'],
-                          [2, 'green'],
-                        ])
-                        return h('div', {
+                  },
+                  {
+                    title: "单次价格",
+                    width: 180,
+                    align: "right",
+                    key: "unit_price",
+                  },
+                  {
+                    title: "总计时长",
+                    width: 160,
+                    align: "center",
+                    key: "total_time",
+                  },
+                  {
+                    title: "总计金额",
+                    width: 190,
+                    align: "right",
+                    key: "total_money",
+                  },
+                  {
+                    title: "执行状态",
+                    align: "center",
+                    render: (h, params) => {
+                      let statusName = new Map([
+                        [0, "未开始"],
+                        [1, "进行中"],
+                        [2, "已完成"],
+                      ]);
+                      let statusColor = new Map([
+                        [0, "blue"],
+                        [1, "red"],
+                        [2, "green"],
+                      ]);
+                      return h(
+                        "div",
+                        {
                           style: {
-                            color: statusColor.get(params.row.status)
-                          }
-                        }, statusName.get(params.row.status))
-                      }
-                    }
-                  ]
-                }
-                data = {
-                  props?.row.orders
-                } >
-                <
-                /Table>
-              )
-            }
-          },
-          {
-            prop: "name",
-            label: "姓名",
-            width: "180",
-          },
-          {
-            label: '订单产品',
-            width: 220,
-            align: 'left',
-            customFn: (row) => {
-              return ( <
-                div > {
-                  row.orders.map(item => {
-                    return item.product.name
-                  }).toString()
-                } <
-                /div>
-              )
-            }
-          },
-          {
-            prop: "idcard",
-            label: "身份证号",
-            width: "220"
-          },
-          {
-            prop: "phone",
-            label: "手机号",
-            width: "160"
-          },
-          {
-            label: "委托人",
-            width: "180",
-            prop: 'contact_name'
-          },
-          {
-            label: "委托人电话",
-            width: "160",
-            prop: 'contact_phone'
+                            color: statusColor.get(params.row.status),
+                          },
+                        },
+                        statusName.get(params.row.status)
+                      );
+                    },
+                  },
+                ]}
+                data={props?.row.orders}
+              ></Table>
+            );
           },
-          {
-            prop: 'idcard_address',
-            label: '户籍地址',
-            width: 140
+        },
+        {
+          prop: "name",
+          label: "姓名",
+          width: "180",
+        },
+        {
+          label: "订单产品",
+          width: 220,
+          align: "left",
+          customFn: (row) => {
+            return (
+              <div>
+                {" "}
+                {row.orders
+                  .map((item) => {
+                    return item.product.name;
+                  })
+                  .toString()}{" "}
+              </div>
+            );
           },
-          {
-            label: '默认上门地址',
-            minWidth: 300,
-            align: 'left',
-            customFn: (row) => {
-              return ( <
-                div > {
-                  row.customer_address.filter(item => {
-                    return item.default === 1
-                  })[0]?.address || row.customer_address[0]?.address || '无'
-                } <
-                /div>
-              )
-            }
+        },
+        {
+          prop: "idcard",
+          label: "身份证号",
+          width: "220",
+        },
+        {
+          prop: "phone",
+          label: "手机号",
+          width: "160",
+        },
+        {
+          label: "委托人",
+          width: "180",
+          prop: "contact_name",
+        },
+        {
+          label: "委托人电话",
+          width: "160",
+          prop: "contact_phone",
+        },
+        {
+          prop: "idcard_address",
+          label: "户籍地址",
+          width: 140,
+        },
+        {
+          label: "默认上门地址",
+          minWidth: 300,
+          align: "left",
+          customFn: (row) => {
+            return (
+              <div>
+                {" "}
+                {row.customer_address.filter((item) => {
+                  return item.default === 1;
+                })[0]?.address ||
+                  row.customer_address[0]?.address ||
+                  "无"}{" "}
+              </div>
+            );
           },
-          {
-            label: '上门地址数',
-            prop: 'customer_address_count',
-            width: 140
-          }
-        ]
-      }
+        },
+        {
+          label: "上门地址数",
+          prop: "customer_address_count",
+          width: 140,
+        },
+      ],
+    };
+  },
+  methods: {
+    async getLevelTypes() {
+      const types = await getparameter(
+        {
+          number: "disabilityType",
+        },
+        false
+      );
+      this.levelTypes = types.detail;
     },
-    methods: {
-      async getLevelTypes() {
-        const types = await getparameter({
-          number: 'disabilityType'
-        }, false)
-        this.levelTypes = types.detail
-      },
 
-      async getDisabilityLevel() {
-        const levels = await getparameter({
-          number: 'disabilityLevel'
-        }, false)
-        this.disabilityLevel = levels.detail
-      },
+    async getDisabilityLevel() {
+      const levels = await getparameter(
+        {
+          number: "disabilityLevel",
+        },
+        false
+      );
+      this.disabilityLevel = levels.detail;
+    },
 
-      async getCustomers() {
-        let copySelect = deepCopy(this.select)
-        copySelect.product_type_id = copySelect?.product_type_id.toString()
-        const res = await getList(copySelect)
-        this.list = res.data.data
-        this.total = res.data.total
-      },
+    async getCustomers() {
+      let copySelect = deepCopy(this.select);
+      copySelect.product_type_id = copySelect?.product_type_id.toString();
+      const res = await getList(copySelect);
+      this.list = res.data.data;
+      this.total = res.data.total;
+    },
 
-      async getAccounts() {
-        const res = await getUnit({
+    async getAccounts() {
+      const res = await getUnit(
+        {
           page: 1,
-          page_size: 9999
-        }, false)
-        this.accounts = res.data
-      },
+          page_size: 9999,
+        },
+        false
+      );
+      this.accounts = res.data;
+    },
 
-      async getTypes() {
-        const res = await getTypes({
+    async getTypes() {
+      const res = await getTypes(
+        {
           page: 1,
-          page_size: 9999
-        }, false)
-        this.types = res.data
-      },
+          page_size: 9999,
+        },
+        false
+      );
+      this.types = res.data;
+    },
 
-      async getCity() {
-        let city = await getparameter({
-          number: 'city'
-        }, false)
-        for (let i = 0; i < city.detail.length; i++) {
-          let area = await getparameter({
-            pid: city.detail[i].id
-          }, false)
-          city.detail[i].children = area.detail
+    async getCity() {
+      let city = await getparameter(
+        {
+          number: "city",
+        },
+        false
+      );
+      for (let i = 0; i < city.detail.length; i++) {
+        let area = await getparameter(
+          {
+            pid: city.detail[i].id,
+          },
+          false
+        );
+        city.detail[i].children = area.detail;
 
-          for (let j = 0; j < area.detail.length; j++) {
-            let street = await getparameter({
-              pid: area.detail[j].id
-            }, false)
-            area.detail[j].children = street.detail
-          }
+        for (let j = 0; j < area.detail.length; j++) {
+          let street = await getparameter(
+            {
+              pid: area.detail[j].id,
+            },
+            false
+          );
+          area.detail[j].children = street.detail;
         }
+      }
 
-        this.cities = city.detail
-      },
+      this.cities = city.detail;
+    },
 
-      editor(row) {
-        this.$refs['addCustomer'].id = row.id
-        this.$refs['addCustomer'].type = 'editor'
-        this.$refs['addCustomer'].isShow = true
-      },
-      destroy(row) {
-        destroy(row.id).then(res => {
-          this.$successMessage('destroy', '客户')
-          this.getCustomers()
-        })
-      }
+    editor(row) {
+      this.$refs["addCustomer"].id = row.id;
+      this.$refs["addCustomer"].type = "editor";
+      this.$refs["addCustomer"].isShow = true;
+    },
+    destroy(row) {
+      destroy(row.id).then((res) => {
+        this.$successMessage("destroy", "客户");
+        this.getCustomers();
+      });
     },
-    mounted() {
-      this.getDisabilityLevel()
-      this.getLevelTypes()
-      this.getCustomers()
-      this.getCity()
-      this.getAccounts()
-      this.getTypes()
-    }
-  }
+  },
+  mounted() {
+    this.getDisabilityLevel();
+    this.getLevelTypes();
+    this.getCustomers();
+    this.getCity();
+    this.getAccounts();
+    this.getTypes();
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  ::v-deep .ivu-table-header thead tr th {
-    text-align: center !important;
-  }
+::v-deep .ivu-table-header thead tr th {
+  text-align: center !important;
+}
 </style>
diff --git a/src/views/finance/component/detailServe.vue b/src/views/finance/component/detailServe.vue
index 09ff2b4..f6da06b 100644
--- a/src/views/finance/component/detailServe.vue
+++ b/src/views/finance/component/detailServe.vue
@@ -20,18 +20,6 @@
           <template v-slot:btns>
             <el-table-column align="center" width="180" label="操作" header-align="center">
               <template v-slot:default="scope">
-                <Poptip transfer placement="top" >
-                  <template v-slot:default>
-                    <Button type="primary" size="small" @click="setPicList(scope.row)">照片</Button>
-                  </template>
-
-                  <template v-slot:content>
-                    <template v-for="item in scope.row.upload_list">
-                      <el-image :preview-src-list="picList" :src="item.upload.url" fit="contain" style="height: 200px;"></el-image>
-                    </template>
-                  </template>
-                </Poptip>
-
                 <Button type="primary" size="small" style="margin-left: 4px;" @click="editor(scope)">编辑</Button>
 
                 <Poptip
@@ -114,6 +102,29 @@ export default {
           label:'定位地址',
           minWidth:220,
           align:'left'
+        },
+        {
+          label:'照片',
+          minWidth: 200,
+          customFn:row => {
+            return (
+              <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>
+            )
+          }
         }
       ]
     }
diff --git a/src/views/finance/serveDetail.vue b/src/views/finance/serveDetail.vue
index c079d3c..c7405d0 100644
--- a/src/views/finance/serveDetail.vue
+++ b/src/views/finance/serveDetail.vue
@@ -1,11 +1,19 @@
 <template>
   <div>
     <div ref="lxHeader">
-      <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="服务明细">
+      <lx-header
+        icon="md-apps"
+        style="margin-bottom: 10px; border: 0px; margin-top: 15px"
+        text="服务明细"
+      >
         <div slot="content"></div>
         <slot>
-          <div style="display: flex;align-items: center">
-            <el-radio-group v-model="datePickMode" size="small" style="margin-right: 10px;">
+          <div style="display: flex; align-items: center">
+            <el-radio-group
+              v-model="datePickMode"
+              size="small"
+              style="margin-right: 10px"
+            >
               <el-radio-button :label="0">年</el-radio-button>
               <el-radio-button :label="1">月</el-radio-button>
             </el-radio-group>
@@ -13,42 +21,75 @@
               <el-date-picker
                 size="small"
                 placeholder="请选择时间"
-                style="width: 200px;margin-right: 10px;"
+                style="width: 200px; margin-right: 10px"
                 v-model="select.month"
                 type="month"
                 value-format="yyyy-MM"
-                @change="datePick">
+                @change="datePick"
+              >
               </el-date-picker>
             </template>
             <template v-else>
               <el-date-picker
                 size="small"
                 placeholder="请选择时间"
-                style="width: 200px;margin-right: 10px;"
+                style="width: 200px; margin-right: 10px"
                 v-model="select.year"
                 type="year"
                 value-format="yyyy"
-                @change="datePick">
+                @change="datePick"
+              >
               </el-date-picker>
             </template>
-            <Input v-model="select.keyword" placeholder="关键字搜索" style="width: 200px; margin-right: 10px"/>
-            <Button style="margin-left: 10px" type="primary" @click="select.page = 1,getList()">查询</Button>
-            <Button style="margin-left: 10px" type="primary" @click="exportServe">导出服务统计</Button>
+            <Input
+              v-model="select.keyword"
+              placeholder="关键字搜索"
+              style="width: 200px; margin-right: 10px"
+            />
+            <Button
+              style="margin-left: 10px"
+              type="primary"
+              @click="(select.page = 1), getList()"
+              >查询</Button
+            >
+            <Button
+              style="margin-left: 10px"
+              type="primary"
+              @click="exportServe"
+              >导出服务统计</Button
+            >
           </div>
         </slot>
       </lx-header>
     </div>
 
     <xy-table
+      :default-expand-all="false"
       :total="total"
       :list="list"
       :table-item="table"
-      @pageSizeChange="e => select.page_size = e"
-      @pageIndexChange="e => {select.page = e;getList()}">
+      :expand-row-keys="expandRowKeys"
+      @pageSizeChange="(e) => (select.page_size = e)"
+      @pageIndexChange="
+        (e) => {
+          select.page = e;
+          getList();
+        }
+      "
+      @expand-change="expandChange"
+    >
       <template v-slot:btns>
-        <el-table-column fixed="right" label="操作" width="68" header-align="center" align="center">
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="68"
+          header-align="center"
+          align="center"
+        >
           <template v-slot:default="scope">
-            <Button size="small" type="primary" @click="detail(scope)">查看</Button>
+            <Button size="small" type="primary" @click="detail(scope)"
+              >查看</Button
+            >
           </template>
         </el-table-column>
       </template>
@@ -59,118 +100,174 @@
 </template>
 
 <script>
-import {serveList} from '@/api/serveDetail'
-import {parseTime,getAgeByIdcard} from "@/utils"
-import { download } from '@/utils/downloadRequest'
+import { serveList, getList } from "@/api/serveDetail";
+import { parseTime, getAgeByIdcard } from "@/utils";
+import { download } from "@/utils/downloadRequest";
 
 import serveDraw from "@/views/finance/component/serveDraw";
 export default {
-  components:{
-    serveDraw
+  components: {
+    serveDraw,
   },
   data() {
     return {
-      isShowDraw:false,
-      isShowDetail:false,
-      datePickMode:1,//0为年1为月
-      select:{
-        page:1,
-        page_size:10,
-        keyword:'',
-        year:`${new Date().getFullYear()}`,
-        month:this.$moment(new Date()).format('YYYY-MM'),
+      expandRowKeys:[],
+      isShowDraw: false,
+      isShowDetail: false,
+      datePickMode: 1, //0为年1为月
+      select: {
+        page: 1,
+        page_size: 10,
+        keyword: "",
+        year: `${new Date().getFullYear()}`,
+        month: this.$moment(new Date()).format("YYYY-MM"),
       },
-      types:[],
+      types: [],
 
-      total:0,
-      list:[],
-      table:[
+      total: 0,
+      list: [],
+      innerList: [],
+      table: [
+        {
+          type: "expand",
+          width: 44,
+          expandFn: (row) => {
+            return (
+              <Table
+                style={{
+                  margin: "0 166px 0 40px",
+                }}
+                data={this.innerList}
+                width={1370}
+                stripe={true}
+                border={true}
+                size="small"
+                columns={
+                  [
+                    {
+                      title:'序号',
+                      key:'id'
+                    }
+                  ]
+                }
+              ></Table>
+            );
+          },
+        },
         {
-          prop:'name',
-          label:'客户姓名',
-          width: 140
+          prop: "name",
+          label: "客户姓名",
+          width: 140,
         },
         {
-          prop:'idcard',
-          label:'年龄',
+          prop: "idcard",
+          label: "年龄",
           width: 80,
-          formatter:(cell,data,value) => {
-            return getAgeByIdcard(value)
-          }
+          formatter: (cell, data, value) => {
+            return getAgeByIdcard(value);
+          },
         },
         {
-          prop:'sex',
-          label:'性别',
-          width: 80
+          prop: "sex",
+          label: "性别",
+          width: 80,
         },
         {
-          prop:'idcard',
-          label:'身份证号',
-          width: 180
+          prop: "idcard",
+          label: "身份证号",
+          width: 180,
         },
         {
-          prop:'phone',
-          label:'手机号',
-          width: 150
+          prop: "phone",
+          label: "手机号",
+          width: 150,
         },
         {
-          prop:'server_total',
-          label:'服务次数',
-          width: 120
+          prop: "server_total",
+          label: "服务次数",
+          width: 120,
         },
         {
-          prop:'server_time',
-          label:'服务时长',
-          width: 120
+          prop: "server_time",
+          label: "服务时长",
+          width: 120,
         },
         {
-          prop:'remark',
-          label:'备注',
+          prop: "remark",
+          label: "备注",
           minWidth: 200,
-          align:'left'
-        }
+          align: "left",
+        },
       ],
-    }
+    };
   },
   methods: {
-    exportServe(){
-      download('/api/admin/customer/schedule_list_skus','get',{
-        start_date:this.$moment(this.select.month).startOf('month').format('YYYY-MM-DD'),
-        end_date:this.$moment(this.select.month).endOf('month').format('YYYY-MM-DD'),
-        page:1,
-        page_size:9999,
-        is_export:1
-      },`服务统计表${this.select.month}.xls`)
+    async expandChange({ row, expanded }) {
+      console.log(row, expanded);
+      if (row.expandContent) return;
+      this.expandRowKeys = [row.id]
+      const res = await getList({
+        page: 1,
+        page_size: 9999,
+        customer_id: row.id,
+        year: this.select.year,
+        month: this.select.month,
+      });
+      //row.expandContent = res.data || [];
+      let currentIndex = 0;
+      this.list.some((item, index) => {
+        if (item.id === row.id) {
+          currentIndex = index;
+          return true;
+        }
+      });
+      this.$set(this, "innerList", res.data);
     },
 
-    datePick(){
-      if(this.datePickMode){
-        this.select.year = ''
-      }else{
-        this.select.month = ''
+    exportServe() {
+      download(
+        "/api/admin/customer/schedule_list_skus",
+        "get",
+        {
+          start_date: this.$moment(this.select.month)
+            .startOf("month")
+            .format("YYYY-MM-DD"),
+          end_date: this.$moment(this.select.month)
+            .endOf("month")
+            .format("YYYY-MM-DD"),
+          page: 1,
+          page_size: 9999,
+          is_export: 1,
+        },
+        `服务统计表${this.select.month}.xls`
+      );
+    },
+
+    datePick() {
+      if (this.datePickMode) {
+        this.select.year = "";
+      } else {
+        this.select.month = "";
       }
     },
 
-    detail(scope){
-      this.$refs['serveDraw'].row = scope.row
-      this.$refs['serveDraw'].select.customer_id = scope.row.id
-      this.$refs['serveDraw'].select.year = this.select.year
-      this.$refs['serveDraw'].select.month = this.select.month
-      this.$refs['serveDraw'].isShow = true
+    detail(scope) {
+      this.$refs["serveDraw"].row = scope.row;
+      this.$refs["serveDraw"].select.customer_id = scope.row.id;
+      this.$refs["serveDraw"].select.year = this.select.year;
+      this.$refs["serveDraw"].select.month = this.select.month;
+      this.$refs["serveDraw"].isShow = true;
     },
-    async getList(){
-      const res = await serveList(this.select)
-      this.total = res.total
-      this.list = res.data
-      console.log(this.list)
+    async getList() {
+      const res = await serveList(this.select);
+      this.total = res.total;
+      this.list = res.data;
     },
-
   },
   mounted() {
-    this.getList()
-  }
-}
+    this.getList();
+  },
+};
 </script>
 
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>