增加台桌管理页面，活动管理页面

src/views/tool/table/components/addEara.vue

@@ -1,73 +1,82 @@
 <template>
-    <el-dialog :title="form.id ? '编辑区域' : '添加区域'" :visible.sync="dialogVisible" @close="reset">
-        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
-            <el-form-item label="区域名称" prop="name">
-                <el-input v-model="form.name" placeholder="请输入区域名称"></el-input>
-            </el-form-item>
-        </el-form>
-        <span slot="footer" class="dialog-footer">
-            <el-button @click="dialogVisible = false">取 消</el-button>
-            <el-button type="primary" @click="onSubmitHandle">确 定</el-button>
-        </span>
-    </el-dialog>
+  <el-dialog :title="form.id ? '编辑区域' : '添加区域'" v-model="dialogVisible" @close="reset">
+    <el-form ref="refForm" :model="form" :rules="rules" label-width="120px" label-position="left">
+      <el-form-item label="区域名称" prop="name">
+        <el-input v-model="form.name" placeholder="请输入区域名称"></el-input>
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input-number v-model="form.sort" placeholder="请输入排序"></el-input-number>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="onSubmitHandle">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
 </template>
 
-<script>
-import { tbShopArea } from '@/api/table'
-export default {
-    data() {
-        return {
-            dialogVisible: false,
-            form: {
-                id: '',
-                name: ''
-            },
-            rules: {
-                name: [
-                    {
-                        required: true,
-                        message: '请输入区域名称',
-                        trigger: 'blur'
-                    }
-                ]
-            }
-        }
+<script setup>
+import APi from "@/api/account/shopArea";
+
+let dialogVisible = ref(false);
+const form = reactive({
+  name: "",
+});
+const rules = reactive({
+  name: [
+    {
+      required: true,
+      message: "请输入区域名称",
+      trigger: "blur",
     },
-    methods: {
-        onSubmitHandle() {
-            this.$refs.form.validate(async valid => {
-                if (valid) {
-                    try {
-                        let res = await tbShopArea({
-                            ...this.form,
-                            shopId: localStorage.getItem('shopId')
-                        }, this.form.id ? 'put' : 'post')
-                        this.$emit('success', res)
-                        this.close()
-                        this.$notify({
-                            title: '成功',
-                            message: `${this.form.id ? '编辑' : '添加'}成功`,
-                            type: 'success'
-                        });
-                    } catch (error) {
-                        console.log(error)
-                    }
-                }
-            })
-        },
-        show(obj) {
-            this.dialogVisible = true
-            if (obj && obj.id) {
-                this.form = JSON.parse(JSON.stringify(obj))
-            }
-        },
-        close() {
-            this.dialogVisible = false
-        },
-        reset() {
-            this.form.id = ''
-            this.form.name = ''
-        }
+  ],
+  sort: [
+    {
+      required: true,
+      message: "请输入排序",
+      trigger: "blur",
+    },
+  ],
+});
+
+const emits = defineEmits(["success"]);
+const refForm = ref(null);
+function onSubmitHandle() {
+  refForm.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        let res = !form.id ? await APi.add(form) : await APi.edit(form);
+        emits("success", res);
+        close();
+        ElNotification({
+          title: "成功",
+          message: `${form.id ? "编辑" : "添加"}成功`,
+          type: "success",
+        });
+      } catch (error) {
+        console.log(error);
+      }
     }
+  });
 }
+function show(obj) {
+  dialogVisible.value = true;
+  if (obj && obj.id) {
+    Object.assign(form, obj);
+  }
+}
+function close() {
+  dialogVisible.value = false;
+}
+function reset() {
+  form.id = "";
+  form.name = "";
+  form.sort = "";
+}
+defineExpose({
+  show,
+  close,
+});
 </script>

src/views/tool/table/components/addTable.vue

@@ -1,21 +1,13 @@
 <template>
   <el-dialog
     :title="form.id ? '编辑台桌' : '添加台桌'"
-    :visible.sync="dialogVisible"
+    v-model="dialogVisible"
     @open="tbShopAreaGet"
     @close="reset"
   >
-    <el-form
-      ref="form"
-      :model="form"
-      :rules="rules"
-      label-width="120px"
-      label-position="left"
-    >
+    <el-form ref="refForm" :model="form" :rules="rules" label-width="120px" label-position="left">
       <el-form-item label="选择区域" prop="areaId">
-        <el-select v-model="form.areaId" placeholder="请选择区域"
-        @change="selectChange($event, 'form' , 'areaId')"
-        >
+        <el-select v-model="form.areaId" placeholder="请选择区域">
           <el-option
             :label="item.name"
             :value="item.id"
