sishitongtang-crm/src/views/customer/customer.vue

<template>
  <div>
    <!--查询-->
    <div>
      <div ref="lxHeader">
        <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>

              <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>
            </div>
          </slot>
        </lx-header>
      </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()}">
      <template v-slot:btns>
        <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>
            <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>
  </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 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 = {
                  {
                    '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: '总计金额',
                      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'
          },
          {
            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
          }
        ]
      }
    },
    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 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({
          page: 1,
          page_size: 9999
        }, false)
        this.accounts = res.data
      },

      async getTypes() {
        const res = await getTypes({
          page: 1,
          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

          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
      },

      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()
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .ivu-table-header thead tr th {
    text-align: center !important;
  }
</style>