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

web/src/view/example/customer/customer.vue

@@ -17,21 +17,25 @@
     >
       <el-table-column type="selection" width="55" />
       <el-table-column label="接入日期" width="180">
-        <template slot-scope="scope">{{ scope.row.CreatedAt|formatDate }}</template>
+        <template #default="scope">
+          <span>{{ formatDate(scope.row.CreatedAt) }}</span>
+        </template>
       </el-table-column>
       <el-table-column label="姓名" prop="customerName" width="120" />
       <el-table-column label="电话" prop="customerPhoneData" width="120" />
       <el-table-column label="接入人ID" prop="sysUserId" width="120" />
       <el-table-column label="按钮组" min-width="160">
-        <template slot-scope="scope">
+        <template #default="scope">
           <el-button size="small" type="text" @click="updateCustomer(scope.row)">变更</el-button>
-          <el-popover v-model="scope.row.visible" placement="top" width="160">
+          <el-popover v-model:visible="scope.row.visible" placement="top" width="160">
             <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="deleteCustomer(scope.row)">确定</el-button>
             </div>
-            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini">删除</el-button>
+            <template #reference>
+              <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
+            </template>
           </el-popover>
         </template>
       </el-table-column>
@@ -48,7 +52,7 @@
       @size-change="handleSizeChange"
     />
 
-    <el-dialog :before-close="closeDialog" :visible.sync="dialogFormVisible" title="客户">
+    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="客户">
       <el-form :inline="true" :model="form" label-width="80px">
         <el-form-item label="客户名">
           <el-input v-model="form.customerName" autocomplete="off" />
@@ -57,10 +61,12 @@
           <el-input v-model="form.customerPhoneData" autocomplete="off" />
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="closeDialog">取 消</el-button>
-        <el-button type="primary" @click="enterDialog">确 定</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closeDialog">取 消</el-button>
+          <el-button type="primary" @click="enterDialog">确 定</el-button>
+        </div>
+      </template>
     </el-dialog>
     <div class="tips">在资源权限中将此角色的资源权限清空 或者不包含创建者的角色 即可屏蔽此客户资源的显示</div>
   </div>
@@ -74,21 +80,10 @@ import {
   getExaCustomer,
   getExaCustomerList
 } from '@/api/customer'
-import { formatTimeToStr } from '@/utils/date'
 import infoList from '@/mixins/infoList'
 
 export default {
   name: 'Customer',
-  filters: {
-    formatDate: function(time) {
-      if (time !== null && time !== '') {
-        var date = new Date(time)
-        return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
-      } else {
-        return ''
-      }
-    }
-  },
   mixins: [infoList],
   data() {
     return {