店铺管理支持上传PDF、图片、word文档

src/views/hisStore/store/index.vue

@@ -677,23 +677,54 @@
           <el-divider content-position="left">签署协议与特殊资质信息</el-divider>
           <el-row>
             <el-col :span="12">
-              <el-form-item label="其它资质-入驻协议">
+              <el-input v-model="form.titleNameOne" placeholder="请输入标题" />
+<!--              <el-form-item label="其它资质-入驻协议">回退代码-->
                 <el-upload
-                  class="avatar-uploader"
+                  class="file-uploader"
                   :action="uploadUrl"
                   :show-file-list="false"
-                  :on-success="(response, file) => handleFileSuccess(response, file, 'settlementAgreement')"
-                  :before-upload="beforeAvatarUpload">
-                  <img v-if="form.settlementAgreement" :src="form.settlementAgreement" class="avatar" width="100px" />
-                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                :on-success="(response, file) => handleFileSuccess1(response, file, 'settlementAgreement')"
+                :on-error="handleFileError"
+                :before-upload="beforeFileUpload"
+                :disabled="!!form.settlementAgreement"
+                accept=".jpg,.jpeg,.png,.gif,.doc,.docx,.pdf"
+                >
+                <!-- 已上传文件展示（区分图片和文档） -->
+                <div v-if="form.settlementAgreement" class="uploaded-file">
+                  <!-- 图片文件显示预览图 -->
+                  <img v-if="isImageFile(form.settlementAgreement, 'settlementAgreement')" :src="form.settlementAgreement" class="uploaded-img" width="100px" />
+                  <div v-else class="document-icon">
+                    <i :class="getDocumentIconClass(form.settlementAgreement, 'settlementAgreement')" class="icon"></i>
+                    <span class="file-name">{{ form.settlementAgreementFileName || getFileName(form.settlementAgreement) }}</span>
+                  </div>
+                  <!-- 删除按钮 -->
+                  <i class="el-icon-delete delete-icon" @click.stop="handleFileRemove('settlementAgreement')"></i>
+                </div>
+                <!-- 未上传时的上传按钮 -->
+                  <div v-else class="upload-btn">
+                    <div class="upload-btn-inner">
+                      <i class="el-icon-plus"></i>
+                      <span class="upload-tip">点击上传</span>
+                    </div>
+                  </div>
                 </el-upload>
-              </el-form-item>
-              <el-form-item label="其它资质-入驻协议编号" prop="settlementAgreementCode" style="margin-left: 5px">
-                <el-input v-model="form.settlementAgreementCode" placeholder="请输入其它资质-入驻协议编号" />
+
+              <el-form-item label="备注内容" prop="settlementAgreementCode" style="margin-left: 5px">
+                <el-input v-model="form.settlementAgreementCode" placeholder="请输入备注内容" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="其它资质-入驻协议有效期">
+                             <!--  其它资质-入驻协议是否长期有效-->
+              <el-form-item label="协议是否长期有效" prop="isEffectivePermanent1">
+                <el-switch
+                  @change="switchChange()"
+                  v-model="medicalLicenseExpiryValue1"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949">
+                </el-switch>
+              </el-form-item>
+                              <!--其它资质-入驻协议有效期-->
+              <el-form-item label="协议有效期"  prop="medicalLicenseExpiry" v-if="!medicalLicenseExpiryValue1">
                 <el-date-picker
                   v-model="form.settlementAgreementExpiry"
                   type="daterange"
@@ -706,24 +737,56 @@
             </el-col>
           </el-row>
           <el-row>
+
             <el-col :span="12">
