前端修改

src/api/supplier/connect/index.ts

@@ -1,47 +1,48 @@
-import request from '@/config/axios'
-
-// 供应商联系记录 VO
-export interface ConnectRecordVO {
-  id: number // 主键
-  supplierId: number // 供应商id
-  userId: number // 我方联系人id
-  username: string // 我方联系人姓名
-  contactId: number // 供应商联系人id
-  contactName: string // 供应商联系人姓名
-  reason: string // 联系原因
-  content: string // 交流内容
-  urls: string // 附件
-}
-
-// 供应商联系记录 API
-export const ConnectRecordApi = {
-  // 查询供应商联系记录分页
-  getConnectRecordPage: async (params: any) => {
-    return await request.get({ url: `/supplier/connect-record/page`, params })
-  },
-
-  // 查询供应商联系记录详情
-  getConnectRecord: async (id: number) => {
-    return await request.get({ url: `/supplier/connect-record/get?id=` + id })
-  },
-
-  // 新增供应商联系记录
-  createConnectRecord: async (data: ConnectRecordVO) => {
-    return await request.post({ url: `/supplier/connect-record/create`, data })
-  },
-
-  // 修改供应商联系记录
-  updateConnectRecord: async (data: ConnectRecordVO) => {
-    return await request.put({ url: `/supplier/connect-record/update`, data })
-  },
-
-  // 删除供应商联系记录
-  deleteConnectRecord: async (id: number) => {
-    return await request.delete({ url: `/supplier/connect-record/delete?id=` + id })
-  },
-
-  // 导出供应商联系记录 Excel
-  exportConnectRecord: async (params) => {
-    return await request.download({ url: `/supplier/connect-record/export-excel`, params })
-  },
-}
+import request from '@/config/axios'
+
+// 供应商联系记录 VO
+export interface ConnectRecordVO {
+  id: number // 主键
+  supplierId: number // 供应商id
+  supplierName: string
+  userId: number // 我方联系人id
+  username: string // 我方联系人姓名
+  contactId: number // 供应商联系人id
+  contactName: string // 供应商联系人姓名
+  reason: string // 联系原因
+  content: string // 交流内容
+  urls: string // 附件
+}
+
+// 供应商联系记录 API
+export const ConnectRecordApi = {
+  // 查询供应商联系记录分页
+  getConnectRecordPage: async (params: any) => {
+    return await request.get({ url: `/supplier/connect-record/page`, params })
+  },
+
+  // 查询供应商联系记录详情
+  getConnectRecord: async (id: number) => {
+    return await request.get({ url: `/supplier/connect-record/get?id=` + id })
+  },
+
+  // 新增供应商联系记录
+  createConnectRecord: async (data: ConnectRecordVO) => {
+    return await request.post({ url: `/supplier/connect-record/create`, data })
+  },
+
+  // 修改供应商联系记录
+  updateConnectRecord: async (data: ConnectRecordVO) => {
+    return await request.put({ url: `/supplier/connect-record/update`, data })
+  },
+
+  // 删除供应商联系记录
+  deleteConnectRecord: async (id: number) => {
+    return await request.delete({ url: `/supplier/connect-record/delete?id=` + id })
+  },
+
+  // 导出供应商联系记录 Excel
+  exportConnectRecord: async (params) => {
+    return await request.download({ url: `/supplier/connect-record/export-excel`, params })
+  },
+}

src/api/supplier/contact/index.ts

