供应商创建修改页面

.env.development

@@ -4,28 +4,28 @@ NODE_ENV = development
 ENV = 'development'
 
 # 测试地址 API接口
-VUE_APP_BASE_API = 'https://zplma-b.caimei365.com'
-# VUE_APP_BASE_API = 'http://192.168.2.68:8012'
+# VUE_APP_BASE_API = 'https://zplma-b.caimei365.com'
+VUE_APP_BASE_API = 'http://192.168.2.68:8012'
 
 # 文件上传 API接口地址
-VUE_APP_UPLOAD_API='https://zplma-b.caimei365.com'
-# VUE_APP_UPLOAD_API='http://192.168.2.68:8012'
+# VUE_APP_UPLOAD_API='https://zplma-b.caimei365.com'
+VUE_APP_UPLOAD_API='http://192.168.2.68:8012'
 
 # 二维码生成链接location
 VUE_APP_BASE_SERVER = 'https://www-b.caimei365.com'
 
 # 消息接口地址 WebSocket
-VUE_APP_SOCKET_SERVER = 'wss://zplma-b.caimei365.com/websocket?sessionSource=zplm_admin'
-# VUE_APP_SOCKET_SERVER = 'ws://192.168.2.68:8012/websocket?sessionSource=zplm_admin'
+# VUE_APP_SOCKET_SERVER = 'wss://zplma-b.caimei365.com/websocket?sessionSource=zplm_admin'
+VUE_APP_SOCKET_SERVER = 'ws://192.168.2.68:8012/websocket?sessionSource=zplm_admin'
 
 # 网站地址
-# VUE_APP_LOCAL = 'http://192.168.2.92:9527'
-VUE_APP_LOCAL = 'http://zplm-b.caimei365.com'
+VUE_APP_LOCAL = 'http://192.168.2.92:9527'
+# VUE_APP_LOCAL = 'http://zplm-b.caimei365.com'
 
 # 认证通页面
-# VUE_APP_WWW_HOST = 'http://192.168.2.92:8888'
-VUE_APP_WWW_HOST = 'https://zp-b.caimei365.com'
+VUE_APP_WWW_HOST = 'http://192.168.2.92:8888'
+# VUE_APP_WWW_HOST = 'https://zp-b.caimei365.com'
 
 # 支付
-# VUE_APP_PAY_LOCAL = 'http://192.168.2.68:18014'
-VUE_APP_PAY_LOCAL = 'http://zplm-b.caimei365.com
+VUE_APP_PAY_LOCAL = 'http://192.168.2.68:18014'
+# VUE_APP_PAY_LOCAL = 'http://zplm-b.caimei365.com

src/api/supplier.js

@@ -19,7 +19,7 @@ export function supplierStatusChange(data) {
 }
 
 // 添加供应商
