toFix 变更协议截止日期,已选择的文件会消失

src/views/tenderManage/tenderClientList.vue

@@ -8,8 +8,20 @@
       <el-table-column label="邮箱" prop="contactEmail" />
       <el-table-column label="操作" width="300">
         <template #default="scope">
-          <el-button size="small" type="primary">上传年度框架协议</el-button>
-          <el-button size="small" type="default">查看年度框架协议</el-button>
+          <el-button
+            size="small"
+            type="primary"
+            @click="handleClick(scope.row, false)"
+          >
+            上传年度框架协议
+          </el-button>
+          <el-button
+            size="small"
+            type="default"
+            @click="handleClick(scope.row, true)"
+          >
+            查看年度框架协议
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -25,6 +37,73 @@
         @current-change="getTenderProxyList()"
       />
     </div>
+    <el-dialog
+      :title="isView ? '查看年度框架协议' : '上传年度框架协议'"
+      v-model="dialogVisible"
+      width="600px"
+    >
+      <el-form
+        ref="ruleFormRef"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="120px"
+      >
+        <el-form-item label="代理公司" prop="proxyId">
+          {{ 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>
+          <el-upload
+            v-else
+            ref="uploadRef"
+            :action="store.state.baseurl + '/tender/proxy/uploadProtocol'"
+            :auto-upload="false"
+            :data="{
+              proxyId: ruleForm.id,
+              protocolExpirDate: ruleForm.protocolExpirDate,
+              loginAccountId,
+            }"
+            drag
+            list-type="picture"
+            :limit="1"
+            :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>
+        </el-form-item>
+        <el-form-item label="协议截止日期" prop="protocolExpirDate">
+          <el-date-picker
+            :disabled="isView"
+            style="width: 360px"
+            v-model="ruleForm.protocolExpirDate"
+            type="datetime"
+            placeholder="请选择"
+            format="YYYY/MM/DD hh:mm:ss"
+            value-format="YYYY/MM/DD hh:mm:ss"
+          />
+        </el-form-item>
+      </el-form>
+      <div class="df aic jcfe mt50" v-if="!isView">
+        <el-button type="primary" @click="onUpload()">确认上传</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -33,7 +112,7 @@ import api from "../../apis/fetch";
 import store from "../../store";
 import router from "../../router";
 import { ref, onMounted, reactive, computed } from "vue";
-import { ElNotification, ElMessageBox } from "element-plus";
+import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
 import { mapGetters } from "vuex";
 import { useRoute } from "vue-router";
 
@@ -57,9 +136,64 @@ 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();
+}
+
+function handleExceed() {
+  ElMessage.warning("最多只能上传一个文件");
+}
+
+function handleSuccess(e) {
+  if (e.status === 0) {
+    ElNotification.success({
+      title: "成功",
+      message: e.msg,
+    });
+    dialogVisible.value = false;
+    getProtocolList();
+  } else {
+    ElNotification.error({
+      title: "失败",
+      message: e.msg,
+    });
+  }
+}
+function handleError(e) {
+  ElNotification.error({
+    title: "失败",
+    message: "上传失败",
+  });
+  console.log(e);
+}
+
 onMounted(() => {
   getTenderProxyList();
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+:deep().el-upload-list {
+  width: 360px;
+}
+</style>