feat: 添加文件上传组件

src/views/goods/components/tableDialog.vue

@@ -0,0 +1,18 @@
+<template>
+  <el-dialog
+    :model-value="dialogVisible"
+    :title="dialogTitle"
+    width="30%"
+    @close="handleClose"
+  >
+    <el-form>
+      <el-form-item label="行政区划"></el-form-item>
+      <el-form-item label="隶属"></el-form-item>
+      <el-form-item label="海拔"></el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/views/goods/components/tableList.vue

@@ -22,17 +22,27 @@
         <template v-slot="scope">
           {{ scope.row[index] }}
         </template>
-      </el-table-column>
+        <!-- <template #suffix>
-      <el-table-column label="操作" width="60" align="center">
+          <el-icon class="el-input__icon" @click="handleIconClick">
-        <el-icon><Edit /></el-icon>
+            <edit />
+          </el-icon>
+        </template> -->
       </el-table-column>
     </el-table>
+    <el-button type="primary" @click="handleDialog()">编辑属性</el-button>
   </div>
+  <!-- <tableDialog
+    v-model="dialogVisible"
+    :dialogTitle="dialogTitle"
+    v-if="dialogVisible"
+    :dialogTableValue="dialogTableValue"
+  /> -->
 </template>
 
 <script setup>
 import { onMounted, ref } from 'vue'
-import { Edit } from '@element-plus/icons-vue'
+// import tableDialog from './tableDialog.vue'
+// import { isNull } from '@/utils/filters'
 
 const originData = ref([
   {
@@ -47,6 +57,10 @@ const originTitle = ref(['行政区划', '隶属', '海拔'])
 const transTitle = ref(['字段名', '属性内容'])
 const transData = ref([])
 
+// const dialogVisible = ref(false)
+// const dialogTitle = ref('')
+// const dialogTableValue = ref({})
+
 onMounted(() => {
   // 数组按矩阵思路, 变成转置矩阵
   const matrixData = originData.value.map((row) => {
@@ -68,6 +82,17 @@ onMounted(() => {
   })
   console.log(transData.value)
 })
+
+// const handleDialog = (row) => {
+//   if (isNull(row)) {
+//     dialogTitle = '添加用户'
+//     dialogTableValue.value = {}
+//   } else {
+//     dialogTitle.value = '编辑用户'
+//     dialogTableValue.value = JSON.parse(JSON.stringify(row))
+//   }
+//   dialogTableValue.value = true
+// }
 </script>
 
 <style lang="scss" scoped>

src/views/goods/components/tableUpload.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-upload
+    ref="uploadRef"
+    class="upload-demo"
+    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+    :auto-upload="false"
+    :on-preview="handlePreview"
+    :on-remove="handleRemove"
+    :before-remove="beforeRemove"
+    multiple
+    :limit="2"
+    :on-exceed="handleExceed"
+    :file-list="fileList"
+  >
+    <template #tip>
+      <div class="el-upload__tip">
+        只能上传 doc/docx/pdf 文件，且不超过 20MB
+      </div>
+    </template>
+    <template #trigger>
+      <el-button :icon="FolderAdd"></el-button>
+    </template>
+    <el-button
+      class="ml-3"
+      type="success"
+      @click="submitUpload"
+      :icon="UploadFilled"
+    >
+    </el-button>
+  </el-upload>
+</template>
+
+<script setup>
+import { FolderAdd, UploadFilled } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { ref } from 'vue'
+const fileList = ref([
+  {
+    name: 'food.jpeg',
+    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+  }
+  // {
+  //   name: 'food2.jpeg',
+  //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+  // }
+])
+const uploadRef = ref()
+const submitUpload = () => {
+  uploadRef.value.submit()
+  // uploadRef.value!.submit()
+}
+const handleRemove = (file, fileList) => {
+  console.log(file, fileList)
+}
+const handlePreview = (file) => {
+  console.log(file)
+}
+// 文件上传数量限制
+const handleExceed = (files, fileList) => {
+  ElMessage.warning({
+    message: `最多只能上传 2 个文件，本次添加了 ${files.length} 个文件，共添加
+    了 ${files.length + fileList.length} 个文件`
+  })
+}
+// 阻止移除上传文件操作
+const beforeRemove = (file, fileList) => {
+  return ElMessageBox.confirm(`确定移除 ${file.name}？`, {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消'
+  }).then(
+    () => true,
+    () => false
+  )
+}
+</script>
+
+<style lang="scss" scoped>
+.upload-demo {
+  width: 100%;
+  height: 100%;
+  .ml-3 {
+    margin-left: 15px;
+  }
+}
+</style>

src/views/goods/zdGoods.vue

@@ -1,10 +1,12 @@
 <template>
   <div>表格纵向表头测试</div>
   <Tablelist />
+  <Tableupload />
 </template>
 
 <script setup>
 import Tablelist from './components/tableList.vue'
+import Tableupload from './components/tableUpload.vue'
 </script>
 
 <style lang="scss" scoped></style>