添加商品、菜品管理

src/api/dishes.ts

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// 菜品列表
+export function apiDishesLists(params: any) {
+    return request.get({ url: '/dishes/lists', params })
+}
+
+// 添加菜品
+export function apiDishesAdd(params: any) {
+    return request.post({ url: '/dishes/add', params })
+}
+
+// 编辑菜品
+export function apiDishesEdit(params: any) {
+    return request.post({ url: '/dishes/edit', params })
+}
+
+// 删除菜品
+export function apiDishesDelete(params: any) {
+    return request.post({ url: '/dishes/delete', params })
+}
+
+// 菜品详情
+export function apiDishesDetail(params: any) {
+    return request.get({ url: '/dishes/detail', params })
+}

src/api/dishes_category.ts

@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+// 菜品分类列表
+export function apiDishesCategoryLists(params: any) {
+    return request.get({ url: '/dishesCategory/lists', params })
+}
+
+// 添加菜品分类
+export function apiDishesCategoryAdd(params: any) {
+    return request.post({ url: '/dishesCategory/add', params })
+}
+
+// 编辑菜品分类
+export function apiDishesCategoryEdit(params: any) {
+    return request.post({ url: '/dishesCategory/edit', params })
+}
+
+// 删除菜品分类
+export function apiDishesCategoryDelete(params: any) {
+    return request.post({ url: '/dishesCategory/delete', params })
+}
+
+// 菜品分类详情
+export function apiDishesCategoryDetail(params: any) {
+    return request.get({ url: '/dishesCategory/detail', params })
+}
+
+export function apiDishesCategoryAll(params: any) {
+    return request.get({ url: '/dishesCategory/all', params })
+}

src/api/dishes_product.ts

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// 菜品商品列表
+export function apiDishesProductLists(params: any) {
+    return request.get({ url: '/dishesProduct/lists', params })
+}
+
+// 添加菜品商品
+export function apiDishesProductAdd(params: any) {
+    return request.post({ url: '/dishesProduct/add', params })
+}
+
+// 编辑菜品商品
+export function apiDishesProductEdit(params: any) {
+    return request.post({ url: '/dishesProduct/edit', params })
+}
+
+// 删除菜品商品
+export function apiDishesProductDelete(params: any) {
+    return request.post({ url: '/dishesProduct/delete', params })
+}
+
+// 菜品商品详情
+export function apiDishesProductDetail(params: any) {
+    return request.get({ url: '/dishesProduct/detail', params })
+}

src/api/product.ts

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// 商品列表列表
+export function apiProductLists(params: any) {
+    return request.get({ url: '/product/lists', params })
+}
+
+// 添加商品列表
+export function apiProductAdd(params: any) {
+    return request.post({ url: '/product/add', params })
+}
+
+// 编辑商品列表
+export function apiProductEdit(params: any) {
+    return request.post({ url: '/product/edit', params })
+}
+
+// 删除商品列表
+export function apiProductDelete(params: any) {
+    return request.post({ url: '/product/delete', params })
+}
+
+// 商品列表详情
+export function apiProductDetail(params: any) {
+    return request.get({ url: '/product/detail', params })
+}

src/api/product_category.ts

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// 商品分类列表
+export function apiProductCategoryLists(params: any) {
+    return request.get({ url: '/productCategory/lists', params })
+}
+
+// 添加商品分类
+export function apiProductCategoryAdd(params: any) {
+    return request.post({ url: '/productCategory/add', params })
+}
+
+// 编辑商品分类
+export function apiProductCategoryEdit(params: any) {
+    return request.post({ url: '/productCategory/edit', params })
+}
+
+// 删除商品分类
+export function apiProductCategoryDelete(params: any) {
+    return request.post({ url: '/productCategory/delete', params })
+}
+
+// 商品分类详情
+export function apiProductCategoryDetail(params: any) {
+    return request.get({ url: '/productCategory/detail', params })
+}

