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

<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"
      label-width="160px"
      @change="handleChange"
      @submit="handleSubmit"
      @submit-error="handleSubmitError"
      @reset="handleReset"
    />
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } 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 { useColumns } from "./columns";

const vGlobal = window.vueGlobal;

const state = ref({});

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

const { columns } = useColumns();

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");
};
const handleReset = () => {
  console.log("handleReset");
};

onMounted(() => {
  const ci = setInterval(() => {
    if (vGlobal.isInited()) {
      clearInterval(ci);
      console.log("sysCfgDb", vGlobal.sysCfg);
      state.value = vGlobal.sysCfg ? vGlobal.sysCfg.sysCfgDb : null;
    }
  }, 100);
});
</script>