客户管理提交 8.11

src/api/member/driver/index.ts

@@ -0,0 +1,116 @@
+import request from '@/config/axios'
+
+// 会员用户 VO
+export interface UserVO {
+  // 编号
+  id: number
+  // 手机号
+  mobile: string
+  // 密码
+  password: string
+  // 状态
+  status: number
+  // 注册 IP
+  registerIp: string
+  // 注册终端
+  registerTerminal: number
+  // 账户类型,1个人,2车队
+  type: number
+  // 车队id
+  teamId: number
+  // 最后登录IP
+  loginIp: string
+  // 最后登录时间
+  loginDate: Date
+  // 用户昵称
+  nickname: string
+  // 头像
+  avatar: string
+  // 真实名字
+  name: string
+  // 用户性别
+  sex: number
+  // 所在地
+  areaId: number
+  // 出生日期
+  birthday: Date
+  // 会员备注
+  mark: string
+  // 积分
+  point: number
+  // 用户标签编号列表，以逗号分隔
+  tagIds: string
+  // 等级编号
+  levelId: number
+  // 经验
+  experience: number
+  // 用户分组编号
+  groupId: number
+  // 驾驶证图片
+  driverLicense: string
+  // 身份证人像面
+  idFront: string
+  // 身份证国徽面
+  idBack: string
+  // 实名认证标志：0-否；1-是, 2审核中
+  realNameAuthFlag: number
+}
+
+// 会员用户 API
+export const UserApi = {
+  // 查询会员用户分页
+  getUserPage: async (params: any) => {
+    return await request.get({ url: `/member/user/user-page`, params })
+  },
+
+  // 查询会员用户详情
+  getUser: async (id: number) => {
+    return await request.get({ url: `/member/user/get?id=` + id })
+  },
+
+  // 新增会员用户
+  createUser: async (data: UserVO) => {
+    return await request.post({ url: `/member/user/create`, data })
+  },
+
+  // 修改会员用户
+  updateUser: async (data: UserVO) => {
+    return await request.put({ url: `/member/user/update`, data })
+  },
+
+  // 删除会员用户
+  deleteUser: async (id: number) => {
+    return await request.delete({ url: `/member/user/delete?id=` + id })
+  },
+
+  // 导出会员用户 Excel
+  exportUser: async (params) => {
+    return await request.download({ url: `/member/user/export-excel`, params })
+  },
+
+// ==================== 子表（用户车辆信息） ====================
+
+  // 获得用户车辆信息分页
+  getPersonalVehiclePage: async (params) => {
+    return await request.get({ url: `/member/user/personal-vehicle/page`, params })
+  },
+  // 新增用户车辆信息
+  createPersonalVehicle: async (data) => {
+    return await request.post({ url: `/member/user/personal-vehicle/create`, data })
+  },
+
+  // 修改用户车辆信息
+  updatePersonalVehicle: async (data) => {
+    return await request.put({ url: `/member/user/personal-vehicle/update`, data })
+  },
+
+  // 删除用户车辆信息
+  deletePersonalVehicle: async (id: number) => {
+    return await request.delete({ url: `/member/user/personal-vehicle/delete?id=` + id })
+  },
+
+  // 获得用户车辆信息
+  getPersonalVehicle: async (id: number) => {
+    return await request.get({ url: `/member/user/personal-vehicle/get?id=` + id })
+  },
+}

src/utils/dict.ts

@@ -243,6 +243,7 @@ export enum DICT_TYPE {
   CANOFFLINE = 'canOffline',
   OPENFLAG = 'openFlag',
   ROUNDINGMODE = 'roundingMode',
-
-
+  DRIVETYPE = 'driver_type',
+  REALNAMEAUTHFLAG = 'realNameAuthFlag',
+  VEHICLEPROPERTY = 'vehicleProperty'
 }

src/views/system/customerManagement/driverManagement/UserForm.vue