@@ -1,47 +1,48 @@
-import request from '@/config/axios'
-
-// 供应商联系人 VO
-export interface ContactVO {
-  id: number // 主键
-  supplierId: number // 供应商id
-  name: string // 姓名
-  position: string // 职务
-  telephone: string // 电话
-  email: string // 邮箱
-  productIds: number // 联系人负责的产品/业务模块  关联产品id 逗号分隔
-  productNames: string // 联系人负责的产品/业务模块  关联产品名称 逗号分隔
-  remark: string // 备注
-}
-
-// 供应商联系人 API
-export const ContactApi = {
-  // 查询供应商联系人分页
-  getContactPage: async (params: any) => {
-    return await request.get({ url: `/supplier/contact/page`, params })
-  },
-
-  // 查询供应商联系人详情
-  getContact: async (id: number) => {
-    return await request.get({ url: `/supplier/contact/get?id=` + id })
-  },
-
-  // 新增供应商联系人
-  createContact: async (data: ContactVO) => {
-    return await request.post({ url: `/supplier/contact/create`, data })
-  },
-
-  // 修改供应商联系人
-  updateContact: async (data: ContactVO) => {
-    return await request.put({ url: `/supplier/contact/update`, data })
-  },
-
-  // 删除供应商联系人
-  deleteContact: async (id: number) => {
-    return await request.delete({ url: `/supplier/contact/delete?id=` + id })
-  },
-
-  // 导出供应商联系人 Excel
-  exportContact: async (params) => {
-    return await request.download({ url: `/supplier/contact/export-excel`, params })
-  },
-}
+import request from '@/config/axios'
+
+// 供应商联系人 VO
+export interface ContactVO {
+  id: number // 主键
+  supplierId: number // 供应商id
+  name: string // 姓名
+  position: string // 职务
+  telephone: string // 电话
+  email: string // 邮箱
+  productIds: number // 联系人负责的产品/业务模块  关联产品id 逗号分隔
+  productNames: string // 联系人负责的产品/业务模块  关联产品名称 逗号分隔
+  remark: string // 备注
+  supplierName: string
+}
+
+// 供应商联系人 API
+export const ContactApi = {
+  // 查询供应商联系人分页
+  getContactPage: async (params: any) => {
+    return await request.get({ url: `/supplier/contact/page`, params })
+  },
+
+  // 查询供应商联系人详情
+  getContact: async (id: number) => {
+    return await request.get({ url: `/supplier/contact/get?id=` + id })
+  },
+
+  // 新增供应商联系人
+  createContact: async (data: ContactVO) => {
+    return await request.post({ url: `/supplier/contact/create`, data })
+  },
+
+  // 修改供应商联系人
+  updateContact: async (data: ContactVO) => {
+    return await request.put({ url: `/supplier/contact/update`, data })
+  },
+
+  // 删除供应商联系人
+  deleteContact: async (id: number) => {
+    return await request.delete({ url: `/supplier/contact/delete?id=` + id })
+  },
+
+  // 导出供应商联系人 Excel
+  exportContact: async (params) => {
+    return await request.download({ url: `/supplier/contact/export-excel`, params })
+  },
+}

src/api/supplier/coreproduct/index.ts

@@ -1,43 +1,44 @@
-import request from '@/config/axios'
-
-// 供应商核心产品 VO
-export interface CoreProductVO {
-  id: number // 主键
-  supplierId: number // 供应商id
-  productId: number // 产品id
-  productName: string // 产品名称
-  advantage: string // 优势介绍
-}
-
-// 供应商核心产品 API
-export const CoreProductApi = {
-  // 查询供应商核心产品分页
-  getCoreProductPage: async (params: any) => {
-    return await request.get({ url: `/supplier/core-product/page`, params })
-  },
-
-  // 查询供应商核心产品详情
-  getCoreProduct: async (id: number) => {
-    return await request.get({ url: `/supplier/core-product/get?id=` + id })
-  },
-
-  // 新增供应商核心产品
-  createCoreProduct: async (data: CoreProductVO) => {
-    return await request.post({ url: `/supplier/core-product/create`, data })
-  },
-
-  // 修改供应商核心产品
-  updateCoreProduct: async (data: CoreProductVO) => {
-    return await request.put({ url: `/supplier/core-product/update`, data })
-  },
-
-  // 删除供应商核心产品
-  deleteCoreProduct: async (id: number) => {
-    return await request.delete({ url: `/supplier/core-product/delete?id=` + id })
-  },
-
-  // 导出供应商核心产品 Excel
-  exportCoreProduct: async (params) => {
-    return await request.download({ url: `/supplier/core-product/export-excel`, params })
-  },
-}
+import request from '@/config/axios'
+
+// 供应商核心产品 VO
+export interface CoreProductVO {
+  id: number // 主键
+  supplierId: number // 供应商id
+  supplierName: string
+  productId: number // 产品id
+  productName: string // 产品名称
+  advantage: string // 优势介绍
+}
+
+// 供应商核心产品 API
+export const CoreProductApi = {
+  // 查询供应商核心产品分页
+  getCoreProductPage: async (params: any) => {
+    return await request.get({ url: `/supplier/core-product/page`, params })
+  },
+
+  // 查询供应商核心产品详情
+  getCoreProduct: async (id: number) => {
+    return await request.get({ url: `/supplier/core-product/get?id=` + id })
+  },
+
+  // 新增供应商核心产品
+  createCoreProduct: async (data: CoreProductVO) => {
+    return await request.post({ url: `/supplier/core-product/create`, data })
+  },
+
+  // 修改供应商核心产品
+  updateCoreProduct: async (data: CoreProductVO) => {
+    return await request.put({ url: `/supplier/core-product/update`, data })
+  },
+
+  // 删除供应商核心产品
+  deleteCoreProduct: async (id: number) => {
+    return await request.delete({ url: `/supplier/core-product/delete?id=` + id })
+  },
+
+  // 导出供应商核心产品 Excel
+  exportCoreProduct: async (params) => {
+    return await request.download({ url: `/supplier/core-product/export-excel`, params })
+  },
+}

