From b80d2cecf91e0a6406000b7d4122666100c74d54 Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Fri, 31 May 2024 14:24:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                          |   2 +-
 .env.development.example                  |   2 +-
 src/api/store_category.ts                 |  26 +++
 src/api/store_product.ts                  |  26 +++
 src/views/dev_tools/code/edit.vue         |  95 +++++++++-
 src/views/store/store_category/edit.vue   | 179 ++++++++++++++++++
 src/views/store/store_category/index.vue  | 183 ++++++++++++++++++
 src/views/store/store_product/details.vue |  83 ++++++++
 src/views/store/store_product/edit.vue    | 219 ++++++++++++++++++++++
 src/views/store/store_product/index.vue   | 196 +++++++++++++++++++
 10 files changed, 1007 insertions(+), 4 deletions(-)
 create mode 100644 src/api/store_category.ts
 create mode 100644 src/api/store_product.ts
 create mode 100644 src/views/store/store_category/edit.vue
 create mode 100644 src/views/store/store_category/index.vue
 create mode 100644 src/views/store/store_product/details.vue
 create mode 100644 src/views/store/store_product/edit.vue
 create mode 100644 src/views/store/store_product/index.vue

diff --git a/.env.development b/.env.development
index a57c3857..824629a2 100644
--- a/.env.development
+++ b/.env.development
@@ -1,4 +1,4 @@
 NODE_ENV = 'development'
 
 # Base API
-VITE_APP_BASE_URL='http://127.0.0.1:8787'
\ No newline at end of file
+VITE_APP_BASE_URL='http://192.168.1.22:8545'
\ No newline at end of file
diff --git a/.env.development.example b/.env.development.example
index a57c3857..824629a2 100644
--- a/.env.development.example
+++ b/.env.development.example
@@ -1,4 +1,4 @@
 NODE_ENV = 'development'
 
 # Base API
-VITE_APP_BASE_URL='http://127.0.0.1:8787'
\ No newline at end of file
+VITE_APP_BASE_URL='http://192.168.1.22:8545'
\ No newline at end of file
diff --git a/src/api/store_category.ts b/src/api/store_category.ts
new file mode 100644
index 00000000..6a11579f
--- /dev/null
+++ b/src/api/store_category.ts
@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// 商品分类表列表
+export function apiStoreCategoryLists(params: any) {
+    return request.get({ url: '/store_category/storecategory/lists', params })
+}
+
+// 添加商品分类表
+export function apiStoreCategoryAdd(params: any) {
+    return request.post({ url: '/store_category/storecategory/add', params })
+}
+
+// 编辑商品分类表
+export function apiStoreCategoryEdit(params: any) {
+    return request.post({ url: '/store_category/storecategory/edit', params })
+}
+
+// 删除商品分类表
+export function apiStoreCategoryDelete(params: any) {
+    return request.post({ url: '/store_category/storecategory/delete', params })
+}
+
+// 商品分类表详情
+export function apiStoreCategoryDetail(params: any) {
+    return request.get({ url: '/store_category/storecategory/detail', params })
+}
\ No newline at end of file
diff --git a/src/api/store_product.ts b/src/api/store_product.ts
new file mode 100644
index 00000000..8b562816
--- /dev/null
+++ b/src/api/store_product.ts
@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// 商品表列表
+export function apiStoreProductLists(params: any) {
+    return request.get({ url: '/store_product/storeproduct/lists', params })
+}
+
+// 添加商品表
+export function apiStoreProductAdd(params: any) {
+    return request.post({ url: '/store_product/storeproduct/add', params })
+}
+
+// 编辑商品表
+export function apiStoreProductEdit(params: any) {
+    return request.post({ url: '/store_product/storeproduct/edit', params })
+}
+
+// 删除商品表
+export function apiStoreProductDelete(params: any) {
+    return request.post({ url: '/store_product/storeproduct/delete', params })
+}
+
+// 商品表详情
+export function apiStoreProductDetail(params: any) {
+    return request.get({ url: '/store_product/storeproduct/detail', params })
+}
\ No newline at end of file
diff --git a/src/views/dev_tools/code/edit.vue b/src/views/dev_tools/code/edit.vue
index 67640886..35c3aa9e 100644
--- a/src/views/dev_tools/code/edit.vue
+++ b/src/views/dev_tools/code/edit.vue
@@ -60,6 +60,15 @@
                             </el-table-column>
                             <el-table-column label="物理类型" prop="column_type" />
                             <el-table-column label="必填" width="80">
