feat: 🎸 综合实例重构中

Author: kailong321200875

mock/example/index.ts

@@ -1,34 +1,28 @@
 import Mock from 'mockjs'
 import { toAnyString } from '@/utils'
 
-const List: any[] = []
+let List: any[] = []
 const count = 100
 
 const baseContent = '<p>I am testing data, I am testing data.</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
-const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
+// const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
 
 for (let i = 0; i < count; i++) {
   List.push(Mock.mock({
     id: toAnyString(),
-    timestamp: +Mock.Random.date('T'),
+    // timestamp: +Mock.Random.date('T'),
     author: '@first',
-    reviewer: '@first',
     title: '@title(5, 10)',
-    content_short: 'mock data',
     content: baseContent,
-    forecast: '@float(0, 100, 2, 2)',
     importance: '@integer(1, 3)',
-    'type|1': ['CN', 'US', 'JP', 'EU'],
-    'status|1': ['published', 'draft', 'deleted'],
     display_time: '@datetime',
-    comment_disabled: true,
-    pageviews: '@integer(300, 5000)',
-    image_uri,
-    platforms: ['a-platform']
+    pageviews: '@integer(300, 5000)'
+    // image_uri
   }))
 }
 
 export default [
+  // 列表接口
   {
     url: 'http://mockjs.test.cn/example/list',
     type: 'get',
@@ -51,17 +45,33 @@ export default [
     }
   },
 
+  // 删除接口
   {
     url: 'http://mockjs.test.cn/example/delete',
     type: 'post',
     response: (config: any) => {
-      return {
-        code: '0000',
-        data: '删除成功'
+      const ids = config.body.ids
+      if (!ids) {
+        return {
+          code: '500',
+          message: '请选择需要删除的数据'
+        }
+      } else {
+        let i = List.length
+        while (i--) {
+          if (ids.indexOf(List[i].id) !== -1) {
+            List.splice(i, 1)
+          }
+        }
+        return {
+          code: '0000',
+          data: 'success'
+        }
       }
     }
   },
 
+  // 详情接口
   {
     url: 'http://mockjs.test.cn/example/detail',
     type: 'get',
@@ -78,13 +88,34 @@ export default [
     }
   },
 
+  // 保存接口
   {
     url: 'http://mockjs.test.cn/example/save',
     type: 'post',
     response: (config: any) => {
-      return {
-        code: '0000',
-        data: 'success'
+      const data = config.body
+      if (!data.id) {
+        List = [Object.assign(data, { id: toAnyString(), importance: Number(data.importance) })].concat(List)
+        return {
+          code: '0000',
+          data: 'success'
+        }
+      } else {
+        List.map(item => {
+          if (item.id === data.id) {
+            for (const key in item) {
+              if (key === 'importance') {
+                item[key] = Number(data[key])
+              } else {
+                item[key] = data[key]
+              }
+            }
+          }
+        })
+        return {
+          code: '0000',
+          data: 'success'
+        }
       }
     }
   }

src/components/Dialog/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <el-dialog
+    v-bind="getBindValue"
+    destroy-on-close
+    :close-on-click-modal="false"
+    top="10vh"
+  >
+    <template v-if="slots.title" #title>
+      <slot name="title" />
+    </template>
+
+    <!-- 弹窗内容 -->
+    <el-scrollbar class="com-dialog__content">
+      <slot />
+    </el-scrollbar>
+
+    <template v-if="slots.footer" #footer>
+      <slot name="footer" />
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue'
+export default defineComponent({
+  name: 'Dialog',
+  setup(props, { slots, attrs }) {
+    const getBindValue = computed((): any => {
+      const bindValue = { ...attrs, ...props }
+      return bindValue
+    })
+
+    return {
+      getBindValue,
+      slots
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.com-dialog__content {
+  height: 600px;
+}
+</style>

src/components/Editor/props.ts

@@ -11,7 +11,7 @@ export const editorProps = {
     default: () => {
       return {
         height: 500,
-        zIndex: 500,
+        zIndex: 0,
         placeholder: '请输入文本',
         focus: false,
         onchangeTimeout: 500,

src/components/Table/index.vue

@@ -5,7 +5,8 @@
       <el-table-column
         v-if="selection"
         type="selection"
-        width="55"
+        :reserve-selection="reserveSelection"
+        width="40"
       />
       <template v-for="item in columns">
         <!-- 自定义索引 -->
@@ -85,17 +86,25 @@ export default defineComponent({
     TableColumn
   },
   props: {
+    // 表头
     columns: {
       type: Array as PropType<any[]>,
       default: () => []
     },
+    // 是否多选
     selection: {
       type: Boolean as PropType<boolean>,
       default: false
     },
+    // 是否展示分页
     pagination: {
       type: [Boolean, Object] as PropType<boolean | object>,
       default: false
+    },
+    // 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
+    reserveSelection: {
+      type: Boolean as PropType<boolean>,
+      default: false
     }
   },
   setup(props, { attrs, slots }) {
@@ -137,7 +146,7 @@ export default defineComponent({
       }
     })
 
-    function headerDragend(newWidth: number, oldWidth: number, column: any, event: any) {
+    function headerDragend(newWidth: number, oldWidth: number, column: any) {
       // 不懂为啥无法自动计算宽度，只能手动去计算了。。失望ing，到时候看看能不能优化吧。
       const htmlArr = document.getElementsByClassName(column.id)
       for (const v of htmlArr) {

src/components/index.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue'
-// import Button from '@/components/Button/index.vue'// Button组件
+import Dialog from './Dialog/index.vue'// Dialog组件
 
 export function setupGlobCom(app: App<Element>): void {
-  // app.component('AButton', Button)
+  app.component('ComDialog', Dialog)
 }

src/hooks/useExample.ts

@@ -1,40 +1,88 @@
 // 常用的增删改查 hook
 import { reactive, ref } from 'vue'
+import { ElMessageBox } from 'element-plus'
+import { Message } from '_c/Message'
 
 interface DefalutParams {
-  pageIndex: number
-  pageSize: number
+  pageIndex: number // 页码
+  pageSize: number // 页数
+}
+
+interface DelsParmas {
+  noDataText?: string // 没有选中数据时的提示
+  text?: string // 删除前的提示
+  hiddenVerify?: boolean // 是否隐藏前置判断
 }
 
 export function useExample() {
+  // 请求接口的基本参数
   const defalutParams = reactive<DefalutParams>({
     pageIndex: 1,
     pageSize: 10
   })
-  
+
+  // 多选数据
+  const selectionData = ref<any[]>([])
+
+  // 表格数据
   const tableData = ref<any[]>([])
-  
+
+  // 表格加载状态
   const loading = ref<boolean>(true)
 
+  // 表格总条数
   const total = ref<number>(0)
-  
+
+  // 是否展示弹窗
+  const dialogVisible = ref<boolean>(false)
+
+  // 弹窗标题
+  const title = ref<string>('')
+
+  // 表格展示条目改变时候重置基本参数
   function sizeChange(val: number) {
     loading.value = true
     defalutParams.pageIndex = 1
     defalutParams.pageSize = val
   }
-  
+
+  // 表格分页改变时候重置基本参数
   function currentChange(val: number) {
     loading.value = true
     defalutParams.pageIndex = val
   }
 
+  // 删除多选
+  function delData(callBack: Function, config?: DelsParmas) {
+    if (selectionData.value.length === 0 && !config?.hiddenVerify) {
+      Message.warning(config?.noDataText || '请选择需要删除的数据！')
+      return
+    }
+    ElMessageBox.confirm(config?.text || '此操作将永久删除选中数据, 是否继续?', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }).then(async() => {
+      await callBack()
+    })
+  }
+
+  // 多选变化的时候
+  function handleSelectionChange(selection: any[]) {
+    selectionData.value = selection
+  }
+
   return {
     defalutParams,
     tableData,
+    selectionData,
     loading,
     total,
+    dialogVisible,
+    title,
     sizeChange,
-    currentChange
+    currentChange,
+    delData,
+    handleSelectionChange
   }
 }

src/pages/index/api/modules/example.ts

@@ -170,6 +170,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: 'markdown编辑器'
         }
+      },
+      {
+        path: 'dialog',
+        component: () => import('_p/index/views/components-demo/dialog/index.vue'),
+        name: 'DialogDemo',
+        meta: {
+          title: '弹窗'
+        }
       }
     ]
   },

src/pages/index/router/index.ts

@@ -28,7 +28,7 @@ class App extends VuexModule implements AppState {
   // public fixedTags = true // 是否固定标签栏
   // public fixedNavbar = true // 是否固定navbar
   public fixedHeader = true // 是否固定header
-  public layout = 'Top' // layout布局
+  public layout = 'Classic' // layout布局
   public showBreadcrumb = true // 是否显示面包屑
   public showHamburger = true // 是否显示侧边栏缩收按钮
   public showScreenfull = true // 是否全屏按钮