feat: 系统banner功能开发；

jd-logistics-ui-v3/src/views/logistics/banner/index.vue

@@ -1,61 +1,37 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="轮播图名称" prop="bannerName">
+      <el-form-item label="名称" prop="bannerName">
         <el-input
           v-model="queryParams.bannerName"
-          placeholder="请输入轮播图名称"
+          placeholder="请输入名称"
           clearable
           @keyup.enter="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="图片存储路径" prop="imageUrl">
-        <el-input
-          v-model="queryParams.imageUrl"
-          placeholder="请输入图片存储路径"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="点击图片时跳转的链接" prop="linkUrl">
-        <el-input
-          v-model="queryParams.linkUrl"
-          placeholder="请输入点击图片时跳转的链接"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="排序值" prop="sortOrder">
-        <el-input
-          v-model="queryParams.sortOrder"
-          placeholder="请输入排序值"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="是否激活显示 0表示不显示，1表示显示" prop="isActive">
-        <el-input
+      <el-form-item label="是否显示" prop="isActive">
+        <el-select
           v-model="queryParams.isActive"
-          placeholder="请输入是否激活显示 0表示不显示，1表示显示"
+          placeholder="请选择是否显示"
           clearable
-          @keyup.enter="handleQuery"
-        />
+        >
+          <el-option label="是" :value="1" />
+          <el-option label="否" :value="0" />
+        </el-select>
       </el-form-item>
-      <el-form-item label="部门id" prop="deptId">
-        <el-input
-          v-model="queryParams.deptId"
-          placeholder="请输入部门id"
+      <el-form-item label="系统类型" prop="sysType">
+        <el-select
+          v-model="queryParams.sysType"
+          placeholder="请选择系统类型"
           clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="用户id" prop="userId">
-        <el-input
-          v-model="queryParams.userId"
-          placeholder="请输入用户id"
-          clearable
-          @keyup.enter="handleQuery"
-        />
+        >
+          <el-option
+            v-for="dict in banner_sys_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -107,16 +83,31 @@
 
     <el-table v-loading="loading" :data="bannerList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="轮播图id" align="center" prop="bannerId" />
-      <el-table-column label="轮播图名称" align="center" prop="bannerName" />
-      <el-table-column label="图片存储路径" align="center" prop="imageUrl" />
-      <el-table-column label="点击图片时跳转的链接" align="center" prop="linkUrl" />
+      <el-table-column label="名称" align="center" prop="bannerName" />
+      <el-table-column label="轮播图" align="center" prop="imageUrl">
+        <template #default="scope">
+          <el-image
+            :src="scope.row.imageUrl"
+            :preview-src-list="[scope.row.imageUrl]"
+            fit="cover"
+            style="width: 60px; height: 60px; border-radius: 4px;"
+            :z-index="9999"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="跳转的链接" align="center" prop="linkUrl" />
       <el-table-column label="排序值" align="center" prop="sortOrder" />
