doctor-admin-components 1.0.13-beta.4 → 1.0.13-beta.40

package/packages/src/views/biz/bizFileInfo/fileShow.vue

@@ -1,49 +1,54 @@
 <template>
   <div class="file-info" v-if="fileInfo.url">
     <div class="main">
-      <el-checkbox v-if="!this.hiddenOperation" label="" @change="handleCheck">
+      <el-checkbox v-if="!this.hiddenOperation" label="" class="checkbox-position" @change="handleCheck" v-model="checkFlag">
       </el-checkbox>
       <div class="area">
         <div class="area-info">
-          <div class="area-pdf" v-if="fileInfo.ext == '.pdf'"></div>
-          <el-image
-            style="width: 54px; height: 54px"
-            :src="fileInfo.url"
-            fit="contain"
-            :preview-src-list="[fileInfo.url]"
-            v-else-if="isImage(fileInfo.ext)"
-          ></el-image>
+          <div class="area-pdf" v-if="isPdf(fileInfo.url)"></div>
+          <el-image style="width: 38px; height: 46px" :src="fileInfo.url" fit="contain" :preview-src-list="[fileInfo.url]" v-else-if="isImage(fileInfo.url)"></el-image>
           <div class="area-file" v-else></div>
-          <el-button
-            type="text"
-            size="mini"
-            class="ml5"
-            @click="openFile(fileInfo.url)"
-            >{{ $t("contractDetail.preview") }}</el-button
-          >
-          <el-button type="text" size="mini" @click="handleDownload">
-            {{ $t("contractDetail.download") }}
-          </el-button>
-        </div>
-        <div v-if="!this.hiddenOperation">
-          <el-dropdown trigger="click" @command="handleCommand">
-            <span class="el-dropdown-link">
+          <div>
+          <div> {{ fileInfo.fileName }}</div>
+          <div class="preview-download-root">
+            <div
+              type="text"
+              size="mini"
+              class="preview-download"
+              @click="openFile(fileInfo.url)"
+              >{{ $t("contractDetail.preview") }}</div
+            >
+            <div  class="preview-download" type="text" size="mini" @click="handleDownload">
+              {{ $t("contractDetail.download") }}
+            </div>
+            <div v-if="!this.hiddenOperation">
+              <el-dropdown trigger="click" @command="handleCommand">
+                <span class="el-dropdown-link">
+                  <div class="more-icon"></div>
+                </span>
+                
+                <el-dropdown-menu slot="dropdown" v-if="type == 'signContract'" >
+                  <el-dropdown-item command="signContract">
+                    撤回回签
+                  </el-dropdown-item>
+                  <el-dropdown-item command="rename">重命名</el-dropdown-item>
+                </el-dropdown-menu>
+                <el-dropdown-menu slot="dropdown" v-else >
+                  <el-dropdown-item command="delete">{{
+                    $t("contractDetail.delete")
+                  }}</el-dropdown-item>
+                  <el-dropdown-item command="rename">重命名</el-dropdown-item>
+                  <!-- <el-dropdown-item command="deleteAndUpload">
+                    {{ $t("contractDetail.deleteAndUpload") }}
+                  </el-dropdown-item> -->
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <div v-else  style="width:120px;word-break:break-all">
               {{ fileInfo.fileName }}
-              <i class="el-icon-arrow-down el-icon--right"></i>
-            </span>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="delete">{{
-                $t("contractDetail.delete")
-              }}</el-dropdown-item>
-              <el-dropdown-item command="rename">重命名</el-dropdown-item>
-              <el-dropdown-item command="deleteAndUpload">
-                {{ $t("contractDetail.deleteAndUpload") }}
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </div>
-        <div v-else  style="width:120px;word-break:break-all">
-          {{ fileInfo.fileName }}
+            </div>
+          </div>
+          </div>
         </div>
       </div>
     </div>
@@ -56,86 +61,87 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">{{
-          $t("button.confirm")
-        }}</el-button>
-        <el-button @click="cancel">{{ $t("button.cancel") }}</el-button>
+        <el-button type="primary" @click="submitForm">{{ $t('button.confirm') }}</el-button>
+        <el-button @click="cancel">{{ $t('button.cancel') }}</el-button>
       </div>
     </el-dialog>
 
     <!-- 上传文件信息对话框 -->
-    <el-dialog
-      :title="title"
-      :visible.sync="uploadOpen"
-      width="550px"
-      append-to-body
-    >
+    <el-dialog :title="title" :visible.sync="uploadOpen" width="550px" append-to-body>
       <el-form ref="form" :model="uploadForm" label-width="100px">
         <file-upload v-model="uploadForm.fileInfoList"> </file-upload>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitUploadForm">{{
