Bug修复

src/components/Materials/src/Materials.vue

@@ -1,25 +1,12 @@
 <template>
   <div v-if="type == 'image'">
-
-    <ul
-      v-for="(item, index) in value"
-      :key="index"
-      class="el-upload-list el-upload-list--picture-card"
-    >
-      <li
-        tabindex="0"
-        class="el-upload-list__item is-ready"
-        :style="'width: ' + width + 'px;height: ' + height + 'px'"
-      >
+    <ul v-for="(item, index) in value" :key="index" class="el-upload-list el-upload-list--picture-card">
+      <li tabindex="0" class="el-upload-list__item is-ready" :style="'width: ' + width + 'px;height: ' + height + 'px'">
         <div>
           <img :src="item" alt="" class="el-upload-list__item-thumbnail" />
           <span class="el-upload-list__item-actions">
-            <span
-              v-if="index != 0"
-              class="el-upload-list__item-preview"
-              @click="moveMaterial(index, 'up')"
-            >
-            <Icon icon="ep:back" />
+            <span v-if="index != 0" class="el-upload-list__item-preview" @click="moveMaterial(index, 'up')">
+              <Icon icon="ep:back" />
             </span>
             <span class="el-upload-list__item-preview" @click="zoomMaterial(index)">
               <i class="el-icon-view"></i>
@@ -28,11 +15,7 @@
             <span class="el-upload-list__item-delete" @click="deleteMaterial(index)">
               <Icon icon="ep:delete" />
             </span>
-            <span
-              v-if="index != value.length - 1"
-              class="el-upload-list__item-preview"
-              @click="moveMaterial(index, 'down')"
-            >
+            <span v-if="index != value.length - 1" class="el-upload-list__item-preview" @click="moveMaterial(index, 'down')">
               <Icon icon="ep:right" />
             </span>
           </span>
@@ -45,7 +28,8 @@
       tabindex="0"
       class="el-upload el-upload--picture-card"
       :style="'width: ' + width + 'px;height: ' + height + 'px;' + 'line-height:' + height + 'px;'"
-      @click="toSeleteMaterial">
+      @click="toSeleteMaterial"
+    >
       <Icon icon="ep:plus" />
     </div>
 
@@ -53,16 +37,9 @@
       <el-container>
         <el-aside width="100px">
           <div style="margin-bottom: 10px">
-            <el-button class="el-icon-plus" size="small" @click="handleMaterialgroupAdd()">
-              添加分组
-            </el-button>
+            <el-button class="el-icon-plus" size="small" @click="handleMaterialgroupAdd()"> 添加分组 </el-button>
           </div>
-          <el-tabs
-            v-model="materialgroupObjId"
-            v-loading="materialgroupLoading"
-            tab-position="left"
-            @tab-click="tabClick"
-          >
+          <el-tabs v-model="materialgroupObjId" v-loading="materialgroupLoading" tab-position="left" @tab-click="tabClick">
             <el-tab-pane v-for="item in materialgroupList" :key="item.id" :name="item.id">
               <template #label>
                 <span> {{ item.name }}</span>
@@ -80,7 +57,6 @@
                     <span v-if="materialgroupObj.id != '-1'">
                       <el-button
                         size="small"
-                        type="text"
                         class="el-icon-edit"
                         style="margin-left: 10px"
                         @click="handleMaterialgroupEdit(materialgroupObj)"
@@ -88,11 +64,10 @@
                       >
                       <el-button
                         size="small"
-                        type="text"
                         class="el-icon-delete"
                         style="margin-left: 10px; color: red"
                         @click="materialgroupDelete(materialgroupObj)"
-                        >{{t('action.delete')}}</el-button
+                        >{{ t('action.delete') }}</el-button
                       >
                     </span>
                   </el-col>
@@ -114,14 +89,7 @@
               </div>
             </template>
             <div v-loading="tableLoading">