-      <el-table-column label="是否激活显示 0表示不显示，1表示显示" align="center" prop="isActive" />
-      <el-table-column label="系统类型 0管理端 1小程序" align="center" prop="sysType" />
+      <el-table-column label="是否显示" align="center" prop="isActive">
+        <template #default="scope">
+          <div>{{ scope.row.isActive === 1 ? '是' : '否' }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="系统类型" align="center" prop="sysType">
+        <template #default="scope">
+          <dict-tag :options="banner_sys_type" :value="scope.row.sysType" />
+        </template>
+      </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="部门id" align="center" prop="deptId" />
-      <el-table-column label="用户id" align="center" prop="userId" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:banner:edit']">修改</el-button>
@@ -139,30 +130,48 @@
         <el-form-item label="轮播图名称" prop="bannerName">
           <el-input v-model="form.bannerName" placeholder="请输入轮播图名称" />
         </el-form-item>
-        <el-form-item label="图片存储路径" prop="imageUrl">
-          <el-input v-model="form.imageUrl" placeholder="请输入图片存储路径" />
+        <el-form-item label="上传图片" prop="imageUrl">
+          <el-upload
+            class="avatar-uploader"
+            :action="uploadUrl"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+            :headers="headers"
+          >
+            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
+            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+          </el-upload>
         </el-form-item>
-        <el-form-item label="点击图片时跳转的链接" prop="linkUrl">
+        <el-form-item label="跳转的链接" prop="linkUrl">
           <el-input v-model="form.linkUrl" placeholder="请输入点击图片时跳转的链接" />
         </el-form-item>
         <el-form-item label="排序值" prop="sortOrder">
           <el-input v-model="form.sortOrder" placeholder="请输入排序值" />
         </el-form-item>
-        <el-form-item label="是否激活显示 0表示不显示，1表示显示" prop="isActive">
-          <el-input v-model="form.isActive" placeholder="请输入是否激活显示 0表示不显示，1表示显示" />
+        <el-form-item label="是否显示" prop="isActive">
+          <el-select v-model="form.isActive" placeholder="请选择是否显示">
+            <el-option
+              v-for="dict in sys_yes_no"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="系统类型" prop="sysType">
+          <el-select v-model="form.sysType" placeholder="请选择系统类型">
+            <el-option
+              v-for="dict in banner_sys_type"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
         </el-form-item>
-        <el-form-item label="删除标志" prop="delFlag">
-          <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
-        </el-form-item>
-        <el-form-item label="部门id" prop="deptId">
-          <el-input v-model="form.deptId" placeholder="请输入部门id" />
-        </el-form-item>
-        <el-form-item label="用户id" prop="userId">
-          <el-input v-model="form.userId" placeholder="请输入用户id" />
-        </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -176,9 +185,20 @@
 
 <script setup name="Banner">
 import { listBanner, getBanner, delBanner, addBanner, updateBanner } from "@/api/logistics/banner"
+import { Plus } from '@element-plus/icons-vue'
+import { getToken } from "@/utils/auth"
+import DictTag from '@/components/DictTag'
+import { useDict } from '@/utils/dict'
 
 const { proxy } = getCurrentInstance()
 
+// 使用标准字典类型
+const { sys_yes_no, banner_sys_type } = proxy.useDict("sys_yes_no", "banner_sys_type")
+
+// 定义上传地址和请求头
+const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/file/upload")
+const headers = ref({ Authorization: "Bearer " + getToken() })
+
 const bannerList = ref([])
 const open = ref(false)
 const loading = ref(true)
@@ -195,19 +215,12 @@ const data = reactive({
     pageNum: 1,
     pageSize: 10,
     bannerName: null,
-    imageUrl: null,
-    linkUrl: null,
-    sortOrder: null,
     isActive: null,
     sysType: null,
     deptId: null,
     userId: null
   },
-  rules: {
-    isActive: [
-      { required: true, message: "是否激活显示 0表示不显示，1表示显示不能为空", trigger: "blur" }
-    ],
-  }
+  rules: {}
 })
 
 const { queryParams, form, rules } = toRefs(data)
@@ -222,6 +235,31 @@ function getList() {
   })
 }
 
+// 图片上传成功后的回调
+function handleAvatarSuccess(res, file) {
+  if(res.code === 200) {
+    // 根据实际返回的数据结构设置图片URL
+    form.value.imageUrl = res.data.url
+  } else {
+    proxy.$message.error('上传失败：' + res.msg)
+  }
+}
+
+// 上传前的校验
+function beforeAvatarUpload(file) {
+  const acceptTypes = ['image/jpeg', 'image/png', 'image/gif']
+  const isAcceptedType = acceptTypes.includes(file.type)
+  const isLt2M = file.size / 1024 / 1024 < 2
+
+  if (!isAcceptedType) {
+    proxy.$message.error('上传图片只能是 JPG/PNG/GIF 格式!')
+  }
+  if (!isLt2M) {
+    proxy.$message.error('上传图片大小不能超过 2MB!')
+  }
+  return isAcceptedType && isLt2M
+}
+
 // 取消按钮
 function cancel() {
   open.value = false
@@ -328,3 +366,32 @@ function handleExport() {
 
 getList()
 </script>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>