fetch(modify):账号管理

src/components/business/CustomerAccountDialog.vue

@@ -0,0 +1,286 @@
+<template>
+  <ElDialog v-model="visible" title="客户账号列表" width="1200px" @close="handleClose">
+    <!-- 搜索栏 -->
+    <ArtSearchBar
+      v-model:filter="searchForm"
+      :items="searchFormItems"
+      :show-expand="false"
+      label-width="85"
+      @reset="handleReset"
+      @search="handleSearch"
+    ></ArtSearchBar>
+
+    <!-- 表格 -->
+    <ArtTable
+      ref="tableRef"
+      row-key="id"
+      :loading="loading"
+      :data="accountList"
+      :currentPage="pagination.page"
+      :pageSize="pagination.pageSize"
+      :total="pagination.total"
+      :marginTop="10"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    >
+      <template #default>
+        <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
+      </template>
+    </ArtTable>
+  </ElDialog>
+</template>
+
+<script setup lang="ts">
+  import { h } from 'vue'
+  import { ElMessage, ElTag } from 'element-plus'
+  import { CustomerAccountService } from '@/api/modules'
+  import type { SearchFormItem } from '@/types'
+  import { formatDateTime } from '@/utils/business/format'
+
+  interface CustomerAccount {
+    id: number
+    username: string
+    phone: string
+    user_type: number
+    user_type_name: string
+    shop_id: number | null
+    shop_name: string
+    enterprise_id: number | null
+    enterprise_name: string
+    status: number
+    status_name: string
+    created_at: string
+  }
+
+  const props = defineProps<{
+    modelValue: boolean
+    shopId?: number
+    enterpriseId?: number
+  }>()
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+  }>()
+
+  const visible = computed({
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val)
+  })
+
+  const loading = ref(false)
+  const tableRef = ref()
+  const accountList = ref<CustomerAccount[]>([])
+
+  // 搜索表单初始值
+  const initialSearchState = {
+    username: '',
+    phone: '',
+    user_type: undefined as number | undefined,
+    status: undefined as number | undefined
+  }
+
+  // 搜索表单
+  const searchForm = reactive({ ...initialSearchState })
+
+  // 分页
+  const pagination = reactive({
+    page: 1,
+    pageSize: 20,
+    total: 0
+  })
+
+  // 搜索表单配置
+  const searchFormItems: SearchFormItem[] = [
+    {
+      label: '用户名',
+      prop: 'username',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入用户名'
+      }
+    },
+    {
+      label: '手机号',
+      prop: 'phone',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入手机号'
+      }
+    },
+    {
+      label: '用户类型',
+      prop: 'user_type',
+      type: 'select',
+      config: {
+        clearable: true,
+        placeholder: '全部'
+      },
+      options: () => [
+        { label: '代理账号', value: 3 },
+        { label: '企业账号', value: 4 }
+      ]
+    },
+    {
+      label: '状态',
+      prop: 'status',
+      type: 'select',
+      config: {
+        clearable: true,
+        placeholder: '全部'
+      },
+      options: () => [
+        { label: '启用', value: 1 },
+        { label: '禁用', value: 0 }
+      ]
+    }
+  ]
+
+  // 获取用户类型标签类型
+  const getUserTypeTag = (type: number) => {
+    return type === 3 ? 'success' : 'primary'
+  }
+
+  // 获取状态标签类型
+  const getStatusTag = (status: number) => {
+    return status === 1 ? 'success' : 'info'
+  }
+
+  // 列配置
+  const columns = computed(() => [
+    {
+      prop: 'username',
+      label: '用户名',
+      minWidth: 150
+    },
+    {
+      prop: 'phone',
+      label: '手机号',
+      width: 130
+    },
+    {
+      prop: 'user_type_name',
+      label: '用户类型',
+      width: 110,
+      formatter: (row: CustomerAccount) => {
+        return h(ElTag, { type: getUserTypeTag(row.user_type) }, () => row.user_type_name)
+      }
+    },
+    {
+      prop: 'shop_name',
+      label: '店铺名称',
+      minWidth: 150,
+      showOverflowTooltip: true,
+      formatter: (row: CustomerAccount) => row.shop_name || '-'
+    },
+    {
+      prop: 'enterprise_name',
+      label: '企业名称',
+      minWidth: 150,
+      showOverflowTooltip: true,
+      formatter: (row: CustomerAccount) => row.enterprise_name || '-'
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      width: 100,
+      formatter: (row: CustomerAccount) => {
+        return h(ElTag, { type: getStatusTag(row.status) }, () => row.status_name)
+      }
+    },
+    {
+      prop: 'created_at',
+      label: '创建时间',
+      width: 180,
+      formatter: (row: CustomerAccount) => formatDateTime(row.created_at)
+    }
+  ])
+
+  // 监听弹窗打开，重新加载数据
+  watch(
+    () => props.modelValue,
+    (newVal) => {
+      if (newVal) {
+        handleReset()
+      }
+    }
+  )
+
+  // 获取客户账号列表
+  const getTableData = async () => {
+    loading.value = true
+    try {
+      const params: any = {
+        page: pagination.page,
+        page_size: pagination.pageSize,
+        username: searchForm.username || undefined,
+        phone: searchForm.phone || undefined,
+        user_type: searchForm.user_type,
+        status: searchForm.status
+      }
+
+      // 根据传入的参数筛选
+      if (props.shopId) {
+        params.shop_id = props.shopId
+      }
+      if (props.enterpriseId) {
+        params.enterprise_id = props.enterpriseId
+      }
+
+      // 清理空值
+      Object.keys(params).forEach((key) => {
+        if (params[key] === '' || params[key] === undefined) {
+          delete params[key]
+        }
+      })
+
+      const res = await CustomerAccountService.getCustomerAccounts(params)
+      if (res.code === 0) {
+        accountList.value = res.data.items || []
+        pagination.total = res.data.total || 0
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('获取客户账号列表失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 重置搜索
+  const handleReset = () => {
+    Object.assign(searchForm, { ...initialSearchState })
+    pagination.page = 1
+    getTableData()
+  }
+
+  // 搜索
+  const handleSearch = () => {
+    pagination.page = 1
+    getTableData()
+  }
+
+  // 处理表格分页变化
+  const handleSizeChange = (newPageSize: number) => {
+    pagination.pageSize = newPageSize
+    getTableData()
+  }
+
+  const handleCurrentChange = (newCurrentPage: number) => {
+    pagination.page = newCurrentPage
+    getTableData()
+  }
+
+  // 关闭弹窗
+  const handleClose = () => {
+    // 重置搜索表单
+    Object.assign(searchForm, { ...initialSearchState })
+    pagination.page = 1
+    accountList.value = []
+  }
+</script>
+
+<style lang="scss" scoped>
+  // 客户账号列表弹窗样式
+</style>