私有应收开票结算，上传结算凭证的bug修改

src/views/platform/ticket.vue

@@ -192,12 +192,6 @@
             </span>
           </div>
         </div>
-        <!-- <el-upload action="https://tennat.baoxianzhanggui.com/api/file/upload" drag
-            v-model:file-list="countForm.attachmentIds" multiple list-type="picture-card">
-            <el-icon>
-              <Plus />
-            </el-icon>
-          </el-upload> -->
       </el-form-item>
     </el-form>
     <template #footer>

src/views/receivable/documentary/ticket.vue

@@ -42,8 +42,8 @@
       <el-table-column prop="receivablePremium" label="应收总额"></el-table-column>
       <el-table-column prop="reconciliationAmount" label="对账金额">
         <template #default="scope">
-          <div class="flex items-center cursor-pointer" @click="handleEdit(scope.row)" @mouseenter="scope.row.showEdit = true"
-            @mouseleave="scope.row.showEdit = false">
+          <div class="flex items-center cursor-pointer" @click="handleEdit(scope.row)"
+            @mouseenter="scope.row.showEdit = true" @mouseleave="scope.row.showEdit = false">
             ￥{{ scope.row.reconciliationAmount || 0 }}
             <el-icon class="m-l-4px " v-if="scope.row.showEdit">
               <Edit />
@@ -109,12 +109,25 @@
             value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD" />
         </el-form-item>
         <el-form-item v-if="isSettlement" prop="attachmentIds" label="收款凭证" class="upload-btn">
-          <el-upload action="https://tennat.baoxianzhanggui.com/api/file/upload" drag
-            v-model:file-list="countForm.attachmentIds" multiple list-type="picture-card">
-            <el-icon>
-              <Plus />
-            </el-icon>
+          <el-upload style="margin: 0 10px 10px 0" :auto-upload="false" multiple v-if="!countForm.h"
+            :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage" drag>
+            <el-button style="height: 0;" link size="large" icon="Plus" />
           </el-upload>
+          <div class="imageDiv" v-for="(item, index) in imageUrl" :key="item">
+            <img :src="item" />
+            <div class="model">
+              <span class="icon-view" @click="handelViewImage(item, index)">
+                <el-icon>
+                  <View />
+                </el-icon>
+              </span>
+              <span class="icon-del" @click="handelDelImage(item, index)">
+                <el-icon>
+                  <Delete />
+                </el-icon>
+              </span>
+            </div>
+          </div>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -128,8 +141,8 @@
           <el-input v-model="editForm.receivablePremium" placeholder="请输入" disabled></el-input>
         </el-form-item>
         <el-form-item prop="reconciliationAmount" label="对账金额">
-          <el-input-number :disabled="editForm.invoiced" v-model="editForm.reconciliationAmount"
-            style="width: 100%;" :min="0" :precision="2" controls-position="right" @change="handleChange2()" />
+          <el-input-number :disabled="editForm.invoiced" v-model="editForm.reconciliationAmount" style="width: 100%;"
+            :min="0" :precision="2" controls-position="right" @change="handleChange2()" />
         </el-form-item>
         <el-form-item prop="falselyIncreasedDifference" label="虚增金额">
           <el-input v-model="editForm.falselyIncreasedDifference" disabled></el-input>
@@ -143,6 +156,8 @@
         <el-button type="primary" @click="editShow = false">确定</el-button>
       </template>
     </el-dialog>
+  <el-image-viewer v-if="imageShow" :url-list="[bigImageUrl]" @close="imageShow = false" />
+
   </div>
 </template>
 
@@ -159,7 +174,9 @@ const year = new Date().getFullYear() + ''
 const yearrangesearch = ref([year, year])
 
 const countShow = ref(false)
-const countForm = ref({})
+const countForm = ref({
+  attachmentIds: []
+})
 const editShow = ref(false)
 const editForm = ref({})
 const handleEdit = (row) => {
@@ -249,6 +266,28 @@ const signDateSelectChange = (index: any, e: any) => {
       break;
   }
 }
