index.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <template>
  2. <el-card shadow="never" :body-style="{ height: 'calc(100vh - 260px)' }">
  3. <PlusForm
  4. :key="formKey"
  5. v-model="state"
  6. class="w-[450px] m-auto"
  7. :columns="columns"
  8. :rules="rules"
  9. label-position="right"
  10. label-width="140px"
  11. @change="handleChange"
  12. @submit="handleSubmit"
  13. >
  14. <template #footer="{ handleSubmit }">
  15. <div style="margin: 0 auto">
  16. <el-button type="primary" @click="handleSubmit">修改</el-button>
  17. </div>
  18. </template>
  19. </PlusForm>
  20. </el-card>
  21. </template>
  22. <script setup lang="ts">
  23. import { ref, onMounted } from "vue";
  24. import "plus-pro-components/es/components/form/style/css";
  25. import {
  26. type PlusColumn,
  27. type FieldValues,
  28. PlusForm
  29. } from "plus-pro-components";
  30. import { useColumns } from "./columns";
  31. import { modifySysCfg } from "@/api/system";
  32. import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
  33. const vGlobal = window.vueGlobal;
  34. const state = ref({});
  35. const formKey = ref(0);
  36. const rules = {
  37. name: [
  38. {
  39. required: true,
  40. message: "请输入名称"
  41. }
  42. ]
  43. };
  44. const { columns } = useColumns();
  45. const handleChange = (values: FieldValues, prop: PlusColumn) => {
  46. // console.log('handleChange', values, prop);
  47. // console.log('handleChange 2', vGlobal.sysCfg.sysCfgView)
  48. };
  49. const handleSubmit = (values: FieldValues) => {
  50. const data = {
  51. cfgKey: 'sysCfgView',
  52. cfgVal: JSON.stringify(vGlobal.sysCfg.sysCfgView.toJson())
  53. }
  54. modifySysCfg(data).then((response) => {
  55. if (response.success) {
  56. ElNotification.success({
  57. message: '更新成功',
  58. })
  59. vGlobal.applySysCfg();
  60. formKey.value = formKey.value + 1;
  61. } else {
  62. ElNotification.error({
  63. message: '更新失败',
  64. })
  65. }
  66. })
  67. };
  68. onMounted(() => {
  69. const ci = setInterval(() => {
  70. if (vGlobal.isInited()) {
  71. clearInterval(ci);
  72. state.value = vGlobal.sysCfg ? vGlobal.sysCfg.sysCfgView : null;
  73. formKey.value = formKey.value + 1;
  74. }
  75. }, 100);
  76. });
  77. </script>