java_project
/
logpm_page
4
1
Fork 0
Code Issues Pull Requests Activity
Browse Source

待签收列表弹窗优化

fix_bug_pro20231227
13208366016 1 year ago
parent
50817f8eac
commit
e5280ca620
3 changed files with 216 additions and 164 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/page/index/index.vue
  2. 44
      src/views/distribution/signfor/distributionSignforedt.vue
  3. 331
      src/views/distribution/signfor/distributionSignfortreat.vue

5
src/page/index/index.vue
Unescape View File

@ -15,10 +15,9 @@
<!-- 主体视图层 -->
<div id="avue-view" v-show="!isSearch" v-if="isRefresh">
<router-view #="{ Component }">
<!-- <keep-alive :include="$store.getters.tagsKeep" :max="20"> -->
<!-- <keep-alive :max="10"> -->
<keep-alive :include="$store.getters.tagsKeep">
<component :is="Component" />
<!-- </keep-alive> -->
</keep-alive>
</router-view>
</div>
</div>

44
src/views/distribution/signfor/distributionSignforedt.vue
Unescape View File

@ -172,7 +172,7 @@
v-model:file-list="DoorstepPhoto"
:action="doubledCount"
list-type="picture-card"
:on-preview="EnlargeTheTmage"
:on-preview="EnlargeTheTmageA"
:on-remove="handleRemove"
:on-success="ImgSuccessA"
:headers="headers"
@ -194,7 +194,7 @@
v-model:file-list="StackingPhoto"
:action="doubledCount"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-preview="EnlargeTheTmageB"
:on-remove="handleRemove"
:on-success="ImgSuccessB"
:headers="headers"
@ -202,7 +202,7 @@
>
<el-icon><Plus /></el-icon>
</el-upload>
<el-dialog v-model="dialogVisible">
<el-dialog v-model="dialogVisibleB">
<div class="tc-img">
<img w-full :src="dialogImageUrlB" alt="IMG" />
</div>
@ -218,7 +218,7 @@
v-model:file-list="FragilePhotos"
:action="doubledCount"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-preview="EnlargeTheTmageC"
:on-remove="handleRemove"
:on-success="ImgSuccessC"
:headers="headers"
@ -226,7 +226,7 @@
>
<el-icon><Plus /></el-icon>
</el-upload>
<el-dialog v-model="dialogVisible">
<el-dialog v-model="dialogVisibleC">
<img w-full :src="dialogImageUrlC" alt="IMG" />
</el-dialog>
</div>
@ -240,7 +240,7 @@
v-model:file-list="HomePhotos"
:action="doubledCount"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-preview="EnlargeTheTmageD"
:on-remove="handleRemove"
:on-success="ImgSuccessD"
:headers="headers"
@ -248,7 +248,7 @@
>
<el-icon><Plus /></el-icon>
</el-upload>
<el-dialog v-model="dialogVisible">
<el-dialog v-model="dialogVisibleD">
<img w-full :src="dialogImageUrlD" alt="IMG" />
</el-dialog>
</div>
@ -262,7 +262,7 @@
v-model:file-list="SignForPhotos"
:action="doubledCount"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-preview="EnlargeTheTmageE"
:on-remove="handleRemove"
:on-success="ImgSuccessE"
:headers="headers"
@ -270,7 +270,7 @@
>
<el-icon><Plus /></el-icon>
</el-upload>
<el-dialog v-model="dialogVisible">
<el-dialog v-model="dialogVisibleE">
<img w-full :src="dialogImageUrlE" alt="IMG" />
</el-dialog>
</div>
@ -420,16 +420,32 @@ const total = ref(0); //页码总页数
const pageList = ref([5, 10, 50, 100, 200]); // 选择每页显示多少条
const background = ref(true); // 是否开启背景颜色
const disabled = ref(false); // 是否禁止使用页码功能
const dialogImageUrlA = ref(''); //点击放大查看图片
const dialogImageUrlA = ref('');
const dialogImageUrlB = ref('');
const dialogImageUrlC = ref('');
const dialogImageUrlD = ref('');
const dialogImageUrlE = ref('');
const dialogVisibleA = ref(false); //是否显放大图片
const dialogVisibleB = ref(false);
const dialogVisibleC = ref(false);
const dialogVisibleD = ref(false);
const dialogVisibleE = ref(false);
const active = ref(1); //签收状态
const route = useRoute();
const router = useRouter();
const EnlargeTheTmage = uploadFile => {
console.log(uploadFile, '点击放大的内容');
dialogImageUrlA.value = uploadFile.url;
dialogVisibleA.value = true;
const enlargeImage = (dialogImageUrl, dialogVisible) => {
return uploadFile => {
console.log(uploadFile, '点击放大的内容');
dialogImageUrl.value = uploadFile.url;
dialogVisible.value = true;
};
};
// 点击放大图片
const EnlargeTheTmageA = enlargeImage(dialogImageUrlA, dialogVisibleA);
const EnlargeTheTmageB = enlargeImage(dialogImageUrlB, dialogVisibleB);
const EnlargeTheTmageC = enlargeImage(dialogImageUrlC, dialogVisibleC);
const EnlargeTheTmageD = enlargeImage(dialogImageUrlD, dialogVisibleD);
const EnlargeTheTmageE = enlargeImage(dialogImageUrlE, dialogVisibleE);
const Tabs = ref([
{

331
src/views/distribution/signfor/distributionSignfortreat.vue
Unescape View File

@ -104,14 +104,8 @@
<!-- >删 除</el-button-->
<!-- >-->
<el-button
type="danger"
icon="el-icon-download"
@click="handleExportInfo"
plain
>导出
<el-button type="danger" icon="el-icon-download" @click="handleExportInfo" plain
>导出
</el-button>
</div>
<!-- 头部右侧按钮模块 -->
@ -294,15 +288,15 @@
v-model:file-list="DoorstepPhoto"
:action="doubledCount"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-preview="EnlargeTheTmageA"
:on-remove="handleRemove"
:on-success="ImgSuccessA"
:headers="headers"
>
<el-icon><Plus /></el-icon>
</el-upload>
<el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="IMG" />
<el-dialog v-model="dialogVisibleA">
<img w-full :src="dialogImageUrlA" alt="IMG" />
</el-dialog>
</div>
@ -312,15 +306,15 @@
v-model:file-list="StackingPhoto"
:action="doubledCount"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-preview="EnlargeTheTmageB"
:on-remove="handleRemove"
:on-success="ImgSuccessB"
:headers="headers"
>
<el-icon><Plus /></el-icon>
</el-upload>
<el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="IMG" />
<el-dialog v-model="dialogVisibleB">
<img w-full :src="dialogImageUrlB" alt="IMG" />
</el-dialog>
</div>
@ -330,15 +324,15 @@
v-model:file-list="FragilePhotos"
:action="doubledCount"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-preview="EnlargeTheTmageC"
:on-remove="handleRemove"
:on-success="ImgSuccessC"
:headers="headers"
>
<el-icon><Plus /></el-icon>
</el-upload>
<el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="IMG" />
<el-dialog v-model="dialogVisibleC">
<img w-full :src="dialogImageUrlC" alt="IMG" />
</el-dialog>
</div>
@ -348,15 +342,15 @@
v-model:file-list="HomePhotos"
:action="doubledCount"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-preview="EnlargeTheTmageD"
:on-remove="handleRemove"
:on-success="ImgSuccessD"
:headers="headers"
>
<el-icon><Plus /></el-icon>
</el-upload>
<el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="IMG" />
<el-dialog v-model="dialogVisibleD">
<img w-full :src="dialogImageUrlD" alt="IMG" />
</el-dialog>
</div>
@ -366,25 +360,22 @@
v-model:file-list="SignForPhotos"
:action="doubledCount"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-preview="EnlargeTheTmageE"
:on-remove="handleRemove"
:on-success="ImgSuccessE"
:headers="headers"
>
<el-icon><Plus /></el-icon>
</el-upload>
<el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="IMG" />
<el-dialog v-model="dialogVisibleE">
<img w-full :src="dialogImageUrlE" alt="IMG" />
</el-dialog>
</div>
<div style="bottom: 7%; margin-left: 250px; width: 50%">
<div style="width: 100%">
<el-button type="primary" @click="submitForm" style="margin-right: 40%">确定</el-button>
<div class="tj-ttn">
<el-button type="primary" @click="submitForm">确定</el-button>
<el-button type="primary" @click="cancellation">取消</el-button>
</div>
</div>
</div>
</el-dialog>
</div>
</basic-container>
@ -476,7 +467,8 @@ import {
getPage,
getstatistics,
loadingAbnormalPackageListDetail,
loadingAbnormalPackageListAuditing, getSignforExport
loadingAbnormalPackageListAuditing,
getSignforExport,
} from '@/api/distribution/distributionSignfor';
import { update as updatesign } from '@/api/distribution/distributionSignfor';
import option from '@/option/distribution/distributionSignfor';
@ -485,12 +477,24 @@ import { getDictionaryBiz } from '@/api/system/dict';
import dayjs from 'dayjs';
import { getDeliveryListExport } from '@/api/distribution/distributionDeliveryList';
import { downloadXls } from '@/utils/util';
import { getToken } from '@/utils/auth';
import { ElMessage } from 'element-plus'
export default {
data() {
return {
dialogImageUrl: '', //图片放大地址
dialogVisible: false, //图片状态
dialogImageUrlA: '',
dialogImageUrlB: '',
dialogImageUrlC: '',
dialogImageUrlD: '',
dialogImageUrlE: '',
dialogVisibleA: false,
dialogVisibleB: false,
dialogVisibleC: false,
dialogVisibleD: false,
dialogVisibleE: false,
TcForm: {}, //弹窗表单
// 上门照
DoorstepPhoto: [],
@ -1388,7 +1392,7 @@ export default {
/**
* 导出
* */
handleExportInfo(){
handleExportInfo() {
let row = {};
// if (!!this.ids) {
// row.ids = this.ids;
@ -1401,7 +1405,6 @@ export default {
// console.log(res.data);
downloadXls(res.data, '待签收数据.xlsx');
});
},
showdrawer(value) {
this.drawerShow = value;
@ -1423,35 +1426,35 @@ export default {
this.name[this.name.length - 1].url = data.data.link;
}
},
methods: {
// 通用的图片上传成功处理函数
handleImageUploadSuccess(response, uploadFile, photoArray) {
if (response.success === true) {
console.log(response, '图片上传成功');
this.$set(photoArray, photoArray.length - 1, { url: response.data.link });
}
},
// 上门照图片上传成功
ImgSuccessA(response, uploadFile) {
this.handleImageUploadSuccess(response, uploadFile, this.DoorstepPhoto);
},
// 堆门图片上传成功
ImgSuccessB(response, uploadFile) {
this.handleImageUploadSuccess(response, uploadFile, this.StackingPhoto);
},
// 易碎图片上传成功
ImgSuccessC(response, uploadFile) {
this.handleImageUploadSuccess(response, uploadFile, this.FragilePhotos);
},
// 家配图片上传成功
ImgSuccessD(response, uploadFile) {
this.handleImageUploadSuccess(response, uploadFile, this.HomePhotos);
},
// 签收图片上传成功
ImgSuccessE(response, uploadFile) {
this.handleImageUploadSuccess(response, uploadFile, this.SignForPhotos);
},
// 通用的图片上传成功处理函数
handleImageUploadSuccess(response, uploadFile, photoArray) {
if (response.success === true) {
console.log(response, '图片上传成功');
this.$set(photoArray, photoArray.length - 1, { url: response.data.link });
}
},
// 上门照图片上传成功
ImgSuccessA(response, uploadFile) {
this.handleImageUploadSuccess(response, uploadFile, this.DoorstepPhoto);
},
// 堆门图片上传成功
ImgSuccessB(response, uploadFile) {
this.handleImageUploadSuccess(response, uploadFile, this.StackingPhoto);
},
// 易碎图片上传成功
ImgSuccessC(response, uploadFile) {
this.handleImageUploadSuccess(response, uploadFile, this.FragilePhotos);
},
// 家配图片上传成功
ImgSuccessD(response, uploadFile) {
this.handleImageUploadSuccess(response, uploadFile, this.HomePhotos);
},
// 签收图片上传成功
ImgSuccessE(response, uploadFile) {
this.handleImageUploadSuccess(response, uploadFile, this.SignForPhotos);
},
/**
* 弹窗的勾选回调，用于更改头部数组
* 固定搭配，只需要更换 columnList
@ -1473,103 +1476,134 @@ export default {
cancellation() {
this.signBox = false;
},
//签收
submitForm() {
// this.isDis = true;
console.log(this.$refs.signform.validate, 'this.$refs.signform');
// console.log(this.$refs.signform.validate, 'this.$refs.signform');
// let row = {};
// row.id = this.signform.id;
// row.clerkSignPictures = this.signform.clerkSignPictures;
// row.clerkSignRemarks = this.signform.clerkSignRemarks;
// console.log(row, '要提交的数据');
this.$refs.signform.validate(valid => {
if (valid) {
let row = {};
row.map = {
photo_1: [],
photo_2: [],
photo_3: [],
photo_4: [],
photo_5: [],
};
// 提交图片处理
//最后提交
row.id = this.signform.id;
row.reservationId = this.reservationId;
row.clerkSignPictures = this.signform.clerkSignPictures;
row.clerkSignRemarks = this.TcForm.clerkSignRemarks;//备注
row.signingStatus = '2';//状态
// 本身图片处理开始
const photoMap = {
photo_1: 'photo_1',
photo_2: 'photo_2',
photo_3: 'photo_3',
photo_4: 'photo_4',
photo_5: 'photo_5',
};
this.TcForm.printVOList.forEach(item => {
const type = item.type;
if (photoMap.hasOwnProperty(type)) {
const photoProperty = photoMap[type];
row.map[photoProperty].push({
name: item.name,
reservationId: this.reservationId,
type: type,
urlRoute: item.urlRoute,
});
}
// this.$refs.signform.validate(valid => {
// if (valid) {
let row = {};
row.map = {
photo_1: [],
photo_2: [],
photo_3: [],
photo_4: [],
photo_5: [],
};
// 提交图片处理
//最后提交
row.id = this.signform.id;
row.reservationId = this.reservationId;
row.clerkSignPictures = this.signform.clerkSignPictures;
row.clerkSignRemarks = this.TcForm.clerkSignRemarks; //备注
row.signingStatus = '2'; //状态
// 本身图片处理开始
const photoMap = {
photo_1: 'photo_1',
photo_2: 'photo_2',
photo_3: 'photo_3',
photo_4: 'photo_4',
photo_5: 'photo_5',
};
this.TcForm.printVOList.forEach(item => {
const type = item.type;
if (photoMap.hasOwnProperty(type)) {
const photoProperty = photoMap[type];
row.map[photoProperty].push({
name: item.name,
reservationId: this.reservationId,
type: type,
urlRoute: item.urlRoute,
});
// 本身图片处理结束
}
});
// 本身图片处理结束
// 上传图片处理开始
function generatePhotoArray(photoType, photoItems, reservationId) {
const photoArray = [];
photoItems.forEach(item => {
photoArray.push({
name: item.name,
reservationId: reservationId,
type: photoType,
urlRoute: item.url,
});
});
return photoArray;
}
row.map.photo_1 = generatePhotoArray('photo_1', this.DoorstepPhoto, this.reservationId);
row.map.photo_2 = generatePhotoArray('photo_2', this.StackingPhoto, this.reservationId);
row.map.photo_3 = generatePhotoArray('photo_3', this.FragilePhotos, this.reservationId);
row.map.photo_4 = generatePhotoArray('photo_4', this.HomePhotos, this.reservationId);
row.map.photo_5 = generatePhotoArray('photo_5', this.SignForPhotos, this.reservationId);
// 上传图片处理结束
// 图片去重
this.deduplicateByIdAndUpdate(row.map.photo_1);
this.deduplicateByIdAndUpdate(row.map.photo_2);
this.deduplicateByIdAndUpdate(row.map.photo_3);
this.deduplicateByIdAndUpdate(row.map.photo_4);
this.deduplicateByIdAndUpdate(row.map.photo_5);
console.log(row, '要提交的参数');
// 提交
// updatesign(row).then(res => {
// console.log(res, '提交之后返回的参数');
// });
// if (!!row.id){
// updatesign(row).then(
// () => {
// console.log(row, '要提交的值');
// this.$message({
// type: 'success',
// message: '操作成功!',
// });
// this.signBox = false;
// this.onLoad(this.page);
// },
// error => {
// console.log(error);
// this.signBox = false;
// }
// );
// 上传图片处理开始
function generatePhotoArray(photoType, photoItems, reservationId) {
const photoArray = [];
photoItems.forEach(item => {
photoArray.push({
name: item.name,
reservationId: reservationId,
type: photoType,
urlRoute: item.url,
});
});
return photoArray;
}
row.map.photo_1 = generatePhotoArray('photo_1', this.DoorstepPhoto, this.reservationId);
row.map.photo_2 = generatePhotoArray('photo_2', this.StackingPhoto, this.reservationId);
row.map.photo_3 = generatePhotoArray('photo_3', this.FragilePhotos, this.reservationId);
row.map.photo_4 = generatePhotoArray('photo_4', this.HomePhotos, this.reservationId);
row.map.photo_5 = generatePhotoArray('photo_5', this.SignForPhotos, this.reservationId);
// 上传图片处理结束
// 图片去重
this.deduplicateByIdAndUpdate(row.map.photo_1);
this.deduplicateByIdAndUpdate(row.map.photo_2);
this.deduplicateByIdAndUpdate(row.map.photo_3);
this.deduplicateByIdAndUpdate(row.map.photo_4);
this.deduplicateByIdAndUpdate(row.map.photo_5);
console.log(row, '要提交的参数');
// 提交
updatesign(row).then(res => {
console.log(res, '提交之后返回的参数');
this.signBox = false;
if (res.data.code == 200) {
ElMessage({
message: '操作成功',
type: 'success',
});
} else {
ElMessage.error('操作失败');
}
this.onLoad(this.page);
});
// if (!!row.id){
// updatesign(row).then(
// () => {
// console.log(row, '要提交的值');
// this.$message({
// type: 'success',
// message: '操作成功!',
// });
// this.signBox = false;
// this.onLoad(this.page);
// },
// error => {
// console.log(error);
// this.signBox = false;
// }
// );
// }
// });
},
// 图片放大
EnlargeTheTmageA(uploadFile) {
this.dialogImageUrlA = uploadFile.url;
this.dialogVisibleA = true;
},
EnlargeTheTmageB(uploadFile) {
this.dialogImageUrlB = uploadFile.url;
this.dialogVisibleB = true;
},
EnlargeTheTmageC(uploadFile) {
this.dialogImageUrlC = uploadFile.url;
this.dialogVisibleC = true;
},
EnlargeTheTmageD(uploadFile) {
this.dialogImageUrlD = uploadFile.url;
this.dialogVisibleD = true;
},
EnlargeTheTmageE(uploadFile) {
this.dialogImageUrlE = uploadFile.url;
this.dialogVisibleE = true;
},
deduplicateByIdAndUpdate(val) {
const result = val.filter((item, index, array) => {
@ -1595,7 +1629,6 @@ export default {
auditing(row) {
// const { row } = scope;
console.log('----------->row', row);
loadingAbnormalPackageListAuditing(row.id).then(res => {
console.log('res-------->', res);
if (res) {
@ -1651,7 +1684,6 @@ export default {
if (item.type == 'photo_2') {
this.StackingPhoto.push({ name: item.name, url: item.urlRoute });
}
if (item.type == 'photo_3') {
this.FragilePhotos.push({ name: item.name, url: item.urlRoute });
}
@ -2005,4 +2037,9 @@ export default {
content: '';
}
}
.tj-ttn {
display: flex;
justify-content: flex-end;
align-items: center;
}
</style>

Write Preview
Loading…
Cancel
Save