+let imageUrl = ref([])
+let imageShow = ref(false)
+let bigImageUrl = ref('')
+const handelViewImage = (item, index) => {
+  bigImageUrl.value = item
+  imageShow.value = true
+}
+const handelDelImage = (item, index) => {
+  imageUrl.value.splice(index, 1)
+  countForm.value.attachmentIds.splice(index, 1)
+}
+const uploadImage = async (file, fileList) => {
+  let files = file.raw
+  const params = new FormData(); // 声明formData数据类型
+  params.append("file", files);
+  params.append("type", "image");
+  const { code, data, msg } = await api.commonApi.fileUpload(params)
+  if (code == 200) {
+    imageUrl.value.push(data.downloadUrl)
+    countForm.value.attachmentIds.push(data.id)
+  }
+}
 
 let tableData = ref([])
 const receivableSupervisePremium = ref('')
@@ -258,7 +297,7 @@ const handleTicket = async (bool: boolean) => {
     ElMessage.error('请选择应收单据')
     return
   }
-  if (selectedList.value.find(v=>v.reconciliationAmount===undefined)) {
+  if (selectedList.value.find(v => v.reconciliationAmount === undefined)) {
     ElMessage.error('请先确认对账金额')
     return
   }
@@ -266,6 +305,7 @@ const handleTicket = async (bool: boolean) => {
   const arr = selectedList.value.map(v => v.uninvoiced)
   const res = await api.financeApi.calculateTotalSum(arr.join())
   if (res.code == 200) {
+    countForm.value.selectFlag=1;
     openCountForm()
     countForm.value.companyId = selectedList.value[0].companyId
     countForm.value.reconciliationAmount = selectedList.value.reduce((total, current) => total + current.reconciliationAmount, 0);
@@ -306,21 +346,20 @@ const calSub = async (minuend: number = 0, subtrahend: number) => {
 }
 
 const openCountForm = () => {
-  countForm.value = {
-    selectFlag: 1
-  }
+
   countShow.value = true
 }
 const handelComfirm = () => {
-  if(countForm.value.reconciliationAmount<countForm.value.receivableSupervisePremium){
+  if (countForm.value.reconciliationAmount < countForm.value.receivableSupervisePremium) {
     ElMessage.error('开票金额不可大于对账金额')
     return
   }
-  if(countForm.value.receivableSupervisePremium===0){
+  if (countForm.value.receivableSupervisePremium === 0) {
     ElMessage.error('开票金额不能为0')
     return
   }
-  const attachmentIds = countForm.value.attachmentIds?.map(v => v.response.data.id)
+  console.log()
+  const attachmentIds = countForm.value.attachmentIds
   let params: any = {
     details: selectedList.value,
     ...countForm.value,
@@ -440,4 +479,51 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
 }
+.imageDiv {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  margin: 0 10px 10px 0;
+
+  &:hover {
+    .model {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: rgba(0, 0, 0, .3);
+    }
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+  }
+
+  .model {
+    position: absolute;
+    width: 80px;
+    height: 80px;
+    border-radius: 4px;
+    display: none;
+    top: 0;
+    left: 0;
+
+    .icon-view,
+    .icon-del {
+      color: #FFFFFF;
+      margin: 0 10px;
+      cursor: pointer;
+    }
+  }
+}
+.upload-btn {
+  :deep(.el-button) {
+    width: 80px;
+    height: 80px;
+    font-size: 30px;
+    color: #ccc;
+  }
+}
 </style>

src/views/receivable/handingFee/ticket.vue

@@ -203,12 +203,25 @@
             value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD" />
         </el-form-item>
         <el-form-item v-if="isSettlement" prop="attachmentIds" label="收款凭证" class="upload-btn">
-          <el-upload action="https://tennat.baoxianzhanggui.com/api/file/upload" drag
-            v-model:file-list="countForm.attachmentIds" multiple list-type="picture-card">
-            <el-icon>
-              <Plus />
-            </el-icon>
+          <el-upload style="margin: 0 10px 10px 0" :auto-upload="false" multiple v-if="!countForm.h"
+            :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage" drag>
+            <el-button style="height: 0;" link size="large" icon="Plus" />
           </el-upload>
+          <div class="imageDiv" v-for="(item, index) in imageUrl" :key="item">
+            <img :src="item" />
+            <div class="model">
+              <span class="icon-view" @click="handelViewImage(item, index)">
+                <el-icon>
+                  <View />
+                </el-icon>
+              </span>
+              <span class="icon-del" @click="handelDelImage(item, index)">
+                <el-icon>
+                  <Delete />
+                </el-icon>
+              </span>
+            </div>
+          </div>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -246,6 +259,7 @@
         <el-button type="primary" @click="batchShow = false">确定</el-button>
       </template>
     </el-dialog>
+    <el-image-viewer v-if="imageShow" :url-list="[bigImageUrl]" @close="imageShow = false" />
 
   </div>
 </template>
@@ -255,6 +269,7 @@ import api from '@/api'
 import { useRoute, useRouter } from 'vue-router'
 
 import { ElMessage } from "element-plus";
+import { registerRuntimeCompiler } from 'vue';
 
 let route = useRoute()
 let router = useRouter()
@@ -267,7 +282,9 @@ const orderTypesearch = ref('')
 const yearrangesearch = ref('')
 const datesearch = ref('')
 const countShow = ref(false)
-const countForm = ref({})
+const countForm = ref({
+  attachmentIds: [],
+})
 //获取保险公司协议
 const getByCompanyId = () => {
   api.dispatchApi.getByCompanyIdt(route.query.id).then((res: any) => {
@@ -444,6 +461,30 @@ const handleToAdd = (row) => {
   // })
 }
 
+let imageUrl = ref([])
+let imageShow = ref(false)
+let bigImageUrl = ref('')
+const handelViewImage = (item, index) => {
+  bigImageUrl.value = item
+  imageShow.value = true
+}
+const handelDelImage = (item, index) => {
+  imageUrl.value.splice(index, 1)
+  countForm.value.attachmentIds.splice(index, 1)
+}
+const uploadImage = async (file, fileList) => {
+  let files = file.raw
+  const params = new FormData(); // 声明formData数据类型
+  params.append("file", files);
+  params.append("type", "image");
+  const { code, data, msg } = await api.commonApi.fileUpload(params)
+  if (code == 200) {
+    imageUrl.value.push(data.downloadUrl)
+    countForm.value.attachmentIds.push(data.id)
+  }
+}
+
+
 let importModifyCallback = ref()// 导入数据回调
 const uploadJYFile = async (file) => {
   let files = file.raw
@@ -555,13 +596,15 @@ const calSub = async (minuend: number = 0, subtrahend: number) => {
 }
 
 const openCountForm = () => {
-  countForm.value = {}
+  countForm.value = {
+    attachmentIds: []
+  }
   countShow.value = true
 }
 const handelComfirm = () => {
   let apiFn = api.financeApi.commissionInvoicing
   if (isSettlement.value) apiFn = api.financeApi.invoiceAndSettlement
-  const attachmentIds = countForm.value.attachmentIds?.map(v => v.response.data.id)
+  const attachmentIds = countForm.value.attachmentIds
   const params = {
     invoiceVO: {
       ...countForm.value,
@@ -680,4 +723,52 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
 }
+.imageDiv {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  margin: 0 10px 10px 0;
+
+  &:hover {
+    .model {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: rgba(0, 0, 0, .3);
+    }
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+  }
+
+  .model {
+    position: absolute;
+    width: 80px;
+    height: 80px;
+    border-radius: 4px;
+    display: none;
+    top: 0;
+    left: 0;
+
+    .icon-view,
+    .icon-del {
+      color: #FFFFFF;
+      margin: 0 10px;
+      cursor: pointer;
+    }
+  }
+}
+
+.upload-btn {
+  :deep(.el-button) {
+    width: 80px;
+    height: 80px;
+    font-size: 30px;
+    color: #ccc;
+  }
+}
 </style>