slble-attend/sl.ble_sys-attend/src-js/views/system/hotUpdate/index.vue

<script setup lang="ts">
import { ref } from "vue";
// https://plus-pro-components.com/components/form.html
import "plus-pro-components/es/components/form/style/css";
import {
  type PlusColumn,
  type FieldValues,
  PlusForm
} from "plus-pro-components";
import { text } from "stream/consumers";

const state = ref<FieldValues>({
  status: "1",
  name: "",
  rate: 4,
  progress: 100,
  switch: true,
  time: new Date().toString(),
  endTime: []
});

const rules = {
  name: [
    {
      required: true,
      message: "请输入名称"
    }
  ]
};

const columns: PlusColumn[] = [
];

const submitLoading = ref(false)

const handleChange = (values: FieldValues, prop: PlusColumn) => {
  console.log(values, prop, "change");
};
const handleSubmit = (values: FieldValues) => {
  console.log(values, "Submit");
};
const handleSubmitError = (err: any) => {
  console.log(err, "err");
};
</script>

<template>
  <el-card shadow="never" :body-style="{ height: 'calc(100vh - 260px)' }">
    <PlusForm
      v-model="state"
      class="w-[450px] m-auto"
      :columns="columns"
      :rules="rules"
      label-position="right"
      @change="handleChange"
      @submit="handleSubmit"
      @submit-error="handleSubmitError"
    >
       <template #footer="{ handleSubmit }">
        <div style="margin: 0 auto">
          <el-button type="primary" :loading="submitLoading" @click="handleSubmit">热更新</el-button>
        </div>
      </template>
    </PlusForm>
  </el-card>
  
</template>