resource-admin/src/views/system-manage/param-settings/component/member-fee.tsx

import { NAlert, NButton, NForm, NFormItemGi, NGrid, NInput, useMessage } from 'naive-ui'
import { defineComponent, reactive, ref, shallowRef } from 'vue'
import { getVipPriceSettings, setVipPriceSettings } from '../../api'
import styles from './index.module.less'

export default defineComponent({
  name: 'member-fee',
  setup() {
    const forms = reactive({ id: 0, originalPrice: 0, salePrice: 0 }) as any
    const beforeData: any = shallowRef({}) // 储存原始数据
    const formsRef = ref()
    const btnLoading = ref(false)
    const message = useMessage()

    const getList = async () => {
      try {
        const { data } = await getVipPriceSettings({ page: 1, rows: 999, cardTypes: ['VIP'] })

        const rows = data.rows[0]

        forms.id = rows.id
        forms.originalPrice = rows.originalPrice
        forms.salePrice = rows.salePrice
        console.log(forms)
        // beforeData.value = { ...forms }
      } catch {}
    }

    // // 数组进行对比
    // const dataCompare = (beforeData: any, afterData: any) => {
    //   const changeDate: any = []
    //   for (let key in beforeData) {
    //     if (beforeData[key] != afterData[key]) {
    //       changeDate.push({
    //         id: key,
    //         paramValue: afterData[key]
    //       })
    //     }
    //   }
    //   return changeDate || []
    // }

    const onSubmit = async () => {
      formsRef.value.validate(async (errors: any) => {
        if (errors) return
        try {
          const res = await setVipPriceSettings({ ...forms })
        } catch (e) {
          console.log(e)
        }
        message.success('保存成功')
      })
    }

    getList()
    return () => (
      <>
        <NForm ref={formsRef} labelPlacement="left" model={forms} requireMarkPlacement="left">
          <NAlert title="会员价格" showIcon={false} bordered={false} style="margin-bottom: 12px;" />
          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="会员原价"
              path="originalPrice"
              rule={[
                {
                  required: true,
                  pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                  message: '请输正确的会员原价',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput class={[styles.w140, styles.mr14]} v-model:value={forms.originalPrice}>
                {{ suffix: () => '元' }}
              </NInput>
            </NFormItemGi>
          </NGrid>

          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="会员售价"
              path="salePrice"
              rule={[
                {
                  required: true,
                  pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                  message: '请输正确的入会员售价',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput class={[styles.w140, styles.mr14]} v-model:value={forms.salePrice}>
                {{ suffix: () => '元' }}
              </NInput>
            </NFormItemGi>
          </NGrid>
        </NForm>

        <NButton
          type="primary"
          onClick={onSubmit}
          loading={btnLoading.value}
          //v-auth="vipPriceSettings/update1623234797500751874"
        >
          保存设置
        </NButton>
      </>
    )
  }
})