违禁物品管理展示列表开发，上传视频组件优化可预览效果

src/components/myUploadVideo.vue

@@ -4,14 +4,36 @@
     <div class="upload-tip">建议比例1:1，不超过60s，视频{{ fileSize }}MB以内</div>
     <el-upload multiple :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList" :data="data"
       :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess"
-      :show-file-list="false" :headers="headers" class="upload-file-uploader" list-type="picture-card" ref="fileUpload"
+      :show-file-list="true" :headers="headers" class="upload-file-uploader" list-type="picture-card" ref="fileUpload"
       v-if="!disabled" :class="{ hide: fileList.length >= limit }">
       <!-- 上传按钮 -->
       <el-icon size="30px" color="red">
         <Plus />
       </el-icon>
       <div class="el-upload__text">上传视频</div>
+
+      <!-- 自定义文件列表项 -->
+      <template #file="{ file }">
+        <div class="custom-upload-item">
+          <video :src="`${baseUrl}${file.url}`" class="el-upload-list__item-thumbnail" controls
+            @click.stop="handleVideoPlay(file)"></video>
+
+          <!-- 自定义删除按钮（带文字） -->
+          <span class="custom-delete-btn" @click.stop="handleDelete(file)">
+            <el-icon>
+              <Delete />
+            </el-icon>
+            <span>删除</span>
+          </span>
+        </div>
+      </template>
     </el-upload>
+    <!-- <div class="upload-hint">至多可上传{{ limit }}个视频</div> -->
+
+    <el-dialog v-model="dialogVisible" title="视频预览" width="800px" append-to-body>
+      <video ref="previewVideo" :src="dialogVideoUrl" controls autoplay
+        style="display: block; max-width: 100%; margin: 0 auto"></video>
+    </el-dialog>
     <!-- 上传提示 -->
     <!-- <div class="el-upload__tip" v-if="showTip && !disabled">
       请上传
@@ -20,7 +42,7 @@
 的文件
 </div> -->
     <!-- 文件列表 -->
-    <transition-group ref="uploadFileList" class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+    <!-- <transition-group ref="uploadFileList" class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
       <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
         <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
           <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
@@ -29,13 +51,14 @@
           <el-link :underline="false" @click="handleDelete(index)" type="danger" v-if="!disabled">&nbsp;删除</el-link>
         </div>
       </li>
-    </transition-group>
+    </transition-group> -->
   </div>
 </template>
 
 <script setup>
 import { getToken } from "@/utils/auth"
 import Sortable from 'sortablejs'
