Ver código fonte

修改 上传资质预览等

hurx 2 semanas atrás
pai
commit
5d997af18f

+ 6 - 0
src/views/bill/statementInvoice/addInvoiceDialog.vue

@@ -174,6 +174,12 @@ const beforeUpload = (file: any) => {
 
 function handleUploadSuccess(response: any, file: any, fileListParam: any[]) {
   if (response.code === 200) {
+    // 为每个上传成功的文件设置 url 属性
+    fileListParam.forEach((f: any) => {
+      if (f.response?.code === 200 && f.response?.data?.url) {
+        f.url = f.response.data.url;
+      }
+    });
     // 更新 fileList
     fileList.value = fileListParam;
     // 收集所有已上传成功的文件URL

+ 2 - 2
src/views/order/orderAssignment/splitAssignDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 订单分配详情抽屉 -->
-  <el-drawer v-model="drawer.visible" size="65%" direction="rtl" :close-on-click-modal="true" :before-close="handleDrawerClose">
+  <el-drawer v-model="drawer.visible" size="70%" direction="rtl" :close-on-click-modal="true" :before-close="handleDrawerClose">
     <template #header>
       <div class="drawer-header">
         <!-- <el-icon color="#f56c6c" :size="24"><WarningFilled /></el-icon> -->
@@ -160,7 +160,7 @@
   </el-drawer>
 
   <!-- 分配抽屉 -->
-  <el-drawer v-model="assignDialog.visible" title="分配" size="50%" direction="rtl" :close-on-click-modal="true">
+  <el-drawer v-model="assignDialog.visible" title="分配" size="60%" direction="rtl" :close-on-click-modal="true">
     <div class="assign-drawer-content">
       <!-- 分配目标选择 -->
       <div class="assign-target-section">

+ 13 - 3
src/views/order/saleOrder/orderAffirm.vue

@@ -261,14 +261,16 @@ import { getCompany } from '@/api/company/company';
 import { getWarehouse } from '@/api/company/warehouse';
 import { getCustomerInfo } from '@/api/customer/customerFile/customerInfo';
 import { getDept } from '@/api/system/dept';
+import { useRoute, useRouter } from 'vue-router';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { pay_method, fee_type } = toRefs<any>(proxy?.useDict('pay_method', 'fee_type'));
-const router = useRouter();
 
 const buttonLoading = ref(false);
 const loading = ref(true);
-
+// 获取路由和 router 实例
+const route = useRoute();
+const router = useRouter();
 // 订单信息
 const orderInfo = ref<any>({});
 // 收货地址信息
@@ -505,7 +507,6 @@ const goBack = () => {
 
 // 页面加载时获取订单ID并加载订单详情
 onMounted(() => {
-  const route = useRoute();
   const orderId = route.query.id;
   if (orderId) {
     getOrderDetail(orderId as string);
@@ -514,6 +515,15 @@ onMounted(() => {
     router.back();
   }
 });
+// 监听路由 query 中的 id 变化
+watch(
+  () => route.query.id, // 监听 id 的变化
+  (newOrderId) => {
+    if (newOrderId) {
+      getOrderDetail(newOrderId as string);
+    }
+  }
+);
 </script>
 
 <style scoped lang="scss">

+ 91 - 11
src/views/partner/merchant/components/QualificationDialog.vue

@@ -1,10 +1,11 @@
 <template>
   <el-dialog v-model="dialogVisible" title="资质管理" width="800px" append-to-body @close="handleClose">
-    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
+    <!-- 注意:el-form 的 model 绑定的是本地的 localFormData -->
+    <el-form ref="formRef" :model="localFormData" :rules="rules" label-width="100px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="资质类型" prop="qualificationType">
-            <el-select v-model="formData.qualificationType" placeholder="请选择" style="width: 100%">
+            <el-select v-model="localFormData.qualificationType" placeholder="请选择" style="width: 100%">
               <el-option label="营业执照" :value="1" />
               <el-option label="资质证书" :value="2" />
             </el-select>
@@ -12,29 +13,37 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="资质编号" prop="qualificationNo">
-            <el-input v-model="formData.qualificationNo" placeholder="请输入" />
+            <el-input v-model="localFormData.qualificationNo" placeholder="请输入" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="签发机构">
-            <el-input v-model="formData.authority" placeholder="请输入" />
+            <el-input v-model="localFormData.authority" placeholder="请输入" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="截止日期">
-            <el-date-picker v-model="formData.deadline" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD" style="width: 100%" />
+            <el-date-picker v-model="localFormData.deadline" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD" style="width: 100%" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="24">
           <el-form-item label="附件">
-            <el-upload class="upload-demo" action="#" :auto-upload="false">
-              <el-button size="small">上传</el-button>
+            <el-upload
+              :action="action"
+              :on-success="handleUploadSuccess"
+              :before-upload="beforeUpload"
+              :on-remove="handleRemoveUploadFile"
+              :on-preview="handlePreviewUploadFile"
+              :file-list="fileList"
+              multiple
+            >
+              <el-button type="primary" icon="Upload">点击上传</el-button>
               <template #tip>
-                <div class="el-upload__tip">支持jpg/png/xlsx等文件</div>
+                <div class="el-upload__tip">支持jpg/png/xlsx等文件,单个文件不超过50MB</div>
               </template>
             </el-upload>
           </el-form-item>
@@ -49,14 +58,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, reactive, watch } from 'vue';
 import type { PartnerQualificationForm } from '@/api/partner/qualification/types';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const action = import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload';
 
 interface Props {
   visible: boolean;
   formData: PartnerQualificationForm;
 }
-
+const fileList = ref<any[]>([]);
 interface Emits {
   (e: 'update:visible', value: boolean): void;
   (e: 'update:formData', value: PartnerQualificationForm): void;
@@ -71,6 +82,24 @@ const dialogVisible = computed({
   set: (value) => emit('update:visible', value)
 });
 
+// 1. 在子组件内部创建一个本地的响应式表单对象
+const localFormData = reactive<PartnerQualificationForm>({
+  qualificationType: undefined,
+  qualificationNo: '',
+  authority: '',
+  deadline: '',
+  annex: ''
+} as PartnerQualificationForm);
+
+// 2. 监听 props.formData 的变化,同步到本地对象(解决弹窗打开时数据不更新的问题)
+watch(
+  () => props.formData,
+  (newVal) => {
+    Object.assign(localFormData, newVal);
+  },
+  { deep: true, immediate: true }
+);
+
 const rules = {
   qualificationType: [{ required: true, message: '资质类型不能为空', trigger: 'change' }],
   qualificationNo: [{ required: true, message: '资质编号不能为空', trigger: 'blur' }]
@@ -78,15 +107,66 @@ const rules = {
 
 const formRef = ref();
 
+/** 上传前校验 */
+const beforeUpload = (file: any) => {
+  const isLt50M = file.size / 1024 / 1024 < 50;
+  if (!isLt50M) {
+    proxy?.$modal.msgWarning('上传文件大小不能超过 50MB!');
+  }
+  return isLt50M;
+};
+
+function handleUploadSuccess(response: any, file: any, fileListParam: any[]) {
+  if (response.code === 200) {
+    // 为每个上传成功的文件设置 url 属性
+    fileListParam.forEach((f: any) => {
+      if (f.response?.code === 200 && f.response?.data?.url) {
+        f.url = f.response.data.url;
+      }
+    });
+    // 更新 fileList
+    fileList.value = fileListParam;
+    // 收集所有已上传成功的文件URL
+    const urls = fileListParam
+      .filter((f: any) => f.response?.code === 200 || f.url)
+      .map((f: any) => f.response?.data?.url || f.url)
+      .filter(Boolean);
+    localFormData.annex = urls.join(',');
+    proxy?.$modal.msgSuccess('文件上传成功');
+  } else {
+    proxy?.$modal.msgError(response.msg || '文件上传失败');
+  }
+}
+
+/** 删除文件 */
+const handleRemoveUploadFile = (uploadFile: any) => {
+  localFormData.annex = fileList.value
+    .map((f) => f.url)
+    .filter(Boolean)
+    .join(',');
+};
+
+/** 预览文件 */
+const handlePreviewUploadFile = (uploadFile: any) => {
+  if (uploadFile.url) {
+    window.open(uploadFile.url, '_blank');
+  } else {
+    proxy?.$modal.msgWarning('文件地址不存在');
+  }
+};
+
 const handleClose = () => {
   emit('update:visible', false);
+  // 弹窗关闭时,重置表单校验状态
   formRef.value?.resetFields();
 };
 
 const handleSubmit = () => {
   formRef.value?.validate((valid: boolean) => {
     if (valid) {
-      emit('submit', props.formData);
+      // 3. 提交时,将本地修改后的数据通过 emit 同步回父组件
+      emit('update:formData', localFormData);
+      emit('submit', localFormData);
     }
   });
 };

+ 3 - 1
src/views/partner/merchant/index.vue

@@ -549,7 +549,9 @@ const data = reactive<PageData<PartnerMerchantForm, PartnerMerchantQuery>>({
     partnerName: ''
   },
   rules: {
-    partnerName: [{ required: true, message: '伙伴商名称不能为空', trigger: 'blur' }]
+    partnerName: [{ required: true, message: '伙伴商名称不能为空', trigger: 'blur' }],
+    partnerNo: [{ required: true, message: '伙伴商编号不能为空', trigger: 'blur' }],
+    partnerCooperateType: [{ required: true, message: '合作型态不能为空', trigger: 'blur' }]
   }
 });