feat: improve login and express company management

admin-web/src/pages/express-companies/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from "vue";
-import { Refresh } from "@element-plus/icons-vue";
+import { Plus, Refresh, Search } from "@element-plus/icons-vue";
 import { ElMessage } from "element-plus";
 import {
   adminApi,
@@ -15,6 +15,10 @@ type CatalogSuggestion = AdminExpressCompanyCatalogItem & { value: string };
 const loading = ref(false);
 const submitting = ref(false);
 const dialogVisible = ref(false);
+const catalogAddVisible = ref(false);
+const catalogAddSubmitting = ref(false);
+const catalogAddKeyword = ref("");
+const selectedCatalogItem = ref<CatalogSuggestion | null>(null);
 const companies = ref<AdminExpressCompanyItem[]>([]);
 const defaultCompany = ref("");
 const catalogTotal = ref(0);
@@ -24,6 +28,15 @@ const catalogLoading = ref(false);
 
 const enabledCount = computed(() => companies.value.filter((item) => item.status === "enabled").length);
 const displaySyncedAt = computed(() => (catalogSyncedAt.value && catalogSyncedAt.value !== "0" ? catalogSyncedAt.value : "-"));
+const duplicateCatalogCompany = computed(() => {
+  const companyName = catalogAddForm.company_name.trim();
+  const companyCode = catalogAddForm.company_code.trim();
+  if (!companyName && !companyCode) {
+    return null;
+  }
+
+  return companies.value.find((item) => item.company_name === companyName || item.company_code === companyCode) || null;
+});
 
 const form = reactive<AdminExpressCompanyPayload>({
   company_name: "",
@@ -34,6 +47,15 @@ const form = reactive<AdminExpressCompanyPayload>({
   remark: "",
 });
 
+const catalogAddForm = reactive<AdminExpressCompanyPayload>({
+  company_name: "",
+  company_code: "",
+  status: "enabled",
+  is_default: false,
+  sort_order: 0,
+  remark: "",
+});
+
 async function fetchCompanies() {
   loading.value = true;
   try {
@@ -95,6 +117,23 @@ function openDialog(row?: AdminExpressCompanyItem) {
   dialogVisible.value = true;
 }
 
+async function openCatalogAddDialog() {
+  catalogAddKeyword.value = "";
+  selectedCatalogItem.value = null;
+  catalogAddForm.id = undefined;
+  catalogAddForm.company_name = "";
+  catalogAddForm.company_code = "";
+  catalogAddForm.status = "enabled";
+  catalogAddForm.is_default = companies.value.length === 0;
+  catalogAddForm.sort_order = companies.value.length + 1;
+  catalogAddForm.remark = "从快递100官方码表新增";
+  catalogAddVisible.value = true;
+
+  if (catalogTotal.value <= 0) {
+    await fetchCatalogSummary();
+  }
+}
+
 async function resolveCatalogCode() {
   const keyword = form.company_code.trim() || form.company_name.trim();
   if (!keyword) {
@@ -176,6 +215,49 @@ function handleCatalogSelect(item: CatalogSuggestion) {
   }
 }
 
+function handleCatalogAddSelect(item: CatalogSuggestion) {
+  selectedCatalogItem.value = item;
+  catalogAddKeyword.value = item.display_text;
+  catalogAddForm.company_name = item.company_name;
+  catalogAddForm.company_code = item.company_code;
+}
+
+function clearCatalogAddSelection() {
+  selectedCatalogItem.value = null;
+  catalogAddForm.company_name = "";
+  catalogAddForm.company_code = "";
+}
+
+async function submitCatalogAdd() {
+  if (!catalogAddForm.company_name.trim() || !catalogAddForm.company_code.trim()) {
+    ElMessage.warning("请先从官方码表选择快递公司");
+    return;
+  }
+
+  if (duplicateCatalogCompany.value) {
+    ElMessage.warning(`${duplicateCatalogCompany.value.company_name} 已在运营快递公司列表中`);
+    return;
+  }
+
+  catalogAddSubmitting.value = true;
+  try {
+    await adminApi.saveExpressCompany({
+      ...catalogAddForm,
+      company_name: catalogAddForm.company_name.trim(),
+      company_code: catalogAddForm.company_code.trim(),
+      remark: catalogAddForm.remark.trim(),
+    });
+    ElMessage.success("快递公司已加入运营列表");
+    catalogAddVisible.value = false;
+    await fetchCompanies();
+  } catch (error: any) {
+    console.error(error);
+    ElMessage.error(error?.message || "快递公司保存失败");
+  } finally {
+    catalogAddSubmitting.value = false;
+  }
+}
+
 function statusTagText(row: AdminExpressCompanyItem) {
   return row.is_default ? `${row.status_text} / 默认` : row.status_text;
 }
@@ -189,9 +271,9 @@ onMounted(async () => {
   <div v-loading="loading">
     <div class="metric-grid" style="margin-bottom: 18px">
       <div class="metric-card">
-        <div class="metric-card__label">快递公司总数</div>
+        <div class="metric-card__label">运营快递公司</div>
         <div class="metric-card__value">{{ companies.length }}</div>
-        <div class="metric-card__desc">当前已维护的可选快递公司</div>
+        <div class="metric-card__desc">仓管寄回可选公司</div>
       </div>
       <div class="metric-card">
         <div class="metric-card__label">启用中</div>
@@ -220,9 +302,14 @@ onMounted(async () => {
         <div style="color: var(--admin-text-subtle);">
           维护仓管寄回时可选的快递公司。公司码优先从快递100官方码表检索，停用后不会出现在寄回下拉列表中。
         </div>
-        <el-button :icon="Refresh" :loading="catalogSyncing" type="primary" @click="syncCatalog">
-          同步快递100公司码表
-        </el-button>
+        <div class="filters-row">
+          <el-button :icon="Plus" type="primary" @click="openCatalogAddDialog">
+            从官方码表新增
+          </el-button>
+          <el-button :icon="Refresh" :loading="catalogSyncing" @click="syncCatalog">
+            同步快递100公司码表
+          </el-button>
+        </div>
       </div>
     </el-card>
 
@@ -301,6 +388,95 @@ onMounted(async () => {
         <el-button type="primary" :loading="submitting" @click="submit">保存</el-button>
       </template>
     </el-dialog>
+
+    <el-dialog v-model="catalogAddVisible" title="从官方码表新增快递公司" width="620px">
+      <div class="catalog-add">
+        <el-alert
+          v-if="catalogTotal <= 0"
+          title="官方码表为空，请先同步快递100公司码表后再新增。"
+          type="warning"
+          show-icon
+          :closable="false"
+        />
+
+        <el-form label-position="top">
+          <el-form-item label="搜索官方码表">
+            <el-autocomplete
+              v-model="catalogAddKeyword"
+              :fetch-suggestions="queryCatalog"
+              :loading="catalogLoading"
+              clearable
+              placeholder="输入快递公司名称或快递100编码"
+              style="width: 100%"
+              @clear="clearCatalogAddSelection"
+              @select="handleCatalogAddSelect"
+            >
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+              </template>
+              <template #default="{ item }">
+                <div class="catalog-option">
+                  <div class="catalog-option__name">{{ item.company_name }}</div>
+                  <div class="catalog-option__meta">
+                    {{ item.company_code }}{{ item.company_type ? ` / ${item.company_type}` : "" }}
+                  </div>
+                </div>
+              </template>
+            </el-autocomplete>
+            <div class="form-help">
+              官方码表共有 {{ catalogTotal }} 条，只选中的公司会加入运营快递公司列表。
+            </div>
+          </el-form-item>
+
+          <div v-if="selectedCatalogItem" class="catalog-selection">
+            <div>
+              <div class="catalog-selection__label">已选择</div>
+              <div class="catalog-selection__title">{{ catalogAddForm.company_name }}</div>
+              <div class="catalog-selection__meta">
+                {{ catalogAddForm.company_code }}{{ selectedCatalogItem.company_type ? ` / ${selectedCatalogItem.company_type}` : "" }}
+              </div>
+            </div>
+            <OrderStatusTag v-if="duplicateCatalogCompany" status="已存在" />
+            <OrderStatusTag v-else status="待加入" />
+          </div>
+
+          <el-row :gutter="16">
+            <el-col :span="12">
+              <el-form-item label="状态">
+                <el-select v-model="catalogAddForm.status" style="width: 100%">
+                  <el-option label="启用" value="enabled" />
+                  <el-option label="停用" value="disabled" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="排序值">
+                <el-input v-model.number="catalogAddForm.sort_order" type="number" placeholder="越小越靠前" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-form-item label="默认设置">
+            <el-checkbox v-model="catalogAddForm.is_default">设为默认快递公司</el-checkbox>
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input v-model="catalogAddForm.remark" :rows="3" maxlength="255" placeholder="内部备注，可不填" type="textarea" />
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <template #footer>
+        <el-button @click="catalogAddVisible = false">取消</el-button>
+        <el-button
+          type="primary"
+          :disabled="!selectedCatalogItem || !!duplicateCatalogCompany || catalogTotal <= 0"
+          :loading="catalogAddSubmitting"
+          @click="submitCatalogAdd"
+        >
+          加入运营列表
+        </el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -311,4 +487,51 @@ onMounted(async () => {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.catalog-add {
+  display: grid;
+  gap: 16px;
+}
+
+.catalog-option {
+  display: grid;
+  gap: 4px;
+}
+
+.catalog-option__name {
+  font-weight: 700;
+}
+
+.catalog-option__meta,
+.form-help,
+.catalog-selection__label,
+.catalog-selection__meta {
+  color: var(--admin-text-subtle);
+  font-size: 12px;
+}
+
+.form-help {
+  margin-top: 6px;
+}
+
+.catalog-selection {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px;
+  border: 1px solid var(--admin-border);
+  border-radius: 8px;
+  background: #fbf8f2;
+}
+
+.catalog-selection__title {
+  margin-top: 4px;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.catalog-selection__meta {
+  margin-top: 4px;
+}
 </style>