-              <el-form-item label="质量保证协议">
-                <el-upload
-                  class="avatar-uploader"
-                  :action="uploadUrl"
-                  :show-file-list="false"
-                  :on-success="(response, file) => handleFileSuccess(response, file, 'qualityAssuranceAgreement')"
-                  :before-upload="beforeAvatarUpload">
-                  <img v-if="form.qualityAssuranceAgreement" :src="form.qualityAssuranceAgreement" class="avatar" width="100px">
-                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                </el-upload>
-              </el-form-item>
-              <el-form-item label="质量保证协议编号" prop="qualityAssuranceAgreementCode" style="margin-left: 5px">
-                <el-input v-model="form.qualityAssuranceAgreementCode" placeholder="请输入质量保证协议编号" />
+              <el-input v-model="form.titleNameTwo" placeholder="请输入标题" />
+              <!--              <el-form-item label="质量保证协议">-->
+              <el-upload
+                class="file-uploader"
+                :action="uploadUrl"
+                :show-file-list="false"
+                :on-success="(response, file) => handleFileSuccess1(response, file, 'qualityAssuranceAgreement')"
+                :on-error="handleFileError"
+                :before-upload="beforeFileUpload"
+                :disabled="!!form.qualityAssuranceAgreement"
+                accept=".jpg,.jpeg,.png,.gif,.doc,.docx,.pdf"
+              >
+                <!-- 已上传文件展示（区分图片和文档） -->
+                <div v-if="form.qualityAssuranceAgreement" class="uploaded-file">
+                  <!-- 图片文件显示预览图 -->
+                  <img v-if="isImageFile(form.qualityAssuranceAgreement, 'qualityAssuranceAgreement')" :src="form.qualityAssuranceAgreement" class="uploaded-img" width="100px" />
+                  <div v-else class="document-icon">
+                    <i :class="getDocumentIconClass(form.qualityAssuranceAgreement, 'qualityAssuranceAgreement')" class="icon"></i>
+                    <span class="file-name">{{ form.qualityAssuranceAgreementFileName || getFileName(form.qualityAssuranceAgreement) }}</span>
+                  </div>
+                  <!-- 删除按钮 -->
+                  <i class="el-icon-delete delete-icon" @click.stop="handleFileRemove('qualityAssuranceAgreement')"></i>
+                </div>
+                <!-- 未上传时的上传按钮 -->
+                <div v-else class="upload-btn">
+                  <div class="upload-btn-inner">
+                    <i class="el-icon-plus"></i>
+                    <span class="upload-tip">点击上传</span>
+                  </div>
+                </div>
+              </el-upload>
+
+              <el-form-item label="备注内容" prop="qualityAssuranceAgreementCode" style="margin-left: 5px">
+                <el-input v-model="form.qualityAssuranceAgreementCode" placeholder="请输入备注内容" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="质量保证协议有效期">
+              <!--  质量保证协议是否长期有效-->
+              <el-form-item label="协议是否长期有效" prop="isEffectivePermanent2">
+                <el-switch
+                  @change="switchChange()"
+                  v-model="medicalLicenseExpiryValue2"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949">
+                </el-switch>
+              </el-form-item>
+              <!--质量保证协议有效期-->
+              <el-form-item label="协议有效期"  prop="medicalLicenseExpiry" v-if="!medicalLicenseExpiryValue2">
                 <el-date-picker
                   v-model="form.qualityAssuranceAgreementExpiry"
                   type="daterange"
@@ -734,26 +797,91 @@
                 </el-date-picker>
               </el-form-item>
             </el-col>
+
           </el-row>