-          $t("button.confirm")
-        }}</el-button>
-        <el-button @click="cancel">{{ $t("button.cancel") }}</el-button>
+        <el-button type="primary" @click="submitUploadForm">{{ $t('button.confirm') }}</el-button>
+        <el-button @click="cancel">{{ $t('button.cancel') }}</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 <script>
-import { downloadFile } from "../../../utils/request";
-import {
-  getBizFileInfo,
-  delBizFileInfo,
-  addBizFileInfo,
-  updateBizFileInfo,
-} from "../../../api/biz/bizFileInfo";
+import { downloadFile } from '../../../utils/request'
+import { getBizFileInfo, delBizFileInfo, addBizFileInfo, updateBizFileInfo } from '../../../api/biz/bizFileInfo'
+import { isImage, isPdf } from '../../../utils/index';
+
 export default {
-  name: "FileShow",
+  name: 'FileShow',
   props: {
     // 文件信息
     fileInfo: {
       type: Object,
       default: () => {
         return {
-          url: "",
-          fileName: "",
-          ext: "",
-        };
-      },
+          url: '',
+          fileName: '',
+          ext: ''
+        }
+      }
+    },
+    selectFileListProp: {
+      type: Array,
+      default: () => {
+        return []
+      }
     },
     //是否隐藏操作
     hiddenOperation: {
       type: Boolean,
       default: false,
     },
+    type: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
+      isImage,
+      isPdf,
       checkedIds: [],
       //是否显示上传弹出层
       uploadOpen: false,
       // 是否显示弹出层
       open: false,
       // 弹出层标题
-      title: "",
+      title: '',
       // 表单参数
       form: {},
       //上传表单
       uploadForm: {},
-    };
-  },
+      checkFlag: false
+    }
+  },  
   computed: {
     fileId() {
-      return this.fileInfo.fileId;
-    },
+      return this.fileInfo.fileId
+    }
   },
   methods: {
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.uploadOpen = false;
-      this.reset();
+      this.open = false
+      this.uploadOpen = false
+      this.reset()
     },
     // 表单重置
     reset() {
@@ -147,8 +153,8 @@ export default {
         fileType: null,
         url: null,
         createTime: null,
-        ext: null,
-      };
+        ext: null
+      }
       this.uploadForm = {
         fileId: null,
         linkId: null,
@@ -158,81 +164,81 @@ export default {
         url: null,
         createTime: null,
         ext: null,
-        fileInfoList: [],
-      };
-      this.resetForm("form");
+        fileInfoList: []
+      }
+      this.resetForm('form')
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate((valid) => {
+      this.$refs['form'].validate((valid) => {
         if (valid) {
           if (this.form.fileId != null) {
             updateBizFileInfo(this.form).then((response) => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.$emit("refresh");
-            });
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.$emit('refresh')
+            })
           } else {
             addBizFileInfo(this.form).then((response) => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.$emit("refresh");
-            });
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.$emit('refresh')
+            })
           }
         }
-      });
+      })
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
-      const fileId = row.fileId || this.ids;
+      this.reset()
+      const fileId = row.fileId || this.ids
       getBizFileInfo(fileId).then((response) => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改文件信息";
-      });
+        this.form = response.data
+        this.open = true
+        this.title = '修改文件信息'
+      })
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const fileIds = row.fileId || this.ids;
+      const fileIds = row.fileId || this.ids
       this.$modal
-        .confirm("是否确认删除该文件？")
+        .confirm('是否确认删除该文件？')
         .then(function () {
-          return delBizFileInfo(fileIds);
+          return delBizFileInfo(fileIds)
         })
         .then(() => {
-          this.$emit("refresh");
-          this.$modal.msgSuccess("删除成功");
+          this.$emit('refresh')
+          this.$modal.msgSuccess('删除成功')
         })
