系统功能板块setup改造完成

web/src/view/example/breakpoint/breakpoint.vue

@@ -22,9 +22,6 @@
           </div>
         </transition>
       </div>
-      <!-- <span
-      v-if="this.file"
-    >{{Math.floor(((this.formDataList.length-this.waitNum)/this.formDataList.length)*100)}}%</span> -->
       <div class="tips">此版本为先行体验功能测试版，样式美化和性能优化正在进行中，上传切片文件和合成的完整文件分别再QMPlusserver目录的breakpointDir文件夹和fileDir文件夹</div>
     </div>
   </div>

web/src/view/systemTools/autoCode/component/fieldDialog.vue

@@ -30,7 +30,6 @@
           style="width:100%"
           placeholder="请选择field数据类型"
           clearable
-          @change="getDbfdOptions"
         >
           <el-option
             v-for="item in typeOptions"
@@ -79,27 +78,25 @@
   </div>
 </template>
 
-<script>
+<script setup>
+
 import { toLowerCase, toSQLLine } from '@/utils/stringFun'
 import { getSysDictionaryList } from '@/api/sysDictionary'
 import warningBar from '@/components/warningBar/warningBar.vue'
+import { ref, defineProps, defineExpose } from 'vue-demi'
 
-export default {
-  name: 'FieldDialog',
-  components: { warningBar },
-  props: {
+const props = defineProps({
   dialogMiddle: {
     type: Object,
     default: function() {
       return {}
     }
   }
-  },
-  data() {
-    return {
-      middleDate: {},
-      dictOptions: [],
-      typeSearchOptions: [
+})
+
+const middleDate = ref({})
+const dictOptions = ref([])
+const typeSearchOptions = ref([
   {
     label: '=',
     value: '='
@@ -120,8 +117,8 @@ export default {
     label: 'LIKE',
     value: 'LIKE'
   }
-      ],
-      typeOptions: [
+])
+const typeOptions = ref([
   {
     label: '字符串',
     value: 'string'
@@ -142,8 +139,8 @@ export default {
     label: '时间',
     value: 'time.Time'
   }
-      ],
-      rules: {
+])
+const rules = ref({
   fieldName: [
     { required: true, message: '请输入field英文名', trigger: 'blur' }
   ],
@@ -159,23 +156,31 @@ export default {
   fieldType: [
     { required: true, message: '请选择field数据类型', trigger: 'blur' }
   ]
-      }
-    }
-  },
-  async created() {
-    this.middleDate = this.dialogMiddle
+})
+
+const init = async() => {
+  middleDate.value = props.dialogMiddle
   const dictRes = await getSysDictionaryList({
     page: 1,
     pageSize: 999999
   })
 
-    this.dictOptions = dictRes.data.list
-  },
-  methods: {
-    autoFill() {
-      this.middleDate.fieldJson = toLowerCase(this.middleDate.fieldName)
-      this.middleDate.columnName = toSQLLine(this.middleDate.fieldJson)
-    },
+  dictOptions.value = dictRes.data.list
 }
+init()
+
+const autoFill = () => {
+  middleDate.value.fieldJson = toLowerCase(middleDate.value.fieldName)
+  middleDate.value.columnName = toSQLLine(middleDate.value.fieldJson)
+}
+
+const fieldDialogFrom = ref(null)
+defineExpose({ fieldDialogFrom })
+</script>
+
+<script>
+
+export default {
+  name: 'FieldDialog'
 }
 </script>

web/src/view/systemTools/autoCode/component/previewCodeDialg.vue

@@ -8,26 +8,24 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import marked from 'marked'
 import hljs from 'highlight.js'
-// import 'highlight.js/styles/atelier-cave-light.css';
 import 'highlight.js/styles/atelier-plateau-light.css'
-export default {
-  props: {
+import { onMounted, ref } from 'vue-demi'
+import { ElMessage } from 'element-plus'
+import { defineProps, defineExpose } from 'vue'
+
+const props = defineProps({
   previewCode: {
     type: Object,
     default() {
       return {}
     }
   }
-  },
-  data() {
-    return {
-      activeName: ''
-    }
-  },
-  mounted() {
+})
+
+onMounted(() => {
   marked.setOptions({
     renderer: new marked.Renderer(),
     highlight: function(code) {
@@ -42,16 +40,18 @@ export default {
     smartypants: false,
     xhtml: false
   })
-    for (const key in this.previewCode) {
+  for (const key in props.previewCode) {
     if (this.activeName === '') {
       this.activeName = key
     }
-      document.getElementById(key).innerHTML = marked(this.previewCode[key])
+    document.getElementById(key).innerHTML = marked(props.previewCode[key])
   }
-  },
-  methods: {
-    selectText() {
-      const element = document.getElementById(this.activeName)
+})
+
+const activeName = ref('')
+
+const selectText = () => {
+  const element = document.getElementById(activeName.value)
   if (document.body.createTextRange) {
     const range = document.body.createTextRange()
     range.moveToElementText(element)
@@ -65,13 +65,21 @@ export default {
   } else {
     alert('none')
   }
-    },
-    copy() {
-      this.selectText()
-      document.execCommand('copy')
-      this.$message.success('复制成功')
 }
+const copy = () => {
+  selectText()
+  document.execCommand('copy')
+  ElMessage.success('复制成功')
 }
+
+defineExpose({ copy })
+
+</script>
+
+<script>
+
+export default {
+
 }
 </script>
 

web/src/view/systemTools/autoCode/index.vue

@@ -14,7 +14,7 @@
           </template>
           <el-form ref="getTableForm" style="margin-top:24px" :inline="true" :model="dbform" label-width="120px">
             <el-form-item label="数据库名" prop="structName">
-              <el-select v-model="dbform.dbName" filterable placeholder="请选择数据库" @change="getTable">
+              <el-select v-model="dbform.dbName" filterable placeholder="请选择数据库" @change="getTableFunc">
                 <el-option
                   v-for="item in dbOptions"
                   :key="item.database"
@@ -39,7 +39,7 @@
               </el-select>
             </el-form-item>
             <el-form-item>
-              <el-button size="mini" type="primary" @click="getColumn">使用此表创建</el-button>
+              <el-button size="mini" type="primary" @click="getColumnFunc">使用此表创建</el-button>
             </el-form-item>
           </el-form>
         </el-collapse-item>
@@ -61,7 +61,7 @@
           <el-input v-model="form.description" placeholder="中文描述作为自动api描述" />
         </el-form-item>
         <el-form-item label="文件名称" prop="packageName">
-          <el-input v-model="form.packageName" placeholder="生成文件的默认名称(建议为驼峰格式,首字母小写,如sysXxxXxxx)" @blur="toLowerCase(form,'packageName')" />
+          <el-input v-model="form.packageName" placeholder="生成文件的默认名称(建议为驼峰格式,首字母小写,如sysXxxXxxx)" @blur="toLowerCaseFunc(form,'packageName')" />
         </el-form-item>
         <el-form-item>
           <template #label>
@@ -138,7 +138,7 @@
     </div>
     <!-- 组件弹窗 -->
     <el-dialog v-model="dialogFlag" title="组件内容">
-      <FieldDialog v-if="dialogFlag" ref="fieldDialog" :dialog-middle="dialogMiddle" />
+      <FieldDialog v-if="dialogFlag" ref="fieldDialogNode" :dialog-middle="dialogMiddle" />
       <template #footer>
         <div class="dialog-footer">
           <el-button size="mini" @click="closeDialog">取 消</el-button>
@@ -155,7 +155,7 @@
           <el-button size="mini" type="primary" @click="copy">复制</el-button>
         </div>
       </template>
-      <PreviewCodeDialog v-if="previewFlag" ref="preview" :preview-code="preViewCode" />
+      <PreviewCodeDialog v-if="previewFlag" ref="previewNode" :preview-code="preViewCode" />
       <template #footer>
         <div class="dialog-footer" style="padding-top:14px;padding-right:14px">
           <el-button size="small" type="primary" @click="previewFlag = false">确 定</el-button>
@@ -165,7 +165,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+
 const fieldTemplate = {
   fieldName: '',
   fieldDesc: '',
@@ -184,26 +185,22 @@ import PreviewCodeDialog from '@/view/systemTools/autoCode/component/previewCode
 import { toUpperCase, toHump, toSQLLine, toLowerCase } from '@/utils/stringFun'
 import { createTemp, getDB, getTable, getColumn, preview, getMeta } from '@/api/autoCode'
 import { getDict } from '@/utils/dictionary'
+import { ref, getCurrentInstance } from 'vue'
+import { useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus'
 
-export default {
-  name: 'AutoCode',
-  components: {
-    FieldDialog,
-    PreviewCodeDialog
-  },
-  data() {
-    return {
-      activeNames: [''],
-      preViewCode: {},
-      dbform: {
+const route = useRoute()
+const activeNames = ref([''])
+const preViewCode = ref({})
+const dbform = ref({
   dbName: '',
   tableName: ''
-      },
-      dbOptions: [],
-      tableOptions: [],
-      addFlag: '',
-      fdMap: {},
-      form: {
+})
+const dbOptions = ref([])
+const tableOptions = ref([])
+const addFlag = ref('')
+const fdMap = ref({})
+const form = ref({
   structName: '',
   tableName: '',
   packageName: '',
@@ -212,8 +209,8 @@ export default {
   autoCreateApiToSql: false,
   autoMoveFile: false,
   fields: []
-      },
-      rules: {
+})
+const rules = ref({
   structName: [
     { required: true, message: '请输入结构体名称', trigger: 'blur' }
   ],
@@ -230,134 +227,128 @@ export default {
       trigger: 'blur'
     }
   ]
-      },
-      dialogMiddle: {},
-      bk: {},
-      dialogFlag: false,
-      previewFlag: false
-    }
-  },
-  created() {
-    this.getDb()
-    this.setFdMap()
-    const id = this.$route.params.id
-    if (id) {
-      this.getAutoCodeJson(id)
-    }
-  },
-  methods: {
-    toLowerCase(form, key) {
+})
+const dialogMiddle = ref({})
+const bk = ref({})
+const dialogFlag = ref(false)
+const previewFlag = ref(false)
+
+const toLowerCaseFunc = (form, key) => {
   form[key] = toLowerCase(form[key])
-    },
-    selectText() {
-      this.$refs.preview.selectText()
-    },
-    copy() {
-      this.$refs.preview.copy()
-    },
-    editAndAddField(item) {
-      this.dialogFlag = true
+}
+const previewNode = ref(null)
+const selectText = () => {
+  previewNode.value.selectText()
+}
+const copy = () => {
+  previewNode.value.copy()
+}
+const editAndAddField = (item) => {
+  dialogFlag.value = true
   if (item) {
-        this.addFlag = 'edit'
-        this.bk = JSON.parse(JSON.stringify(item))
-        this.dialogMiddle = item
+    addFlag.value = 'edit'
+    bk.value = JSON.parse(JSON.stringify(item))
+    dialogMiddle.value = item
   } else {
-        this.addFlag = 'add'
-        this.dialogMiddle = JSON.parse(JSON.stringify(fieldTemplate))
+    addFlag.value = 'add'
+    dialogMiddle.value = JSON.parse(JSON.stringify(fieldTemplate))
+  }
 }
-    },
-    moveUpField(index) {
+const moveUpField = (index) => {
   if (index === 0) {
     return
   }
-      const oldUpField = this.form.fields[index - 1]
-      this.form.fields.splice(index - 1, 1)
-      this.form.fields.splice(index, 0, oldUpField)
-    },
-    moveDownField(index) {
-      const fCount = this.form.fields.length
+  const oldUpField = form.value.fields[index - 1]
+  form.value.fields.splice(index - 1, 1)
+  form.value.fields.splice(index, 0, oldUpField)
+}
+const moveDownField = (index) => {
+  const fCount = form.value.fields.length
   if (index === fCount - 1) {
     return
   }
-      const oldDownField = this.form.fields[index + 1]
-      this.form.fields.splice(index + 1, 1)
-      this.form.fields.splice(index, 0, oldDownField)
-    },
-    enterDialog() {
-      this.$refs.fieldDialog.$refs.fieldDialogFrom.validate(valid => {
+  const oldDownField = form.value.fields[index + 1]
+  form.value.fields.splice(index + 1, 1)
+  form.value.fields.splice(index, 0, oldDownField)
+}
+
+const currentInstance = getCurrentInstance()
+const enterDialog = () => {
+  currentInstance.refs.fieldDialogNode.fieldDialogFrom.validate(valid => {
     if (valid) {
-          this.dialogMiddle.fieldName = toUpperCase(
-            this.dialogMiddle.fieldName
+      dialogMiddle.value.fieldName = toUpperCase(
+        dialogMiddle.value.fieldName
       )
-          if (this.addFlag === 'add') {
-            this.form.fields.push(this.dialogMiddle)
+      if (addFlag.value === 'add') {
+        form.value.fields.push(dialogMiddle.value)
       }
-          this.dialogFlag = false
+      dialogFlag.value = false
     } else {
       return false
     }
   })
-    },
-    closeDialog() {
-      if (this.addFlag === 'edit') {
-        this.dialogMiddle = this.bk
-      }
-      this.dialogFlag = false
-    },
-    deleteField(index) {
-      this.form.fields.splice(index, 1)
-    },
-    async enterForm(isPreview) {
-      if (this.form.fields.length <= 0) {
-        this.$message({
+}
+const closeDialog = () => {
+  if (addFlag.value === 'edit') {
+    dialogMiddle.value = bk.value
+  }
+  dialogFlag.value = false
+}
+const deleteField = (index) => {
+  form.value.fields.splice(index, 1)
+}
+const autoCodeForm = ref(null)
+const enterForm = async(isPreview) => {
+  if (form.value.fields.length <= 0) {
+    ElMessage({
       type: 'error',
       message: '请填写至少一个field'
     })
     return false
   }
   if (
-        this.form.fields.some(item => item.fieldName === this.form.structName)
+    form.value.fields.some(item => item.fieldName === form.value.structName)
   ) {
-        this.$message({
+    ElMessage({
       type: 'error',
       message: '存在与结构体同名的字段'
     })
     return false
   }
-      this.$refs.autoCodeForm.validate(async valid => {
+  autoCodeForm.value.validate(async valid => {
     if (valid) {
-          for (const key in this.form) {
-            if (typeof this.form[key] === 'string') {
-              this.form[key] = this.form[key].trim()
+      for (const key in form.value) {
+        if (typeof form.value[key] === 'string') {
+          form.value[key] = form.value[key].trim()
         }
       }
-          this.form.structName = toUpperCase(this.form.structName)
-          if (this.form.tableName) { this.form.tableName = this.form.tableName.replace(' ', '') }
-          if (this.form.structName === this.form.abbreviation) {
-            this.$message({
+      form.value.structName = toUpperCase(form.value.structName)
+      if (form.value.tableName) { form.value.tableName = form.value.tableName.replace(' ', '') }
+      if (form.value.structName === form.value.abbreviation) {
+        ElMessage({
           type: 'error',
           message: 'structName和struct简称不能相同'
         })
         return false
       }
-          this.form.humpPackageName = toSQLLine(this.form.packageName)
+      form.value.humpPackageName = toSQLLine(form.value.packageName)
       if (isPreview) {
-            const data = await preview(this.form)
-            this.preViewCode = data.data.autoCode
-            this.previewFlag = true
+        const data = await preview(form.value)
+        preViewCode.value = data.data.autoCode
+        previewFlag.value = true
       } else {
-            const data = await createTemp(this.form)
+        const data = await createTemp(form.value)
         if (data.headers?.success === 'false') {
           return
         } else {
-              if (this.form.autoMoveFile) {
-                this.$message({
+          if (form.value.autoMoveFile) {
+            ElMessage({
               type: 'success',
               message: '自动化代码创建成功，自动移动成功'
             })
             return
           }
-              this.$message({
+          ElMessage({
             type: 'success',
             message: '自动化代码创建成功，正在下载'
           })
@@ -384,40 +375,40 @@ export default {
       return false
     }
   })
-    },
-    async getDb() {
+}
+const getDbFunc = async() => {
   const res = await getDB()
   if (res.code === 0) {
-        this.dbOptions = res.data.dbs
+    dbOptions.value = res.data.dbs
+  }
 }
-    },
-    async getTable() {
-      const res = await getTable({ dbName: this.dbform.dbName })
+const getTableFunc = async() => {
+  const res = await getTable({ dbName: dbform.value.dbName })
   if (res.code === 0) {
-        this.tableOptions = res.data.tables
+    tableOptions.value = res.data.tables
   }
-      this.dbform.tableName = ''
-    },
-    async getColumn() {
+  dbform.value.tableName = ''
+}
+const getColumnFunc = async() => {
   const gormModelList = ['id', 'created_at', 'updated_at', 'deleted_at']
-      const res = await getColumn(this.dbform)
+  const res = await getColumn(dbform.value)
   if (res.code === 0) {
-        const tbHump = toHump(this.dbform.tableName)
-        this.form.structName = toUpperCase(tbHump)
-        this.form.tableName = this.dbform.tableName
-        this.form.packageName = tbHump
-        this.form.abbreviation = tbHump
-        this.form.description = tbHump + '表'
-        this.form.autoCreateApiToSql = true
-        this.form.fields = []
+    const tbHump = toHump(dbform.value.tableName)
+    form.value.structName = toUpperCase(tbHump)
+    form.value.tableName = dbform.value.tableName
+    form.value.packageName = tbHump
+    form.value.abbreviation = tbHump
+    form.value.description = tbHump + '表'
+    form.value.autoCreateApiToSql = true
+    form.value.fields = []
     res.data.columns &&
           res.data.columns.forEach(item => {
             if (!gormModelList.some(gormfd => gormfd === item.columnName)) {
               const fbHump = toHump(item.columnName)
-              this.form.fields.push({
+              form.value.fields.push({
                 fieldName: toUpperCase(fbHump),
                 fieldDesc: item.columnComment || fbHump + '字段',
-                fieldType: this.fdMap[item.dataType],
+                fieldType: fdMap.value[item.dataType],
                 dataType: item.dataType,
                 fieldJson: fbHump,
                 dataTypeLong: item.dataTypeLong && item.dataTypeLong.split(',')[0],
@@ -429,23 +420,39 @@ export default {
             }
           })
   }
-    },
-    async setFdMap() {
+}
+const setFdMap = async() => {
   const fdTypes = ['string', 'int', 'bool', 'float64', 'time.Time']
   fdTypes.forEach(async fdtype => {
     const res = await getDict(fdtype)
     res && res.forEach(item => {
-          this.fdMap[item.label] = fdtype
+      fdMap.value[item.label] = fdtype
     })
   })
-    },
-    async getAutoCodeJson(id) {
+}
+const getAutoCodeJson = async(id) => {
   const res = await getMeta({ id: Number(id) })
   if (res.code === 0) {
-        this.form = JSON.parse(res.data.meta)
+    form.value = JSON.parse(res.data.meta)
   }
 }
+
+const init = () => {
+  getDbFunc()
+  setFdMap()
+  const id = route.params.id
+  if (id) {
+    getAutoCodeJson(id)
+  }
 }
+init()
+
+</script>
+
+<script>
+
+export default {
+  name: 'AutoCode'
 }
 </script>
 

web/src/view/systemTools/autoCodeAdmin/index.vue

@@ -39,7 +39,7 @@
         <el-table-column align="left" label="操作" min-width="180">
           <template #default="scope">
             <div>
-              <el-button size="mini" type="text" :disabled="scope.row.flag === 1" @click="rollback(scope.row)">回滚</el-button>
+              <el-button size="mini" type="text" :disabled="scope.row.flag === 1" @click="rollbackFunc(scope.row)">回滚</el-button>
               <el-button size="mini" type="text" @click="goAutoCode(scope.row)">复用</el-button>
               <el-button size="mini" type="text" @click="deleteRow(scope.row)">删除</el-button>
             </div>
@@ -62,59 +62,87 @@
 </template>
 
 <script>
-// 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索
+export default {
+  name: 'AutoCodeAdmin',
+}
+</script>
+
+<script setup>
 import { getSysHistory, rollback, delSysHistory } from '@/api/autoCode.js'
-import infoList from '@/mixins/infoList'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { ref } from 'vue'
+import { formatDate } from '@/utils/format'
+const router = useRouter()
 
-export default {
-  name: 'Api',
-  mixins: [infoList],
-  data() {
-    return {
-      listApi: getSysHistory
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(10)
+const tableData = ref([])
+
+// 分页
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  getTableData()
+}
+
+const handleCurrentChange = (val) => {
+  page.value = val
+  getTableData()
 }
-  },
-  created() {
-    this.getTableData()
-  },
-  methods: {
-    async deleteRow(row) {
-      this.$confirm('此操作将删除本历史, 是否继续?', '提示', {
+
+// 查询
+const getTableData = async() => {
+  const table = await getSysHistory({
+    page: page.value,
+    pageSize: pageSize.value
+  })
+  if (table.code === 0) {
+    tableData.value = table.data.list
+    total.value = table.data.total
+    page.value = table.data.page
+    pageSize.value = table.data.pageSize
+  }
+}
+
+getTableData()
+
+const deleteRow = async(row) => {
+  ElMessageBox.confirm('此操作将删除本历史, 是否继续?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
   }).then(async() => {
     const res = await delSysHistory({ id: Number(row.ID) })
     if (res.code === 0) {
-          this.$message.success('删除成功')
-          this.getTableData()
+      ElMessage.success('删除成功')
+      getTableData()
     }
   })
-    },
-    async rollback(row) {
-      this.$confirm('此操作将删除自动创建的文件和api, 是否继续?', '提示', {
+}
+const rollbackFunc = async(row) => {
+  ElMessageBox.confirm('此操作将删除自动创建的文件和api, 是否继续?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
   }).then(async() => {
     const res = await rollback({ id: Number(row.ID) })
     if (res.code === 0) {
-          this.$message.success('回滚成功')
-          this.getTableData()
+      ElMessage.success('回滚成功')
+      getTableData()
     }
   })
-    },
-    goAutoCode(row) {
+}
+const goAutoCode = (row) => {
   if (row) {
-        this.$router.push({ name: 'autoCodeEdit', params: {
+    router.push({ name: 'autoCodeEdit', params: {
       id: row.ID
     }})
   } else {
-        this.$router.push({ name: 'autoCode' })
-      }
-    }
+    router.push({ name: 'autoCode' })
   }
 }
+
 </script>
 
 <style scoped lang="scss">

web/src/view/systemTools/formCreate/index.vue

@@ -5,15 +5,13 @@
 </template>
 
 <script>
-var path = import.meta.env.VITE_BASE_PATH
-var port = import.meta.env.VITE_SERVER_PORT
 export default {
-  name: 'FormGenerator',
-  data() {
-    return {
-      basePath: path,
-      basePort: port
-    }
-  }
+  name: 'FormGenerator'
 }
 </script>
+
+<script setup>
+import { ref } from 'vue'
+const basePath = ref(import.meta.env.VITE_BASE_PATH)
+const basePort = ref(import.meta.env.VITE_SERVER_PORT)
+</script>

web/src/view/systemTools/system/system.vue

@@ -127,19 +127,6 @@
             <el-input v-model.number="config.captcha.imgHeight" />
           </el-form-item>
         </el-collapse-item>
-
-        <el-collapse-item title="验证码配置" name="8">
-          <el-form-item label="keyLong">
-            <el-input v-model.number="config.captcha.keyLong" />
-          </el-form-item>
-          <el-form-item label="imgWidth">
-            <el-input v-model.number="config.captcha.imgWidth" />
-          </el-form-item>
-          <el-form-item label="imgHeight">
-            <el-input v-model.number="config.captcha.imgHeight" />
-          </el-form-item>
-        </el-collapse-item>
-
         <el-collapse-item title="数据库配置" name="9">
           <template v-if="config.system.dbType === 'mysql'">
             <el-form-item label="username">
@@ -353,13 +340,17 @@
 </template>
 
 <script>
+export default {
+  name: 'Config'
+}
+</script>
+<script setup>
 import { getSystemConfig, setSystemConfig } from '@/api/system'
 import { emailTest } from '@/api/email'
-export default {
-  name: 'Config',
-  data() {
-    return {
-      config: {
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const config = ref({
   system: {},
   jwt: {},
   casbin: {},
@@ -379,47 +370,42 @@ export default {
   timer: {
     detail: {}
   }
-      }
-    }
-  },
-  async created() {
-    await this.initForm()
-  },
-  methods: {
-    async initForm() {
+})
+
+const initForm = async() => {
   const res = await getSystemConfig()
   if (res.code === 0) {
-        this.config = res.data.config
+    config.value = res.data.config
+  }
 }
-    },
-    reload() {},
-    async update() {
-      const res = await setSystemConfig({ config: this.config })
+initForm()
+const reload = () => {}
+const update = async() => {
+  const res = await setSystemConfig({ config: config.value })
   if (res.code === 0) {
-        this.$message({
+    ElMessage({
       type: 'success',
       message: '配置文件设置成功'
     })
-        await this.initForm()
+    await initForm()
+  }
 }
-    },
-    async email() {
+const email = async() => {
   const res = await emailTest()
   if (res.code === 0) {
-        this.$message({
+    ElMessage({
       type: 'success',
       message: '邮件发送成功'
     })
-        await this.initForm()
+    await initForm()
   } else {
-        this.$message({
+    ElMessage({
       type: 'error',
       message: '邮件发送失败'
     })
   }
 }
-  }
-}
+
 </script>
 
 <style lang="scss">