+<!--          <el-row>-->
+<!--            <el-col :span="12">-->
+<!--              <el-form-item label="质量保证协议">-->
+<!--                <el-upload-->
+<!--                  class="avatar-uploader"-->
+<!--                  :action="uploadUrl"-->
+<!--                  :show-file-list="false"-->
+<!--                  :on-success="(response, file) => handleFileSuccess(response, file, 'qualityAssuranceAgreement')"-->
+<!--                  :before-upload="beforeAvatarUpload">-->
+<!--                  <img v-if="form.qualityAssuranceAgreement" :src="form.qualityAssuranceAgreement" class="avatar" width="100px">-->
+<!--                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
+<!--                </el-upload>-->
+<!--              </el-form-item>-->
+<!--              <el-form-item label="质量保证协议编号" prop="qualityAssuranceAgreementCode" style="margin-left: 5px">-->
+<!--                <el-input v-model="form.qualityAssuranceAgreementCode" placeholder="请输入质量保证协议编号" />-->
+<!--              </el-form-item>-->
+<!--            </el-col>-->
+<!--            <el-col :span="12">-->
+<!--              <el-form-item label="质量保证协议有效期">-->
+<!--                <el-date-picker-->
+<!--                  v-model="form.qualityAssuranceAgreementExpiry"-->
+<!--                  type="daterange"-->
+<!--                  value-format="yyyy-MM-dd"-->
+<!--                  range-separator="至"-->
+<!--                  start-placeholder="开始日期"-->
+<!--                  end-placeholder="结束日期">-->
+<!--                </el-date-picker>-->
+<!--              </el-form-item>-->
+<!--            </el-col>-->
+<!--          </el-row>-->
           <el-row>
+
+
             <el-col :span="12">
-              <el-form-item label="其它特殊资质">
-                <el-upload
-                  class="avatar-uploader"
-                  :action="uploadUrl"
-                  :show-file-list="false"
-                  :on-success="(response, file) => handleFileSuccess(response, file, 'otherSpecialQualification')"
-                  :before-upload="beforeAvatarUpload">
-                  <img v-if="form.otherSpecialQualification" :src="form.otherSpecialQualification" class="avatar" width="100px">
-                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                </el-upload>
-              </el-form-item>
-              <el-form-item label="其它特殊资质编号" prop="otherSpecialQualificationCode" style="margin-left: 5px">
-                <el-input v-model="form.otherSpecialQualificationCode" placeholder="请输入其它特殊资质编号" />
+              <el-input v-model="form.titleNameThree" placeholder="请输入标题" />
+              <!--              <el-form-item label="其它资质-入驻协议">-->
+              <el-upload
+                class="file-uploader"
+                :action="uploadUrl"
+                :show-file-list="false"
+                :on-success="(response, file) => handleFileSuccess1(response, file, 'otherSpecialQualification')"
+                :on-error="handleFileError"
+                :before-upload="beforeFileUpload"
+                :disabled="!!form.otherSpecialQualification"
+                accept=".jpg,.jpeg,.png,.gif,.doc,.docx,.pdf"
+              >
+                <!-- 已上传文件展示（区分图片和文档） -->
+                <div v-if="form.otherSpecialQualification" class="uploaded-file">
+                  <!-- 图片文件显示预览图 -->
+                  <img v-if="isImageFile(form.otherSpecialQualification, 'otherSpecialQualification')" :src="form.otherSpecialQualification" class="uploaded-img" width="100px" />
+                  <div v-else class="document-icon">
+                    <i :class="getDocumentIconClass(form.otherSpecialQualification, 'otherSpecialQualification')" class="icon"></i>
+                    <span class="file-name">{{ form.otherSpecialQualificationFileName || getFileName(form.otherSpecialQualification) }}</span>
+                  </div>
+                  <!-- 删除按钮 -->
+
+                  <i class="el-icon-delete delete-icon" @click.stop="handleFileRemove('otherSpecialQualification')"></i>
+                </div>
+                <!-- 未上传时的上传按钮 -->
+                <div v-else class="upload-btn">
+                  <div class="upload-btn-inner">
+                    <i class="el-icon-plus"></i>
+                    <span class="upload-tip">点击上传</span>
+                  </div>
+                </div>
+              </el-upload>
+
+              <el-form-item label="备注内容" prop="otherSpecialQualificationCode" style="margin-left: 5px">
+                <el-input v-model="form.otherSpecialQualificationCode" placeholder="请输入备注内容" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="其它特殊资质有效期">
+              <!--  其它资质-入驻协议是否长期有效-->
+              <el-form-item label="协议是否长期有效" prop="isEffectivePermanent3">
+                <el-switch
+                  @change="switchChange()"
+                  v-model="medicalLicenseExpiryValue3"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949">
+                </el-switch>
+              </el-form-item>
+              <!--质量保证协议有效期-->
+              <el-form-item label="协议有效期"  prop="medicalLicenseExpiry" v-if="!medicalLicenseExpiryValue3">
                 <el-date-picker
                   v-model="form.otherSpecialQualificationExpiry"
                   type="daterange"
