修改客户所提基础问题

src/views/user/rent-manage/index.vue

@@ -48,22 +48,6 @@
         <el-col :span="18">
           <el-form-item>
             <el-button class="primary-lease" type="primary" @click="addContract">新增装备</el-button>
-            <el-col :span="3" :offset="1">
-              <el-upload
-                class="primary-lease"
-                :action="uploadUrl"
-                :headers="headerInfo"
-                :show-file-list="false"
-                accept=".xlsx"
-                :on-success="handleUpload"
-                name="file"
-              >
-                <el-button type="primary">批量装备上传</el-button>
-              </el-upload>
-            </el-col>
-            <a :href="uploadUrlTemp" download="装备模板下载">
-              <el-button class="primary-lease" type="primary" style="margin-left: 20px">装备模板下载</el-button>
-            </a>
           </el-form-item>
         </el-col>
       </el-row>
@@ -155,6 +139,75 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <!-- 图片一类的处理 -->
+        <el-row :gutter="20" v-if="!isViewForm">
+          <el-col :span="24">
+            <el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
+              <div class="tipBox">
+                *注: 支持格式：.jpg、.png 单个文件大小不能超过5M
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item
+              style="font-weight: bold"
+              label="主展示图："
+              prop="mainFileList"
+            >
+              <div
+                class="img-list"
+                v-if="addAndEditForm.mainFileList.length > 0 && !isAdd"
+              >
+                <div
+                  v-for="(j, i) in addAndEditForm.mainFileList"
+                  :key="j.fileUrl"
+                  class="img-items"
+                >
+                  <img :src="j.fileUrl" alt="" />
+
+                  <div class="mask-img">
+                    <div>
+                      <el-icon
+                        class="delete-icon"
+                        @click="onDeleteImgInMain(i)"
+                        v-if="!isViewForm"
+                      >
+                        <DeleteFilled />
+                      </el-icon>
+                      <el-icon
+                        class="delete-icon"
+                        style="margin-left: 10px"
+                        @click="onPreviewImg(j.fileUrl)"
+                      >
+                        <ZoomIn />
+                      </el-icon>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <UploadComponentNew
+                v-if="!isViewForm"
+                :maxSize="5"
+                :max-limit="6"
+                width="100px"
+                height="100px"
+                :actionUrl="uploadUrl"
+                :autoUpload="true"
+                :multiple="true"
+                :minLimit="addAndEditForm.mainFileList.length"
+                listType="picture-card"
+                :acceptTypeList="['.jpg', '.png']"
+                @onFileChange="onMainFileChange"
+              >
+                <template v-slot:default>
+                  <el-icon size="42" color="#aaa"><Plus /></el-icon>
+                </template>
+              </UploadComponentNew>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -167,6 +220,7 @@
 </template>
 
 <script setup lang="ts">
+import UploadComponentNew from 'components/uploadComponentNew/index.vue'
 import PagingComponent from 'components/PagingComponent/index.vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ref, reactive, onMounted } from 'vue'
@@ -183,7 +237,9 @@ import {
 } from 'http/api/owner-manage'
 
 const uploadUrlTemp = ref('')
+const isViewForm = ref(false)
 const qualityLis = ref<any>([])
+const isAdd = ref(false)
 const queryFormRef = ref<any>(null)
 const total = ref(0)
 const equipmentNameOptions = ref<any[]>([])
@@ -200,15 +256,22 @@ const addAndEditForm = ref<any>({
   maType: '',
   maModel: '',
   maNum: '',
-  type: '1'
+  type: '1',
+  mainFileList: [], // 确保初始化
+  mainFileTempList: [] // 临时存储新上传的文件
 })
 const addAndEditFormRef = ref()
+const mainFileList: any = ref([]) //主展示
 const settleinTitle = ref('')
 const dialogVisibleSettlein: any = ref(false)
 const headerInfo = reactive({
   Authorization: 'Bearer ' + store2.token,
 })
