工单更新

Ben Lin

2024-07-18 7cf58a4d2fff6b9cba9029d4d43ba9744dbef864

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<template>
  <div style="width: 100%">
    <div v-if="$slots.headerTop" style="margin: 5px">
      <slot name="headerTop"></slot>
    </div>
    <div v-if="showSelectionBar" style="margin: 5px">
      <TableSelectionBar :clearSelectedRowKeys="props.clearSelectedRowKeys!" :count="props.count" />
    </div>
    <div class="flex items-center">
      <slot name="tableTitle" v-if="$slots.tableTitle"></slot>
      <TableTitle
        :helpMessage="titleHelpMessage"
        :title="title"
        v-if="!$slots.tableTitle && title"
      />
      <div :class="`${prefixCls}__toolbar`">
        <slot name="toolbar"></slot>
        <Divider type="vertical" v-if="$slots.toolbar && showTableSetting" />
        <TableSettingComponent
          :setting="tableSetting"
          v-if="showTableSetting"
          @columns-change="handleColumnChange"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import type { TableSetting, ColumnChangeParam, TableActionType } from '../types/table';
  import type { PropType } from 'vue';
  import { Divider } from 'ant-design-vue';
  import TableSettingComponent from './settings/index.vue';
  import TableTitle from './TableTitle.vue';
  import { useDesign } from '@/hooks/web/useDesign';
  import TableSelectionBar from '../components/TableSelectionBar.vue';
 
  defineOptions({ name: 'BasicTableHeader' });
 
  const props = defineProps({
    title: {
      type: [Function, String] as PropType<string | ((data) => string)>,
    },
    tableSetting: {
      type: Object as PropType<TableSetting>,
    },
    showTableSetting: {
      type: Boolean,
    },
    titleHelpMessage: {
      type: [String, Array] as PropType<string | string[]>,
      default: '',
    },
    //
    clearSelectedRowKeys: {
      type: Function as PropType<TableActionType['clearSelectedRowKeys']>,
    },
    count: {
      type: Number,
      default: 0,
    },
    showSelectionBar: {
      type: Boolean,
      default: false,
    },
  });
 
  const emit = defineEmits(['columns-change']);
  const { prefixCls } = useDesign('basic-table-header');
  function handleColumnChange(data: ColumnChangeParam[]) {
    emit('columns-change', data);
  }
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-basic-table-header';
 
  .@{prefix-cls} {
    &__toolbar {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: flex-end;
 
      > * {
        margin-right: 8px;
      }
    }
  }
</style>