src/api/product_unit.ts

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// 商品单位列表
+export function apiProductUnitLists(params: any) {
+    return request.get({ url: '/productUnit/lists', params })
+}
+
+// 添加商品单位
+export function apiProductUnitAdd(params: any) {
+    return request.post({ url: '/productUnit/add', params })
+}
+
+// 编辑商品单位
+export function apiProductUnitEdit(params: any) {
+    return request.post({ url: '/productUnit/edit', params })
+}
+
+// 删除商品单位
+export function apiProductUnitDelete(params: any) {
+    return request.post({ url: '/productUnit/delete', params })
+}
+
+// 商品单位详情
+export function apiProductUnitDetail(params: any) {
+    return request.get({ url: '/productUnit/detail', params })
+}

src/views/dishes/edit.vue

@@ -0,0 +1,109 @@
+<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="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 Popup from '@/components/popup/index.vue'
+import { apiDishesAdd, apiDishesEdit, apiDishesDetail } from '@/api/dishes'
+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: '',
+    name: '',
+    dishes_category_id: '',
+})
+
+
+// 表单验证
+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 apiDishesDetail({
+        id: row.id
+    })
+    setFormData(data)
+}
+
+
+// 提交按钮
+const handleSubmit = async () => {
+    await formRef.value?.validate()
+    const data = { ...formData,  }
+    mode.value == 'edit' 
+        ? await apiDishesEdit(data) 
+        : await apiDishesAdd(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/dishes/index.vue

@@ -0,0 +1,132 @@
+<template>
+    <div>
+        <el-card class="!border-none mb-4" shadow="never">
+            <el-form
+                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-input class="w-[280px]" v-model="queryParams.dishes_category_id" 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/add']" type="primary" @click="handleAdd">
+                <template #icon>
+                    <icon name="el-icon-Plus" />
+                </template>
+                新增
+            </el-button>
+            <el-button
+                v-perms="['dishes/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="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">
+                        <template #default="{ row }">
+                             <el-button
+                                v-perms="['dishes/edit']"
+                                type="primary"
+                                link
+                                @click="handleEdit(row)"
+                            >
+                                编辑
+                            </el-button>
+                            <el-button
+                                v-perms="['dishes/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="dishesLists">
+import { usePaging } from '@/hooks/usePaging'
+import { useDictData } from '@/hooks/useDictOptions'
+import { apiDishesLists, apiDishesDelete } from '@/api/dishes'
+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({
+    name: '',
+    dishes_category_id: '',
+})
+
+// 选中数据
+const selectData = ref<any[]>([])
+
+// 表格选择后回调事件
+const handleSelectionChange = (val: any[]) => {
+    selectData.value = val.map(({ id }) => id)
+}
+
+// 获取字典数据
+const { dictData } = useDictData('')
+
+// 分页相关
+const { pager, getLists, resetParams, resetPage } = usePaging({
+    fetchFun: apiDishesLists,
+    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 apiDishesDelete({ id })
+    getLists()
+}
+
+getLists()
+</script>
+

src/views/dishes_category/edit.vue

@@ -0,0 +1,116 @@
+<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="pid">
+                    <el-select class="flex-1" v-model="formData.pid" 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>
+        </popup>
+    </div>
+</template>
+
+<script lang="ts" setup name="dishesCategoryEdit">
+import type { FormInstance } from 'element-plus'
+import Popup from '@/components/popup/index.vue'
+import { apiDishesCategoryAdd, apiDishesCategoryEdit, apiDishesCategoryDetail } from '@/api/dishes_category'
+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: '',
+    pid: '',
+    name: '',
+})
+
+
+// 表单验证
+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 apiDishesCategoryDetail({
+        id: row.id
+    })
+    setFormData(data)
+}
+
+
+// 提交按钮
+const handleSubmit = async () => {
+    await formRef.value?.validate()
+    const data = { ...formData,  }
+    mode.value == 'edit' 
+        ? await apiDishesCategoryEdit(data) 
+        : await apiDishesCategoryAdd(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/dishes_category/index.vue

@@ -0,0 +1,125 @@
+<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">
+				<template #icon>
+					<icon name="el-icon-Plus" />
+				</template>
+				新增
+			</el-button>
+			<el-button v-perms="['dishes_category/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="pid">
+						<template #default="{ row }">
+							<dict-value :options="dictData.show_status" :value="row.pid" />
+						</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-perms="['dishes_category/edit']" type="primary" link @click="handleEdit(row)">
+								编辑
+							</el-button>
+							<el-button v-perms="['dishes_category/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="dishesCategoryLists">
+	import { usePaging } from '@/hooks/usePaging'
+	import { useDictData } from '@/hooks/useDictOptions'
+	import { apiDishesCategoryLists, apiDishesCategoryDelete, apiDishesCategoryAll } from '@/api/dishes_category'
+	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({
+		pid: '',
+		name: '',
+	})
+
+	// 选中数据
+	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: apiDishesCategoryLists,
+		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 apiDishesCategoryDelete({ id })
+		getLists()
+	}
+
+	getLists()
+</script>

src/views/dishes_product/edit.vue

@@ -0,0 +1,138 @@
+<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="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-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="nums">
+                    <el-input v-model="formData.nums" clearable placeholder="请输入数量" />
+                </el-form-item>
+            </el-form>
+        </popup>
+    </div>
+</template>
+
+<script lang="ts" setup name="dishesProductEdit">
+import type { FormInstance } from 'element-plus'
+import Popup from '@/components/popup/index.vue'
+import { apiDishesProductAdd, apiDishesProductEdit, apiDishesProductDetail } from '@/api/dishes_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: '',
+    dishes_id: '',
+    product_id: '',
+    unit_id: '',
+    nums: '',
+})
+
+
+// 表单验证
+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 apiDishesProductDetail({
+        id: row.id
+    })
+    setFormData(data)
+}
+
+
+// 提交按钮
+const handleSubmit = async () => {
+    await formRef.value?.validate()
+    const data = { ...formData,  }
+    mode.value == 'edit' 
+        ? await apiDishesProductEdit(data) 
+        : await apiDishesProductAdd(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/dishes_product/index.vue

@@ -0,0 +1,162 @@
+<template>
+    <div>
+        <el-card class="!border-none mb-4" shadow="never">
+            <el-form
+                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">
+                <template #icon>
+                    <icon name="el-icon-Plus" />
+                </template>
+                新增
+            </el-button>
+            <el-button
+                v-perms="['dishes_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="dishes_id">
+                        <template #default="{ row }">
+                            <dict-value :options="dictData.show_status" :value="row.dishes_id" />
+                        </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
+                                v-perms="['dishes_product/edit']"
+                                type="primary"
+                                link
+                                @click="handleEdit(row)"
+                            >
+                                编辑
+                            </el-button>
+                            <el-button
+                                v-perms="['dishes_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="dishesProductLists">
+import { usePaging } from '@/hooks/usePaging'
+import { useDictData } from '@/hooks/useDictOptions'
+import { apiDishesProductLists, apiDishesProductDelete } from '@/api/dishes_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({
+    dishes_id: '',
+    product_id: '',
+})
+
+// 选中数据
+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: apiDishesProductLists,
+    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 apiDishesProductDelete({ id })
+    getLists()
+}
+
+getLists()
+</script>
+

