更新 上传年度框架协议

package.json

@@ -11,6 +11,7 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@cloudbase/js-sdk": "^1.7.1",
     "@element-plus/icons": "^0.0.11",
+    "@element-plus/icons-vue": "^2.3.1",
     "axios": "^0.21.1",
     "echarts": "^5.3.3",
     "element-plus": "^1.1.0-beta.24",

src/views/tenderManage/tenderClientList.vue

@@ -16,6 +16,7 @@
             上传年度框架协议
           </el-button>
           <el-button
+            v-if="scope.row.protocolViewUrl"
             size="small"
             type="default"
             @click="handleClick(scope.row, true)"
@@ -52,38 +53,52 @@
           {{ ruleForm.companyName }}
         </el-form-item>
         <el-form-item label="年度框架协议" prop="file">
-          <el-image
-            v-if="isView"
-            fit="contain"
-            :src="ruleForm.protocolViewUrl"
-            :preview-src-list="[ruleForm.protocolViewUrl]"
-            style="width: 360px"
-          ></el-image>
+          <div class="card w360" style="width: 360px">
+            <div
+              v-if="
+                ruleForm.protocolFileKey.split('.').pop().toLowerCase() ===
+                'pdf'
+              "
+              class="tac pointer fs20"
+              @click="handlePdf()"
+            >
+              查看年度框架协议
+            </div>
+            <el-image
+              v-else
+              fit="contain"
+              :src="ruleForm.protocolViewUrl"
+              :preview-src-list="[ruleForm.protocolViewUrl]"
+              style="width: 300px"
+            ></el-image>
+            <el-dialog fullscreen v-model="pdfVisible" title="查看PDF">
+              <iframe
+                style="
+                  width: 100%;
+                  height: 85vw;
+                  overflow: hidden;
+                  border: none;
+                "
+                :src="ruleForm.protocolViewUrl"
+                frameborder="0"
+              ></iframe>
+            </el-dialog>
+          </div>
           <el-upload
-            v-else
+            class="mt10"
+            v-if="!isView"
             ref="uploadRef"
-            :action="store.state.baseurl + '/tender/proxy/uploadProtocol'"
-            :auto-upload="false"
-            :data="{
-              proxyId: ruleForm.id,
-              protocolExpirDate: ruleForm.protocolExpirDate,
-              loginAccountId,
-            }"
+            :action="store.state.baseurl + '/cos/upload/cache'"
             drag
-            list-type="picture"
             :limit="1"
+            :show-fileList="false"
             :on-exceed="handleExceed"
-            :fileList="
-              ruleForm.protocolViewUrl
-                ? [{ url: ruleForm.protocolViewUrl }]
-                : []
-            "
             :on-success="handleSuccess"
             :on-error="handleError"
           >
             <i class="el-icon-upload"></i>
             <div class="el-upload__text">
-              将文件拖到此处，或
+              将文件拖到此处上传，或
               <em>点击上传</em>
             </div>
           </el-upload>
@@ -101,7 +116,9 @@
         </el-form-item>
       </el-form>
       <div class="df aic jcfe mt50" v-if="!isView">
-        <el-button type="primary" @click="onUpload()">确认上传</el-button>
+        <el-button type="primary" @click="uploadTenderProtocol()">
+          确认上传
+        </el-button>
       </div>
     </el-dialog>
   </div>
@@ -112,7 +129,12 @@ import api from "../../apis/fetch";
 import store from "../../store";
 import router from "../../router";
 import { ref, onMounted, reactive, computed } from "vue";
-import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
+import {
+  ElNotification,
+  ElMessageBox,
+  ElMessage,
+  ElLoading,
+} from "element-plus";
 import { mapGetters } from "vuex";
 import { useRoute } from "vue-router";
 
@@ -136,42 +158,72 @@ async function getTenderProxyList() {
     total.value = data.total || 0;
   }
 }
-const loginAccountId = ref(localStorage.getItem("loginAccountId"));
+
 const isView = ref(true);
 const dialogVisible = ref(false);
 const ruleFormRef = ref(null);
 const ruleForm = ref({});
 const rules = ref({});
 function handleClick(item, type) {
-  if (type && !item.protocolViewUrl) {
-    ElMessage.warning("年度框架协议未上传");
-    return;
-  }
   dialogVisible.value = true;
   isView.value = type;
   ruleForm.value = item;
 }
 
-function getProtocolList(e) {
-  console.log(e);
-}
 const uploadRef = ref(null);
-function onUpload() {
-  uploadRef.value.submit();
+async function uploadTenderProtocol() {
+  let {
+    protocolFileKey: fileKey,
+    id: proxyId,
+    protocolExpirDate,
+  } = ruleForm.value;
+  if (!fileKey) {
+    ElMessage.error("请上传协议");
+    return;
+  }
+  if (!protocolExpirDate) {
+    ElMessage.error("请选择协议到期时间");
+    return;
+  }
+  const loading = ElLoading.service({
+    lock: true,
+    text: "正在上传...",
+    spinner: "el-icon-loading",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
+  let { data } = await api.uploadTenderProtocol({
+    fileKey,
+    proxyId,
+    protocolExpirDate,
+  });
+  loading.close();
+  if (data.status === 0) {
+    ElNotification.success({
+      title: "成功",
+      message: "上传成功",
+    });
+    dialogVisible.value = false;
+    getTenderProxyList();
+  } else {
+    ElNotification.error({
+      title: "失败",
+      message: data.msg,
+    });
+  }
 }
 
-function handleExceed() {
-  ElMessage.warning("最多只能上传一个文件");
-}
+const handleExceed = (files) => {
+  console.log(files);
+  uploadRef.value.clearFiles();
+  const file = files[0];
+  uploadRef.value.handleStart(file);
+  uploadRef.value.submit();
+};
 
 function handleSuccess(e) {
   if (e.status === 0) {
-    ElNotification.success({
-      title: "成功",
-      message: e.msg,
-    });
-    dialogVisible.value = false;
-    getProtocolList();
+    ruleForm.value.protocolFileKey = e.result.key;
+    ruleForm.value.protocolViewUrl = e.result.viewUrl;
   } else {
     ElNotification.error({
       title: "失败",
@@ -187,6 +239,11 @@ function handleError(e) {
   console.log(e);
 }
 
+const pdfVisible = ref(false);
+function handlePdf() {
+  pdfVisible.value = true;
+}
+
 onMounted(() => {
   getTenderProxyList();
 });