优化小程序菜单管理功能

2024-06-01 02:45:33 +08:00
parent 4bae8599e1
commit e3fb9ba283
36 changed files with 2161 additions and 430 deletions
--- a/src/views/booking/card/components/cardEdit.vue
+++ b/src/views/booking/card/components/cardEdit.vue
@@ -19,13 +19,16 @@
        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
      "
    >
-      <a-form-item label="选择场馆" name="merchantName">
-        <SelectMerchant
-          :placeholder="`选择场馆`"
-          class="input-item"
-          v-model:value="form.merchantName"
-          @done="chooseMerchantId"
-        />
+      <!--      <a-form-item label="选择场馆" name="merchantName">-->
+      <!--        <SelectMerchant-->
+      <!--          :placeholder="`选择场馆`"-->
+      <!--          class="input-item"-->
+      <!--          v-model:value="form.merchantName"-->
+      <!--          @done="chooseMerchantId"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <a-form-item label="适用场馆" name="merchants">
+        <MerchantSelect v-model:value="merchants" />
      </a-form-item>
      <a-form-item label="会员卡名称" name="cardName">
        <a-input
@@ -34,10 +37,23 @@
          v-model:value="form.cardName"
        />
      </a-form-item>
-      <a-form-item label="会员卡类型" name="cardCode">
+      <a-form-item label="会员卡类型" name="type">
+        <a-select
+          v-model:value="form.type"
+          placeholder="会员卡类型"
+          :style="`width: 200px`"
+        >
+          <a-select-option :value="1">年卡</a-select-option>
+          <a-select-option :value="2">次卡</a-select-option>
+          <a-select-option :value="3">月卡</a-select-option>
+          <a-select-option :value="4">会员IC卡</a-select-option>
+          <a-select-option :value="5">充值卡</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="会员卡分组" name="cardCode">
        <DictSelect
          dict-code="cardPlanId"
-          :placeholder="`会员卡类型`"
+          :placeholder="`会员卡分组`"
          style="width: 200px"
          v-model:value="form.cardCode"
        />
@@ -79,12 +95,32 @@
          v-model:value="form.discount"
        />
      </a-form-item>
-      <a-form-item label="备注" name="comments">
-        <a-textarea
-          :rows="4"
-          :maxlength="200"
-          placeholder="请输入描述"
-          v-model:value="form.comments"
+      <a-form-item label="成人/儿童" name="cardType">
+        <a-select
+          allow-clear
+          v-model:value="form.cardType"
+          placeholder="成人/儿童"
+          :style="`width: 200px`"
+        >
+          <a-select-option :value="1">成人</a-select-option>
+          <a-select-option :value="2">儿童</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="卡片背景" name="image">
+        <SelectFile
+          :placeholder="`请选择图片`"
+          :limit="1"
+          :data="images"
+          @done="chooseImage"
+          @del="onDeleteItem"
+        />
+      </a-form-item>
+      <a-form-item label="会员卡说明" name="content">
+        <!-- 编辑器 -->
+        <tinymce-editor
+          v-model:value="content"
+          :init="config"
+          placeholder="会员卡说明"
        />
      </a-form-item>
      <a-form-item label="状态" name="status">
@@ -115,9 +151,15 @@
  import { useThemeStore } from '@/store/modules/theme';
  import { storeToRefs } from 'pinia';
  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
-  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
  import { FileRecord } from '@/api/system/file/model';
  import { Merchant } from '@/api/shop/merchant/model';
+  import gfm from '@bytemd/plugin-gfm';
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  import highlight from '@bytemd/plugin-highlight';
+  import TinymceEditor from '@/components/TinymceEditor/index.vue';
+  import MerchantSelect from '@/views/booking/account/components/merchant-select.vue';
+  import { listMerchant } from '@/api/shop/merchant';

  // 是否是修改
  const isUpdate = ref(false);
@@ -145,12 +187,16 @@
  // 表格选中数据
  const formRef = ref<FormInstance | null>(null);
  const images = ref<ItemType[]>([]);
