Merge branch 'ymf' of https://e.coding.net/g-cphe0354/cashier/cashier-web

src/components/CURD/PageModal.vue

@@ -1,9 +1,20 @@
 <template>
   <!-- drawer -->
   <template v-if="modalConfig.component === 'drawer'">
-    <el-drawer v-model="modalVisible" :append-to-body="true" v-bind="modalConfig.drawer" @close="handleCloseModal">
+    <el-drawer
+      v-model="modalVisible"
+      :append-to-body="true"
+      v-bind="modalConfig.drawer"
+      @close="handleCloseModal"
+    >
       <!-- 表单 -->
-      <el-form ref="formRef" label-width="auto" v-bind="modalConfig.form" :model="formData" :rules="formRules">
+      <el-form
+        ref="formRef"
+        label-width="auto"
+        v-bind="modalConfig.form"
+        :model="formData"
+        :rules="formRules"
+      >
         <el-row :gutter="20">
           <template v-for="item in formItems" :key="item.prop">
             <template v-if="item.type === 'title'">
@@ -15,7 +26,12 @@
                 <template v-if="item.tips" #label>
                   <span>
                     {{ item.label }}
-                    <el-tooltip placement="bottom" effect="light" :content="item.tips" :raw-content="true">
+                    <el-tooltip
+                      placement="bottom"
+                      effect="light"
+                      :content="item.tips"
+                      :raw-content="true"
+                    >
                       <el-icon style="vertical-align: -0.15em" size="16">
                         <QuestionFilled />
                       </el-icon>
@@ -90,13 +106,20 @@
                 </template>
                 <!-- 自定义 -->
                 <template v-else-if="item.type === 'custom'">
-                  <slot :name="item.slotName ?? item.prop" :prop="item.prop" :formData="formData" :attrs="item.attrs" />
+                  <slot
+                    :name="item.slotName ?? item.prop"
+                    :prop="item.prop"
+                    :formData="formData"
+                    :attrs="item.attrs"
+                  />
                 </template>
               </el-form-item>
             </el-col>
           </template>
         </el-row>
       </el-form>
+      <!-- 表单底部插槽 -->
+      <slot name="formFooter" />
       <!-- 弹窗底部操作按钮 -->
       <template #footer>
         <div v-if="!formDisable">
@@ -111,13 +134,26 @@
   </template>
   <!-- dialog -->
   <template v-else>
-    <el-dialog v-model="modalVisible" :align-center="true" :append-to-body="true" width="70vw"
-      v-bind="modalConfig.dialog" style="padding-right: 0" @close="handleCloseModal">
+    <el-dialog
+      v-model="modalVisible"
+      :align-center="true"
+      :append-to-body="true"
+      width="70vw"
+      v-bind="modalConfig.dialog"
+      style="padding-right: 0"
+      @close="handleCloseModal"
+    >
       <!-- 滚动 -->
       <el-scrollbar max-height="60vh">
         <!-- 表单 -->
-        <el-form ref="formRef" label-width="auto" v-bind="modalConfig.form"
-          style="padding-right: var(--el-dialog-padding-primary)" :model="formData" :rules="formRules">
+        <el-form
+          ref="formRef"
+          label-width="auto"
+          v-bind="modalConfig.form"
+          style="padding-right: var(--el-dialog-padding-primary)"
+          :model="formData"
+          :rules="formRules"
+        >
           <el-row :gutter="20">
             <template v-for="item in formItems" :key="item.prop">
               <template v-if="item.type === 'title'">
@@ -131,7 +167,12 @@
                   <template v-if="item.tips" #label>
                     <span>
                       {{ item.label }}
-                      <el-tooltip placement="bottom" effect="light" :content="item.tips" :raw-content="true">
+                      <el-tooltip
+                        placement="bottom"
+                        effect="light"
+                        :content="item.tips"
+                        :raw-content="true"
+                      >
                         <el-icon style="vertical-align: -0.15em" size="16">
                           <QuestionFilled />
                         </el-icon>
@@ -140,7 +181,11 @@
                   </template>
                   <!-- Input 输入框 -->
                   <template v-if="item.type === 'input' || item.type === undefined">
-                    <el-input v-model="formData[item.prop]" v-bind="item.attrs" :disabled="item.disabled" />
+                    <el-input
+                      v-model="formData[item.prop]"
+                      v-bind="item.attrs"
+                      :disabled="item.disabled"
+                    />
                   </template>
                   <!-- textarea 输入框 -->
                   <template v-else-if="item.type === 'textarea'">
@@ -212,8 +257,12 @@
                   </template>
                   <!-- 自定义 -->
                   <template v-else-if="item.type === 'custom'">
-                    <slot :name="item.slotName ?? item.prop" :prop="item.prop" :formData="formData"
-                      :attrs="item.attrs" />
+                    <slot
+                      :name="item.slotName ?? item.prop"
+                      :prop="item.prop"
+                      :formData="formData"
+                      :attrs="item.attrs"
+                    />
                   </template>
                 </el-form-item>
               </el-col>
