lh_firm_former/src/components/ibps-crud/index.vue

<template>
  <div class="container-component">

    <div ref="ibpsCrud" class="ibps-container-crud">

      <!-- 工具栏 -->
      <!-- 标题栏-->
      <div v-if="displayField && displayField!='N'&& displayField!='true'&& displayField!='Y'" class="jbd-title-cont">
         {{displayField}}
      </div>
      <div
        v-if="toolbars || $slots.header"
        ref="ibpsCrudHeader"
        class="ibps-container-crud__header"
      >
        <div
          v-if="toolbars"
          :class="['ibps-toolbar--' +$ELEMENT.size]"
          class="ibps-toolbar"
        >
    <div class="header"
        style="overflow:scroll;
          height: 100%;
          background-color: #F9FFFF;
          border-bottom: 0px;
          border-top: 0px;
          overflow: hidden"
          >
<!-- 换了位置 -->
        <div
          v-show="$utils.isNotEmpty(searchForm) && showToolbar"
          ref="toolbarBox"
          class="toolbar-box clear"
          style="padding: 0px; border: 0px;"
        >
          <template v-if="$slots.searchForm" ref="searchForm">
            <slot :loading="loading" name="searchForm" />
          </template>

          <template v-else>
            <search-form
              v-if="searchForm"
              ref="searchForm"
              :forms="searchForm.forms||[]"
              size="mini"
              :fuzzy="searchForm.fuzzy"
              :inline="searchForm.inline"
              :label-width="searchForm.labelWidth"
              :item-width="searchForm.itemWidth"
              @search="handleActionEvent({key:'search'}, 'toolbar')"
            >
                    <template v-for="item in searchFormSlot" :slot="item.slotName">
                      <slot :name="item.slotName" :item="item" />
                    </template>

                    <template slot="jbd-buttons" v-if="searchFormSlot.length>0">
                             <ibps-toolbar
                               :actions="toolbars"
                               :socpe="thatSocpe"
                               @action-event="handleActionEvent"
                             />
                    </template>

            </search-form>
          </template>

        </div>


            <div class="buttons"  v-if="$slots.searchForm">
              <ibps-toolbar
                :actions="toolbars"
                :socpe="thatSocpe"
                @action-event="handleActionEvent"
              />
            </div>
            <div class="buttons" v-else-if="searchFormSlot.length<1">
                     <ibps-toolbar
                       :actions="toolbars"
                       :socpe="thatSocpe"
                       @action-event="handleActionEvent"
                     />
            </div>
      </div>
            <!-- 下拉隐藏-->
           <!-- <div class="tools">
              <slot name="rightTools" />
              <el-button v-if="displayField" icon="ibps-icon-cog" class="ibps-crud__display-field" :underline="false" @click="displayFieldVisible=true">{{ $t('components.crud.displayField') }}</el-button>
              <el-tooltip
                v-if="$utils.isNotEmpty(searchForm)"
                :content="showToolbar?$t('components.crud.collapse'):$t('components.crud.expand')"
              >
                <a class="expand" @click="handleCollapseExpandToolbar">
                  <i :class="showToolbar?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </a>
              </el-tooltip>
            </div> -->




          <slot name="header" />
        </div>
      </div>

        <!--列表--><!--   @header-dragend="handleHeaderDragend" 拖拽事件取消 -->
        <el-table
          ref="elTable"
          v-loading="loading"
          v-bind="options"
          :row-key="pkKey"
          :data="ibpsData"
          :height="tableHeight"
          :header-cell-style="{color:'#000','font-size':'14px',padding:'6px 6px'}"
          :stripe="false"
          :row-class-name="tableRowClassName"
          @current-change="handleCurrentChange"
          @select="handleSelect"
          @select-all="handleSelectAll"
          @selection-change="handleSelectionChange"
          @sort-change="handleSortChange"
          @cell-mouse-enter="handleCellMouseEnter"
          @cell-mouse-leave="handleCellMouseLeave"
          @cell-click="handleCellClick"
          @cell-dblclick="handleCellDblclick"
          @row-click="handleRowClick"
          @row-contextmenu="handleRowContextmenu"
          @row-dblclick="handleRowDblclick"
          @header-click="handleHeaderClick"
          @header-contextmenu="handleHeaderContextmenu"
        >
          <template slot="empty">
            <slot v-if="$slots.empty" name="empty" />
            <ibps-empty v-else />
          </template>
          <!--选择列 多选-->
          <el-table-column
            v-if="(selectionRow || selectionRow === '') && selectionType === 'checkbox'"
            v-bind="typeof selectionRow === 'Object'?selectionRow:null"
            :label="handleAttribute(selectionRow.label, '')"
            :reserve-selection="selectionRow.reserveSelectione||false"
            type="selection"
            show-overflow-tooltip
          />
          <!--选择列 单选-->
          <el-table-column
            v-if="(selectionRow || selectionRow === '') && selectionType === 'radio'"
            :label="selectionRow.label||''"
            :width="selectionRow.width||55"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-radio v-model="selectionRadio" :label="getPkValue(scope.row)"><span>&nbsp;</span></el-radio>
            </template>
          </el-table-column>

          <!-- 自定义表单名称-->
          <el-table-column :width="150"
          show-overflow-tooltip
          label="表单名称"
          v-if="formName">
            <template slot-scope="scope">
                {{formName}}
            </template>
          </el-table-column>

          <!--索引列-->
          <el-table-column
            v-if="indexRow || indexRow === ''"
            v-bind="typeof indexRow === 'Object'?indexRow:null"
            :label="handleAttribute(indexRow.label, $t('components.crud.index'))"
            :width="60"
            type="index"
          />
          <slot name="prepend-column" />
          <template v-for="(column, index) in tableColumns">
            <el-table-column
              v-if="showColumn(column)"
              :key="index"
              :prop="handleAttribute(column.prop, null)"
              :label="handleAttribute(column.label, '')"
              :width="handleAttribute(column.width,null)"
              v-bind="column"
              show-overflow-tooltip
            >
              <template slot="header">
                <slot :name="column.headerName" :column="column" />
              </template>
              <template slot-scope="scope">
                <!--时间格式-->
                <span v-if="column.dateFormat" class="ibps-table-column">
                  {{ scope.row[column.prop] | dateFormat(column.dateFormat,column.origDateFormat) }}
                </span>
                <!--通用过滤器-->
                <span v-else-if="column.filter" class="ibps-table-column">
                  {{ handleColumnFilter(column.filter,scope.row[column.prop]) }}as
                </span>
                <!-- 下拉组件-->
                <span v-else-if="column.options" class="ibps-table-column">
                  <!--stringArray 字符串类型的数组,逗号分隔-->
                  <template v-if="column.dataType==='stringArray'">
                    <span
                      v-for="(value,i) in handleColumnDataConvert(scope.row[column.prop],column.separator)"
                      :key="i"
                    >
                      {{ handleColumnOptions('label',column.options,value,column) }}<template v-if="handleColumnDataConvert(scope.row[column.prop],column.separator).length-1 !==i">,</template>
                    </span>
                  </template>
                  <!--stringArray 字符串类型的数组-->
                  <template v-else-if="column.dataType==='objectList'">
                    <span v-for="(value,j) in scope.row[column.prop]" :key="j">
                      {{ value[column.tagLabel] }}
                    </span>
                  </template>
                  <span v-else>{{ handleColumnOptions('label',column.options,scope.row[column.prop]) }}</span>

                </span>
                <!-- tags组件-->
                <span v-else-if="column.tags" class="ibps-table-column">
                  <span v-if="$utils.isEmpty(scope.row[column.prop]) ">{{ column.defaultLabel||'' }}</span>
                  <!--stringArray 字符串类型的数组-->
                  <template v-else-if="column.dataType==='stringArray'">
                    <el-tag
                      v-for="(value,i) in handleColumnDataConvert(scope.row[column.prop],column.separator)"
                      :key="i"
                      :type="handleColumnOptions('type',column.tags,value,column)"
                    >
                      {{ handleColumnOptions('label',column.tags,value,column) }}
                    </el-tag>
                  </template>
                  <!--stringArray 字符串类型的数组-->
                  <template v-else-if="column.dataType==='objectList'">
                    <el-tag v-for="(value,j) in scope.row[column.prop]" :key="j">
                      {{ value[column.tagLabel] }}
                    </el-tag>
                  </template>
                  <template v-else>
                    <el-tag :type="handleColumnOptions('type',column.tags,scope.row[column.prop],column)">{{ handleColumnOptions('label',column.tags,scope.row[column.prop],column) }}</el-tag>
                  </template>
                </span>
                <!-- link组件-->
                <span v-else-if="column.link" class="ibps-table-column">
                  <el-link :type="column.type||'primary'" :underline="column.underline||false" @click="handleColumnLink(column,scope.row)">
                    {{ scope.row[column.prop] |removeHtmlTag }}
                  </el-link>
                </span>

                <!-- 自定义slot组件############################################-->
               <span v-else-if="column.slotName" class="ibps-table-column">
                 <slot  :name="column.slotName" :row="scope.row" :value="scope.row[column.prop]" :column="column" :$index="scope.$index" />
                </span>

                <!--自定义组件-->
                <render-custom-component
                  v-else-if="column.component && column.component.name"
                  v-model="scope.row[column.prop]"
                  :component-name="column.component.name"
                />
                <!--渲染组件-->
                <render-component
                  v-else-if="column.component && column.component.render"
                  :render-function="column.component.render"
                  :scope="scope"
                />
                <template v-else>
                  {{ column.formatter ? column.formatter(scope.row, scope.column, _get(scope.row, column.prop), scope.$index) : _get(scope.row, column.prop) }}
                </template>
              </template>
              <!--子列 -->
              <template v-if="column.children">
                <el-table-column
                show-overflow-tooltip
                  v-for="(column2, index2) in column.children"
                  :key="index2"
                  :label="handleAttribute(column2.title, '')"
                  :prop="handleAttribute(column2.key, null)"
                  v-bind="column2"
                >
                  <template slot-scope="scope">
                    <!--过滤器-->
                    <span v-if="column2.filter">
                      {{ handleColumnFilter(column2.filter,scope.row[column2.prop]) }}
                    </span>
                    <!-- 下拉组件-->
                    <span v-else-if="column2.options" class="table-column-options">
                      <span>{{ handleColumnOptions('label',column2.options,scope.row[column2.prop]) }}</span>
                    </span>
                    <!-- tags组件-->
                    <span v-else-if="column2.tags" class="table-column-tags">
                      <el-tag :type="handleTags('type',column2.tags,scope.row[column2.prop])">{{ handleTags('label',column2.tags,scope.row[column2.prop]) }}</el-tag>
                    </span>
                    <!-- link组件-->
                    <span v-else-if="column2.link">
                      <a href="javascript:void(0)" class="table-column-link" @click="handleColumnLink(column2,scope.row)">{{ scope.row[column2.prop] }}</a>
                    </span>
                    <span v-else-if="column2.slotName">
                      <slot :name="column2.slotName" :row="scope.row" :$index="scope.$index" />
                    </span>
                    <!--自定义组件-->
                    <render-custom-component
                      v-else-if="column2.component && column2.component.name"
                      v-model="scope.row[column2.prop]"
                      :component-name="column2.component.name"
                    />
                    <!--渲染组件-->
                    <render-component
                      v-else-if="column2.component && column2.component.render"
                      :render-function="column2.component.render"
                      :scope="scope"
                    />
                    <span v-if="contorlLength">
                    	<el-tooltip class="item" effect="dark" :content="column.formatter ? column.formatter(scope.row, scope.column, _get(scope.row, column.prop), scope.$index) : _get(scope.row, column.prop)" placement="bottom">
                    		<span>
                           {{ column2.formatter ? column2.formatter(scope.row, scope.column2, _get(scope.row, column2.prop), scope.$index) : _get(scope.row, column2.prop)| ellipsis }}
                    		</span>
                    	</el-tooltip>
                    </span>
                    <template v-else>{{ column2.formatter ? column2.formatter(scope.row, scope.column2, _get(scope.row, column2.prop), scope.$index) : _get(scope.row, column2.prop) }}</template>
                  </template>
                </el-table-column>
                <!-- end 子列-->
              </template>
            </el-table-column>
          </template>
          <!--操作列begin-->
          <!--  $t('components.crud.manage')    handleAttribute(rowHandle.width, rowHandleDefaultWidth)     -->
          <el-table-column
            v-if="rowHandle"
            v-bind="rowHandle"
            :label=" handleAttribute(rowHandle.columnHeader,'操作') "
            :width="handleAttribute(rowHandle.width, rowHandleDefaultWidth) <80 ?  '80' : this.rowHandle.actions.length !=0 && this.rowHandle.actions.length<3  ? 110 * this.rowHandle.actions.length : handleAttribute(rowHandle.width, rowHandleDefaultWidth)"
            :fixed="handleAttribute(rowHandle.fixed, 'right')"
            :align="handleAttribute(rowHandle.align, 'center')"
          >


            <template v-slot:default="scope">

              <slot name="selectCont" :row="scope.row" />
              <template v-if="hasRowHandleActions(scope.row)">
                <template v-if="rowHandle.effect ==='display'">
                  <ibps-toolbar
                    v-if="!rowHandleMoreActions || rowHandleMoreActions.length <=1"
                    :actions="rowHandleActions"
                    :socpe="thatSocpe"
                    :data="scope.row"
                    position="manage"
                    type="link"
                    @action-event="handleActionEvent"
                  />
                <template v-if="rowHandleMoreActions && rowHandleMoreActions.length <=1">
                    <div class="el-divider el-divider--vertical"/>
                        <ibps-toolbar
                          :actions="rowHandleMoreActions"
                          :socpe="thatSocpe"
                          :data="scope.row"
                          position="manage"
                          type="link"
                          @action-event="handleActionEvent"
                        />
                  </template>

                  <template v-if="rowHandleMoreActions && rowHandleMoreActions.length >1" >
                    <el-dropdown>
                      <i class="el-icon-caret-bottom el-dropdown-link" style="font-size:14px;">更多</i>
                      <el-dropdown-menu slot="dropdown" class="ibps-table-dropdown-menu">
                            <ibps-toolbar
                              :actions="rowHandleMoreActions.concat(rowHandleActions)"
                              :socpe="thatSocpe"
                              :data="scope.row"
                              position="manage"
                              type="linkHide"
                              @action-event="handleActionEvent"
                            />
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>

                </template>
                <!-- 下拉-->
                <template v-else>
                  <el-dropdown>
                    <i class="ibps-icon ibps-icon-chevron-circle-down" style="font-size:24px;" />
                    <el-dropdown-menu slot="dropdown" class="ibps-table-dropdown-menu">
                      <ibps-toolbar
                        :actions="rowHandleActions"
                        :socpe="thatSocpe"
                        :data="scope.row"
                        position="manage"
                        @action-event="handleActionEvent"
                      />
                    </el-dropdown-menu>
                  </el-dropdown>

                  <span>&nbsp;</span>
                </template>
              </template>
            </template>
          </el-table-column>
          <!--操作列end-->
        </el-table>
      <!--分页 或底部 自定义底部-->
      <div
        v-if="isShowPagination"
        ref="ibpsCrudFooter"
        class="ibps-container-crud__footer"
      >
        <template v-if="$slots.footer">
          <slot name="footer" />
        </template>
        <el-pagination
          v-else
          :current-page="currentPage"
          :page-size="pageSize"
          :page-count="pagination[pageCountKey]"
          :total="pagination[totalKey]"
          v-bind="paginationOptions"
          @size-change="handlePaginationSizeChange"
          @current-change="handlePaginationCurrentChange"
          @prev-click="handlePaginationPrevClick"
          @next-click="handlePaginationNextClick"
        >
          <template>
            <span class="el-pagination__total">{{ pageInfo }}</span>
          </template>
        </el-pagination>
      </div>
    </div>
    <!--显示字段-->
    <display-field-dialog
      :visible="displayFieldVisible"
      :fields="columns"
      :data="displayFields"
      @callback="handleDisplayField"
      @close="visible => displayFieldVisible = visible"
    />
  </div>
