违禁物品管理展示列表开发，上传视频组件优化可预览效果
This commit is contained in:
2090205686@qq.com
parent
306328631a
commit
867573285f
@ -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"> 删除</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那么取最后的名字 如果不是直接返回
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
|
||||
342
src/views/goods/contrabandManage/index.vue
Normal file
342
src/views/goods/contrabandManage/index.vue
Normal file
@ -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>
|
||||
@ -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(["已启用", "未启用"])', //状态
|
||||
|
||||
@ -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(',') ?? "";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user