From 80c851d8f7fe90200fefb25544d6f6bca37ca589 Mon Sep 17 00:00:00 2001
From: piexlmax <qimiaojiangjizhao@gmail.com>
Date: Thu, 30 Dec 2021 20:48:57 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E5=8A=9F=E8=83=BD=E6=9D=BF?=
 =?UTF-8?q?=E5=9D=97setup=E6=94=B9=E9=80=A0=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../view/example/breakpoint/breakpoint.vue    |   3 -
 .../autoCode/component/fieldDialog.vue        | 185 +++----
 .../autoCode/component/previewCodeDialg.vue   | 122 ++---
 web/src/view/systemTools/autoCode/index.vue   | 483 +++++++++---------
 .../view/systemTools/autoCodeAdmin/index.vue  | 124 +++--
 web/src/view/systemTools/formCreate/index.vue |  16 +-
 web/src/view/systemTools/system/system.vue    | 138 +++--
 7 files changed, 550 insertions(+), 521 deletions(-)

diff --git a/web/src/view/example/breakpoint/breakpoint.vue b/web/src/view/example/breakpoint/breakpoint.vue
index 89cf2a7d..8522ce2d 100644
--- a/web/src/view/example/breakpoint/breakpoint.vue
+++ b/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>
diff --git a/web/src/view/systemTools/autoCode/component/fieldDialog.vue b/web/src/view/systemTools/autoCode/component/fieldDialog.vue
index 0661ba89..095f6a2e 100644
--- a/web/src/view/systemTools/autoCode/component/fieldDialog.vue
+++ b/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,103 +78,109 @@
   </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: {
-    dialogMiddle: {
-      type: Object,
-      default: function() {
-        return {}
-      }
+const props = defineProps({
+  dialogMiddle: {
+    type: Object,
+    default: function() {
+      return {}
     }
+  }
+})
+
+const middleDate = ref({})
+const dictOptions = ref([])
+const typeSearchOptions = ref([
+  {
+    label: '=',
+    value: '='
   },
-  data() {
-    return {
-      middleDate: {},
-      dictOptions: [],
-      typeSearchOptions: [
-        {
-          label: '=',
-          value: '='
-        },
-        {
-          label: '<>',
-          value: '<>'
-        },
-        {
-          label: '>',
-          value: '>'
-        },
-        {
-          label: '<',
-          value: '<'
-        },
-        {
-          label: 'LIKE',
-          value: 'LIKE'
-        }
-      ],
-      typeOptions: [
-        {
-          label: '字符串',
-          value: 'string'
-        },
-        {
-          label: '整型',
-          value: 'int'
-        },
-        {
-          label: '布尔值',
-          value: 'bool'
-        },
-        {
-          label: '浮点型',
-          value: 'float64'
-        },
-        {
-          label: '时间',
-          value: 'time.Time'
-        }
-      ],
-      rules: {
-        fieldName: [
-          { required: true, message: '请输入field英文名', trigger: 'blur' }
-        ],
-        fieldDesc: [
-          { required: true, message: '请输入field中文名', trigger: 'blur' }
-        ],
-        fieldJson: [
-          { required: true, message: '请输入field格式化json', trigger: 'blur' }
-        ],
-        columnName: [
-          { required: true, message: '请输入数据库字段', trigger: 'blur' }
-        ],
-        fieldType: [
-          { required: true, message: '请选择field数据类型', trigger: 'blur' }
-        ]
-      }
-    }
+  {
+    label: '<>',
+    value: '<>'
   },
-  async created() {
-    this.middleDate = this.dialogMiddle
-    const dictRes = await getSysDictionaryList({
-      page: 1,
-      pageSize: 999999
-    })
-
-    this.dictOptions = dictRes.data.list
+  {
+    label: '>',
+    value: '>'
+  },
+  {
+    label: '<',
+    value: '<'
+  },
+  {
+    label: 'LIKE',
+    value: 'LIKE'
+  }
+])
+const typeOptions = ref([
+  {
+    label: '字符串',
+    value: 'string'
+  },
+  {
+    label: '整型',
+    value: 'int'
+  },
+  {
+    label: '布尔值',
+    value: 'bool'
   },
-  methods: {
-    autoFill() {
-      this.middleDate.fieldJson = toLowerCase(this.middleDate.fieldName)
-      this.middleDate.columnName = toSQLLine(this.middleDate.fieldJson)
-    },
+  {
+    label: '浮点型',
+    value: 'float64'
+  },
+  {
+    label: '时间',
+    value: 'time.Time'
   }
+])
+const rules = ref({
+  fieldName: [
+    { required: true, message: '请输入field英文名', trigger: 'blur' }
+  ],
+  fieldDesc: [
+    { required: true, message: '请输入field中文名', trigger: 'blur' }
+  ],
+  fieldJson: [
+    { required: true, message: '请输入field格式化json', trigger: 'blur' }
+  ],
+  columnName: [
+    { required: true, message: '请输入数据库字段', trigger: 'blur' }
+  ],
+  fieldType: [
+    { required: true, message: '请选择field数据类型', trigger: 'blur' }
+  ]
+})
+
+const init = async() => {
+  middleDate.value = props.dialogMiddle
+  const dictRes = await getSysDictionaryList({
+    page: 1,
+    pageSize: 999999
+  })
+
+  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>
diff --git a/web/src/view/systemTools/autoCode/component/previewCodeDialg.vue b/web/src/view/systemTools/autoCode/component/previewCodeDialg.vue
index 9f3e450d..b94962ca 100644
--- a/web/src/view/systemTools/autoCode/component/previewCodeDialg.vue
+++ b/web/src/view/systemTools/autoCode/component/previewCodeDialg.vue
@@ -8,70 +8,78 @@
   </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: {
-    previewCode: {
-      type: Object,
-      default() {
-        return {}
-      }
-    }
-  },
-  data() {
-    return {
-      activeName: ''
-    }
-  },
-  mounted() {
-    marked.setOptions({
-      renderer: new marked.Renderer(),
-      highlight: function(code) {
-        return hljs.highlightAuto(code).value
-      },
-      pedantic: false,
-      gfm: true,
-      tables: true,
-      breaks: false,
-      sanitize: false,
-      smartLists: true,
-      smartypants: false,
-      xhtml: false
-    })
-    for (const key in this.previewCode) {
-      if (this.activeName === '') {
-        this.activeName = key
-      }
-      document.getElementById(key).innerHTML = marked(this.previewCode[key])
+import { onMounted, ref } from 'vue-demi'
+import { ElMessage } from 'element-plus'
+import { defineProps, defineExpose } from 'vue'
+
+const props = defineProps({
+  previewCode: {
+    type: Object,
+    default() {
+      return {}
     }
-  },
-  methods: {
-    selectText() {
-      const element = document.getElementById(this.activeName)
-      if (document.body.createTextRange) {
-        const range = document.body.createTextRange()
-        range.moveToElementText(element)
-        range.select()
-      } else if (window.getSelection) {
-        const selection = window.getSelection()
-        const range = document.createRange()
-        range.selectNodeContents(element)
-        selection.removeAllRanges()
-        selection.addRange(range)
-      } else {
-        alert('none')
-      }
+  }
+})
+
+onMounted(() => {
+  marked.setOptions({
+    renderer: new marked.Renderer(),
+    highlight: function(code) {
+      return hljs.highlightAuto(code).value
     },
-    copy() {
-      this.selectText()
-      document.execCommand('copy')
-      this.$message.success('复制成功')
+    pedantic: false,
+    gfm: true,
+    tables: true,
+    breaks: false,
+    sanitize: false,
+    smartLists: true,
+    smartypants: false,
+    xhtml: false
+  })
+  for (const key in props.previewCode) {
+    if (this.activeName === '') {
+      this.activeName = key
     }
+    document.getElementById(key).innerHTML = marked(props.previewCode[key])
+  }
+})
+
+const activeName = ref('')
+
+const selectText = () => {
+  const element = document.getElementById(activeName.value)
+  if (document.body.createTextRange) {
+    const range = document.body.createTextRange()
+    range.moveToElementText(element)
+    range.select()
+  } else if (window.getSelection) {
+    const selection = window.getSelection()
+    const range = document.createRange()
+    range.selectNodeContents(element)
+    selection.removeAllRanges()
+    selection.addRange(range)
+  } else {
+    alert('none')
   }
+}
+const copy = () => {
+  selectText()
+  document.execCommand('copy')
+  ElMessage.success('复制成功')
+}
+
+defineExpose({ copy })
+
+</script>
+
+<script>
+
+export default {
+
 }
 </script>
 
diff --git a/web/src/view/systemTools/autoCode/index.vue b/web/src/view/systemTools/autoCode/index.vue
index 85cc8e5d..5fdf60f5 100644
--- a/web/src/view/systemTools/autoCode/index.vue
+++ b/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,240 +185,230 @@ 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: {
-        dbName: '',
-        tableName: ''
-      },
-      dbOptions: [],
-      tableOptions: [],
-      addFlag: '',
-      fdMap: {},
-      form: {
-        structName: '',
-        tableName: '',
-        packageName: '',
-        abbreviation: '',
-        description: '',
-        autoCreateApiToSql: false,
-        autoMoveFile: false,
-        fields: []
-      },
-      rules: {
-        structName: [
-          { required: true, message: '请输入结构体名称', trigger: 'blur' }
-        ],
-        abbreviation: [
-          { required: true, message: '请输入结构体简称', trigger: 'blur' }
-        ],
-        description: [
-          { required: true, message: '请输入结构体描述', trigger: 'blur' }
-        ],
-        packageName: [
-          {
-            required: true,
-            message: '文件名称：sysXxxxXxxx',
-            trigger: 'blur'
-          }
-        ]
-      },
-      dialogMiddle: {},
-      bk: {},
-      dialogFlag: false,
-      previewFlag: false
-    }
-  },
-  created() {
-    this.getDb()
-    this.setFdMap()
-    const id = this.$route.params.id
-    if (id) {
-      this.getAutoCodeJson(id)
+const route = useRoute()
+const activeNames = ref([''])
+const preViewCode = ref({})
+const dbform = ref({
+  dbName: '',
+  tableName: ''
+})
+const dbOptions = ref([])
+const tableOptions = ref([])
+const addFlag = ref('')
+const fdMap = ref({})
+const form = ref({
+  structName: '',
+  tableName: '',
+  packageName: '',
+  abbreviation: '',
+  description: '',
+  autoCreateApiToSql: false,
+  autoMoveFile: false,
+  fields: []
+})
+const rules = ref({
+  structName: [
+    { required: true, message: '请输入结构体名称', trigger: 'blur' }
+  ],
+  abbreviation: [
+    { required: true, message: '请输入结构体简称', trigger: 'blur' }
+  ],
+  description: [
+    { required: true, message: '请输入结构体描述', trigger: 'blur' }
+  ],
+  packageName: [
+    {
+      required: true,
+      message: '文件名称：sysXxxxXxxx',
+      trigger: 'blur'
     }
-  },
-  methods: {
-    toLowerCase(form, key) {
-      form[key] = toLowerCase(form[key])
-    },
-    selectText() {
-      this.$refs.preview.selectText()
-    },
-    copy() {
-      this.$refs.preview.copy()
-    },
-    editAndAddField(item) {
-      this.dialogFlag = true
-      if (item) {
-        this.addFlag = 'edit'
-        this.bk = JSON.parse(JSON.stringify(item))
-        this.dialogMiddle = item
-      } else {
-        this.addFlag = 'add'
-        this.dialogMiddle = JSON.parse(JSON.stringify(fieldTemplate))
-      }
-    },
-    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
-      if (index === fCount - 1) {
-        return
+  ]
+})
+const dialogMiddle = ref({})
+const bk = ref({})
+const dialogFlag = ref(false)
+const previewFlag = ref(false)
+
+const toLowerCaseFunc = (form, key) => {
+  form[key] = toLowerCase(form[key])
+}
+const previewNode = ref(null)
+const selectText = () => {
+  previewNode.value.selectText()
+}
+const copy = () => {
+  previewNode.value.copy()
+}
+const editAndAddField = (item) => {
+  dialogFlag.value = true
+  if (item) {
+    addFlag.value = 'edit'
+    bk.value = JSON.parse(JSON.stringify(item))
+    dialogMiddle.value = item
+  } else {
+    addFlag.value = 'add'
+    dialogMiddle.value = JSON.parse(JSON.stringify(fieldTemplate))
+  }
+}
+const moveUpField = (index) => {
+  if (index === 0) {
+    return
+  }
+  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 = 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) {
+      dialogMiddle.value.fieldName = toUpperCase(
+        dialogMiddle.value.fieldName
+      )
+      if (addFlag.value === 'add') {
+        form.value.fields.push(dialogMiddle.value)
       }
-      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 => {
-        if (valid) {
-          this.dialogMiddle.fieldName = toUpperCase(
-            this.dialogMiddle.fieldName
-          )
-          if (this.addFlag === 'add') {
-            this.form.fields.push(this.dialogMiddle)
-          }
-          this.dialogFlag = false
-        } else {
-          return false
+      dialogFlag.value = false
+    } else {
+      return false
+    }
+  })
+}
+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 (
+    form.value.fields.some(item => item.fieldName === form.value.structName)
+  ) {
+    ElMessage({
+      type: 'error',
+      message: '存在与结构体同名的字段'
+    })
+    return false
+  }
+  autoCodeForm.value.validate(async valid => {
+    if (valid) {
+      for (const key in form.value) {
+        if (typeof form.value[key] === 'string') {
+          form.value[key] = form.value[key].trim()
         }
-      })
-    },
-    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({
-          type: 'error',
-          message: '请填写至少一个field'
-        })
-        return false
       }
-      if (
-        this.form.fields.some(item => item.fieldName === this.form.structName)
-      ) {
-        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: '存在与结构体同名的字段'
+          message: 'structName和struct简称不能相同'
         })
         return false
       }
-      this.$refs.autoCodeForm.validate(async valid => {
-        if (valid) {
-          for (const key in this.form) {
-            if (typeof this.form[key] === 'string') {
-              this.form[key] = this.form[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({
-              type: 'error',
-              message: 'structName和struct简称不能相同'
+      form.value.humpPackageName = toSQLLine(form.value.packageName)
+      if (isPreview) {
+        const data = await preview(form.value)
+        preViewCode.value = data.data.autoCode
+        previewFlag.value = true
+      } else {
+        const data = await createTemp(form.value)
+        if (data.headers?.success === 'false') {
+          return
+        } else {
+          if (form.value.autoMoveFile) {
+            ElMessage({
+              type: 'success',
+              message: '自动化代码创建成功，自动移动成功'
             })
-            return false
-          }
-          this.form.humpPackageName = toSQLLine(this.form.packageName)
-          if (isPreview) {
-            const data = await preview(this.form)
-            this.preViewCode = data.data.autoCode
-            this.previewFlag = true
-          } else {
-            const data = await createTemp(this.form)
-            if (data.headers?.success === 'false') {
-              return
-            } else {
-              if (this.form.autoMoveFile) {
-                this.$message({
-                  type: 'success',
-                  message: '自动化代码创建成功，自动移动成功'
-                })
-                return
-              }
-              this.$message({
-                type: 'success',
-                message: '自动化代码创建成功，正在下载'
-              })
-            }
-            const blob = new Blob([data])
-            const fileName = 'ginvueadmin.zip'
-            if ('download' in document.createElement('a')) {
-              // 不是IE浏览器
-              const url = window.URL.createObjectURL(blob)
-              const link = document.createElement('a')
-              link.style.display = 'none'
-              link.href = url
-              link.setAttribute('download', fileName)
-              document.body.appendChild(link)
-              link.click()
-              document.body.removeChild(link) // 下载完成移除元素
-              window.URL.revokeObjectURL(url) // 释放掉blob对象
-            } else {
-              // IE 10+
-              window.navigator.msSaveBlob(blob, fileName)
-            }
+            return
           }
+          ElMessage({
+            type: 'success',
+            message: '自动化代码创建成功，正在下载'
+          })
+        }
+        const blob = new Blob([data])
+        const fileName = 'ginvueadmin.zip'
+        if ('download' in document.createElement('a')) {
+          // 不是IE浏览器
+          const url = window.URL.createObjectURL(blob)
+          const link = document.createElement('a')
+          link.style.display = 'none'
+          link.href = url
+          link.setAttribute('download', fileName)
+          document.body.appendChild(link)
+          link.click()
+          document.body.removeChild(link) // 下载完成移除元素
+          window.URL.revokeObjectURL(url) // 释放掉blob对象
         } else {
-          return false
+          // IE 10+
+          window.navigator.msSaveBlob(blob, fileName)
         }
-      })
-    },
-    async getDb() {
-      const res = await getDB()
-      if (res.code === 0) {
-        this.dbOptions = res.data.dbs
       }
-    },
-    async getTable() {
-      const res = await getTable({ dbName: this.dbform.dbName })
-      if (res.code === 0) {
-        this.tableOptions = res.data.tables
-      }
-      this.dbform.tableName = ''
-    },
-    async getColumn() {
-      const gormModelList = ['id', 'created_at', 'updated_at', 'deleted_at']
-      const res = await getColumn(this.dbform)
-      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 = []
-        res.data.columns &&
+    } else {
+      return false
+    }
+  })
+}
+const getDbFunc = async() => {
+  const res = await getDB()
+  if (res.code === 0) {
+    dbOptions.value = res.data.dbs
+  }
+}
+const getTableFunc = async() => {
+  const res = await getTable({ dbName: dbform.value.dbName })
+  if (res.code === 0) {
+    tableOptions.value = res.data.tables
+  }
+  dbform.value.tableName = ''
+}
+const getColumnFunc = async() => {
+  const gormModelList = ['id', 'created_at', 'updated_at', 'deleted_at']
+  const res = await getColumn(dbform.value)
+  if (res.code === 0) {
+    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],
@@ -428,25 +419,41 @@ export default {
               })
             }
           })
-      }
-    },
-    async setFdMap() {
-      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
-        })
-      })
-    },
-    async getAutoCodeJson(id) {
-      const res = await getMeta({ id: Number(id) })
-      if (res.code === 0) {
-        this.form = JSON.parse(res.data.meta)
-      }
-    }
   }
 }