@@ -34,202 +26,172 @@
           ></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="台桌标识"  prop="sign">
+      <el-form-item label="台桌标识" prop="sign" v-if="!form.id">
         <div class="u-flex">
-            <div class="u-flex" style="width: 57px;">
-                  <el-input
-              v-model="form.sign"
-              placeholder="A"
-            ></el-input>
-            </div>
-      
-          <div class="u-flex u-m-l-30" >
-            <div class="u-flex">
-                <div class="u-m-r-4">起始</div>
-                <el-input v-model="form.start" style="width: 57px;" placeholder="请输入起始值" >
-          </el-input>
+          <div class="u-flex" style="width: 57px">
+            <el-input v-model="form.sign" placeholder="A"></el-input>
+          </div>
 
+          <div class="u-flex u-m-l-30">
+            <div class="u-flex">
+              <div class="u-m-r-4">起始</div>
+              <el-input
+                v-model="form.start"
+                style="width: 57px"
+                placeholder="请输入起始值"
+              ></el-input>
+            </div>
+
+            <div
+              style="background-color: #d9d9d9; height: 1px; width: 32px; border-radius: 1px"
+              class="u-m-l-16 u-m-r-16"
+            ></div>
+            <div class="u-flex">
+              <span class="u-m-r-4">结束</span>
+              <el-input
+                v-model="form.end"
+                style="width: 57px"
+                placeholder="请输入结束值"
+              ></el-input>
             </div>
-           
-          <div
-            style="
-              background-color: #D9D9D9;
-              height: 1px;
-              width: 32px;
-              border-radius: 1px;
-            "
-            class="u-m-l-16 u-m-r-16"
-          ></div>
-          <div class="u-flex">
-            <span class="u-m-r-4">结束</span>
-            <el-input v-model="form.end" style="width: 57px;" placeholder="请输入结束值">
-                
-          </el-input>
           </div>
-       
-          </div>
-       
         </div>
       </el-form-item>
+      <el-form-item label="台桌名称" prop="name" v-if="form.id">
+        <el-input v-model="form.name" placeholder="请输入台桌名称"></el-input>
+      </el-form-item>
       <el-form-item label="客座数">
         <el-input-number
-          v-model="form.capacity"
+          v-model="form.maxCapacity"
           :min="0"
           controls-position="right"
         ></el-input-number>
       </el-form-item>
       <el-form-item label="清台管理">
         <el-radio-group v-model="form.autoClear">
-          <el-radio-button :label="0">手动清台</el-radio-button>
-          <el-radio-button :label="1">自动清台</el-radio-button>
+          <el-radio-button :value="0">手动清台</el-radio-button>
+          <el-radio-button :value="1">自动清台</el-radio-button>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="网络预定开关">
-        <el-switch
-          v-model="form.isPredate"
-          :active-value="1"
-          :inactive-value="2"
-        ></el-switch>
+      <el-form-item v-if="form.id" label="网络预定开关">
+        <el-switch v-model="form.isPredate" :active-value="1" :inactive-value="2"></el-switch>
       </el-form-item>
-      <el-form-item label="类型">
-        <el-radio-group v-model="form.type">
-          <el-radio-button :label="0">低消</el-radio-button>
-          <el-radio-button :label="2">计时</el-radio-button>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="最低消费" v-if="form.type == 0">
+      <el-form-item v-if="form.id" label="网络预定台桌支付金额">
         <el-input-number
-          v-model="form.amount"
-          :min="0"
-          controls-position="right"
-        ></el-input-number>
-      </el-form-item>
-      <el-form-item label="每小时收费" v-if="form.type == 2">
-        <el-input-number
-          v-model="form.perhour"
+          v-model="form.predateAmount"
           :min="0"
           controls-position="right"
         ></el-input-number>
       </el-form-item>
     </el-form>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisible = false">取 消</el-button>
-      <el-button type="primary" :loading="loading" @click="onSubmitHandle"
-        >确 定</el-button
-      >
-    </span>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="close">取 消</el-button>
+        <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
+      </span>
+    </template>
   </el-dialog>
 </template>
 
