调试菜品、菜品商品、商品

package.json

@@ -29,6 +29,7 @@
         "vue-clipboard3": "^2.0.0",
         "vue-echarts": "^6.7.3",
         "vue-router": "^4.5.0",
+        "vue3-video-play": "^1.3.2",
         "vuedraggable": "^4.1.0"
     },
     "devDependencies": {

src/components/video-player/index.vue

@@ -15,7 +15,8 @@
 <script setup lang="ts">
 import { reactive, shallowRef } from 'vue'
 import 'vue3-video-play/dist/style.css'
-import VideoPlay from 'vue3-video-play'
+// import VideoPlay from '/vue3-video-play'
+import VideoPlay from 'vue3-video-play/dist/index.umd.js'
 const props = defineProps({
     src: {
         type: String,

src/views/dishes/edit.vue

@@ -1,84 +1,76 @@
 <template>
 	<div class="edit-popup">
-        <popup
+		<popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit"
-            ref="popupRef"
+			@close="handleClose">
-            :title="popupTitle"
+			<el-form ref="formRef" :model="formData" label-width="90px">
-            :async="true"
+				<el-form-item label="菜品分类" prop="dishes_category_id">
-            width="550px"
+					<el-tree-select class="flex-1" v-model="formData.dishes_category_id" :data="categoryList" clearable
-            @confirm="handleSubmit"
+						node-key="id" :props="{
-            @close="handleClose"
+					        label: 'name'
-        >
+					    }" :default-expand-all="true" placeholder="请选择菜品分类" check-strictly />
-            <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
+				</el-form-item>
 				<el-form-item label="菜名" prop="name">
 					<el-input v-model="formData.name" clearable placeholder="请输入菜名" />
 				</el-form-item>
-                <el-form-item label="菜品分类" prop="dishes_category_id">
-                    <el-input v-model="formData.dishes_category_id" clearable placeholder="请输入菜品分类" />
-                </el-form-item>
 			</el-form>
 		</popup>
 	</div>
 </template>
 
 <script lang="ts" setup name="dishesEdit">
-import type { FormInstance } from 'element-plus'
+	import type { FormInstance } from 'element-plus'
-import Popup from '@/components/popup/index.vue'
+	import Popup from '@/components/popup/index.vue'
-import { apiDishesAdd, apiDishesEdit, apiDishesDetail } from '@/api/dishes'
+	import { apiDishesAdd, apiDishesEdit, apiDishesDetail } from '@/api/dishes'
-import { timeFormat } from '@/utils/util'
+	import { apiDishesCategoryLists } from '@/api/dishes_category'
-import type { PropType } from 'vue'
+	import { timeFormat } from '@/utils/util'
-defineProps({
+	import type { PropType } from 'vue'
-    dictData: {
+	import { arrayToTree, treeToArray } from '@/utils/util'
-        type: Object as PropType<Record<string, any[]>>,
+
-        default: () => ({})
+	const emit = defineEmits(['success', 'close'])
+	const formRef = shallowRef<FormInstance>()
+	const popupRef = shallowRef<InstanceType<typeof Popup>>()
+	const mode = ref('add')
+
+	const categoryList = ref<any[]>([])
+	const getCategoryList = async () => {
+		const data : any = await apiDishesCategoryLists({ page_type: 0 })
+		categoryList.value = data.lists
 	}
-})
-const emit = defineEmits(['success', 'close'])
-const formRef = shallowRef<FormInstance>()
-const popupRef = shallowRef<InstanceType<typeof Popup>>()
-const mode = ref('add')
 
+	getCategoryList()
 
-// 弹窗标题
+	// 弹窗标题
-const popupTitle = computed(() => {
+	const popupTitle = computed(() => {
 		return mode.value == 'edit' ? '编辑菜品' : '新增菜品'
-})
+	})
 
-// 表单数据
+	// 表单数据
-const formData = reactive({
+	const formData = reactive({
 		id: '',
 		name: '',
 		dishes_category_id: '',
-})
 
+	})
 
-// 表单验证
+	// 获取详情
-const formRules = reactive<any>({
+	const setFormData = async (data : Record<any, any>) => {
-
-})
-
-
-// 获取详情
-const setFormData = async (data: Record<any, any>) => {
 		for (const key in formData) {
 			if (data[key] != null && data[key] != undefined) {
 				//@ts-ignore
 				formData[key] = data[key]
 			}
 		}
+	}
 
-    
+	const getDetail = async (row : Record<string, any>) => {
-}
-
-const getDetail = async (row: Record<string, any>) => {
 		const data = await apiDishesDetail({
 			id: row.id
 		})
 		setFormData(data)
-}
+	}
 
-
+	// 提交按钮
-// 提交按钮
+	const handleSubmit = async () => {
-const handleSubmit = async () => {
 		await formRef.value?.validate()
 		const data = { ...formData, }
 		mode.value == 'edit'
@@ -86,24 +78,22 @@ const handleSubmit = async () => {
 			: await apiDishesAdd(data)
 		popupRef.value?.close()
 		emit('success')
-}
+	}
 
-//打开弹窗
+	//打开弹窗
-const open = (type = 'add') => {
+	const open = (type = 'add') => {
 		mode.value = type
 		popupRef.value?.open()
-}
+	}
 
-// 关闭回调
+	// 关闭回调
-const handleClose = () => {
+	const handleClose = () => {
 		emit('close')
-}
+	}
 
-
+	defineExpose({
-
-defineExpose({
 		open,
 		setFormData,
 		getDetail
-})
+	})
 </script>

src/views/dishes/index.vue

@@ -1,17 +1,17 @@
 <template>
 	<div>
 		<el-card class="!border-none mb-4" shadow="never">
-            <el-form
+			<el-form class="mb-[-16px]" :model="queryParams" inline>
-                class="mb-[-16px]"
-                :model="queryParams"
-                inline
-            >
 				<el-form-item label="菜名" prop="name">
 					<el-input class="w-[280px]" v-model="queryParams.name" clearable placeholder="请输入菜名" />
 				</el-form-item>
-                <el-form-item label="菜品分类" prop="dishes_category_id">
+				<el-form-item class="w-[280px]" label="菜品分类" prop="dishes_category_id">
-                    <el-input class="w-[280px]" v-model="queryParams.dishes_category_id" clearable placeholder="请输入菜品分类" />
+					<el-tree-select class="flex-1" v-model="queryParams.dishes_category_id" :data="categoryList"
+						clearable node-key="id" :props="{
+					        label: 'name'
+					    }" :default-expand-all="true" placeholder="请选择菜品分类" check-strictly />
 				</el-form-item>
+
 				<el-form-item>
 					<el-button type="primary" @click="resetPage">查询</el-button>
 					<el-button @click="resetParams">重置</el-button>
@@ -25,11 +25,7 @@
 				</template>
 				新增
 			</el-button>
-            <el-button
+			<el-button v-perms="['dishes/delete']" :disabled="!selectData.length" @click="handleDelete(selectData)">
-                v-perms="['dishes/delete']"
-                :disabled="!selectData.length"
-                @click="handleDelete(selectData)"
-            >
 				删除
 			</el-button>
 			<div class="mt-4">
@@ -39,22 +35,22 @@
 					<el-table-column label="菜名" prop="name" show-overflow-tooltip />
 					<el-table-column label="菜品分类" prop="dishes_category_id" show-overflow-tooltip />
 					<el-table-column label="创建时间" prop="create_time" show-overflow-tooltip />
-                    <el-table-column label="操作" width="120" fixed="right">
+
+					<el-table-column label="操作" width="220" fixed="right">
 						<template #default="{ row }">
-                             <el-button
+							<el-button v-perms="['dishes_product/lists']" type="primary" link @click="handleEdit(row)">
-                                v-perms="['dishes/edit']"
+
-                                type="primary"
+							</el-button>
-                                link
+							<el-button type="primary" link>
-                                @click="handleEdit(row)"
+								<router-link v-perms="['dishes_product/lists']"
-                            >
+									:to="{path: 'dishes_product',query: {id: row.id, title: row.name}}">
+									菜品商品
+								</router-link>
+							</el-button>
+							<el-button v-perms="['dishes/edit']" type="primary" link @click="handleEdit(row)">
 								编辑
 							</el-button>
-                            <el-button
+							<el-button v-perms="['dishes/delete']" type="danger" link @click="handleDelete(row.id)">
-                                v-perms="['dishes/delete']"
-                                type="danger"
-                                link
-                                @click="handleDelete(row.id)"
-                            >
 								删除
 							</el-button>
 						</template>
@@ -65,68 +61,73 @@
 				<pagination v-model="pager" @change="getLists" />
 			</div>
 		</el-card>
-        <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
+		<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
 	</div>
 </template>
 
 <script lang="ts" setup name="dishesLists">
-import { usePaging } from '@/hooks/usePaging'
+	import { usePaging } from '@/hooks/usePaging'
-import { useDictData } from '@/hooks/useDictOptions'
+	import { apiDishesLists, apiDishesDelete } from '@/api/dishes'
-import { apiDishesLists, apiDishesDelete } from '@/api/dishes'
+	import { apiDishesCategoryLists } from '@/api/dishes_category'
-import { timeFormat } from '@/utils/util'
+	import { timeFormat } from '@/utils/util'
-import feedback from '@/utils/feedback'
+	import feedback from '@/utils/feedback'
-import EditPopup from './edit.vue'
+	import EditPopup from './edit.vue'
+	import { arrayToTree, treeToArray } from '@/utils/util'
 
-const editRef = shallowRef<InstanceType<typeof EditPopup>>()
+	const editRef = shallowRef<InstanceType<typeof EditPopup>>()
-// 是否显示编辑框
+	// 是否显示编辑框
-const showEdit = ref(false)
+	const showEdit = ref(false)
 
+	const categoryList = ref<any[]>([])
 
-// 查询条件
+	const getCategoryList = async () => {
-const queryParams = reactive({
+		const data : any = await apiDishesCategoryLists({ page_type: 0 })
+		categoryList.value = data.lists
+	}
+
+	getCategoryList()
+
+	// 查询条件
+	const queryParams = reactive({
 		name: '',
 		dishes_category_id: '',
-})
+	})
 
-// 选中数据
+	// 选中数据
-const selectData = ref<any[]>([])
+	const selectData = ref<any[]>([])
 
-// 表格选择后回调事件
+	// 表格选择后回调事件
-const handleSelectionChange = (val: any[]) => {
+	const handleSelectionChange = (val : any[]) => {
 		selectData.value = val.map(({ id }) => id)
-}
+	}
 
-// 获取字典数据
+	// 分页相关
-const { dictData } = useDictData('')
+	const { pager, getLists, resetParams, resetPage } = usePaging({
-
-// 分页相关
-const { pager, getLists, resetParams, resetPage } = usePaging({
 		fetchFun: apiDishesLists,
 		params: queryParams
-})
+	})
 
-// 添加
+	// 添加
-const handleAdd = async () => {
+	const handleAdd = async () => {
 		showEdit.value = true
 		await nextTick()
 		editRef.value?.open('add')
-}
+	}
 
-// 编辑
+	// 编辑
-const handleEdit = async (data: any) => {
+	const handleEdit = async (data : any) => {
 		showEdit.value = true
 		await nextTick()
 		editRef.value?.open('edit')
 		editRef.value?.setFormData(data)
-}
+	}
 
-// 删除
+	// 删除
-const handleDelete = async (id: number | any[]) => {
+	const handleDelete = async (id : number | any[]) => {
 		await feedback.confirm('确定要删除？')
 		await apiDishesDelete({ id })
 		getLists()
-}
+	}
 
-getLists()
+	getLists()
 </script>
-

src/views/dishes_category/edit.vue

@@ -1,23 +1,13 @@
 <template>
 	<div class="edit-popup">
-        <popup
+		<popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit"
-            ref="popupRef"
+			@close="handleClose">
-            :title="popupTitle"
+			<el-form ref="formRef" :model="formData" label-width="90px">
-            :async="true"
-            width="550px"
-            @confirm="handleSubmit"
-            @close="handleClose"
-        >
-            <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
 				<el-form-item label="上级分类" prop="pid">
-                    <el-select class="flex-1" v-model="formData.pid" clearable placeholder="请选择上级分类">
+					<el-tree-select class="flex-1" v-model="formData.pid" :data="categoryList" clearable node-key="id"
-                        <el-option 
+						:props="{
-                            v-for="(item, index) in dictData.show_status"
+					        label: 'name'
-                            :key="index" 
+					    }" :default-expand-all="true" placeholder="请选择上级分类" check-strictly />
-                            :label="item.name"
-                            :value="parseInt(item.value)"
-                        />
-                    </el-select>
 				</el-form-item>
 				<el-form-item label="分类名称" prop="name">
 					<el-input v-model="formData.name" clearable placeholder="请输入分类名称" />
@@ -28,64 +18,61 @@
 </template>
 
 <script lang="ts" setup name="dishesCategoryEdit">
-import type { FormInstance } from 'element-plus'
+	import type { FormInstance } from 'element-plus'
-import Popup from '@/components/popup/index.vue'
+	import Popup from '@/components/popup/index.vue'
-import { apiDishesCategoryAdd, apiDishesCategoryEdit, apiDishesCategoryDetail } from '@/api/dishes_category'
+	import { apiDishesCategoryAdd, apiDishesCategoryEdit, apiDishesCategoryDetail, apiDishesCategoryLists } from '@/api/dishes_category'
-import { timeFormat } from '@/utils/util'
+	import { timeFormat } from '@/utils/util'
-import type { PropType } from 'vue'
+	import type { PropType } from 'vue'
-defineProps({
+	import { arrayToTree, treeToArray } from '@/utils/util'
-    dictData: {
+	const emit = defineEmits(['success', 'close'])
-        type: Object as PropType<Record<string, any[]>>,
+	const formRef = shallowRef<FormInstance>()
-        default: () => ({})
+	const popupRef = shallowRef<InstanceType<typeof Popup>>()
+	const mode = ref('add')
+	const categoryList = ref<any[]>([])
+
+	const getCategoryList = async () => {
+		const data : any = await apiDishesCategoryLists({ page_type: 0 })
+		const topData : any = { id: 0, name: '顶级', children: [] }
+		topData.children = arrayToTree(
+			treeToArray(data.lists)
+		)
+		categoryList.value.push(topData)
 	}
-})
-const emit = defineEmits(['success', 'close'])
-const formRef = shallowRef<FormInstance>()
-const popupRef = shallowRef<InstanceType<typeof Popup>>()
-const mode = ref('add')
 
+	getCategoryList()
 
-// 弹窗标题
+	// 弹窗标题
-const popupTitle = computed(() => {
+	const popupTitle = computed(() => {
 		return mode.value == 'edit' ? '编辑菜品分类' : '新增菜品分类'
-})
+	})
 
-// 表单数据
+	// 表单数据
-const formData = reactive({
+	const formData = reactive({
 		id: '',
 		pid: '',
 		name: '',
-})
 
+	})
 
-// 表单验证
+	// 获取详情
-const formRules = reactive<any>({
+	const setFormData = async (data : Record<any, any>) => {
-
-})
-
-
-// 获取详情
-const setFormData = async (data: Record<any, any>) => {
 		for (const key in formData) {
 			if (data[key] != null && data[key] != undefined) {
 				//@ts-ignore
 				formData[key] = data[key]
 			}
 		}
+	}
 
-    
+	const getDetail = async (row : Record<string, any>) => {
-}
-
-const getDetail = async (row: Record<string, any>) => {
 		const data = await apiDishesCategoryDetail({
 			id: row.id
 		})
 		setFormData(data)
-}
+	}
 
-
+	// 提交按钮
-// 提交按钮
+	const handleSubmit = async () => {
-const handleSubmit = async () => {
 		await formRef.value?.validate()
 		const data = { ...formData, }
 		mode.value == 'edit'
@@ -93,24 +80,23 @@ const handleSubmit = async () => {
 			: await apiDishesCategoryAdd(data)
 		popupRef.value?.close()
 		emit('success')
-}
+	}
 
-//打开弹窗
+	//打开弹窗
-const open = (type = 'add') => {
+	const open = (type = 'add', pid = 0) => {
 		mode.value = type
+		formData.pid = pid
 		popupRef.value?.open()
-}
+	}
 
-// 关闭回调
+	// 关闭回调
-const handleClose = () => {
+	const handleClose = () => {
 		emit('close')
-}
+	}
 
-
+	defineExpose({
-
-defineExpose({
 		open,
 		setFormData,
 		getDetail
-})
+	})
 </script>

src/views/dishes_category/index.vue

@@ -1,81 +1,51 @@
 <template>
 	<div>
-		<el-card class="!border-none mb-4" shadow="never">
-			<el-form class="mb-[-16px]" :model="queryParams" inline>
-				<el-form-item label="上级分类" prop="pid">
-					<el-select class="w-[280px]" v-model="queryParams.pid" clearable placeholder="请选择上级分类">
-						<el-option label="全部" value=""></el-option>
-						<el-option v-for="(item, index) in dictData.show_status" :key="index" :label="item.name"
-							:value="item.value" />
-					</el-select>
-				</el-form-item>
-				<el-form-item label="分类名称" prop="name">
-					<el-input class="w-[280px]" v-model="queryParams.name" clearable placeholder="请输入分类名称" />
-				</el-form-item>
-
-				<el-form-item>
-					<el-button type="primary" @click="resetPage">查询</el-button>
-					<el-button @click="resetParams">重置</el-button>
-				</el-form-item>
-			</el-form>
-		</el-card>
 		<el-card class="!border-none" v-loading="pager.loading" shadow="never">
-			<el-button v-perms="['dishes_category/add']" type="primary" @click="handleAdd">
+			<el-button v-perms="['dishes_category/add']" type="primary" @click="handleAdd()">
 				<template #icon>
 					<icon name="el-icon-Plus" />
 				</template>
 				新增
 			</el-button>
-			<el-button v-perms="['dishes_category/delete']" :disabled="!selectData.length"
+			<el-button @click="handleExpand"> 展开/折叠 </el-button>
-				@click="handleDelete(selectData)">
-				删除
-			</el-button>
 			<div class="mt-4">
-				<el-table :data="pager.lists" @selection-change="handleSelectionChange">
+				<el-table ref="tableRef" class="mt-4" size="large" border v-loading="pager.loading" :data="pager.lists"
-					<el-table-column type="selection" width="55" />
+					row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
-					<el-table-column label="ID" prop="id" show-overflow-tooltip />
+					<el-table-column label="上级分类" prop="name" min-width="150" show-overflow-tooltip />
-					<el-table-column label="上级分类" prop="pid">
+					<el-table-column label="分类名称" prop="name" min-width="150" show-overflow-tooltip />
-						<template #default="{ row }">
+					<el-table-column label="创建时间" prop="create_time" min-width="150" show-overflow-tooltip />
-							<dict-value :options="dictData.show_status" :value="row.pid" />
+					<el-table-column label="操作" width="160" fixed="right">
-						</template>
-					</el-table-column>
-					<el-table-column label="分类名称" prop="name" show-overflow-tooltip />
-					<el-table-column label="创建时间" prop="create_time" show-overflow-tooltip />
-
-					<el-table-column label="操作" width="120" fixed="right">
 						<template #default="{ row }">
+							<el-button v-if="row.level < 1" v-perms="['dishes_category/add']" type="primary" link @click="handleAdd(row.id)">
+								新增
+							</el-button>
 							<el-button v-perms="['dishes_category/edit']" type="primary" link @click="handleEdit(row)">
 								编辑
 							</el-button>
-							<el-button v-perms="['dishes_category/delete']" type="danger" link
+							<el-button v-perms="['dishes_category/delete']" type="danger" link @click="handleDelete(row.id)">
-								@click="handleDelete(row.id)">
 								删除
 							</el-button>
 						</template>
 					</el-table-column>
 				</el-table>
 			</div>
-			<div class="flex mt-4 justify-end">
-				<pagination v-model="pager" @change="getLists" />
-			</div>
 		</el-card>
-		<edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
+		<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
 	</div>
 </template>
 
-<script lang="ts" setup name="dishesCategoryLists">
+<script lang="ts" setup name="productCategoryLists">
 	import { usePaging } from '@/hooks/usePaging'
-	import { useDictData } from '@/hooks/useDictOptions'
+	import { apiDishesCategoryLists, apiDishesCategoryDelete } from '@/api/dishes_category'
-	import { apiDishesCategoryLists, apiDishesCategoryDelete, apiDishesCategoryAll } from '@/api/dishes_category'
 	import { timeFormat } from '@/utils/util'
 	import feedback from '@/utils/feedback'
 	import EditPopup from './edit.vue'
+	import type { ElTable } from 'element-plus'
 
 	const editRef = shallowRef<InstanceType<typeof EditPopup>>()
 	// 是否显示编辑框
 	const showEdit = ref(false)
 
-
 	// 查询条件
 	const queryParams = reactive({
 		pid: '',
@@ -90,20 +60,33 @@
 		selectData.value = val.map(({ id }) => id)
 	}
 
-	// 获取字典数据
-	const { dictData } = useDictData('show_status')
-
 	// 分页相关
 	const { pager, getLists, resetParams, resetPage } = usePaging({
 		fetchFun: apiDishesCategoryLists,
 		params: queryParams
 	})
 
+	let isExpand = false
+	const tableRef = shallowRef<InstanceType<typeof ElTable>>()
+	const handleExpand = () => {
+		isExpand = !isExpand
+		toggleExpand(pager.lists, isExpand)
+	}
+
+	const toggleExpand = (children : any[], unfold = true) => {
+		for (const key in children) {
+			tableRef.value?.toggleRowExpansion(children[key], unfold)
+			if (children[key].children) {
+				toggleExpand(children[key].children!, unfold)
+			}
+		}
+	}
+
 	// 添加
-	const handleAdd = async () => {
+	const handleAdd = async (pid = 0) => {
 		showEdit.value = true
 		await nextTick()
-		editRef.value?.open('add')
+		editRef.value?.open('add', pid)
 	}
 
 	// 编辑

src/views/dishes_product/edit.vue

@@ -1,42 +1,18 @@
 <template>
 	<div class="edit-popup">
-        <popup
+		<popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit"
-            ref="popupRef"
+			@close="handleClose">
-            :title="popupTitle"
+			<el-form ref="formRef" :model="formData" label-width="90px">
-            :async="true"
-            width="550px"
-            @confirm="handleSubmit"
-            @close="handleClose"
-        >
-            <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
-                <el-form-item label="菜品" prop="dishes_id">
-                    <el-select class="flex-1" v-model="formData.dishes_id" clearable placeholder="请选择菜品">
-                        <el-option 
-                            v-for="(item, index) in dictData.show_status"
-                            :key="index" 
-                            :label="item.name"
-                            :value="parseInt(item.value)"
-                        />
-                    </el-select>
-                </el-form-item>
 				<el-form-item label="商品" prop="product_id">
-                    <el-select class="flex-1" v-model="formData.product_id" clearable placeholder="请选择商品">
+					<el-select v-model="formData.product_id" filterable remote reserve-keyword
-                        <el-option 
+						placeholder="请输入商品" :remote-method="getProductList" :loading="productLoading">
-                            v-for="(item, index) in dictData.show_status"
+						<el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" />
-                            :key="index" 
-                            :label="item.name"
-                            :value="parseInt(item.value)"
-                        />
 					</el-select>
 				</el-form-item>
 				<el-form-item label="单位" prop="unit_id">
 					<el-select class="flex-1" v-model="formData.unit_id" clearable placeholder="请选择单位">
-                        <el-option 
+						<el-option v-for="(item, index) in unitList" :key="index" :label="item.name"
-                            v-for="(item, index) in dictData.show_status"
+							:value="parseInt(item.id)" />
-                            :key="index" 
-                            :label="item.name"
-                            :value="parseInt(item.value)"
-                        />
 					</el-select>
 				</el-form-item>
 				<el-form-item label="数量" prop="nums">
@@ -48,66 +24,66 @@
 </template>
 
 <script lang="ts" setup name="dishesProductEdit">
-import type { FormInstance } from 'element-plus'
+	import type { FormInstance } from 'element-plus'
-import Popup from '@/components/popup/index.vue'
+	import Popup from '@/components/popup/index.vue'
-import { apiDishesProductAdd, apiDishesProductEdit, apiDishesProductDetail } from '@/api/dishes_product'
+	import { apiDishesProductAdd, apiDishesProductEdit, apiDishesProductDetail } from '@/api/dishes_product'
-import { timeFormat } from '@/utils/util'
+	import { timeFormat } from '@/utils/util'
-import type { PropType } from 'vue'
+	import type { PropType } from 'vue'
-defineProps({
+	import { apiProductLists } from '@/api/product'
-    dictData: {
+	import { apiProductUnitLists } from '@/api/product_unit'
-        type: Object as PropType<Record<string, any[]>>,
+	
-        default: () => ({})
+	const unitList = ref<any[]>([])
+	const getUnitList = async () => {
+		const data : any = await apiProductUnitLists({ page_type: 0 })
+		unitList.value = data.lists
 	}
-})
+	getUnitList()
-const emit = defineEmits(['success', 'close'])
-const formRef = shallowRef<FormInstance>()
-const popupRef = shallowRef<InstanceType<typeof Popup>>()
-const mode = ref('add')
 	
+	const productList = ref<any[]>([])
+	const productLoading = ref(false)
+	const getProductList = async () => {
+		const data : any = await apiProductLists({ page_type: 0 })
+		productList.value = data.lists
+	}
+	const emit = defineEmits(['success', 'close'])
+	const formRef = shallowRef<FormInstance>()
+	const popupRef = shallowRef<InstanceType<typeof Popup>>()
+	const mode = ref('add')
 
-// 弹窗标题
+	// 弹窗标题
-const popupTitle = computed(() => {
+	const popupTitle = computed(() => {
 		return mode.value == 'edit' ? '编辑菜品商品' : '新增菜品商品'
-})
+	})
 
-// 表单数据
+	// 表单数据
-const formData = reactive({
+	const formData = reactive({
 		id: '',
 		dishes_id: '',
 		product_id: '',
 		unit_id: '',
 		nums: '',
-})
 
+	})
 
-// 表单验证
+	// 获取详情
-const formRules = reactive<any>({
+	const setFormData = async (data : Record<any, any>) => {
-
-})
-
-
-// 获取详情
-const setFormData = async (data: Record<any, any>) => {
 		for (const key in formData) {
 			if (data[key] != null && data[key] != undefined) {
 				//@ts-ignore
 				formData[key] = data[key]
 			}
 		}
+	}
 
-    
+	const getDetail = async (row : Record<string, any>) => {
-}
-
-const getDetail = async (row: Record<string, any>) => {
 		const data = await apiDishesProductDetail({
 			id: row.id
 		})
 		setFormData(data)
-}
+	}
 
-
+	// 提交按钮
-// 提交按钮
+	const handleSubmit = async () => {
-const handleSubmit = async () => {
 		await formRef.value?.validate()
 		const data = { ...formData, }
 		mode.value == 'edit'
@@ -115,24 +91,23 @@ const handleSubmit = async () => {
 			: await apiDishesProductAdd(data)
 		popupRef.value?.close()
 		emit('success')
-}
+	}
 
-//打开弹窗
+	//打开弹窗
-const open = (type = 'add') => {
+	const open = (type = 'add', dashesId = 0) => {
 		mode.value = type
+		formData.dishes_id = dashesId
 		popupRef.value?.open()
-}
+	}
 
-// 关闭回调
+	// 关闭回调
-const handleClose = () => {
+	const handleClose = () => {
 		emit('close')
-}
+	}
 
-
+	defineExpose({
-
-defineExpose({
 		open,
 		setFormData,
 		getDetail
-})
+	})
 </script>

src/views/dishes_product/index.vue

@@ -1,38 +1,7 @@
 <template>
 	<div>
 		<el-card class="!border-none mb-4" shadow="never">
-            <el-form
+			当前菜品：{{title}}
-                class="mb-[-16px]"
-                :model="queryParams"
-                inline
-            >
-                <el-form-item label="菜品" prop="dishes_id">
-                    <el-select class="w-[280px]" v-model="queryParams.dishes_id" clearable placeholder="请选择菜品">
-                        <el-option label="全部" value=""></el-option>
-                        <el-option 
-                            v-for="(item, index) in dictData.show_status"
-                            :key="index" 
-                            :label="item.name"
-                            :value="item.value"
-                        />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="商品" prop="product_id">
-                    <el-select class="w-[280px]" v-model="queryParams.product_id" clearable placeholder="请选择商品">
-                        <el-option label="全部" value=""></el-option>
-                        <el-option 
-                            v-for="(item, index) in dictData.show_status"
-                            :key="index" 
-                            :label="item.name"
-                            :value="item.value"
-                        />
-                    </el-select>
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="resetPage">查询</el-button>
-                    <el-button @click="resetParams">重置</el-button>
-                </el-form-item>
-            </el-form>
 		</el-card>
 		<el-card class="!border-none" v-loading="pager.loading" shadow="never">
 			<el-button v-perms="['dishes_product/add']" type="primary" @click="handleAdd">
@@ -41,50 +10,27 @@
 				</template>
 				新增
 			</el-button>
-            <el-button
+			<el-button v-perms="['dishes_product/delete']" :disabled="!selectData.length"
-                v-perms="['dishes_product/delete']"
+				@click="handleDelete(selectData)">
-                :disabled="!selectData.length"
-                @click="handleDelete(selectData)"
-            >
 				删除
 			</el-button>
 			<div class="mt-4">
 				<el-table :data="pager.lists" @selection-change="handleSelectionChange">
 					<el-table-column type="selection" width="55" />
 					<el-table-column label="ID" prop="id" show-overflow-tooltip />
-                    <el-table-column label="菜品" prop="dishes_id">
+					<el-table-column label="菜品" prop="dishes.name" show-overflow-tooltip />
-                        <template #default="{ row }">
+					<el-table-column label="商品" prop="product.name" show-overflow-tooltip />
-                            <dict-value :options="dictData.show_status" :value="row.dishes_id" />
+					<el-table-column label="单位" prop="unit.name" show-overflow-tooltip />
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="商品" prop="product_id">
-                        <template #default="{ row }">
-                            <dict-value :options="dictData.show_status" :value="row.product_id" />
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="单位" prop="unit_id">
-                        <template #default="{ row }">
-                            <dict-value :options="dictData.show_status" :value="row.unit_id" />
-                        </template>
-                    </el-table-column>
 					<el-table-column label="数量" prop="nums" show-overflow-tooltip />
 					<el-table-column label="创建时间" prop="create_time" show-overflow-tooltip />
+
 					<el-table-column label="操作" width="120" fixed="right">
 						<template #default="{ row }">
-                             <el-button
+							<el-button v-perms="['dishes_product/edit']" type="primary" link @click="handleEdit(row)">
-                                v-perms="['dishes_product/edit']"
-                                type="primary"
-                                link
-                                @click="handleEdit(row)"
-                            >
 								编辑
 							</el-button>
-                            <el-button
+							<el-button v-perms="['dishes_product/delete']" type="danger" link
-                                v-perms="['dishes_product/delete']"
+								@click="handleDelete(row.id)">
-                                type="danger"
-                                link
-                                @click="handleDelete(row.id)"
-                            >
 								删除
 							</el-button>
 						</template>
@@ -95,68 +41,75 @@
 				<pagination v-model="pager" @change="getLists" />
 			</div>
 		</el-card>
-        <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
+		<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
 	</div>
 </template>
 
 <script lang="ts" setup name="dishesProductLists">
-import { usePaging } from '@/hooks/usePaging'
+	import { usePaging } from '@/hooks/usePaging'
-import { useDictData } from '@/hooks/useDictOptions'
+	import { useDictData } from '@/hooks/useDictOptions'
-import { apiDishesProductLists, apiDishesProductDelete } from '@/api/dishes_product'
+	import { apiDishesProductLists, apiDishesProductDelete } from '@/api/dishes_product'
-import { timeFormat } from '@/utils/util'
+	import { timeFormat } from '@/utils/util'
-import feedback from '@/utils/feedback'
+	import feedback from '@/utils/feedback'
-import EditPopup from './edit.vue'
+	import EditPopup from './edit.vue'
+	import { apiProductLists } from '@/api/product'
+	import { onMounted } from 'vue'
 
-const editRef = shallowRef<InstanceType<typeof EditPopup>>()
+	const route = useRoute()
-// 是否显示编辑框
+	const title = ref('')
-const showEdit = ref(false)
+	onMounted(() => {
+		if (route.query.title) {
+			title.value = route.query.title
+		}
+		if (route.query.id) {
+			queryParams.dishes_id = route.query.id
+			getLists()
+		}
+	})
 
+	const editRef = shallowRef<InstanceType<typeof EditPopup>>()
+	// 是否显示编辑框
+	const showEdit = ref(false)
 
-// 查询条件
+	// 查询条件
-const queryParams = reactive({
+	const queryParams = reactive({
 		dishes_id: '',
 		product_id: '',
-})
+	})
 
-// 选中数据
+	// 选中数据
-const selectData = ref<any[]>([])
+	const selectData = ref<any[]>([])
 
-// 表格选择后回调事件
+	// 表格选择后回调事件
-const handleSelectionChange = (val: any[]) => {
+	const handleSelectionChange = (val : any[]) => {
 		selectData.value = val.map(({ id }) => id)
-}
+	}
 
-// 获取字典数据
+	// 分页相关
-const { dictData } = useDictData('show_status')
+	const { pager, getLists, resetParams, resetPage } = usePaging({
-
-// 分页相关
-const { pager, getLists, resetParams, resetPage } = usePaging({
 		fetchFun: apiDishesProductLists,
 		params: queryParams
-})
+	})
 
-// 添加
+	// 添加
-const handleAdd = async () => {
+	const handleAdd = async () => {
 		showEdit.value = true
 		await nextTick()
-    editRef.value?.open('add')
+		editRef.value?.open('add', queryParams.dishes_id)
-}
+	}
 
-// 编辑
+	// 编辑
-const handleEdit = async (data: any) => {
+	const handleEdit = async (data : any) => {
 		showEdit.value = true
 		await nextTick()
 		editRef.value?.open('edit')
 		editRef.value?.setFormData(data)
-}
+	}
 
-// 删除
+	// 删除
-const handleDelete = async (id: number | any[]) => {
+	const handleDelete = async (id : number | any[]) => {
 		await feedback.confirm('确定要删除？')
 		await apiDishesProductDelete({ id })
 		getLists()
-}
+	}
-
-getLists()
 </script>
-

src/views/product/edit.vue

@@ -1,150 +0,0 @@
-<template>
-    <div class="edit-popup">
-        <popup
-            ref="popupRef"
-            :title="popupTitle"
-            :async="true"
-            width="550px"
-            @confirm="handleSubmit"
-            @close="handleClose"
-        >
-            <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
-                <el-form-item label="分类" prop="category_id">
-                    <el-select class="flex-1" v-model="formData.category_id" clearable placeholder="请选择分类">
-                        <el-option 
-                            v-for="(item, index) in dictData.show_status"
-                            :key="index" 
-                            :label="item.name"
-                            :value="parseInt(item.value)"
-                        />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="单位" prop="unit_id">
-                    <el-select class="flex-1" v-model="formData.unit_id" clearable placeholder="请选择单位">
-                        <el-option 
-                            v-for="(item, index) in dictData.show_status"
-                            :key="index" 
-                            :label="item.name"
-                            :value="parseInt(item.value)"
-                        />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="名称" prop="name">
-                    <el-input v-model="formData.name" clearable placeholder="请输入名称" />
-                </el-form-item>
-                <el-form-item label="图片" prop="image">
-                    <material-picker v-model="formData.image" />
-                </el-form-item>
-                <el-form-item label="简介" prop="intro">
-                    <el-input v-model="formData.intro" clearable placeholder="请输入简介" />
-                </el-form-item>
-                <el-form-item label="详情" prop="conent">
-                    <el-input v-model="formData.conent" clearable placeholder="请输入详情" />
-                </el-form-item>
-                <el-form-item label="商品类型" prop="product_type">
-                    <el-select class="flex-1" v-model="formData.product_type" clearable placeholder="请选择商品类型">
-                        <el-option 
-                            v-for="(item, index) in dictData.show_status"
-                            :key="index" 
-                            :label="item.name"
-                            :value="parseInt(item.value)"
-                        />
-                    </el-select>
-                </el-form-item>
-            </el-form>
-        </popup>
-    </div>
-</template>
-
-<script lang="ts" setup name="productEdit">
-import type { FormInstance } from 'element-plus'
-import Popup from '@/components/popup/index.vue'
-import { apiProductAdd, apiProductEdit, apiProductDetail } from '@/api/product'
-import { timeFormat } from '@/utils/util'
-import type { PropType } from 'vue'
-defineProps({
-    dictData: {
-        type: Object as PropType<Record<string, any[]>>,
-        default: () => ({})
-    }
-})
-const emit = defineEmits(['success', 'close'])
-const formRef = shallowRef<FormInstance>()
-const popupRef = shallowRef<InstanceType<typeof Popup>>()
-const mode = ref('add')
-
-
-// 弹窗标题
-const popupTitle = computed(() => {
-    return mode.value == 'edit' ? '编辑商品列表' : '新增商品列表'
-})
-
-// 表单数据
-const formData = reactive({
-    id: '',
-    category_id: '',
-    unit_id: '',
-    name: '',
-    image: '',
-    intro: '',
-    conent: '',
-    product_type: '',
-})
-
-
-// 表单验证
-const formRules = reactive<any>({
-
-})
-
-
-// 获取详情
-const setFormData = async (data: Record<any, any>) => {
-    for (const key in formData) {
-        if (data[key] != null && data[key] != undefined) {
-            //@ts-ignore
-            formData[key] = data[key]
-        }
-    }
-    
-    
-}
-
-const getDetail = async (row: Record<string, any>) => {
-    const data = await apiProductDetail({
-        id: row.id
-    })
-    setFormData(data)
-}
-
-
-// 提交按钮
-const handleSubmit = async () => {
-    await formRef.value?.validate()
-    const data = { ...formData,  }
-    mode.value == 'edit' 
-        ? await apiProductEdit(data) 
-        : await apiProductAdd(data)
-    popupRef.value?.close()
-    emit('success')
-}
-
-//打开弹窗
-const open = (type = 'add') => {
-    mode.value = type
-    popupRef.value?.open()
-}
-
-// 关闭回调
-const handleClose = () => {
-    emit('close')
-}
-
-
-
-defineExpose({
-    open,
-    setFormData,
-    getDetail
-})
-</script>

src/views/product/index.vue

@@ -1,183 +0,0 @@
-<template>
-    <div>
-        <el-card class="!border-none mb-4" shadow="never">
-            <el-form
-                class="mb-[-16px]"
-                :model="queryParams"
-                inline
-            >
-                <el-form-item label="分类" prop="category_id">
-                    <el-select class="w-[280px]" v-model="queryParams.category_id" clearable placeholder="请选择分类">
-                        <el-option label="全部" value=""></el-option>
-                        <el-option 
-                            v-for="(item, index) in dictData.show_status"
-                            :key="index" 
-                            :label="item.name"
-                            :value="item.value"
-                        />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="单位" prop="unit_id">
-                    <el-select class="w-[280px]" v-model="queryParams.unit_id" clearable placeholder="请选择单位">
-                        <el-option label="全部" value=""></el-option>
-                        <el-option 
-                            v-for="(item, index) in dictData.show_status"
-                            :key="index" 
-                            :label="item.name"
-                            :value="item.value"
-                        />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="名称" prop="name">
-                    <el-input class="w-[280px]" v-model="queryParams.name" clearable placeholder="请输入名称" />
-                </el-form-item>
-                <el-form-item label="商品类型" prop="product_type">
-                    <el-select class="w-[280px]" v-model="queryParams.product_type" clearable placeholder="请选择商品类型">
-                        <el-option label="全部" value=""></el-option>
-                        <el-option 
-                            v-for="(item, index) in dictData.show_status"
-                            :key="index" 
-                            :label="item.name"
-                            :value="item.value"
-                        />
-                    </el-select>
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="resetPage">查询</el-button>
-                    <el-button @click="resetParams">重置</el-button>
-                </el-form-item>
-            </el-form>
-        </el-card>
-        <el-card class="!border-none" v-loading="pager.loading" shadow="never">
-            <el-button v-perms="['product/add']" type="primary" @click="handleAdd">
-                <template #icon>
-                    <icon name="el-icon-Plus" />
-                </template>
-                新增
-            </el-button>
-            <el-button
-                v-perms="['product/delete']"
-                :disabled="!selectData.length"
-                @click="handleDelete(selectData)"
-            >
-                删除
-            </el-button>
-            <div class="mt-4">
-                <el-table :data="pager.lists" @selection-change="handleSelectionChange">
-                    <el-table-column type="selection" width="55" />
-                    <el-table-column label="ID" prop="id" show-overflow-tooltip />
-                    <el-table-column label="分类" prop="category_id">
-                        <template #default="{ row }">
-                            <dict-value :options="dictData.show_status" :value="row.category_id" />
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="单位" prop="unit_id">
-                        <template #default="{ row }">
-                            <dict-value :options="dictData.show_status" :value="row.unit_id" />
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="名称" prop="name" show-overflow-tooltip />
-                    <el-table-column label="图片" prop="image">
-                        <template #default="{ row }">
-                            <el-image style="width:50px;height:50px;" :src="row.image" />
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="商品类型" prop="product_type">
-                        <template #default="{ row }">
-                            <dict-value :options="dictData.show_status" :value="row.product_type" />
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="创建时间" prop="create_time" show-overflow-tooltip />
-                    <el-table-column label="操作" width="120" fixed="right">
-                        <template #default="{ row }">
-                             <el-button
-                                v-perms="['product/edit']"
-                                type="primary"
-                                link
-                                @click="handleEdit(row)"
-                            >
-                                编辑
-                            </el-button>
-                            <el-button
-                                v-perms="['product/delete']"
-                                type="danger"
-                                link
-                                @click="handleDelete(row.id)"
-                            >
-                                删除
-                            </el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </div>
-            <div class="flex mt-4 justify-end">
-                <pagination v-model="pager" @change="getLists" />
-            </div>
-        </el-card>
-        <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
-    </div>
-</template>
-
-<script lang="ts" setup name="productLists">
-import { usePaging } from '@/hooks/usePaging'
-import { useDictData } from '@/hooks/useDictOptions'
-import { apiProductLists, apiProductDelete } from '@/api/product'
-import { timeFormat } from '@/utils/util'
-import feedback from '@/utils/feedback'
-import EditPopup from './edit.vue'
-
-const editRef = shallowRef<InstanceType<typeof EditPopup>>()
-// 是否显示编辑框
-const showEdit = ref(false)
-
-
-// 查询条件
-const queryParams = reactive({
-    category_id: '',
-    unit_id: '',
-    name: '',
-    product_type: '',
-})
-
-// 选中数据
-const selectData = ref<any[]>([])
-
-// 表格选择后回调事件
-const handleSelectionChange = (val: any[]) => {
-    selectData.value = val.map(({ id }) => id)
-}
-
-// 获取字典数据
-const { dictData } = useDictData('show_status')
-
-// 分页相关
-const { pager, getLists, resetParams, resetPage } = usePaging({
-    fetchFun: apiProductLists,
-    params: queryParams
-})
-
-// 添加
-const handleAdd = async () => {
-    showEdit.value = true
-    await nextTick()
-    editRef.value?.open('add')
-}
-
-// 编辑
-const handleEdit = async (data: any) => {
-    showEdit.value = true
-    await nextTick()
-    editRef.value?.open('edit')
-    editRef.value?.setFormData(data)
-}
-
-// 删除
-const handleDelete = async (id: number | any[]) => {
-    await feedback.confirm('确定要删除？')
-    await apiProductDelete({ id })
-    getLists()
-}
-
-getLists()
-</script>
-

src/views/product_category/edit.vue

@@ -82,8 +82,6 @@
 
 	//打开弹窗
 	const open = (type = 'add', pid = 0) => {
-		console.log(type);
-		console.log(pid);
 		mode.value = type
 		formData.pid = pid
 		popupRef.value?.open()

src/views/product_category/index.vue

@@ -16,13 +16,13 @@
 					<el-table-column label="创建时间" prop="create_time" min-width="150" show-overflow-tooltip />
 					<el-table-column label="操作" width="160" fixed="right">
 						<template #default="{ row }">
-							<el-button v-if="row.level < 2" v-perms="['auth.menu/add']" type="primary" link @click="handleAdd(row.id)">
+							<el-button v-if="row.level < 2" v-perms="['product_category/add']" type="primary" link @click="handleAdd(row.id)">
 								新增
 							</el-button>
-							<el-button v-perms="['auth.menu/edit']" type="primary" link @click="handleEdit(row)">
+							<el-button v-perms="['product_category/edit']" type="primary" link @click="handleEdit(row)">
 								编辑
 							</el-button>
-							<el-button v-perms="['auth.menu/delete']" type="danger" link @click="handleDelete(row.id)">
+							<el-button v-perms="['product_category/delete']" type="danger" link @click="handleDelete(row.id)">
 								删除
 							</el-button>
 						</template>

src/views/products/edit.vue

@@ -0,0 +1,139 @@
+<template>
+	<div class="edit-popup">
+		<popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit"
+			@close="handleClose">
+			<el-form ref="formRef" :model="formData" label-width="90px">
+				<el-form-item label="商品类型" prop="product_type">
+					<el-select class="flex-1" v-model="formData.product_type" clearable placeholder="请选择商品类型">
+						<el-option v-for="(item, index) in dictData.product_type" :key="index" :label="item.name"
+							:value="parseInt(item.value)" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="分类" prop="category_id">
+					<el-tree-select class="flex-1" v-model="formData.category_id" :data="categoryList" clearable node-key="id"
+						:props="{
+					        label: 'name'
+					    }" :default-expand-all="true" placeholder="请选择分类" check-strictly />
+				</el-form-item>
+				<el-form-item label="单位" prop="unit_id">
+					<el-select class="flex-1" v-model="formData.unit_id" clearable placeholder="请选择单位">
+						<el-option v-for="(item, index) in unitList" :key="index" :label="item.name"
+							:value="parseInt(item.id)" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="名称" prop="name">
+					<el-input v-model="formData.name" clearable placeholder="请输入名称" />
+				</el-form-item>
+				<el-form-item label="图片" prop="image">
+					<material-picker v-model="formData.image" />
+				</el-form-item>
+				<el-form-item label="简介" prop="intro">
+					<el-input v-model="formData.intro" clearable placeholder="请输入简介" />
+				</el-form-item>
+				<el-form-item label="详情" prop="conent">
+					<el-input v-model="formData.conent" clearable placeholder="请输入详情" />
+				</el-form-item>
+			</el-form>
+		</popup>
+	</div>
+</template>
+
+<script lang="ts" setup name="productEdit">
+	import type { FormInstance } from 'element-plus'
+	import Popup from '@/components/popup/index.vue'
+	import { apiProductAdd, apiProductEdit, apiProductDetail } from '@/api/product'
+	import { timeFormat } from '@/utils/util'
+	import type { PropType } from 'vue'
+	import { apiProductCategoryLists } from '@/api/product_category'
+	import { apiProductUnitLists } from '@/api/product_unit'
+	import { arrayToTree, treeToArray } from '@/utils/util'
+	
+	defineProps({
+		dictData: {
+			type: Object as PropType<Record<string, any[]>>,
+			default: () => ({})
+		}
+	})
+	const emit = defineEmits(['success', 'close'])
+	const formRef = shallowRef<FormInstance>()
+	const popupRef = shallowRef<InstanceType<typeof Popup>>()
+	const mode = ref('add')
+	
+	const categoryList = ref<any[]>([])
+	const getCategoryList = async () => {
+		const data : any = await apiProductCategoryLists({ page_type: 0 })
+		categoryList.value = data.lists
+	}
+	getCategoryList()
+	
+	const unitList = ref<any[]>([])
+	const getUnitList = async () => {
+		const data : any = await apiProductUnitLists({ page_type: 0 })
+		unitList.value = data.lists
+	}
+	getUnitList()
+
+
+	// 弹窗标题
+	const popupTitle = computed(() => {
+		return mode.value == 'edit' ? '编辑商品列表' : '新增商品列表'
+	})
+
+	// 表单数据
+	const formData = reactive({
+		id: '',
+		category_id: '',
+		unit_id: '',
+		name: '',
+		image: '',
+		intro: '',
+		conent: '',
+		product_type: '',
+
+	})
+
+	// 获取详情
+	const setFormData = async (data : Record<any, any>) => {
+		for (const key in formData) {
+			if (data[key] != null && data[key] != undefined) {
+				//@ts-ignore
+				formData[key] = data[key]
+			}
+		}
+	}
+
+	const getDetail = async (row : Record<string, any>) => {
+		const data = await apiProductDetail({
+			id: row.id
+		})
+		setFormData(data)
+	}
+
+	// 提交按钮
+	const handleSubmit = async () => {
+		await formRef.value?.validate()
+		const data = { ...formData, }
+		mode.value == 'edit'
+			? await apiProductEdit(data)
+			: await apiProductAdd(data)
+		popupRef.value?.close()
+		emit('success')
+	}
+
+	//打开弹窗
+	const open = (type = 'add') => {
+		mode.value = type
+		popupRef.value?.open()
+	}
+
+	// 关闭回调
+	const handleClose = () => {
+		emit('close')
+	}
+
+	defineExpose({
+		open,
+		setFormData,
+		getDetail
+	})
+</script>

src/views/products/index.vue

@@ -0,0 +1,145 @@
+<template>
+	<div>
+		<el-card class="!border-none mb-4" shadow="never">
+			<el-form class="mb-[-16px]" :model="queryParams" inline>
+				<el-form-item class="w-[280px]" label="商品类型" prop="product_type">
+					<el-select v-model="queryParams.product_type" clearable placeholder="请选择商品类型">
+						<el-option v-for="(item, index) in dictData.product_type" :key="index" :label="item.name"
+							:value="item.value" />
+					</el-select>
+				</el-form-item>
+				<el-form-item class="w-[280px]" label="分类" prop="category_id">
+					<el-tree-select v-model="queryParams.category_id" :data="categoryList" clearable node-key="id"
+						:props="{
+					        label: 'name'
+					    }" :default-expand-all="true" placeholder="请选择分类" check-strictly />
+				</el-form-item>
+				<el-form-item class="w-[280px]" label="名称" prop="name">
+					<el-input v-model="queryParams.name" clearable placeholder="请输入名称" />
+				</el-form-item>
+
+				<el-form-item>
+					<el-button type="primary" @click="resetPage">查询</el-button>
+					<el-button @click="resetParams">重置</el-button>
+				</el-form-item>
+			</el-form>
+		</el-card>
+		<el-card class="!border-none" v-loading="pager.loading" shadow="never">
+			<el-button v-perms="['product/add']" type="primary" @click="handleAdd">
+				<template #icon>
+					<icon name="el-icon-Plus" />
+				</template>
+				新增
+			</el-button>
+			<el-button v-perms="['product/delete']" :disabled="!selectData.length" @click="handleDelete(selectData)">
+				删除
+			</el-button>
+			<div class="mt-4">
+				<el-table :data="pager.lists" @selection-change="handleSelectionChange">
+					<el-table-column type="selection" width="55" />
+					<el-table-column label="ID" width="80" prop="id" show-overflow-tooltip />
+					<el-table-column label="分类" prop="categories" show-overflow-tooltip />
+					<el-table-column label="单位" width="80" prop="unit.name" show-overflow-tooltip />
+					<el-table-column label="名称" prop="name" show-overflow-tooltip />
+					<el-table-column label="图片" width="80" prop="image">
+						<template #default="{ row }">
+							<el-image style="width:50px;height:50px;" :src="row.image" />
+						</template>
+					</el-table-column>
+					<el-table-column label="商品类型" width="80" prop="product_type">
+						<template #default="{ row }">
+							<dict-value :options="dictData.product_type" :value="row.product_type" />
+						</template>
+					</el-table-column>
+					<el-table-column label="创建时间" width="160" prop="create_time" show-overflow-tooltip />
+
+					<el-table-column label="操作" width="120" fixed="right">
+						<template #default="{ row }">
+							<el-button v-perms="['product/edit']" type="primary" link @click="handleEdit(row)">
+								编辑
+							</el-button>
+							<el-button v-perms="['product/delete']" type="danger" link @click="handleDelete(row.id)">
+								删除
+							</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+			</div>
+			<div class="flex mt-4 justify-end">
+				<pagination v-model="pager" @change="getLists" />
+			</div>
+		</el-card>
+		<edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
+	</div>
+</template>
+
+<script lang="ts" setup name="productLists">
+	import { usePaging } from '@/hooks/usePaging'
+	import { useDictData } from '@/hooks/useDictOptions'
+	import { apiProductLists, apiProductDelete } from '@/api/product'
+	import { timeFormat } from '@/utils/util'
+	import feedback from '@/utils/feedback'
+	import EditPopup from './edit.vue'
+	import { apiProductCategoryLists } from '@/api/product_category'
+	import { arrayToTree, treeToArray } from '@/utils/util'
+
+	const categoryList = ref<any[]>([])
+	const getCategoryList = async () => {
+		const data : any = await apiProductCategoryLists({ page_type: 0 })
+		categoryList.value = data.lists
+	}
+	getCategoryList()
+
+	const editRef = shallowRef<InstanceType<typeof EditPopup>>()
+	// // 是否显示编辑框
+	const showEdit = ref(false)
+
+	// 查询条件
+	const queryParams = reactive({
+		category_id: '',
+		unit_id: '',
+		name: '',
+		product_type: '',
+	})
+
+	// 选中数据
+	const selectData = ref<any[]>([])
+
+	// 表格选择后回调事件
+	const handleSelectionChange = (val : any[]) => {
+		selectData.value = val.map(({ id }) => id)
+	}
+
+	// 获取字典数据
+	const { dictData } = useDictData('product_type')
+
+	// 分页相关
+	const { pager, getLists, resetParams, resetPage } = usePaging({
+		fetchFun: apiProductLists,
+		params: queryParams
+	})
+
+	// 添加
+	const handleAdd = async () => {
+		showEdit.value = true
+		await nextTick()
+		editRef.value?.open('add')
+	}
+
+	// 编辑
+	const handleEdit = async (data : any) => {
+		showEdit.value = true
+		await nextTick()
+		editRef.value?.open('edit')
+		editRef.value?.getDetail(data)
+	}
+
+	// 删除
+	const handleDelete = async (id : number | any[]) => {
+		await feedback.confirm('确定要删除？')
+		await apiProductDelete({ id })
+		getLists()
+	}
+
+	getLists()
+</script>