@@ -47,16 +43,9 @@
diff --git a/src/views/goods/category/use-drag.ts b/src/views/goods/category/use-drag.ts
index 1c0ad62..cdada0f 100644
--- a/src/views/goods/category/use-drag.ts
+++ b/src/views/goods/category/use-drag.ts
@@ -1,39 +1,24 @@
-import type { DragEvents } from 'element-plus/es/components/tree/src/model/useDragNode'
import type { NodeDropType, RenderContentContext } from 'element-plus'
type Node = RenderContentContext['node']
// 开始拖拽
-export const handleDragStart = (node: Node, ev: DragEvents) => {
+export const handleDragStart = (node: Node) => {
console.log('drag start', node)
}
-// 拖拽进入其他节点时触发的事件
-export const handleDragEnter = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
- console.log('tree drag enter:', dropNode.label)
-}
-// 拖拽离开某个节点时触发的事件
-export const handleDragLeave = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
- console.log('tree drag leave:', dropNode.label)
-}
-// 在拖拽节点时触发的事件(类似浏览器的 mouseover 事件)
-export const handleDragOver = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
- console.log('tree drag over:', dropNode.label)
-}
-// 拖拽结束时(可能未成功)触发的事件
-export const handleDragEnd = (
- draggingNode: Node,
- dropNode: Node,
- dropType: NodeDropType,
- ev: DragEvents
-) => {
- console.log('tree drag end:', dropNode && dropNode.label, dropType)
-}
// 拖拽成功完成时触发的事件
-export const handleDrop = (
- draggingNode: Node,
- dropNode: Node,
- dropType: NodeDropType,
- ev: DragEvents
-) => {
- console.log('tree drop:', dropNode.label, dropType)
+
+export const handleDropFinish = (draggingNode: Node, dropNode: Node, dropType: NodeDropType) => {
+ // 获取拖拽之后最新的ids
+ const getSortIds = () => {
+ const parentNode = dropType === 'inner' ? dropNode : dropNode.parent // 获取父节点
+ if (!parentNode || !parentNode.childNodes) return []
+ return parentNode.childNodes.map((node) => node.data.id)
+ }
+ // 获取拖拽到的位置索引
+ const sortIds = getSortIds()
+ if (!sortIds.length) return
+ api.commodity.sortCategory.post!({ categoryIds: sortIds }).then(() => {
+ console.log('tree drop:', draggingNode, dropNode.label, dropType)
+ })
}
diff --git a/src/views/goods/commodity/detail-dialog/choose-file-method.ts b/src/views/goods/commodity/detail-dialog/choose-file-method.ts
new file mode 100644
index 0000000..e44d7a5
--- /dev/null
+++ b/src/views/goods/commodity/detail-dialog/choose-file-method.ts
@@ -0,0 +1,48 @@
+// 选择资源库图片
+export const useImportFile = () => {
+ const showFileExplorer = ref(false)
+ const fileType = {
+ mainImageUrl: '主图',
+ videoUrl: '视频',
+ subImageUrl: '副图'
+ }
+ const curFileType = ref<'mainImageUrl' | 'videoUrl' | 'subImage'>('mainImageUrl')
+ const currentPathArray = ref<{ name: string; id: number }[]>([{ name: '根目录', id: 0 }])
+
+ // 处理文件选择
+ const handleChooseResourceFileCallback = (files: any[] = []) => {
+ handleChooseFiles(curFileType.value, files)
+ }
+
+ const onClickChooseResourceBtn = (type: 'mainImageUrl' | 'videoUrl' | 'subImage') => {
+ curFileType.value = type
+ showFileExplorer.value = true
+ }
+ return {
+ showFileExplorer,
+ currentPathArray,
+ handleChooseResourceFileCallback,
+ onClickChooseResourceBtn
+ }
+}
+
+export const fileList = ref
([])
+export const handleChooseFiles = (
+ fileType: 'mainImageUrl' | 'videoUrl' | 'subImage',
+ files: any = []
+) => {
+ const fileNameMap = {
+ mainImageUrl: '主图',
+ videoUrl: '视频',
+ subImage: '副图'
+ }
+ if (['mainImageUrl', 'videoUrl'].includes(fileType)) {
+ const index = fileList.value.findIndex((item: any) => item.fileType === fileType)
+ if (index !== -1) {
+ fileList.value.splice(index, 1)
+ }
+ }
+ fileList.value.push(
+ ...files.map((item: any) => ({ ...item, fileType, name: fileNameMap[fileType] }))
+ )
+}
diff --git a/src/views/goods/commodity/detail-dialog/config.ts b/src/views/goods/commodity/detail-dialog/config.ts
index 2ec89a4..4486c39 100644
--- a/src/views/goods/commodity/detail-dialog/config.ts
+++ b/src/views/goods/commodity/detail-dialog/config.ts
@@ -4,11 +4,12 @@ export const initConfig = () => {
configData.value = pageConfig({
dialog: [
{
- title: { label: '商品标题' },
- comCategoryId: { label: 'app类目', slot: 'comCategoryId' },
- mainImageUrl: { label: '主图', slot: 'file' },
- videoUrl: { label: '视频', slot: 'file' },
- subImageUrl: { label: '副图', slot: 'file' }
+ title: { label: '商品标题', class: '!w-full' },
+ appCategoryId: { label: 'app类目', slot: 'appCategoryId' },
+ mainImageUrl: { label: '主图', slot: 'mainFile' },
+ videoUrl: { label: '视频', slot: 'videoFile' },
+ subImageUrl: { label: '副图', slot: 'subFile' },
+ fileReviewList: { label: '图片预览', slot: 'fileReviewList' }
}
]
})
diff --git a/src/views/goods/commodity/detail-dialog/index.vue b/src/views/goods/commodity/detail-dialog/index.vue
index e1de670..47030f0 100644
--- a/src/views/goods/commodity/detail-dialog/index.vue
+++ b/src/views/goods/commodity/detail-dialog/index.vue
@@ -3,19 +3,75 @@
基本信息:
-
+
+ show-checkbox
+ v-model="$dialog.data.appCategoryId"
+ :props="defaultAdminCategoryTreeProps"
+ :render-after-expand="false"
+ @check="
+ (checkedNode: any, checkedStatus: any) =>
+ handleCheckChange(checkedNode, checkedStatus, 'app')
+ "
+ :load="handleLoadNode2"
+ lazy
+ >
+
-
-
+
+ handleChooseFiles('mainImageUrl', val)"
+ />
+ 资源库导入
+
+
+ handleChooseFiles('videoUrl', val)"
+ />
+ 资源库导入
+
+
+ handleChooseFiles('subImage', val)"
+ />
+ 资源库导入
+
+
+
SKU信息:
+
+
+ handleCheckChange(checkedNode, checkedStatus, 'admin')
+ "
+ :load="handleLoadNode"
+ lazy
+ style="width: 240px"
+ >
+
+
- {{ item.typeName }}:
@@ -60,26 +116,52 @@
提交
+