333

src/api/business/camworkrecord.js

@@ -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',
+    url: 'addworkrecord',
-    method: 'PUT',
+    method: 'post',
     data: data,
   })
 }

src/views/business/CamWorkrecord.vue

@@ -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 {