njzscloud-dispose-web/src/pages/cst/customer/purchaser/Purchaser.vue

<template>
  <ATablePage
    ref="tablePage"
    v-bind="tablePageProps">
    <template #highFormItem="formData">
      <ElFormItem label="账号">
        <ElInput v-model="formData.username" placeholder="账号"/>
      </ElFormItem>
      <ElFormItem label="客户姓名">
        <ElInput v-model="formData.nickname" placeholder="客户姓名"/>
      </ElFormItem>
      <ElFormItem label="联系电话">
        <ElInput v-model="formData.phone" placeholder="联系电话"/>
      </ElFormItem>
      <ElFormItem label="企业名称">
        <ElInput v-model="formData.orgName" placeholder="企业名称"/>
      </ElFormItem>
      <ElFormItem label="主体类型">
        <ElSelect v-model="formData.identityCategory" placeholder="主体类型">
          <ElOption v-for="item in orgCategory" :key="item.val" :label="item.txt" :value="item.val"/>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="结算方式">
        <ElSelect v-model="formData.settlementWay" placeholder="结算方式">
          <ElOption v-for="item in settlementWay" :key="item.val" :label="item.txt" :value="item.val"/>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="注册时间">
        <ADtPicker v-model="formData.regdateTimes" :change-handler="research"/>
      </ElFormItem>
    </template>
    <template #simpleFormItem="formData">
      <ElFormItem>
        <ElInput v-model="formData.keywords" placeholder="姓名/电话/账号/企业名称"/>
      </ElFormItem>
      <!-- <ElFormItem>
        <ElSelect v-model="formData.identityCategory" placeholder="主体类型">
          <ElOption v-for="item in orgCategory" :key="item.val" :label="item.txt" :value="item.val"/>
        </ElSelect>
      </ElFormItem>
      <ElFormItem>
        <ElInput v-model="formData.nickname" placeholder="客户姓名"/>
      </ElFormItem>
      <ElFormItem>
        <ElInput v-model="formData.phone" placeholder="联系电话"/>
      </ElFormItem>
      <ElFormItem>
        <ElInput v-model="formData.orgName" placeholder="企业名称"/>
      </ElFormItem> -->
    </template>
    <template #columns>
      <ElTableColumn label="账号" prop="username"/>
      <ElTableColumn label="客户姓名" prop="nickname"/>
      <ElTableColumn label="联系电话" prop="phone"/>
      <ElTableColumn label="主体类型">
        <template #default="scope">
          <!-- <span>
             <AIcon v-if="scope.row.identityCategory === identityCategory.ChanFei" name="kehu" style="color: var(&#45;&#45;main-color); font-weight: 600"/>
             <AIcon v-else-if="scope.row.identityCategory === identityCategory.YunShu" name="yunshu" style="color: var(&#45;&#45;main-color); font-weight: 600"/>
             <AIcon v-else-if="scope.row.identityCategory === identityCategory.XiaoNa" name="xiaonachang" style="color: var(&#45;&#45;main-color); font-weight: 600"/>
             <AIcon v-else-if="scope.row.identityCategory === identityCategory.CaiGou" name="icon-cart" style="color: var(&#45;&#45;main-color); font-weight: 600"/>
             <AIcon v-else-if="scope.row.identityCategory === identityCategory.SiJi" name="siji" style="color: var(&#45;&#45;main-color); font-weight: 600"/>
             <span style="margin-left: 8px">{{ scope.row.identityCategoryTxt }}</span>
           </span> -->
          <span>
            <AIcon v-if="scope.row.orgCategory === orgCategory.GeRen" name="kehu" style="color: var(--el-color-primary); font-weight: 600"/>
            <AIcon v-else-if="scope.row.orgCategory === orgCategory.QiYe" name="yunshu" style="color: var(--el-color-danger); font-weight: 600"/>
            <span style="margin-left: 8px">{{ scope.row.orgCategoryTxt }}</span>
          </span>
        </template>
      </ElTableColumn>
      <ElTableColumn label="企业名称" prop="orgName">
        <template #default="scope">
          <span>{{ Strings.isBlank(scope.row.orgName) ? '-' : 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"/>
  </ATablePage>
</template>

<script lang="ts" setup>
import CustomerApi from '@/pages/cst/customer/customer-api.ts'
import CustomerForm from '@/pages/cst/customer/CustomerForm.vue'
import {
  orgCategory,
  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 ATablePage, {
  type ATablePageInstance,
  buildTablePageProps,
} from '@/components/a-page/a-table-page/ATablePage.tsx'
import Strings from '@/common/utils/strings.ts'
import UserApi from '@/pages/sys/user/user-api.ts'

const customerFormIns = useTemplateRef<InstanceType<typeof CustomerForm>>('customerForm')
const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')

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

const tablePageProps = buildTablePageProps<CustomerTypes.SearchCustomerParam, CustomerTypes.SearchCustomerResult>({
  pageLayout: {
    searchFormHeight: '165px',
    dataListHeight: 1,
    enableHighForm: false,
  },
  table: {
    actionColumn: {
      tableActions: [
        {
          tooltip: '编辑',
          icon: 'Edit',
          action({row}) {
            customerFormIns.value?.open(row)
          },
        },
        {
          tooltip: '重置密码',
          icon: 'zhongzhimima',
          type: 'danger',
          confirm: {
            title: '确定重置密码？',
          },
          action({row}) {
            UserApi.resetPasswd(row.userId!)
              .then(res => {
                ElMessage.success({
                  message: res.msg,
                })
              })
          },
        },
      ],
    },
  },
  searchForm: {
    highForm: {
      contentWidth: 342,
    },
    paging(param) {
      return CustomerApi.paging({
        identityCategory: 'CaiGou',
        keywords: param.keywords,
      })
    },
  },
})

</script>