-export function addSupplier(data) {
+export function createSupplier(data) {
   return request({
     url: '/shop/save',
     method: 'post',
@@ -35,3 +35,12 @@ export function getSupplierById(params) {
     params
   })
 }
+
+// 获取采美供应商列表
+export function fetchCmSupplierList(params) {
+  return request({
+    url: '/shop/cm/list',
+    method: 'get',
+    params
+  })
+}

src/views/admin/supplier/edit.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page-form-container">
+  <div v-loading="isLoading" class="page-form-container">
     <el-form ref="submitForm" :model="formData" :rules="rules" label-width="140px">
       <el-form-item label="供应商名称:" prop="shopName">
         <el-input v-model="formData.shopName" placeholder="请输入供应商名称" maxlength="50" show-word-limit />
@@ -11,9 +11,10 @@
         </el-select>
       </el-form-item>
       <el-form-item label="关联采美供应商:">
-        <el-select v-model="formData.shopType" placeholder="请选择需要关联的供应商" clearable>
-          <el-option label="品牌方" :value="1" />
-          <el-option label="代理商" :value="2" />
+        <el-select v-model="formData.cmShopId" placeholder="请选择需要关联的供应商" clearable>
+          <template v-for="shop in cmShopList">
+            <el-option :key="shop.cmShopId" :label="shop.cmShopName" :value="shop.cmShopId" />
+          </template>
         </el-select>
       </el-form-item>
       <el-form-item label="手机号:" prop="mobile">
@@ -40,8 +41,8 @@
         />
         <el-input v-show="false" v-model="formData.logo" />
       </el-form-item>
-      <el-form-item label="旗下品牌:" prop="brandList">
-        <template v-for="(item, index) in formData.brandList">
+      <el-form-item label="旗下品牌:" prop="shopInfo">
+        <template v-for="(item, index) in formData.shopInfo">
           <el-tag
             :key="index"
             effect="dark"
@@ -54,7 +55,7 @@
           </el-tag>
         </template>
         <el-tag type="primary" effect="dark" @click="onEditBrand('add')">添加品牌<span class="el-icon-plus" /></el-tag>
-        <el-checkbox-group v-show="false" v-model="formData.brandList" />
+        <el-checkbox-group v-show="false" v-model="formData.shopInfo" />
       </el-form-item>
       <el-form-item label="微信公众号:" prop="wxAccountType">
         <el-select v-model="formData.wxAccountType" placeholder="请选择微信公众号类型" clearable>
@@ -105,11 +106,14 @@ import UploadImage from '@/components/UploadImage'
 import { BrandEditForm } from '@/views/components'
 import { deepClone } from '@/utils'
 import { isMobile } from '@/utils/validate'
+import { fetchCmSupplierList, createSupplier, getSupplierById } from '@/api/supplier'
+import { mapGetters } from 'vuex'
 
 const generateBrandInfo = () => ({
+  infoId: '',
   brandName: '',
-  brandAuthLogo: '',
-  country: '',
+  brandLogo: '',
+  producePlace: '',
   manufacturer: ''
 })
 
@@ -126,53 +130,125 @@ export default {
       return callback()
     }
     return {
+      isLoading: false,
       type: 'add',
       brandEditVisible: false,
       brandEditType: 'add',
       brandEditIndex: 0,
       formData: {
+        authUserId: '',
+        createBy: '',
         shopName: '', // 供应商名称
         shopType: '', // 供应商类型
         mobile: '', // 手机号
         linkMan: '', // 联系人
         logo: '', // 代理商logo
-        brandList: [],
+        shopInfo: [],
         wxAccountType: '',
         appId: '',
         appSecret: '',
-        shopStatus: 1 // 供应商状态,
+        shopStatus: 1, // 供应商状态,
+        cmShopId: ''
       },
       rules: {
         shopName: [{ required: true, message: '请输入供应商名称', trigger: ['blur'] }],
         shopType: [{ required: true, message: '请选择供应商类型', trigger: ['change'] }],
         mobile: [
           { required: true, message: '请输入手机号', trigger: ['blur'] },
-          { validator: validMobile, tigger: ['blur'] }
+          { validator: validMobile, trigger: ['blur'] }
         ],
         linkMan: [{ required: true, message: '请输入联系人', trigger: ['blur'] }],
         logo: [{ required: true, message: '请上传供应商logo', trigger: ['change'] }],
-        brandList: [{ required: true, type: 'array', message: '请至少添加一个品牌', trigger: ['change'] }],
+        shopInfo: [{ required: true, type: 'array', message: '请至少添加一个品牌', trigger: ['change'] }],
         shopStatus: [{ required: true, message: '请选择供应商状态', trigger: ['change'] }],
         appId: [{ required: true, message: '请输入服务号appId', trigger: ['blur'] }],
         appSecret: [{ required: true, message: '请输入服务号appSecret', trigger: ['blur'] }]
       },
       brandModel: generateBrandInfo(),
-      logoImageList: []
+      logoImageList: [],
+      cmShopList: []
     }
   },
+  computed: {
+    ...mapGetters(['authUserId'])
+  },
   created() {
+    this.fetchCmSupplierList()
     this.type = this.$route.query.type || 'add'
+    console.log(this.type)
     if (this.type === 'edit') {
-      this.initFormData()
+      this.fetchSupplierData()
     }
   },
   methods: {
+    // 获取采美供应商列表
+    async fetchCmSupplierList() {
+      try {
+        const res = await fetchCmSupplierList()
+        this.cmShopList = res.data
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 获取供应商信息
+    async fetchSupplierData() {
+      try {
+        this.isLoading = true
+        this.formData.authUserId = this.$route.query.id
+        const res = await getSupplierById({ authUserId: this.formData.authUserId })
+        this.initFormData(res.data)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
     // 初始化表单信息
-    initFormData() {},
+    initFormData(data) {
+      for (const key in data) {
+        if (Object.hasOwnProperty.call(this.formData, key)) {
+          if (key === 'wxAccountType') {
+            this.formData[key] = data[key] === 0 ? '' : data[key]
+          } else if (key === 'cmShopId') {
+            this.formData[key] = data[key] ? data[key] : ''
+          } else {
+            this.formData[key] = data[key]
+          }
+        }
+      }
+      if (this.formData.logo) {
+        this.logoImageList = [{ url: this.formData.logo, name: '供应商logo' }]
+      }
+      this.$nextTick(() => (this.isLoading = false))
+    },
+
     // 保存
-    onSave() {
-      console.log(this.formData)
+    async onSave() {
+      try {
+        this.isLoading = true
+        await createSupplier(this.formatSubmitData())
+        this.$message.success(`保存成功`)
+        this.$store.dispatch('tagsView/delView', this.$route)
+        this.$router.replace('/supplier/list')
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    // 请求字段格式处理
+    formatSubmitData() {
+      const data = deepClone(this.formData)
+      if (data.wxAccountType === '') {
+        data.wxAccountType = 0
+      }
+      if (data.createBy === '') {
+        data.createBy = this.authUserId
+      }
+      return data
     },
+
     // 提交供应商信息
     async onSubmit() {
       try {
@@ -182,24 +258,28 @@ export default {
         console.log(error)
       }
     },
+
     // 品牌信息变化
     onBrandFormChange(data) {
+      console.log(data)
       this.brandModel = data
     },
+
     // 品牌信息确认
     async onBrandSubmit() {
       try {
         await this.$refs.brandEditForm.validate()
         if (this.brandEditType === 'add') {
-          this.formData.brandList.push(deepClone(this.brandModel))
+          this.formData.shopInfo.push(deepClone(this.brandModel))
         } else {
-          this.formData.brandList.splice(this.brandEditIndex, 1, deepClone(this.brandModel))
+          this.formData.shopInfo.splice(this.brandEditIndex, 1, deepClone(this.brandModel))
         }
         this.brandEditVisible = false
       } catch (error) {
         console.log(error)
       }
     },
+
     // 编辑品牌事件
     onEditBrand(type, row, index) {
       this.brandEditType = type
@@ -207,25 +287,30 @@ export default {
       this.brandModel = type === 'add' ? generateBrandInfo() : row
       this.brandEditVisible = true
     },
+
     // 品牌编辑取消
     onEditBrandCancel() {
       this.$refs.brandEditForm.clearValidate()
       this.brandEditVisible = false
     },
+
     // 删除品牌
     onRemoveBrand(index) {
-      this.formData.brandList.splice(index, 1)
+      this.formData.shopInfo.splice(index, 1)
     },
+
     // 供应商logo上传成功
     onUploadLogoSuccess({ response, file, fileList }) {
       this.logoImageList = fileList
       this.formData.logo = response.data
     },
+
     // 移除供应商logo
     onRemoveLogoImage() {
       this.logoImageList = []
       this.formData.logo = ''
     },
+
     // 输入手机号时
     onMobileInput() {
       this.formData.mobile = this.formData.mobile.replace(/[^\w\.\/]/gi, '')

src/views/admin/supplier/index.vue

@@ -116,7 +116,6 @@
 <script>
 import { fetchSupplierList, supplierStatusChange } from '@/api/supplier'
 import { resetPassword } from '@/api/user'
-import { fetchBrandList } from '@/api/brand'
 
 export default {
   name: 'ComplexTable',
@@ -138,13 +137,11 @@ export default {
         loginAccount: '' // 登录账号
       },
       list: [],
-      brandList: [], // 品牌列表
       prevData: ''
     }
   },
   created() {
     this.getList()
-    this.getBrandList()
   },
   methods: {
     // 获取列表数据
@@ -168,15 +165,6 @@ export default {
         return item
       })
     },
-    // 获取品牌列表
-    async getBrandList() {
-      try {
-        const res = await fetchBrandList()
-        this.brandList = res.data
-      } catch (error) {
-        console.log(error)
-      }
-    },
     // 供应商状态改变
     async handleChangeStatus(item) {
       console.log(item.shopStatus)

src/views/components/BrandEditForm/index.vue

@@ -4,17 +4,17 @@
       <el-form-item label="品牌名:" prop="brandName">
         <el-input v-model="formData.brandName" placeholder="请输入品牌名" maxlength="50" show-word-limit />
       </el-form-item>
-      <el-form-item label="品牌logo:" prop="brandAuthLogo">
+      <el-form-item label="品牌logo:" prop="brandLogo">
         <upload-image
           tip="建议尺寸：200px * 200px"
           :image-list="imageList"
           @success="uploadSuccess"
           @remove="onRemoveImage"
         />
-        <el-input v-show="false" v-model="formData.brandAuthLogo" />
+        <el-input v-show="false" v-model="formData.brandLogo" />
       </el-form-item>
-      <el-form-item label="产地:" prop="country">
-        <el-input v-model="formData.country" placeholder="请输入产地" maxlength="50" show-word-limit />
+      <el-form-item label="产地:" prop="producePlace">
+        <el-input v-model="formData.producePlace" placeholder="请输入产地" maxlength="50" show-word-limit />
       </el-form-item>
       <el-form-item label="制造商:" prop="manufacturer">
         <el-input v-model="formData.manufacturer" placeholder="请输入制造商" maxlength="50" show-word-limit />
@@ -33,13 +33,14 @@ export default {
     model: {
       type: Object,
       default: () => ({
+        infoId: '',
         brandName: '',
-        brandAuthLogo: '',
-        country: '',
+        brandLogo: '',
+        producePlace: '',
         manufacturer: ''
       }),
       validator: (value) => {
-        return ['brandName', 'brandAuthLogo', 'country', 'manufacturer'].every((key) =>
+        return ['infoId', 'brandName', 'brandLogo', 'producePlace', 'manufacturer'].every((key) =>
           Object.hasOwnProperty.call(value, key)
         )
       }
@@ -48,15 +49,16 @@ export default {
   data() {
     return {
       formData: {
+        infoId: '',
         brandName: '',
-        brandAuthLogo: '',
-        country: '',
+        brandLogo: '',
+        producePlace: '',
         manufacturer: ''
       },
       rules: {
         brandName: [{ required: true, message: '请输入品牌名称', trigger: ['blur'] }],
-        brandAuthLogo: [{ required: true, message: '请上传品牌logo', trigger: ['change'] }],
-        country: [{ required: true, message: '请输入产地', trigger: ['blur'] }],
+        brandLogo: [{ required: true, message: '请上传品牌logo', trigger: ['change'] }],
+        producePlace: [{ required: true, message: '请输入产地', trigger: ['blur'] }],
         manufacturer: [{ required: true, message: '请输入制造商', trigger: ['blur'] }]
       },
       imageList: []
@@ -72,8 +74,8 @@ export default {
   },
   created() {
     objectCover(this.formData, this.model)
-    if (this.formData.brandAuthLogo) {
-      this.imageList = [{ name: '品牌logo', url: this.formData.brandAuthLogo }]
+    if (this.formData.brandLogo) {
+      this.imageList = [{ name: '品牌logo', url: this.formData.brandLogo }]
     }
   },
   methods: {
@@ -91,13 +93,12 @@ export default {
     },
     uploadSuccess({ response, file, fileList }) {
       this.imageList = fileList
-      this.formData.brandAuthLogo = response.data
+      this.formData.brandLogo = response.data
     },
     onRemoveImage() {
       this.imageList = []
-      this.formData.brandAuthLogo = ''
+      this.formData.brandLogo = ''
     }
   }
 }
 </script>
-<style lang="scss" scoped></style>

src/views/normal/material/article/edit.vue

@@ -12,11 +12,14 @@
             @success="handleUploadImageSussces"
             @remove="handleRemoveImage"
           />
-          <el-input v-model="formData.articleImage" class="hiddenInput" />
+          <el-input v-show="false" v-model="formData.articleImage" />
         </el-form-item>
         <el-form-item label="文章内容：" prop="articleContent">
           <tinymce v-model="formData.articleContent" :token="token" :action="action" :height="300" />
-          <el-input v-model="formData.articleContent" class="hiddenInput" />
+          <el-input v-show="false" v-model="formData.articleContent" />
+        </el-form-item>
+        <el-form-item label="排序：" prop="sort">
+          <el-input v-model="formData.sort" />
         </el-form-item>
       </el-form>
     </div>
@@ -43,7 +46,8 @@ export default {
         authUserId: '', // 用户id
         articleTitle: '', // 文章标题
         articleImage: '', // 文章封面
-        articleContent: '' // 文章内容
+        articleContent: '', // 文章内容
+        sort: ''
       },
       // 表单验证规则
       formRules: {
@@ -82,11 +86,11 @@ export default {
     // 保存文章
     submit() {
       this.formData.authUserId = this.authUserId
-      this.$refs.formRef.validate(valid => {
+      this.$refs.formRef.validate((valid) => {
         if (!valid) return
         this.isLoading = true
         saveArticle(this.formData)
-          .then(res => {
+          .then((res) => {
             console.log(res)
             if (res.code !== 0) return
             this.$message.success(res.data)
@@ -102,7 +106,7 @@ export default {
     // 初始化表单回显数据
     initFormData() {
       if (!this.formData.articleId) return
-      getArticleDeatil({ articleId: this.formData.articleId }).then(res => {
+      getArticleDeatil({ articleId: this.formData.articleId }).then((res) => {
         for (const key in this.formData) {
           if (Object.hasOwnProperty.call(this.formData, key)) {
             this.formData[key] = res.data[key]

src/views/normal/material/article/index.vue

@@ -75,6 +75,9 @@
           </template>
         </template>
       </el-table-column>
+      <el-table-column label="排序" width="160px" align="center">
+        <el-input />
+      </el-table-column>
       <el-table-column label="创建时间" width="160px" align="center">
         <template slot-scope="{ row }">
           {{ row.createTime | formatTime }}