adspecs 0.1.12

package/references/front-demo/src/views/mdmCustomer/__tests__/CustomerList.spec.ts

@@ -0,0 +1,90 @@
+/**
+ * M03-01 客户主数据 - CustomerList 组件渲染测试骨架
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { setActivePinia, createPinia } from 'pinia'
+
+vi.mock('@/api/mdmCustomer/index', () => ({
+  findCrmCustomerPage: vi.fn().mockResolvedValue({
+    code: 800,
+    data: { rows: [], total: 0 },
+  }),
+  saveCrmCustomer: vi.fn(),
+  updateCrmCustomer: vi.fn(),
+  getCrmCustomerById: vi.fn(),
+  findAddressListByCustomerId: vi.fn(),
+  saveCrmCustomerAddress: vi.fn(),
+  deleteCrmCustomerAddress: vi.fn(),
+}))
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+}))
+
+import CustomerList from '@/views/mdmCustomer/index.vue'
+
+const globalStubs = {
+  'el-card': { template: '<div><slot /></div>' },
+  'el-breadcrumb': { template: '<div><slot /></div>' },
+  'el-breadcrumb-item': { template: '<span><slot /></span>' },
+  'el-alert': { template: '<div><slot name="title" /><slot /></div>' },
+  'el-form': { template: '<form><slot /></form>' },
+  'el-form-item': { template: '<div><slot /></div>' },
+  'el-input': { template: '<input />' },
+  'el-select': { template: '<select><slot /></select>' },
+  'el-option': { template: '<option />' },
+  'gs-table': { template: '<div><slot name="header" /><slot name="cell" /></div>' },
+  'el-button': { template: '<button><slot /></button>' },
+  'el-tag': { template: '<span><slot /></span>' },
+  'el-link': { template: '<a><slot /></a>' },
+  'el-divider': { template: '<span />' },
+  'CustomerFormDialog': { template: '<div />' },
+  'CustomerDetailDrawer': { template: '<div />' },
+  'AddressFormDialog': { template: '<div />' },
+  'ConfirmDialog': { template: '<div />' },
+}
+
+const globalMocks = {
+  $t: (key: string) => key,
+}
+
+describe('CustomerList 组件', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.clearAllMocks()
+  })
+
+  it('页面挂载成功', () => {
+    const wrapper = mount(CustomerList, {
+      global: { stubs: globalStubs, mocks: globalMocks },
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('面包屑渲染', () => {
+    const wrapper = mount(CustomerList, {
+      global: { stubs: globalStubs, mocks: globalMocks },
+    })
+    const text = wrapper.text()
+    expect(text).toContain('M03 客户')
+    expect(text).toContain('M03-01')
+  })
+
+  it('状态流转提示条', () => {
+    const wrapper = mount(CustomerList, {
+      global: { stubs: globalStubs, mocks: globalMocks },
+    })
+    const text = wrapper.text()
+    expect(text).toContain('statusFlow')
+    expect(text).toContain('statusFlowDesc')
+  })
+
+  it('新增客户按钮存在', () => {
+    const wrapper = mount(CustomerList, {
+      global: { stubs: globalStubs, mocks: globalMocks },
+    })
+    expect(wrapper.text()).toContain('mdmCustomer.addCustomer')
+  })
+})

package/references/front-demo/src/views/mdmCustomer/components/AddressFormDialog.vue

@@ -0,0 +1,95 @@
+<template>
+  <el-dialog
+    :model-value="visible"
+    :title="$t('mdmCustomer.editAddress')"
+    width="500px"
+    append-to-body
+    destroy-on-close
+    @update:model-value="$emit('update:visible', $event)"
+  >
+    <el-form ref="addressFormRef" :model="form" :rules="rules" label-width="100px">
+      <el-form-item :label="$t('mdmCustomer.addressDetail')" prop="addressDetail">
+        <el-input
+          v-model="form.addressDetail"
+          :placeholder="$t('mdmCustomer.addressDetailPlaceholder')"
+          maxlength="500"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('mdmCustomer.isDefault')">
+        <el-switch v-model="form.isDefault" :active-value="1" :inactive-value="0" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="$emit('update:visible', false)">{{ $t('mdmCustomer.cancel') }}</el-button>
+      <el-button type="primary" :loading="submitting" @click="handleSave">
+        {{ $t('mdmCustomer.confirm') }}
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { useI18n } from 'vue-i18n'
+import { useCustomerStore } from '@/store/modules/mdmCustomer/customerStore'
+
+const { t } = useI18n()
+const store = useCustomerStore()
+
+const props = defineProps<{
+  visible: boolean
+  customerId: number
+}>()
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  saved: []
+}>()
+
+const addressFormRef = ref<FormInstance>()
+const submitting = ref(false)
+
+const form = reactive({
+  addressId: null as number | null,
+  addressDetail: '',
+  isDefault: 0,
+})
+
+const rules = {
+  addressDetail: [{ required: true, message: t('mdmCustomer.addressDetailRequired'), trigger: 'blur' }],
+}
+
+// 打开时回填（编辑模式）
+watch(
+  () => store.addressFormVisible,
+  (v) => {
+    if (v) {
+      form.addressId = store.addressFormData.addressId || null
+      form.addressDetail = store.addressFormData.addressDetail
+      form.isDefault = store.addressFormData.isDefault
+    }
+  }
+)
+
+async function handleSave() {
+  try {
+    await addressFormRef.value?.validate()
+  } catch {
+    return
+  }
+  submitting.value = true
+  try {
+    store.addressFormData.addressDetail = form.addressDetail
+    store.addressFormData.isDefault = form.isDefault
+    const ok = await store.saveAddress()
+    if (ok) {
+      // ElMessage handled by store caller
+      emit('update:visible', false)
+      emit('saved')
+    }
+  } finally {
+    submitting.value = false
+  }
+}
+</script>

package/references/front-demo/src/views/mdmCustomer/components/ConfirmDialog.vue

@@ -0,0 +1,37 @@
+<template>
+  <el-dialog
+    :model-value="visible"
+    :title="title"
+    width="420px"
+    :close-on-click-modal="false"
+    destroy-on-close
+    @update:model-value="$emit('update:visible', $event)"
+  >
+    <p>{{ message }}</p>
+    <p v-if="subMessage" style="color: #909399; font-size: 13px; margin-top: 4px">
+      {{ subMessage }}
+    </p>
+    <template #footer>
+      <el-button @click="$emit('update:visible', false)">{{ $t('mdmCustomer.cancel') }}</el-button>
+      <el-button :type="confirmButtonType" @click="$emit('confirm')">
+        {{ confirmText || $t('mdmCustomer.confirm') }}
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  visible: boolean
+  title: string
+  message: string
+  subMessage?: string
+  confirmText?: string
+  confirmButtonType?: 'primary' | 'danger' | 'warning'
+}>()
+
+defineEmits<{
+  'update:visible': [value: boolean]
+  confirm: []
+}>()
+</script>

package/references/front-demo/src/views/mdmCustomer/components/CustomerDetailDrawer.vue

@@ -0,0 +1,118 @@
+<template>
+  <el-drawer
+    :model-value="visible"
+    :title="$t('mdmCustomer.customerDetail')"
+    direction="rtl"
+    size="580"
+    destroy-on-close
+    @update:model-value="$emit('update:visible', $event)"
+  >
+    <template v-if="loading">
+      <el-skeleton :rows="8" animated />
+    </template>
+    <template v-else-if="detail">
+      <el-tabs v-model="activeTab">
+        <!-- 基本信息 Tab -->
+        <el-tab-pane :label="$t('mdmCustomer.customerDetail')" name="basic">
+          <el-descriptions :column="2" border size="default">
+            <el-descriptions-item :label="$t('mdmCustomer.customerCode')">{{ detail.customerCode || '-' }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('mdmCustomer.customerName')">{{ detail.customerName || '-' }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('mdmCustomer.shortName')">{{ detail.shortName || '-' }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('mdmCustomer.tradeType')">
+              <el-tag :type="detail.tradeType === 'DOMESTIC' ? 'primary' : 'warning'">
+                {{ detail.tradeType === 'DOMESTIC' ? $t('mdmCustomer.DOMESTIC') : detail.tradeType === 'EXPORT' ? $t('mdmCustomer.EXPORT') : '-' }}
+              </el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('mdmCustomer.creditCode')">{{ detail.creditCode || '-' }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('mdmCustomer.customerStatus')">
+              <el-tag :type="detail.customerStatus === '正常' ? 'success' : 'danger'">
+                {{ detail.customerStatus || '-' }}
+              </el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('mdmCustomer.parentCustomerCode')">
+              <template v-if="detail.parentCustomerName">
+                <el-link type="primary" :underline="false" @click="$emit('groupClick', detail.parentId)">
+                  {{ detail.parentCustomerCode }} — {{ detail.parentCustomerName }}
+                </el-link>
+              </template>
+              <template v-else>-</template>
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('mdmCustomer.parentCustomerName')">{{ detail.parentCustomerName || '-' }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('mdmCustomer.creationDate')">{{ detail.creationDate || '-' }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('mdmCustomer.versionNum')">{{ detail.versionNum ?? '-' }}</el-descriptions-item>
+          </el-descriptions>
+        </el-tab-pane>
+
+        <!-- 收货地址 Tab -->
+        <el-tab-pane :label="addressTabLabel" name="address">
+          <template v-if="addressList.length > 0">
+            <el-button type="primary" size="small" style="margin-bottom: 12px" @click="$emit('addAddress', detail.customerId)">
+              + {{ $t('mdmCustomer.addAddress') }}
+            </el-button>
+            <el-table :data="addressList" border size="small">
+              <el-table-column type="index" width="50" align="center" />
+              <el-table-column :label="$t('mdmCustomer.addressDetail')" prop="addressDetail" min-width="200">
+                <template #default="{ row: addr }">
+                  {{ addr.addressDetail }}
+                  <el-tag v-if="addr.isDefault === 1" type="success" size="small" style="margin-left: 6px">
+                    {{ $t('mdmCustomer.isDefault') }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('mdmCustomer.isDefault')" prop="isDefault" width="80" align="center">
+                <template #default="{ row: addr }">
+                  <span v-if="addr.isDefault === 1" style="color: #67c23a">✓ {{ $t('mdmCustomer.yes') }}</span>
+                  <span v-else style="color: #c0c4cc">—</span>
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('mdmCustomer.action')" width="160" align="center">
+                <template #default="{ row: addr }">
+                  <template v-if="addr.isDefault !== 1">
+                    <el-link type="primary" :underline="false" @click="$emit('setDefault', addr)">{{ $t('mdmCustomer.setDefault') }}</el-link>
+                    <el-divider direction="vertical" />
+                    <el-link type="danger" :underline="false" @click="$emit('deleteAddress', addr)">{{ $t('mdmCustomer.deleteAddress') }}</el-link>
+                  </template>
+                  <span v-else style="color: #c0c4cc">—</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </template>
+          <el-empty v-else :description="$t('mdmCustomer.noAddress')" />
+        </el-tab-pane>
+      </el-tabs>
+    </template>
+    <template v-else>
+      <el-empty :description="$t('mdmCustomer.noAddress')" />
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { Customer, CustomerAddress } from '@/types/mdmCustomer/customer'
+
+const { t } = useI18n()
+
+defineProps<{
+  visible: boolean
+  detail: Customer | null
+  loading: boolean
+  addressList: CustomerAddress[]
+}>()
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  groupClick: [customerId: any]
+  addAddress: [customerId?: number]
+  setDefault: [addr: any]
+  deleteAddress: [addr: any]
+}>()
+
+const activeTab = ref('basic')
+
+const addressTabLabel = computed(() => {
+  // 这里需要在父组件计算，props 中接收
+  return t('mdmCustomer.addressManagement')
+})
+</script>

package/references/front-demo/src/views/mdmCustomer/components/CustomerFormDialog.vue

@@ -0,0 +1,254 @@
+<template>
+  <el-dialog
+    :model-value="visible"
+    :title="isEdit ? $t('mdmCustomer.editCustomer') : $t('mdmCustomer.addCustomer')"
+    width="800px"
+    destroy-on-close
+    @update:model-value="$emit('update:visible', $event)"
+  >
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" size="default">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('mdmCustomer.customerCode')" prop="customerCode">
+            <el-input v-model="form.customerCode" disabled :placeholder="$t('mdmCustomer.autoGenerate')" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('mdmCustomer.customerName')" prop="customerName">
+            <el-input v-model="form.customerName" :placeholder="$t('mdmCustomer.customerNamePlaceholder')" maxlength="200" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('mdmCustomer.shortName')">
+            <el-input v-model="form.shortName" :placeholder="$t('mdmCustomer.shortNamePlaceholder')" maxlength="100" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('mdmCustomer.tradeType')" prop="tradeType">
+            <el-select v-model="form.tradeType" :placeholder="$t('mdmCustomer.tradeTypePlaceholder')" style="width:100%">
+              <el-option :label="$t('mdmCustomer.DOMESTIC')" value="DOMESTIC" />
+              <el-option :label="$t('mdmCustomer.EXPORT')" value="EXPORT" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('mdmCustomer.creditCode')">
+            <el-input v-model="form.creditCode" :placeholder="$t('mdmCustomer.creditCodePlaceholder')" maxlength="18" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('mdmCustomer.customerStatus')" v-if="isEdit && isAdmin">
+            <el-select v-model="form.customerStatus" :placeholder="$t('mdmCustomer.customerStatusPlaceholder')" style="width:100%">
+              <el-option :label="$t('mdmCustomer.NORMAL')" value="正常" />
+              <el-option :label="$t('mdmCustomer.DISABLED')" value="停用" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('mdmCustomer.parentCustomer')">
+            <el-select
+              v-model="form.parentId"
+              :placeholder="$t('mdmCustomer.parentCustomerPlaceholder')"
+              style="width:100%"
+              filterable
+              clearable
+            >
+              <el-option
+                v-for="item in parentCustomerOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('mdmCustomer.responsibleUserId')">
+            <el-input v-model="form.responsibleUserId" :placeholder="$t('mdmCustomer.responsibleUserIdPlaceholder')" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 地址管理（仅编辑时显示） -->
+      <template v-if="isEdit && form.customerId">
+        <el-divider content-position="left">{{ $t('mdmCustomer.addressManagement') }}</el-divider>
+        <el-table :data="addressList" border size="small" style="width:100%">
+          <el-table-column :label="$t('mdmCustomer.addressDetail')" prop="addressDetail" min-width="250" />
+          <el-table-column :label="$t('mdmCustomer.isDefault')" prop="isDefault" width="100" align="center">
+            <template #default="{ row: addr }">
+              <el-tag :type="addr.isDefault === 1 ? 'success' : 'info'" size="small">
+                {{ addr.isDefault === 1 ? $t('mdmCustomer.yes') : $t('mdmCustomer.no') }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('mdmCustomer.action')" width="140" align="center">
+            <template #default="{ row: addr, $index }">
+              <el-link type="primary" :underline="false" @click="editAddr(addr, $index)">{{ $t('mdmCustomer.edit') }}</el-link>
+              <el-divider direction="vertical" />
+              <el-link type="danger" :underline="false" @click="removeAddr($index)">{{ $t('mdmCustomer.deleteAddress') }}</el-link>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-button type="primary" link size="small" style="margin-top: 8px" @click="addAddr">
+          + {{ $t('mdmCustomer.addAddress') }}
+        </el-button>
+      </template>
+    </el-form>
+    <template #footer>
+      <el-button @click="$emit('update:visible', false)">{{ $t('mdmCustomer.cancel') }}</el-button>
+      <el-button type="primary" :loading="submitting" @click="handleSubmit">
+        {{ $t('mdmCustomer.confirm') }}
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
+import { useI18n } from 'vue-i18n'
+import { useCustomerStore } from '@/store/modules/mdmCustomer/customerStore'
+import type { CustomerAddress } from '@/types/mdmCustomer/customer'
+
+const { t } = useI18n()
+const store = useCustomerStore()
+
+const props = defineProps<{
+  visible: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  saved: []
+}>()
+
+const formRef = ref<FormInstance>()
+const submitting = ref(false)
+
+const form = reactive({
+  customerId: null as number | null,
+  customerCode: '',
+  customerName: '',
+  shortName: '',
+  tradeType: '',
+  creditCode: '',
+  parentId: null as number | null,
+  responsibleUserId: null as number | null,
+  customerStatus: '正常',
+})
+
+const rules = {
+  customerName: [{ required: true, message: t('mdmCustomer.customerNameRequired'), trigger: 'blur' }],
+  tradeType: [{ required: true, message: t('mdmCustomer.tradeTypeRequired'), trigger: 'change' }],
+}
+
+const isEdit = computed(() => store.formMode === 'edit')
+const isAdmin = computed(() => store.currentRole === 'admin')
+const addressList = computed(() => store.addressList)
+
+// 集团客户下拉选项
+const parentCustomerOptions = ref<{ label: string; value: number }[]>([])
+
+// 监听弹窗打开，同步 store 数据到本地 form
+watch(
+  () => store.formVisible,
+  async (v) => {
+    if (v) {
+      const d = store.formData
+      form.customerId = d.customerId || null
+      form.customerCode = d.customerCode || ''
+      form.customerName = d.customerName || ''
+      form.shortName = d.shortName || ''
+      form.tradeType = d.tradeType || ''
+      form.creditCode = d.creditCode || ''
+      form.parentId = d.parentId || null
+      form.responsibleUserId = d.responsibleUserId || null
+      form.customerStatus = d.customerStatus || '正常'
+      // 加载集团客户选项
+      await loadParentCustomerOptions()
+    }
+  }
+)
+
+async function loadParentCustomerOptions() {
+  try {
+    const { findCrmCustomerPage } = await import('@/api/mdmCustomer/index')
+    const res = await findCrmCustomerPage({ pageIndex: 1, pageRows: 999, params: { customerStatus: '正常' } })
+    if (res.code === 800) {
+      const rows = res.data?.rows || res.data?.data || []
+      parentCustomerOptions.value = rows
+        .filter((item: Record<string, unknown>) => item.customerId !== form.customerId)
+        .map((item: Record<string, unknown>) => ({
+          label: `${item.customerCode} — ${item.customerName}`,
+          value: item.customerId as number,
+        }))
+    }
+  } catch {
+    parentCustomerOptions.value = []
+  }
+}
+
+async function handleSubmit() {
+  try {
+    await formRef.value?.validate()
+  } catch {
+    return
+  }
+  submitting.value = true
+  try {
+    // 同步表单数据回 store
+    store.formData.customerName = form.customerName
+    store.formData.shortName = form.shortName
+    store.formData.tradeType = form.tradeType
+    store.formData.creditCode = form.creditCode
+    store.formData.parentId = form.parentId
+    store.formData.responsibleUserId = form.responsibleUserId
+    store.formData.customerStatus = form.customerStatus
+
+    const ok = await store.saveOrUpdateCustomer()
+    if (ok) {
+      ElMessage.success(t('mdmCustomer.saveSuccess'))
+      emit('update:visible', false)
+      emit('saved')
+    } else {
+      ElMessage.error(t('mdmCustomer.saveFailed'))
+    }
+  } catch (err: unknown) {
+    ElMessage.error(t('mdmCustomer.saveFailed') + ': ' + ((err as Error)?.message || ''))
+  } finally {
+    submitting.value = false
+  }
+}
+
+// ==================== 地址操作 ====================
+
+function addAddr() {
+  if (form.customerId) store.openAddressForm(form.customerId)
+}
+
+function editAddr(addr: any, index: number) {
+  store.editAddressItem(addr, index)
+}
+
+async function removeAddr(index: number) {
+  const addr: any = store.addressList[index]
+  if (addr.isDefault === 1) {
+    ElMessage.warning(t('mdmCustomer.defaultAddressCannotDelete'))
+    return
+  }
+  try {
+    await ElMessageBox.confirm(t('mdmCustomer.deleteConfirm'), t('mdmCustomer.deleteTip'), { type: 'warning' })
+  } catch {
+    return
+  }
+  if (addr.addressId) {
+    const ok = await store.deleteAddress(addr.addressId, form.customerId!)
+    if (ok) {
+      ElMessage.success(t('mdmCustomer.deleteSuccess'))
+    }
+  } else {
+    store.addressList.splice(index, 1)
+  }
+}
+</script>