njzscloud-dispose-web/src/pages/cst/customer/Customer.vue

<template>
  <FormPage
    ref="formPage"
    :action-column="actionColumn"
    :left-tools="leftTools"
    :paging="paging"
    :tableProps="tableProps">
    <template #searchFormItem="{searchForm}">
      <ElFormItem label="账号">
        <ElInput v-model="searchForm.username" placeholder="账号"/>
      </ElFormItem>
      <ElFormItem label="客户姓名">
        <ElInput v-model="searchForm.nickname" placeholder="客户姓名"/>
      </ElFormItem>
      <ElFormItem label="联系电话">
        <ElInput v-model="searchForm.phone" placeholder="联系电话"/>
      </ElFormItem>
      <ElFormItem label="企业名称">
        <ElInput v-model="searchForm.orgName" placeholder="企业名称"/>
      </ElFormItem>
      <ElFormItem label="身份类型">
        <ElSelect v-model="searchForm.identityCategory" placeholder="身份类型">
          <ElOption v-for="item in identityCategory" :key="item.val" :label="item.txt" :value="item.val"/>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="结算方式">
        <ElSelect v-model="searchForm.settlementWay" placeholder="结算方式">
          <ElOption v-for="item in settlementWay" :key="item.val" :label="item.txt" :value="item.val"/>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="注册时间">
        <ADtPicker v-model="searchForm.regdateTimes" :change-handler="research"/>
      </ElFormItem>
    </template>
    <template #simpleSearchFormItem="{searchForm}">
      <ElFormItem>
        <ElSelect v-model="searchForm.identityCategory" placeholder="身份类型">
          <ElOption v-for="item in identityCategory" :key="item.val" :label="item.txt" :value="item.val"/>
        </ElSelect>
      </ElFormItem>
      <ElFormItem>
        <ElInput v-model="searchForm.nickname" placeholder="客户姓名"/>
      </ElFormItem>
      <ElFormItem>
        <ElInput v-model="searchForm.phone" placeholder="联系电话"/>
      </ElFormItem>
      <ElFormItem>
        <ElInput v-model="searchForm.orgName" placeholder="企业名称"/>
      </ElFormItem>
    </template>
    <template #columns>
      <ElTableColumn label="账号" prop="username"/>
      <ElTableColumn label="客户姓名" prop="nickname"/>
      <ElTableColumn label="联系电话" prop="phone">
        <template #default="scope">
          <span>
            <AIcon name="dianhua-1" style="color: var(--el-color-danger); font-weight: 600"/>
            <span style="margin-left: 8px">{{ scope.row.phone }}</span>
          </span>
        </template>
      </ElTableColumn>

      <ElTableColumn label="身份类型">
        <template #default="scope">
         <span>
            <AIcon v-if="scope.row.identityCategory === identityCategory.ChanFei" name="kehu" style="color: var(--main-color); font-weight: 600"/>
            <AIcon v-else-if="scope.row.identityCategory === identityCategory.YunShu" name="yunshu" style="color: var(--main-color); font-weight: 600"/>
            <AIcon v-else-if="scope.row.identityCategory === identityCategory.XiaoNa" name="xiaonachang" style="color: var(--main-color); font-weight: 600"/>
            <AIcon v-else-if="scope.row.identityCategory === identityCategory.CaiGou" name="icon-cart" style="color: var(--main-color); font-weight: 600"/>
            <AIcon v-else-if="scope.row.identityCategory === identityCategory.SiJi" name="siji" style="color: var(--main-color); font-weight: 600"/>
            <span style="margin-left: 8px">{{ scope.row.identityCategoryTxt }}</span>
          </span>
        </template>
      </ElTableColumn>
      <ElTableColumn label="企业名称" prop="orgName">
        <template #default="scope">
          <span>{{ scope.row.orgName ?? '-' }}</span>
        </template>
      </ElTableColumn>
      <ElTableColumn label="结算方式" prop="">
        <template #default="scope">
         <span>
            <AIcon v-if="scope.row.settlementWay === settlementWay.YueJie" name="yuejie" style="color: var(--el-color-success); font-weight: 600"/>
            <AIcon v-else-if="scope.row.settlementWay === settlementWay.YuE" name="yue" style="color: var(--el-color-success); font-weight: 600"/>
            <AIcon v-else-if="scope.row.settlementWay === settlementWay.XianFu" name="weixin" style="color: var(--el-color-success); font-weight: 600"/>
            <span style="margin-left: 8px">{{ scope.row.settlementWayTxt }}</span>
          </span>
        </template>
      </ElTableColumn>
      <ElTableColumn label="企业负责人">
        <template #default="scope">
          <ElTag v-if="scope.row.manager" type="success">是</ElTag>
          <ElTag v-else type="danger">否</ElTag>
        </template>
      </ElTableColumn>
      <ElTableColumn label="注册时间" prop="regdate"/>
    </template>
    <CustomerForm ref="customerForm" :research="research"/>
  </FormPage>
</template>

<script lang="ts" setup>
import CustomerApi from '@/pages/cst/customer/customer-api.ts'
import CustomerForm from '@/pages/cst/customer/CustomerForm.vue'
import FormPage from '@/components/page/FormPage.vue'
import type {
  ActionColumnType,
  ToolType,
} from '@/components/page/a-page-type.ts'
import type { ComponentExposed } from 'vue-component-type-helpers'
import {
  identityCategory,
  settlementWay,
} from '@/pages/cst/customer/constants.ts'
import ADtPicker from '@/components/a-dt-picker/ADtPicker.vue'
import AIcon from '@/components/a-icon/AIcon.vue'
import type { TableProps } from 'element-plus'
import { CustomerTypes } from '@/pages/cst/customer/customer'

const customerFormIns = useTemplateRef<InstanceType<typeof CustomerForm>>('customerForm')
const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')

const leftTools: ToolType[] = [
  /*   {
   icon: 'Plus',
   label: '新建',
   action() {
   customerFormIns.value?.open()
   },
   } ,*/
]

const actionColumn = reactive<ActionColumnType<CustomerTypes.TableData>>({
  tableActions: [
    {
      tooltip: '编辑',
      icon: 'Edit',
      action({row}) {
        customerFormIns.value?.open(row)
      },
    },
    /* {
     icon: 'Delete',
     loading: false,
     type: 'danger',
     tooltip: '删除',
     confirm: {
     title: '是否删除当前数据',
     },
     action({row}) {
     return CustomerApi.del([ row.id! ])
     .then(() => {
     ElMessage.success('删除成功')
     return true
     })
     },
     }, */
  ],
})
const tableProps = {
  spanMethod({row, column}) {
    if ([ 'username', 'nickname', 'phone', 'regdate' ].includes(column.prop!)) {
      return {
        rowspan: 1,
        colspan: 1,
      }
    }
    return {
      rowspan: row.rowCount,
      colspan: 1,
    }
  },
} as Pick<TableProps<CustomerTypes.TableData>, 'spanMethod'>

function research() {
  formPageIns.value?.doSearch()
}

function paging(param: CustomerTypes.SearchCustomerParam) {
  return CustomerApi.paging(param)
    .then(res => {
      const dataList: CustomerTypes.TableData[] = []
      for (const {userId, username, nickname, phone, customerInfos} of res.data) {
        for (let i = 0; i < customerInfos.length; i++) {
          const it = customerInfos[i]
          dataList.push({
            ...it,
            rowCount: i === 0 ? customerInfos.length : 0,
            userId,
            username,
            nickname,
            phone,
          })
        }
      }
      return dataList
    })
}
</script>