@@ -764,7 +892,39 @@
                 </el-date-picker>
               </el-form-item>
             </el-col>
+
+
           </el-row>
+<!--          <el-row>-->
+<!--            <el-col :span="12">-->
+<!--              <el-form-item label="其它特殊资质">-->
+<!--                <el-upload-->
+<!--                  class="avatar-uploader"-->
+<!--                  :action="uploadUrl"-->
+<!--                  :show-file-list="false"-->
+<!--                  :on-success="(response, file) => handleFileSuccess(response, file, 'otherSpecialQualification')"-->
+<!--                  :before-upload="beforeAvatarUpload">-->
+<!--                  <img v-if="form.otherSpecialQualification" :src="form.otherSpecialQualification" class="avatar" width="100px">-->
+<!--                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
+<!--                </el-upload>-->
+<!--              </el-form-item>-->
+<!--              <el-form-item label="其它特殊资质编号" prop="otherSpecialQualificationCode" style="margin-left: 5px">-->
+<!--                <el-input v-model="form.otherSpecialQualificationCode" placeholder="请输入其它特殊资质编号" />-->
+<!--              </el-form-item>-->
+<!--            </el-col>-->
+<!--            <el-col :span="12">-->
+<!--              <el-form-item label="其它特殊资质有效期">-->
+<!--                <el-date-picker-->
+<!--                  v-model="form.otherSpecialQualificationExpiry"-->
+<!--                  type="daterange"-->
+<!--                  value-format="yyyy-MM-dd"-->
+<!--                  range-separator="至"-->
+<!--                  start-placeholder="开始日期"-->
+<!--                  end-placeholder="结束日期">-->
+<!--                </el-date-picker>-->
+<!--              </el-form-item>-->
+<!--            </el-col>-->
+<!--          </el-row>-->
         </div>
         <el-divider content-position="left">店铺配置信息</el-divider>
         <el-form-item label="退货地址" prop="refundAddress">
