恢复代码

2025-04-23 10:03:37 +08:00
parent 90c79c16cb
commit 70adbd0e1b
16 changed files with 2795 additions and 987 deletions
@@ -35,12 +35,15 @@
          />
        </a-form-item>
        <a-form-item label="价格" name="price">
-          <a-input-number
-            allow-clear
-            placeholder="请输入价格"
-            style="width: 200px"
-            v-model:value="form.price"
-          />
+          <a-space>
+            <a-input-number
+              allow-clear
+              placeholder="请输入价格"
+              style="width: 200px"
+              v-model:value="form.price"
+            />
+            <a-button type="primary" @click="openCal">查看价格日历</a-button>
+          </a-space>
        </a-form-item>
        <!--      <a-form-item label="每日不同价格" name="prices">-->
        <!--        <a-input-number-->
@@ -66,6 +69,7 @@
        <!--          v-model:value="form.halfPrices"-->
        <!--        />-->
        <!--      </a-form-item>-->
+
        <a-form-item label="儿童价" name="childrenPrice">
          <a-input-number
            allow-clear
@@ -83,13 +87,13 @@
            style="width: 200px"
          />
        </a-form-item>
-        <a-form-item label="排序" name="sortNumber">
+        <a-form-item label="排序" name="sort">
          <a-input-number
            :min="0"
            :max="9999"
            class="ele-fluid"
            placeholder="请输入排序号"
-            v-model:value="form.sortNumber"
+            v-model:value="form.sort"
          />
        </a-form-item>
        <a-form-item label="是否关闭" name="isStatus">
@@ -114,173 +118,267 @@
        </a-form-item>
      </a-form>
    </a-spin>
+    <ele-modal
+      :width="600"
+      v-model:visible="showCal"
+      :maskClosable="false"
+      title="日期价格"
+      :body-style="{ paddingBottom: '28px' }"
+      @update:visible="showCal = false"
+    >
+      <template #footer>
+        <a-button @click="showCal = false">关闭</a-button>
+      </template>
+      <a-date-picker v-model:value="month" value-format="YYYY-MM" picker="month"/>
+      <div v-for="(item, index) in prices" :key="index">
+        <div style="padding: 1rem 0">
+          <div class="flex justify-start items-center">
+            <span style="width: 120px">{{ index + 1 }}号价格</span>
+            <a-input-number v-model:value="prices[index]" style="width: 300px;" />
+          </div>
+          <p style="color: #999; font-size: 0.8rem"> {{ dayjs(`${month}-${(index + 1)}`).format("YYYY-MM-DD") }}
+            {{ weekStr[dayjs(`${month}-${(index + 1)}`).format("d")] }}的价格，温馨提示：如价格填写0则代表当日免费。</p>
+        </div>
+        <div style="margin-bottom: 1rem">
+          <div class="flex justify-start items-center">
+            <span style="width: 120px">{{ index + 1 }}号半场价格</span>
+            <a-input-number v-model:value="halfPrices[index]" style="width: 300px;" />
+          </div>
+          <p style="color: #999; font-size: 0.8rem"> {{ dayjs(`${month}-${(index + 1)}`).format("YYYY-MM-DD") }}
+            {{ weekStr[dayjs(`${month}-${(index + 1)}`).format("d")]
+            }}的半场价格，温馨提示：如价格填写0则代表当日免费。</p>
+        </div>
+        <a-divider />
+      </div>
+    </ele-modal>
  </ele-modal>
 </template>

 <script lang="ts" setup>
-  import { ref, reactive, watch } from 'vue';
-  import { Form, message } from 'ant-design-vue';
-  import { assignObject } from 'ele-admin-pro';
-  import {
-    addThinkSiteTime,
-    updateThinkSiteTime
-  } from '@/api/think/thinkSiteTime';
-  import { ThinkSiteTime } from '@/api/think/thinkSiteTime/model';
-  import { useThemeStore } from '@/store/modules/theme';
-  import { storeToRefs } from 'pinia';
-  import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
-  import { ThinkSite } from '@/api/think/thinkSite/model';
+import { ref, reactive, watch } from "vue";
+import { Form, message } from "ant-design-vue";
+import { assignObject } from "ele-admin-pro";
+import {
+  addThinkSiteTime,
+  updateThinkSiteTime
+} from "@/api/think/thinkSiteTime";
+import { ThinkSiteTime } from "@/api/think/thinkSiteTime/model";
+import { useThemeStore } from "@/store/modules/theme";
+import { storeToRefs } from "pinia";
+import { FormInstance, RuleObject } from "ant-design-vue/es/form";
+import { ThinkSite } from "@/api/think/thinkSite/model";
+import dayjs from "dayjs";

-  // 是否是修改
-  const isUpdate = ref(false);
-  const useForm = Form.useForm;
-  // 是否开启响应式布局
-  const themeStore = useThemeStore();
-  const { styleResponsive } = storeToRefs(themeStore);
+// 是否是修改
+const isUpdate = ref(false);
+const useForm = Form.useForm;
+// 是否开启响应式布局
+const themeStore = useThemeStore();
+const { styleResponsive } = storeToRefs(themeStore);

