mod vue2 to vue3

exam-vue/src/views/sys/bookgl/index.vue

@@ -9,7 +9,7 @@
       :list-query="listQuery"
       @multi-actions="handleMultiAction"
     >
-      <template slot="filter-content">
+      <template #filter-content>
         <el-input v-model="listQuery.params.isbn" style="width: 200px" placeholder="搜索ISBN书号" class="filter-item"/>
         <el-input v-model="listQuery.params.bName" style="width: 200px" placeholder="搜索书名" class="filter-item"/>
         <el-input v-model="listQuery.params.bAuthor" style="width: 200px" placeholder="搜索作者" class="filter-item"/>
@@ -32,18 +32,19 @@
 
 
         <!--        <el-input v-model="listQuery.params.qctype" style="width: 200px" placeholder="搜索器材种类" class="filter-item"/>-->
-       <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleAdd">
-                  添加
+       <el-button class="filter-item" type="primary" @click="handleAdd">
+                  <el-icon><Plus /></el-icon> 添加
                 </el-button>
       </template>
 <!--      表格-->
-      <template slot="data-columns">
+      <template #data-columns>
         <el-table-column type="selection" width="55"/>
 
-        <el-table-column align="center" label="ISBN书号" prop="isbn"/>
-        <template slot-scope="scope">
-          <a style="color: #1890ff" @click="handleUpdate(scope.row)">{{ scope.row.id }}</a>
-        </template>
+        <el-table-column align="center" label="ISBN书号" prop="isbn">
+          <template #default="scope">
+            <a style="color: #1890ff" @click="handleUpdate(scope.row)">{{ scope.row.id }}</a>
+          </template>
+        </el-table-column>
         <el-table-column align="center" label="书名" prop="bName" />
         <el-table-column :formatter="dataFormatter" align="center" label="图书种类" prop="bType" class-name="DIC_TSZL"/>
 
@@ -51,16 +52,18 @@
         <el-table-column align="center" label="作者" prop="bAuthor" />
         <el-table-column align="center" label="出版商" prop="bPublisher" />
         <el-table-column align="center" label="封面" >
-          <template slot-scope="scope">
+          <template #default="scope">
             <el-popover placement="right" trigger="hover">
-              <el-image slot="reference" :src="scope.row.bPath" width="80" height="80"/>
+              <template #reference>
+                <el-image :src="scope.row.bPath" width="80" height="80"/>
+              </template>
               <el-image style="width: 250px; height: 250px" :src="scope.row.bPath" fit="cover"/>
             </el-popover>
           </template>
         </el-table-column>
         <el-table-column align="center" label="出版日期">
-          <template slot-scope="scope">
-            {{ scope.row.bPublicationTime | xmDateFormat }}
+          <template #default="scope">
+            {{ $filters.xmDateFormat(scope.row.bPublicationTime) }}
           </template>
         </el-table-column>
 
@@ -71,7 +74,7 @@
         <el-table-column :formatter="dataFormatter" align="center" label="状态" prop="bState"  class-name="STATE"/>
 
         <el-table-column align="center" label="操作">
-          <template slot-scope="scope">
+          <template #default="scope">
             <a style="color: #1890ff" @click="handleUpdate(scope.row)">
               <el-button link type="primary" size="small"
               >编辑
@@ -86,7 +89,7 @@
     </data-table>
 
     <!--    新增按钮按下-->
-    <el-dialog :visible.sync="dialogVisible" title="书籍信息" width="500px">
+    <el-dialog v-model="dialogVisible" title="书籍信息" width="500px">
       <el-form :model="formData" label-position="left" label-width="100px">
         <el-form-item label="Isbn书号">
           <el-input v-model="formData.isbn" />
@@ -119,7 +122,7 @@
             v-model="formData.bPublicationTime"
             type="datetime"
             placeholder="选择日期时间"
-            format="yyyy-MM-dd">
+            format="YYYY-MM-DD">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="数量">
@@ -132,10 +135,12 @@
           <el-input v-model="formData.bIntroduce" />
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="handleUpCancel">取 消</el-button>
-        <el-button type="primary" @click="handleSave">确 认</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleUpCancel">取 消</el-button>
+          <el-button type="primary" @click="handleSave">确 认</el-button>
+        </div>
+      </template>
     </el-dialog>
 
   </div>
@@ -143,14 +148,13 @@
 </template>
 
 <script>
-import DataTable from '@/components/DataTable'
-import MeetRole from '@/components/MeetRole'
-import DepartTreeSelect from '@/components/DepartTreeSelect'
-import {fetchTree} from '@/api/sys/depart/depart'
-import {getSelectOptions} from '@/api/sys/dict/dict'
+import DataTable from '@/components/DataTable/index.vue'
+import MeetRole from '@/components/MeetRole/index.vue'
+import DepartTreeSelect from '@/components/DepartTreeSelect/index.vue'
+import {getSelectOptions} from '@/api/sys/dict/dict.js'
 import {dataFormatter} from '@/utils'
-import {saveData} from '@/api/sys/bookgl/bookgl'
-import {getBjList, getZyList} from "@/api/sys/grxxgl/grxxgl";
+import {saveData} from '@/api/sys/bookgl/bookgl.js'
+import {getBjList, getZyList} from "@/api/sys/grxxgl/grxxgl.js";
 
 
 export default {