-<script>
-import { tbShopTable, tbShopAreaGet ,$fastCreateTable} from "@/api/table";
-export default {
-  data() {
-    return {
-      dialogVisible: false,
-      resetForm: "",
-      loading: false,
-      status: [
-        { value: "pending", name: "挂单中" },
-        { value: "using", name: "开台中" },
-        { value: "paying", name: "结算中" },
-        { value: "idle", name: "空闲" },
-        { value: "subscribe", name: "预定" },
-        { value: "closed", name: "关台" },
-        // {value:'opening',name:'开台中'},
-        { value: "cleaning", name: "台桌清理中" },
-      ],
-      form: {
-        id: "",
-        areaId: "",
-        sign:'',
-        start:1,
-        end:10,
-        capacity: 0,
-        isPredate: 1,
-        type: 2,
-        perhour: 0,
-        amount: 0,
-        autoClear: 1,
-      },
-      rules: {
-        areaId: [
-          {
-            required: true,
-            message: "请选择区域",
-            trigger: ["blur","change"],
-          },
-        ],
-        sign: [
-          {
-            required: true,
-            message: "请输入台桌标识",
-            trigger: ["blur","change"],
-          },
-        ],
-      },
-      areaList: [],
-    };
-  },
-  mounted() {
-    this.resetForm = { ...this.form };
-  },
-  methods: {
-    //解决selectc值改变后未验证问题
-    selectChange($event, ref, type) {
-      this.$refs[ref][0].validateField(type)
+<script setup>
+import shopAreaApi from "@/api/account/shopArea";
+import tableApi from "@/api/account/table";
+let dialogVisible = ref(false);
+let resetForm = {};
+let loading = ref(false);
+let status = [
+  { value: "pending", name: "挂单中" },
+  { value: "using", name: "开台中" },
+  { value: "paying", name: "结算中" },
+  { value: "idle", name: "空闲" },
+  { value: "subscribe", name: "预定" },
+  { value: "closed", name: "关台" },
+  // {value:'opening',name:'开台中'},
+  { value: "cleaning", name: "台桌清理中" },
+];
+
+const form = reactive({
+  areaId: "",
+  sign: "",
+  start: 1,
+  end: 10,
+  maxCapacity: 0,
+  autoClear: 1,
+  isPredate: "",
+  predateAmount: "",
+});
+const rules = {
+  areaId: [
+    {
+      required: true,
+      message: "请选择区域",
+      trigger: ["blur", "change"],
     },
-    onSubmitHandle() {
-      this.$refs.form.validate(async (valid) => {
-        if (valid) {
-          this.loading = true;
-          try {
-            let res = await $fastCreateTable(
-              {
-                ...this.form,
-                qrcode: this.form.tableId,
-                shopId: localStorage.getItem("shopId"),
-              },
-              this.form.id ? "put" : "post"
-            );
-            this.$emit("success", res);
-            this.close();
-            this.$notify({
-              title: "成功",
-              message: `${this.form.id ? "编辑" : "添加"}成功`,
-              type: "success",
-            });
-            this.loading = false;
-          } catch (error) {
-            this.loading = false;
-            console.log(error);
-          }
-        }
-      });
+  ],
+  sign: [
+    {
+      required: true,
+      message: "请输入台桌标识",
+      trigger: ["blur", "change"],
     },
-    show(obj) {
-      this.dialogVisible = true;
-      if (obj && obj.id) {
-        this.form = JSON.parse(JSON.stringify(obj));
-      }
-    },
-    close() {
-      this.dialogVisible = false;
-    },
-    reset() {
-      this.form = { ...this.resetForm };
-    },
-    // 获取区域
-    async tbShopAreaGet() {
+  ],
+};
+let areaList = ref([]);
+onMounted(() => {
+  resetForm = { ...form };
+});
+
+//解决selectc值改变后未验证问题
+const refForm = ref(null);
+const emits = defineEmits(["success"]);
+function onSubmitHandle() {
+  refForm.value.validate(async (valid) => {
+    if (valid) {
+      loading.value = true;
       try {
-        const { content } = await tbShopAreaGet({
-          shopId: localStorage.getItem("shopId"),
+        let res = form.id ? await tableApi.edit(form) : await tableApi.add(form);
+        console.log(res);
+        emits("success", res);
+        close();
+        ElNotification({
+          title: "成功",
+          message: `${form.id ? "编辑" : "添加"}成功`,
+          type: "success",
         });
-        this.areaList = content;
+        loading.value = false;
       } catch (error) {
+        loading.value = false;
         console.log(error);
       }
-    },
-  },
-};
+    }
+  });
+}
+function show(obj) {
+  dialogVisible.value = true;
+  if (obj && obj.id) {
+    Object.assign(form, obj);
+  }
+}
+function close() {
+  dialogVisible.value = false;
+}
+function reset() {
+  delete form.id;
+  Object.assign(form, resetForm);
+  console.log(form);
+}
+// 获取区域
+async function tbShopAreaGet() {
+  try {
+    const data = await shopAreaApi.getList({});
+    areaList.value = data.records;
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+defineExpose({
+  show,
+  close,
+});
 </script>