333
This commit is contained in:
zpc
parent
6f10685aa8
commit
3fccba37d3
|
|
@ -19,7 +19,7 @@ export function listCamWorkrecord(query) {
|
|||
*/
|
||||
export function addCamWorkrecord(data) {
|
||||
return request({
|
||||
url: 'business/CamWorkrecord',
|
||||
url: 'addworkrecord',
|
||||
method: 'post',
|
||||
data: data,
|
||||
})
|
||||
|
|
@ -30,8 +30,8 @@ export function addCamWorkrecord(data) {
|
|||
*/
|
||||
export function updateCamWorkrecord(data) {
|
||||
return request({
|
||||
url: 'business/CamWorkrecord',
|
||||
method: 'PUT',
|
||||
url: 'addworkrecord',
|
||||
method: 'post',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -131,7 +131,13 @@
|
|||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="worker" width="120" label="施工人员" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('worker')">
|
||||
<el-table-column
|
||||
prop="workers"
|
||||
width="120"
|
||||
label="施工人员"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
v-if="columns.showColumn('workers')">
|
||||
<template #default="scope">
|
||||
<div class="worker-cell">
|
||||
<span class="worker-name">{{ scope.row.worker || '-' }}</span>
|
||||
|
|
@ -235,7 +241,16 @@
|
|||
|
||||
<el-col :lg="24">
|
||||
<el-form-item label="图片" prop="imageUrl">
|
||||
<UploadImage v-model="form.imageUrl" :data="{ uploadType: 1 }" />
|
||||
<el-upload class="upload-demo" drag :auto-upload="false" :show-file-list="false" accept="image/*" @change="handleImageChange">
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
<div v-if="form.imageUrl" class="image-preview">
|
||||
<img :src="form.imageUrl" alt="预览图片" style="max-width: 200px; max-height: 200px" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
|
|
@ -282,6 +297,12 @@
|
|||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="施工人员" prop="worker">
|
||||
<el-input v-model="form.worker" placeholder="请输入施工人员，多个人员用逗号分隔" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="备注" prop="remarks">
|
||||
<el-input v-model="form.remarks" placeholder="请输入备注" />
|
||||
|
|
@ -299,6 +320,7 @@
|
|||
|
||||
<script setup name="camworkrecord">
|
||||
import { listCamWorkrecord, addCamWorkrecord, delCamWorkrecord, updateCamWorkrecord, getCamWorkrecord } from '@/api/business/camworkrecord.js'
|
||||
import { UploadFilled } from '@element-plus/icons-vue'
|
||||
const { proxy } = getCurrentInstance()
|
||||
const ids = ref([])
|
||||
const loading = ref(false)
|
||||
|
|
@ -320,7 +342,7 @@ const columns = ref([
|
|||
|
||||
{ visible: true, align: 'center', type: '', prop: 'address', label: '拍照信息', showOverflowTooltip: true },
|
||||
{ visible: true, align: 'center', type: '', prop: 'content', label: '工作内容', showOverflowTooltip: true },
|
||||
{ visible: true, align: 'center', type: '', prop: 'worker', label: '施工人员', showOverflowTooltip: true },
|
||||
{ visible: true, align: 'center', type: '', prop: 'workers', label: '施工人员', showOverflowTooltip: true },
|
||||
|
||||
{
|
||||
visible: true,
|
||||
|
|
@ -435,6 +457,7 @@ function reset() {
|
|||
address: null,
|
||||
content: null,
|
||||
statusName: null,
|
||||
workers: null,
|
||||
remarks: null,
|
||||
createTime: null,
|
||||
updateTime: null
|
||||
|
|
@ -442,6 +465,66 @@ function reset() {
|
|||
proxy.resetForm('formRef')
|
||||
}
|
||||
|
||||
// 处理图片上传，转换为Base64
|
||||
function handleImageChange(file) {
|
||||
const isImage = file.raw.type.startsWith('image/')
|
||||
const isLt10M = file.raw.size / 1024 / 1024 < 10
|
||||
|
||||
if (!isImage) {
|
||||
proxy.$modal.msgError('上传文件只能是图片格式!')
|
||||
return
|
||||
}
|
||||
if (!isLt10M) {
|
||||
proxy.$modal.msgError('上传图片大小不能超过 10MB!')
|
||||
return
|
||||
}
|
||||
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(file.raw)
|
||||
reader.onload = (e) => {
|
||||
form.value.imageUrl = e.target.result
|
||||
form.value.image = e.target.result
|
||||
}
|
||||
}
|
||||
|
||||
// 将图片地址转换为Base64
|
||||
function convertImageUrlToBase64(imageUrl) {
|
||||
// 创建一个新的Image对象
|
||||
const img = new Image()
|
||||
img.crossOrigin = 'anonymous' // 处理跨域问题
|
||||
|
||||
img.onload = function () {
|
||||
// 创建canvas
|
||||
const canvas = document.createElement('canvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
|
||||
// 设置canvas尺寸
|
||||
canvas.width = img.width
|
||||
canvas.height = img.height
|
||||
|
||||
// 在canvas上绘制图片
|
||||
ctx.drawImage(img, 0, 0)
|
||||
|
||||
// 转换为Base64
|
||||
try {
|
||||
const base64 = canvas.toDataURL('image/jpeg', 0.8)
|
||||
form.value.imageUrl = base64
|
||||
form.value.image = base64
|
||||
} catch (error) {
|
||||
console.error('转换Base64失败:', error)
|
||||
proxy.$modal.msgError('图片转换失败，请重新上传')
|
||||
}
|
||||
}
|
||||
|
||||
img.onerror = function () {
|
||||
console.error('图片加载失败:', imageUrl)
|
||||
proxy.$modal.msgError('图片加载失败，请重新上传')
|
||||
}
|
||||
|
||||
// 设置图片源
|
||||
img.src = imageUrl
|
||||
}
|
||||
|
||||
/**
|
||||
* 查看
|
||||
* @param {*} row
|
||||
|
|
@ -458,6 +541,11 @@ function handlePreview(row) {
|
|||
form.value = {
|
||||
...data
|
||||
}
|
||||
|
||||
// 如果存在图片地址，转换为Base64用于显示
|
||||
if (data.imageUrl) {
|
||||
convertImageUrlToBase64(data.imageUrl)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -485,6 +573,11 @@ function handleUpdate(row) {
|
|||
form.value = {
|
||||
...data
|
||||
}
|
||||
|
||||
// 如果存在图片地址，转换为Base64
|
||||
if (data.imageUrl) {
|
||||
convertImageUrlToBase64(data.imageUrl)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -495,6 +588,19 @@ function submitForm() {
|
|||
if (valid) {
|
||||
state.submitLoading = true
|
||||
|
||||
if (form.value.worker != '') {
|
||||
form.value.workers = form.value.worker.split(',')
|
||||
}
|
||||
// console.log(form.value)
|
||||
// // 暂时显示成功消息，不调用后端接口
|
||||
// setTimeout(() => {
|
||||
// proxy.$modal.msgSuccess('提交成功')
|
||||
// open.value = false
|
||||
// state.submitLoading = false
|
||||
// }, 1000)
|
||||
|
||||
// 注释掉原有的提交逻辑
|
||||
|
||||
if (form.value.id != undefined && opertype.value === 2) {
|
||||
updateCamWorkrecord(form.value).then((res) => {
|
||||
proxy.$modal.msgSuccess('修改成功')
|
||||
|
|
@ -820,6 +926,50 @@ handleQuery()
|
|||
}
|
||||
}
|
||||
|
||||
// 图片上传样式
|
||||
.upload-demo {
|
||||
:deep(.el-upload-dragger) {
|
||||
border: 2px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-upload__text) {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
|
||||
em {
|
||||
color: #409eff;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-upload__tip) {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
margin-top: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d9d9d9;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 1200px) {
|
||||
.work-record-table {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user