-const uploadUrl = import.meta.env.VITE_API_URL + '/material-mall/owner/importData?type='+2
+const uploadUrl = import.meta.env.VITE_API_URL + '/file/upload'
+
+const onDeleteImgInMain = (index: any) => {
+  addAndEditForm.value.mainFileList.splice(index, 1)
+}
 
 const handleUpload = (file: any, fileList: any) => {
   if (file.code == 200) {
@@ -219,6 +282,15 @@ const handleUpload = (file: any, fileList: any) => {
   getContractListData()
 }
 
+// 处理上传成功的图片
+const onMainFileChange = (fileList: any[]) => {
+  // 将上传的文件信息存储到临时列表
+  addAndEditForm.value.mainFileTempList = fileList.map(file => ({
+    fileName: file.name, // 文件名
+    fileUrl: file.url    // 文件URL
+  }))
+}
+
 // 获取列表
 const getContractListData = async () => {
   const { data: res }: any = await getContractListApi(queryParams)
@@ -256,28 +328,36 @@ const addContract = () => {
   settleinTitle.value = '外租装备新建'
   dialogVisibleSettlein.value = true
   addAndEditForm.value.id = null
+  isViewForm.value = false
   addAndEditForm.value.maNameId = ''
   addAndEditForm.value.maType = ''
   addAndEditForm.value.maModel = ''
   addAndEditForm.value.maNum = ''
+  addAndEditForm.value.mainFileList = [] // 修复：加.value
+  addAndEditForm.value.mainFileTempList = [] // 修复：加.value
 }
 
-// 编辑装备
+//  编辑装备时加载已有图片
 const onContract = (row: any) => {
-  console.log('编辑行数据:', row) // 调试用
-  console.log('当前下拉选项:', equipmentNameOptions.value) // 调试用
+  // 加载已有图片（如果后端返回了图片数据）
+  if (row.mainFileList) {
+    addAndEditForm.value.mainFileList = row.mainFileList.map((img: any) => ({
+      fileName: img.fileName,
+      fileUrl: img.fileUrl
+    }))
+  } else {
+    addAndEditForm.value.mainFileList = []
+  }
   
+  addAndEditForm.value.mainFileTempList = []
   addAndEditForm.value.id = row.id
-  
   // 通过装备类目匹配下拉选项，获取对应的id
   const matchedOption = equipmentNameOptions.value.find(option => option.label === row.maName)
   if (matchedOption) {
     addAndEditForm.value.maNameId = matchedOption.value
-    console.log('通过名称匹配到ID:', matchedOption.value)
   } else {
     // 如果找不到匹配，尝试使用其他字段
     addAndEditForm.value.maNameId = row.maNameId || row.maName_id || row.equipmentId || row.id
-    console.log('使用备用ID:', addAndEditForm.value.maNameId)
   }
   
   addAndEditForm.value.maType = row.maType
@@ -314,6 +394,13 @@ const addAndEditFormRules = reactive({
 const onSubmit = () => {
   addAndEditFormRef.value.validate(async (valid: any) => {
     if (valid) {
+      // 合并临时图片到主图片列表
+      addAndEditForm.value.mainFileList = [
+        ...addAndEditForm.value.mainFileList,
+        ...addAndEditForm.value.mainFileTempList
+      ]
+      // 清空临时列表
+      addAndEditForm.value.mainFileTempList = []
       const SEN_API = settleinTitle.value === '外租装备修改' ? editContractApi : addContractApi
       const res: any = await SEN_API(addAndEditForm.value)
       if (res.code === 200) {
@@ -359,6 +446,12 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.tipBox {
+  color: red;
+  font-size: 12px;
+  margin-left: 20px;
+}
+
 :deep.editor {
   height: 300px;
 }
@@ -434,4 +527,4 @@ onMounted(() => {
 :deep(.el-overlay) {
   z-index: 99 !important;
 }
-</style> 
+</style>