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>
              <Input 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"
      @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 addCustomer from "@/views/customer/component/addCustomer";
import addOrder from './component/addOrder'
export default {
  components: {
    addCustomer,
    addOrder
  },
  data() {
    return {
      select: {
        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>
            )
          }
        },
        {
          width: 40,
          type:'index',
          fixed:'left'
        },
        {
          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() {
      const res = await getList(this.select)
      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>