样式调整：按钮

babel.config.js

@@ -12,7 +12,7 @@ module.exports = {
     [
       '@vue/cli-plugin-babel/preset',
       {
-        useBuiltIns: 'usage',
+        useBuiltIns: 'entry',
         corejs: 3,
         targets: {
           ie: '11'

package.json

@@ -8,7 +8,6 @@
     "build": "vue-cli-service build --mode production"
   },
   "dependencies": {
-    "@antv/g6": "^5.0.44",
     "@babel/plugin-transform-runtime": "^7.24.6",
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.23.9",

src/components/AutoComponents/ECharts/eCharts.js

@@ -2,7 +2,7 @@
 // 引入 ECharts 核心模块，核心模块提供了 ECharts 使用必须要的接口。
 import * as ECharts from 'echarts/core'
 // 引入柱状图图表，图表后缀都为 Chart
-import { BarChart, LineChart } from 'echarts/charts'
+import { BarChart, LineChart, TreeChart } from 'echarts/charts'
 // 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
 import {
   TitleComponent,
@@ -29,6 +29,7 @@ class EChartsComponent {
         TransformComponent,
         BarChart,
         LineChart,
+        TreeChart,
         LabelLayout,
         UniversalTransition,
         LegendComponent,
@@ -38,25 +39,14 @@ class EChartsComponent {
     this.el = ECharts.init(el)
   }
 
+  getEl () {
+    return this.el
+  }
+
   // 设置属性
   setOption (options) {
     this.el.setOption(options)
   }
-
-  // 柱状属性
-  setBarOption (options) {
-
-  }
-
-  // 折线属性
-  setLineOption (options) {
-
-  }
-
-  // 饼图属性
-  setPieOption (options) {
-
-  }
 }
 
 export default EChartsComponent

src/components/AutoComponents/ECharts/index.vue

@@ -18,19 +18,19 @@ export default {
   },
   beforeDestroy () {
     window.removeEventListener('resize', this.onResize)
-    this.chart.el.dispose()
+    this.chart.getEl().dispose()
   },
   methods: {
-    onInit () {
+    onInit (type) {
       // 注册必须的组件
-      this.chart = new EChartsComponent(this.$refs[this.id])
+      this.chart = new EChartsComponent(this.$refs[this.id], type)
       this.$refs[this.id].style.width = this.$refs[this.id].offsetWidth + 'px'
       this.$refs[this.id].style.height = this.$refs[this.id].offsetHeight + 'px'
       window.addEventListener('resize', this.onResize)
-      return this.chart
+      return this.chart.getEl()
     },
     onResize () {
-      this.chart.el.resize()
+      this.chart.getEl().resize()
     }
   }
 }

src/components/AutoComponents/MTable/index.vue

@@ -1,8 +1,11 @@
 <template>
   <m-card :shadow="shadow">
-    <template v-if="cardTitle" slot="header">
-      <span>{{ cardTitle }}</span>
-    </template>
+    <div slot="header" class="clearfix">
+      <span>{{ cardTitle ?? $route.meta?.title }}</span>
+      <div class="tools">
+        <slot name="card-tools"></slot>
+      </div>
+    </div>
     <slot name="header"></slot>
     <el-table
       ref="table"
@@ -100,5 +103,25 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+.clearfix:after {
+  clear: both
+}
+$height: 60px;
+.tools {
+  float: right;
+  display: flex;
+  align-items: center;
+  height: $height;
+}
+::v-deep .el-card__header {
+  padding-top: 0;
+  padding-bottom: 0;
+  height: $height;
+  line-height: $height;
+}
 </style>

src/utils/antvG6.js

@@ -1,140 +0,0 @@
-// import { Rect } from '@antv/g'
-import {
-  Badge,
-  // Label,
-  // idOf,
-  CommonEvent,
-  BaseBehavior,
-  // BaseNode
-  Circle
-  // treeToGraphData
-} from '@antv/g6'
-
-/**
- * 自定义树结构展开/收起
- */
-export class CollapseExpandTree extends BaseBehavior {
-  constructor (context, options) {
-    super(context, options)
-    this.bindEvents()
-  }
-
-  update (options) {
-    this.unbindEvents()
-    super.update(options)
-    this.bindEvents()
-  }
-
-  bindEvents () {
-    const { graph } = this.context
-    graph.on('collapse-expand', this.onCollapseExpand)
-  }
-
-  unbindEvents () {
-    const { graph } = this.context
-    graph.off('collapse-expand', this.onCollapseExpand)
-  }
-
-  status = 'idle';
-
-  onCollapseExpand = async (event) => {
-    this.status = 'busy'
-    const { id, collapsed } = event
-    const { graph } = this.context
-    await graph.frontElement(id)
-    if (collapsed) await graph.collapseElement(id)
-    else await graph.expandElement(id)
-    this.status = 'idle'
-  }
-}
-
-export class MindMapNode extends Circle {
-  static defaultStyleProps = {
-    showBtn: true
-  };
-
-  constructor (options) {
-    Object.assign(options.style, MindMapNode.defaultStyleProps)
-    super(options)
-  }
-
-  // 获取子数据
-  get childrenData () {
-    // 调用上下文中的model对象的getChildrenData方法，传入当前对象的id，返回子数据
-    return this.context.model.getChildrenData(this.id)
-  }
-
-  status = true
-
-  drawCollapseShape (attributes, container) {
-    const nodes = this.context.graph.getNodeData(this.id)
-    if (!nodes.children?.length && !nodes.hasChildren) {
-      return
-    }
-    const btn = this.upsert('collapse-expand', Badge, {
-      backgroundFill: '#ff650e',
-      backgroundHeight: 20,
-      backgroundWidth: 20,
-      // lineHeight: 20,
-      cursor: 'pointer',
-      fill: '#fff',
-      fontSize: 20,
-      text: attributes.collapsed || nodes.hasChildren ? '+' : '-',
-      textAlign: 'center',
-      visibility: 'visible',
-      x: 20,
-      y: 0
-    }, container)
-
-    this.forwardEvent(btn, CommonEvent.CLICK, async (event) => {
-      event.stopPropagation()
-      if (!this.status || event.button !== 0) {
-        return
-      }
-      const parent = this.context.graph.getNodeData(this.id)
-      if (parent.hasChildren) {
-        await this.addChildrenData(parent)
-        return
-      }
-      this.status = false
-      this.context.graph.emit('collapse-expand', {
-        id: this.id,
-        collapsed: !attributes.collapsed
-      })
-      setTimeout(() => {
-        this.status = true
-      }, 500)
-    })
-  }
-
-  async addChildrenData (parent) {
-    this.status = false
-    const { graph } = this.context
-    // 展开关闭
-    const data = await parent.getChildren(this.id)
-    if (!data) {
-      return
-    }
-    graph.addNodeData(data.nodes)
-    graph.addEdgeData(data.edges)
-    graph.updateNodeData([{
-      id: this.id,
-      hasChildren: false,
-      children: [...data.nodes.map(e => e.id)]
-    }])
-    await graph.render()
-    this.status = true
-  }
-
-  forwardEvent (target, type, listener) {
-    if (target && !Reflect.has(target, '__bind__')) {
-      Reflect.set(target, '__bind__', true)
-      target.addEventListener(type, listener)
-    }
-  }
-
-  render (attributes = { collapsed: true }, container = this) {
-    super.render(attributes, container)
-    this.drawCollapseShape(attributes, container)
-  }
-}

src/views/bonus/allocation/index.vue

@@ -2,8 +2,8 @@
   <div class="white pa-3">
     <m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="onSearch"></m-search>
     <BonusTable ref="bonusTableRefs" :filter-header="auditStatus !== 0 && auditStatus !== 1 ? [] : ['actions']">
-      <template #header="{ items }">
-        <div class="content mb-3">
+      <template #card-tools="{ items }">
+        <div class="content">
           <div>
             <template v-if="auditStatusList[auditStatus]">
               审批状态：

src/views/bonus/components/bonusTable.vue

@@ -10,6 +10,9 @@
     v-bind="$attrs"
     @page-change="onPageChange"
   >
+    <template #card-tools>
+      <slot name="card-tools" :items="items"></slot>
+    </template>
     <template #header>
       <slot name="header" :items="items"></slot>
     </template>

src/views/humanResources/organizationStructure/index.vue

@@ -1,16 +1,8 @@
 <template>
   <div class="fullBox white pa-3 relative" ref="boxRef">
-    <!-- <div v-if="isIE">
-      IE浏览器暂不支持浏览，请前往其他浏览器获取更好体验
-    </div> -->
-    <!-- <template v-else> -->
-      <div ref="graphRef" v-loading="loading" class="fullBox"></div>
+    <e-charts ref="eCharts" class="fullBox"></e-charts>
       <div class="btnBox pa-1">
-        <!-- <el-upload class="el-button pa-0" action="#" :show-file-list="false" :http-request="onImport">
-          <m-button type="orange" icon="el-icon-upload2" size="small" :loading="importLoading">导入</m-button>
-        </el-upload> -->
         <m-button type="orange" icon="el-icon-download" size="small" :loading="exportLoading" @click="onExport">导出</m-button>
-        <!-- <m-button type="orange" icon="el-icon-download" size="small" :loading="downloadLoading" @click="onDownload">模板下载</m-button> -->
         <m-button type="orange" icon="el-icon-plus" size="small" @click="onAdd">新增机构</m-button>
       </div>
       <div ref="contextMenuRefs" class="contextMenu">
@@ -27,31 +19,16 @@
       </div>
       <OrganizationEdit ref="organizationEditRefs" @refresh="onRefresh"></OrganizationEdit>
       <OrganizationAdd ref="organizationAddRefs" @refresh="onRefresh"></OrganizationAdd>
-    <!-- </template> -->
   </div>
 </template>
 
 <script>
 import OrganizationEdit from './organizationEdit.vue'
 import OrganizationAdd from './organizationAdd.vue'
-import {
-  CollapseExpandTree,
-  MindMapNode
-} from '@/utils/antvG6'
-import {
-  isIE
-} from '@/utils'
-import {
-  Graph,
-  register,
-  NodeEvent,
-  CommonEvent,
-  CanvasEvent,
-  ExtensionCategory
-} from '@antv/g6'
+
 import {
   getOrganizationAtlas,
-  getOrganizationAtlasEmployee,
+  // getOrganizationAtlasEmployee,
   importOrganization,
   exportOrganization,
   downloadOrganization,
@@ -63,28 +40,6 @@ import {
   download
 } from '@/utils/elementUploadAndDownload'
 
-const NODE_TYPE = {
-  type: 'MindMapNode',
-  style: function (d) {
-    return {
-      fill: '#ff650e',
-      size: 15,
-      label: true,
-      labelFontSize: 14,
-      labelLineHeight: 20,
-      labelPlacement: 'right',
-      labelPadding: [10],
-      labelText: d.name,
-      labelOffsetX: d.depth === 3 ? 20 : 50,
-      labelBackground: true,
-      labelBackgroundFill: '#EFF0F0',
-      labelBackgroundRadius: 8,
-      port: true,
-      ports: [{ placement: 'right' }, { placement: 'left' }]
-    }
-  }
-}
-
 export default {
   name: 'organization-structure',
   components: {
@@ -93,7 +48,6 @@ export default {
   },
   data () {
     return {
-      isIE: isIE(),
       menus: [
         { label: '编辑', prop: 'edit' },
         { label: '删除', prop: 'delete' }
@@ -103,55 +57,73 @@ export default {
       importLoading: false,
       exportLoading: false,
       downloadLoading: false,
-      graph: null
+      graph: null,
+      seriesData: {}
     }
   },
   computed: {
-    ...mapGetters(['organizationTree'])
-  },
-  async mounted () {
-    // if (isIE()) {
-    //   return
-    // }
-    register(ExtensionCategory.BEHAVIOR, 'collapse-expand-tree', CollapseExpandTree)
-    register(ExtensionCategory.NODE, 'MindMapNode', MindMapNode)
-    const graphData = await this.onInit()
-    this.$nextTick(() => {
-      this.initGraph(graphData)
-      this.$refs.boxRef.addEventListener('contextmenu', (e) => {
-        e.preventDefault()
-      })
-    })
-  },
-  beforeDestroy () {
-    // if (isIE()) {
-    //   return
-    // }
-    if (this.graph) {
-      this.graph.off()
+    ...mapGetters(['organizationTree']),
+    option () {
+      return {
+        series: [
+          {
+            type: 'tree',
+            data: [this.seriesData],
+            top: '1%',
+            left: '7%',
+            bottom: '1%',
+            right: '20%',
+            symbolSize: 15,
+            label: {
+              position: 'left',
+              verticalAlign: 'middle',
+              align: 'right',
+              fontSize: 16
+            },
+            leaves: {
+              label: {
+                position: 'right',
+                verticalAlign: 'middle',
+                align: 'left'
+              }
+            },
+            emphasis: {
+              focus: 'descendant'
+            },
+            initialTreeDepth: 1,
+            roam: true,
+            expandAndCollapse: true,
+            animationDuration: 550,
+            animationDurationUpdate: 750
+          }
+        ]
+      }
     }
-    this.$refs.boxRef.removeEventListener('contextmenu', (e) => {
-      e.preventDefault()
+  },
+  mounted () {
+    this.$nextTick(async () => {
+      this.graph = this.$refs.eCharts.onInit()
+      console.log(211, this.graph)
+      this.graph.showLoading()
+      const { data } = await this.onInit()
+      this.seriesData = data
+
+      this.graph.setOption(this.option)
+      this.graph.hideLoading()
     })
+
+    // this.$nextTick(() => {
+    //   this.$refs.boxRef.addEventListener('contextmenu', (e) => {
+    //     e.preventDefault()
+    //   })
+    // })
   },
+  // beforeDestroy () {
+  //   this.$refs.boxRef.removeEventListener('contextmenu', (e) => {
+  //     e.preventDefault()
+  //   })
+  // },
   methods: {
-    async initData () {
-      await this.$store.dispatch('system/getOrganizationTree')
-      const data = await this.onInit()
-      return data
-    },
-    async onRefresh () {
-      const data = await this.initData()
-      this.renderGraph(data)
-    },
-    drawGraph (data) {
-      this.graph.setData(data)
-      this.graph.draw()
-    },
-    async renderGraph (data) {
-      this.graph.setData(data)
-      await this.graph.render()
-    },
     async onInit () {
       this.loading = true
       try {
@@ -174,134 +146,7 @@ export default {
         this.loading = false
       }
     },
-    async initGraph (data) {
-      this.graph = new Graph({
-        container: this.$refs.graphRef,
-        width: this.$refs.graphRef.clientWidth,
-        height: this.$refs.graphRef.clientHeight,
-        data,
-        autoFit: 'center',
-        autoResize: false,
-        enable: false,
-        plugins: [
-          // 'minimap',
-          // 'contextmenu',
-          {
-            className: 'toolbar',
-            position: 'right-top',
-            type: 'toolbar',
-            getItems: () => [
-              { id: 'zoom-in', value: 'zoom-in' },
-              { id: 'zoom-out', value: 'zoom-out' },
-              { id: 'auto-fit', value: 'auto-fit' }
-            ],
-            onClick: (value) => {
-              const zoom = this.graph.getZoom()
-              // 处理按钮点击事件
-              if (value === 'zoom-in') {
-                if (zoom > 2) {
-                  return
-                }
-                this.graph.zoomTo(zoom + 0.1)
-              } else if (value === 'zoom-out') {
-                if (zoom < 0.5) {
-                  return
-                }
-                this.graph.zoomTo(zoom - 0.1)
-              } else if (value === 'auto-fit') {
-                this.graph.fitView()
-              }
-            }
-          }
-        ],
-        behaviors: [
-          'drag-canvas',
-          'scroll-canvas',
-          'drag-element',
-          'collapse-expand-tree'
-        ],
-        animation: false,
-        layout: {
-          type: 'compact-box',
-          getHeight: function getHeight () {
-            return 32
-          },
-          getWidth: function getWidth () {
-            return 32
-          },
-          getVGap: function getVGap (e) {
-            return 8
-          },
-          getHGap: function getHGap (e) {
-            return 150
-          },
-          radial: false
-        },
-        node: NODE_TYPE,
-        edge: {
-          type: 'cubic-horizontal',
-          style: function (d) {
-            return {
-              endArrow: true,
-              lineWidth: 1,
-              stroke: '#aaa'
-            }
-          }
-        }
-      })
-      this.onGraphHandles(this.graph)
-      await this.graph.render()
-      this.onSetClose(data.nodes)
-    },
-    onGraphHandles (graph) {
-      const contextMenu = this.$refs.contextMenuRefs
-      const { width, height } = this.$refs.boxRef.getBoundingClientRect()
-      const { left, top } = this.$refs.boxRef.getBoundingClientRect()
-      const content = {
-        x: 0,
-        y: 0,
-        width,
-        height
-      }
 
-      const contextMenuClick = (e) => {
-        const { target } = e // 获取被点击节点的 ID
-        this.nodes = graph.getNodeData(target.id)
-        const { x, y } = e.client
-        content.x = x
-        content.y = y
-        contextMenu.style.left = x - left + 'px'
-        contextMenu.style.top = y - top + 'px'
-        contextMenu.style.display = 'block'
-      }
-      const hideContextMenu = () => {
-        contextMenu.style.display = 'none'
-      }
-      graph
-        .on(NodeEvent.CONTEXT_MENU, contextMenuClick)
-        .on(NodeEvent.CLICK, contextMenuClick)
-        .on(CommonEvent.WHEEL, hideContextMenu) // 鼠标滚动
-        .on(CanvasEvent.CONTEXT_MENU, hideContextMenu) // 画布空白右键
-        // .on(CanvasEvent.CONTEXT_MENU, e => {
-        //   e.preventDefault()
-        //   document.body.style.cursor = 'default'
-        //   hideContextMenu()
-        // }) // 画布空白右键
-        .on(CanvasEvent.CLICK, hideContextMenu) // 画布空白点击
-        .on(CanvasEvent.DRAG_START, hideContextMenu) // 画布拖拽
-        .on(NodeEvent.DRAG_START, hideContextMenu) // 节点拖拽
-    },
-    // 设置默认展示格式
-    onSetClose (nodes) {
-      // 默认展示第一层
-      nodes.forEach(e => {
-        if (e.depth === 1) {
-          this.graph.collapseElement(e.id)
-        }
-      })
-      // 关闭之后重新排版计算
-      this.graph.render()
-    },
     async onDelete (nodes) {
       this.$confirm('是否删除该项', '提示').then(async () => {
         try {
@@ -316,31 +161,7 @@ export default {
         }
       }).catch(_ => {})
     },
-    async getChildren (organizationNo) {
-      try {
-        const { data } = await getOrganizationAtlasEmployee({ organizationNo })
-        return {
-          nodes: data.nodes.map(e => {
-            const { labelOffsetX, ...obj } = NODE_TYPE
-            return {
-              id: e.id,
-              name: e.text,
-              hasChildren: false,
-              depth: 3,
-              ...obj
-            }
-          }),
-          edges: data.lines.map(e => {
-            return {
-              source: e.from,
-              target: e.to
-            }
-          })
-        }
-      } catch (error) {
-        this.$message.error(error)
-      }
-    },
+    onRefresh () {},
     onMenuClick (prop) {
       if (prop === 'edit') {
         this.editTag(this.nodes)
@@ -388,7 +209,6 @@ export default {
   width: 200px;
 }
 .fullBox {
-  display: -ms-grid;  /* IE10/11 */
   width: 100%;
   height: 100%;
   box-sizing: border-box;

src/views/humanResources/panorama/panoramaDetails.vue

@@ -104,7 +104,7 @@ export default {
         this.$message.error('尚未配置实例化方法')
         return
       }
-      this.$refs.panorama.onInitPanorama(this.$route.query.organizationNo, this.$route.query.employeeNo)
+      this.$refs.panorama.onInitPanorama(this.$route.query.organizationNo, this.$route.query.employeeNo, this.menuPath.at(-1).label)
     },
     filterRoute (items) {
       return items.filter(item => {

src/views/humanResources/payroll/index.vue

@@ -1,12 +1,8 @@
 <template>
   <div class="white" :class="{ 'pa-3': !$attrs.panorama }">
-    <m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="onSearch">
-      <template #button v-if="!$attrs.panorama">
-        <m-button type="orange" icon="el-icon-download" :loading="exportLoading" @click="onExport">导出报表</m-button>
-      </template>
-    </m-search>
+    <m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="onSearch"></m-search>
     <m-table
-      card-title="员工工资单"
+      :cardTitle="cardTitle || undefined"
       :items="items"
       :headers="headers"
       :loading="loading"
@@ -15,6 +11,9 @@
       :page-current="pageInfo.current"
       @page-change="onPageChange"
     >
+      <template #card-tools>
+        <m-button type="orange" icon="el-icon-download" size="small" :loading="exportLoading" @click="onExport">导出报表</m-button>
+      </template>
     </m-table>
   </div>
 </template>
@@ -41,7 +40,8 @@ export default {
       pageInfo: {
         current: 1,
         size: 10
-      }
+      },
+      cardTitle: null // 用于全景卡片名称
     }
   },
   computed: {
@@ -72,7 +72,8 @@ export default {
   },
   methods: {
     // 执行全景初始化操作
-    onInitPanorama (organizationNo, employeeNo) {
+    onInitPanorama (organizationNo, employeeNo, title) {
+      this.cardTitle = title
       if (employeeNo) {
         this.searchValues = {
           month: null,

src/views/humanResources/roster/index.vue

@@ -1,17 +1,8 @@
 <template>
   <div class="white" :class="{ 'pa-3': !$attrs.panorama }">
-    <m-search v-if="!$attrs.panorama" :items="searchItems" v-model="searchValues" class="mb-3" @search="onSearch">
-      <template #button>
-        <m-button type="orange" icon="el-icon-plus" @click="onAdd">新增</m-button>
-        <el-upload class="el-button pa-0" action="#" :show-file-list="false" :http-request="onImport">
-          <m-button type="orange" icon="el-icon-upload2" :loading="importLoading">上传</m-button>
-        </el-upload>
-        <m-button type="orange" icon="el-icon-download" @click="onExport" :loading="exportLoading">导出</m-button>
-        <m-button type="orange" icon="el-icon-download" @click="onDownload" :loading="downloadLoading">下载模板</m-button>
-      </template>
-    </m-search>
+    <m-search v-if="!$attrs.panorama" :items="searchItems" v-model="searchValues" class="mb-3" @search="onSearch"></m-search>
     <m-table
-      card-title="员工花名册"
+      :cardTitle="cardTitle || undefined"
       v-loading="loading"
       row-key="id"
       :items="items"
@@ -22,6 +13,14 @@
       :default-sort="{ prop: 'sort', order: 'ascending' }"
       @page-change="pageChange"
     >
+      <template #card-tools v-if="!$attrs.panorama">
+        <m-button type="orange" size="small" icon="el-icon-plus" @click="onAdd">新增</m-button>
+        <el-upload class="el-button pa-0" action="#" :show-file-list="false" :http-request="onImport">
+          <m-button type="orange" size="small" icon="el-icon-upload2" :loading="importLoading">上传</m-button>
+        </el-upload>
+        <m-button type="orange" size="small" icon="el-icon-download" @click="onExport" :loading="exportLoading">导出</m-button>
+        <m-button type="orange" size="small" icon="el-icon-download" @click="onDownload" :loading="downloadLoading">下载模板</m-button>
+      </template>
       <template #actions="{ row }">
         <m-button text type="primary" @click="onEdit(row)">编辑</m-button>
         <m-button text type="danger" @click="onDelete(row)">删除</m-button>
@@ -78,7 +77,8 @@ export default {
         size: 10,
         current: 1
       },
-      total: 0
+      total: 0,
+      cardTitle: null // 用于全景视图显示
     }
   },
   computed: {
@@ -122,7 +122,8 @@ export default {
   },
   methods: {
     // 执行全景初始化操作
-    onInitPanorama (organizationNo, employeeNo) {
+    onInitPanorama (organizationNo, employeeNo, title) {
+      this.cardTitle = title
       this.panorama = { organizationNo, employeeNo }
       if (employeeNo) {
         this.searchValues = {

src/views/humanResources/welfare/components/ListTemplate.vue

@@ -6,6 +6,7 @@
       </template>
     </m-search>
     <m-table
+      :card-title="cardTitle"
       :items="items"
       :headers="headers"
       :total="total"
@@ -14,6 +15,9 @@
       v-bind="$attrs"
       @page-change="onPageChange"
     >
+      <template #card-tools>
+        <slot name="tool"></slot>
+      </template>
       <template #title="{ row }">
         {{ row.subsidyPersonnelCategory?.title ?? '找不到该项福利' }}
       </template>
@@ -31,6 +35,10 @@ import {
 export default {
   name: 'human-resources-welfare-list',
   props: {
+    cardTitle: {
+      type: String,
+      default: '福利列表'
+    },
     showSearch: {
       type: Boolean,
       default: true

src/views/humanResources/welfare/index.vue

@@ -7,7 +7,7 @@
         :label="item.label"
         :name="item.name"
       >
-        <component :is="item.component" :ref="item.name" @hook:mounted="onComponentMounted" @history="onHistory"></component>
+        <component :is="item.component" :ref="item.name" :label="item.label" @hook:mounted="onComponentMounted" @history="onHistory"></component>
       </el-tab-pane>
     </el-tabs>
     <DrawerHistory ref="drawerHistoryRefs" :get-page="getPage">

src/views/humanResources/welfare/welfareHistory/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ListTemplate ref="listTemplateRefs" history>
+    <ListTemplate ref="listTemplateRefs" history :card-title="$attrs.label">
       <template #actions="{ row }">
         <m-button type="primary" text @click="$emit('history', row)" size="small">查看配置规则</m-button>
       </template>

src/views/humanResources/welfare/welfareList/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <ListTemplate ref="listTemplateRefs">
-      <template #button>
-        <m-button type="orange" icon="el-icon-plus" @click="onAdd">新增</m-button>
+    <ListTemplate ref="listTemplateRefs" :card-title="$attrs.label">
+      <template #tool>
+        <m-button type="orange" icon="el-icon-plus" size="small" @click="onAdd">新增</m-button>
       </template>
       <template #actions="{ row }">
         <m-button text type="primary" size="small" @click="onEdit(row)">编辑</m-button>

src/views/salary/calculate/index.vue

@@ -7,7 +7,7 @@
         :label="item.label"
         :name="item.name"
       >
-        <component :is="item.component" :ref="item.name" @hook:mounted="onComponentMounted"></component>
+        <component :is="item.component" :ref="item.name" :label="item.label" @hook:mounted="onComponentMounted"></component>
       </el-tab-pane>
     </el-tabs>
   </div>

src/views/salary/calculate/salaryCalculateUpload/index.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="white">
-    <m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="onSearch">
-      <template #button>
-        <m-button size="small" type="orange" icon="el-icon-finished" :loading="submitLoading" @click="onSave">提交待上传文件</m-button>
-        <m-button size="small" type="orange" icon="el-icon-s-promotion" :loading="runLoading" @click="onRun">执行计算</m-button>
-      </template>
-    </m-search>
+    <m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="onSearch"></m-search>
     <m-table
+      :card-title="$attrs.label"
       :headers="headers"
       :items="items"
       v-loading="loading"
     >
+      <template #card-tools>
+        <m-button size="small" type="orange" icon="el-icon-finished" :loading="submitLoading" @click="onSave">提交待上传文件</m-button>
+        <m-button size="small" type="orange" icon="el-icon-s-promotion" :loading="runLoading" @click="onRun">执行计算</m-button>
+      </template>
       <!-- <template #header>
         <div class="header">
           <m-button size="small" type="primary" icon="el-icon-finished" :loading="submitLoading" @click="onSave">提交当前临时文件</m-button>

src/views/salary/solution/components/ListTemplate.vue

@@ -6,6 +6,7 @@
       </template>
     </m-search>
     <m-table
+      :card-title="cardTitle"
       :items="items"
       :headers="headers"
       :total="total"
@@ -14,6 +15,9 @@
       v-bind="$attrs"
       @page-change="onPageChange"
     >
+      <template #card-tools>
+        <slot name="tool"></slot>
+      </template>
       <template #actions="{ row }">
         <slot name="actions" :row="row"></slot>
       </template>
@@ -28,6 +32,7 @@ import {
 export default {
   name: 'salary-solution-list',
   props: {
+    cardTitle: String,
     showSearch: {
       type: Boolean,
       default: true

src/views/salary/solution/index.vue

@@ -7,7 +7,7 @@
         :label="item.label"
         :name="item.name"
       >
-        <component :is="item.component" :ref="item.name" @hook:mounted="onComponentMounted" @history="onHistory"></component>
+        <component :is="item.component" :ref="item.name" :label="item.label" @hook:mounted="onComponentMounted" @history="onHistory"></component>
       </el-tab-pane>
     </el-tabs>
     <DrawerHistory ref="drawerHistoryRefs" :get-page="getPage">

src/views/salary/solution/salarySolution/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <ListTemplate ref="listTemplateRefs">
-      <template #button>
-        <m-button type="orange" icon="el-icon-plus" @click="onAdd">新增</m-button>
+    <ListTemplate ref="listTemplateRefs" :card-title="$attrs.label">
+      <template #tool>
+        <m-button type="orange" size="small" icon="el-icon-plus" @click="onAdd">新增</m-button>
       </template>
       <template #actions="{ row }">
         <m-button text type="primary" size="small" @click="onEdit(row)">编辑</m-button>

src/views/salary/solution/salarySolutionHistory/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ListTemplate ref="listTemplateRefs" history>
+    <ListTemplate ref="listTemplateRefs" history :card-title="$attrs.label">
       <template #actions="{ row }">
         <m-button type="primary" text @click="$emit('history', row)" size="small">查看配置规则</m-button>
       </template>

src/views/salary/solution/salarySolutionParameter/index.vue

@@ -1,11 +1,8 @@
 <template>
   <div>
-    <m-search class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch">
-      <template #button>
-        <m-button type="orange" icon="el-icon-plus" @click="onAdd">新增</m-button>
-      </template>
-    </m-search>
+    <m-search class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
     <m-table
+      :card-title="$attrs.label"
       v-loading="loading"
       row-key="calculateConfigurationId"
       :items="items"
@@ -15,6 +12,9 @@
       :total="total"
       @page-change="onPageChange"
     >
+      <template #card-tools>
+        <m-button type="orange" size="small" icon="el-icon-plus" @click="onAdd">新增</m-button>
+      </template>
       <template #actions="{ row }">
         <m-button text type="primary" @click="onEdit(row)" size="small">编辑</m-button>
         <m-button text type="danger" @click="onDelete(row)" size="small">删除</m-button>

src/views/system/menu/index.vue

@@ -10,8 +10,7 @@
       :total="total"
       :default-sort="{ prop: 'sort', order: 'ascending' }"
     >
-      <template #actions-header>
-        操作
+      <template #card-tools>
         <m-button class="ml-3" type="orange" icon="el-icon-plus" size="small" @click="onAdd">
           新增
         </m-button>

src/views/system/role/index.vue

@@ -1,12 +1,6 @@
 <template>
   <div class="pa-3 white">
-    <m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="search">
-      <template #button>
-        <m-button type="orange" icon="el-icon-plus" @click="onAdd">
-          新增
-        </m-button>
-      </template>
-    </m-search>
+    <m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="search"></m-search>
     <MTable
       v-loading="loading"
       :items="items"
@@ -16,6 +10,9 @@
       :total="total"
       @page-change="handlePageChange"
     >
+      <template #card-tools>
+        <m-button type="orange" size="small" icon="el-icon-plus" @click="onAdd">新增</m-button>
+      </template>
       <template #createTime="scope">
         {{ dateFormat(scope.row.createTime) }}
       </template>

src/views/system/user/index.vue

@@ -1,12 +1,6 @@
 <template>
   <div class="pa-3 white">
-    <m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="search">
-      <template #button>
-        <m-button type="orange" icon="el-icon-plus" @click="onAdd">
-          新增
-        </m-button>
-      </template>
-    </m-search>
+    <m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="search"></m-search>
     <MTable
       v-loading="loading"
       :items="items"
@@ -16,6 +10,9 @@
       :total="total"
       @page-change="handlePageChange"
     >
+      <template #card-tools>
+        <m-button type="orange" size="small" icon="el-icon-plus" @click="onAdd">新增</m-button>
+      </template>
       <template #createdTime="scope">
         {{ dateFormat(scope.row.createdTime) }}
       </template>

src/views/system/workflow/index.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="pa-3 white">
-    <m-search class="mb-3" :items="searchItems" v-model="searchValue" @search="search">
-      <template #button>
-        <m-button type="orange" icon="el-icon-plus" @click="onAdd">新增</m-button>
-      </template>
-    </m-search>
+    <m-search class="mb-3" :items="searchItems" v-model="searchValue" @search="search"></m-search>
     <m-table
       v-loading="loading"
       :headers="headers"
@@ -13,6 +9,9 @@
       @page-change="paginationChange"
       @sort-change="onSortChange"
     >
+      <template #card-tools>
+        <m-button type="orange" size="small" icon="el-icon-plus" @click="onAdd">新增</m-button>
+      </template>
       <template #actions="{ row }">
         <m-button type="primary" text @click="getDetails(row, 'workflowEditRefs')">编辑</m-button>
         <m-button type="primary" text @click="getDetails(row, 'workflowApprovedRefs')">审批配置</m-button>

vue.config.js

@@ -81,7 +81,9 @@ module.exports = defineConfig({
     })
   },
   // babel-loader 是否处理 node_modules 中的依赖包，处理哪些依赖包，参数类型: boolean | Array<string | RegExp>
-  transpileDependencies: true,
+  transpileDependencies: [
+    'axios'
+  ],
   // 移除console
   terser: {
     terserOptions: {