+                                <template #header>
+                                    <el-checkbox
+                                        :true-label="1"
+                                        :false-label="0"
+                                        :checked="is_required"
+                                        @change="handleAllRequired"
+                                    />
+                                    <span class="ml-2">必填</span>
+                                </template>
                                 <template v-slot="{ row }">
                                     <el-checkbox
                                         v-model="row.is_required"
@@ -69,6 +78,15 @@
                                 </template>
                             </el-table-column>
                             <el-table-column label="插入" width="80">
+                                <template #header>
+                                    <el-checkbox
+                                        :true-label="1"
+                                        :false-label="0"
+                                        :checked="is_insert"
+                                        @change="handleAllInsert"
+                                    />
+                                    <span class="ml-2">插入</span>
+                                </template>
                                 <template v-slot="{ row }">
                                     <el-checkbox
                                         v-model="row.is_insert"
@@ -78,6 +96,15 @@
                                 </template>
                             </el-table-column>
                             <el-table-column label="编辑" width="80">
+                                <template #header>
+                                    <el-checkbox
+                                        :true-label="1"
+                                        :false-label="0"
+                                        :checked="is_update"
+                                        @change="handleAllUpdate"
+                                    />
+                                    <span class="ml-2">编辑</span>
+                                </template>
                                 <template v-slot="{ row }">
                                     <el-checkbox
                                         v-model="row.is_update"
@@ -87,6 +114,15 @@
                                 </template>
                             </el-table-column>
                             <el-table-column label="列表" width="80">
+                                <template #header>
+                                    <el-checkbox
+                                        :true-label="1"
+                                        :false-label="0"
+                                        :checked="is_lists"
+                                        @change="handleAllLists"
+                                    />
+                                    <span class="ml-2">列表</span>
+                                </template>
                                 <template v-slot="{ row }">
                                     <el-checkbox
                                         v-model="row.is_lists"
@@ -96,17 +132,27 @@
                                 </template>
                             </el-table-column>
                             <el-table-column label="查询" width="80">
+                                <template #header>
+                                    <el-checkbox
+                                        :true-label="1"
+                                        :false-label="0"
+                                        :checked="is_query"
+                                        @change="handleAllQuery"
+                                    />
+                                    <span class="ml-2">查询</span>
+                                </template>
                                 <template v-slot="{ row }">
                                     <el-checkbox
                                         v-model="row.is_query"
                                         :true-label="1"
                                         :false-label="0"
+                                        @change="handleQueryChange(row)"
                                     />
                                 </template>
                             </el-table-column>
                             <el-table-column label="查询方式">
                                 <template v-slot="{ row }">
-                                    <el-select v-model="row.query_type">
+                                    <el-select class="w-[280px]" v-model="row.query_type">
                                         <el-option label="=" value="=" />
                                         <el-option label="!=" value="!=" />
                                         <el-option label=">" value=">" />
@@ -134,7 +180,7 @@
                             </el-table-column>
                             <el-table-column label="字典类型" min-width="120">
                                 <template v-slot="{ row }">
-                                    <el-select
+                                    <el-select class="w-[280px]"
                                         v-model="row.dict_type"
                                         clearable
                                         :disabled="
@@ -525,4 +571,49 @@ const onSubmit = async () => {
 }
 
 getDetails()
+
+const is_required = computed(()=>{
+    return formData.table_column.findIndex(item=>item.is_required==0) ? false : true
+})
+const handleAllRequired = (e:any)=>{
+    formData.table_column.forEach((item:any)=>{
+        item.is_required = e;
+    })
+}
+
+const is_insert = computed(()=>{
+    return formData.table_column.findIndex(item=>item.is_insert==0) ? false : true
+})
+const handleAllInsert = (e:any)=>{
+    formData.table_column.forEach((item:any)=>{
+        item.is_insert = e;
+    })
+}
+
+const is_update = computed(()=>{
+    return formData.table_column.findIndex(item=>item.is_update==0) ? false : true
+})
+const handleAllUpdate = (e:any)=>{
+    formData.table_column.forEach((item:any)=>{
+        item.is_update = e;
+    })
+}
+
+const is_lists = computed(()=>{
+    return formData.table_column.findIndex(item=>item.is_lists==0) ? false : true
+})
+const handleAllLists = (e:any)=>{
+    formData.table_column.forEach((item:any)=>{
+        item.is_lists = e;
+    })
+}
+
+const is_query = computed(()=>{
+    return formData.table_column.findIndex(item=>item.is_query==0) ? false : true
+})
+const handleAllQuery = (e:any)=>{
+    formData.table_column.forEach((item:any)=>{
+        item.is_query = e;
+    })
+}
 </script>
