<template>
|
<up-popup :show="show" mode="bottom" @close="close" round="20">
|
<view class="files-container">
|
<view class="header">
|
<text class="title">工单附件</text>
|
<up-icon name="close" size="20" @click="close"></up-icon>
|
</view>
|
|
<scroll-view scroll-y class="file-list">
|
<view v-if="tableData.length > 0">
|
<view v-for="(item, index) in tableData" :key="item.id || index" class="file-item">
|
<view class="file-info">
|
<up-icon name="file-text" size="24" color="#2979ff"></up-icon>
|
<text class="file-name">{{ item.name }}</text>
|
</view>
|
<view class="file-actions">
|
<up-button
|
text="预览"
|
size="mini"
|
type="primary"
|
plain
|
@click="handlePreview(item)"
|
></up-button>
|
</view>
|
</view>
|
</view>
|
<view v-else class="no-data">
|
<text>暂无附件</text>
|
</view>
|
</scroll-view>
|
|
<view class="footer">
|
<up-button text="关闭" @click="close"></up-button>
|
</view>
|
</view>
|
</up-popup>
|
</template>
|
|
<script setup>
|
import { ref, reactive } from "vue";
|
import { productWorkOrderFileListPage } from "@/api/productionManagement/productWorkOrderFile.js";
|
|
const show = ref(false);
|
const currentWorkOrderId = ref("");
|
const tableData = ref([]);
|
const loading = ref(false);
|
|
const openDialog = (row) => {
|
show.value = true;
|
currentWorkOrderId.value = row.id;
|
getList();
|
};
|
|
const close = () => {
|
show.value = false;
|
};
|
|
const getList = () => {
|
loading.value = true;
|
productWorkOrderFileListPage({
|
workOrderId: currentWorkOrderId.value,
|
current: 1,
|
size: 100,
|
})
|
.then((res) => {
|
tableData.value = res.data.records || [];
|
})
|
.finally(() => {
|
loading.value = false;
|
});
|
};
|
|
const handlePreview = (item) => {
|
const url = item.url;
|
if (!url) return;
|
|
// 判断是否为图片
|
const isImage = /\.(jpg|jpeg|png|gif|webp)$/i.test(url);
|
if (isImage) {
|
uni.previewImage({
|
urls: [url],
|
current: url
|
});
|
} else {
|
// 非图片文件尝试打开文档
|
uni.showLoading({ title: '正在打开...' });
|
uni.downloadFile({
|
url: url,
|
success: (res) => {
|
if (res.statusCode === 200) {
|
uni.openDocument({
|
filePath: res.tempFilePath,
|
success: () => {
|
uni.hideLoading();
|
},
|
fail: () => {
|
uni.hideLoading();
|
uni.showToast({ title: '暂不支持预览该类型文件', icon: 'none' });
|
}
|
});
|
}
|
},
|
fail: () => {
|
uni.hideLoading();
|
uni.showToast({ title: '下载失败', icon: 'none' });
|
}
|
});
|
}
|
};
|
|
defineExpose({
|
openDialog,
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.files-container {
|
background-color: #fff;
|
padding: 20px;
|
height: 60vh;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20px;
|
|
.title {
|
font-size: 18px;
|
font-weight: bold;
|
}
|
}
|
|
.file-list {
|
flex: 1;
|
overflow: hidden;
|
}
|
|
.file-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 15px 0;
|
border-bottom: 1px solid #f5f5f5;
|
|
.file-info {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
flex: 1;
|
margin-right: 10px;
|
|
.file-name {
|
font-size: 14px;
|
color: #333;
|
word-break: break-all;
|
}
|
}
|
}
|
|
.no-data {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 200px;
|
color: #999;
|
}
|
|
.footer {
|
margin-top: 20px;
|
}
|
</style>
|