src/views/product/edit.vue

@@ -0,0 +1,150 @@
+<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

@@ -0,0 +1,183 @@
+<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

@@ -0,0 +1,116 @@
+<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="pid">
+                    <el-select class="flex-1" v-model="formData.pid" 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>
+        </popup>
+    </div>
+</template>
+
+<script lang="ts" setup name="productCategoryEdit">
+import type { FormInstance } from 'element-plus'
+import Popup from '@/components/popup/index.vue'
+import { apiProductCategoryAdd, apiProductCategoryEdit, apiProductCategoryDetail } from '@/api/product_category'
+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: '',
+    pid: '',
+    name: '',
+})
+
+
+// 表单验证
+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 apiProductCategoryDetail({
+        id: row.id
+    })
+    setFormData(data)
+}
+
+
+// 提交按钮
+const handleSubmit = async () => {
+    await formRef.value?.validate()
+    const data = { ...formData,  }
+    mode.value == 'edit' 
+        ? await apiProductCategoryEdit(data) 
+        : await apiProductCategoryAdd(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_category/index.vue

@@ -0,0 +1,144 @@
+<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="['product_category/add']" type="primary" @click="handleAdd">
+                <template #icon>
+                    <icon name="el-icon-Plus" />
+                </template>
+                新增
+            </el-button>
+            <el-button
+                v-perms="['product_category/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="pid">
+                        <template #default="{ row }">
+                            <dict-value :options="dictData.show_status" :value="row.pid" />
+                        </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-perms="['product_category/edit']"
+                                type="primary"
+                                link
+                                @click="handleEdit(row)"
+                            >
+                                编辑
+                            </el-button>
+                            <el-button
+                                v-perms="['product_category/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="productCategoryLists">
+import { usePaging } from '@/hooks/usePaging'
+import { useDictData } from '@/hooks/useDictOptions'
+import { apiProductCategoryLists, apiProductCategoryDelete } from '@/api/product_category'
+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({
+    pid: '',
+    name: '',
+})
+
+// 选中数据
+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: apiProductCategoryLists,
+    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 apiProductCategoryDelete({ id })
+    getLists()
+}
+
+getLists()
+</script>
+

src/views/product_unit/edit.vue

@@ -0,0 +1,109 @@
+<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="name">
+                    <el-input v-model="formData.name" clearable placeholder="请输入名称" />
+                </el-form-item>
+                <el-form-item label="公斤转换值" prop="conversion_value">
+                    <el-input v-model="formData.conversion_value" clearable placeholder="请输入公斤转换值" />
+                </el-form-item>
+            </el-form>
+        </popup>
+    </div>
+</template>
+
+<script lang="ts" setup name="productUnitEdit">
+import type { FormInstance } from 'element-plus'
+import Popup from '@/components/popup/index.vue'
+import { apiProductUnitAdd, apiProductUnitEdit, apiProductUnitDetail } from '@/api/product_unit'
+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: '',
+    name: '',
+    conversion_value: '',
+})
+
+
+// 表单验证
+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 apiProductUnitDetail({
+        id: row.id
+    })
+    setFormData(data)
+}
+
+
+// 提交按钮
+const handleSubmit = async () => {
+    await formRef.value?.validate()
+    const data = { ...formData,  }
+    mode.value == 'edit' 
+        ? await apiProductUnitEdit(data) 
+        : await apiProductUnitAdd(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_unit/index.vue

@@ -0,0 +1,128 @@
+<template>
+    <div>
+        <el-card class="!border-none mb-4" shadow="never">
+            <el-form
+                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>
+                    <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_unit/add']" type="primary" @click="handleAdd">
+                <template #icon>
+                    <icon name="el-icon-Plus" />
+                </template>
+                新增
+            </el-button>
+            <el-button
+                v-perms="['product_unit/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="name" show-overflow-tooltip />
+                    <el-table-column label="公斤转换值" prop="conversion_value" 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-perms="['product_unit/edit']"
+                                type="primary"
+                                link
+                                @click="handleEdit(row)"
+                            >
+                                编辑
+                            </el-button>
+                            <el-button
+                                v-perms="['product_unit/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="productUnitLists">
+import { usePaging } from '@/hooks/usePaging'
+import { useDictData } from '@/hooks/useDictOptions'
+import { apiProductUnitLists, apiProductUnitDelete } from '@/api/product_unit'
+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({
+    name: '',
+})
+
+// 选中数据
+const selectData = ref<any[]>([])
+
+// 表格选择后回调事件
+const handleSelectionChange = (val: any[]) => {
+    selectData.value = val.map(({ id }) => id)
+}
+
+// 获取字典数据
+const { dictData } = useDictData('')
+
+// 分页相关
+const { pager, getLists, resetParams, resetPage } = usePaging({
+    fetchFun: apiProductUnitLists,
+    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 apiProductUnitDelete({ id })
+    getLists()
+}
+
+getLists()
+</script>
+