+const setFdMap = async() => {
+  const fdTypes = ['string', 'int', 'bool', 'float64', 'time.Time']
+  fdTypes.forEach(async fdtype => {
+    const res = await getDict(fdtype)
+    res && res.forEach(item => {
+      fdMap.value[item.label] = fdtype
+    })
+  })
+}
+const getAutoCodeJson = async(id) => {
+  const res = await getMeta({ id: Number(id) })
+  if (res.code === 0) {
+    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>
 
 <style scoped lang="scss">
diff --git a/web/src/view/systemTools/autoCodeAdmin/index.vue b/web/src/view/systemTools/autoCodeAdmin/index.vue
index 4e03f3f5..1f0385d2 100644
--- a/web/src/view/systemTools/autoCodeAdmin/index.vue
+++ b/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()
+}
+
+// 查询
+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) {
+      ElMessage.success('删除成功')
+      getTableData()
     }
-  },
-  created() {
-    this.getTableData()
-  },
-  methods: {
-    async deleteRow(row) {
-      this.$confirm('此操作将删除本历史, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(async() => {
-        const res = await delSysHistory({ id: Number(row.ID) })
-        if (res.code === 0) {
-          this.$message.success('删除成功')
-          this.getTableData()
-        }
-      })
-    },
-    async rollback(row) {
-      this.$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()
-        }
-      })
-    },
-    goAutoCode(row) {
-      if (row) {
-        this.$router.push({ name: 'autoCodeEdit', params: {
-          id: row.ID
-        }})
-      } else {
-        this.$router.push({ name: 'autoCode' })
-      }
+  })
+}
+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) {
+      ElMessage.success('回滚成功')
+      getTableData()
     }
