1. <template>
    2.   <div class="common-project-container">
    3.     <div class="tools-line">
    4.       <div class="tools-line-left" v-if="showListAndCard">
    5.         <a-select
    6.           label-in-value
    7.           :default-value="{ key: 'list' }"
    8.           style="width: 80px"
    9.           @change="handleChange"
    10.         >
    11.           <a-select-option value="list">列表</a-select-option>
    12.           <a-select-option value="card">卡片</a-select-option>
    13.         </a-select>
    14.       </div>
    15.       <div class="tools-line-left">
    16.         <slot name="toolLeft"></slot>
    17.       </div>
    18.       <a-space>
    19.         <search-content
    20.           v-if="isSearch"
    21.           ref="searchContentRef"
    22.           style="margin: 0 10px"
    23.           v-bind="searchContentObj"
    24.           @searchdata="handleToolSearch"
    25.           :UNTASK="UNTASK"
    26.           :simpleModel="simpleModel"
    27.           :timeInputDefault="timeInputDefault"
    28.         ></search-content>
    29.         <select-content
    30.           v-if="isSelectContent"
    31.           v-bind="selectContentObj"
    32.           @getSelectData="getSelectData"
    33.         ></select-content>
    34.         <a-button
    35.           v-if="buttonInfo.isButton"
    36.           @click="buttonInfo.btnClick"
    37.           type="primary"
    38.           >新建</a-button
    39.         >
    40.       </a-space>
    41.     </div>
    42.     <slot name="alert"></slot>
    43.     <a-table ref="innerTable" v-bind="$props" v-on="$listeners">
    44.       <template
    45.         slot-scope="text, record, index"
    46.         :slot="slot"
    47.         v-for="slot in Object.keys($scopedSlots).filter(
    48.           item => item != 'alert'
    49.         )"
    50.       >
    51.         <!-- v-for="slot in Object.keys($scopedSlots).filter(key => key !== 'expandedRowRender')" -->
    52.         <slot :name="slot" v-bind="{ text, record, index }"></slot>
    53.       </template>
    54.     </a-table>
    55.     <card-table v-bind="$props" v-if="showListAndCard"></card-table>
    56.   </div>
    57. </template>
    59. <script>
    60. //这里包含了三个部分，search，table主体，列设置，将三者包装成为了一个组件，可分开使用。
    61. import { Table } from 'ant-design-vue'
    62. import SelectContent from '@/common/SelectContent'
    63. import SearchContent from '@/common/searchcontent/index'
    64. import CardTable from '@/common/cardtable'
    66. export default {
    67.   inheritAttrs: false,
    68.   components: {
    69.     SelectContent,
    70.     SearchContent,
    71.     CardTable
    72.   },
    73.   props: {
    74.     ...Table.props,
    75.     selectContentObj: Object,
    76.     searchContentObj: Object,
    77.     buttonInfo: {
    78.       type: Object,
    79.       default() {
    80.         return {
    81.           isButton: false,
    82.           btnClick() {}
    83.         }
    84.       }
    85.     },
    86.     isSelectContent: {
    87.       type: Boolean,
    88.       default() {
    89.         return true
    90.       }
    91.     },
    92.     isSearch: {
    93.       type: Boolean,
    94.       default() {
    95.         return true
    96.       }
    97.     },
    98.     showListAndCard: {
    99.       type: Boolean,
    100.       default() {
    101.         return false
    102.       }
    103.     },
    104.     UNTASK: {
    105.       type: Boolean,
    106.       default: true
    107.     },
    108.     simpleModel: {
    109.       type: Boolean,
    110.       default: false
    111.     },
    112.     timeInputDefault:{
    113.       type: Array,
    114.       default: function () {
    115.         return []
    116.       }
    117.     }
    118.   },
    119.   data() {
    120.     return {
    121.       slotNode: null,
    122.       scopedSlots: this.$scopedSlots,
    123.       viewFlag: false
    124.     }
    125.   },
    126.   methods: {
    127.     handleToolSearch(value, complexSearch) {
    128.       this.searchContentObj.handleToolSearch(value, complexSearch)
    129.     },
    130.     getSelectData(value) {
    131.       this.selectContentObj.getSelectData(value)
    132.     },
    133.     resetFilterSearchContent() {
    134.       this.$refs.searchContentRef.resetSearch()
    135.     },
    136.     /**
    137.      * 改变展示视图 卡片/列表
    138.      */
    139.     handleChange(value) {}
    140.   },
    141.   beforeCreate() {},
    142.   created() {},
    143.   mounted() {}
    144. }
    145. </script>
    147. <style lang="scss" scoped>
    148. .common-project-container {
    149.   padding: 0 16px;
    150.   width: 100%;
    151.   height: 100%;
    152.   display: flex;
    153.   flex-direction: column;
    154.   // align-items: flex-end;
    155.   overflow-y: auto;
    157.   .tools-line-left {
    158.     flex: 1;
    159.   }
    161.   .tools-line {
    162.     // width: 100%;
    163.     display: flex;
    164.     justify-content: flex-end;
    165.     align-items: center;
    166.     margin-bottom: 8px;
    168.     button {
    169.       margin-right: 16px;
    170.     }
    171.   }
    173.   ::v-deep .ant-table-wrapper {
    174.     width: 100%;
    175.     height: 100%;
    176.     /* .ant-table-fixed-left {
    177.       .ant-table-header.ant-table-hide-scrollbar {
    178.         // width: 582px !important;
    179.       }
    180.     } */
    181.   }
    183.   .type-container {
    184.     span {
    185.       margin-right: 5px;
    186.     }
    187.   }
    189.   .tags-container {
    190.     line-height: 24px;
    191.     span {
    192.       margin-right: 4px;
    193.       padding: 4px;
    194.       white-space: nowrap;
    195.     }
    196.   }
    198.   .action-container {
    199.     i {
    200.       margin: 0 4px;
    201.     }
    202.   }
    203. }
    204. </style>