feat: 商品分组

src/components/CURD/PageModal.vue

@@ -195,6 +195,11 @@
                   <template v-else-if="item.type === 'date-picker'">
                     <el-date-picker v-model="formData[item.prop]" v-bind="item.attrs" />
                   </template>
+                  <template v-else-if="item.type === 'time-picker'">
+                    <el-time-picker value-format="HH:mm:ss" v-model="formData[item.prop]" is-range range-separator="到"
+                      start-placeholder="开始时间" end-placeholder="结束时间" />
+                  </template>
+
                   <!-- Text 文本 -->
                   <template v-else-if="item.type === 'text'">
                     <el-text v-bind="item.attrs">

src/components/CURD/types.ts

@@ -241,6 +241,7 @@ export type IFormItems<T = any> = Array<{
   | "UpImage"
   | "radio-button"
   | "title"
+  | "time-picker"
   | "custom";
   // 组件属性
   disabled?: boolean;

src/components/mycomponents/myDialog.vue

@@ -34,10 +34,12 @@ function open() {
   dialogVisible.value = true
 }
 function Confirm() {
-  dialogVisible.value = false
   emit('confirm')
 }
-defineExpose({ open })
+function close() {
+  dialogVisible.value = false
+}
+defineExpose({ open, close })
 </script>
 <style scoped>
 .dialog-footer button:first-child {

src/views/online-shop/goods-group.vue

@@ -18,7 +18,7 @@
           <DictLabel v-model="scope.row[scope.prop]" code="gender" />
         </template>
         <template #timemanagement="scope">
-          {{ scope.row.startTime }}-{{ scope.row.endTime }}
+          {{ scope.row.saleStartTime }}-{{ scope.row.saleEndTime }}
         </template>
         <template #mobile="scope">
           <el-text>{{ scope.row[scope.prop] }}</el-text>
@@ -27,7 +27,8 @@
       </page-content>
 
       <!-- 新增 -->
-      <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
+      <!-- <page-modal ref="addModalRef" @formDataChange="formDataChange" :modal-config="addModalConfig"
+        @submit-click="handleSubmitClick">
         <template #gender="scope">
           <Dict v-model="scope.formData[scope.prop]" code="gender" />
         </template>
@@ -38,7 +39,6 @@
                 <Plus />
               </el-icon>添加商品
             </el-button>
-            <!-- 选责商品列表 -->
             <selectGoodslist @deleteItememit="deleteItem($event)" :list="selectData"></selectGoodslist>
           </div>
         </template>
@@ -48,7 +48,7 @@
               start-placeholder="开始时间" end-placeholder="结束时间" />
           </template>
         </template>
-      </page-modal>
+      </page-modal> -->
 
       <!-- 编辑 -->
       <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
@@ -84,10 +84,6 @@
         </template>
       </page-content>
     </template>
-    <!-- 新增 -->
-    <myDialog title="选择商品" width="50%" ref="myDialogRef" @Confirm="subitgood">
-
-    </myDialog>
     <!-- 新增添加商品 -->
     <myDialog title="选择商品" width="50%" ref="myDialogRef" @Confirm="subitgood">
       <page-search ref="searchRef" :search-config="searchConfig2" @query-click="handleQueryClick"
@@ -112,11 +108,53 @@
         </template>
       </page-content>
     </myDialog>
+    <!-- 新增 -->
+    <myDialog :title="title" width="30%" ref="myDialogRefAdd" @Confirm="addConfirm()">
+      <el-form :model="forms" label-width="120px" ref="elFormref" :rules="rules">
+        <el-form-item label="分组名称" prop="name">
+          <el-input v-model="forms.name" />
+        </el-form-item>
+        <el-form-item label="选择商品">
+          <el-button type="primary" icon="Plus" @click="addgoods">添加商品</el-button>
+        </el-form-item>
+        <el-form-item label="" v-if="selectData.length">
+          <!-- 选责商品列表 -->
+          <selectGoodslist @deleteItememit="deleteItem($event)" :list="selectData"></selectGoodslist>
+        </el-form-item>
+        <el-form-item label="分组状态">
+          <el-radio-group v-model="forms.status">
+            <el-radio :value="1" label="启用" />
+            <el-radio :value="0" label="禁用" />
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="售卖时间管控">
+          <el-radio-group v-model="forms.useTime">
+            <el-radio :value="1" label="启用" />
+            <el-radio :value="0" label="禁用" />
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="时间选择" v-if="forms.useTime == 1">
+          <el-time-picker value-format="HH:mm:ss" v-model="forms.time" is-range range-separator="到"
+            start-placeholder="开始时间" end-placeholder="结束时间" />
+        </el-form-item>
+        <el-form-item label="排列方式">
+          <el-radio-group v-model="forms.sortMode">
+            <el-radio value="0" label="默认" />
+            <el-radio value="1" label="价格由高到低" />
+            <el-radio value="2" label="销量由高到低" />
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="分组排序">
+          <el-input-number v-model="forms.sort" controls-position="right" />
+        </el-form-item>
+      </el-form>
+    </myDialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import UserAPI from "@/api/onlineShop/goodsGroupconfig";
+import type { FormInstance, FormRules } from "element-plus";
 
 import type { IObject, IOperatData } from "@/components/CURD/types";
 import usePage from "@/components/CURD/usePage";
@@ -145,8 +183,7 @@ const {
 
 // 新增
 async function handleAddClick() {
-  console.log(123)
-  // addModalRef.value?.setModalVisible();
+  addModalRef.value?.setModalVisible();
   selectData.value = []
   // 加载上级规格下拉数据源 
   // addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
@@ -155,32 +192,91 @@ async function handleAddClick() {
 }
 const myDialogRef = ref(null)
 const contentRefs = ref(null)
+const myDialogRefAdd = ref(null)
+const elFormref = ref(null)
+let title = ref("新增分组")
 // 选中的商品数据
 let selectData = ref([])
+let forms = reactive({
+  name: "",
+  status: 1,
+  useTime: 0,
+  sortMode: 0,
+  sort: 1,
+  time: ""
+})
 // 添加商品
 function addgoods() {
   myDialogRef.value.open()
-  const oldfun = addModalConfig.formAction
-  addModalConfig.formAction = (data) => {
-    oldfun({
-      ...data,
-      selectgoods: selectData.value
-    })
-    addModalRef.value.handleClose();
-    handleSubmitClick()
-  }
+}
+const rules = reactive<FormRules<RuleForm>>({
+  name: [
+    { required: true, message: '请输入分组名称', trigger: 'blur' },
+  ],
+})
+interface RuleForm {
+  name: string
+}
+
+// 添加编辑商品分组
+async function addConfirm() {
+  await nextTick();
+  elFormref.value.validate(async (valid, fields) => {
+    if (valid) {
+      let obj = {
+        ...forms,
+        selectgoods: selectData.value
+      }
+      // 商品选择的合集
+      if (selectData.value.length) {
+        let arr = []
+        selectData.value.forEach((item, index) => {
+          arr.push(item.id)
+        })
+        obj.productIds = arr
+      }
+      if (obj.time.length) {
+        obj.saleStartTime = obj.time[0]
+        obj.saleEndTime = obj.time[1]
+      }
+      if (title.value == "新增分组") {
+        let res = await UserAPI.addunit(obj)
+        if (res.code == 200) {
+          ElMessage.success("添加成功");
+          myDialogRefAdd.value.close()
+        }
+      } else {
+        let res = await UserAPI.update(obj)
+        if (res.code == 200) {
+          ElMessage.success("编辑成功");
+          myDialogRefAdd.value.close()
+        }
+      }
+      // contentConfig.indexAction()
+      handleQueryClick()
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+
+
+
+}
+// 添加商品的回调
+function subitgood() {
+  selectData.value = contentRefs.value.getselectTable()
+  myDialogRef.value.close()
 }
 // 删除商品
 function deleteItem(data: any) {
   selectData.value = data
 }
-// 添加商品的回调
-function subitgood() {
-  selectData.value = contentRefs.value.getselectTable()
-}
+
+
 // 编辑
 async function handleEditClick(row: IObject) {
   editModalRef.value?.handleDisabled(false);
+  title.value = "编辑分组"
   // 加载部门下拉数据源
   // editModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
   // editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
@@ -190,18 +286,31 @@ async function handleEditClick(row: IObject) {
   const data = await UserAPI.getunitinfo(row.id);
   let obj = { ...data }
   selectData.value = data.productList
-  obj.selectgoods = data.productList
-  obj.saleTime = [data.saleStartTime, data.saleEndTime]
-  console.log(obj, 'dbug')
-  editModalRef.value?.setFormData(obj);
-  editModalRef.value?.setModalVisible();
-
+  obj.time = [obj.saleStartTime, obj.saleEndTime]
+  for (let key in obj) {
+    forms[key] = obj[key]
+  }
+  myDialogRefAdd.value.open()
+  // editModalRef.value?.setFormData(obj);
+  // editModalRef.value?.setModalVisible();
 }
 // 其他工具栏
 function handleToolbarClick(name: string) {
   console.log(name);
   if (name === "custom1") {
-    ElMessage.success("点击了自定义1按钮");
+    forms = reactive({
+      name: "",
+      status: 1,
+      useTime: 0,
+      sortMode: 0,
+      sort: 1,
+      time: ""
+    })
+    selectData.value = []
+    title.value = "新增分组"
+
+    // 新增
+    myDialogRefAdd.value.open()
   }
 }
 // 其他操作列

src/views/online-shop/goodsGroupconfig/content.ts

@@ -26,8 +26,10 @@ const contentConfig: IContentConfig<UserPageQuery> = {
   // },
   // exportAction: UserAPI.export,
   // importTemplate: UserAPI.downloadTemplate,
-  modifyAction(data) {
-    // console.log("modifyAction:", data);
+  modifyAction: function (params) {
+    console.log(params, '调试2')
+    let obj = { ...params }
+    return UserAPI.update(obj);
   },
   importsAction(data) {
     // 模拟导入数据
@@ -42,7 +44,13 @@ const contentConfig: IContentConfig<UserPageQuery> = {
   },
   pk: "id",
   toolbar: [
-    "add",
+    {
+      icon: "Plus",
+      text: "新增",
+      type: "success",
+      name: "custom1",
+      auth: "import",
+    },
   ],
   cols: [
     { label: "排序", align: "center", prop: "sort", },
@@ -56,7 +64,7 @@ const contentConfig: IContentConfig<UserPageQuery> = {
     {
       label: "状态",
       align: "center",
-      prop: "useTime",
+      prop: "status",
       templet: "switch",
       slotName: "status",
     },

src/views/online-shop/goodsGroupconfig/edit.ts

@@ -70,6 +70,8 @@ const modalConfig: IModalConfig<UserForm> = {
         { label: "禁用", value: 0 },
       ],
       initialValue: 0,
+      watch() {
+      }
     },
 
     {
@@ -92,19 +94,11 @@ const modalConfig: IModalConfig<UserForm> = {
       },
     },
     {
-      slotName: "addmanagementtime",
-      prop: "",
-      type: "custom",
-      label: " ",
-    },
-    {
+      type: 'time-picker',
       prop: "saleTime",
       label: "",
-      attrs: {
-      },
-      watch() {
-
-      }
+      attrs: {},
+      hidden: true,
     },
   ],
 };