+  })
+}
+const goAutoCode = (row) => {
+  if (row) {
+    router.push({ name: 'autoCodeEdit', params: {
+      id: row.ID
+    }})
+  } else {
+    router.push({ name: 'autoCode' })
   }
 }
+
 </script>
 
 <style scoped lang="scss">
diff --git a/web/src/view/systemTools/formCreate/index.vue b/web/src/view/systemTools/formCreate/index.vue
index 6302f405..9e273b6e 100644
--- a/web/src/view/systemTools/formCreate/index.vue
+++ b/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>
diff --git a/web/src/view/systemTools/system/system.vue b/web/src/view/systemTools/system/system.vue
index bd0e2e44..20f2ad41 100644
--- a/web/src/view/systemTools/system/system.vue
+++ b/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,73 +340,72 @@
 </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: {
-        system: {},
-        jwt: {},
-        casbin: {},
-        mysql: {},
-        pgsql: {},
-        excel: {},
-        autoCode: {},
-        redis: {},
-        qiniu: {},
-        tencentCOS: {},
-        aliyunOSS: {},
-        huaWeiObs: {},
-        captcha: {},
-        zap: {},
-        local: {},
-        email: {},
-        timer: {
-          detail: {}
-        }
-      }
-    }
-  },
-  async created() {
-    await this.initForm()
-  },
-  methods: {
-    async initForm() {
-      const res = await getSystemConfig()
-      if (res.code === 0) {
-        this.config = res.data.config
-      }
-    },
-    reload() {},
-    async update() {
-      const res = await setSystemConfig({ config: this.config })
-      if (res.code === 0) {
-        this.$message({
-          type: 'success',
-          message: '配置文件设置成功'
-        })
-        await this.initForm()
-      }
-    },
-    async email() {
-      const res = await emailTest()
-      if (res.code === 0) {
-        this.$message({
-          type: 'success',
-          message: '邮件发送成功'
-        })
-        await this.initForm()
-      } else {
-        this.$message({
-          type: 'error',
-          message: '邮件发送失败'
-        })
-      }
-    }
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const config = ref({
+  system: {},
+  jwt: {},
+  casbin: {},
+  mysql: {},
+  pgsql: {},
+  excel: {},
+  autoCode: {},
+  redis: {},
+  qiniu: {},
+  tencentCOS: {},
+  aliyunOSS: {},
+  huaWeiObs: {},
+  captcha: {},
+  zap: {},
+  local: {},
+  email: {},
+  timer: {
+    detail: {}
+  }
+})
+
+const initForm = async() => {
+  const res = await getSystemConfig()
+  if (res.code === 0) {
+    config.value = res.data.config
+  }
+}
+initForm()
+const reload = () => {}
+const update = async() => {
+  const res = await setSystemConfig({ config: config.value })
+  if (res.code === 0) {
+    ElMessage({
+      type: 'success',
+      message: '配置文件设置成功'
+    })
+    await initForm()
   }
 }
+const email = async() => {
+  const res = await emailTest()
+  if (res.code === 0) {
+    ElMessage({
+      type: 'success',
+      message: '邮件发送成功'
+    })
+    await initForm()
+  } else {
+    ElMessage({
+      type: 'error',
+      message: '邮件发送失败'
+    })
+  }
+}
+
 </script>
 
 <style lang="scss">