hd-idevvue3 3.0.0 → 3.0.2

package/src/hdcom/HdGrid.vue

@@ -0,0 +1,825 @@
+<template>
+  <div :style="{width: '100%',height:height}" class="hdgrid" ref="grid">
+    <div v-show="queryShow">
+      <slot name="query"></slot>
+    </div>
+    <div style="height: 0px;" v-if="!noSets">
+      <el-dropdown @command="extSets"
+                   style="float:right;height:0;width:20px;position: relative;right:0px;text-align: center;z-index: 100;cursor:pointer;font-size: 25px">
+        <span class="el-dropdown-link">
+          <i :style="{'font-size':'13px', color: isGridCustom ? 'red !important': ''}" class="fa fa-cogs"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="gridSets">{{$t('自定义展示')}}</el-dropdown-item>
+          <el-dropdown-item command="pageExcel">{{$t('导出当页excel')}}
+          </el-dropdown-item>
+          <el-dropdown-item :disabled="excelAllExporting" command="allExcel">
+            {{excelAllExporting ? $t('正在导出') : $t('导出全部excel') }}
+          </el-dropdown-item>
+          <el-dropdown-item :disabled="pdfAllExporting" command="allPdf">
+            {{pdfAllExporting ? $t('正在生成') : $t('pdf打印') }}
+          </el-dropdown-item>
+          <el-dropdown-item command="queryToggle">{{queryShow ? $t('隐藏查询区') : $t('显示查询区')}}</el-dropdown-item>
+          <el-dropdown-item command="exFieldSets" v-if="exField.open">{{$t('添加扩展字段')}}</el-dropdown-item>
+          <slot name="extSets"></slot>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <!--<el-button @click="gridSets"-->
+      <!--&gt;表格功能-->
+      <!--</el-button>-->
+    </div>
+
+    <el-table :data="hdResultComRows" :default-sort="defaultSort" :row-class-name="rowClassName"
+              :stripe="$attrs.stripe==undefined?true:$attrs.stripe" @row-click="myrowClick"
+              @row-dblclick="myrowDblClick" @row-contextmenu="myrowContextmenu" @selection-change="myselectionChange"
+              @sort-change="dodefaultSort" border element-loading-text="加载中..." height="100%" highlight-current-row
+              ref="ingrid" v-bind="$attrs" v-if="gridCanReload" v-on="$listeners" @filter-change="filterChange">
+
+      <template v-if="!visualScroll">
+        <ExTableColumn :showOverflowTooltip="false" align="center" class-name="backFF" noEdit noSlot type="selection"
+                       v-if="!ckHide" width="30" @click.native="selectClick"></ExTableColumn>
+        <ex-table-column :showOverflowTooltip="false" align="center" noEdit noSlot type="index" v-if="!indexHide"
+                         width="40">
+          <template slot="header" slot-scope="scope">
+            <span>#</span>
+          </template>
+        </ex-table-column>
+      </template>
+      <template v-else>
+        <ex-table-column :showOverflowTooltip="true" align="center" class-name="checkBox" noEdit noSlot v-if="!ckHide"
+                         width="30">
+          <template slot="header" slot-scope="scope">
+            <el-checkbox :indeterminate="isSubChecked" :value="isAllChecked" @change="checkAllChange" />
+          </template>
+          <template slot-scope="scope">
+            <el-checkbox v-model="scope.row._isCK" />
+          </template>
+        </ex-table-column>
+        <ex-table-column :index="getIndex" :showOverflowTooltip="true" align="center" noEdit noSlot type="index"
+                         v-if="!indexHide" width="40">
+          <template slot="header" slot-scope="scope">
+            <span>#</span>
+          </template>
+          <template slot-scope="scope">
+            {{scope.$index + startIndex + 1}}
+          </template>
+        </ex-table-column>
+      </template>
+
+      <slot></slot>
+
+      <template v-if="exField.gridCode">
+        <template v-for="exFieldRow in exFieldRows">
+          <ExtendColumn :exFieldRow="exFieldRow"></ExtendColumn>
+        </template>
+      </template>
+
+      <template v-if="!recHide">
+
+        <el-table-column align="left" header-align="center" label="创建人" noEdit prop="recNam" sortable width="auto">
+        </el-table-column>
+        <el-table-column :inputProp="$date" align="center" input="el-date-picker" label="创建时间" noEdit prop="recTim"
+                         sortable width="135px">
+        </el-table-column>
+        <el-table-column align="left" header-align="center" label="更新人" noEdit prop="updNam" sortable width="auto">
+        </el-table-column>
+        <el-table-column :inputProp="$date" align="center" input="el-date-picker" label="更新时间" noEdit prop="updTim"
+                         sortable width="135px">
+        </el-table-column>
+      </template>
+    </el-table>
+    <!--虚拟滚动条支持1w条 -->
+    <div class="pagination-container" ref="pagecon" style="height:26px;overflow: hidden"
+         v-if="!pageHide || showBtnTool">
+      <div style="float:left" v-if="showBtnTool">
+        <slot name="btnTool">
+          <hd-btn icon="el-icon-plus" hint="增加" @click="doAdd" vid="doAdd" class="hdBtnTool" v-if="!addHide"
+                  keyType="add"></hd-btn>
+          <hd-btn icon="el-icon-minus" hint="删除" @click="doRemove" class="hdBtnTool" v-if="!delHide" keyType="del">
+          </hd-btn>
+          <hd-btn icon="el-icon-check" hint="保存" @click="doSave" class="hdBtnTool" v-if="!saveHide" keyType="save">
+          </hd-btn>
+        </slot>
+        <!--        <hd-btn icon="el-icon-copy-document" hint="复制" @click="doCopy" class="hdBtnTool" style="color:#409EFF;"-->
+        <!--                v-if="!copyHide" keyType="copy"></hd-btn>-->
+      </div>
+      <el-pagination :current-page.sync="hdQuery.page" :page-size="hdQuery.rows" :page-sizes="pageSizeArray"
+                     :total="hdResult.total" @current-change="hdQuery.doCurPageChange" @size-change="rowSizeChg"
+                     layout=" total, slot, prev, pager, next,sizes" small style="float:right" v-if="!pageHide">
+      </el-pagination>
+    </div>
+    <GridShow @save-ok="gridShow()" ref="gridShow" v-if="gridShowIs"></GridShow>
+    <GridExField :columnList="exField.columnList" :gridCode="exField.gridCode" :table="exField.table"
+                 @save-ok="exFieldShow()" ref="exFieldShow" v-if="exField.open && exFieldShowIs"></GridExField>
+    <!--   <GridExFieldBak @save-ok="exFieldShow()" ref="exFieldShow" v-if="exField.open && exFieldShowIs" :table="exField.table"
+                    :columnList="exField.columnList" :gridCode="exField.gridCode"></GridExFieldBak>
+    -->
+    <!-- <PdfShow :gening="pdfAllExporting" @close="pdfShowIs=false" ref="pdfshow" v-if="pdfShowIs"></PdfShow> -->
+    <hd-right-menu ref="rightMenu" @do-add="doAdd" @do-update="doUpdateOne" @do-remove="doRemoveOne"
+                   @do-copy="doCopyOne" v-if="rightMenuOpen" v-show="rightMenuVisable">
+      <template slot="rightMenu">
+        <slot name="rightMenu"></slot>
+      </template>
+      <template slot="rightMenuExt">
+        <slot name="rightMenuExt"></slot>
+      </template>
+    </hd-right-menu>
+  </div>
+</template>
+
+<script>
+import GridShow from './GridShow'
+import GridExField from './GridExField'
+import HdGridExt from './HdGridExt.js'
+// import PdfShow from './PdfShow'
+import BigGrid from "./BigGrid.js";
+import ExtendColumn from "./ExtendColumn";
+import HdBtn from './HdBtn'
+import HdRightMenu from "./HdRightMenu";
+
+/**
+ * 通常不需要直接调用,HdComGrid中已经封装
+ * @module HdGrid
+ */
+export default {
+  name: 'HdGrid',
+  components: { HdRightMenu, GridShow, GridExField, ExtendColumn, HdBtn }, // ElTableColumn已被改写,但是select ck不好使,需要有原来的
+  mixins: [HdGridExt, BigGrid],
+  data() {
+    return {
+      disCol: [], // 配置的列,包括展示和未展示
+      oriCol: [], // 原始列,由column组件赋值
+      chiCol: [], // 存在嵌套列时
+      colThis: [], // column this对象
+      menuId: '',
+      gridId: '',//唯一标识
+      queryShow: true,
+      excelAllExporting: false, // true为正在导出的loading
+      pdfAllExporting: false,
+      gridShowIs: false,
+      exFieldShowIs: false,
+      pdfShowIs: false,//pdf组件是否显示,因为不常用直接v-if
+      gridCanReload: true,// 组件失效重新生成用的,相当于局部刷新
+      isGridCustom: false,
+      exFieldRows: [],
+      rightMenuVisable: false,
+      rightMenuRow: [],
+      lastSelectRow: null,
+    }
+  },
+  inheritAttrs: false,
+  /**
+   * @prop {boolean}   noSets: 是否显示列表右上角的按钮(自定义列和导出excel)默认显示
+   * @prop {Object} defaultSort 默认{prop: 'updTim', order: 'descending'}
+   * @prop {boolean} pageHide: 是否隐藏分页,默认显示
+   * @prop {boolean} ckHide: Boolean,是否显示checkbox默认显示
+   * @prop {boolean} indexHide: Boolean,是否显示index 默认显示
+   * @prop {boolean} recHide: Boolean,是否显示创建人 默认显示
+   * @prop {boolean} rowClassName: Function,
+   * @prop {Array} noExcelExport:,导出excel时不导出的字段
+   * @prop {boolean} excelPropHeader: 导出excel是否包含英文属性头及主键等(适合导入excel当模板使用)
+   * @prop {boolean} visualScroll: 开启虚拟滚动条,可大幅度提升页面容量(上万条列表),但是依然推荐写好分页
+   * @prop {boolean} pageSizes: 页码默认visualScroll?[20,50,100,200,500,1000]:[20,50,100,200]
+   * @prop {Object} exField 是否有扩展字段 open开启，table扩展字段所在表，field扩展字段使用字段
+   * @prop {Function} excelFormatter 自定义导出excel
+   * @prop {Boolean} rightMenuOpen 是否打开右击菜单，默认关闭
+   */
+  props: {
+    // doallPage是事件,导出全部excel
+    hdResult: {
+      rows: [],
+      total: 0,
+    }, // 可能是列表数据,或者导出的excel数据
+    hdAllResult: Object, // 可能是列表数据,或者导出的excel数据
+    hdQuery: {
+      type: Object,
+      default: function () { // updTimFirst是因为会触发HdQuery的排序及查询,默认不让查询
+        return {}
+      }
+    },
+    height: {
+      type: String,
+      default: function () { // 默认空对象,防止出错
+        return '100%'
+      }
+    },
+    noSets: {// 是否显示自定义列和导出excel,默认显示
+      type: Boolean,
+      default: function () {
+        return false
+      }
+    },
+    defaultSort: {
+      type: Object,
+      default: function () { // updTimFirst是因为会触发HdQuery的排序及查询,默认不让查询
+        return { prop: 'updTim', order: 'descending' }
+      }
+    },
+    pageHide: Boolean,
+    ckHide: Boolean, // 是否显示checkbox默认显示
+    indexHide: Boolean, // 是否显示index 默认显示
+    recHide: Boolean, // 是否显示创建人 默认显示
+    rowClassName: Function,
+    noExcelExport: [Array], // 导出excel时不处理的字段
+    excelPropHeader: Boolean,// 导出excel是否包含属性头,默认false,导入excel如果需要模板,可以开启,并且会导出所有属性
+    visualScroll: Boolean,//启动虚拟滚动条,默认false
+    pageSizes: [Array],
+    exField: {
+      type: Object,
+      default: function () {
+        return {
+          open: false,
+          table: null,
+          columnList: null
+        }
+      }
+    },
+    excelFormatter: Function,
+    addHide: Boolean,//隐藏grid列表底部的按钮工具栏里的增加按钮
+    delHide: Boolean,//隐藏grid列表底部的按钮工具栏里的删除按钮
+    saveHide: Boolean,//隐藏grid列表底部的按钮工具栏里的保存按钮
+    copyHide: Boolean,//隐藏grid列表底部的按钮工具栏里的复制按钮
+    hdBtnTool: {
+      type: Boolean,
+      default: true
+    },//显示、隐藏grid列表底部的整个按钮工具栏
+    rightMenuOpen: {
+      type: Boolean,
+      default: false
+    }
+  },
+  created() {
+    //自定义列表展示:vue界面的组件名+parent的组件(调用该组件的组件名+上级组件(如el-main)
+    //当vue界面是菜单入口时_componentTag是undefined,此时name替代(name自动注入)
+    if (this.$parent.$vnode.context.$options._componentTag) {
+      this.gridId = this.$parent.$vnode.context.$options._componentTag + '_' + this.$parent.$parent.$options._componentTag
+    } else {
+      this.gridId = this.$parent.$vnode.context.$options.name + '_' + this.$parent.$parent.$options._componentTag
+    }
+  },
+  mounted() {
+    this.hdQuery.doSort(this.defaultSort, true)
+    //每页显示多少条
+    let selPageSize = localStorage.getItem('page_' + this.gridId)
+    if (selPageSize) {
+      this.hdQuery.rows = parseInt(selPageSize)
+    } else {
+      // this.rowSizeChg(100)
+    }
+    if (this.pageHide) { // 无分页时
+      this.hdQuery.page = null
+      this.hdQuery.rows = 2000
+      console.log('隐藏分页展示数据，最多展现2000条')
+    }
+    if (this.visualScroll) {
+      this.initVisual();
+    }
+    // this.disCol.push(1)
+    if (this.exField.gridCode) {
+      this.initExFieldRows();
+    }
+    this.$nextTick(function () { // 等渲染完成后执行
+      if (!this.noSets) {
+        this.gridShow(true)
+      }
+    })
+  },
+  methods: {
+    doAdd() {
+      this.$emit('sel-ok', 'doAdd')
+    },
+    doRemove() {
+      this.$emit('sel-ok', 'doRemove')
+    },
+    doSave() {
+      this.$emit('sel-ok', 'doSave')
+    },
+    doCopy() {
+      this.$emit('sel-ok', 'doCopy')
+    },
+    doUpdateOne() {
+      this.$emit('sel-ok', 'doUpdateOne', this.rightMenuRow)
+    },
+    doRemoveOne() {
+      this.$emit('sel-ok', 'doRemoveOne', this.rightMenuRow)
+    },
+    doCopyOne() {
+      this.$emit('sel-ok', 'doCopyOne', this.rightMenuRow)
+    },
+    gridShow(notReload) {
+      if (!notReload) { //首次不刷新组件.自定义组件,避免再次查询(分页事件)
+        this.gridCanReload = false
+        // this.isFirstSort = true
+      }
+      this.$nextTick(function () {
+        this.gridCanReload = true
+        this.$nextTick(function () {
+          if (!notReload && this.visualScroll) {
+            this.initVisual();
+            this.initTableHeight();
+          }
+          this.oriCol = this.$refs.ingrid.store.states._columns;// 此处是未进行展示控制的原始数据
+          this.menuId = this.$route.name
+          const url = '/webresources/login/com/ComGridShow/find?menuId=' + this.menuId + '&gridId=' + this.gridId
+          this.$http.post(url).then(response => {
+            this.isGridCustom = response.data.length != 0;
+            this.disCol = this.gridCompute(this.oriCol, response.data)
+
+
+            this.$refs.ingrid.store.states._columns = this.disCol.filter(v => v.showFlg != '0')
+
+            console.log('显示序列条数', this.$refs.ingrid.store.states._columns.length);
+            // console.log(JSON.stringify(this.$refs.ingrid.store.states._columns));
+            this.$refs.ingrid.store.updateColumns()
+            this.$nextTick(function () {
+              this.$refs.ingrid.doLayout()
+            })
+          })
+          //            for (let i = 0; i < this.colThis.length; i++) {
+          //              this.colThis[i].gridShow(true)
+          //            }
+        })
+      })
+    },
+    exFieldShow() {
+      window.location.reload();
+      // console.log(this.$store.state.app.selectedView)
+      // this.$nextTick(()=>{
+      //     this.$store.dispatch('refreshView', this.$store.state.app.selectedView);
+      // })
+    },
+    gridSets() {
+      this.gridShowIs = true
+      this.$nextTick(() => {
+        this.$refs.gridShow.show(this.disCol, this.menuId, this.gridId)
+      })
+    },
+    exFieldSets() {
+      this.exFieldShowIs = true
+      this.$nextTick(() => {
+        this.$refs.exFieldShow.show();
+      })
+    },
+    gridCompute(oriCol, setCol) { // 全部设置展示
+      let result = [];
+      const lastResult = [];
+      for (let i = 0; i < oriCol.length; i++) {
+        const oneOri = oriCol[i]
+        oneOri.showFlg = '1'// 默认展示
+        oneOri._ori_label = oneOri.label
+        oneOri.label = oneOri._ori_label
+        let isFind = false
+        if (oneOri && !oneOri.property) { // 没有prop的默认显示,checkbox和index
+          if (oneOri.fixed == 'right') { // 隐藏行按钮,单独,否则无法控制
+            result.push(oriCol[i])
+          } else {
+            result.push(oneOri)
+          }
+          continue
+        }
+        for (let j = 0; j < setCol.length; j++) { // 后来新增的
+          if (oneOri.property == setCol[j].property) {
+            isFind = true
+            break
+          }
+        }
+        if (!isFind) {
+          lastResult.push(oneOri)
+        }
+      }
+      for (let i = 0; i < setCol.length; i++) {
+        const oneSet = setCol[i]
+        if (result.some(v => {
+          return v.property == oneSet.property
+        })) {
+          console.log('已经重复' + oneSet.property)
+          continue;
+        }
+        for (let j = 0; j < oriCol.length; j++) {
+          const oneOri = oriCol[j]
+          if (oneOri.className == 'checkBox') {
+            this.$set(oneOri, 'fixed', 'left')
+            this.$set(oneOri, 'className', 'checkBox backFF')
+          }
+          if (oneOri.type == 'selection' || oneOri.type == 'index') {//ck和index都要居左
+            this.$set(oneOri, 'fixed', 'left')
+            this.$set(oneOri, 'className', 'backFF')
+          }
+          if (oneOri.property && oneSet.property == oneOri.property) {
+            this.$set(oneOri, 'showFlg', oneSet.showFlg)
+            this.$set(oneOri, 'freezeFlg', oneSet.freezeFlg)
+            if (oneSet.freezeFlg == '1') {
+              this.$set(oneOri, 'fixed', 'left')
+              this.$set(oneOri, 'className', 'backFF' + oneOri.className)
+            }
+            oneOri.width = oneSet.width
+            result.push(oneOri)
+            break
+          }
+        }
+      }
+      result = [...result, ...lastResult];
+      return result
+    },
+    extSets(command) {
+      if (command == 'gridSets') {
+        this.gridSets()
+      }
+      if (command == 'exFieldSets') {
+        this.exFieldSets()
+      } else if (command == 'pageExcel') {
+        this.doPageExcel()
+      } else if (command == 'allExcel') {
+        this.doAllExcel()
+      } else if (command == 'allPdf') {
+        this.doAllPdf()
+      } else if (command == 'queryToggle') {
+        this.queryShow = !this.queryShow
+      }
+      this.$emit('extSets', command)
+    },
+    getHdComGrid() {
+      let par = this.$parent
+      while (par) {
+        if (par.$options.name == 'HdComGrid') {
+          return par
+        }
+        par = par.$parent
+      }
+      return null
+    },
+    myselectionChange(select) {
+      if (this.hdQuery) { //
+        this.hdQuery.selObj = select
+      }//selection-change事件会触发2次,加个第3参数区分是el-table的还是hdgrid的
+      this.$emit('selection-change', select, true)
+    },
+    // selectRow(select, row) {
+    //   if (this.$listeners['select']) {
+    //     return
+    //   }
+    //   console.log(select)
+    //   if (this.lastSelectRow) {
+    //     // this.selectPart(this.lastSelectRow, row)
+    //   } else {
+    //     this.lastSelectRow = row;
+    //   }
+    //   //
+    // },
+    // selectClick(e) {
+    //   console.log(e)
+    // },
+    myrowClick(row, column, event) {
+      if (event.shiftKey) {
+        let index1 = this.hdResult.rows.indexOf(this.hdQuery.selRow);
+        let index2 = this.hdResult.rows.indexOf(row);
+
+        this.selectRowCube(index1, index2, false)
+      } else {
+        this.hdQuery.selRow = row
+      }
+      console.log('row-click', row, event, column)
+      // this.$emit('row-click', row, event, column);
+    },
+
+    myrowDblClick(row, event, column) {
+      if (this.$listeners['row-dblclick']) {
+        return
+      }
+      if (this.$route.path.indexOf('privilege') == 1) {
+        return;
+      }
+      this.$emit('sel-ok', 'doUpdateOne', row)
+      if (this.hdQuery) {
+        this.hdQuery.selRow = row
+      }
+    },
+    myrowContextmenu(row, column, event) {
+      // const menuMinWidth = 105
+      // const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      // const offsetWidth = this.$el.offsetWidth // container width
+      // const maxLeft = offsetWidth - menuMinWidth // left boundary
+      // const left = e.clientX - offsetLeft + 15 // 15: margin right
+      // if (left > maxLeft) {
+      //   this.left = maxLeft
+      // } else {
+      //   this.left = left
+      // }
+      // this.top = e.clientY - 40
+      // this.visible = true
+      // this.$store.state.app.selectedView = tag
+      // console.log(this.$store.state.app.selectedView)
+
+      if (this.hdQuery) {
+        this.rightMenuRow = row
+      }
+      this.rightMenuVisable = false // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
+      event.preventDefault() //关闭浏览器右键默认事件
+
+      if (this.rightMenuOpen) {
+        let menu = this.$refs.rightMenu.$el
+
+
+        // if (event.clientX > 900) {
+        //   menu.style.left = event.clientX - 265 + 'px'
+        // } else {
+        //   menu.style.left = event.clientX - 175 + 'px'
+        // }
+        document.addEventListener('click', this.foo) // 给整个document新增监听鼠标事件，点击任何位置执行foo方法
+        // if (event.clientY > 500) {
+        //   menu.style.top = event.clientY - 185 + 'px'
+        // } else {
+        //   menu.style.top = event.clientY - 105 + 'px'
+        // }
+        menu.style.left = event.clientX + 'px'
+        menu.style.top = event.clientY + 'px'
+        // console.log(menu,event)
+        this.rightMenuVisable = true // 显示模态窗口，跳出自定义菜单栏
+      }
+
+    },
+
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.rightMenuVisable = false
+      document.removeEventListener('click', this.foo) // 关掉监听，
+    },
+    dodefaultSort(val, v1, v2) {
+      let sortProp = val.column.sortable
+      if (!sortProp) {
+        return
+      }
+      // if (typeof (sortProp) != 'boolean' && sortProp != '') {
+      //   console.log('compare hdResult')
+      //   this.hdResult.rows.sort((a, b) => {
+      //     if (val.column.order == 'ascending') {
+      //       return this.localeCompare(a[sortProp], b[sortProp])
+      //     } else if (val.column.order == 'descending') {
+      //       return this.localeCompare(b[sortProp], a[sortProp])
+      //     }
+      //   })
+      //   return;
+      // }
+      let hasAddData = false
+      for (let i = 0; i < this.hdResultComRows.length; i++) {
+        if (this.hdResultComRows[i].isEdit) {
+          hasAddData = true
+          break
+        }
+      }
+      // if (!this.defaultSort || !this.defaultSort.prop) { // 没有默认排序时,不会立即执行该方法
+      //   this.isFirstSort = false
+      // }
+      // 列表会默认执行此方法,所以需要防止排序调用doquery
+      if (hasAddData) {
+        this.$confirm(this.$t('存在未保存数据,是否继续?'), this.$t('提示'), {}).then(() => {
+          this.hdQuery.doSort(val, false)
+        })
+      } else {
+        this.hdQuery.doSort(val, false)
+      }
+    },
+    localeCompare(a, b) {
+      if (!a) {
+        return 1
+      }
+      if (!b) {
+        return -1
+      }
+      return a.localeCompare(b)
+    },
+    doPageExcel() {
+      this.excelExport(this.hdResult.rows)
+    },
+    doAllExcel() {
+      let res = null
+      this.$emit('allExcel', function (call) {
+        res = call
+      })
+      this.excelAllExporting = true
+      res.then(response => {
+        this.excelExport(response.data.rows)
+        this.excelAllExporting = false
+        // this.downloadLoading = false
+      })
+    },
+    doAllPdf() {
+      let res = null
+      this.pdfShowIs = true
+      this.$emit('allExcel', function (call) {//pdf也是这名字allExcel
+        res = call
+      })
+      this.pdfAllExporting = true
+      res.then(response => {
+        this.pdfExport(response.data.rows)
+        this.pdfAllExporting = false
+        // this.downloadLoading = false
+      })
+    },
+    getInputFormat(prop) {
+      for (let i = 0; i < this.colThis.length; i++) {
+        const one = this.colThis[i]
+        if (one.$attrs.prop == prop) {
+          return one.getValueByPath//支持多级prop如果有inutFormat会使用inputFormt
+        }
+      }
+    },
+    rowSizeChg(val) {
+      localStorage.setItem('page_' + this.gridId, val)
+      this.hdQuery.doSizeChg(val)
+    },
+    getCkRows() {
+      if (this.visualScroll) {
+        return this.hdResult.rows.filter(v => v._isCK == true)
+      } else {
+        return this.hdQuery.selObj
+      }
+
+    },
+    initExFieldRows() {
+      let hdFielddQuery = new HdQuery(this);
+      hdFielddQuery.query.gridCode = this.exField.gridCode;
+      hdFielddQuery.sort = 'sortNo';
+      hdFielddQuery.order = 'asc';
+      this.$http.post(`/webresources/login/tech/ComExField/detail/find`, hdFielddQuery).then(response => {
+        this.exFieldRows = response.data.rows
+        this.exFieldRows.forEach(row => {
+          row.fieldName = row.columnName.toLowerCase().replace(/\_+[a-zA-Z]/g,
+            (str, index) => index ? str.substr(-1).toUpperCase() : str
+          )
+        })
+        this.$nextTick(function () {
+          this.$refs.ingrid.doLayout()
+        })
+      })
+    },
+    filterChange(filters) {
+      // this.hdResult.filterValue.
+      this.hdResult.filters = Object.assign(this.hdResult.filters || {}, filters);
+
+      this.filterHdResult()
+    },
+    filterHdResult() {
+      let keys = Object.keys(this.hdResult.filters || {});
+      // console.log(this.$refs.ingrid.store.states._columns, this.hdResult.filters)
+      this.hdResult.rows = this.hdResult._rows.filter((row) => {
+
+        return !keys.some(value => {
+          let prop = (this.$refs.ingrid.store.states._columns.find(v => {
+            return v.id == value
+          }) || '').property
+          // console.log(value, prop, row[prop], this.hdResult.filters[value])
+          return this.hdResult.filters[value].length > 0 && this.hdResult.filters[value].indexOf(row[prop]) == -1
+        });
+      });
+    },
+
+    selectPart(e, isUnSelect) {
+      let index1 = this.hdResult.rows.indexOf(this.hdQuery.selRow);
+      let index2 = this.hdResult.rows.indexOf(this.rightMenuRow);
+
+      this.selectRowCube(index1, index2, isUnSelect)
+    },
+    selectRowCube(index1, index2, isUnSelect) {
+      if (index1 > index2) {
+        let tmpIndex = index1;
+        index1 = index2;
+        index2 = tmpIndex;
+      }
+      this.hdResult.rows.forEach((v, i) => {
+        if (i >= index1 && i <= index2) {
+          this.$refs.ingrid.toggleRowSelection(v, !isUnSelect)
+        }
+      })
+    },
+
+    unSelectPart(e) {
+      this.selectPart(e, true)
+    }
+  },
+  computed: {
+    hdResultComRows() {
+      if (this.visualScroll) {
+        return this.gridDataRows
+      } else {
+        return this.hdResult.rows
+      }
+    },
+    pageSizeArray() {
+      if (this.pageSizes == null) {
+        return this.visualScroll ? [20, 50, 100, 200, 500, 1000, 2000] : [20, 50, 100, 200, 500];
+      } else {
+        return this.pageSizes;
+      }
+    },
+    showBtnTool() {
+      return this.hdBtnTool && this.$route.path.indexOf('privilege') != 1;
+    },
+  },
+
+  watch: {}
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.hdgrid {
+  display: flex;
+  flex-direction: column;
+
+  :deep(.el-table) {
+    //deep内的不会加随机数
+    height: 100%;
+    width: 100%;
+    flex: 1;
+
+    th.gutter {
+      //浏览器缩放,表格错行解决
+      display: table-cell !important;
+    }
+
+    .el-table__header-wrapper th {
+      //列表标题
+      background-color: #f6f6f6;
+    }
+
+    .el-table__fixed-header-wrapper th {
+      //固定的列表标题
+      background-color: #f6f6f6;
+    }
+
+    td,
+    th {
+      //列表标题及内容
+      padding: 1px 0;
+    }
+
+    .cell,
+    .el-table th div,
+    .el-table--border th:first-child .cell,
+    .el-table--border td:first-child .cell {
+      //列表的margin
+      padding-left: 4px !important;
+      padding-right: 0px !important;
+      padding-top: 1.5px !important;
+      padding-bottom: 1.5px !important;
+    }
+
+    .el-table__empty-block {
+      position: static;
+      text-align: center;
+      width: 100%;
+      height: 80%;
+    }
+
+    .el-table__body {
+      //列表下面加了空白
+      margin-bottom: 10px;
+    }
+
+    .el-table__body-wrapper {
+      height: 100%;
+      overflow: auto;
+    }
+
+    .el-input__inner {
+      height: 27px;
+      margin-bottom: 0px;
+      line-height: 27px;
+    }
+
+    .el-input,
+    .el-form-item__content,
+    .el-form-item__label,
+    .el-input__icon {
+      line-height: 30px;
+    }
+
+    .el-input__inner {
+      padding: 5px;
+    }
+
+    .el-input--prefix .el-input__inner {
+      //日期的有logo不一样
+      padding-left: 30px;
+    }
+
+    .cell {
+      min-width: 20px;
+    }
+
+    .checkBox .cell {
+      overflow: inherit;
+
+      .el-checkbox,
+      .el-checkbox__input {
+        position: inherit;
+      }
+    }
+  }
+}
+
+.hdBtnTool {
+  font-weight: bold;
+  vertical-align: middle;
+  margin-left: 20px;
+}
+</style>