src/router/modules/remaining.ts

@@ -234,6 +234,29 @@ const remainingRouter: AppRouteRecordRaw[] = [
       noTagsView: true
     }
   },
+  {
+    path: '/supplier/product', // 商品中心
+    component: Layout,
+    name: 'SupplierCenter',
+    meta: {
+      hidden: true
+    },
+    children: [
+      {
+        path: '/supplier/detail/info/:id(\\d+)',
+        component: () => import('@/views/supplier/base/form/index.vue'),
+        name: 'SupplierDetailInfo',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          icon: 'ep:view',
+          title: '供应商详情',
+          activeMenu: '/supplier/base'
+        }
+      },
+    ]
+  },
   {
     path: '/bpm',
     component: Layout,

src/views/supplier/base/Form.vue

@@ -13,11 +13,8 @@
       <el-form-item label="供应商名称" prop="name">
         <el-input v-model="formData.name" placeholder="请输入供应商名称" />
       </el-form-item>
-<!--      <el-form-item label="供应商分类" prop="classification">-->
-<!--        <el-input v-model="formData.classification" placeholder="请输入供应商分类" />-->
-<!--      </el-form-item>-->
-      <el-form-item label="供应商分类">
-        <el-select v-model="formData.name" placeholder="请选择">
+      <el-form-item label="供应商分类" prop="classification">
+        <el-select v-model="formData.classification" placeholder="请选择">
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.SUPPLIER_TYPE)"
             :key="dict.value"
@@ -26,12 +23,7 @@
           />
         </el-select>
       </el-form-item>
-<!--      <el-form-item label="公司类型" prop="type">-->
-<!--        <el-select v-model="formData.type" placeholder="请选择公司类型">-->
-<!--          <el-option label="请选择字典生成" value="" />-->
-<!--        </el-select>-->
-<!--      </el-form-item>-->
-      <el-form-item label="公司类型">
+      <el-form-item label="公司类型" prop="type">
         <el-select v-model="formData.type" placeholder="请选择">
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.SUPPLIER_COMPANY_TYPE)"
@@ -41,10 +33,7 @@
           />
         </el-select>
       </el-form-item>
-<!--      <el-form-item label="供应商性质" prop="nature">-->
-<!--        <el-input v-model="formData.nature" placeholder="请输入供应商性质" />-->
-<!--      </el-form-item>-->
-      <el-form-item label="供应商性质">
+      <el-form-item label="供应商性质" prop="nature">
         <el-select v-model="formData.nature" placeholder="请选择">
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.SUPPLIER_NATURE)"
@@ -54,7 +43,17 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="公司规模">
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="formData.status" placeholder="请选择">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.SUPPLIER_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="公司规模" prop="size">
         <el-select v-model="formData.size" placeholder="请选择">
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.SUPPLIER_NATURE)"
@@ -93,26 +92,6 @@
       <el-form-item label="年营业额" prop="annualTurnove">
         <el-input type="number" v-model="formData.annualTurnove" placeholder="请输入年营业额 单位：万元" />
       </el-form-item>
-      <el-form-item label="供应商性质">
-        <el-select v-model="formData.size" placeholder="请选择">
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.SUPPLIER_NATURE)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="状态">
-        <el-select v-model="formData.status" placeholder="请选择">
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.SUPPLIER_STATUS)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
       <el-form-item label="备注" prop="remark">
         <el-input v-model="formData.remark" placeholder="请输入备注" />
       </el-form-item>