-  const props = defineProps<{
-    // 弹窗是否打开
-    visible: boolean;
-    // 场馆ID
-    sid?: number;
-    // 场馆信息
-    site?: ThinkSite | null;
-    // 修改回显的数据
-    data?: ThinkSiteTime | null;
-  }>();
+const props = defineProps<{
+  // 弹窗是否打开
+  visible: boolean;
+  // 场馆ID
+  sid?: number;
+  // 场馆信息
+  site?: ThinkSite | null;
+  // 修改回显的数据
+  data?: ThinkSiteTime | null;
+}>();

-  const emit = defineEmits<{
-    (e: 'done'): void;
-    (e: 'update:visible', visible: boolean): void;
-  }>();
+const emit = defineEmits<{
+  (e: "done"): void;
+  (e: "update:visible", visible: boolean): void;
+}>();

-  // 提交状态
-  const loading = ref(false);
-  // 表格选中数据
-  const formRef = ref<FormInstance | null>(null);
-  const weekOptions = ref([
-    { label: '星期一', value: '1' },
-    { label: '星期二', value: '2' },
-    { label: '星期三', value: '3' },
-    { label: '星期四', value: '4' },
-    { label: '星期五', value: '5' },
-    { label: '星期六', value: '6' },
-    { label: '星期日', value: '7' }
-  ]);
+// 提交状态
+const loading = ref(false);
+// 表格选中数据
+const formRef = ref<FormInstance | null>(null);
+const weekOptions = ref([
+  { label: "星期一", value: "1" },
+  { label: "星期二", value: "2" },
+  { label: "星期三", value: "3" },
+  { label: "星期四", value: "4" },
+  { label: "星期五", value: "5" },
+  { label: "星期六", value: "6" },
+  { label: "星期日", value: "7" }
+]);

-  // 用户信息
-  const form = reactive<ThinkSiteTime>({
-    id: undefined,
-    timePeriod: '',
-    timePeriod1: undefined,
-    timePeriod2: undefined,
-    price: '0',
-    prices: '',
-    halfPrice: '0',
-    halfPrices: '',
-    childrenPrice: '0',
-    week: undefined,
-    sort: 0,
-    sid: 0,
-    isStatus: '1',
-    isFree: '2',
-    startTime: ''
-  });
+// 用户信息
+const form = reactive<ThinkSiteTime>({
+  id: undefined,
+  timePeriod: "",
+  timePeriod1: undefined,
+  timePeriod2: undefined,
+  price: "0",
+  prices: "",
+  halfPrice: "0",
+  halfPrices: "",
+  childrenPrice: "0",
+  week: undefined,
+  sort: 0,
+  sid: 0,
+  isStatus: "1",
+  isFree: "2",
+  startTime: ""
+});

-  /* 更新visible */
-  const updateVisible = (value: boolean) => {
-    emit('update:visible', value);
-  };
+/* 更新visible */
+const updateVisible = (value: boolean) => {
+  emit("update:visible", value);
+};