@@ -891,6 +1051,9 @@ export default {
       medicalDevice3ExpiryValue:false,
       foodLicenseExpiryValue:false,
       medicalLicenseExpiryValue:false,
+      medicalLicenseExpiryValue1:false,//协议有效期控制
+      medicalLicenseExpiryValue2:false,//协议有效期控制
+      medicalLicenseExpiryValue3:false,//协议有效期控制
       show: {
         title: "店铺详情",
         open: false,
@@ -948,7 +1111,18 @@ export default {
         account: null,
       },
       // 表单参数
-      form: {},
+      form: {
+        settlementAgreementFileType: '', // 入驻协议文件类型（如 application/pdf）
+        qualityAssuranceAgreementFileType: '', // 质量保证协议文件类型
+        otherSpecialQualificationFileType: '', // 其他特殊资质文件类型
+        settlementAgreement: null,
+        settlementAgreementFileName: null, // 新增：存储文件名
+        qualityAssuranceAgreement: null,
+        qualityAssuranceAgreementFileName: null, // 新增：存储文件名
+        otherSpecialQualification: null,
+        otherSpecialQualificationFileName: null // 新增：存储文件名
+
+      },
       // 表单校验
       rules: {
         storeName: [
@@ -1244,6 +1418,9 @@ export default {
         medicalLicense: null,  // 医疗机构执业许可证文件
         medicalLicenseExpiry: null, // 医疗机构执业许可证有效期
         settlementAgreement: null,  //其它资质-入驻协议
+        settlementAgreementFileName: null,
+        qualityAssuranceAgreementFileName: null, // 新增：质量保证协议文件名
+        otherSpecialQualificationFileName: null,// 新增：其他特殊资质文件名
         settlementAgreementExpiry: null,//其它资质-有效期
         qualityAssuranceAgreement: null,//质量保证协议
         qualityAssuranceAgreementExpiry: null,//质量保证协议有效期
@@ -1259,6 +1436,13 @@ export default {
         otherSpecialQualificationCode:null,
         qualityAssuranceAgreementCode:null,
         settlementAgreementCode: null,
+        titleNameOne: null,
+        titleNameTwo: null,
+        titleNameThree: null,
+
+        settlementAgreementFileType: '',
+        qualityAssuranceAgreementFileType: '',
+        otherSpecialQualificationFileType: ''
       };
       this.resetForm("form");
     },
@@ -1441,6 +1625,15 @@ export default {
         if(this.form.isMedicalLicenseExpiryPermanent == 1){
           this.medicalLicenseExpiryValue = true;
         }
+        if(this.form.isEffectivePermanent1 == 1){
+          this.medicalLicenseExpiryValue1 = true;
+        }
+        if(this.form.isEffectivePermanent2 == 1){
+          this.medicalLicenseExpiryValue2 = true;
+        }
+        if(this.form.isEffectivePermanent3 == 1){
+          this.medicalLicenseExpiryValue3 = true;
+        }
         this.open = true;
         this.title = "修改店铺";
 
@@ -1603,6 +1796,21 @@ export default {
           }else {
             formData.isMedicalLicenseExpiryPermanent=0;
           }
+          if(!!this.medicalLicenseExpiryValue1){
+            formData.isEffectivePermanent1=1;
+          }else {
+            formData.isEffectivePermanent1=0;
+          }
+          if(!!this.medicalLicenseExpiryValue2){
+            formData.isEffectivePermanent2=1;
+          }else {
+            formData.isEffectivePermanent2=0;
+          }
+          if(!!this.medicalLicenseExpiryValue3){
+            formData.isEffectivePermanent3=1;
+          }else {
+            formData.isEffectivePermanent3=0;
+          }
           if (formData.storeId != null) {
             updateStore(formData).then(response => {
               this.msgSuccess("修改成功");
@@ -1679,11 +1887,216 @@ export default {
     switchChange(){
       console.log(this.form.isBusinessLicensePermanent);
     },
+    // 判断是否为图片文件（根据URL后缀）
+    isImageFile(url, field) {
+      // 若有存储的文件类型，直接用 MIME 类型判断
+      if (this.form[`${field}FileType`]) {
+        return this.form[`${field}FileType`].startsWith('image/');
+      }
+      // 后备：用 URL 后缀判断
+      const imageExts = ['jpg', 'jpeg', 'png', 'gif'];
+      const ext = url.split('.').pop()?.toLowerCase() || '';
+      return imageExts.includes(ext);
+    },
+
+// 根据文件类型获取文档图标（优先用 MIME 类型）
+    getDocumentIconClass(url, field) {
+      // 若有存储的文件类型，直接用 MIME 类型判断
+      if (this.form[`${field}FileType`]) {
+        const fileType = this.form[`${field}FileType`];
+        if (fileType === 'application/msword' || fileType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
+          return 'el-icon-document';
+        } else if (fileType === 'application/pdf') {
+          return 'el-icon-file-pdf';
+        }
+        return 'el-icon-file';
+      }
+      // 后备：用 URL 后缀判断
+      const ext = url.split('.').pop()?.toLowerCase() || '';
+      if (ext === 'doc' || ext === 'docx') {
+        return 'el-icon-document';
+      } else if (ext === 'pdf') {
+        return 'el-icon-file-pdf';
+      }
+      return 'el-icon-file';
+    },
+
+    // /// 从URL中提取文件名代码回退
+    getFileName(url) {
+      return url.split('/').pop().split('?')[0].slice(-8);
+    },
+
+    // 文件上传前校验
+    beforeFileUpload(file) {
+      // 校验文件类型
+      const acceptTypes = [
+        'image/jpeg',
+        'image/png',
+        'image/gif',
+        'application/msword',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        'application/pdf'
+      ];
+      if (!acceptTypes.includes(file.type)) {
+        this.$message.error('请上传JPG、PNG、GIF、Word或PDF格式的文件');
+        return false;
+      }
+
+      // 2. 校验文件大小（10MB）
+      const maxSize = 10 * 1024 * 1024; // 10MB
+      if (file.size > maxSize) {
+        this.$message.error('文件大小不能超过10MB');
+        return false;
+      }
+
+      return true;
+    },
+
+    // 文件上传成功处理（复用原有逻辑，仅优化提示）
+    handleFileSuccess1(response, file, field) {
+      this.form[field] = response.url;
+      this.form[`${field}FileName`] = file.name;
+      this.form[`${field}FileType`] = file.type; // 新增：记录文件 MIME 类型
+      this.$message.success(`文件：${file.name}上传成功`);
+    },
+
+    // 文件上传失败处理
+    handleFileError(err, file) {
+      this.$message.error(`文件《${file.name}》上传失败，请重试`);
+    },
+
+    // 移除已上传文件
+    handleFileRemove(field) {
+      this.form[field] = '';
+      this.form[`${field}FileName`] = ''; // 清空文件名
+      this.$message.info('文件已移除');
+    },
   }
 };
 </script>
 <style>
+.file-uploader {
+  display: inline-block;
+}
+
+/* 已上传文件容器 */
+.uploaded-file {
+  position: relative;
+  display: inline-block;
+  cursor: default;
+}
+
+/* 已上传图片样式 */
+.uploaded-img {
+  width: 150px;
+  height: 150px;
+  border-radius: 4px;
+  border: 1px solid #e4e7ed;
+  vertical-align: middle;
+}
+
+/* 文档图标容器 */
+/* 文档图标容器 */
+.document-icon {
+  width: 150px;
+  height: 150px;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f7fa;
+  vertical-align: middle;
+}
+
+.document-icon .icon {
+  font-size: 36px;
+  color: #409eff;
+  margin-bottom: 8px;
+  font-family: "element-icons" !important; /* 强制使用 Element 图标字体 */
+  display: inline-block; /* 确保图标正常渲染 */
+  speak: none; /* 消除语音朗读干扰 */
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: baseline;
+  -webkit-font-smoothing: antialiased; /* 优化渲染 */
+}
+
+.document-icon .file-name {
+  font-size: 12px;
+  color: #606266;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 80%;
+  text-align: center;
+}
+
+/* 删除图标 */
+.delete-icon {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  background-color: #f56c6c;
+  color: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 12px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+/* 上传按钮（外层正方形边框） */
+.upload-btn {
+  width: 150px;
+  height: 150px;
+  /* 正方形边框 - 实线边框，默认灰色 */
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+/* 上传按钮 hover 效果（边框变色） */
+.upload-btn:hover {
+  border-color: #409eff;
+  background-color: #f0f7ff; /* 轻微背景色变化，增强交互感 */
+}
 
+/* 上传按钮内部内容容器 */
+.upload-btn-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #c0c4cc;
+}
+
+.upload-btn-inner i {
+  font-size: 28px;
+  margin-bottom: 8px;
+}
+
+.upload-btn-inner .upload-tip {
+  font-size: 12px;
+}
+
+/* 上传说明 */
+.upload-desc {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #909399;
+}
 .avatar-uploader .el-upload {
   border: 1px dashed #d9d9d9;
   border-radius: 6px;