-              <el-alert
-                v-if="tableData.length <= 0"
-                title="暂无数据"
-                type="info"
-                :closable="false"
-                center
-                show-icon
-              />
+              <el-alert v-if="tableData.length <= 0" title="暂无数据" type="info" :closable="false" center show-icon />
               <el-checkbox-group v-model="urls" :max="num - value.length">
                 <el-row :gutter="5">
                   <el-col v-for="(item, index) in tableData" :key="index" :span="4">
@@ -137,9 +105,7 @@
                         <el-checkbox class="material-name" :label="item.url"> 选择 </el-checkbox>
                         <el-row>
                           <el-col :span="24" class="col-do">
-                            <el-button type="text" size="medium" @click="materialDel(item)"
-                              >{{t('action.delete')}}</el-button
-                            >
+                            <el-button size="default" @click="materialDel(item)">{{ t('action.delete') }}</el-button>
                           </el-col>
                         </el-row>
                       </div>
@@ -164,8 +130,8 @@
       </el-container>
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="listDialogVisible = false">{{t('common.cancel')}}</el-button>
-          <el-button type="primary" @click="sureUrls">{{t('common.confirm')}}</el-button>
+          <el-button @click="listDialogVisible = false">{{ t('common.cancel') }}</el-button>
+          <el-button type="primary" @click="sureUrls">{{ t('common.confirm') }}</el-button>
         </span>
       </template>
     </el-dialog>
@@ -174,7 +140,8 @@
 
 <script setup name="Materials">
 import { ElMessageBox } from 'element-plus'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import {
   getList as materialgroupPage,
   addObj as materialgroupAdd,
@@ -184,6 +151,8 @@ import {
 import { getPage, addObj, delObj } from '@/api/tools/material'
 import { getAccessToken } from '@/utils/auth'
 
+const { t } = useI18n()
+
 const props = defineProps({
   modelValue: {
     type: Array,
@@ -220,7 +189,7 @@ const props = defineProps({
 
 const headers = ref({
   // Authorization: getToken()
-  Authorization: 'Bearer ' + getAccessToken(),
+  Authorization: 'Bearer ' + getAccessToken()
 })
 //const value = ref(props.value)
 const dialogVisible = ref(false)
@@ -247,14 +216,13 @@ const urls = ref([])
 const value = computed({
   get() {
     //  console.log('length:',props.modelValue.length)
-    if(!props.modelValue || props.modelValue.length == 0){
-        return []
+    if (!props.modelValue || props.modelValue.length == 0) {
+      return []
     }
     if (Array.isArray(props.modelValue)) {
       return props.modelValue
     }
     return [props.modelValue]
-    
   }
 })
 
@@ -293,7 +261,6 @@ function deleteMaterial(index) {
     //   emit('update:modelValue', urls.value[0])
     // }
     emit('update:modelValue', value.value)
-
   })
 }
 function toSeleteMaterial() {
@@ -460,11 +427,7 @@ function handleSuccess(response, file, fileList) {
   })
 }
 function beforeUpload(file) {
-  const isPic =
-    file.type === 'image/jpeg' ||
-    file.type === 'image/png' ||
-    file.type === 'image/gif' ||
-    file.type === 'image/jpg'
+  const isPic = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg'
   const isLt2M = file.size / 1024 / 1024 < 2
   if (!isPic) {
     this.$message.error('上传图片只能是 JPG、JPEG、PNG、GIF 格式!')
@@ -478,19 +441,17 @@ function beforeUpload(file) {
 
 const emit = defineEmits(['update:modelValue'])
 function sureUrls() {
-  console.log('value.value.length:',value.value.length)
+  console.log('value.value.length:', value.value.length)
   urls.value.forEach((item) => {
     value.value[value.value.length] = item
   })
-  console.log('urls.value:',value.value)
+  console.log('urls.value:', value.value)
   listDialogVisible.value = false
   if (urls.value.length > 1 || props.num > 1) {
     emit('update:modelValue', value.value)
   } else {
     emit('update:modelValue', value.value[0])
   }
-  
-  
 }
 </script>