kami_frontend/src/views/card-jd-ck/account/components/add-modal.vue

<template>
  <a-modal
    :visible="props.visible"
    :ok-loading="loading"
    draggable
    @cancel="handleCancel"
  >
    <template #title>{{ isNaN(props.id) ? '新增' : '编辑' }}Cookie</template>
    <a-form ref="formDataRef" :model="formData">
      <a-form-item field="name" label="名称" required>
        <a-input v-model="formData.name" />
      </a-form-item>
      <a-form-item field="cookie" label="cookie" required>
        <a-space
          direction="vertical"
          fill
          style="width: -webkit-fill-available"
        >
          <a-textarea
            v-model="formData.cookie"
            :autoSize="{ minRows: 3, maxRows: 10 }"
          />
        </a-space>
      </a-form-item>
      <a-form-item field="status" label="状态">
        <a-switch
          v-model="formData.status"
          :checked-value="KamiApiCardRedeemJdV1AccountAddReqStatusEnum.Normal"
          :unchecked-value="
            KamiApiCardRedeemJdV1AccountAddReqStatusEnum.Disable
          "
        />
      </a-form-item>
      <a-form-item field="notes" label="备注">
        <a-textarea v-model="formData.notes" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-space>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" :loading="loading" @click="handleOk">
          确定
        </a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import useLoading from '@/hooks/loading';
import { FormInstance } from '@arco-design/web-vue';
import { ref, PropType, watch, reactive } from 'vue';
import { isNull } from '@/utils/is.ts';
import { apiCkClient } from '@/api/index.ts';
import { KamiApiCardRedeemJdV1AccountAddReqStatusEnum } from '@/api/generated/index.ts';
import type {
  KamiApiCardRedeemJdV1AccountAddReq,
  KamiApiCardRedeemJdV1CookieInfo
} from '@/api/generated/index.ts';
import { isNaN } from 'lodash';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  id: {
    type: Number,
    default: null
  },
  account: {
    type: Object as PropType<Required<KamiApiCardRedeemJdV1CookieInfo>>,
    default: null
  }
});

const generateFormData = () => {
  return {
    name: '',
    cookie: '',
    notes: '',
    status: KamiApiCardRedeemJdV1AccountAddReqStatusEnum.Normal
  };
};
const formData = ref<KamiApiCardRedeemJdV1AccountAddReq>(generateFormData());
const formDataRef = ref<FormInstance>();

const { loading, setLoading } = useLoading(false);
const renderData = reactive<{ cookieStatus: boolean; loading: boolean }>({
  cookieStatus: false,
  loading: false
});

const emit = defineEmits(['update:visible']);

const handleOk = () => {
  if (formData.value) {
    formDataRef.value.validate().then(async res => {
      if (res) return;
      setLoading(true);
      try {
        if (isNull(props.id)) {
          await apiCkClient.apiCookieInfoJdAccountAddPost(formData.value);
        } else {
          await apiCkClient.apiCookieInfoJdAccountUpdatePut({
            id: props.id,
            ...formData.value
          });
        }
        emit('update:visible', false);
        formData.value = generateFormData();
      } catch (error) {
      } finally {
        setLoading(false);
      }
    });
  }
};
watch(
  () => props.account,
  val => {
    if (!isNull(val)) {
      formData.value = { ...val };
    }
  }
);
const handleCancel = () => {
  emit('update:visible', false);
  formData.value = generateFormData();
};

watch(
  () => formData.value.cookie,
  val => {
    renderData.cookieStatus = false;
  }
);
</script>

<style lang="less" scoped>
.footer {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>