+import { ref, nextTick } from "vue"
 
 const props = defineProps({
   modelValue: [String, Object, Array],
@@ -91,6 +114,9 @@ const fileList = ref([])
 const showTip = computed(
   () => props.isShowTip && (props.fileType || props.fileSize)
 )
+let dialogVisible = ref(false);
+let dialogVideoUrl = ref("");
+let previewVideo = ref(null);
 
 watch(() => props.modelValue, val => {
   if (val) {
@@ -186,6 +212,23 @@ function uploadedSuccessfully() {
   }
 }
 
+// 新增的视频播放处理方法
+function handleVideoPlay(file) {
+  dialogVideoUrl.value = file.url;
+  dialogVisible.value = true;
+
+  // 确保对话框完全打开后再播放
+  nextTick(() => {
+    const video = previewVideo.value;
+    if (video) {
+      video.load();
+      video.play().catch(e => {
+        console.log("自动播放失败:", e);
+      });
+    }
+  });
+}
+
 // 获取文件名称
 function getFileName(name) {
   // 如果是url那么取最后的名字 如果不是直接返回
@@ -228,7 +271,7 @@ onMounted(() => {
 <style scoped lang="scss">
 // .el-upload--picture-card 控制加号部分
 :deep(.hide .el-upload--picture-card) {
-    display: none;
+  display: none;
 }
 
 .file-upload-darg {

src/components/tableComponent.vue

@@ -39,7 +39,7 @@
         width="55"
         align="center"
       />
-      <el-table-column label="序号" width="60" v-if="showSort">
+      <el-table-column label="排序" width="60" v-if="showSort">
         <template #default="{ $index }">
           {{ (currentPage - 1) * pageSize + $index + 1 }}
         </template>

src/router/index.js

@@ -186,6 +186,18 @@ export const constantRoutes = [
           noCache: false,
           link: null,
         },
+      },
+      {
+        path: 'goods/contrabandManage',
+        component: () => import('@/views/goods/contrabandManage/index'),
+        name: 'contrabandManage',
+        hidden: false,
+        meta: {
+          title: "违禁物品管理",
+          icon: "",
+          noCache: false,
+          link: null,
+        },
       }
     ],
   },

src/views/goods/contrabandManage/index.vue

@@ -0,0 +1,342 @@
+<template>
+  <div class="app-container customer-control">
+    <div class="container-custom">
+      <!-- 搜索栏 -->
+      <div ref="searchBarRef" class="search-box">
+        <div class="search-bar">
+          <div class="search-bar-left">
+            <el-form
+              ref="searchForm"
+              :inline="true"
+              :model="formInline"
+              class="demo-form-inline"
+              :label-width="'auto'"
+            >
+              <el-form-item label="物品名称" prop="contrabandName">
+                <el-input
+                  v-model="formInline.contrabandName"
+                  placeholder="请输入物品名称"
+                  clearable
+                />
+              </el-form-item>
+              <br>
+              <el-form-item
+                label="添加时间"
+                prop="startDate"
+                style="margin-right: 0"
+              >
+                <el-date-picker
+                  v-model="formInline.startDate"
+                  type="date"
+                  value-format="YYYY-MM-DD"
+                  placeholder="请选择起始日期"
+                  clearable
+                  :disabled-date="disableStartDate"
+                  style="width: 160px"
+                />
+                <span
+                  style="width: 30px; text-align: center; display: inline-block"
+                >
+                  -
+                </span>
+                <el-date-picker
+                  v-model="formInline.endDate"
+                  type="date"
+                  value-format="YYYY-MM-DD"
+                  placeholder="请选择截止日期"
+                  clearable
+                  :disabled-date="disableEndDate"
+                  style="width: 160px"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+          <div class="search-bar-right">
+            <el-button type="primary" icon="Search" @click="onSubmit"
+              >查询</el-button
+            >
+            <el-button
+              icon="Refresh"
+              style="margin: 16px 0 0 0"
+              @click="resetForm"
+              >重置</el-button
+            >
+          </div>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
+        <div class="table-toolbar">
+          <el-button
+            icon="delete"
+            @click="batchDelete"
+            :disabled="btnStatus"
+            style="margin-right: 10px"
+            >批量删除</el-button
+          >
+          <router-link to="/goods/addGoods">
+            <el-button type="primary" icon="plus" @click="onSubmit"
+              >添加分类</el-button
+            >
+          </router-link>
+        </div>
+        <tableComponent
+          :table-data="tableData"
+          :columns="columns"
+          :show-border="false"
+          :show-selection="true"
+          :header-cell-class-name="getHeaderClass"
+          @page-change="handlePaginationChange"
+          :loading="tableLoading"
+          @selection-change="handleSelectionChange"
+          :total="tableTotal"
+          :current-page="formInline.current"
+          :page-size="formInline.size"
+          :showSort="true"
+        >
+          <!-- 自定义-状态 -->
+          <template #goodsUrl="slotProps">
+            <div class="table-cell-img-box">
+              <img
+                :src="slotProps.row.goodsUrl"
+                class="table-cell-img"
+                alt=""
+              />
+            </div>
+          </template>
+
+          <!-- 自定义-操作 -->
+          <template #action="slotProps">
+            <el-tooltip effect="dark" placement="bottom-end">
+              <template #content>
+                <div class="custom-tooltip-content">
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="seeDetails(slotProps.row)"
+                  >
+                    <View />
+                  </el-icon>
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="toUpload(slotProps.row)"
+                  >
+                    <Upload />
+                  </el-icon>
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="toDownload(slotProps.row)"
+                  >
+                    <Download />
+                  </el-icon>
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="handleEdit(slotProps.row)"
+                  >
+                    <Edit />
+                  </el-icon>
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="handleDelete(slotProps.row)"
+                  >
+                    <Delete />
+                  </el-icon>
+                </div>
+              </template>
+
+              <span class="el-dropdown-link">
+                <el-icon>
+                  <More />
+                </el-icon>
+              </span>
+            </el-tooltip>
+          </template>
+        </tableComponent>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
+import tableComponent from "@/components/tableComponent.vue";
+import Mock from "mockjs";
+import { getGoodManageInfo } from "@/api/goods/info";
+import { ca } from "element-plus/es/locales.mjs";
+
+const formInline = reactive({
+  contrabandName: "",
+  startDate: "",
+  endDate: "",
+  current: 1,
+  size: 10,
+});
+// 禁用开始日期的逻辑（不能晚于已选的结束日期）
+const disableStartDate = (time) => {
+  if (!formInline.endDate) return false;
+  const endDate = new Date(formInline.endDate);
+  return time.getTime() > endDate.getTime();
+};
+
+// 禁用结束日期的逻辑（不能早于已选的开始日期）
+const disableEndDate = (time) => {
+  if (!formInline.startDate) return false;
+  const startDate = new Date(formInline.startDate).setHours(0, 0, 0, 0);
+  const currentDate = new Date(time).setHours(0, 0, 0, 0);
+  return currentDate < startDate;
+};
+
+const searchForm = ref(null);
+const onSubmit = () => {
+  console.log("submit!");
+  formInline.current = 1;
+  console.log(formInline);
+  loadData();
+};
+const resetForm = () => {
+  searchForm.value.resetFields();
+};
+
+// 表格数据
+const tableData = ref([]);
+const selectedIds = ref([]);
+const btnStatus = computed(() => {
+  return selectedIds.value.length <= 0;
+});
+const tableLoading = ref(false);
+const tableTotal = ref(0);
+let nowClickRow = ref({});
+// 列配置
+const columns = ref([]);
+const columns1 = ref([
+  { prop: "id", label: "ID" },
+  { prop: "contrabandName", label: "违禁物品名称" },
+  { prop: "contrabandParameter", label: "违禁物品参数" },
+  { prop: "createTime", label: "创建时间" },
+  { prop: "action", label: "操作", slotName: "action" },
+]);
+
+// 生成模拟数据
+const generateMockData = () => {
+  return Mock.mock({
+    "list|10": [
+      {
+        "id|+1": 10000,
+        contrabandName: '@pick(["毒品", "炸药", "血腥"])', //分类名称
+        contrabandParameter: '@pick(["手动编辑", "图片上传"])', //状态
+        createTime: "@datetime", //添加时间
+      },
+    ],
+  }).list;
+};
+// 加载数据
+const loadData = async () => {
+  tableLoading.value = true;
+  tableData.value = generateMockData();
+  tableTotal.value = tableData.value.length;
+  // try {
+  //   let response = await getGoodManageInfo(formInline);
+  //   console.log(response);
+  //   if (response.code == 200) {
+  //     tableData.value = response.data.records;
+  //     tableTotal.value = response.data.total;
+  //   }
+  // } catch (error) {
+  //   console.log(error);
+  // }
+  tableLoading.value = false;
+};
+
+// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
+const getHeaderClass = ({ column }) => {
+  return "custom-header";
+};
+// 分页变化
+const handlePaginationChange = ({ page, pageSize }) => {
+  console.log("分页变化:", page, pageSize);
+  formInline.current = page;
+  formInline.size = pageSize;
+  // 这里可以调用API获取新数据
+  loadData();
+};
+// 多选框变化
+const handleSelectionChange = (selection, ids) => {
+  console.log("选中项:", selection, ids);
+  selectedIds.value = ids;
+};
+
+// 查看详情
+const seeDetails = (row) => {
+  nowClickRow.value = row;
+  console.log("要查看详情的行:", row);
+};
+const toUpload = () => {
+  console.log("向上移动:");
+};
+const toDownload = () => {
+  console.log("向下移动:");
+};
+// 编辑操作
+const handleEdit = (row) => {
+  nowClickRow.value = row;
+  console.log("要编辑的行:", row);
+};
+// 删除操作
+const handleDelete = (row) => {
+  nowClickRow.value = row;
+  console.log("要删除的行:", row);
+};
+// 批量删除
+const batchDelete = () => {
+  console.log("要删除的行:", selectedIds.value);
+};
+
+const titleRef = ref(null);
+const searchBarRef = ref(null);
+const tableViewportHeight = ref(0);
+// 精确计算可用高度
+const calculateTableHeight = () => {
+  // 获取窗口总高度
+  const windowHeight = window.innerHeight;
+
+  // 获取各组件高度
+  const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
+  const searchBarHeight = searchBarRef.value?.offsetHeight || 0;
+
+  // 计算容器内边距补偿（根据实际样式调整）
+  const paddingCompensation = 130;
+
+  // 最终计算
+  tableViewportHeight.value =
+    windowHeight - headerHeight - searchBarHeight - paddingCompensation;
+  // console.log(tableViewportHeight.value);
+};
+// 组件挂载时加载数据
+onMounted(() => {
+  columns.value = columns1.value;
+  loadData();
+
+  calculateTableHeight();
+
+  // 添加响应式监听
+  window.addEventListener("resize", calculateTableHeight);
+
+  // 监听DOM变化（适用于动态变化的header/searchbar）
+  const observer = new ResizeObserver(calculateTableHeight);
+  if (titleRef.value?.$el) observer.observe(titleRef.value.$el);
+  if (searchBarRef.value) observer.observe(searchBarRef.value);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", calculateTableHeight);
+});
+</script>
+<style lang="scss" scoped>
+.table-toolbar {
+  width: 300px;
+  height: 50px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: flex;
+  justify-content: end;
+  padding: 14px 16px 0 0;
+}
+</style>

src/views/goods/goodsCategory/index.vue

@@ -235,7 +235,6 @@ let nowClickRow = ref({});
 // 列配置
 const columns = ref([]);
 const columns1 = ref([
-   { prop: "sort", label: "排序" },
   { prop: "id", label: "ID" },
   { prop: "categoryName", label: "类别" },
   { prop: "addTime", label: "添加时间" },
@@ -272,7 +271,6 @@ const generateMockData = () => {
     "list|10": [
       {
         "id|+1": 10000,
-        "sort|+1": 1,
         categoryName: '@pick(["种子", "化肥", "农药"])', //分类名称
         addTime: "@datetime", //添加时间
         categoryStatus: '@pick(["已启用", "未启用"])', //状态

src/views/goods/goodsManage/editGoods.vue

@@ -656,6 +656,20 @@ const getGoodsInfo = async (goodId) => {
     formInline.categoryId2 = formData.value?.categoryId2 ?? "";
     formInline.categoryId3 = formData.value?.categoryId3 ?? "";
 
+    formInline.netWeight = formData.value?.netWeight ?? [
+      {
+        goodSpecs: "",
+        goodPrice: 1,
+        goodStock: 1,
+        netContent: 1,
+        unit: "kg"
+      }
+    ];
+    formInline.attribute = formData.value?.attribute ?? [{
+      name: '', //属性
+      value: '', //内容
+    }];
+
     formInline.selectedAddress = formData.value?.areaAddress?.split(",") ?? [];
 
     formInline.goodUrl = formData.value?.goodUrl?.split(",").slice(0, 5).join(',') ?? "";