@@ -221,6 +270,8 @@
           </el-row>
         </el-form>
       </el-scrollbar>
+      <!-- 表单底部插槽 -->
+      <slot name="formFooter" />
       <!-- 弹窗底部操作按钮 -->
       <template #footer>
         <div style="padding-right: var(--el-dialog-padding-primary)">
@@ -375,7 +426,14 @@ function handleDisabled(disable: boolean) {
 }
 
 // 暴露的属性和方法
-defineExpose({ setModalVisible, getFormData, setFormData, setFormItemData, handleDisabled, handleClose });
+defineExpose({
+  setModalVisible,
+  getFormData,
+  setFormData,
+  setFormItemData,
+  handleDisabled,
+  handleClose,
+});
 </script>
 
 <style lang="scss" scoped>

src/components/coupon/index.vue

@@ -0,0 +1,183 @@
+<template>
+  <el-dialog title="选择优惠劵" top="5vh" :visible.sync="dialogVisible">
+    <div class="head-container">
+      <el-table ref="table" :data="tableData.list" height="500" v-loading="tableData.loading">
+        <!-- <el-table-column type="selection" width="55" align="center" v-if="!radio"></el-table-column> -->
+        <el-table-column label="名称" prop="title" />
+        <el-table-column label="使用门槛">
+          <template v-slot="scope">
+            {{
+              `满${scope.row.fullAmount}${
+                scope.row.discountAmount ? "减" + scope.row.discountAmount + "元" : ""
+              }`
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column label="总发放数量" prop="number" />
+        <el-table-column label="已使用" prop="useNumber" />
+        <el-table-column label="剩余" prop="leftNumber" />
+        <el-table-column label="操作">
+          <template v-slot="scope">
+            <el-button type="primary" @click="selectHandle(scope.row)">选择</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      :total="tableData.total"
+      :current-page="tableData.page + 1"
+      :page-size="tableData.size"
+      @current-change="paginationChange"
+      @size-change="sizeChange"
+      layout="total, sizes, prev, pager, next, jumper"
+    ></el-pagination>
+    <span slot="footer" class="dialog-footer" v-if="!radio">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="confirmHandle">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+// import { getTbShopCoupon, delTbShopCoupon } from '@/api/coupon'
+export default {
+  props: {
+    // 是否为单选
+    radio: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      searhForm: {
+        name: "",
+        category: "",
+      },
+      categoryList: [],
+      tableData: {
+        page: 0,
+        size: 10,
+        total: 0,
+        loading: false,
+        list: [],
+      },
+      goods: [],
+    };
+  },
+  methods: {
+    // 单选商品
+    selectHandle(row) {
+      this.$emit("success", [{ ...row }]);
+      this.close();
+    },
+    // 确定选商品
+    confirmHandle() {
+      let res = this.$refs.table.selection;
+      this.$emit("success", res);
+      this.close();
+    },
+    // 重置查询
+    resetHandle() {
+      this.searhForm.name = "";
+      this.searhForm.category = "";
+      this.tableData.page = 0;
+      this.tableData.size = 10;
+      this.tableData.list = [];
+      this.getTableData();
+    },
+    // 分页大小改变
+    sizeChange(e) {
+      this.tableData.size = e;
+      this.getTableData();
+    },
+    // 分页回调
+    paginationChange(e) {
+      this.tableData.page = e - 1;
+      this.getTableData();
+    },
+    // 商品列表
+    async getTableData() {
+      this.tableData.loading = true;
+      try {
+        const res = await getTbShopCoupon({
+          page: this.tableData.page,
+          size: this.tableData.size,
+          name: this.searhForm.name,
+          categoryId: this.searhForm.category,
+          shopId: localStorage.getItem("shopId"),
+          sort: "id",
+        });
+        this.tableData.list = res.content;
+        this.tableData.total = res.totalElements;
+
+        if (this.goods.length) {
+          this.$nextTick(() => {
+            this.selection();
+          });
+        }
+        setTimeout(() => {
+          this.tableData.loading = false;
+        }, 500);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 商品分类
+    async tbShopCategoryGet() {
+      try {
+        const res = await getTbShopCoupon({
+          page: 0,
+          size: 100,
+          sort: "id",
+          shopId: localStorage.getItem("shopId"),
+        });
+        this.categoryList = res.content;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async show(goods, categoryId) {
+      this.dialogVisible = true;
+      if (goods && goods.length) {
+        this.goods = goods;
+      } else {
+        this.goods = [];
+      }
+      this.resetHandle();
+
+      console.log(categoryId);
+
+      if (categoryId) {
+        this.searhForm.category = categoryId;
+      }
+
+      console.log(this.searhForm);
+    },
+    close() {
+      this.dialogVisible = false;
+    },
+    selection() {
+      this.goods.forEach((row) => {
+        this.tableData.list.forEach((item, index) => {
+          if (row.id == item.id) {
+            this.$refs.table.toggleRowSelection(this.tableData.list[index]);
+          }
+        });
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.shop_info {
+  display: flex;
+  align-items: center;
+
+  span {
+    margin-left: 10px;
+  }
+}
+</style>