feat：新增客户管理页面

.env

@@ -2,7 +2,7 @@
 VITE_APP_TITLE=芋道管理系统
 
 # 项目本地运行端口号
-VITE_PORT=80
+VITE_PORT=8888
 
 # open 运行 npm run dev 时自动打开浏览器
 VITE_OPEN=true

.eslintignore

@@ -6,3 +6,4 @@
 /node_modules/*
 /dist*
 /src/main.ts
+/src/components/Tinyflow/ui/**

package.json

@@ -76,6 +76,7 @@
     "vue-i18n": "9.10.2",
     "vue-router": "4.4.5",
     "vue-types": "^5.1.1",
+    "vue3-country-region-select": "^1.0.0",
     "vue3-print-nb": "^0.1.4",
     "vue3-signature": "^0.2.4",
     "vuedraggable": "^4.1.0",

pnpm-lock.yaml

@@ -161,6 +161,9 @@ importers:
       vue-types:
         specifier: ^5.1.1
         version: 5.1.3(vue@3.5.12(typescript@5.3.3))
+      vue3-country-region-select:
+        specifier: ^1.0.0
+        version: 1.0.0(typescript@5.3.3)
       vue3-print-nb:
         specifier: ^0.1.4
         version: 0.1.4(typescript@5.3.3)
@@ -5034,6 +5037,9 @@ packages:
       vue:
         optional: true
 
+  vue3-country-region-select@1.0.0:
+    resolution: {integrity: sha512-4sHzVqd2AExz8Ijo2npiHCM6X50iD8AN2rtBZGeZc6y/LG4yNLzDFImZDT3UjBaAUFNUqQ1HR5akcQ1jrIuy5g==}
+
   vue3-print-nb@0.1.4:
     resolution: {integrity: sha512-LExI7viEzplR6ZKQ2b+V4U0cwGYbVD4fut/XHvk3UPGlT5CcvIGs6VlwGp107aKgk6P8Pgx4rco3Rehv2lti3A==}
 
@@ -10421,6 +10427,13 @@ snapshots:
     optionalDependencies:
       vue: 3.5.12(typescript@5.3.3)
 
+  vue3-country-region-select@1.0.0(typescript@5.3.3):
+    dependencies:
+      vue: 3.5.12(typescript@5.3.3)
+      vue-i18n: 9.10.2(vue@3.5.12(typescript@5.3.3))
+    transitivePeerDependencies:
+      - typescript
+
   vue3-print-nb@0.1.4(typescript@5.3.3):
     dependencies:
       vue: 3.5.12(typescript@5.3.3)

src/api/cus/management/index.ts

@@ -0,0 +1,81 @@
+import request from '@/config/axios'
+import type { Dayjs } from 'dayjs';
+
+/** 客户管理信息 */
+export interface Management {
+          id: number; // id
+          customerCode: string; // 客户编码
+          customerName: string; // 客户名称
+          status?: number; // 状态
+          remark: string; // 备注
+          afterSalesManager: string; // 售后负责人
+          countryCode: string; // 国家编码
+          countryName: string; // 国家名称
+          provinceCode: string; // 省编码
+          provinceName: string; // 省名称
+          cityCode: string; // 城市编码
+          cityName: string; // 城市名称
+          address: string; // 详细地址
+          longitude: number; // 经度
+          latitude: number; // 纬度
+          dbIp: string; // 数据库IP
+          dbPort: number; // 数据库端口
+          dbUsername: string; // 数据库账号
+          dbPassword: string; // 数据库密码
+  }
+
+export interface ManagementDbConnectionTestReq {
+  id?: number
+  dbIp?: string
+  dbPort?: number
+  dbUsername?: string
+  dbPassword?: string
+}
+
+// 客户管理 API
+export const ManagementApi = {
+  // 查询客户管理分页
+  getManagementPage: async (params: any) => {
+    return await request.get({ url: `/cus/management/page`, params })
+  },
+
+  // 查询客户管理详情
+  getManagement: async (id: number) => {
+    return await request.get({ url: `/cus/management/get?id=` + id })
+  },
+
+  // 新增客户管理
+  createManagement: async (data: Management) => {
+    return await request.post({ url: `/cus/management/create`, data })
+  },
+
+  // 修改客户管理
+  updateManagement: async (data: Management) => {
+    return await request.put({ url: `/cus/management/update`, data })
+  },
+
+  // 删除客户管理
+  deleteManagement: async (id: number) => {
+    return await request.delete({ url: `/cus/management/delete?id=` + id })
+  },
+
+  /** 批量删除客户管理 */
+  deleteManagementList: async (ids: number[]) => {
+    return await request.delete({ url: `/cus/management/delete-list?ids=${ids.join(',')}` })
+  },
+
+  // 导出客户管理 Excel
+  exportManagement: async (params) => {
+    return await request.download({ url: `/cus/management/export-excel`, params })
+  },
+
+  // 测试数据库连接
+  testDbConnection: async (data: ManagementDbConnectionTestReq) => {
+    return await request.post({ url: `/cus/management/test-db-connection`, data })
+  },
+
+  // 同步客户数据
+  syncData: async (id: number) => {
+    return await request.post({ url: `/cus/management/sync-data?id=` + id })
+  }
+}

