AI 极客低代码平台快速上手 -- 生成 Vuetify 代码

<script setup lang='ts'>import { ref } from 'vue'import router from '@/router'import { create } from '@/api/OrderResource'import { SnackbarStore } from '@/stores/SnackbarStore'
const snackbarStore = SnackbarStore()
// 表单初始状态const isLoading = ref(false)const isSubmitDisabled = ref(false)const error = ref(false)const errorMessages = ref("")
// 消除错误提示const resetErrors = () => {  error.value = false  errorMessages.value = ""}
const refForm = ref()const isFormValid = ref(true)const params = reactive({  orderNum: "",  amount: "",  memo: ""})
const orderNumRules = ref([  (v: any) => typeof v === 'string' && !!v.trim() || "订单号:不能为空",  (v: string) => v.length <= 50 || "订单号:最长不能超过50个字符",])const amountRules = ref([  (v: any) => v !== null || "订单金额:不能为null",  (v: number) => v >= 0.00 || "订单金额:必须大于或等于0.00",  (v: number) => v <= 100.00 || "订单金额:必须小于或等于100.00",  (v: string) => {    const integerPart = 10    const fractionPart = 2    const regExp = new RegExp(`^\\d{1,${integerPart}}(\\.\\d{0,${fractionPart}})?$`)    return regExp.test(v) || "订单金额:数字的值只允许在10位整数和2位小数范围内"  }])const memoRules = ref([  (v: any) => typeof v === 'string' && !!v.trim() || "订单描述:不能为空",  (v: string) => v.length <= 50 || "订单描述:最长不能超过50个字符",])
// 提交新增订单的请求const handleCreate = async () => {  const { valid } = await refForm.value.validate()  if (valid) {    isLoading.value = true    isSubmitDisabled.value = true
    const res = await create(params)
    isLoading.value = false    isSubmitDisabled.value = false
    if (!res.data.error) {      snackbarStore.showSuccessMessage("成功创建订单！")      setTimeout(() => {        router.back()      }, 1000)    }  }}
// 返回列表const handleReturn = () => {  router.back()}
</script>
<template>  <v-sheet elevation="0" class="mx-auto" color="transparent" max-width="1800">    <v-card class="mb-5">      <v-card-title class="py-4 font-weight-bold">        新增订单      </v-card-title>      <v-divider></v-divider>      <v-card-text class="pa-7">        <v-form          ref="refForm"          class="text-left"          v-model="isFormValid"          lazy-validation        >          <v-row>
            <v-col cols="12" sm="4">              <v-label class="font-weight-medium mb-2"><span class="text-red mr-2">*</span>订单号</v-label>              <v-text-field                v-model="params.orderNum"                :rules="orderNumRules"                :error="error"                :error-messages="errorMessages"                color="primary"                placeholder="请输入订单号"                density="compact"                variant="outlined"                clearable                type="text"                validateOn="blur"                @change="resetErrors"              />            </v-col>
            <v-col cols="12" sm="4">              <v-label class="font-weight-medium mb-2"><span class="text-red mr-2">*</span>订单金额</v-label>              <v-text-field                v-model="params.amount"                :rules="amountRules"                :error="error"                :error-messages="errorMessages"                color="primary"                placeholder="请输入订单金额"                density="compact"                variant="outlined"                clearable                type="text"                validateOn="blur"                @change="resetErrors"              />            </v-col>
            <v-col cols="12" sm="4">              <v-label class="font-weight-medium mb-2"><span class="text-red mr-2">*</span>订单描述</v-label>              <v-text-field                v-model="params.memo"                :rules="memoRules"                :error="error"                :error-messages="errorMessages"                color="primary"                placeholder="请输入订单描述"                density="compact"                variant="outlined"                clearable                type="text"                validateOn="blur"                @change="resetErrors"              />            </v-col>
          </v-row>        </v-form>      </v-card-text>      <v-divider></v-divider>      <v-card-actions class="pa-5">        <v-spacer></v-spacer>        <v-btn          class="px-5 mr-4"          color="primary"          elevation="1"          variant="elevated"          @click="handleReturn"        >          返回列表        </v-btn>        <v-btn          :loading="isLoading"          :disabled="isSubmitDisabled"          class="px-5"          color="primary"          elevation="1"          variant="elevated"          @click="handleCreate"        >          保存信息        </v-btn>        <v-spacer></v-spacer>      </v-card-actions>    </v-card>  </v-sheet></template>
<style scoped lang="scss"></style>

/** * 领域类 Order(订单) 的资源访问层 * @author 极客学院 * @date 2025/03/20 */import { DemoAuthInstance as AuthInstance, Query } from "@/configs/api"
// 提交新增订单的请求export const create = (data: any) => {  return AuthInstance.post(`/demo/order/user/create`, data)}
// 提交修改订单的请求export const modify = (data: any) => {  return AuthInstance.put(`/demo/order/user/modify`, data)}
// 显示一条订单的信息详情export const detail = (orderId: number) => {  return AuthInstance.get(`/demo/order/user/detail/${orderId}`)}
// 订单列表export const list = (query: Query) => {  return AuthInstance.get(`/demo/order/user/list`, { params: query })}
// 删除一条订单信息(非物理删除)export const remove = (orderId: number) => {  return AuthInstance.delete(`/demo/order/user/remove/${orderId}`)}