fix: 反馈、报修附件显示修改

main
wx-jincw 2 months ago
parent 1bb8060f3c
commit 09390a9249

@ -175,19 +175,41 @@
</text>
</view>
<view
class="image-grid"
v-if="item.files && item.files.length"
class="image-section"
v-if="item.beforeProcessFiles && item.beforeProcessFiles.length"
>
<view
class="image-item"
v-for="(file, imgIndex) in item.files"
:key="imgIndex"
@click="previewRecordImages(item.files, imgIndex)"
>
<image
:src="HTTP_ADMIN_URL + '/' + (file.url || file.attDir)"
mode="aspectFill"
></image>
<text class="image-title">反馈图片</text>
<view class="image-grid">
<view
class="image-item"
v-for="(file, imgIndex) in item.beforeProcessFiles"
:key="'before-' + imgIndex"
@click="previewRecordImages(item.beforeProcessFiles, imgIndex)"
>
<image
:src="HTTP_ADMIN_URL + '/' + (file.url || file.attDir)"
mode="aspectFill"
></image>
</view>
</view>
</view>
<view
class="image-section"
v-if="item.afterProcessFiles && item.afterProcessFiles.length"
>
<text class="image-title">处理图片</text>
<view class="image-grid">
<view
class="image-item"
v-for="(file, imgIndex) in item.afterProcessFiles"
:key="'after-' + imgIndex"
@click="previewRecordImages(item.afterProcessFiles, imgIndex)"
>
<image
:src="HTTP_ADMIN_URL + '/' + (file.url || file.attDir)"
mode="aspectFill"
></image>
</view>
</view>
</view>
</view>
@ -365,7 +387,7 @@ export default {
csContent: this.form.csContent.trim(),
remark: this.form.remark.trim(),
phone: this.form.phone.trim(),
files: imageFiles
beforeProcessFiles: imageFiles
};
try {
@ -783,24 +805,34 @@ export default {
}
}
.image-grid {
.image-section {
margin-top: 12rpx;
margin-left: 0;
display: flex;
flex-wrap: wrap;
gap: 12rpx;
.image-item {
width: calc((100% - 24rpx) / 3);
aspect-ratio: 1 / 1;
border-radius: 8rpx;
overflow: hidden;
background-color: #f5f5f5;
image {
width: 100%;
height: 100%;
display: block;
.image-title {
display: block;
font-size: 22rpx;
color: #666;
margin-bottom: 10rpx;
}
.image-grid {
margin-left: 0;
display: flex;
flex-wrap: wrap;
gap: 12rpx;
.image-item {
width: calc((100% - 24rpx) / 3);
aspect-ratio: 1 / 1;
border-radius: 8rpx;
overflow: hidden;
background-color: #f5f5f5;
image {
width: 100%;
height: 100%;
display: block;
}
}
}
}

@ -10,17 +10,21 @@
</view>
</view>
<view class="tab-row">
<view class="tab" :class="typeTab === 'all' ? 'active' : ''" @click="switchType('all')"></view>
<view class="tab" :class="typeTab === '1' ? 'active' : ''" @click="switchType('1')"></view>
<view class="tab" :class="typeTab === '2' ? 'active' : ''" @click="switchType('2')"></view>
<view class="filter-row">
<text class="filter-label">通知类型</text>
<picker
mode="selector"
:range="noticeTypeOptions"
range-key="label"
:value="selectedNoticeTypeIndex"
@change="onNoticeTypeChange"
>
<view class="filter-picker">
<text class="picker-text">{{ selectedNoticeTypeLabel }}</text>
<text class="picker-arrow"></text>
</view>
</picker>
</view>
<!-- <view class="tab-row" style="margin-top: 20rpx;">
<view class="tab" :class="statusTab === 'all' ? 'active' : ''" @click="switchStatus('all')"></view>
<view class="tab" :class="statusTab === '0' ? 'active' : ''" @click="switchStatus('0')">稿</view>
<view class="tab" :class="statusTab === '1' ? 'active' : ''" @click="switchStatus('1')"></view>
</view> -->
</view>
<!-- 列表 -->
@ -50,7 +54,7 @@
<view class="card-body">
<view class="row">
<text class="label">通知类型</text>
<text class="value">{{ item.noticeType || '—' }}</text>
<text class="value">{{ dict.getLabel('sys_notice_type', item.noticeType) || item.noticeType || '—' }}</text>
</view>
<view class="row">
<text class="label">通知范围</text>
@ -87,9 +91,8 @@ export default {
return {
query: {
noticeTitle: '',
noticeType: '',
},
typeTab: 'all', // all | 1 | 2
statusTab: '1', // all | 0 | 1
records: [],
page: 1,
limit: 10,
@ -104,13 +107,29 @@ export default {
onPullDownRefresh() {
this.refreshList();
},
methods: {
switchType(type) {
this.typeTab = type;
this.refreshList();
computed: {
noticeTypeOptions() {
const dictList = this.dict.get('sys_notice_type') || [];
const options = dictList.map(item => ({
label: item.dictLabel,
value: item.dictValue,
}));
return [{ label: '全部', value: '' }].concat(options);
},
selectedNoticeTypeIndex() {
const index = this.noticeTypeOptions.findIndex(item => item.value === this.query.noticeType);
return index >= 0 ? index : 0;
},
selectedNoticeTypeLabel() {
const current = this.noticeTypeOptions[this.selectedNoticeTypeIndex];
return current ? current.label : '全部';
},
switchStatus(status) {
this.statusTab = status;
},
methods: {
onNoticeTypeChange(e) {
const index = Number(e?.detail?.value);
const current = this.noticeTypeOptions[index];
this.query.noticeType = current ? current.value : '';
this.refreshList();
},
async refreshList() {
@ -133,8 +152,11 @@ export default {
};
const noticeTitle = (this.query.noticeTitle || '').trim();
if (noticeTitle) params.noticeTitle = noticeTitle;
if (this.typeTab !== 'all') params.type = this.typeTab;
if (this.statusTab !== 'all') params.status = this.statusTab;
if (this.query.noticeType) {
params.noticeType = this.query.noticeType;
// 使 type
params.type = this.query.noticeType;
}
return params;
},
async fetchList() {
@ -225,37 +247,39 @@ export default {
}
}
.tab-row {
.filter-row {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
border-radius: 12rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
padding: 0 20rpx;
height: 72rpx;
.tab {
flex: 1;
height: 72rpx;
display: flex;
align-items: center;
justify-content: center;
.filter-label {
font-size: 26rpx;
color: #666;
position: relative;
}
&.active {
.filter-picker {
display: flex;
align-items: center;
max-width: 420rpx;
.picker-text {
font-size: 26rpx;
color: #409eff;
font-weight: 600;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60rpx;
height: 4rpx;
background-color: #409eff;
border-radius: 2rpx;
}
max-width: 360rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.picker-arrow {
margin-left: 10rpx;
font-size: 18rpx;
color: #999;
}
}
}

@ -10,7 +10,7 @@
<view class="info-list">
<view class="row" v-if="notice.noticeType">
<text class="label">通知类型</text>
<text class="value">{{ notice.noticeType }}</text>
<text class="value">{{ dict.getLabel('sys_notice_type', notice.noticeType) || notice.noticeType }}</text>
</view>
<view class="row" v-if="notice.draftDeptName">
<text class="label">通知单位</text>

@ -149,20 +149,40 @@
</text>
</view>
<view class="image-section" v-if="item.files && item.files.length">
<text class="image-title">故障图片</text>
<view class="image-grid">
<view
class="image-item"
v-for="(file, imgIndex) in item.files"
:key="'fault-' + imgIndex"
@click="previewRecordImages(item.files, imgIndex)"
>
<image
:src="HTTP_ADMIN_URL + '/' + (file.url || file.attDir)"
mode="aspectFill"
></image>
</view>
</view>
</view>
<view
class="image-grid"
v-if="item.files && item.files.length"
class="image-section"
v-if="item.afterProcessFiles && item.afterProcessFiles.length"
>
<view
class="image-item"
v-for="(file, imgIndex) in item.files"
:key="imgIndex"
@click="previewRecordImages(item.files, imgIndex)"
>
<image
:src="HTTP_ADMIN_URL + '/' + (file.url || file.attDir)"
mode="aspectFill"
></image>
<text class="image-title">处理结果图片</text>
<view class="image-grid">
<view
class="image-item"
v-for="(file, imgIndex) in item.afterProcessFiles"
:key="'result-' + imgIndex"
@click="previewRecordImages(item.afterProcessFiles, imgIndex)"
>
<image
:src="HTTP_ADMIN_URL + '/' + (file.url || file.attDir)"
mode="aspectFill"
></image>
</view>
</view>
</view>
</view>
@ -850,24 +870,34 @@ export default {
}
}
.image-grid {
.image-section {
margin-top: 12rpx;
margin-left: 0;
display: flex;
flex-wrap: wrap;
gap: 12rpx;
.image-item {
width: calc((100% - 24rpx) / 3);
aspect-ratio: 1 / 1;
border-radius: 8rpx;
overflow: hidden;
background-color: #f5f5f5;
image {
width: 100%;
height: 100%;
display: block;
.image-title {
display: block;
font-size: 22rpx;
color: #666;
margin-bottom: 10rpx;
}
.image-grid {
margin-left: 0;
display: flex;
flex-wrap: wrap;
gap: 12rpx;
.image-item {
width: calc((100% - 24rpx) / 3);
aspect-ratio: 1 / 1;
border-radius: 8rpx;
overflow: hidden;
background-color: #f5f5f5;
image {
width: 100%;
height: 100%;
display: block;
}
}
}
}

Loading…
Cancel
Save