city-gather-admin/src/views/film-manage/config/index.vue

<script setup lang="tsx">
import { ref } from 'vue';
import { NInputNumber } from 'naive-ui';
import { fetchCountdown, fetchGetConfig, fetchNotice, fetchProtocol } from '@/service/api/film-manage/config';
import { useForm } from '@/components/zt/Form/hooks/useForm';
import type { FormSchema } from '@/components/zt/Form/types/form';
type ActiveTab = 'countdown' | 'protocol' | 'notice';
const activeTab = ref<ActiveTab>('countdown');
const protocol = ref('');
const countForm: FormSchema[] = [
  {
    label: '选票倒计时',
    field: 'countdownVotes',
    component: 'NInput',
    render({ model, field }) {
      return (
        <NInputNumber
          v-slots={{ suffix: () => '分钟' }}
          value={model[field]}
          onUpdate:value={val => (model[field] = val)}
          min={0}
          max={600000}
        ></NInputNumber>
      );
    }
  },
  {
    label: '付款倒计时',
    field: 'countdownPay',
    component: 'NInput',
    render({ model, field }) {
      return (
        <NInputNumber
          v-slots={{ suffix: () => '分钟' }}
          value={model[field]}
          onUpdate:value={val => (model[field] = val)}
          max={10}
          min={0}
        ></NInputNumber>
      );
    }
  }
];
const notice = ref();
const submitLoding = ref(false);
const [countdownForm, { getFieldsValue, setFieldsValue }] = useForm({
  schemas: countForm,
  labelWidth: 120,
  layout: 'horizontal',
  gridProps: {
    cols: '1 xl:4 s:1 l:3',
    itemResponsive: true
  },
  collapsedRows: 1,
  showActionButtonGroup: false
});
async function handleChange(value: ActiveTab) {
  activeTab.value = value;
}
async function handleSubmit() {
  console.log(protocol.value, 'protocol');
  submitLoding.value = true;

  try {
    if (activeTab.value == 'countdown') {
      await fetchCountdown({ ...getFieldsValue() });
    }
    if (activeTab.value == 'protocol') {
      await fetchProtocol({ protocol: protocol.value });
    }
    if (activeTab.value == 'notice') {
      await fetchNotice({ notice: notice.value });
    }
    submitLoding.value = false;
    window.$message?.success('保存成功');
  } catch {
    submitLoding.value = false;
  }
}

async function getData() {
  const { data, error } = await fetchGetConfig();
  console.log(data);
  if (!error) {
    setFieldsValue({ ...data });
    notice.value = data.notice;
    protocol.value = data.protocol;
  }
}
getData();
</script>

<template>
  <div>
    <NCard :bordered="false" class="h-full flex-1 card-wrapper bg-white sm:flex-1-hidden dark:bg-dark" size="small">
      <NTabs v-model:value="activeTab" size="large" animated @update-value="handleChange">
        <NTabPane name="countdown" tab="倒计时" display-directive="show">
          <BasicForm @register-form="countdownForm"></BasicForm>
        </NTabPane>
        <NTabPane name="protocol" tab="退改签协议">
          <div class="flex pt50px">
            <div class="w120px flex-shrink-0 text-end">改签协议：</div>
            <Editor v-model:model-value="protocol"></Editor>
          </div>
        </NTabPane>
        <NTabPane name="notice" tab="购票须知">
          <div class="flex">
            <div class="w120px flex-shrink-0 text-end">购买须知：</div>
            <NInput v-model:value="notice" type="textarea" placeholder="请输入购票须知" />
          </div>
        </NTabPane>
      </NTabs>
      <div class="mt40px w-full flex items-center justify-center">
        <NButton :loading="submitLoding" type="primary" @click="handleSubmit">
          <template #icon>
            <SvgIcon icon="ant-design:save-outlined"></SvgIcon>
          </template>
          保存
        </NButton>
      </div>
    </NCard>
  </div>
</template>

<style lang="scss" scoped></style>