-        .catch(() => {});
+        .catch(() => {})
     },
     submitUploadForm() {
-      console.log(this.uploadForm);
+      console.log(this.uploadForm)
       addBizFileInfo(this.uploadForm).then((response) => {
-        this.$modal.msgSuccess("上传成功");
-        this.uploadOpen = false;
-        this.$emit("refresh");
-      });
+        this.$modal.msgSuccess('上传成功')
+        this.uploadOpen = false
+        this.$emit('refresh')
+      })
     },
     handleDeleteAndUpload(row) {
-      const fileId = row.fileId;
+      const fileId = row.fileId
       this.$modal
-        .confirm("是否确认删除该文件并重新上传？")
+        .confirm('是否确认删除该文件并重新上传？')
         .then(function () {
-          return delBizFileInfo(fileId);
+          return delBizFileInfo(fileId)
         })
         .then(() => {
-          this.$modal.msgSuccess("删除成功");
-          this.reset();
-          this.uploadOpen = true;
+          this.$modal.msgSuccess('删除成功')
+          this.reset()
+          this.uploadOpen = true
           this.uploadForm = {
             linkId: row.linkId,
             linkType: row.linkType,
-            fileType: row.fileType,
-          };
-          this.title = "上传文件";
+            fileType: row.fileType
+          }
+          this.title = '上传文件'
         })
-        .catch(() => {});
+        .catch(() => {})
     },
     handleCommand(command) {
       switch (command) {
@@ -242,41 +248,57 @@ export default {
         case "rename":
           this.handleUpdate(this.fileInfo);
           break;
+        case "signContract":
+          this.$emit("signContract", this.fileInfo);
+          break;
         case "deleteAndUpload":
           this.handleDeleteAndUpload(this.fileInfo);
           break;
         default:
-          break;
+          break
       }
     },
-    isImage(ext) {
-      return [".jpg", ".jpeg", ".png", ".gif"].includes(ext);
-    },
     /** 下载文件 */
     handleDownload() {
       // this.download(this.fileInfo.url, {}, this.fileInfo.fileName);
-      downloadFile(this.fileInfo.url, this.fileInfo.fileName);
+      downloadFile(this.fileInfo.url, this.fileInfo.fileName)
     },
     openFile(url) {
-      window.open(url);
+      window.open(url)
     },
     handleCheck(val) {
       if (val) {
-        this.$emit("checked", this.fileInfo);
+        this.$emit('checked', this.fileInfo)
+        this.checkFlag = true
       } else {
-        this.$emit("uncheck", this.fileInfo.fileId);
+        this.$emit('uncheck', this.fileInfo.fileId)
+        this.checkFlag = false
       }
-    },
+    }
   },
-};
+  watch: {
+    selectFileListProp: {
+      handler(val) {
+        if(val == 0) {
+          this.checkFlag = false
+        }
+      },
+      immediate: true,
+      deep: true 
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .file-info {
-  width: 160px;
+  min-width: 450px;
   display: flex;
   // border: 1px solid red;
   .main {
     display: flex;
+    .checkbox-position {
+      margin-top: 10px;
+    }
     .area {
       margin-left: 5px;
       width: 100%;
@@ -287,15 +309,42 @@ export default {
         .area-pdf {
           width: 38px;
           height: 46px;
-          background: url("../../../assets/images/pdf.png") no-repeat center;
+          background: url("../../../assets/images/pdf-new.png") no-repeat center;
           background-size: contain;
         }
         .area-file {
           width: 38px;
           height: 46px;
-          background: url("../../../assets/images/file.png") no-repeat center;
+          background: url('../../../assets/images/file.png') no-repeat center;
+          background-size: contain;
+        }
+        .more-icon {
+          margin-left:10px;
+          cursor: pointer;
+          width: 20px;
+          height: 20px;
+          background: url("../../../assets/images/more.png") no-repeat center;
           background-size: contain;
         }
+        .preview-download-root {
+          display:flex;
+          margin-top:5px;
+          
+          .preview-download {
+            cursor: pointer;
+            margin-left:8px;
+            min-width: 45px;
+            width:max-content;
+            padding: 0 10px;
+            height: 21px;
+            text-align: center;
+            line-height: 17px;
+            background: #FFFFFF;
+            border-radius: 11px;
+            font-size:12px;
+            border: 2px solid #D1D3D4;
+          } 
+        }
       }
     }
     .filename {
@@ -307,8 +356,7 @@ export default {
       word-wrap: break-word;
     }
   }
-  ::v-deep .el-dropdown {
-  }
+
   .el-dropdown-link {
     cursor: pointer;
     color: #409eff;

package/packages/src/views/biz/bizFileInfo/fileShowClaim.vue

@@ -269,7 +269,7 @@ export default {
         .area-pdf {
           width: 38px;
           height: 46px;
-          background-image: url("../../../assets/images/pdf.png") no-repeat
+          background-image: url("../../../assets/images/pdf-new.png") no-repeat
             center;
           background-size: contain;
         }