-  // 表单验证规则
-  const rules = reactive({
-    period: [
-      {
-        required: true,
-        type: 'string',
-        message: '请填写时段,如红色、L码、远峰蓝、原色钛金属等',
-        trigger: 'blur'
-      }
-    ],
-    timePeriod: [
-      {
-        required: true,
-        type: 'string',
-        message: '请选择时段',
-        trigger: 'blur',
-        validator: async (_rule: RuleObject, value: string) => {
-          if (form.timePeriod1 == undefined || form.timePeriod2 == undefined) {
-            return Promise.reject('请选择时段' + value);
-          }
-          return Promise.resolve();
-        }
-      }
-    ]
-  });
-
-  const { resetFields } = useForm(form, rules);
-
-  /* 保存编辑 */
-  const save = () => {
-    if (!formRef.value) {
-      return;
+// 表单验证规则
+const rules = reactive({
+  period: [
+    {
+      required: true,
+      type: "string",
+      message: "请填写时段,如红色、L码、远峰蓝、原色钛金属等",
+      trigger: "blur"
    }
-    formRef.value
-      .validate()
-      .then(() => {
-        loading.value = true;
-        form.sid = props.sid;
-        if (!form.sid || form.sid == 0) {
-          return;
+  ],
+  timePeriod: [
+    {
+      required: true,
+      type: "string",
+      message: "请选择时段",
+      trigger: "blur",
+      validator: async (_rule: RuleObject, value: string) => {
+        if (form.timePeriod1 == undefined || form.timePeriod2 == undefined) {
+          return Promise.reject("请选择时段" + value);
        }
-        form.week = JSON.stringify(form.week);
-        form.prices = JSON.stringify(form.prices);
-        form.halfPrices = JSON.stringify(form.halfPrices);
-        form.timePeriod = `${form.timePeriod1} - ${form.timePeriod2}`;
-        form.startTime = `${form.timePeriod1?.replace(':', '')}`;
-        const formData = {
-          ...form
-        };
-        const saveOrUpdate = isUpdate.value
-          ? updateThinkSiteTime
-          : addThinkSiteTime;
-        saveOrUpdate(formData)
-          .then((msg) => {
-            loading.value = false;
-            message.success(msg);
-            updateVisible(false);
-            emit('done');
-          })
-          .catch((e) => {
-            loading.value = false;
-            message.error(e.message);
-          });
-      })
-      .catch(() => {});
-  };
+        return Promise.resolve();
+      }
+    }
+  ]
+});

-  watch(
-    () => props.visible,
-    (visible) => {
-      if (visible) {
-        if (props.data) {
-          assignObject(form, props.data);
-          if (props.data.timePeriod) {
-            const strings = props.data.timePeriod.split('-');
-            form.timePeriod1 = strings[0].replace(' ', '');
-            form.timePeriod2 = strings[1].replace(' ', '');
-          }
-          if (props.data.week) {
-            form.week = JSON.parse(props.data.week);
-          }
-          isUpdate.value = true;
+const { resetFields } = useForm(form, rules);
+
+/* 保存编辑 */
+const save = () => {
+  if (!formRef.value) {
+    return;
+  }
+  formRef.value
+    .validate()
+    .then(() => {
+      loading.value = true;
+      const formData = JSON.parse(JSON.stringify(form))
+      formData.sid = props.sid;
+      console.log(formData)
+      if (!formData.sid || formData.sid == 0) {
+        loading.value = false;
+        return;
+      }
+      formData.week = JSON.stringify(formData.week);
+      formData.prices = JSON.stringify({
+        [month.value]: prices.value.map(item => item ? item.toString() : '')
+      });
+      formData.halfPrices = JSON.stringify({
+        [month.value]: halfPrices.value.map(item => item ? item.toString() : '')
+      });
+      formData.timePeriod = `${formData.timePeriod1} - ${formData.timePeriod2}`;
+      formData.startTime = `${formData.timePeriod1?.replace(":", "")}`;
+      console.log(formData)
+      const saveOrUpdate = isUpdate.value
+        ? updateThinkSiteTime
+        : addThinkSiteTime;
+      saveOrUpdate(formData)
+        .then((msg) => {
+          loading.value = false;
+          message.success(msg);
+          updateVisible(false);
+          emit("done");
+        })
+        .catch((e) => {
+          loading.value = false;
+          message.error(e.message);
+        });
+    })
+    .catch(() => {
+    });
+};
+
+const month = ref<string>(dayjs().format("YYYY-MM"));
+const prices = ref<any[]>([]);
+const halfPrices = ref<any[]>([]);
+const showCal = ref(false);
+const openCal = () => {
+  showCal.value = true;
+};
+
+const weekStr = ref([
+  "星期日",
+  "星期一",
+  "星期二",
+  "星期三",
+  "星期四",
+  "星期五",
+  "星期六"
+]);
+
+const makePrices = () => {
+  const dayNum = dayjs().daysInMonth();
+  prices.value = [];
+  for (let i = 0; i < dayNum; i++) {
+    prices.value.push("");
+  }
+  // console.log(prices.value);
+};
+
+const makeHalfPrices = () => {
+  const dayNum = dayjs().daysInMonth();
+  halfPrices.value = [];
+  for (let i = 0; i < dayNum; i++) {
+    halfPrices.value.push("");
+  }
+};
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      loading.value = false;
+      if (props.data) {
+        assignObject(form, props.data);
+        if (props.data.timePeriod) {
+          const strings = props.data.timePeriod.split("-");
+          form.timePeriod1 = strings[0].replace(" ", "");
+          form.timePeriod2 = strings[1].replace(" ", "");
+        }
+        if (props.data.week) {
+          form.week = JSON.parse(props.data.week);
+        }
+        isUpdate.value = true;
+        if (props.data?.prices === "0") {
+          makePrices();
        } else {
-          isUpdate.value = false;
+          const keys = Object.keys(JSON.parse(props.data?.prices))
+          month.value = keys[0]
+          const pricesItem = JSON.parse(props.data?.prices)[month.value];
+          if (pricesItem) prices.value = pricesItem;
+          else makePrices();
+        }
+        if (props.data?.halfPrices === "0") {
+          makeHalfPrices();
+        } else {
+          const keys = Object.keys(JSON.parse(props.data?.prices))
+          month.value = keys[0]
+          const halfPricesItem = JSON.parse(props.data?.halfPrices)[month.value];
+          if (halfPricesItem) halfPrices.value = halfPricesItem;
+          else makeHalfPrices();
        }
      } else {
-        resetFields();
+        isUpdate.value = false;
      }
-    },
-    { immediate: true }
-  );
+    } else {
+      resetFields();
+    }
+  },
+  { immediate: true }
+);
 </script>