</template>

<script>
import base from './mixin/base'
import handleRow from './mixin/handleRow'
import data from './mixin/data'
import search from './mixin/search'
import column from './mixin/column'
import pagination from './mixin/pagination'
import displayField from './mixin/displayField'
import utils from './mixin/utils'

import RenderComponent from './components/render-component.vue'
import RenderCustomComponent from './components/render-custom-component.vue'
import SearchForm from './components/search-form'
import DisplayFieldDialog from './components/display-field'

export default {
  props:['contorlLength'],
  name: 'ibps-crud',
  filters: { //定义过滤器
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 7) {
        return value.slice(0,7) + '..'
      }
      return value
    }
  },
  components: {
    RenderComponent,
    RenderCustomComponent,
    SearchForm,
    DisplayFieldDialog
  },
  mixins: [
    base,
    data,
    search,
    column,
    handleRow,
    pagination,
    displayField,
    utils
  ]
}
</script>
<style >
  .el-table th{
    background-color: #A7D6F8 !important;
    font-size: 12px  !important;
    color: #000000;
    border: 0px;
  }
  .jbd-title-cont{
    text-align: center;
    font-weight: bold;
	background-color: rgb(249, 255, 255);
    width: 100%;
    font-size: 18px;
    }
  .el-table .caret-wrapper{
        top: -5px;
    position: absolute;
	  }
  .el-table td{
     padding: 4px 0 !important;
     color: #000000;
     font-size: 12px  !important;
   }
  .el-table .warning-row {
      background: #D9EEFD;
      color: #000000;
    }

    .el-table .success-row {
      background: #F9FFFF;
      color: #000000;
    }

</style>
<style lang="less" scoped>
    /deep/ .el-tag--mini{
     height: 0px; 
     padding: 0px; 
     line-height: 15px; 
    }
    /deep/  .el-tag{
    background-color: #ecf5ff;
    border-color: #d9ecff;
     height: 0px; 
     padding: 0px; 
    line-height: 15px; 
    font-size: 12px;
    color: #409EFF;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    //  white-space: nowrap;
    white-space:break-spaces;
    }
    /deep/.cell{
      overflow: visible;
    }
    /deep/ .el-table .cell.el-tooltip {
     white-space:break-spaces; 
    // min-width: 50px;
    }
</style>