整合供应商端新增修改页面

src/components/Tinymce/components/EditorImage.vue

@@ -13,6 +13,7 @@
         :before-upload="beforeUpload"
         class="editor-slide-upload"
         :action="action"
+        accept=".png,.jpg,.gif"
         :headers="headers"
         list-type="picture-card"
       >

src/components/Tinymce/index.vue

@@ -98,15 +98,7 @@ export default {
   mounted() {
     this.init()
   },
-  activated() {
-    if (window.tinymce) {
-      this.initTinymce()
-    }
-  },
-  deactivated() {
-    this.destroyTinymce()
-  },
-  destroyed() {
+  beforeDestroy() {
     this.destroyTinymce()
   },
   methods: {

src/components/UploadFile/index.vue

@@ -67,6 +67,10 @@ export default {
     data: {
       type: Object,
       default: () => ({})
+    },
+    mode: {
+      type: String,
+      default: 'brand'
     }
   },
   data() {
@@ -81,7 +85,11 @@ export default {
       return this.fileList.length < this.limit
     },
     action() {
-      return process.env.VUE_APP_UPLOAD_API + '/shop/upload/file'
+      if (this.mode === 'document') {
+        return process.env.VUE_APP_UPLOAD_API + '/upload/file'
+      } else {
+        return process.env.VUE_APP_UPLOAD_API + '/shop/upload/file'
+      }
     },
     headers() {
       return {

src/views/components/authCardTemplate.vue

@@ -41,7 +41,7 @@ import authCard3 from '@/assets/img/auth-card-placeholder-03.png'
 export default {
   model: {
     event: 'change',
-    prop: 'radio'
+    prop: 'value'
   },
   props: {
     imageList: {
@@ -52,13 +52,14 @@ export default {
       type: Boolean,
       default: true
     },
-    radio: {
+    value: {
       type: Number,
       default: 1
     }
   },
   data() {
     return {
+      radio: 1,
       authCard1,
       authCard2,
       authCard3,
@@ -74,6 +75,7 @@ export default {
     }
   },
   created() {
+    this.radio = this.value
     this.drawQrcode()
   },
   methods: {

src/views/normal/club/device/edit.vue

@@ -2,7 +2,7 @@
   <div v-loading="isLoading" class="addProduct">
     <el-form ref="addFormRef" label-width="130px" class="addForm" :model="formData" :rules="rules">
       <el-form-item label="设备名称:" prop="productName">
-        <el-input v-model="formData.productName" placeholder="建议输入30个字符效果最佳" />
+        <el-input v-model="formData.productName" placeholder="建议输入30个字符效果最佳" show-word-limit maxlength="50" />
       </el-form-item>
 
       <el-form-item label="设备SN码:" prop="snCode">
@@ -15,7 +15,6 @@
           placeholder="请选择品牌"
           style="width: 100%"
           filterable
-          @change="handleChange"
         >
           <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
@@ -43,7 +42,7 @@
       </el-form-item>
       <!-- 是否生成二维码授权牌 -->
       <el-form-item label="生成二维码授权牌:">
-        <el-radio-group v-model="formData.addQrCodeFlag" size="mini" @change="handleRadioChange">
+        <el-radio-group v-model="formData.addQrCodeFlag" size="mini">
           <el-radio :label="0" border>否</el-radio>
           <el-radio :label="1" border :disabled="certificateImageList.length <= 0">是</el-radio>
         </el-radio-group>
@@ -61,16 +60,6 @@
         </div>
         <el-button type="primary" size="mini" @click="handleAddParam">添加参数</el-button>
       </el-form-item>
-      <!-- <el-form-item label="上线状态:">
-        <el-select
-          v-model="formData.status"
-          placeholder="上线状态"
-          style="width: 100%"
-        >
-          <el-option label="上线" :value="1" />
-          <el-option label="下线" :value="0" />
-        </el-select>
-      </el-form-item> -->
     </el-form>
     <div class="submit-btn">
       <el-button type="primary" @click="submit">保存</el-button>
@@ -81,7 +70,7 @@
 
 <script>
 import UploadImage from '@/components/UploadImage'
-import { saveProduct } from '@/api/product'
+import { saveProduct, getProductById } from '@/api/product'
 import { fetchBrandList } from '@/api/brand'
 import { mapGetters } from 'vuex'
 import { isSnCode } from '@/utils/validate'
@@ -103,6 +92,7 @@ export default {
     }
     return {
       isLoading: false,
+      editType: 'add',
       paramsCount: 4,
       brandList: [],
       formData: {
@@ -154,9 +144,10 @@ export default {
     }
   },
   created() {
-    this.formData.authId = this.$route.query.id
+    this.editType = this.$route.query.type || 'add'
+    this.formData.productId = this.$route.query.id
     this.formData.authUserId = this.proxyInfo?.authUserId || this.authUserId
-    this.initParamList()
+    this.initFormData()
     // 如果供应商类型为代理商  则需要获取它代理的品牌列表
     if (this.shopType === 2) {
       this.getBrandList()
@@ -167,25 +158,78 @@ export default {
     }
   },
   methods: {
+    // 初始化表单数据
+    initFormData() {
+      if (this.editType !== 'edit') {
+        this.initParamList()
+        return
+      }
+      this.isLoading = true
+      getProductById({ productId: this.formData.productId }).then(res => {
+        console.log(res)
+        // const { authId, certificateImage, paramList, productId, productImage, productName, snCode, status } = res.data
+        for (const key in res.data) {
+          if (Object.hasOwnProperty.call(res.data, key)) {
+            if (key !== 'paramList') {
+              this.formData[key] = res.data[key]
+            }
+          }
+        }
+        // 初始化参数
+        this.paramList = res.data.paramList.map(param => {
+          param.tip = {}
+          param.tip.first = '参数名'
+          param.tip.second = '请输入参数信息'
+          return param
+        })
+        console.log(this.paramList)
+        this.paramsCount = this.paramList.length
+        if (this.paramsCount < 4) {
+          this.initParamList(4 - this.paramsCount)
+        }
+        this.initImageList()
+        this.isLoading = false
+      })
+    },
 
-    authCardChange(current) {
-      console.log(current)
-      this.formData.addTemplateType = current
+    // 初始化参数列表
+    initParamList(count) {
+      if (this.editType === 'add') {
+        count = this.paramsCount
+      }
+      for (let i = 0; i < count; i++) {
+        this.paramList.push({
+          paramContent: '',
+          paramName: '',
+          tip: {
+            first: this.tipList[i],
+            second: '请输入参数信息'
+          }
+        })
+      }
     },
 
-    handleChange() {
-      console.log(this.formData)
+    // 初始化上传图片列表
+    initImageList() {
+      setTimeout(() => {
+        const productImage = this.formData.productImage
+        const certificateImage = this.formData.certificateImage
+        if (productImage) {
+          this.productImageList.push({ name: 'productImage', url: productImage })
+        }
+        if (certificateImage) {
+          this.certificateImageList.push({ name: 'certificateImage', url: certificateImage })
+        }
+      }, 200)
     },
 
-    handleRadioChange(index) {
-      if (index === 1 && this.certificateImageList.length <= 0) {
-        this.$message.warning('请先上传授权牌')
-        this.formData.addQrCodeFlag = 0
-        return
-      }
+    // 模板选择
+    authCardChange(current) {
+      console.log(current)
+      this.formData.addTemplateType = current
     },
 
-    // 提交
+    // 提交表单
     submit() {
       this.formData.paramList = this.setParamToFormData()
       this.$refs.addFormRef.validate(valide => {
@@ -194,6 +238,7 @@ export default {
         }
       })
     },
+
     // 保存表单数据
     save() {
       this.isLoading = true
@@ -212,29 +257,18 @@ export default {
           this.$refs.addFormRef.resetFields()
           this.clearFormData()
           this.$store.dispatch('tagsView/delView', this.$route)
-          this.$router.push(`/product/list?id=${this.formData.authId}`)
+          this.$router.push(`/club/device-list?id=${this.formData.authId}`)
         })
         .finally(() => {
           this.isLoading = false
         })
     },
+
     // 保存参数到formdata
     setParamToFormData() {
       return this.paramList.filter(item => item.paramContent !== '' && item.paramName !== '')
     },
-    // 初始化参数列表
-    initParamList() {
-      for (let i = 0; i < this.paramsCount; i++) {
-        this.paramList.push({
-          paramContent: '',
-          paramName: '',
-          tip: {
-            first: this.tipList[i],
-            second: '请输入参数信息'
-          }
-        })
-      }
-    },
+
     // 获取品牌信息
     getBrandList() {
       fetchBrandList({ type: 3, authUserId: this.formData.authUserId }).then(res => {
@@ -243,6 +277,7 @@ export default {
         this.brandList = res.data
       })
     },
+
     // 添加一栏参数
     handleAddParam() {
       this.paramsCount += 1
@@ -255,6 +290,7 @@ export default {
         }
       })
     },
+
     // 删除一栏参数
     handleRemoveParam(index) {
       this.paramsCount -= 1
@@ -277,6 +313,7 @@ export default {
       this.productImageList = fileList
       this.formData.productImage = ''
     },
+
     // 授权牌照上传
     beforeCertificateImageUpload(file) {
       const flag = file.size / 1024 / 1024 < 1
@@ -294,7 +331,7 @@ export default {
       this.formData.certificateImage = ''
       this.formData.addQrCodeFlag = 0
     },
-
+    // 清除表单数据
     clearFormData() {
       this.paramList = []
       this.paramsCount = 4

src/views/normal/club/device/index.vue

@@ -34,7 +34,7 @@
         <el-option label="未上线" :value="0" />
       </el-select>
       <el-button type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
-      <el-button v-if="isProxy" icon="el-icon-edit" type="primary" @click="$_navigationTo(`device-add?id=${listQuery.authId}`)">添加</el-button>
+      <el-button v-if="isProxy" icon="el-icon-edit" type="primary" @click="$_navigationTo(`device-add?type=add`)">添加</el-button>
     </div>
     <!-- 表格区域 -->
     <el-table
@@ -103,7 +103,7 @@
       <el-table-column label="操作" align="center" width="240px" class-name="small-padding fixed-width">
         <template slot-scope="{row}">
           <template v-if="userIdentity === 2|| proxyInfo !== null">
-            <el-button type="default" size="mini" @click="$_navigationTo(`device-edit?id=${row.productId}`)">
+            <el-button type="default" size="mini" @click="$_navigationTo(`device-edit?type=edit&id=${row.productId}`)">
               编辑
             </el-button>
             <el-button type="danger" size="mini" @click="handleRemoveProduct(row)">

src/views/normal/club/edit.vue

@@ -2,7 +2,7 @@
   <div class="club-edit">
     <el-form ref="submitForm" class="club-edit-form" label-width="120px" :model="formData" :rules="rules">
       <el-form-item label="机构名称:" prop="name">
-        <el-input v-model="formData.name" placeholder="请输入机构名称" />
+        <el-input v-model="formData.name" placeholder="请输入机构名称" clearable />
       </el-form-item>
       <el-form-item label="所在地区:" prop="address">
         <el-cascader
@@ -17,15 +17,15 @@
         />
       </el-form-item>
       <el-form-item label="详细地址:" prop="fullAddress">
-        <el-input v-model="formData.fullAddress" placeholder="请输入详细地址" />
+        <el-input v-model="formData.fullAddress" placeholder="请输入详细地址" clearable />
       </el-form-item>
       <el-form-item label="经纬度:" prop="point">
-        <el-input v-model="formData.point" placeholder="请输入经纬度 （格式：纬度,经度，可通过右侧地图小按钮获取）">
+        <el-input v-model="formData.point" placeholder="请输入经纬度 （格式：纬度,经度，可通过右侧地图小按钮获取）" clearable>
           <el-button slot="append" icon="el-icon-map-location" @click="dialogMapVisible = true" />
         </el-input>
       </el-form-item>
       <el-form-item label="联系方式:" prop="mobile">
-        <el-input v-model="formData.mobile" placeholder="请输入联系方式" />
+        <el-input v-model="formData.mobile" placeholder="请输入联系方式" clearable />
       </el-form-item>
       <el-form-item label="机构logo:" prop="logoImage">
         <el-input v-show="false" v-model="formData.logoImage" />
@@ -90,11 +90,10 @@ export default {
         callback(new Error('经纬度坐标不能为空'))
       } else {
         if (isPoint(value)) {
-          this.$refs.ruleForm.validateField('point')
+          callback()
         } else {
-          callback('经纬度坐标格式不正确，(例如：114.095294,22.536004)')
+          callback(new Error('经纬度坐标格式不正确，(例如：114.095294,22.536004)'))
         }
-        callback()
       }
     }
 
@@ -103,15 +102,15 @@ export default {
         callback(new Error('联系方式不能为空'))
       } else {
         if (isNumber(value)) {
-          this.$refs.ruleForm.validateField('point')
+          callback()
         } else {
-          callback('联系方式格式不正确')
+          callback(new Error('联系方式格式不正确'))
         }
-        callback()
       }
     }
 
     return {
+      editType: 'add',
       dialogMapVisible: false,
       point: {},
       value: [],
@@ -134,8 +133,8 @@ export default {
         name: [{ required: true, message: '机构名称不能为空', trigger: ['blur', 'change'] }],
         address: [{ required: true, message: '地址不能为空', trigger: 'change', type: 'array' }],
         fullAddress: [{ required: true, message: '详细不能为空', trigger: ['blur', 'change'] }],
-        point: [{ validator: validatePoint, trigger: ['blur', 'change'] }],
-        mobile: [{ validator: validateMobile, trigger: ['blur', 'change'] }],
+        point: [{ required: true, validator: validatePoint, trigger: ['blur', 'change'] }],
+        mobile: [{ required: true, validator: validateMobile, trigger: ['blur', 'change'] }],
         logoImage: [{ required: true, message: '请上传机构logo', trigger: 'change' }],
         banner: [{ required: true, message: '请至少上传一张banner图片', trigger: 'change' }]
       },
@@ -173,6 +172,7 @@ export default {
     }
   },
   created() {
+    this.editType = this.$route.query.type || 'add'
     this.authId = this.$route.query.id
     this.initFormData()
   },
@@ -192,6 +192,7 @@ export default {
 
     // 数据回显
     initFormData() {
+      if (!this.authId) return
       getAuthFormData({ authId: this.authId }).then(res => {
         console.log(res)
         this.formData.name = res.data.authParty
@@ -241,9 +242,8 @@ export default {
           lngAndLat
         }
 
-        data.bannerList = this.bannerList.map(item => item.response ? item.response.data : item.url)
+        data.bannerList = this.bannerList.map(item => (item.response ? item.response.data : item.url))
 
-        console.log(data)
         saveBrandAuth(data)
           .then(res => {
             const h = this.$createElement
@@ -254,7 +254,7 @@ export default {
             })
             this.$refs.submitForm.resetFields()
             this.$store.dispatch('tagsView/delView', this.$route)
-            this.$router.push('/auth/list')
+            this.$router.push('/club/list')
           })
           .catch(err => {
             this.$message.danger(err.msg)

src/views/normal/club/index.vue

@@ -34,7 +34,7 @@
 
       <el-button icon="el-icon-search" type="primary" @click="getList">查询</el-button>
       <!-- <el-button v-if="isProxy" icon="el-icon-edit" type="primary" @click="handleShowEditDialog('添加品牌授权')">添加品牌授权</el-button> -->
-      <el-button v-if="isProxy" icon="el-icon-edit" type="primary" @click="$_navigationTo('club-add')">添加</el-button>
+      <el-button v-if="isProxy" icon="el-icon-edit" type="primary" @click="$_navigationTo('club-add?type=edit')">添加</el-button>
       <el-button icon="el-icon-upload" type="primary" @click="improtDialogVisible = true">导入</el-button>
       <el-button icon="el-icon-document" type="primary" @click="handleExportExcel">导出</el-button>
       <el-button icon="el-icon-document-copy" type="primary" @click="downLoadExportExcel">获取导入模板</el-button>
@@ -110,14 +110,14 @@
       <el-table-column label="操作" align="center" width="400px" class-name="small-padding fixed-width">
         <template slot-scope="{row}">
           <template v-if="isProxy">
-            <el-button type="primary" size="mini" @click="$_navigationTo(`club-edit?id=${row.authId}&authParty=${row.authParty}`)">
+            <el-button type="primary" size="mini" @click="$_navigationTo(`club-edit?type=edit&id=${row.authId}`)">
               编辑
             </el-button>
-            <el-button type="primary" size="mini" @click="$_navigationTo(`user-list?id=${row.authId}&authParty=${row.authParty}`)">
+            <el-button type="primary" size="mini" @click="$_navigationTo(`user-list?id=${row.authId}`)">
               登录用户
             </el-button>
           </template>
-          <el-button type="primary" size="mini" @click="$_navigationTo(`device-list?id=${row.authId}&authParty=${row.authParty}`)">
+          <el-button type="primary" size="mini" @click="$_navigationTo(`device-list?id=${row.authId}`)">
             查看设备认证
           </el-button>
           <el-button v-if="isProxy" type="danger" size="mini" @click="handleRemoveAuth(row)">

src/views/normal/doctor/edit.vue

@@ -34,7 +34,7 @@
 
       <el-form-item label="具备操作资格设备:" prop="equipment">
         <el-input v-show="false" v-model="formData.equipment" />
-        <device-section ref="subForm" :list="deviceList" @change="deviceListDataChange" />
+        <device-section v-if="!isRequest" ref="subForm" :list="deviceList" @change="deviceListDataChange" />
       </el-form-item>
 
     </el-form>
@@ -50,7 +50,7 @@ import { Promise } from 'jszip/lib/external'
 import { mapGetters } from 'vuex'
 import DeviceSection from '@/views/components/deviceSection.vue'
 import UploadImage from '@/components/UploadImage'
-import { doctorSave } from '@/api/doctor'
+import { doctorSave, doctorFormData } from '@/api/doctor'
 
 export default {
   components: { DeviceSection, UploadImage },
@@ -60,15 +60,17 @@ export default {
         callback(new Error('从业资格证编号不能为空'))
       } else {
         if (/^[a-z|A-Z|0-9]{1,}$/.test(value)) {
-          this.$refs.ruleForm.validateField('point')
+          callback()
         } else {
-          callback('从业资格证编号格式不正确')
+          callback(new Error('从业资格证编号格式不正确'))
         }
-        callback()
       }
     }
 
     return {
+      isRequest: true,
+      editType: 'add',
+      doctorId: '',
       point: {},
       disabled: false,
       formData: {
@@ -80,7 +82,10 @@ export default {
         equipment: ''
       },
       rules: {
-        doctorName: [{ required: true, message: '医师姓名不能为空', trigger: ['blur', 'change'] }],
+        doctorName: [
+          { required: true, message: '医师姓名不能为空', trigger: ['blur', 'change'] },
+          { maxlength: 30, message: '最大长度为30个字符', trigger: ['blur', 'change'] }
+        ],
         certificateNo: [{ required: true, validator: validateCertificateNo, trigger: ['blur', 'change'] }],
         clubName: [{ required: true, message: '所在机构不能为空', trigger: ['blur', 'change'] }],
         doctorImage: [{ required: true, message: '请上传医师照片', trigger: 'change' }],
@@ -108,7 +113,9 @@ export default {
     }
   },
   created() {
-
+    this.doctorId = parseInt(this.$route.query.id)
+    this.editType = this.$route.query.type || 'edit'
+    this.initFormData()
   },
   methods: {
     // 具备操作资格设备列表数据变化
@@ -117,6 +124,33 @@ export default {
       this.formData.equipment = list.length || ''
     },
 
+    // 表单数据回显
+    initFormData() {
+      if (this.editType !== 'edit') {
+        this.isRequest = false
+        return
+      }
+      doctorFormData({ doctorId: this.doctorId }).then(res => {
+        this.setFormData(res.data)
+      })
+    },
+
+    // 设置表单数据
+    setFormData(data) {
+      this.formData.doctorName = data.doctorName
+      this.formData.certificateNo = data.certificateNo
+      this.formData.clubName = data.clubName
+      this.formData.doctorImage = data.doctorImage
+
+      this.formData.banner = data.bannerList.length
+      this.formData.equipmentList = data.equipmentList.length
+      this.doctorImageList.push({ url: data.doctorImage, name: 'doctor' })
+      this.bannerList = data.bannerList.map(item => ({ url: item, name: '' }))
+      this.deviceList = data.equipmentList
+
+      this.isRequest = false
+    },
+
     // 提交表单验证
     submit() {
       Promise.all([this.$refs.subForm.valideAllForm(), this.$refs.submitForm.validate()]).then(res => {
@@ -127,11 +161,10 @@ export default {
     // 保存
     save() {
       const authUserId = this.proxyInfo?.authUserId || this.authUserId
-
       const data = {
         authUserId,
         createBy: authUserId,
-        doctorId: '',
+        doctorId: this.doctorId,
         doctorName: this.formData.doctorName,
         certificateNo: this.formData.certificateNo,
         clubName: this.formData.clubName,

src/views/normal/doctor/index.vue

@@ -32,7 +32,7 @@
         <el-option label="未上线" :value="0" />
       </el-select>
       <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
-      <el-button type="primary" icon="el-icon-edit" @click="$_navigationTo('/doctor/add')">添加</el-button>
+      <el-button type="primary" icon="el-icon-edit" @click="$_navigationTo('add?type=add')">添加</el-button>
     </div>
     <!-- 表格区域 -->
     <el-table
@@ -105,7 +105,7 @@
       <!-- <el-table-column v-if="false" label="创建人" width="180px" align="center" prop="createBy" /> -->
       <el-table-column label="操作" align="center" width="240px" class-name="small-padding fixed-width">
         <template slot-scope="{row}">
-          <el-button type="primary" size="mini" @click="$_navigationTo(`edit?id=${row.doctorId}`)">
+          <el-button type="primary" size="mini" @click="$_navigationTo(`edit?type=edit&id=${row.doctorId}`)">
             编辑
           </el-button>
           <el-button type="danger" size="mini" @click="handleRemoveDoctor(row)">

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

@@ -6,7 +6,12 @@
           <el-input v-model="formData.articleTitle" placeholder="请输入文章标题" maxlength="50" show-word-limit />
         </el-form-item>
         <el-form-item label="头图：" prop="articleImage">
-          <upload-image tip-title="128px * 128px" :file-list="imagelist" @success="handleSussces" @error="handleError" />
+          <upload-image
+            tip-title="128px * 128px"
+            :image-list="imageList"
+            @success="handleUploadImageSussces"
+            @remove="handleRemoveImage"
+          />
           <el-input v-model="formData.articleImage" class="hiddenInput" />
         </el-form-item>
         <el-form-item label="文章内容：" prop="articleContent">
@@ -24,7 +29,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import UploadImage from '@/views/components/uploadImage'
+import UploadImage from '@/components/UploadImage'
 import Tinymce from '@/components/Tinymce'
 import { getToken } from '@/utils/auth'
 import { saveArticle, getArticleDeatil } from '@/api/doc'
@@ -56,7 +61,7 @@ export default {
       // 富文本框上传图片的接口
       action: process.env.VUE_APP_UPLOAD_API + '/upload/image',
       // 封面图片列表
-      imagelist: []
+      imageList: []
     }
   },
   computed: {
@@ -80,16 +85,18 @@ export default {
       this.$refs.formRef.validate(valid => {
         if (!valid) return
         this.isLoading = true
-        saveArticle(this.formData).then(res => {
-          console.log(res)
-          if (res.code !== 0) return
-          this.$message.success(res.data)
-          // 如果保存文章成功就要关闭当前页面
-          this.$store.dispatch('tagsView/delView', this.$route)
-          this.$router.back()
-        }).finally(() => {
-          this.isLoading = false
-        })
+        saveArticle(this.formData)
+          .then(res => {
+            console.log(res)
+            if (res.code !== 0) return
+            this.$message.success(res.data)
+            // 如果保存文章成功就要关闭当前页面
+            this.$store.dispatch('tagsView/delView', this.$route)
+            this.$router.back()
+          })
+          .finally(() => {
+            this.isLoading = false
+          })
       })
     },
     // 初始化表单回显数据
@@ -101,35 +108,31 @@ export default {
             this.formData[key] = res.data[key]
           }
         }
-        this.imagelist = [{ name: '文章封面', url: this.formData.articleImage }]
+        this.imageList = [{ name: '文章封面', url: this.formData.articleImage }]
         console.log(res)
       })
     },
     // 封面图片上传成功
-    handleSussces(res) {
-      console.log(res)
-      if (!res.data) {
-        this.imagelist = []
-        return
-      }
-      this.formData.articleImage = res.data
+    handleUploadImageSussces({ response, file, fileList }) {
+      this.imageList = fileList
+      this.formData.articleImage = response.data
     },
-    // 封面图片上传失败
-    handleError() {
-      this.imagelist = []
+    handleRemoveImage({ response, file, fileList }) {
+      this.imageList = fileList
+      this.formData.articleImage = ''
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.app-container{
-  .form{
+.app-container {
+  .form {
     width: 1000px;
     margin: 30px auto;
   }
 }
-.hiddenInput{
+.hiddenInput {
   height: 0;
   display: none;
 }

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

@@ -145,40 +145,31 @@
       :limit.sync="listQuery.pageSize"
       @pagination="getList(listQuery)"
     />
-    <!-- 视频预览对话框 -->
     <el-dialog
       :title="dialogTitle"
       :visible.sync="dialogVisible"
       width="40%"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
-      @closed="dialogColosed"
       @close="beforeDialogClose"
     >
       <el-form ref="formRef" :model="dialogData" label-width="110px" :rules="dialogFormRules">
         <el-form-item label="标题：" prop="fileTitle">
           <el-input v-model="dialogData.fileTitle" maxlength="50" show-word-limit />
         </el-form-item>
-        <el-form-item label="上传文件：" prop="filePreviewUrl" style="margin-bottom:0">
-          <div class="file-upload-box">
-            <!-- 上传文件组件 -->
-            <el-upload
-              ref="uploadFileRef"
-              accept=".pdf"
-              :class="{ hidden: hasFile }"
-              :auto-upload="false"
-              :headers="headers"
-              :action="action"
-              :on-success="fileUploadSuccess"
-              :on-change="fileUploadChange"
-              :on-remove="fileUploadRemove"
-              :before-upload="beforeUpload"
-              :file-list="fileList"
-            >
-              <el-button size="mini" type="primary" style="width:100%">上传文件</el-button>
-            </el-upload>
-            <el-input v-model="dialogData.filePreviewUrl" type="hidden" class="hiddenInput" />
-          </div>
+        <el-form-item label="上传文件：" prop="fileName" style="margin-bottom:0">
+          <upload-file
+            ref="fileUpload"
+            accept=".pdf"
+            mode="document"
+            :file-list="fileList"
+            :auto-upload="false"
+            :before-upload="beforeUpload"
+            @success="handleUploadFileSuccess"
+            @remove="handleRemoveUploadFile"
+            @change="handleChooseFileChange"
+          />
+          <el-input v-show="false" v-model="dialogData.fileName" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -186,19 +177,18 @@
         <el-button type="primary" :loading="submitLoading" @click="handleSave">提 交</el-button>
       </div>
     </el-dialog>
-    <!-- 视频预览对话框END -->
   </div>
 </template>
 
 <script>
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
+import UploadFile from '@/components/UploadFile'
 import { formatDate } from '@/utils'
 import { mapGetters } from 'vuex'
-import { getToken } from '@/utils/auth'
 import { changeFileStatus, getFileList, removeFile, saveFile } from '@/api/doc'
 import openWindow from '@/utils/open-window'
 export default {
-  components: { Pagination },
+  components: { Pagination, UploadFile },
   filters: {
     formatTime(time) {
       if (!time) {
@@ -214,57 +204,43 @@ export default {
       total: 0, // 列表条数
       dialogVisible: false, // 是否显示dialog
       dialogTitle: '添加文件', // dialog标题
-      hasFile: false, // 是否上传了文件
-      previewUrl: '', // 上传文件成功后的url
-      downloadUrl: '',
-      chooseNewFile: false, // 是否选择了新的图片上传
       listQuery: {
         authUserId: '', // 供应商用户id
-        listType: 1, // 列表类型：1视频列表，2视频审核列表
+        listType: 1, // 列表类型：1文件列表，2文件审核列表
         fileTitle: '', // 文件标题
         auditStatus: '', // 审核状态：0审核未通过，1审核通过，2待审核
-        status: '', // 视频状态：0已下线，1已上线，2待上线
+        status: '', // 文件状态：0已下线，1已上线，2待上线
         pageNum: 1, // 页码
         pageSize: 10 // 分页大小
       },
       fileList: [],
       // dialog表单中的数据
       dialogData: {
-        authUserId: '',
-        fileTitle: '',
         fileId: '',
-        // fileUrl: '',
-        fileName: '',
-        filePreviewUrl: '',
-        fileDownloadUrl: ''
+        fileTitle: '',
+        fileName: ''
       },
       // dialog表单数据校验规则
       dialogFormRules: {
         fileTitle: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
-        filePreviewUrl: [{ required: true, message: '文件不能为空', trigger: 'change' }]
+        fileName: [{ required: true, message: '文件不能为空', trigger: 'change' }]
+      },
+      currentFileData: {
+        filePreviewUrl: '',
+        fileDownloadUrl: ''
       },
       list: []
     }
   },
   computed: {
-    ...mapGetters(['authUserId', 'userIdentity', 'proxyInfo']),
-    headers() {
-      return {
-        'X-Token': getToken()
-      }
-    },
-    action() {
-      return `${process.env.VUE_APP_UPLOAD_API}/upload/file`
-    }
+    ...mapGetters(['authUserId', 'userIdentity', 'proxyInfo'])
   },
   created() {
     this.getList()
   },
   methods: {
-
     // 小窗口浏览pdf文件
     handlePreviewFile(row) {
-      console.log(row)
       openWindow(row.filePreviewUrl, row.fileTitle, row.fileTitle, 1200, 600)
     },
 
@@ -283,37 +259,32 @@ export default {
           this.listLoading = false
         })
     },
+
     // 点击保存按钮
     handleSave() {
-      if (!this.dialogData.fileTitle || !this.dialogData.filePreviewUrl) {
-        this.$refs.formRef.validateField('fileTitle')
-        this.$refs.formRef.validateField('filePreviewUrl')
-        return
+      const status = this.fileList.length > 0 && this.fileList[0].status
+      if (status === 'success') {
+        this.save()
+      }
+      if (status === 'ready') {
+        this.submitLoading = true
+        this.$refs.fileUpload.$refs.fileUpload.submit()
       }
-      // 对标题字段进行规则校验
-      console.log(this.dialogData)
-      this.$refs.formRef.validateField('fileTitle', error => {
-        if (!error) {
-          this.submitLoading = true
-          this.hasFile && !this.chooseNewFile ? this.save() : this.$refs.uploadFileRef.submit()
-        }
-      })
     },
+
     // 调用保存数据接口
     save() {
       this.$refs.formRef.validate(valide => {
         if (!valide) return
-        this.dialogData.authUserId = this.authUserId
-        if (this.previewUrl && this.downloadUrl) {
-          this.dialogData.filePreviewUrl = this.previewUrl
-          this.dialogData.fileDownloadUrl = this.downloadUrl
+        // 请求参数
+        const params = {
+          ...this.dialogData,
+          ...this.currentFileData,
+          authUserId: this.authUserId
         }
-        console.log(this.dialogData)
-        console.log('保存')
-        saveFile(this.dialogData)
+
+        saveFile(params)
           .then(res => {
-            console.log(res)
-            if (res.code !== 0) return
             this.dialogVisible = false
             this.getList()
             this.$message({
@@ -327,9 +298,10 @@ export default {
           })
       })
     },
-    // 删除视频
+
+    // 删除文件
     async handleRemoveFile(row) {
-      const text = await this.$confirm('视频删除后不可恢复，确认删除该视频吗？', '提示', {
+      const text = await this.$confirm('文件删除后不可恢复，确认删除该文件吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -343,116 +315,121 @@ export default {
         this.getList()
       })
     },
+
+    // 状态改变
+    handleChangeStatus(item) {
+      this.listLoading = true
+      const params = {
+        fileId: item.fileId,
+        status: item.status === 1 ? 0 : 1
+      }
+      changeFileStatus(params)
+        .then(res => {
+          this.$message({
+            message: res.data,
+            duration: 500,
+            type: 'success'
+          })
+          this.getList()
+        }).finally(() => {
+          this.listLoading = false
+        })
+    },
+
     // 显示dialog对话框
     handleShowDialog(type, row) {
-      this.dialogTitle = type === 'add' ? '添加文件' : '修改文件'
-      this.$refs?.formRef?.resetFields()
-      this.dialogVisible = true
-      if (type !== 'add') {
+      this.dialogTitle = '添加文件'
+      if (type === 'edit') {
+        this.dialogTitle = '修改文件'
         this.setDialogData(row)
       }
+      this.dialogVisible = true
     },
+
     // 设置表单初始值
     setDialogData(row) {
-      console.log(row)
-      if (!row) return
-      for (const key in this.dialogData) {
-        if (Object.hasOwnProperty.call(this.dialogData, key)) {
-          this.dialogData[key] = row[key]
+      if (typeof row !== 'object') return
+      setTimeout(() => {
+        for (const key in this.dialogData) {
+          if (Object.hasOwnProperty.call(this.dialogData, key)) {
+            this.dialogData[key] = row[key]
+          }
         }
-      }
-      if (this.dialogData.filePreviewUrl) {
-        this.fileList = [{ name: row.fileName, url: row.filePreviewUrl }]
-        this.hasFile = true
-      }
-    },
-    // dialog对话框关闭时的回调
-    dialogColosed() {
-      this.dialogData.authUserId = ''
-      this.dialogData.fileTitle = ''
-      this.dialogData.fileId = ''
-      this.dialogData.filePreviewUrl = ''
-      this.dialogData.fileDownloadUrl = ''
-      this.dialogData.fileName = ''
-      this.previewUrl = ''
-      this.downloadUrl = ''
-      this.chooseNewFile = false
-      this.hasFile = false
-      this.fileList = []
-      this.submitLoading = false
-      console.log(this.dialogData)
+
+        this.resetCurrentFileData(row)
+
+        if (row.filePreviewUrl && row.fileDownloadUrl && row.fileId) {
+          this.fileList = [{ name: row.fileName }]
+        }
+      }, 100)
     },
+
     // 对话框关闭前的回调
     beforeDialogClose() {
-      console.log('对话框关闭')
-      // this.$refs.formRef.clearValidate()
-      // 停止上传文件
       this.$refs.formRef.resetFields()
-      this.$refs.uploadFileRef.abort()
+      this.$refs.fileUpload.$refs.fileUpload.abort()
+      this.fileList = []
+      this.dialogData.fileId = ''
+      this.submitLoading = false
+      this.resetCurrentFileData()
     },
+
     // 上传文件成功
-    fileUploadSuccess(response) {
-      // this.dialogData.fileUrl = response.fileUrl
-      this.previewUrl = response.previewUrl
-      this.downloadUrl = response.downloadUrl
+    handleUploadFileSuccess({ response, file, fileList }) {
+      console.log(response)
+      this.fileList = fileList
       this.dialogData.fileName = response.fileName
+      this.currentFileData.filePreviewUrl = response.previewUrl
+      this.currentFileData.fileDownloadUrl = response.downloadUrl
       this.save()
-      console.log(response)
-    },
-    // 上传文件成功，选择文件，上传文件失败的回调
-    fileUploadChange(file, fileList) {
-      this.hasFile = fileList.length > 0
-      this.dialogData.filePreviewUrl = '-'
-      this.dialogData.fileDownloadUrl = '-'
-      this.chooseNewFile = true
     },
+
     // 移除文件
-    fileUploadRemove(file, fileList) {
-      this.dialogData.filePreviewUrl = ''
-      this.dialogData.fileDownloadUrl = ''
-      this.hasFile = fileList.length > 0
+    handleRemoveUploadFile({ response, file, fileList }) {
+      this.fileList = []
+      this.dialogData.fileName = ''
+      this.resetCurrentFileData()
     },
-    beforeUpload(file, fileList) {
-      const flag = file.size <= 100 * 1024 * 1204
-      if (!flag) {
-        this.$message({
-          message: '文件大小超过100MB，请重新选择！',
-          duration: 1000,
-          type: 'warning'
-        })
-        this.fileList = []
-      }
-      return flag
+
+    // 文件选择
+    handleChooseFileChange({ file, fileList }) {
+      this.fileList = fileList
+      this.dialogData.fileName = file.name
+      this.resetCurrentFileData()
     },
-    // 状态改变
-    handleChangeStatus(item) {
-      this.listLoading = true
-      // const params = {
-      //   authId: item.authId,
-      //   status: item.status ? 1 : 0
-      // }
-      console.log(item)
-      const params = {
-        fileId: item.fileId,
-        status: item.status === 1 ? 0 : 1
+
+    // 重置选中文件数据
+    resetCurrentFileData(row = {}) {
+      this.currentFileData.filePreviewUrl = row.filePreviewUrl || ''
+      this.currentFileData.fileDownloadUrl = row.fileDownloadUrl || ''
+    },
+
+    // 文件上传之前
+    beforeUpload(file, fileList) {
+      let maxSize = 100
+      // 文件过大
+      if (file.size > maxSize * 1024 * 1024) {
+        this.$message.warning('文件大小超过100MB，请重新选择！')
+        return Promise.reject()
       }
-      changeFileStatus(params)
-        .then(res => {
-          // this.$message.success(res.data)
-          this.$message({
-            message: res.data,
-            duration: 500,
-            type: 'success'
-          })
-          this.getList()
-        })
-        .catch(err => {
-          console.log(err)
-        })
-        .finally(() => {
-          this.listLoading = false
-        })
+      maxSize = 30
+      // 直接上传
+      if (file.size <= maxSize * 1024 * 1024) return true
+      // 用户确认上传
+      return this.$confirm(`您上传的文件大于${maxSize}MB，是否继续上传？文件上传过程中请您耐心等待!`, '文件上传提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        return Promise.resolve()
+      }).catch(() => {
+        this.$message.info('已取消上传')
+        this.submitLoading = false
+        return Promise.reject()
+      })
     },
+
+    // 表格索引
     indexMethod(index) {
       return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
     }

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

@@ -5,25 +5,15 @@
         <el-form-item label="标题：" prop="imageTitle">
           <el-input v-model="formData.imageTitle" placeholder="图片列表标题" maxlength="50" show-word-limit />
         </el-form-item>
-        <el-form-item label="图片：" prop="imageFlag">
-          <el-upload
-            class="upload-control"
-            :class="{hidden:count === 8}"
-            list-type="picture-card"
-            accept=".png,.jpg,.gif"
-            :action="action"
-            :headers="headers"
-            :multiple="true"
+        <el-form-item label="图片：" prop="imageList">
+          <upload-image
+            :image-list="imageList"
             :limit="8"
-            :file-list="imageList"
-            :on-remove="handleRemove"
-            :on-success="handleUploadSuccess"
             :before-upload="beforeUpload"
-          >
-            <i class="el-icon-picture-outline" />
-            <div slot="tip" class="el-upload__tip" style="color:#999"><span style="color:red">*</span>最多只能上传8张图片</div>
-          </el-upload>
-          <el-input v-model="formData.imageFlag" class="hiddenInput" />
+            @success="handleUploadSuccess"
+            @remove="handleRemove"
+          />
+          <el-input v-show="false" v-model="formData.imageList" />
         </el-form-item>
       </el-form>
       <div class="submit-btn">
@@ -35,49 +25,35 @@
 </template>
 
 <script>
-import { getToken } from '@/utils/auth'
+import UploadImage from '@/components/UploadImage'
 import { mapGetters } from 'vuex'
 import { getImageDetail, saveImage } from '@/api/doc'
 export default {
+  components: { UploadImage },
   data() {
     return {
-      count: 0, // 图片个数
+      editType: 'add',
       imageId: '', // 图片列表id
       imageList: [], // 回显图片列表
-      imageArr: [], // 上传的图片列表
       formData: {
         imageTitle: '', // 图片标题
-        imageFlag: '' // 是否上传图片的标识 不为空则代表上传过图片
+        imageList: '' // 是否上传图片的标识 不为空则代表上传过图片
       },
       formRules: {
         imageTitle: [
           { required: true, message: '标题不能为空', trigger: 'blur' },
           { max: 50, message: '标题不能超过50个字符', trigger: 'blur' }
         ],
-        imageFlag: [
-          { required: true, message: '图片列表不能为空', trigger: 'change' }
-        ]
+        imageList: [{ required: true, message: '图片列表不能为空', trigger: 'change' }]
       }
     }
   },
   computed: {
-    ...mapGetters(['authUserId']),
-    headers() {
-      return {
-        'X-Token': getToken()
-      }
-    },
-    action() {
-      return `${process.env.VUE_APP_UPLOAD_API}/upload/image`
-    }
-  },
-  watch: {
-    count(nVal, oVal) {
-      this.formData.imageFlag = (nVal > 0 ? 'has image' : '')
-    }
+    ...mapGetters(['authUserId'])
   },
   created() {
     this.imageId = this.$route.query.imageId || ''
+    this.editType = this.$route.query.type || 'add'
     this.initFormData()
   },
   methods: {
@@ -86,75 +62,59 @@ export default {
       const params = {
         imageId: this.imageId,
         authUserId: this.authUserId,
-        imageTitle: this.formData.imageTitle,
-        imageArr: this.imageArr
+        imageTitle: this.formData.imageTitle
       }
+      params.imageArr = this.imageList.map(image => image.response ? image.response.data : image.url)
       // 校验表单数据
       this.$refs.formRef.validate(valid => {
         if (!valid) return
         this.isLoading = true
         // 保存
-        saveImage(params).then(res => {
-          console.log(res)
-          if (res.code !== 0) return
-          this.$message.success(res.data)
-          // 如果保存文章成功就要关闭当前页面
-          this.$store.dispatch('tagsView/delView', this.$route)
-          this.$router.back()
-        }).finally(() => {
-          this.isLoading = false
-        })
+        saveImage(params)
+          .then(res => {
+            console.log(res)
+            if (res.code !== 0) return
+            this.$message.success(res.data)
+            // 如果保存文章成功就要关闭当前页面
+            this.$store.dispatch('tagsView/delView', this.$route)
+            this.$router.back()
+          })
+          .finally(() => {
+            this.isLoading = false
+          })
       })
     },
     // 初始化表单数据
     initFormData() {
-      if (!this.imageId) return
+      if (this.editType !== 'edit') return
       getImageDetail({ imageId: this.imageId }).then(res => {
-        console.log(res)
         const { imageTitle, imageList } = res.data
         this.formData.imageTitle = imageTitle
-        this.imageArr = imageList
-        this.count = imageList.length
-        for (let i = 0; i < this.count; i++) {
-          this.imageList.push({ name: '', url: imageList[i] })
-        }
-        console.log(this.imageList)
+        this.imageList = imageList.map(image => ({ url: image, name: '' }))
       })
     },
-    // 图片上传成功的回调
-    handleUploadSuccess(response, file, fileList) {
-      this.count = fileList.length
-      this.imageArr.push(response.data)
+    // 文件上传
+    handleUploadSuccess({ response, file, fileList }) {
+      this.formData.imageList = fileList.length
+      this.imageList = fileList
     },
-    // 移除图片的回调
-    handleRemove(file, fileList) {
-      const removeUrl = this.searchFileUrl(this.imageList, file)
-      const pop = this.imageArr.indexOf(removeUrl)
-      this.imageArr.splice(pop, 1)
-      this.count = fileList.length
+    handleRemove({ response, file, fileList }) {
+      this.formData.imageList = fileList.length > 0 ? fileList.length : ''
+      this.imageList = fileList
     },
     beforeUpload(file, fileList) {
       const flag = file.size <= 5 * 1024 * 1204
       if (!flag) {
-        this.$message({
-          message: '文件大小超过5MB，请重新选择！',
-          duration: 1000,
-          type: 'warning'
-        })
-        this.fileList = []
+        this.$message.warning('文件大小不能超过5MB，请重新选择！')
       }
       return flag
-    },
-    // 根据图片id获取图片
-    searchFileUrl(fileList = [], file) {
-      return fileList.filter(v => v.uid === file.uid)[0]?.url
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.form{
+.form {
   width: 700px;
   margin: 30px auto;
   .submit-btn {
@@ -165,7 +125,7 @@ export default {
     }
   }
 }
-.hiddenInput{
+.hiddenInput {
   height: 0;
   display: none;
 }

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

@@ -43,7 +43,7 @@
         v-if="userIdentity === 2 || proxyInfo!==null"
         icon="el-icon-edit"
         type="primary"
-        @click="$_navigationTo(`image-edit`)"
+        @click="$_navigationTo(`image-edit?type=add`)"
       >添加图片</el-button>
     </div>
     <!-- 搜索区域END -->
@@ -108,7 +108,7 @@
       </el-table-column>
       <el-table-column label="操作" width="240px" align="center">
         <template slot-scope="{row}">
-          <el-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-edit" @click="$_navigationTo(`image-edit?imageId=${row.imageId}`)">编辑</el-button>
+          <el-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-edit" @click="$_navigationTo(`image-edit?type=edit&imageId=${row.imageId}`)">编辑</el-button>
           <el-button type="danger" size="mini" style="margin-right:5px" icon="el-icon-s-check" @click="handleRemoveImage(row)">删除</el-button>
         </template>
       </el-table-column>