style：客户管理-体验优化

src/views/cus/management/ManagementForm.vue

@@ -10,13 +10,13 @@
       <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 label="客户编码" prop="customerCode">
+            <el-input v-model="formData.customerCode" 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 label="客户名称" prop="customerName">
+            <el-input v-model="formData.customerName" placeholder="请输入客户名称" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -49,6 +49,7 @@
         <el-col :span="12">
           <el-form-item label="国家" prop="countryCode">
             <country-select
+              v-if="countrySelectReady"
               v-model="formData.countryCode"
               :country="formData.countryCode"
               top-country="CN"
@@ -57,6 +58,13 @@
               :search-able="true"
               :disable-placeholder="true"
             />
+            <el-input
+              v-else
+              class="w-full"
+              :model-value="formData.countryName || formData.countryCode"
+              placeholder="加载中..."
+              disabled
+            />
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -138,6 +146,8 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
+
+const countrySelectReady = ref(false)
 type FormModel = Partial<Management> & {
   areaIds?: number[]
 }
@@ -296,7 +306,13 @@ const open = async (type: string, id?: number) => {
   dialogTitle.value = t('action.' + type)
   formType.value = type
   syncingForm.value = true
+  countrySelectReady.value = false
   resetForm()
+  void nextTick(() => {
+    requestAnimationFrame(() => {
+      countrySelectReady.value = true
+    })
+  })
   if (!formData.value.countryCode && formData.value.countryName) {
     formData.value.countryCode = countryNameToCode.value.get(formData.value.countryName)
   }

src/views/cus/management/index.vue

@@ -8,10 +8,19 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item label="搜索" prop="keyword">
+      <el-form-item label="客户编码" prop="customerCode">
         <el-input
-          v-model="queryParams.keyword"
-          placeholder="搜索客户编码/名称..."
+          v-model="queryParams.customerCode"
+          placeholder="请输入客户编码"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="客户名称" prop="customerName">
+        <el-input
+          v-model="queryParams.customerName"
+          placeholder="请输入客户名称"
           clearable
           @keyup.enter="handleQuery"
           class="!w-240px"
@@ -210,7 +219,8 @@ const total = ref(0) // 列表的总页数
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  keyword: undefined,
+  customerCode: undefined,
+  customerName: undefined,
   status: undefined
 })
 const queryFormRef = ref() // 搜索的表单
@@ -220,22 +230,13 @@ const exportLoading = ref(false) // 导出的加载中
 const getList = async () => {
   loading.value = true
   try {
-    const keyword = queryParams.keyword?.trim()
-    const baseParams = {
+    const data = await ManagementApi.getManagementPage({
       pageNo: queryParams.pageNo,
       pageSize: queryParams.pageSize,
-      status: queryParams.status
-    }
-    let data = await ManagementApi.getManagementPage({
-      ...baseParams,
-      customerCode: keyword || undefined
+      status: queryParams.status,
+      customerCode: queryParams.customerCode?.trim() || undefined,
+      customerName: queryParams.customerName?.trim() || 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 {