diff --git a/src/views/store/store_category/edit.vue b/src/views/store/store_category/edit.vue
new file mode 100644
index 00000000..5586f447
--- /dev/null
+++ b/src/views/store/store_category/edit.vue
@@ -0,0 +1,179 @@
+<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="所属ID" prop="pid">
+          <!-- <el-input v-model="formData.pid" clearable placeholder="请输入所属ID" /> -->
+          <el-cascader
+            v-model="formData.pid"
+            :props="props"
+            :show-all-levels="false"
+            style="width: 100%"
+          />
+        </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="data">
+          <el-input
+            v-model="formData.data"
+            clearable
+            placeholder="请输入备注信息"
+          />
+        </el-form-item>
+        <el-form-item label="图片" prop="pic">
+          <material-picker v-model="formData.pic" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input
+            v-model="formData.sort"
+            clearable
+            placeholder="请输入排序"
+          />
+        </el-form-item>
+      </el-form>
+    </popup>
+  </div>
+</template>
+
+<script lang="ts" setup name="storeCategoryEdit">
+import type { FormInstance } from "element-plus";
+import Popup from "@/components/popup/index.vue";
+import {
+  apiStoreCategoryAdd,
+  apiStoreCategoryEdit,
+  apiStoreCategoryDetail,
+  apiStoreCategoryLists,
+} from "@/api/store_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 props = {
+  value: "id",
+  label: "name",
+  checkStrictly: true,
+  emitPath: false,
+  lazy: true,
+  lazyLoad(node, resolve) {
+    let pid = node.value || 0;
+    apiStoreCategoryLists({
+      pid: pid,
+      page_size: 10000,
+    }).then((res) => {
+      resolve(
+        res.lists.map((item: any) => {
+          item.leaf = item.pid > 0;
+          return item;
+        })
+      );
+    });
+  },
+};
+
+// 弹窗标题
+const popupTitle = computed(() => {
+  return mode.value == "edit" ? "编辑商品分类表" : "新增商品分类表";
+});
+
+// 表单数据
+const formData = reactive({
+  id: "",
+  pid: 0,
+  name: "",
+  data: "",
+  pic: "",
+  sort: "",
+});
+
+// 表单验证
+const formRules = reactive<any>({
+//   pid: [
+//     {
+//       required: true,
+//       message: "请输入所属ID",
+//       trigger: ["blur"],
+//     },
+//   ],
+  name: [
+    {
+      required: true,
+      message: "请输入分类名称",
+      trigger: ["blur"],
+    },
+  ],
+});
+
+
+// 获取详情
+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 apiStoreCategoryDetail({
+    id: row.id,
+  });
+  setFormData(data);
+};
+
+// 提交按钮
+const handleSubmit = async () => {
+  await formRef.value?.validate();
+  let data = { ...formData };
+  
+  mode.value == "edit"
+    ? await apiStoreCategoryEdit(data)
+    : await apiStoreCategoryAdd(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>
diff --git a/src/views/store/store_category/index.vue b/src/views/store/store_category/index.vue
new file mode 100644
index 00000000..96eaf236
--- /dev/null
+++ b/src/views/store/store_category/index.vue
@@ -0,0 +1,183 @@
+<template>
+  <div>
+    <el-card class="!border-none mb-4" shadow="never">
+      <el-form class="mb-[-16px] disabledEdit" :model="queryParams" inline>
+        <!-- <el-form-item label="所属ID" prop="pid">
+          <el-input class="w-[280px]" v-model="queryParams.pid" clearable placeholder="请输入所属ID" />
+        </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="data">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.data"
+            clearable
+            placeholder="请输入备注信息"
+          />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.sort"
+            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="['store.storecategory/add']"
+        type="primary"
+        @click="handleAdd"
+      >
+        <template #icon>
+          <icon name="el-icon-Plus" />
+        </template>
+        新增
+      </el-button>
+      <el-button
+        v-perms="['store.storecategory/delete']"
+        :disabled="!selectData.length"
+        @click="handleDelete(selectData)"
+      >
+        删除
+      </el-button>
+      <div class="mt-4" style="cursor: pointer">
+        <el-table
+          :data="pager.lists"
+          @selection-change="handleSelectionChange"
+          @cell-click="cellClick"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column label="ID" prop="id" width="120" />
+          <el-table-column label="所属ID" prop="pid" show-overflow-tooltip />
+          <el-table-column label="分类名称" prop="name" show-overflow-tooltip />
+          <el-table-column label="备注信息" prop="data" show-overflow-tooltip />
+          <el-table-column label="图片" prop="pic">
+            <template #default="{ row }">
+              <el-image style="width: 50px; height: 50px" :src="row.pic" />
+            </template>
+          </el-table-column>
+          <el-table-column label="排序" prop="sort" show-overflow-tooltip />
+          <el-table-column label="操作" width="120" fixed="right">
+            <template #default="{ row }">
+              <el-button
+                v-perms="['store.storecategory/edit']"
+                type="primary"
+                link
+                @click.stop="handleEdit(row)"
+              >
+                编辑
+              </el-button>
+              <el-button
+                v-perms="['store.storecategory/delete']"
+                type="danger"
+                link
+                @click.stop="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="storeCategoryLists">
+import { usePaging } from "@/hooks/usePaging";
+import { useDictData } from "@/hooks/useDictOptions";
+import {
+  apiStoreCategoryLists,
+  apiStoreCategoryDelete,
+} from "@/api/store_category";
+import { timeFormat } from "@/utils/util";
+import { useRoute, useRouter } from "vue-router";
+import feedback from "@/utils/feedback";
+import EditPopup from "./edit.vue";
+
+const editRef = shallowRef<InstanceType<typeof EditPopup>>();
+// 是否显示编辑框
+const showEdit = ref(false);
+
+const route = useRoute();
+const router = useRouter();
+
+// 查询条件
+const queryParams = reactive({
+  pid: route.query?.pid || 0,
+  name: "",
+  data: "",
+  pic: "",
+  sort: "",
+});
+
+// 选中数据
+const selectData = ref<any[]>([]);
+
+// 表格选择后回调事件
+const handleSelectionChange = (val: any[]) => {
+  selectData.value = val.map(({ id }) => id);
+};
+
+// 获取字典数据
+const { dictData } = useDictData("");
+
+// 分页相关
+const { pager, getLists, resetParams, resetPage } = usePaging({
+  fetchFun: apiStoreCategoryLists,
+  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 apiStoreCategoryDelete({ id });
+  getLists();
+};
+
+getLists();
+
+// 跳转子级分类
+const cellClick = (row: any, column: any) => {
+  if (column.no == 7) return console.log("无效点击");
+
+  router.push({
+    path: "/store/store_category",
+    query: {
+      pid: row.id,
+    },
+  });
+};
+</script>
diff --git a/src/views/store/store_product/details.vue b/src/views/store/store_product/details.vue
new file mode 100644
index 00000000..9791c06c
--- /dev/null
+++ b/src/views/store/store_product/details.vue
@@ -0,0 +1,83 @@
+<template>
+    <div class="edit-popup">
+        <popup
+            ref="popupRef"
+            title="详情"
+            :async="true"
+            width="550px"
+            :cancelButtonText="false"
+            :confirmButtonText="false"
+        >
+            <el-form ref="formRef" :model="formData" label-width="90px">
+                <el-form-item label="商品名称" prop="store_name">
+                    <el-input v-model="formData.store_name" clearable placeholder="请输入商品名称" :readonly="true"/>
+                </el-form-item>
+            </el-form>
+        </popup>
+    </div>
+</template>
+
+<script lang="ts" setup name="storeProductDETAILS">
+import type { FormInstance } from 'element-plus'
+import Popup from '@/components/popup/index.vue'
+import { apiStoreProductAdd, apiStoreProductEdit, apiStoreProductDetail } from '@/api/store_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 formData = reactive({
+    id: '',
+    store_name: '',
+})
+
+
+
+// 获取详情
+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 apiStoreProductDetail({
+        id: row.id
+    })
+    setFormData(data)
+}
+
+//打开弹窗
+const open = () => {
+    popupRef.value?.open()
+}
+
+// 关闭回调
+const handleClose = () => {
+    emit('close')
+}
+
+
+
+defineExpose({
+    open,
+    setFormData,
+    getDetail
+})
+</script>
diff --git a/src/views/store/store_product/edit.vue b/src/views/store/store_product/edit.vue
new file mode 100644
index 00000000..4b0bc8ff
--- /dev/null
+++ b/src/views/store/store_product/edit.vue
@@ -0,0 +1,219 @@
+<template>
+  <el-card>
+    <div class="mb-4 text-lg font-bold">
+      {{ mode == "add" ? "添加商品" : "编辑商品" }}
+    </div>
+    <el-form
+      ref="formRef"
+      :model="formData"
+      label-width="90px"
+      :rules="formRules"
+    >
+      <el-form-item label="商品图片" prop="image">
+        <material-picker v-model="formData.image" :limit="1" />
+      </el-form-item>
+      <el-form-item label="商品名称" prop="store_name">
+        <el-input
+          v-model="formData.store_name"
+          clearable
+          placeholder="请输入商品名称"
+          :readonly="false"
+        />
+      </el-form-item>
+      <el-form-item label="商品条码" prop="bar_code">
+        <el-input
+          v-model="formData.bar_code"
+          clearable
+          placeholder="请输入商品条码"
+          :readonly="false"
+        />
+      </el-form-item>
+      <el-form-item label="商品分类" prop="cate_id">
+        <el-input
+          v-model="formData.cate_id"
+          clearable
+          placeholder="请输入商品分类"
+          :readonly="false"
+        />
+      </el-form-item>
+      <el-form-item label="商品价格" prop="price">
+        <el-input
+          v-model="formData.price"
+          clearable
+          placeholder="请输入商品价格"
+          :readonly="false"
+        />
+      </el-form-item>
+      <el-form-item label="商品单位" prop="unit">
+        <el-input
+          v-model="formData.unit"
+          clearable
+          placeholder="请输入商品单位"
+          :readonly="false"
+        />
+      </el-form-item>
+      <el-form-item label="库存" prop="stock">
+        <el-input
+          v-model="formData.stock"
+          clearable
+          placeholder="请输入库存"
+          :readonly="false"
+        />
+      </el-form-item>
+      <el-form-item label="成本价" prop="cost">
+        <el-input
+          v-model="formData.cost"
+          clearable
+          placeholder="请输入成本价"
+          :readonly="false"
+        />
+      </el-form-item>
+      <el-form-item label="采购价" prop="purchase">
+        <el-input
+          v-model="formData.purchase"
+          clearable
+          placeholder="请输入采购价"
+          :readonly="false"
+        />
+      </el-form-item>
+      <el-form-item label="">
+        <el-button @click="handleSubmit" type="primary" class="w-40">提交</el-button>
+      </el-form-item>
+    </el-form>
+  </el-card>
+</template>
+
+<script lang="ts" setup name="storeProductEdit">
+import type { FormInstance } from "element-plus";
+import {
+  apiStoreProductAdd,
+  apiStoreProductEdit,
+  apiStoreProductDetail,
+} from "@/api/store_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 formData = reactive({
+  image: "",
+  store_name: "",
+  bar_code: "",
+  cate_id: "",
+  price: "",
+  unit: "",
+  stock: "",
+  cost: "",
+  purchase: "",
+});
+
+// 表单验证
+const formRules = reactive<any>({
+  store_name: [
+    {
+      required: true,
+      message: "请输入商品名称",
+      trigger: ["blur"],
+    },
+  ],
+  bar_code: [
+    {
+      required: true,
+      message: "请输入商品条码",
+      trigger: ["blur"],
+    },
+  ],
+  cate_id: [
+    {
+      required: true,
+      message: "请输入商品分类",
+      trigger: ["blur", "change"],
+    },
+  ],
+  price: [
+    {
+      required: true,
+      message: "请输入商品价格",
+      trigger: ["blur"],
+    },
+  ],
+  unit: [
+    {
+      required: true,
+      message: "请输入商品单位",
+      trigger: ["blur","change"],
+    },
+  ],
+  stock: [
+    {
+      required: true,
+      message: "请输入库存",
+      trigger: ["blur"],
+    },
+  ],
+  cost: [
+    {
+      required: true,
+      message: "请输入成本价",
+      trigger: ["blur"],
+    },
+  ],
+  purchase: [
+    {
+      required: true,
+      message: "请输入采购价",
+      trigger: ["blur"],
+    },
+  ],
+  image: [
+    {
+      required: true,
+      message: "请输入商品图片",
+      trigger: ["blur","change"],
+    },
+  ],
+});
+
+// 获取详情
+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 apiStoreProductDetail({
+    id: row.id,
+  });
+  setFormData(data);
+};
+
+// 提交按钮
+const handleSubmit = async () => {
+  await formRef.value?.validate();
+  const data = { ...formData };
+  mode.value == "edit"
+    ? await apiStoreProductEdit(data)
+    : await apiStoreProductAdd(data);
+  popupRef.value?.close();
+  emit("success");
+};
+
+
+defineExpose({
+  setFormData,
+  getDetail,
+});
+</script>
diff --git a/src/views/store/store_product/index.vue b/src/views/store/store_product/index.vue
new file mode 100644
index 00000000..8a2dd172
--- /dev/null
+++ b/src/views/store/store_product/index.vue
@@ -0,0 +1,196 @@
+<template>
+  <div>
+    <el-card class="!border-none mb-4" shadow="never">
+      <el-form class="mb-[-16px]" :model="queryParams" inline>
+        <el-form-item label="商品名称" prop="store_name">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.store_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="['store_product.store_product/add']"
+        type="primary"
+        icon="Plus"
+      >
+        <router-link
+          :to="{
+            path: 'store_product_edit',
+            query: { id: 0, mode: 'add' },
+          }"
+        >
+          新增
+        </router-link>
+      </el-button>
+      <el-button
+        v-perms="['store_product.store_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="image">
+            <template #default="{ row }">
+              <el-image style="width: 50px; height: 50px" :src="row.image" />
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="商品名称"
+            prop="store_name"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="分类id"
+            prop="cate_id"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="商品价格"
+            prop="price"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="单位名"
+            prop="unit_name"
+            show-overflow-tooltip
+          />
+          <el-table-column label="销量" prop="sales" show-overflow-tooltip />
+          <el-table-column label="库存" prop="stock" show-overflow-tooltip />
+          <el-table-column label="状态" prop="is_show" show-overflow-tooltip>
+            <template #default="{ row }">
+              {{ row.is_show ? "上架" : "未上架" }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="是否新品"
+            prop="is_new"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="添加时间"
+            prop="add_time"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="是否包邮"
+            prop="is_postage"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="是否删除"
+            prop="is_del"
+            show-overflow-tooltip
+          />
+          <el-table-column label="成本价" prop="cost" show-overflow-tooltip />
+          <el-table-column label="操作" width="120" fixed="right">
+            <template #default="{ row }">
+              <el-button
+                v-perms="['store_product.store_product/edit']"
+                type="primary"
+                link
+                @click="handleEdit(row)"
+              >
+                编辑
+              </el-button>
+              <el-button
+                v-perms="['store_product.store_product/edit']"
+                type="primary"
+                link
+                @click="handleDetail(row)"
+              >
+                详情
+              </el-button>
+              <el-button
+                v-perms="['store_product.store_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>
+    <details ref="detailsRef"></details>
+  </div>
+</template>
+
+<script lang="ts" setup name="storeProductLists">
+import { usePaging } from "@/hooks/usePaging";
+import { useDictData } from "@/hooks/useDictOptions";
+import {
+  apiStoreProductLists,
+  apiStoreProductDelete,
+} from "@/api/store_product";
+import { timeFormat } from "@/utils/util";
+import feedback from "@/utils/feedback";
+import details from "./details.vue";
+
+const detailsRef = ref(null);
+
+// 查询条件
+const queryParams = reactive({
+  store_name: "",
+  cate_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: apiStoreProductLists,
+  params: queryParams,
+});
+
+// 添加
+const handleAdd = async () => {
+  
+};
+
+// 详情
+const handleDetail = async (data: any) => {
+  detailsRef.value?.open();
+  detailsRef.value?.setFormData();
+};
+
+// 编辑
+const handleEdit = async (data: any) => {
+ 
+};
+
+// 删除
+const handleDelete = async (id: number | any[]) => {
+  await feedback.confirm("确定要删除？");
+  await apiStoreProductDelete({ id });
+  getLists();
+};
+
+getLists();
+</script>