vue3版本初版上线 自测已可用

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

@@ -3,14 +3,14 @@
     <span style="color:red">搜索时如果条件为LIKE只支持字符串</span>
     <el-form
       ref="fieldDialogFrom"
-      :model="dialogMiddle"
+      :model="middleDate"
       label-width="120px"
       label-position="left"
       :rules="rules"
     >
       <el-form-item label="Field名称" prop="fieldName">
         <el-col :span="6">
-          <el-input v-model="dialogMiddle.fieldName" autocomplete="off" />
+          <el-input v-model="middleDate.fieldName" autocomplete="off" />
         </el-col>
         <el-col :offset="1" :span="2">
           <el-button size="mini" @click="autoFill">自动填充</el-button>
@@ -18,28 +18,28 @@
       </el-form-item>
       <el-form-item label="Field中文名" prop="fieldDesc">
         <el-col :span="6">
-          <el-input v-model="dialogMiddle.fieldDesc" autocomplete="off" />
+          <el-input v-model="middleDate.fieldDesc" autocomplete="off" />
         </el-col>
       </el-form-item>
       <el-form-item label="FieldJSON" prop="fieldJson">
         <el-col :span="6">
-          <el-input v-model="dialogMiddle.fieldJson" autocomplete="off" />
+          <el-input v-model="middleDate.fieldJson" autocomplete="off" />
         </el-col>
       </el-form-item>
       <el-form-item label="数据库字段名" prop="columnName">
         <el-col :span="6">
-          <el-input v-model="dialogMiddle.columnName" autocomplete="off" />
+          <el-input v-model="middleDate.columnName" autocomplete="off" />
         </el-col>
       </el-form-item>
       <el-form-item label="数据库字段描述" prop="comment">
         <el-col :span="6">
-          <el-input v-model="dialogMiddle.comment" autocomplete="off" />
+          <el-input v-model="middleDate.comment" autocomplete="off" />
         </el-col>
       </el-form-item>
       <el-form-item label="Field数据类型" prop="fieldType">
         <el-col :span="8">
           <el-select
-            v-model="dialogMiddle.fieldType"
+            v-model="middleDate.fieldType"
             placeholder="请选择field数据类型"
             clearable
             @change="getDbfdOptions"
@@ -57,8 +57,8 @@
       <el-form-item label="数据库字段类型" prop="dataType">
         <el-col :span="8">
           <el-select
-            v-model="dialogMiddle.dataType"
-            :disabled="!dialogMiddle.fieldType"
+            v-model="middleDate.dataType"
+            :disabled="!middleDate.fieldType"
             placeholder="请选择数据库字段类型"
             clearable
           >
@@ -73,12 +73,12 @@
       </el-form-item>
       <el-form-item label="数据库字段长度" prop="dataTypeLong">
         <el-col :span="8">
-          <el-input v-model="dialogMiddle.dataTypeLong" placeholder="自定义类型必须指定长度" :disabled="!dialogMiddle.dataType" />
+          <el-input v-model="middleDate.dataTypeLong" placeholder="自定义类型必须指定长度" :disabled="!middleDate.dataType" />
         </el-col>
       </el-form-item>
       <el-form-item label="Field查询条件" prop="fieldSearchType">
         <el-col :span="8">
-          <el-select v-model="dialogMiddle.fieldSearchType" placeholder="请选择Field查询条件" clearable>
+          <el-select v-model="middleDate.fieldSearchType" placeholder="请选择Field查询条件" clearable>
             <el-option
               v-for="item in typeSearchOptions"
               :key="item.value"
@@ -91,7 +91,7 @@
 
       <el-form-item label="关联字典" prop="dictType">
         <el-col :span="8">
-          <el-select v-model="dialogMiddle.dictType" :disabled="dialogMiddle.fieldType!=='int'" placeholder="请选择字典" clearable>
+          <el-select v-model="middleDate.dictType" :disabled="middleDate.fieldType!=='int'" placeholder="请选择字典" clearable>
             <el-option
               v-for="item in dictOptions"
               :key="item.type"