src/api/system/area/index.ts

@@ -1,8 +1,11 @@
 import request from '@/config/axios'
 
 // 获得地区树
-export const getAreaTree = async () => {
+export const getAreaTree = async (countryCode?: string) => {
-  return await request.get({ url: '/system/area/tree' })
+  return await request.get({
+    url: '/system/area/tree',
+    params: countryCode ? { countryCode } : undefined
+  })
 }
 
 // 获得 IP 对应的地区名

src/main.ts

@@ -46,6 +46,7 @@ import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐
 import { setupWangEditorPlugin } from '@/views/bpm/model/form/PrintTemplate'
 
 import print from 'vue3-print-nb' // 打印插件
+import vueCountryRegionSelect from 'vue3-country-region-select'
 
 // 创建实例
 const setupAll = async () => {
@@ -77,6 +78,8 @@ const setupAll = async () => {
   // 打印
   app.use(print)
 
+  app.use(vueCountryRegionSelect)
+
   app.mount('#app')
 }
 

src/utils/routerHelper.ts

@@ -87,9 +87,13 @@ export const generateRoute = (routes: AppCustomRouteRecordRaw[]): AppRouteRecord
 
     // 2. 生成 data（AppRouteRecordRaw）
     // 路由地址转首字母大写驼峰，作为路由名称，适配keepAlive
+    let path =
+      route.path.indexOf('?') > -1 && !isUrl(route.path) ? route.path.split('?')[0] : route.path // 注意，需要排除 http 这种 url，避免它带 ? 参数被截取掉
+    if (route.parentId == 0 && path && !isUrl(path) && !path.startsWith('/')) {
+      path = `/${path}`
+    }
     let data: AppRouteRecordRaw = {
-      path:
+      path,
-        route.path.indexOf('?') > -1 && !isUrl(route.path) ? route.path.split('?')[0] : route.path, // 注意，需要排除 http 这种 url，避免它带 ? 参数被截取掉
       name:
         route.componentName && route.componentName.length > 0
           ? route.componentName
@@ -124,7 +128,7 @@ export const generateRoute = (routes: AppCustomRouteRecordRaw[]): AppRouteRecord
       // 目录
       if (route.children?.length) {
         data.component = Layout
-        data.redirect = getRedirect(route.path, route.children)
+        data.redirect = getRedirect(path, route.children)
         // 外链
       } else if (isUrl(route.path)) {
         data = {

src/views/Login/components/LoginForm.vue

@@ -86,7 +86,7 @@
         mode="pop"
         @success="handleLogin"
       />
-      <el-col :span="24" class="px-10px">
+      <!-- <el-col :span="24" class="px-10px">
         <el-form-item>
           <el-row :gutter="5" justify="space-between" style="width: 100%">
             <el-col :span="8">
@@ -143,7 +143,7 @@
             </el-link>
           </div>
         </el-form-item>
-      </el-col>
+      </el-col> -->
     </el-row>
   </el-form>
 </template>

src/views/cus/management/ManagementForm.vue

@@ -0,0 +1,405 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-divider content-position="left">基本信息</el-divider>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="客户名称" prop="customerName">
+            <el-input v-model="formData.customerName" placeholder="请输入客户名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="客户编码" prop="customerCode">
+            <el-input v-model="formData.customerCode" placeholder="请输入客户编码" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="售后负责人" prop="afterSalesManager">
+            <el-input v-model="formData.afterSalesManager" placeholder="请输入售后负责人" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="formData.status">
+              <el-radio
+                v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                :key="dict.value"
+                :value="dict.value"
+              >
+                {{ dict.label }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" placeholder="请输入备注" type="textarea" />
+      </el-form-item>
+
+      <el-divider content-position="left">区域信息</el-divider>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="国家" prop="countryCode">
+            <country-select
+              v-model="formData.countryCode"
+              :country="formData.countryCode"
+              top-country="CN"
+              placeholder="请选择国家"
+              class-name="w-full el-country-select"
+              :search-able="true"
+              :disable-placeholder="true"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            :label="isChina ? '省市' : '省/州'"
+            :prop="isChina ? 'areaIds' : 'provinceName'"
+          >
+            <el-cascader
+              v-if="isChina"
+              v-model="formData.areaIds"
+              class="w-full"
+              :options="areaTree"
+              :props="areaCascaderProps"
+              clearable
+              filterable
+              placeholder="请选择省/市"
+              @change="handleAreaChange"
+            />
+            <region-select
+              v-else
+              v-model="formData.provinceName"
+              :region="formData.provinceName"
+              :country="formData.countryCode"
+              placeholder="请选择省/州"
+              class-name="w-full el-country-select"
+              :search-able="true"
+              :disable-placeholder="true"
+              :region-name="true"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row v-if="!isChina" :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="城市" prop="cityName">
+            <el-input v-model="formData.cityName" placeholder="请输入城市" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="详细地址" prop="address">
+            <el-input v-model="formData.address" placeholder="请输入详细地址" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="经度" prop="longitude">
+            <el-input v-model="formData.longitude" placeholder="请输入经度" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="纬度" prop="latitude">
+            <el-input v-model="formData.latitude" 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 { ManagementApi, Management } from '@/api/cus/management'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+import { getAreaTree } from '@/api/system/area'
+
+/** 客户管理 表单 */
+defineOptions({ name: 'ManagementForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+type FormModel = Partial<Management> & {
+  areaIds?: number[]
+}
+
+const formData = ref<FormModel>({
+  id: undefined,
+  customerCode: undefined,
+  customerName: undefined,
+  status: CommonStatusEnum.ENABLE,
+  remark: undefined,
+  afterSalesManager: undefined,
+  countryCode: 'CN',
+  countryName: '中国',
+  areaIds: undefined,
+  provinceCode: undefined,
+  provinceName: undefined,
+  cityCode: undefined,
+  cityName: undefined,
+  address: undefined,
+  longitude: undefined,
+  latitude: undefined,
+  dbIp: undefined,
+  dbPort: undefined,
+  dbUsername: undefined,
+  dbPassword: undefined
+})
+const formRules = reactive({
+  customerName: [{ required: true, message: '客户名称不能为空', trigger: 'blur' }],
+  customerCode: [{ required: true, message: '客户编码不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+const isChina = computed(() => formData.value.countryCode === 'CN')
+
+const countryMetaLoaded = ref(false)
+const countryCodeToName = ref(new Map<string, string>([['CN', '中国']]))
+const countryNameToCode = ref(new Map<string, string>([['中国', 'CN']]))
+const syncingForm = ref(false)
+
+type AreaVO = {
+  id: number
+  name: string
+  code: string
+  parentId?: number
+  children?: AreaVO[]
+}
+
+const areaTree = ref<AreaVO[]>([])
+const areaCascaderProps = {
+  label: 'name',
+  value: 'id',
+  children: 'children',
+  emitPath: true,
+  checkStrictly: true
+}
+const areaIdToNode = ref(new Map<number, AreaVO>())
+const areaIdToParentId = ref(new Map<number, number | undefined>())
+const areaCodeToId = ref(new Map<string, number>())
+
+const rebuildAreaIndex = (tree: AreaVO[]) => {
+  const idToNode = new Map<number, AreaVO>()
+  const idToParent = new Map<number, number | undefined>()
+  const codeToId = new Map<string, number>()
+  const walk = (nodes: AreaVO[], parentId?: number) => {
+    nodes.forEach((n) => {
+      idToNode.set(n.id, n)
+      idToParent.set(n.id, parentId)
+      if (n.code) {
+        codeToId.set(n.code, n.id)
+      }
+      if (n.children?.length) walk(n.children, n.id)
+    })
+  }
+  walk(tree)
+  areaIdToNode.value = idToNode
+  areaIdToParentId.value = idToParent
+  areaCodeToId.value = codeToId
+}
+
+const buildPathById = (id: number) => {
+  const path: number[] = []
+  let current: number | undefined = id
+  while (current !== undefined) {
+    path.push(current)
+    current = areaIdToParentId.value.get(current)
+  }
+  return path.reverse()
+}
+
+const syncAreaIdsFromCodes = () => {
+  const cityId = formData.value.cityCode
+    ? areaCodeToId.value.get(formData.value.cityCode)
+    : undefined
+  const provinceId = formData.value.provinceCode
+    ? areaCodeToId.value.get(formData.value.provinceCode)
+    : undefined
+  const targetId = cityId ?? provinceId
+  if (!targetId) return
+  formData.value.areaIds = buildPathById(targetId)
+}
+
+const handleAreaChange = (value?: number[]) => {
+  if (!value?.length) {
+    formData.value.provinceCode = undefined
+    formData.value.provinceName = undefined
+    formData.value.cityCode = undefined
+    formData.value.cityName = undefined
+    return
+  }
+  const ids = value
+  const provinceNode = ids[0] ? areaIdToNode.value.get(ids[0]) : undefined
+  const cityNode = ids[1] ? areaIdToNode.value.get(ids[1]) : undefined
+
+  formData.value.provinceCode = provinceNode?.code
+  formData.value.provinceName = provinceNode?.name
+  formData.value.cityCode = cityNode?.code
+  formData.value.cityName = cityNode?.name
+}
+
+const handleCountryChange = async (countryCode?: string) => {
+  const code = countryCode || undefined
+  formData.value.countryName = code ? countryCodeToName.value.get(code) || code : undefined
+  formData.value.areaIds = undefined
+  handleAreaChange(undefined)
+  if (code) await ensureAreaTreeLoaded(code)
+}
+
+watch(
+  () => formData.value.countryCode,
+  (code) => {
+    if (!dialogVisible.value) return
+    if (syncingForm.value) return
+    void handleCountryChange(code)
+  }
+)
+
+const loadedCountryCode = ref<string | undefined>(undefined)
+const ensureAreaTreeLoaded = async (countryCode?: string) => {
+  if (countryCode && countryCode !== 'CN') {
+    areaTree.value = []
+    rebuildAreaIndex([])
+    loadedCountryCode.value = countryCode
+    return
+  }
+  if (loadedCountryCode.value === countryCode && areaTree.value.length) return
+  const tree = (await getAreaTree(countryCode)) || []
+  areaTree.value = tree
+  rebuildAreaIndex(tree)
+  loadedCountryCode.value = countryCode
+}
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  syncingForm.value = true
+  resetForm()
+  if (!formData.value.countryCode && formData.value.countryName) {
+    formData.value.countryCode = countryNameToCode.value.get(formData.value.countryName)
+  }
+  await ensureAreaTreeLoaded(formData.value.countryCode)
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ManagementApi.getManagement(id)
+      if (!formData.value.countryCode && formData.value.countryName) {
+        formData.value.countryCode = countryNameToCode.value.get(formData.value.countryName)
+      }
+      formData.value.countryName = formData.value.countryCode
+        ? countryCodeToName.value.get(formData.value.countryCode) || formData.value.countryName
+        : formData.value.countryName
+      await ensureAreaTreeLoaded(formData.value.countryCode)
+      syncAreaIdsFromCodes()
+      handleAreaChange(formData.value.areaIds as any)
+    } finally {
+      formLoading.value = false
+    }
+  }
+  syncingForm.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 Management
+    if (formType.value === 'create') {
+      await ManagementApi.createManagement(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ManagementApi.updateManagement(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    customerCode: undefined,
+    customerName: undefined,
+    status: CommonStatusEnum.ENABLE,
+    remark: undefined,
+    afterSalesManager: undefined,
+    countryCode: 'CN',
+    countryName: '中国',
+    areaIds: undefined,
+    provinceCode: undefined,
+    provinceName: undefined,
+    cityCode: undefined,
+    cityName: undefined,
+    address: undefined,
+    longitude: undefined,
+    latitude: undefined,
+    dbIp: undefined,
+    dbPort: undefined,
+    dbUsername: undefined,
+    dbPassword: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
+
+<style scoped lang="scss">
+:deep(select.el-country-select) {
+  width: 100%;
+  height: var(--el-component-size, 32px);
+  padding: 0 30px 0 11px;
+  border: 1px solid var(--el-border-color);
+  border-radius: var(--el-border-radius-base);
+  background-color: var(--el-input-bg-color, var(--el-bg-color));
+  color: var(--el-text-color-regular);
+  font-size: var(--el-font-size-base);
+  outline: none;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    background-color 0.2s ease;
+}
+
+:deep(select.el-country-select:focus) {
+  border-color: var(--el-color-primary);
+  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
+}
+
+:deep(select.el-country-select:disabled) {
+  background-color: var(--el-disabled-bg-color);
+  color: var(--el-disabled-text-color);
+  cursor: not-allowed;
+}
+</style>

src/views/cus/management/index.vue

@@ -0,0 +1,389 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="搜索" prop="keyword">
+        <el-input
+          v-model="queryParams.keyword"
+          placeholder="搜索客户编码/名称..."
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" clearable placeholder="请选择状态" class="!w-240px">
+          <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-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')"
+          v-hasPermi="['cus:management:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['cus:management:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+        <el-button
+          type="danger"
+          plain
+          :disabled="isEmpty(checkedIds)"
+          @click="handleDeleteBatch"
+          v-hasPermi="['cus:management:delete']"
+        >
+          <Icon icon="ep:delete" class="mr-5px" /> 批量删除
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+      row-key="id"
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      @selection-change="handleRowCheckboxChange"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column label="客户编码" align="center" prop="customerCode" min-width="160px" />
+      <el-table-column label="客户名称" align="center" prop="customerName" min-width="160px" />
+      <el-table-column label="区域" align="center" min-width="160px">
+        <template #default="scope">
+          {{
+            [scope.row.provinceName, scope.row.cityName].filter((v) => !!v).join(' ') ||
+            scope.row.countryName ||
+            '-'
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="售后负责人"
+        align="center"
+        prop="afterSalesManager"
+        min-width="140px"
+      />
+      <el-table-column label="状态" align="center" prop="status" min-width="100px">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openConfig(scope.row)"
+            v-hasPermi="['cus:management:update']"
+          >
+            配置
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            @click="handleSyncData(scope.row)"
+            v-hasPermi="['cus:management:update']"
+          >
+            同步数据
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['cus:management:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['cus:management:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ManagementForm ref="formRef" @success="getList" />
+
+  <Dialog v-model="configDialogVisible" title="数据库配置" width="40%">
+    <el-form
+      ref="configFormRef"
+      v-loading="configLoading"
+      :model="configFormData"
+      :rules="configRules"
+      label-width="100px"
+    >
+      <el-form-item label="数据库IP" prop="dbIp">
+        <el-input v-model="configFormData.dbIp" placeholder="请输入数据库IP" />
+      </el-form-item>
+      <el-form-item label="数据库端口" prop="dbPort">
+        <el-input-number
+          v-model="configFormData.dbPort"
+          :min="1"
+          :max="65535"
+          controls-position="right"
+          class="w-full"
+          placeholder="请输入数据库端口"
+        />
+      </el-form-item>
+      <el-form-item label="数据库账号" prop="dbUsername">
+        <el-input v-model="configFormData.dbUsername" placeholder="请输入数据库账号" />
+      </el-form-item>
+      <el-form-item label="数据库密码" prop="dbPassword">
+        <el-input
+          v-model="configFormData.dbPassword"
+          placeholder="请输入数据库密码"
+          show-password
+          type="password"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="handleTestConnection" :disabled="configLoading">测试连接</el-button>
+      <el-button type="primary" @click="submitConfig" :disabled="configLoading">确 定</el-button>
+      <el-button @click="configDialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { ManagementApi, Management } from '@/api/cus/management'
+import ManagementForm from './ManagementForm.vue'
+
+/** 客户管理 列表 */
+defineOptions({ name: 'Management' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<Management[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  keyword: undefined,
+  status: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const keyword = queryParams.keyword?.trim()
+    const baseParams = {
+      pageNo: queryParams.pageNo,
+      pageSize: queryParams.pageSize,
+      status: queryParams.status
+    }
+    let data = await ManagementApi.getManagementPage({
+      ...baseParams,
+      customerCode: keyword || undefined
+    })
+    if (keyword && (!data?.list?.length || data.total === 0)) {
+      data = await ManagementApi.getManagementPage({
+        ...baseParams,
+        customerName: keyword
+      })
+    }
+    list.value = data?.list || []
+    total.value = data?.total || 0
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  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 ManagementApi.deleteManagement(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除客户管理 */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await ManagementApi.deleteManagementList(checkedIds.value)
+    checkedIds.value = []
+    message.success(t('common.delSuccess'))
+    await getList()
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: Management[]) => {
+  checkedIds.value = records.map((item) => item.id!)
+}
+
+const configDialogVisible = ref(false)
+const configLoading = ref(false)
+const configFormRef = ref()
+const configOriginRow = ref<Management | undefined>(undefined)
+const configFormData = reactive({
+  dbIp: undefined,
+  dbPort: undefined,
+  dbUsername: undefined,
+  dbPassword: undefined
+})
+const configRules = reactive({
+  dbIp: [{ required: true, message: '数据库IP不能为空', trigger: 'blur' }],
+  dbPort: [{ required: true, message: '数据库端口不能为空', trigger: 'blur' }],
+  dbUsername: [{ required: true, message: '数据库账号不能为空', trigger: 'blur' }]
+})
+
+const openConfig = (row: Management) => {
+  configOriginRow.value = row
+  configFormData.dbIp = row.dbIp
+  configFormData.dbPort = row.dbPort
+  configFormData.dbUsername = row.dbUsername
+  configFormData.dbPassword = row.dbPassword
+  configDialogVisible.value = true
+  nextTick(() => configFormRef.value?.clearValidate())
+}
+
+const handleTestConnection = async () => {
+  try {
+    await configFormRef.value.validate()
+    configLoading.value = true
+    await ManagementApi.testDbConnection({
+      id: configOriginRow.value?.id,
+      ...configFormData
+    })
+    message.success('连接成功')
+  } catch (e: any) {
+    const tip = e?.msg || e?.message
+    if (tip) {
+      message.error(tip)
+    }
+  } finally {
+    configLoading.value = false
+  }
+}
+
+const submitConfig = async () => {
+  await configFormRef.value.validate()
+  if (!configOriginRow.value?.id) return
+  configLoading.value = true
+  try {
+    await ManagementApi.updateManagement({
+      ...(configOriginRow.value as any),
+      ...configFormData,
+      id: configOriginRow.value.id
+    })
+    message.success(t('common.updateSuccess'))
+    configDialogVisible.value = false
+    await getList()
+  } finally {
+    configLoading.value = false
+  }
+}
+
+const handleSyncData = async (row: Management) => {
+  try {
+    await message.confirm('确认同步该客户的数据？')
+    await ManagementApi.syncData(row.id)
+    message.success('同步成功')
+  } catch (e: any) {
+    const tip = e?.msg || e?.message
+    if (tip) {
+      message.error(tip)
+    }
+  }
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ManagementApi.exportManagement(queryParams as any)
+    download.excel(data, '客户管理.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

vite.config.ts

@@ -29,14 +29,14 @@ export default ({command, mode}: ConfigEnv): UserConfig => {
             host: "0.0.0.0",
             open: env.VITE_OPEN === 'true',
             // 本地跨域代理. 目前注释的原因：暂时没有用途，server 端已经支持跨域
-            // proxy: {
+            proxy: {
-            //   ['/admin-api']: {
+              ['/admin-api']: {
-            //     target: env.VITE_BASE_URL,
+                target: env.VITE_BASE_URL,
-            //     ws: false,
+                ws: false,
-            //     changeOrigin: true,
+                changeOrigin: true,
-            //     rewrite: (path) => path.replace(new RegExp(`^/admin-api`), ''),
+                rewrite: (path) => path.replace(new RegExp(`^/admin-api`), ''),
-            //   },
+              },
-            // },
+            },
         },
         // 项目使用的vite插件。 单独提取到build/vite/plugin中管理
         plugins: createVitePlugins(),