guofu-admin/src/views/baocan/setting/index.vue

<template>
  <div class="page">
    <div class="ele-body">
      <a-card title="报餐设置" :bordered="false">
        <a-form
          ref="formRef"
          :model="form"
          :rules="rules"
          :label-col="
            styleResponsive ? { md: 3, sm: 5, xs: 24 } : { flex: '90px' }
          "
          :wrapper-col="
            styleResponsive ? { md: 9, sm: 19, xs: 24 } : { flex: '1' }
          "
        >
          <a-form-item label="报餐规则" name="type">
            <a-select
              v-model:value="form.type"
              style="width: 100%"
              placeholder="请选择报餐规则"
              :options="options"
              @change="handleKeyword"
            >
              <a-select-option :value="20"
                >仅可预定第二天及以后的菜品</a-select-option
              >
              <a-select-option :value="10"
                >可预定当天及以后的菜品</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item label="早餐就餐时间" name="breakfast">
            <a-space>
              <a-time-picker
                v-model:value="form.breakfastStartTime"
                format="HH:mm"
              />
              <span>截止时间</span>
              <a-time-picker
                v-model:value="form.breakfastEndTime"
                format="HH:mm"
              />
            </a-space>
          </a-form-item>
          <a-form-item label="中餐就餐时间" name="lunch">
            <a-space>
              <a-time-picker
                v-model:value="form.lunchStartTime"
                format="HH:mm"
              />
              <span>截止时间</span>
              <a-time-picker v-model:value="form.lunchEndTime" format="HH:mm" />
            </a-space>
          </a-form-item>
          <a-form-item label="晚餐就餐时间" name="dinner">
            <a-space>
              <a-time-picker
                v-model:value="form.dinnerStartTime"
                format="HH:mm"
              />
              <span>截止时间</span>
              <a-time-picker
                v-model:value="form.dinnerEndTime"
                format="HH:mm"
              />
            </a-space>
          </a-form-item>
          <a-form-item label="操作" name="logo">
            <a-button type="primary" class="ele-btn-icon" @click="save">
              <span>保存</span>
            </a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { message } from 'ant-design-vue';
  import { useThemeStore } from '@/store/modules/theme';
  import { storeToRefs } from 'pinia';
  import { FormInstance } from 'ant-design-vue/es/form';
  import useFormData from '@/utils/use-form-data';
  import { addSetting, listSetting, updateSetting } from '@/api/system/setting';
  import dayjs, { Dayjs } from 'dayjs';
  import { toDateString } from 'ele-admin-pro';

  // 保存字段信息(设定好key和描述,content里的字段是随意加的会自动转为json保存到数据库)
  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { styleResponsive } = storeToRefs(themeStore);
  // 提交状态
  const loading = ref(false);
  // 是否是修改
  const isUpdate = ref(false);
  //
  const formRef = ref<FormInstance | null>(null);

  // 表单数据
  export interface BaoCan {
    settingId?: number;
    settingKey?: string;
    type?: number;
    breakfastStartTime?: any;
    breakfastEndTime?: any;
    breakfastEndMinute?: number;
    lunchStartTime?: any;
    lunchEndTime?: any;
    dinnerStartTime?: any;
    dinnerEndTime?: any;
    tenantId?: string | null;
  }
  const { form, assignFields } = useFormData<BaoCan>({
    type: 10,
    settingId: undefined,
    settingKey: 'BaoCan',
    breakfastStartTime: undefined,
    breakfastEndTime: undefined,
    breakfastEndMinute: 0,
    lunchStartTime: undefined,
    lunchEndTime: undefined,
    dinnerStartTime: undefined,
    dinnerEndTime: undefined
  });

  // 表单验证规则
  const rules = reactive({
    type: [
      {
        required: true,
        message: '请选择报餐类型',
        type: 'number',
        trigger: 'blur'
      }
    ]
  });

  const handleKeyword = (keyword) => {
    keyword.value = keyword;
    form.keyword = JSON.stringify(keyword);
  };

  /* 保存编辑 */
  const save = () => {
    if (!formRef.value) {
      return;
    }
    formRef.value
      .validate()
      .then(() => {
        loading.value = true;
        console.log(form);
        // form.breakfastEndMinute = ;
        // form.breakfastStartTime = toDateString(
        //   form.breakfastStartTime,
        //   'HH:mm'
        // );
        // form.breakfastEndTime = toDateString(form.breakfastEndTime, 'HH:mm');
        // form.lunchStartTime = toDateString(form.lunchStartTime, 'HH:mm');
        // form.lunchEndTime = toDateString(form.lunchEndTime, 'HH:mm');
        // form.dinnerStartTime = toDateString(form.dinnerStartTime, 'HH:mm');
        // form.dinnerEndTime = toDateString(form.dinnerEndTime, 'HH:mm');
        const appForm = {
          ...form,
          content: JSON.stringify(form)
        };
        console.log(appForm);
        return false;
        const saveOrUpdate = isUpdate.value ? updateSetting : addSetting;
        saveOrUpdate(appForm)
          .then(() => {
            message.success('保存成功');
          })
          .catch((e) => {
            message.error(e.message);
          });
      })
      .catch(() => {});
  };

  const reload = () => {
    listSetting({ settingKey: 'BaoCan' }).then((res) => {
      if (res.length > 0) {
        const data = res[0];
        form.settingId = data.settingId;
        isUpdate.value = true;
        if (data.content) {
          // 时间转换
          const jsonData = JSON.parse(data.content);
          // // assignFields(jsonData);
          // console.log(jsonData);
          // console.log(jsonData.breakfastStartTime);
          form.breakfastStartTime = toDateString(
            jsonData.breakfastEndTime,
            "yyyy-MM-dd'T'HH:mm:ssZ"
          );
          var s = toDateString(jsonData.breakfastStartTime, 'HH:mm');
          console.log(s);
          const breakfastStartTime = toDateString(
            jsonData.breakfastStartTime,
            'HH:mm'
          );
          form.breakfastStartTime = dayjs(breakfastStartTime, 'HH:mm');
          const breakfastEndTime = toDateString(
            jsonData.breakfastEndTime,
            'HH:mm'
          );
          form.breakfastEndTime = dayjs(breakfastEndTime, 'HH:mm');
          const lunchStartTime = toDateString(jsonData.lunchStartTime, 'HH:mm');
          form.lunchStartTime = dayjs(lunchStartTime, 'HH:mm');
          const lunchEndTime = toDateString(jsonData.lunchEndTime, 'HH:mm');
          form.lunchEndTime = dayjs(lunchEndTime, 'HH:mm');
          const dinnerStartTime = toDateString(
            jsonData.dinnerStartTime,
            'HH:mm'
          );
          form.dinnerStartTime = dayjs(dinnerStartTime, 'HH:mm');
          const dinnerEndTime = toDateString(jsonData.dinnerEndTime, 'HH:mm');
          form.dinnerEndTime = dayjs(dinnerEndTime, 'HH:mm');
        }
      }
    });
  };

  reload();
</script>