@@ -122,6 +122,7 @@ export default {
   },
   data() {
     return {
+      middleDate: {},
       dbfdOptions: [],
       dictOptions: [],
       typeSearchOptions: [
@@ -188,6 +189,7 @@ export default {
     }
   },
   async created() {
+    this.middleDate = this.dialogMiddle
     const dictRes = await getSysDictionaryList({
       page: 1,
       pageSize: 999999
@@ -197,16 +199,16 @@ export default {
   },
   methods: {
     autoFill() {
-      this.dialogMiddle.fieldJson = toLowerCase(this.dialogMiddle.fieldName)
-      this.dialogMiddle.columnName = toSQLLine(this.dialogMiddle.fieldJson)
+      this.middleDate.fieldJson = toLowerCase(this.middleDate.fieldName)
+      this.middleDate.columnName = toSQLLine(this.middleDate.fieldJson)
     },
     async getDbfdOptions() {
-      this.dialogMiddle.dataType = ''
-      this.dialogMiddle.dataTypeLong = ''
-      this.dialogMiddle.fieldSearchType = ''
-      this.dialogMiddle.dictType = ''
-      if (this.dialogMiddle.fieldType) {
-        this.dbfdOptions = await getDict(this.dialogMiddle.fieldType)
+      this.middleDate.dataType = ''
+      this.middleDate.dataTypeLong = ''
+      this.middleDate.fieldSearchType = ''
+      this.middleDate.dictType = ''
+      if (this.middleDate.fieldType) {
+        this.dbfdOptions = await getDict(this.middleDate.fieldType)
       }
     }
   }

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

@@ -3,7 +3,7 @@
     <!-- 从数据库直接获取字段 -->
     <el-collapse v-model="activeNames">
       <el-collapse-item name="1">
-        <template slot="title">
+        <template #title>
           <div :style="{fontSize:'16px',paddingLeft:'20px'}">
             点这里从现有数据库创建代码
             <i class="header-icon el-icon-thumb" />
@@ -61,7 +61,7 @@
         <el-input v-model="form.packageName" placeholder="生成文件的默认名称(建议为驼峰格式,首字母小写,如sysXxxXxxx)" />
       </el-form-item>
       <el-form-item>
-        <template slot="label">
+        <template #label>
           <el-tooltip content="注：把自动生成的API注册进数据库" placement="bottom" effect="light">
             <div> 自动创建API </div>
           </el-tooltip>
@@ -69,7 +69,7 @@
         <el-checkbox v-model="form.autoCreateApiToSql" />
       </el-form-item>
       <el-form-item>
-        <template slot="label">
+        <template #label>
           <el-tooltip content="注：自动迁移生成的文件到ymal配置的对应位置" placement="bottom" effect="light">
             <div> 自动移动文件 </div>
           </el-tooltip>
@@ -94,7 +94,7 @@
       <el-table-column prop="fieldSearchType" label="搜索条件" width="130" />
       <el-table-column prop="dictType" label="字典" width="130" />
       <el-table-column label="操作" width="300">
-        <template slot-scope="scope">
+        <template #default="scope">
           <el-button
             size="mini"
             type="primary"
@@ -113,13 +113,15 @@
             :disabled="(scope.$index + 1) === form.fields.length"
             @click="moveDownField(scope.$index)"
           >下移</el-button>
-          <el-popover v-model="scope.row.visible" placement="top">
+          <el-popover v-model:visible="scope.row.visible" placement="top">
             <p>确定删除吗？</p>
             <div style="text-align: right; margin: 0">
               <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
               <el-button type="primary" size="mini" @click="deleteField(scope.$index)">确定</el-button>
             </div>
-            <el-button slot="reference" size="mini" type="danger" icon="el-icon-delete">删除</el-button>
+            <template #reference>
+              <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
+            </template>
           </el-popover>
         </template>
       </el-table-column>
@@ -131,19 +133,23 @@
       <el-button size="mini" type="primary" @click="enterForm(false)">生成代码</el-button>
     </div>
     <!-- 组件弹窗 -->
-    <el-dialog title="组件内容" :visible.sync="dialogFlag">
+    <el-dialog v-model="dialogFlag" title="组件内容">
       <FieldDialog v-if="dialogFlag" ref="fieldDialog" :dialog-middle="dialogMiddle" />
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeDialog">取 消</el-button>
-        <el-button size="mini" type="primary" @click="enterDialog">确 定</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button size="mini" @click="closeDialog">取 消</el-button>
+          <el-button size="mini" type="primary" @click="enterDialog">确 定</el-button>
+        </div>
+      </template>
     </el-dialog>
 
-    <el-dialog :visible.sync="previewFlag">
+    <el-dialog v-model="previewFlag">
       <PreviewCodeDialg v-if="previewFlag" :preview-code="preViewCode" />
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="previewFlag = false">确 定</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="previewFlag = false">确 定</el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>

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

@@ -20,13 +20,13 @@
       />
       <el-table-column label="id" width="60" prop="ID" />
       <el-table-column label="日期" width="180">
-        <template slot-scope="scope">{{ scope.row.CreatedAt|formatDate }}</template>
+        <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
       </el-table-column>
       <el-table-column label="结构体名" min-width="150" prop="structName" />
       <el-table-column label="结构体描述" min-width="150" prop="structCNName" />
       <el-table-column label="表名称" min-width="150" prop="tableName" />
       <el-table-column label="回滚标记" min-width="150" prop="flag">
-        <template slot-scope="scope">
+        <template #default="scope">
           <el-tag
             v-if="scope.row.flag"
             type="danger"
@@ -46,7 +46,7 @@
         </template>
       </el-table-column>
       <el-table-column label="操作" min-width="180">
-        <template slot-scope="scope">
+        <template #default="scope">
           <div>
             <el-button size="mini" type="primary" :disabled="scope.row.flag === 1" @click="rollback(scope.row)">回滚</el-button>
             <el-button size="mini" type="success" @click="goAutoCode(scope.row)">复用</el-button>
@@ -72,28 +72,10 @@
 <script>
 // 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索
 import { getSysHistory, rollback, delSysHistory } from '@/api/autoCode.js'
-import { formatTimeToStr } from '@/utils/date'
 import infoList from '@/mixins/infoList'
 
 export default {
   name: 'Api',
-  filters: {
-    formatDate: function(time) {
-      if (time !== null && time !== '') {
-        var date = new Date(time)
-        return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
-      } else {
-        return ''
-      }
-    },
-    formatBoolean: function(bool) {
-      if (bool !== null) {
-        return bool ? '是' : '否'
-      } else {
-        return ''
-      }
-    }
-  },
   mixins: [infoList],
   data() {
     return {

web/src/view/systemTools/index.vue

@@ -1,9 +1,17 @@
 <template>
   <div>
-    <keep-alive>
-      <router-view v-if="$route.meta.keepAlive" />
-    </keep-alive>
-    <router-view v-if="!$route.meta.keepAlive" />
+    <router-view v-if="$route.meta.keepAlive" v-slot="{ Component }">
+      <transition mode="out-in" name="el-fade-in-linear">
+        <keep-alive>
+          <component :is="Component" />
+        </keep-alive>
+      </transition>
+    </router-view>
+    <router-view v-if="!$route.meta.keepAlive" v-slot="{ Component }">
+      <transition mode="out-in" name="el-fade-in-linear">
+        <component :is="Component" />
+      </transition>
+    </router-view>
   </div>
 </template>