@@ -157,6 +136,11 @@ const formData = ref({
   remark: undefined,
 })
 const formRules = reactive({
+  name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
+  classification: [{ required: true, message: '供应商分类不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '公司类型不能为空', trigger: 'blur' }],
+  nature: [{ required: true, message: '供应商性质不能为空', trigger: 'blur' }],
+  creditCode: [{ required: true, message: '社会信用代码不能为空', trigger: 'blur' }],
   status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
 })
 const formRef = ref() // 表单 Ref

src/views/supplier/base/form/index.vue

@@ -0,0 +1,204 @@
+<template>
+  <ContentWrap v-loading="formLoading">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="基础设置" name="info">
+        <InfoForm
+          ref="infoRef"
+          v-model:activeName="activeName"
+          :is-detail="isDetail"
+          :propFormData="formData"
+        />
+      </el-tab-pane>
+      <el-tab-pane label="价格库存" name="sku">
+        <SkuForm
+          ref="skuRef"
+          v-model:activeName="activeName"
+          :is-detail="isDetail"
+          :propFormData="formData"
+        />
+      </el-tab-pane>
+      <el-tab-pane label="物流设置" name="delivery">
+        <DeliveryForm
+          ref="deliveryRef"
+          v-model:activeName="activeName"
+          :is-detail="isDetail"
+          :propFormData="formData"
+        />
+      </el-tab-pane>
+      <el-tab-pane label="商品详情" name="description">
+        <DescriptionForm
+          ref="descriptionRef"
+          v-model:activeName="activeName"
+          :is-detail="isDetail"
+          :propFormData="formData"
+        />
+      </el-tab-pane>
+      <el-tab-pane label="其它设置" name="other">
+        <OtherForm
+          ref="otherRef"
+          v-model:activeName="activeName"
+          :is-detail="isDetail"
+          :propFormData="formData"
+        />
+      </el-tab-pane>
+    </el-tabs>
+    <el-form>
+      <el-form-item style="float: right">
+        <el-button v-if="!isDetail" :loading="formLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="close">返回</el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import { cloneDeep } from 'lodash-es'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import * as ProductSpuApi from '@/api/mall/product/spu'
+import InfoForm from '@/views/mall/product/spu/form/InfoForm.vue'
+import DescriptionForm from '@/views/mall/product/spu/form/DescriptionForm.vue'
+import OtherForm from '@/views/mall/product/spu/form/OtherForm.vue'
+import SkuForm from '@/views/mall/product/spu/form/SkuForm.vue'
+import DeliveryForm from '@/views/mall/product/spu/form/DeliveryForm.vue'
+import { convertToInteger, floatToFixed2, formatToFraction } from '@/utils'
+
+defineOptions({ name: 'ProductSpuAdd' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const { push, currentRoute } = useRouter() // 路由
+const { params, name } = useRoute() // 查询参数
+const { delView } = useTagsViewStore() // 视图操作
+
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const activeName = ref('info') // Tag 激活的窗口
+const isDetail = ref(false) // 是否查看详情
+const infoRef = ref() // 商品信息 Ref
+const skuRef = ref() // 商品规格 Ref
+const deliveryRef = ref() // 物流设置 Ref
+const descriptionRef = ref() // 商品详情 Ref
+const otherRef = ref() // 其他设置 Ref
+// SPU 表单数据
+const formData = ref<ProductSpuApi.Spu>({
+  name: '', // 商品名称
+  categoryId: undefined, // 商品分类
+  keyword: '', // 关键字
+  picUrl: '', // 商品封面图
+  sliderPicUrls: [], // 商品轮播图
+  introduction: '', // 商品简介
+  deliveryTypes: [], // 配送方式数组
+  deliveryTemplateId: undefined, // 运费模版
+  brandId: undefined, // 商品品牌
+  specType: false, // 商品规格
+  subCommissionType: false, // 分销类型
+  skus: [
+    {
+      price: 0, // 商品价格
+      marketPrice: 0, // 市场价
+      costPrice: 0, // 成本价
+      barCode: '', // 商品条码
+      picUrl: '', // 图片地址
+      stock: 0, // 库存
+      weight: 0, // 商品重量
+      volume: 0, // 商品体积
+      firstBrokeragePrice: 0, // 一级分销的佣金
+      secondBrokeragePrice: 0 // 二级分销的佣金
+    }
+  ],
+  description: '', // 商品详情
+  sort: 0, // 商品排序
+  giveIntegral: 0, // 赠送积分
+  virtualSalesCount: 0 // 虚拟销量
+})
+
+/** 获得详情 */
+const getDetail = async () => {
+  if ('ProductSpuDetail' === name) {
+    isDetail.value = true
+  }
+  const id = params.id as unknown as number
+  if (id) {
+    formLoading.value = true
+    try {
+      const res = (await ProductSpuApi.getSpu(id)) as ProductSpuApi.Spu
+      res.skus?.forEach((item) => {
+        if (isDetail.value) {
+          item.price = floatToFixed2(item.price)
+          item.marketPrice = floatToFixed2(item.marketPrice)
+          item.costPrice = floatToFixed2(item.costPrice)
+          item.firstBrokeragePrice = floatToFixed2(item.firstBrokeragePrice)
+          item.secondBrokeragePrice = floatToFixed2(item.secondBrokeragePrice)
+        } else {
+          // 回显价格分转元
+          item.price = formatToFraction(item.price)
+          item.marketPrice = formatToFraction(item.marketPrice)
+          item.costPrice = formatToFraction(item.costPrice)
+          item.firstBrokeragePrice = formatToFraction(item.firstBrokeragePrice)
+          item.secondBrokeragePrice = formatToFraction(item.secondBrokeragePrice)
+        }
+      })
+      formData.value = res
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+
+/** 提交按钮 */
+const submitForm = async () => {
+  // 提交请求
+  formLoading.value = true
+  try {
+    // 校验各表单
+    await unref(infoRef)?.validate()
+    await unref(skuRef)?.validate()
+    await unref(deliveryRef)?.validate()
+    await unref(descriptionRef)?.validate()
+    await unref(otherRef)?.validate()
+    // 深拷贝一份, 这样最终 server 端不满足，不需要影响原始数据
+    const deepCopyFormData = cloneDeep(unref(formData.value)) as ProductSpuApi.Spu
+    deepCopyFormData.skus!.forEach((item) => {
+      // 给sku name赋值
+      item.name = deepCopyFormData.name
+      // sku相关价格元转分
+      item.price = convertToInteger(item.price)
+      item.marketPrice = convertToInteger(item.marketPrice)
+      item.costPrice = convertToInteger(item.costPrice)
+      item.firstBrokeragePrice = convertToInteger(item.firstBrokeragePrice)
+      item.secondBrokeragePrice = convertToInteger(item.secondBrokeragePrice)
+    })
+    // 处理轮播图列表
+    const newSliderPicUrls: any[] = []
+    deepCopyFormData.sliderPicUrls!.forEach((item: any) => {
+      // 如果是前端选的图
+      typeof item === 'object' ? newSliderPicUrls.push(item.url) : newSliderPicUrls.push(item)
+    })
+    deepCopyFormData.sliderPicUrls = newSliderPicUrls
+    // 校验都通过后提交表单
+    const data = deepCopyFormData as ProductSpuApi.Spu
+    const id = params.id as unknown as number
+    if (!id) {
+      await ProductSpuApi.createSpu(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ProductSpuApi.updateSpu(data)
+      message.success(t('common.updateSuccess'))
+    }
+    close()
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 关闭按钮 */
+const close = () => {
+  delView(unref(currentRoute))
+  push({ name: 'ProductSpu' })
+}
+
+/** 初始化 */
+onMounted(async () => {
+  await getDetail()
+})
+</script>

src/views/supplier/base/index.vue

@@ -110,7 +110,6 @@
           plain
           @click="handleExport"
           :loading="exportLoading"
-          v-hasPermi="['supplier::export']"
         >
           <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
@@ -171,6 +170,7 @@
       />
       <el-table-column label="操作" align="center" min-width="120px">
         <template #default="scope">
+          <el-button link type="primary" @click="openDetail(scope.row.id)"> 详情 </el-button>
           <el-button
             link
             type="primary"
@@ -213,7 +213,7 @@ defineOptions({ name: 'Suppliers' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
-
+const { push } = useRouter() // 路由跳转
 const loading = ref(true) // 列表的加载中
 const list = ref<VO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
@@ -240,7 +240,10 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
-
+/** 查看供应商详情 */
+const openDetail = (id: number) => {
+  push({ name: 'SupplierDetailInfo', params: { id } })
+}
 /** 查询列表 */
 const getList = async () => {
   loading.value = true

src/views/supplier/connect/ConnectRecordForm.vue

@@ -7,19 +7,19 @@
       label-width="100px"
       v-loading="formLoading"
     >
-      <el-form-item label="供应商">
-        <el-select v-model="formData.supplierId" placeholder="请选择">
+      <el-form-item label="供应商" prop="supplierId">
+        <el-select v-model="formData.supplierId" filterable placeholder="请选择">
           <el-option
             v-for="dict in supplierList"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+            :key="dict.id"
+            :label="dict.name"
+            :value="dict"
           />
         </el-select>
       </el-form-item>
-<!--      <el-form-item label="我方联系人" prop="username">-->
-<!--        <el-input v-model="formData.username" placeholder="请输入我方联系人姓名" />-->
-<!--      </el-form-item>-->
+      <!--      <el-form-item label="我方联系人" prop="username">-->
+      <!--        <el-input v-model="formData.username" placeholder="请输入我方联系人姓名" />-->
+      <!--      </el-form-item>-->
       <el-form-item label="供应商联系人" prop="contactName">
         <el-input v-model="formData.contactName" placeholder="请输入供应商联系人姓名" />
       </el-form-item>
@@ -29,9 +29,11 @@
       <el-form-item label="交流内容" prop="content">
         <Editor v-model="formData.content" height="150px" />
       </el-form-item>
-      <el-form-item label="附件" prop="urls">
-        <el-input v-model="formData.urls" placeholder="请输入附件" />
-      </el-form-item>
+      <el-col :span="8">
+        <el-form-item label="附件" prop="urls">
+          <UploadFile :is-show-tip="false" v-model="formData.urls" :limit="1" />
+        </el-form-item>
+      </el-col>
     </el-form>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -41,16 +43,16 @@
 </template>
 <script setup lang="ts">
 import { ConnectRecordApi, ConnectRecordVO } from '@/api/supplier/connect'
-import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
-import {onMounted} from "vue";
 import * as SupplierBaseApi from '@/api/supplier/base/index'
-import * as SupplierProductCategoryApi from "@/api/supplier/product/category";
+import { SupplierVO } from '@/api/supplier/base/index'
+import {FormRules} from "element-plus";
+
 /** 供应商联系记录 表单 */
 defineOptions({ name: 'ConnectRecordForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-const supplierList = ref<any[]>([]) // 供应商
+const supplierList = ref([] as SupplierVO[])
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
@@ -58,18 +60,21 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   id: undefined,
   supplierId: undefined,
+  supplierName: undefined,
   userId: undefined,
   username: undefined,
   contactId: undefined,
   contactName: undefined,
   reason: undefined,
   content: undefined,
-  urls: undefined,
+  urls: undefined
 })
-const formRules = reactive({
-})
-const formRef = ref() // 表单 Ref
 
+const formRef = ref() // 表单 Ref
+const formRules = reactive<FormRules>({
+  supplierId: [{ required: true, message: '供应商不能为空', trigger: 'blur' }],
+  contactName: [{ required: true, message: '供应商联系人不能为空', trigger: 'blur' }],
+})
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
@@ -85,6 +90,7 @@ const open = async (type: string, id?: number) => {
       formLoading.value = false
     }
   }
+  supplierList.value = await SupplierBaseApi.Api.getAll()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -97,6 +103,9 @@ const submitForm = async () => {
   formLoading.value = true
   try {
     const data = formData.value as unknown as ConnectRecordVO
+    const supplier = data.supplierId
+    data.supplierId = supplier.id
+    data.supplierName = supplier.name
     if (formType.value === 'create') {
       await ConnectRecordApi.createConnectRecord(data)
       message.success(t('common.createSuccess'))
@@ -111,9 +120,6 @@ const submitForm = async () => {
     formLoading.value = false
   }
 }
-onMounted(()=>{
-  supplierList.value = await SupplierBaseApi.Api.getAll();
-})
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
@@ -125,7 +131,7 @@ const resetForm = () => {
     contactName: undefined,
     reason: undefined,
     content: undefined,
-    urls: undefined,
+    urls: undefined
   }
   formRef.value?.resetFields()
 }

src/views/supplier/connect/index.vue

@@ -17,7 +17,7 @@
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="我方联系人" prop="username">
+      <el-form-item label="我方联系人" label-width="90px" prop="username">
         <el-input
           v-model="queryParams.username"
           placeholder="请输入我方联系人"
@@ -26,7 +26,7 @@
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="供应商联系人" prop="contactName">
+      <el-form-item label="供应商联系人" label-width="98px"  prop="contactName">
         <el-input
           v-model="queryParams.contactName"
           placeholder="请输入供应商联系人"
@@ -51,7 +51,6 @@
           plain
           @click="handleExport"
           :loading="exportLoading"
-          v-hasPermi="['supplier:connect-record:export']"
         >
           <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
@@ -62,7 +61,7 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="供应商" align="center" prop="supplierId" />
+      <el-table-column label="供应商" align="center" prop="supplierName" />
       <el-table-column label="我方联系人姓名" align="center" prop="username" />
       <el-table-column label="供应商联系人姓名" align="center" prop="contactName" />
       <el-table-column label="联系原因" align="center" prop="reason" />

src/views/supplier/contact/ContactForm.vue

@@ -8,7 +8,14 @@
       v-loading="formLoading"
     >
       <el-form-item label="供应商" prop="supplierId">
-        <el-input v-model="formData.supplierId" placeholder="请输入供应商" />
+        <el-select v-model="formData.supplierId" filterable placeholder="请选择">
+          <el-option
+            v-for="dict in supplierList"
+            :key="dict.id"
+            :label="dict.name"
+            :value="dict"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="姓名" prop="name">
         <el-input v-model="formData.name" placeholder="请输入姓名" />
@@ -22,14 +29,14 @@
       <el-form-item label="邮箱" prop="email">
         <el-input v-model="formData.email" placeholder="请输入邮箱" />
       </el-form-item>
-<!--      <el-form-item label="产品/业务模块" prop="productIds">-->
-<!--        <el-input v-model="formData.productIds" placeholder="请输入联系人负责的产品/业务模块" />-->
-<!--      </el-form-item>-->
+      <!--      <el-form-item label="产品/业务模块" prop="productIds">-->
+      <!--        <el-input v-model="formData.productIds" placeholder="请输入联系人负责的产品/业务模块" />-->
+      <!--      </el-form-item>-->
       <el-form-item label="产品业务模块" prop="productIds">
         <el-input v-model="formData.productIds" placeholder="请输入联系人负责的产品/业务模块" />
       </el-form-item>
       <el-form-item label="备注" prop="remark">
-        <el-input v-model="formData.remark" placeholder="请输入备注" />
+        <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -40,13 +47,16 @@
 </template>
 <script setup lang="ts">
 import { ContactApi, ContactVO } from '@/api/supplier/contact'
-import Supplier from '@/views/supplier/base/index.vue'
+import {SupplierVO} from "@/api/supplier/base";
+import * as SupplierBaseApi from "@/api/supplier/base";
+import {FormRules} from "element-plus";
+
 /** 供应商联系人 表单 */
 defineOptions({ name: 'ContactForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-
+const supplierList = ref([] as SupplierVO[])
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
@@ -61,8 +71,26 @@ const formData = ref({
   productIds: undefined,
   productNames: undefined,
   remark: undefined,
+  supplierName: undefined
 })
-const formRules = reactive({
+const formRules = reactive<FormRules>({
+  supplierId: [{ required: true, message: '供应商不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
+
+  email: [
+    {
+      type: 'email',
+      message: '请输入正确的邮箱地址',
+      trigger: ['blur', 'change']
+    }
+  ],
+  telephone: [{ required: true, message: '电话不能为空', trigger: 'blur' },
+    {
+      pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
+      message: '请输入正确的手机号码',
+      trigger: 'blur'
+    }
+  ]
 })
 const formRef = ref() // 表单 Ref
 
@@ -81,6 +109,7 @@ const open = async (type: string, id?: number) => {
       formLoading.value = false
     }
   }
+  supplierList.value = await SupplierBaseApi.Api.getAll()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -93,6 +122,9 @@ const submitForm = async () => {
   formLoading.value = true
   try {
     const data = formData.value as unknown as ContactVO
+    const supplier = data.supplierId;
+    data.supplierId = supplier.id
+    data.supplierName = supplier.name
     if (formType.value === 'create') {
       await ContactApi.createContact(data)
       message.success(t('common.createSuccess'))
@@ -119,7 +151,7 @@ const resetForm = () => {
     email: undefined,
     productIds: undefined,
     productNames: undefined,
-    remark: undefined,
+    remark: undefined
   }
   formRef.value?.resetFields()
 }

src/views/supplier/contact/index.vue

@@ -50,7 +50,6 @@
           plain
           @click="handleExport"
           :loading="exportLoading"
-          v-hasPermi="['supplier:contact:export']"
         >
           <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
@@ -137,6 +136,7 @@ const queryParams = reactive({
   productNames: undefined,
   remark: undefined,
   createTime: [],
+  supplierName: undefined,
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中

src/views/supplier/coreproduct/CoreProductForm.vue

@@ -7,17 +7,24 @@
       label-width="100px"
       v-loading="formLoading"
     >
-      <el-form-item label="供应商id" prop="supplierId">
-        <el-input v-model="formData.supplierId" placeholder="请输入供应商id" />
-      </el-form-item>
-      <el-form-item label="产品id" prop="productId">
-        <el-input v-model="formData.productId" placeholder="请输入产品id" />
+      <el-form-item label="供应商" prop="supplierId">
+        <el-select v-model="formData.supplierId" filterable placeholder="请选择">
+          <el-option
+            v-for="dict in supplierList"
+            :key="dict.id"
+            :label="dict.name"
+            :value="dict"
+          />
+        </el-select>
       </el-form-item>
+<!--      <el-form-item label="产品" prop="productId">-->
+<!--        <el-input v-model="formData.productId" placeholder="请输入产品" />-->
+<!--      </el-form-item>-->
       <el-form-item label="产品名称" prop="productName">
         <el-input v-model="formData.productName" placeholder="请输入产品名称" />
       </el-form-item>
       <el-form-item label="优势介绍" prop="advantage">
-        <el-input v-model="formData.advantage" placeholder="请输入优势介绍" />
+        <el-input type="textarea" v-model="formData.advantage" placeholder="请输入优势介绍" />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -28,13 +35,16 @@
 </template>
 <script setup lang="ts">
 import { CoreProductApi, CoreProductVO } from '@/api/supplier/coreproduct'
+import * as SupplierBaseApi from "@/api/supplier/base";
+import {SupplierVO} from "@/api/supplier/base";
+import {FormRules} from "element-plus";
 
 /** 供应商核心产品 表单 */
 defineOptions({ name: 'CoreProductForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-
+const supplierList = ref([] as SupplierVO[])
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
@@ -42,11 +52,14 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   id: undefined,
   supplierId: undefined,
+  supplierName: undefined,
   productId: undefined,
   productName: undefined,
   advantage: undefined,
 })
-const formRules = reactive({
+const formRules = reactive<FormRules>({
+  supplierId: [{ required: true, message: '供应商不能为空', trigger: 'blur' }],
+  productName: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
 })
 const formRef = ref() // 表单 Ref
 
@@ -65,6 +78,7 @@ const open = async (type: string, id?: number) => {
       formLoading.value = false
     }
   }
+  supplierList.value = await SupplierBaseApi.Api.getAll()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -77,6 +91,9 @@ const submitForm = async () => {
   formLoading.value = true
   try {
     const data = formData.value as unknown as CoreProductVO
+    const supplier = data.supplierId;
+    data.supplierId = supplier.id
+    data.supplierName = supplier.name
     if (formType.value === 'create') {
       await CoreProductApi.createCoreProduct(data)
       message.success(t('common.createSuccess'))
@@ -103,4 +120,4 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
-</script>
+</script>

src/views/supplier/coreproduct/index.vue

@@ -43,7 +43,6 @@
           plain
           @click="handleExport"
           :loading="exportLoading"
-          v-hasPermi="['supplier:core-product:export']"
         >
           <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
@@ -54,7 +53,7 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="供应商id" align="center" prop="supplierId" />
+      <el-table-column label="供应商" align="center" prop="supplierName" />
       <el-table-column label="产品名称" align="center" prop="productName" />
       <el-table-column label="优势介绍" align="center" prop="advantage" />
       <el-table-column