+  const content = ref('');
+  const merchants = ref<Merchant[]>([]);

  // 用户信息
  const form = reactive<Card>({
    cardId: undefined,
    cardName: '',
    cardCode: undefined,
+    type: undefined,
+    cardType: undefined,
    image: '',
    price: undefined,
    number: 0,
@@ -172,6 +218,20 @@

  // 表单验证规则
  const rules = reactive({
+    merchants: [
+      {
+        required: true,
+        type: 'string',
+        message: '请选择可适用的场馆',
+        trigger: 'blur',
+        validator: async (_rule: RuleObject) => {
+          if (merchants.value.length == 0) {
+            return Promise.reject('请选择可适用的场馆');
+          }
+          return Promise.resolve();
+        }
+      }
+    ],
    merchantName: [
      {
        required: true,
@@ -188,11 +248,19 @@
        trigger: 'blur'
      }
    ],
+    type: [
+      {
+        required: true,
+        type: 'number',
+        message: '请选择会员卡类型',
+        trigger: 'blur'
+      }
+    ],
    cardCode: [
      {
        required: true,
        type: 'string',
-        message: '请选择会员卡类型',
+        message: '请选择会员卡分组',
        trigger: 'blur'
      }
    ],
@@ -214,12 +282,17 @@
    ]
  });

-  /* 搜索 */
-  const chooseMerchantId = (item: Merchant) => {
-    form.merchantName = item.merchantName;
-    form.merchantId = item.merchantId;
-    form.merchantType = item.shopType;
-  };
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+
+  const config = ref({
+    height: 500
+  });

  const chooseImage = (data: FileRecord) => {
    images.value.push({
@@ -247,7 +320,9 @@
      .then(() => {
        loading.value = true;
        const formData = {
-          ...form
+          ...form,
+          comments: content.value,
+          merchantIds: merchants.value?.map((d) => d.merchantId).join(',')
        };
        const saveOrUpdate = isUpdate.value ? updateCard : addCard;
        saveOrUpdate(formData)
@@ -270,6 +345,7 @@
    (visible) => {
      if (visible) {
        images.value = [];
+        merchants.value = [];
        if (props.data) {
          assignObject(form, props.data);
          if (props.data.image) {
@@ -279,6 +355,16 @@
              status: 'done'
            });
          }
+          if (props.data.merchantIds) {
+            listMerchant({ merchantIds: props.data.merchantIds }).then(
+              (list) => {
+                merchants.value = list;
+              }
+            );
+          }
+          if (props.data.comments) {
+            content.value = props.data.comments;
+          }
          isUpdate.value = true;
        } else {
          isUpdate.value = false;
--- a/src/views/booking/card/components/search.vue
+++ b/src/views/booking/card/components/search.vue
@@ -7,11 +7,19 @@
      </template>
      <span>添加</span>
    </a-button>
-    <a-radio-group v-model:value="where.cardCode" @change="handleSearch">
-      <a-radio-button :value="`月/年卡`">月/年卡</a-radio-button>
-      <a-radio-button :value="`次卡`">次卡</a-radio-button>
-      <a-radio-button :value="`充值卡`">充值卡</a-radio-button>
-    </a-radio-group>
+    <DictSelect
+      dict-code="cardPlanId"
+      class="form-item"
+      placeholder="按会员卡分组"
+      style="width: 180px"
+      v-model:value="where.cardCode"
+      @change="handleSearch"
+    />
+    <!--    <a-radio-group v-model:value="where.cardCode" @change="handleSearch">-->
+    <!--      <a-radio-button :value="`月/年卡`">月/年卡</a-radio-button>-->
+    <!--      <a-radio-button :value="`次卡`">次卡</a-radio-button>-->
+    <!--      <a-radio-button :value="`充值卡`">充值卡</a-radio-button>-->
+    <!--    </a-radio-group>-->
  </a-space>
 </template>

@@ -43,7 +51,7 @@

  // 表单数据
  const { where } = useSearch<any>({
-    cardCode: '月/年卡'
+    cardCode: undefined
  });

  const handleSearch = () => {
--- a/src/views/booking/card/index.vue
+++ b/src/views/booking/card/index.vue
@@ -115,9 +115,11 @@
    },
    {
      title: '会员卡类型',
-      dataIndex: 'cardCode',
-      key: 'cardCode',
-      align: 'center'
+      dataIndex: 'type',
+      key: 'type',
+      align: 'center',
+      customRender: ({ text }) =>
+        ['', '年卡', '次卡', '月卡', '会员IC卡', '充值卡'][text]
    },
    {
      title: '会员卡名称',