@@ -0,0 +1,284 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="手机号" prop="mobile">
+            <el-input v-model="formData.mobile" placeholder="请输入手机号" /> </el-form-item
+        ></el-col>
+        <el-col :span="12">
+          <el-form-item label="密码" prop="password">
+            <el-input v-model="formData.password" placeholder="请输入密码" /> </el-form-item
+        ></el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="状态" prop="status">
+            <el-select v-model="formData.status" placeholder="请选择">
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select> </el-form-item
+        ></el-col>
+        <el-col :span="12">
+          <el-form-item label="注册 IP" prop="registerIp">
+            <el-input v-model="formData.registerIp" placeholder="请输入注册 IP" /> </el-form-item
+        ></el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="注册终端" prop="registerTerminal">
+            <el-input
+              v-model="formData.registerTerminal"
+              placeholder="请输入注册终端"
+            /> </el-form-item
+        ></el-col>
+        <el-col :span="12">
+          <el-form-item label="账户类型" prop="type">
+            <el-select v-model="formData.type" placeholder="请选择账户类型,1个人,2车队">
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.DRIVETYPE)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select> </el-form-item
+        ></el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="车队id" prop="teamId">
+            <el-input v-model="formData.teamId" placeholder="请输入车队id" /> </el-form-item
+        ></el-col>
+        <el-col :span="12">
+          <el-form-item label="最后登录IP" prop="loginIp">
+            <el-input v-model="formData.loginIp" placeholder="请输入最后登录IP" /> </el-form-item
+        ></el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="最后登录时间" prop="loginDate">
+            <el-date-picker
+              v-model="formData.loginDate"
+              type="date"
+              value-format="x"
+              placeholder="选择最后登录时间"
+            /> </el-form-item
+        ></el-col>
+        <el-col :span="12">
+          <el-form-item label="用户昵称" prop="nickname">
+            <el-input v-model="formData.nickname" placeholder="请输入用户昵称" /> </el-form-item
+          ><el-form-item label="头像" prop="avatar">
+            <el-input v-model="formData.avatar" placeholder="请输入头像" /> </el-form-item
+        ></el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="真实名字" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入真实名字" /> </el-form-item
+        ></el-col>
+        <el-col :span="12"
+          ><el-form-item label="用户性别" prop="sex">
+            <el-radio-group v-model="formData.sex">
+              <el-radio label="1">请选择字典生成</el-radio>
+            </el-radio-group>
+          </el-form-item></el-col
+        >
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="驾驶证图片" prop="driverLicense">
+            <el-input
+              v-model="formData.driverLicense"
+              placeholder="请输入驾驶证图片"
+            /> </el-form-item
+        ></el-col>
+        <el-col :span="12"
+          ><el-form-item label="身份证人像面" prop="idFront">
+            <el-input v-model="formData.idFront" placeholder="请输入身份证人像面" /> </el-form-item
+        ></el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="身份证国徽面" prop="idBack">
+            <el-input v-model="formData.idBack" placeholder="请输入身份证国徽面" /> </el-form-item
+        ></el-col>
+        <el-col :span="12">
+          <el-form-item label="实名认证标志" prop="realNameAuthFlag">
+            <el-select v-model="formData.realNameAuthFlag" placeholder="请选择">
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.REALNAMEAUTHFLAG)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12"
+          ><el-form-item label="所在地" prop="areaId">
+            <el-input v-model="formData.areaId" placeholder="请输入所在地" /> </el-form-item
+        ></el-col>
+        <el-col :span="12">
+          <el-form-item label="出生日期" prop="birthday">
+            <el-date-picker
+              v-model="formData.birthday"
+              type="date"
+              value-format="x"
+              placeholder="选择出生日期"
+            /> </el-form-item
+        ></el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { UserApi, UserVO } from '@/api/member/driver'
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+/** 会员用户 表单 */
+defineOptions({ name: 'UserForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  mobile: undefined,
+  password: undefined,
+  status: undefined,
+  registerIp: undefined,
+  registerTerminal: undefined,
+  type: undefined,
+  teamId: undefined,
+  loginIp: undefined,
+  loginDate: undefined,
+  nickname: undefined,
+  avatar: undefined,
+  name: undefined,
+  sex: undefined,
+  areaId: undefined,
+  birthday: undefined,
+  mark: undefined,
+  point: undefined,
+  tagIds: undefined,
+  levelId: undefined,
+  experience: undefined,
+  groupId: undefined,
+  driverLicense: undefined,
+  idFront: undefined,
+  idBack: undefined,
+  realNameAuthFlag: undefined
+})
+const formRules = reactive({
+  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
+  registerIp: [{ required: true, message: '注册 IP不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '账户类型,1个人,2车队不能为空', trigger: 'change' }],
+  nickname: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
+  avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
+  point: [{ required: true, message: '积分不能为空', trigger: 'blur' }],
+  experience: [{ required: true, message: '经验不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await UserApi.getUser(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as UserApi.UserVO
+    if (formType.value === 'create') {
+      await UserApi.createUser(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await UserApi.updateUser(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    mobile: undefined,
+    password: undefined,
+    status: undefined,
+    registerIp: undefined,
+    registerTerminal: undefined,
+    type: undefined,
+    teamId: undefined,
+    loginIp: undefined,
+    loginDate: undefined,
+    nickname: undefined,
+    avatar: undefined,
+    name: undefined,
+    sex: undefined,
+    areaId: undefined,
+    birthday: undefined,
+    mark: undefined,
+    point: undefined,
+    tagIds: undefined,
+    levelId: undefined,
+    experience: undefined,
+    groupId: undefined,
+    driverLicense: undefined,
+    idFront: undefined,
+    idBack: undefined,
+    realNameAuthFlag: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/system/customerManagement/driverManagement/components/PersonalVehicleForm.vue

@@ -0,0 +1,185 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+       <el-form-item label="车辆型号" prop="vehicleType">
+        <el-select v-model="formData.vehicleType" placeholder="请选择车辆型号">
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="车牌号" prop="vehicleNo">
+        <el-input v-model="formData.vehicleNo" placeholder="请输入车牌号" />
+      </el-form-item>
+      <el-form-item label="车辆VIN码" prop="vehicleVin">
+        <el-input v-model="formData.vehicleVin" placeholder="请输入车辆VIN码" />
+      </el-form-item>
+      <el-form-item label="mac地址" prop="mac">
+        <el-input v-model="formData.mac" placeholder="请输入mac地址" />
+      </el-form-item>
+      <el-form-item label="rfid" prop="rfid">
+        <el-input v-model="formData.rfid" placeholder="请输入rfid" />
+      </el-form-item>
+      <el-form-item label="品牌" prop="brand">
+        <el-input v-model="formData.brand" placeholder="请输入品牌" />
+      </el-form-item>
+      <el-form-item label="底盘号码" prop="chassisNumber">
+        <el-input v-model="formData.chassisNumber" placeholder="请输入底盘号码" />
+      </el-form-item>
+      <el-form-item label="电动机号码" prop="engineNumber">
+        <el-input v-model="formData.engineNumber" placeholder="请输入电动机号码" />
+      </el-form-item>
+      <el-form-item label="购车日期" prop="purchaseDate">
+        <el-date-picker
+          v-model="formData.purchaseDate"
+          type="date"
+          value-format="x"
+          placeholder="选择购车日期"
+        />
+      </el-form-item>
+      <el-form-item label="车辆厂家" prop="producer">
+        <el-input v-model="formData.producer" placeholder="请输入车辆厂家" />
+      </el-form-item>
+      <el-form-item label="所有人" prop="possessor">
+        <el-input v-model="formData.possessor" placeholder="请输入所有人" />
+      </el-form-item>
+      <el-form-item label="车辆性质:1私人车辆;2.车队车辆" prop="vehicleProperty">
+        <el-input v-model="formData.vehicleProperty" placeholder="请输入车辆性质:1私人车辆;2.车队车辆" />
+      </el-form-item>
+      <el-form-item label="车辆外观" prop="vehicleApc">
+        <el-input v-model="formData.vehicleApc" placeholder="请输入车辆外观" />
+      </el-form-item>
+      <el-form-item label="离线换电有效时间" prop="startTime">
+        <el-date-picker
+          v-model="formData.startTime"
+          type="date"
+          value-format="x"
+          placeholder="选择离线换电有效时间"
+        />
+      </el-form-item>
+      <el-form-item label="离线换电失效时间" prop="endTime">
+        <el-date-picker
+          v-model="formData.endTime"
+          type="date"
+          value-format="x"
+          placeholder="选择离线换电失效时间"
+        />
+      </el-form-item>
+      <el-form-item label="是否允许离线换电:0不允许；1允许" prop="canOffline">
+        <el-input v-model="formData.canOffline" placeholder="请输入是否允许离线换电:0不允许；1允许" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { UserApi } from '@/api/member/driver'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  teamId: undefined,
+  vehicleType: undefined,
+  vehicleNo: undefined,
+  vehicleVin: undefined,
+  mac: undefined,
+  rfid: undefined,
+  brand: undefined,
+  chassisNumber: undefined,
+  engineNumber: undefined,
+  purchaseDate: undefined,
+  producer: undefined,
+  possessor: undefined,
+  vehicleProperty: undefined,
+  vehicleApc: undefined,
+  startTime: undefined,
+  endTime: undefined,
+  canOffline: undefined,
+})
+const formRules = reactive({
+  vehicleVin: [{ required: true, message: '车辆VIN码不能为空', trigger: 'blur' }],
+  purchaseDate: [{ required: true, message: '购车日期不能为空', trigger: 'blur' }],
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number, teamId: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  formData.value.teamId = teamId
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await UserApi.getPersonalVehicle(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value
+    if (formType.value === 'create') {
+      await UserApi.createPersonalVehicle(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await UserApi.updatePersonalVehicle(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    teamId: undefined,
+    vehicleType: undefined,
+    vehicleNo: undefined,
+    vehicleVin: undefined,
+    mac: undefined,
+    rfid: undefined,
+    brand: undefined,
+    chassisNumber: undefined,
+    engineNumber: undefined,
+    purchaseDate: undefined,
+    producer: undefined,
+    possessor: undefined,
+    vehicleProperty: undefined,
+    vehicleApc: undefined,
+    startTime: undefined,
+    endTime: undefined,
+    canOffline: undefined,
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/system/customerManagement/driverManagement/components/PersonalVehicleList.vue

@@ -0,0 +1,124 @@
+<template>
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['member:user:create']">
+      <Icon icon="ep:plus" class="mr-5px" /> 新增
+    </el-button>
+    <el-table :data="child_data" :stripe="true" :show-overflow-tooltip="true">
+      <!-- <el-table-column label="id" align="center" prop="id" /> -->
+      <el-table-column label="车辆型号" align="center" prop="vehicleType" width="120" />
+      <el-table-column label="车牌号" align="center" prop="vehicleNo" width="120" />
+      <el-table-column label="车辆VIN码" align="center" prop="vehicleVin" width="120" />
+      <el-table-column label="mac地址" align="center" prop="mac" width="120" />
+      <el-table-column label="rfid" align="center" prop="rfid" width="120" />
+      <el-table-column label="品牌" align="center" prop="brand" width="120" />
+      <el-table-column label="底盘号码" align="center" prop="chassisNumber" width="120" />
+      <el-table-column label="电动机号码" align="center" prop="engineNumber" width="120" />
+      <el-table-column label="购车日期" align="center" prop="purchaseDate" width="120" />
+      <el-table-column label="车辆厂家" align="center" prop="producer" width="120" />
+      <el-table-column label="所有人" align="center" prop="possessor" width="120" />
+      <el-table-column label="车辆性质" align="center" prop="vehicleProperty" width="120">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.VEHICLEPROPERTY" :value="scope.row.vehicleProperty" />
+        </template>
+      </el-table-column>
+      <el-table-column label="车辆外观" align="center" prop="vehicleApc" width="120" />
+      <el-table-column label="离线换电有效时间" align="center" prop="startTime" width="150" />
+      <el-table-column label="离线换电失效时间" align="center" prop="endTime" width="150" />
+      <el-table-column label="是否允许离线换电" align="center" prop="canOffline" width="150">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.CANOFFLINE" :value="scope.row.canOffline" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+  <!-- 表单弹窗：添加/修改 -->
+  <PersonalVehicleForm ref="formRef" @success="getList" />
+</template>
+<script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import PersonalVehicleForm from './PersonalVehicleForm.vue'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const props = defineProps<{
+  teamId: undefined // 车队id（主表的关联字段）
+  // eslint-disable-next-line vue/prop-name-casing
+  child_data: []
+}>()
+const loading = ref(false) // 列表的加载中
+const list = ref([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  teamId: undefined
+})
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.teamId,
+  (val) => {
+    queryParams.teamId = val
+    // handleQuery()
+  },
+  { immediate: false }
+)
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await UserApi.getPersonalVehiclePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  if (!props.teamId) {
+    message.error('请选择一个会员用户')
+    return
+  }
+  formRef.value.open(type, id, props.teamId)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await UserApi.deletePersonalVehicle(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+</script>

src/views/system/customerManagement/driverManagement/index.vue

@@ -1,5 +1,264 @@
 <template>
-    <span>111</span>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="手机号" prop="mobile">
+        <el-input
+          v-model="queryParams.mobile"
+          placeholder="请输入手机号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="账户类型" prop="type">
+        <el-select
+          v-model="queryParams.type"
+          placeholder="请选择账户类型,1个人,2车队"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.DRIVETYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button type="primary" plain @click="openForm('create')">
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button type="success" plain @click="handleExport" :loading="exportLoading">
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      highlight-current-row
+      @current-change="handleCurrentChange"
+    >
+      <el-table-column label="编号" align="center" prop="id" width="120" />
+      <el-table-column label="手机号" align="center" prop="mobile" width="120" />
+      <el-table-column label="密码" align="center" prop="password" width="120" />
+      <el-table-column label="状态" align="center" prop="status" width="120">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
+      </el-table-column>
+      <el-table-column label="注册 IP" align="center" prop="registerIp" width="120" />
+      <el-table-column label="注册终端" align="center" prop="registerTerminal" width="120" />
+      <el-table-column label="账户类型" align="center" prop="type" width="120">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.DRIVETYPE" :value="scope.row.type" />
+        </template>
+      </el-table-column>
+
+      <el-table-column label="车队id" align="center" prop="teamId" width="120" />
+      <el-table-column label="最后登录IP" align="center" prop="loginIp" width="150" />
+      <el-table-column
+        label="最后登录时间"
+        align="center"
+        prop="loginDate"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="用户昵称" align="center" prop="nickname" width="120" />
+      <el-table-column label="头像" align="center" prop="avatar" width="120" />
+      <el-table-column label="真实名字" align="center" prop="name" width="120" />
+      <el-table-column label="用户性别" align="center" prop="sex" width="120" />
+      <el-table-column label="所在地" align="center" prop="areaId" width="120" />
+      <el-table-column
+        label="出生日期"
+        align="center"
+        prop="birthday"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="会员备注" align="center" prop="mark" width="120" />
+      <!-- <el-table-column label="积分" align="center" prop="point" /> -->
+      <!-- <el-table-column label="用户标签编号列表，以逗号分隔" align="center" prop="tagIds" /> -->
+      <!-- <el-table-column label="等级编号" align="center" prop="levelId" /> -->
+      <!-- <el-table-column label="经验" align="center" prop="experience" /> -->
+      <!-- <el-table-column label="用户分组编号" align="center" prop="groupId" /> -->
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="驾驶证图片" align="center" prop="driverLicense" width="150" />
+      <el-table-column label="身份证人像面" align="center" prop="idFront" width="150" />
+      <el-table-column label="身份证国徽面" align="center" prop="idBack" width="150" />
+      <el-table-column label="实名认证标志" align="center" prop="realNameAuthFlag" width="150" />
+      <el-table-column label="操作" align="center" fixed="right" width="200">
+        <template #default="scope">
+          <el-button link type="primary" @click="openForm('update', scope.row.id)">
+            编辑
+          </el-button>
+          <el-button link type="danger" @click="handleDelete(scope.row.id)"> 删除 </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <UserForm ref="formRef" @success="getList" />
+  <!-- 子表的列表 -->
+  <ContentWrap>
+    <el-tabs model-value="personalVehicle">
+      <el-tab-pane label="用户车辆信息" name="personalVehicle">
+        <PersonalVehicleList :child_data="child_data" />
+      </el-tab-pane>
+    </el-tabs>
+  </ContentWrap>
+</template>
+
 <script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { UserApi, UserVO } from '@/api/member/driver'
+import UserForm from './UserForm.vue'
+import PersonalVehicleList from './components/PersonalVehicleList.vue'
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+
+/** 会员用户 列表 */
+defineOptions({ name: 'MemberUser' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<UserVO[]>([]) // 列表的数据
+// 列表的总页数
+const total = ref(0)
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  mobile: undefined,
+  password: undefined,
+  status: undefined,
+  registerIp: undefined,
+  registerTerminal: undefined,
+  type: 1,
+  teamId: undefined,
+  loginIp: undefined,
+  loginDate: [],
+  nickname: undefined,
+  avatar: undefined,
+  name: undefined,
+  sex: undefined,
+  areaId: undefined,
+  birthday: undefined,
+  mark: undefined,
+  point: undefined,
+  tagIds: undefined,
+  levelId: undefined,
+  experience: undefined,
+  groupId: undefined,
+  createTime: [],
+  driverLicense: undefined,
+  idFront: undefined,
+  idBack: undefined,
+  realNameAuthFlag: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+const child_data = ref([])
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await UserApi.getUserPage(queryParams)
+    child_data.value = data.list[0].vehicles
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  queryParams.type = 1
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await UserApi.deleteUser(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await UserApi.exportUser(queryParams)
+    download.excel(data, '会员用户.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 选中行操作 */
+const currentRow = ref({}) // 选中行
+const handleCurrentChange = (row) => {
+  currentRow.value = row
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
 </script>