index.vue 58.3 KB
Newer Older
何虹's avatar
何虹 committed
1
 <template>
何虹's avatar
何虹 committed
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
  <div
    :id="elId"
    class="_hs_table"
    style="width:100%;height:100%"
  >
    <span
      class='toolsBox'
      v-show="configData.isShowTools"
    >
      <el-popover
        placement="top-start"
        width="200"
        trigger="hover"
      >
        <template v-for="(item,index) in tool_list">
          <div
            class="closeAllItem"
            v-if="showItem(item)"
            :key="index"
          >
            <el-button
              type="text"
              :disabled="disabledItem(item)"
              size="mini"
              @click="itemClickAction(item)"
            >
              {{item.label}}
            </el-button>
          </div>
        </template>
        <el-button
          size="mini"
          type="primary"
          slot="reference"
          icon='el-icon-menu'
          circle
        ></el-button>
      </el-popover>
    </span>
    <el-table
      v-if="isPicture==='0'"
      ref='hsTable'
      style="width:100%;overflow: auto;"
      :data="this.tableData"
      :style="tableStyle"
      :fit='true'
何虹's avatar
何虹 committed
48
      :highlight-current-row='configData.highlightCurrentRow'
何虹's avatar
何虹 committed
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
      :show-summary='showSummary'
      :header-row-style="setHeaderRowStyle"
      :header-cell-style="setHeaderCellStyle"
      :row-style="setRowStyle"
      :cell-style="setCellStyle"
      :max-height="maxHeight||maxHeight_"
      :border="configData.built_border"
      :show-header="!configData.hideHeader"
      :summary-method="getSummaries"
      @select-all='selectAll'
      @select='selectCheckBox'
      @row-click="tableRowClick"
      @cell-click='tableCellClick'
      @cell-mouse-enter='tableCellmouse'
      @cell-mouse-leave="tableCelleave"
      @cell-dblclick="cellDblclick"
      @sort-change='sortChange'
      @header-click="headerClick"
      @row-dblclick='tableRowDblclick'
      @selection-change='selectionChange'
    >
      <el-table-column
        v-if="configData.selection"
        type="selection"
        width="55"
      ></el-table-column>
      <el-table-column
        v-if="configData.showIndex"
        label='序号'
        type="index"
        width="55"
      ></el-table-column>
何虹's avatar
何虹 committed
81
      <template v-if="columnsProp.length">
何虹's avatar
何虹 committed
82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
        <template v-for='(column,index) in columnsProp'>
          <template v-if="!column.childs&&!column.isHide">
            <el-table-column
              :key="index"
              :render-header='renderHeader'
              :width='minWidthFun(column,1)'
              :prop="column.prop||column.label"
              :show-overflow-tooltip='column.showOverflowTooltip'
              :label="column.label&&column.label.startsWith('img_')?column.label.substr(4):column.label"
            >
              <template slot-scope="scope">
                <template v-if="column.prop.startsWith('img_')">
                  <el-image
                    :src="scope.row[column.prop]"
                    :fit="fit"
                    :style="imgStyle"
                  >
                  </el-image>
                </template>
                <template v-else>
                  <template v-if="!jumpDisable(scope.row,column.prop)">
                    <el-popover
                      placement="top-start"
                      width="400"
                      @show='showpopover(scope.row,column.prop)'
                      :close-delay='0'
                      trigger="hover"
何虹's avatar
何虹 committed
109
                    >
何虹's avatar
何虹 committed
110 111 112 113 114 115 116 117 118 119 120
                      <el-table
                        :data="tableDataDetail"
                        :header-row-style="setCellHeaderRowStyle"
                        :row-style="setCellRowStyle"
                        style="width: 100%"
                      >
                        <el-table-column
                          v-for="(prop,index) in tableHeader"
                          :prop="prop"
                          :label="prop"
                          :key="index"
何虹's avatar
何虹 committed
121
                        >
何虹's avatar
何虹 committed
122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144
                        </el-table-column>
                      </el-table>
                      <div slot="reference">{{scope.row[column.prop]}}</div>
                    </el-popover>
                  </template>
                  <template v-else>
                    <template v-if="column.type==='checkBox'">
                      <i :class="rowCellBoolean(scope.row[column.prop])"></i>
                    </template>
                    <template v-else>
                      <!-- <span  @click="cellClickItem(scope.row[column.prop],column.action)">{{scope.row[column.prop]}}</span> -->
                      <childItem
                        v-if="jumpItem(column.prop)"
                        :item='jumpItem(column.prop)'
                        :prop="column.prop"
                        :formParms='scope.row'
                        :allColumsConfig='allColumsConfig'
                        :jsoneditorOpenAfter='jsoneditorOpenAfter'
                        :readonly='readonly||dtlDialogFormDisAbled'
                      >
                      </childItem>
                    </template>
                  </template>
何虹's avatar
何虹 committed
145
                </template>
何虹's avatar
何虹 committed
146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196
              </template>
            </el-table-column>
          </template>
          <template v-else-if="column.childs&&column.childs.length">
            <el-table-column
              :label="column.label"
              :key="index"
            >
              <template v-for="item in column.childs">
                <el-table-column
                  :width='minWidthFun(item,2)'
                  :prop="item.prop||item.label"
                  :render-header='renderHeader'
                  :label="item.label.split('__')[1]||item.prop"
                  :key="item.label"
                >
                  <template slot-scope="scope">
                    <template v-if='!jumpDisable(scope.row,item.prop)'>
                      <el-popover
                        placement="top-start"
                        width="400"
                        @show='showpopover(scope.row,item.prop)'
                        :close-delay='0'
                        trigger="hover"
                      >
                        <el-table
                          :data="tableDataDetail"
                          :header-row-style="setCellHeaderRowStyle"
                          :row-style="setCellRowStyle"
                          style="width: 100%"
                        >
                          <el-table-column
                            v-for="(props,index) in tableHeader"
                            :prop="props"
                            :label="props"
                            :key="index"
                          >
                          </el-table-column>
                        </el-table>
                        <div slot="reference">{{scope.row[item.prop]}}</div>
                      </el-popover>
                    </template>
                    <template v-else>
                      <template v-if="item.type==='checkBox'">
                        <i :class="rowCellBoolean(scope.row[item.prop])"></i>
                      </template>
                      <template v-else>
                        <div>{{scope.row[item.prop]}}</div>
                      </template>
                    </template>
                  </template>
何虹's avatar
何虹 committed
197
                </el-table-column>
何虹's avatar
何虹 committed
198 199
              </template>
            </el-table-column>
何虹's avatar
何虹 committed
200
          </template>
何虹's avatar
何虹 committed
201
        </template>
何虹's avatar
何虹 committed
202
      </template>
何虹's avatar
何虹 committed
203 204 205 206 207 208
      <el-table-column
        v-if='configData.showHandle'
        label="操作"
        :width='configData.handleWidth'
        fixed="right"
      >
何虹's avatar
何虹 committed
209 210 211
        <!-- <template slot-scope="scope">
            <slot name="table_handle" :row='scope.row' :$index='scope.$index'></slot>
        </template> -->
何虹's avatar
何虹 committed
212
        <!-- <template slot-scope="scope"> -->
何虹's avatar
何虹 committed
213
        <template slot-scope="scope">
何虹's avatar
何虹 committed
214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233
          <template v-for="(item,index) in handleColumns_">
            <el-button
              v-if="showItem(item,scope.row)"
              :disabled='disabledItem(item,scope.row)||dtlDialogFormDisAbled'
              :key="index"
              size="mini"
              :icon="item.icon"
              :type="item.type"
              @click="itemClickActionHandle(item,scope.$index,scope.row)"
            > {{item.label}}</el-button>
          </template>
          <template v-for="(item) in dtl_list">
            <el-link
              :disabled="dtlDialogFormDisAbled"
              :key="item.label"
              type="primary"
              class="elLink"
              @click='linkDtl(item,scope.row)'
            >{{item.label}}</el-link>
          </template>
何虹's avatar
何虹 committed
234 235 236 237
        </template>
      </el-table-column>
    </el-table>
    <div v-if="isPicture==='1'">
何虹's avatar
何虹 committed
238 239 240 241
      <div><img
          :src="imgUrl"
          style="width:100%;height:100%;"
        ></div>
何虹's avatar
何虹 committed
242
    </div>
何虹's avatar
何虹 committed
243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264
    <div class="paginationBox">
      <el-pagination
        v-if="paging"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="paginationPage"
        :page-sizes="pageSizes"
        :page-size="paginationPageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationTotal"
      >
      </el-pagination>
    </div>
    <jsoneditor
      v-model='jsoneditorVisible'
      :elInfo='elInfo'
      :layout='layout'
      :allSourceData='allSourceData'
      :jsoneditorCloseAfter='jsoneditorCloseAfter'
      :jsoneditorOpenAfter='jsoneditorOpenAfter'
      :isEditColumns='isEditColumns||configData.isEditColumns'
    >
何虹's avatar
何虹 committed
265
    </jsoneditor>
何虹's avatar
何虹 committed
266 267 268 269 270
    <tableDeatil
      v-model='detailVisible'
      :cellDetailStyle='cellDetailStyle'
      :tableData='tableDataDetail'
    >
何虹's avatar
何虹 committed
271 272 273 274 275 276 277 278
    </tableDeatil>
    <el-dialog
      title="详情"
      :visible.sync="dialogVisiblePage"
      width="90%"
      :before-close="handleClose"
      :close-on-click-modal='false'
      :append-to-body='true'
何虹's avatar
何虹 committed
279 280 281 282 283 284
    >
      <iframe
        :src='pageSrc'
        style="width:100%;height:500px;padding-top:10px"
        sandbox="allow-same-origin allow-scripts allow-forms allow-top-navigation allow-popups"
      ></iframe>
何虹's avatar
何虹 committed
285 286
    </el-dialog>
    <tbaleColumsSet
何虹's avatar
何虹 committed
287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308
      v-model="dialogVisibleTbaleColums"
      :tableDataColums='tableDataColums'
      :allSourceData='allSourceData'
      :elInfo='elInfo'
      @submit="submitTableColums"
      :isEditColumns='isEditColumns'
    ></tbaleColumsSet>
    <dialogUpload
      @importSuccess='importSuccess'
      :entityConfig='entityConfig'
      :currentImportItem='currentImportItem'
      v-model="dialogUploadVisible"
      @submit="submitUpload"
    ></dialogUpload>
    <dialogIframe
      :entityManger='entityManger'
      @importSuccess='importSuccess'
      :currentImportItem='currentImportItem'
      :entityConfig='entityConfig'
      v-model="dialogIframeVisible"
      :src='dialogIframeSrc'
    ></dialogIframe>
何虹's avatar
何虹 committed
309 310 311
  </div>
</template>
<script>
何虹's avatar
何虹 committed
312 313 314 315 316 317 318 319 320 321 322 323
import commonUtility from '../funTools/commonUtility'
import uuidv1 from 'uuid/v1'
import mes_style from './mes_style'
import screen_style from './screen_style'
import _ from 'lodash'
import request from '../funTools/request'
import tableDeatil from './tableDetail'
import jsoneditor from '../common/jsoneditor'
import childItem from './ItemComponentChild'
import tbaleColumsSet from '../common/tbaleColumsSet'
import dialogUpload from '../common/dialogTemplate/dialogUpload'
import dialogIframe from '../common/dialogTemplate/dialogIframe'
何虹's avatar
.  
何虹 committed
324 325 326 327 328 329
// const tableDeatil = r => require.ensure([], () => r(require('./tableDetail')), 'tableDeatil_')
// const childItem = r => require.ensure([], () => r(require('./ItemComponentChild')), 'ItemComponentChild_')
// const jsoneditor = r => require.ensure([], () => r(require('../common/jsoneditor')), 'jsoneditor_')
// const dialogUpload = r => require.ensure([], () => r(require('../common/dialogTemplate/dialogUpload')), 'dialogUpload_')
// const dialogIframe = r => require.ensure([], () => r(require('../common/dialogTemplate/dialogIframe')), 'dialogIframe_')
// const tbaleColumsSet = r => require.ensure([], () => r(require('../common/tbaleColumsSet')), 'tbaleColumsSet_')
何虹's avatar
何虹 committed
330 331 332

export default {
  components: {
何虹's avatar
.  
何虹 committed
333 334 335 336 337
    jsoneditor,
    tableDeatil,
    childItem,
    tbaleColumsSet,
    dialogUpload,
何虹's avatar
何虹 committed
338
    dialogIframe
何虹's avatar
何虹 committed
339
  },
何虹's avatar
何虹 committed
340
  name: 'hsTable',
何虹's avatar
何虹 committed
341
  props: {
何虹's avatar
何虹 committed
342 343
    importInfo: {
      // 导入信息
何虹's avatar
何虹 committed
344 345
      type: Array,
      default() {
何虹's avatar
何虹 committed
346
        return []
何虹's avatar
何虹 committed
347 348 349 350 351
      }
    },
    isEditColumns: {}, // 是否可编辑列
    maxHeight: {},
    height: {},
何虹's avatar
何虹 committed
352 353
    elInfo: {
      // 组件信息
何虹's avatar
何虹 committed
354 355
      type: Object,
      default() {
何虹's avatar
何虹 committed
356
        return {}
何虹's avatar
何虹 committed
357 358
      }
    },
何虹's avatar
何虹 committed
359 360
    allSourceData: {
      // 数据和配置
何虹's avatar
何虹 committed
361 362 363 364 365
      type: Object,
      default() {
        return {
          config: {},
          sourceData: [],
何虹's avatar
何虹 committed
366 367
          picture_url: ''
        }
何虹's avatar
何虹 committed
368 369 370 371 372
      }
    },
    isCarousel: {
      type: Boolean,
      default() {
何虹's avatar
何虹 committed
373
        return true
何虹's avatar
何虹 committed
374 375 376 377 378 379
      }
    },
    params: {
      type: Object,
      default() {
        return {
何虹's avatar
何虹 committed
380 381 382 383
          el: 'hsTable',
          page: 'page1',
          position: 'table1'
        }
何虹's avatar
何虹 committed
384 385 386 387 388 389 390 391 392
      }
    },
    layout: {},
    jsoneditorCloseAfter: {
      type: Function
    },
    jsoneditorOpenAfter: {
      type: Function
    },
何虹's avatar
何虹 committed
393 394
    getSourceData: {
      // 获取所有数据
何虹's avatar
何虹 committed
395 396
      type: Function
    },
何虹's avatar
何虹 committed
397 398
    toggleRow: {
      // 外部传入的当前行
何虹's avatar
何虹 committed
399 400
    },
    entityConfig: {}, // 实体
何虹's avatar
何虹 committed
401 402
    readonly: {
      // 是否只读
何虹's avatar
何虹 committed
403
    },
何虹's avatar
何虹 committed
404 405
    handleColumns: {
      // 外部传入的操作列
何虹's avatar
何虹 committed
406 407
      type: Array,
      default() {
何虹's avatar
何虹 committed
408
        return []
何虹's avatar
何虹 committed
409 410
      }
    },
何虹's avatar
何虹 committed
411 412
    dtl_list: {
      // 外部传入的操作列
何虹's avatar
何虹 committed
413 414
      type: Array,
      default() {
何虹's avatar
何虹 committed
415
        return []
何虹's avatar
何虹 committed
416 417
      }
    },
何虹's avatar
何虹 committed
418 419
    fromWhere: {
      // 来自哪里的表格 列表 or 详情
何虹's avatar
何虹 committed
420
      default: 'list'
何虹's avatar
何虹 committed
421
    },
何虹's avatar
何虹 committed
422
    entityManger: {} // 实体manger
何虹's avatar
何虹 committed
423 424 425
  },
  data() {
    return {
何虹's avatar
何虹 committed
426 427
      imgUrl: '',
      elId: '',
何虹's avatar
何虹 committed
428 429 430 431 432 433
      tableData: [],
      configData: {
        toolItems: [],
        handleColumns: []
      },
      jsoneditorVisible: false,
何虹's avatar
何虹 committed
434 435
      tableStyle: '',
      imgStyle: '',
何虹's avatar
何虹 committed
436 437 438 439 440 441 442
      pageArr: {},
      page: 0,
      currentPage: 0,
      grouptableData: [],
      tableObj: {},
      time: 0,
      timer: null,
何虹's avatar
何虹 committed
443
      fit: 'fill',
何虹's avatar
何虹 committed
444 445 446 447 448 449 450 451
      paging: null,
      paginationPage: 1,
      paginationPageSize: 50,
      detailVisible: false,
      detailVisible2: false,
      tableDataDetail: [],
      tableHeader: [],
      outBoxDom: null,
何虹's avatar
何虹 committed
452 453
      maxHeight_: 'none',
      isPicture: '',
何虹's avatar
何虹 committed
454 455 456 457 458 459 460 461 462
      columnsProp: [],
      visible2: false,
      cellDetailStyle: {},
      paginationTotal: 0,
      total: {},
      headerCellStyleSetting_: {},
      columnsConfig: [],
      pageSizes: [10, 20, 50, 100, 200, 1000],
      subjoinStyle: {
何虹's avatar
何虹 committed
463
        hyperlink: {
何虹's avatar
何虹 committed
464 465
          'text-decoration': 'underline',
          cursor: 'pointer'
何虹's avatar
何虹 committed
466
        },
何虹's avatar
何虹 committed
467
        asyncQueryDetail: {
何虹's avatar
何虹 committed
468 469
          'text-decoration': 'underline',
          cursor: 'pointer'
何虹's avatar
何虹 committed
470 471 472
        }
      },
      dialogVisiblePage: false,
何虹's avatar
何虹 committed
473
      pageSrc: '',
何虹's avatar
何虹 committed
474 475 476 477 478 479 480
      handleWidth: 200,
      allColumsConfig: {},
      dataChangeNumber: 0,
      tableDataColums: [],
      dialogVisibleTbaleColums: false,
      dialogUploadVisible: false,
      currentImportItem: null,
何虹's avatar
何虹 committed
481
      dialogIframeSrc: '',
何虹's avatar
何虹 committed
482 483 484 485
      dialogIframeVisible: false,
      tableDataFirst: null, // table[0]第一行数据
      hsDyncProp: false, // 是否含有动态列
      targetRowInner: {}, // 当前行
何虹's avatar
何虹 committed
486
      dtlDialogFormDisAbled: false,
何虹's avatar
何虹 committed
487 488
      highlightCurrentRow: true
    }
何虹's avatar
何虹 committed
489 490 491 492
  },
  watch: {
    targetRowInner: {
      handler: function(newVal, oldVal) {
何虹's avatar
何虹 committed
493
        this.$emit('setCurrentRow', newVal)
何虹's avatar
何虹 committed
494 495 496 497 498
      },
      deep: true
    },
    toggleRow: {
      handler: function(newVal, oldVal) {
何虹's avatar
何虹 committed
499
        this.setRowSelect(newVal)
何虹's avatar
何虹 committed
500 501 502 503 504
      },
      deep: true
    },
    paging: {
      handler: function(newVal, oldVal) {
何虹's avatar
何虹 committed
505
        if (!newVal) return
何虹's avatar
何虹 committed
506 507
        const per_page = Array.isArray(newVal)
          ? parseInt(newVal[0].per_page)
何虹's avatar
何虹 committed
508 509
          : parseInt(newVal.per_page)
        const list = [10, 20, 50, 100, 200, 1000]
何虹's avatar
何虹 committed
510
        if (!list.includes(per_page)) {
何虹's avatar
何虹 committed
511
          list.unshift(per_page)
何虹's avatar
何虹 committed
512
        }
何虹's avatar
何虹 committed
513
        this.pageSizes = list
何虹's avatar
何虹 committed
514 515 516
      },
      deep: true
    },
何虹's avatar
何虹 committed
517
    'allSourceData.sourceData': {
何虹's avatar
何虹 committed
518
      handler: function(newVal, oldVal) {
何虹's avatar
何虹 committed
519
        this.initTabelData(newVal)
何虹's avatar
何虹 committed
520 521 522
      },
      deep: true
    },
何虹's avatar
何虹 committed
523
    'allSourceData.config': {
何虹's avatar
何虹 committed
524
      handler: function(newVal, oldVal) {
何虹's avatar
何虹 committed
525
        this.initTabelconfig(newVal)
何虹's avatar
何虹 committed
526 527 528 529 530 531
      },
      deep: true
    },
    isCarousel: {
      handler: function(newVal, oldVal) {
        if (newVal && this.timer !== null) {
何虹's avatar
何虹 committed
532
          this.timer = setInterval(this.changeTableDataFun, newVal)
何虹's avatar
何虹 committed
533
        } else {
何虹's avatar
何虹 committed
534 535
          clearInterval(this.timer) // 清除定时器
          this.timer = null
何虹's avatar
何虹 committed
536 537 538 539 540 541 542
        }
      },
      deep: true
    },
    time: {
      handler: function(newVal, oldVal) {
        if (newVal > 0 && this.isCarousel) {
何虹's avatar
何虹 committed
543
          this.timer = setInterval(this.changeTableDataFun, newVal)
何虹's avatar
何虹 committed
544 545 546 547 548 549 550
        }
      },
      deep: true
    }
  },
  computed: {
    handleColumns_: function() {
何虹's avatar
何虹 committed
551 552 553
      const list1 = _.cloneDeep(this.handleColumns || [])
      const list2 = _.cloneDeep(this.configData.handleColumns || [])
      this.mergeData(list1, list2)
何虹's avatar
何虹 committed
554
      list2.forEach(item => {
何虹's avatar
何虹 committed
555 556 557
        const { click, isHide } = item
        const isHideType = typeof isHide === 'boolean'
        if (!isHideType) return
何虹's avatar
何虹 committed
558
        switch (click) {
何虹's avatar
何虹 committed
559 560 561
          case '$addRow':
          case '$deleteRow':
            if (this.fromWhere === 'hdrDtl') {
何虹's avatar
何虹 committed
562
              if (this.readonly) {
何虹's avatar
何虹 committed
563
                this.$set(item, 'disabled', true)
何虹's avatar
何虹 committed
564
              } else {
何虹's avatar
何虹 committed
565
                this.$set(item, 'disabled', false)
何虹's avatar
何虹 committed
566 567
              }
            }
何虹's avatar
何虹 committed
568 569
            if (this.readonly && this.fromWhere !== 'hdrDtl') {
              this.$set(item, 'disabled', true)
何虹's avatar
何虹 committed
570
            }
何虹's avatar
何虹 committed
571
            break
何虹's avatar
何虹 committed
572
        }
何虹's avatar
何虹 committed
573 574
      })
      return list2
何虹's avatar
何虹 committed
575 576
    },
    tool_list: function() {
何虹's avatar
何虹 committed
577 578 579 580
      const newList = []
      const newVal_ = _.cloneDeep(this.importInfo)
      const toolItems = _.cloneDeep(this.configData.toolItems || [])
      newList.push(...newVal_, ...toolItems)
何虹's avatar
何虹 committed
581
      newList.forEach(item => {
何虹's avatar
何虹 committed
582 583
        const { click, isHide } = item
        const isHideType = typeof isHide === 'boolean'
何虹's avatar
何虹 committed
584
        switch (click) {
何虹's avatar
何虹 committed
585 586 587
          case '$addRow':
          case '$deleteRow':
            if (this.fromWhere === 'hdrDtl') {
何虹's avatar
何虹 committed
588
              if (this.readonly) {
何虹's avatar
何虹 committed
589
                this.$set(item, 'disabled', true)
何虹's avatar
何虹 committed
590
              } else if (isHide === undefined || isHideType) {
何虹's avatar
何虹 committed
591
                this.$set(item, 'disabled', false)
何虹's avatar
何虹 committed
592 593
              }
            }
何虹's avatar
何虹 committed
594 595
            if (this.readonly && this.fromWhere !== 'hdrDtl') {
              this.$set(item, 'disabled', true)
何虹's avatar
何虹 committed
596
            }
何虹's avatar
何虹 committed
597 598 599 600
            break
          case '$excelImportItem':
          case '$dataImportItem':
            if (this.fromWhere === 'hdrDtl') {
何虹's avatar
何虹 committed
601
              if (this.readonly) {
何虹's avatar
何虹 committed
602
                this.$set(item, 'disabled', true)
何虹's avatar
何虹 committed
603
              } else if (isHide === undefined || isHideType) {
何虹's avatar
何虹 committed
604
                this.$set(item, 'disabled', false)
何虹's avatar
何虹 committed
605 606
              }
            }
何虹's avatar
何虹 committed
607
            break
何虹's avatar
何虹 committed
608
        }
何虹's avatar
何虹 committed
609 610
      })
      return newList || []
何虹's avatar
何虹 committed
611 612
    },
    showSummary: function() {
何虹's avatar
何虹 committed
613
      const tkeys = Object.keys(this.total)
何虹's avatar
何虹 committed
614 615
      const sumKey = this.columnsConfig.reduce((prve, curr) => {
        if (curr.summarizing) {
何虹's avatar
何虹 committed
616
          prve.push(curr.prop)
何虹's avatar
何虹 committed
617
        }
何虹's avatar
何虹 committed
618 619 620
        return prve
      }, [])
      return !!tkeys.length || !!sumKey.length
何虹's avatar
何虹 committed
621 622 623
    }
  },
  created() {
何虹's avatar
何虹 committed
624
    this.elId = uuidv1() // 获取随机id
何虹's avatar
何虹 committed
625 626
  },
  mounted() {
何虹's avatar
何虹 committed
627
    this.initTable(this.allSourceData)
何虹's avatar
何虹 committed
628 629
    this.$nextTick(() => {
      setTimeout(() => {
何虹's avatar
何虹 committed
630 631 632
        this.showEditJsonDialog()
      }, 1000)
    })
何虹's avatar
何虹 committed
633 634 635
  },
  destroyed() {
    if (this.outBoxDom) {
何虹's avatar
何虹 committed
636
      this.outBoxDom.removeEventListener('mousedown', this.boxEventMouse)
何虹's avatar
何虹 committed
637
    }
何虹's avatar
何虹 committed
638
    this.chart = null
何虹's avatar
何虹 committed
639 640
  },
  beforeDestroy() {
何虹's avatar
何虹 committed
641
    clearInterval(this.timer) // 清除定时器
何虹's avatar
何虹 committed
642
    if (this.chart) {
何虹's avatar
何虹 committed
643
      this.chart.clear()
何虹's avatar
何虹 committed
644
    }
何虹's avatar
何虹 committed
645 646 647 648
    this.grouptableData = null
    this.chart = null
    this.timer = null
    this.time = 0
何虹's avatar
何虹 committed
649 650 651
  },
  methods: {
    disabledItem(item, row) {
何虹's avatar
何虹 committed
652 653
      const { disabled } = item
      const type = typeof disabled
何虹's avatar
何虹 committed
654 655 656
      const data = {
        row,
        item
何虹's avatar
何虹 committed
657 658 659 660 661
      }
      if (type === 'boolean') {
        return disabled
      } else if (type === 'function') {
        return disabled(data)
何虹's avatar
何虹 committed
662
      } else {
何虹's avatar
何虹 committed
663
        return false
何虹's avatar
何虹 committed
664 665 666
      }
    },
    showItem(item, row) {
何虹's avatar
何虹 committed
667 668
      const { isHide } = item
      const type = typeof isHide
何虹's avatar
何虹 committed
669 670 671
      const data = {
        row,
        item
何虹's avatar
何虹 committed
672 673 674 675
      }
      if (type === 'boolean') {
        return !isHide
      } else if (type === 'function') {
何虹's avatar
何虹 committed
676
        try {
何虹's avatar
何虹 committed
677
          return !isHide(data)
何虹's avatar
何虹 committed
678
        } catch (error) {
何虹's avatar
何虹 committed
679 680 681
          console.log(error)
          const funName = '$' + isHide
          this.$message.error(`${funName} 有误`)
何虹's avatar
何虹 committed
682 683
        }
      } else {
何虹's avatar
何虹 committed
684
        return true
何虹's avatar
何虹 committed
685 686 687
      }
    },
    cumputedisabled(item) {
何虹's avatar
何虹 committed
688
      return !!item.disabled
何虹's avatar
何虹 committed
689 690
    },
    linkDtl(item, row) {
何虹's avatar
何虹 committed
691
      this.$emit('RowClick', {
何虹's avatar
何虹 committed
692
        row: row
何虹's avatar
何虹 committed
693 694
      })
      const that = this
何虹's avatar
何虹 committed
695
      setTimeout(() => {
何虹's avatar
何虹 committed
696 697 698 699 700 701 702 703 704
        const tartItem = that.dtl_list.find(item__ => item__.url === item.url)
        this.$emit('linkDtl', tartItem, row)
      }, 100)
    },
    mergeData(data1, data2, prop = 'click') {
      // data2 覆盖data1
      if (!Array.isArray(data1)) return
      if (!Array.isArray(data2)) return
      const list = []
何虹's avatar
何虹 committed
705
      data1.forEach(item => {
何虹's avatar
何虹 committed
706
        let target = data2.find(_item => _item[prop] === item[prop])
何虹's avatar
何虹 committed
707
        if (target) {
何虹's avatar
何虹 committed
708
          target = Object.assign(item, target)
何虹's avatar
何虹 committed
709
        } else {
何虹's avatar
何虹 committed
710
          list.push(item)
何虹's avatar
何虹 committed
711
        }
何虹's avatar
何虹 committed
712 713
      })
      data2.push(...list)
何虹's avatar
何虹 committed
714 715
    },
    itemClickActionHandle(item, index, row) {
何虹's avatar
何虹 committed
716 717 718 719 720 721 722 723
      const { click } = item
      const type = typeof click
      if (type === 'string' && click.startsWith('$')) {
        const item_ = Object.assign({}, item)
        item_.click = item_.click.substr(1)
        this.itemClick(item_, index)
      } else if (type === 'function') {
        click(row)
何虹's avatar
何虹 committed
724 725 726
      }
    },
    itemClickAction(item, index) {
何虹's avatar
何虹 committed
727 728 729 730 731 732 733 734
      const { click } = item
      const type = typeof click
      if (type === 'string' && click.startsWith('$')) {
        const item_ = Object.assign({}, item)
        item_.click = item_.click.substr(1)
        this.itemClick(item_)
      } else if (type === 'function') {
        click(item)
何虹's avatar
何虹 committed
735 736 737
      }
    },
    itemClick(item, index) {
何虹's avatar
何虹 committed
738
      const { click } = item
何虹's avatar
何虹 committed
739
      switch (click) {
何虹's avatar
何虹 committed
740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761
        case 'exportCurrPageData':
          this.exportExcel(1)
          break
        case 'exportAllPageData':
          this.exportExcel(2)
          break
        case 'tableColumnSet':
          this.tableColumnSet()
          break
        case 'dataImportItem':
        case 'excelImportItem':
          this.importItem(item)
          break
        case 'addRow':
          this.addRow(index)
          break
        case 'deleteRow':
          this.deleteRow(index)
          break
        case 'editRow':
          this.editRow(index)
          break
何虹's avatar
何虹 committed
762 763 764 765 766 767
      }
    },
    editRow(index) {
      const data = {
        row: this.tableData[index],
        index: index
何虹's avatar
何虹 committed
768 769
      }
      this.$emit('editRow', data)
何虹's avatar
何虹 committed
770 771
    },
    addRow(index) {
何虹's avatar
何虹 committed
772
      this.$emit('addRow', index)
何虹's avatar
何虹 committed
773 774
    },
    deleteRow(index) {
何虹's avatar
何虹 committed
775 776
      if (typeof index === 'number') {
        this.tableData.splice(index, 1)
何虹's avatar
何虹 committed
777
      } else {
何虹's avatar
何虹 committed
778
        // 逆向循环删除数组某些项
何虹's avatar
何虹 committed
779
        var arr = this.tableData
何虹's avatar
何虹 committed
780 781
        for (let i = arr.length - 1; i >= 0; i--) {
          if (arr[i].isSelected) {
何虹's avatar
何虹 committed
782
            arr.splice(i, 1)
何虹's avatar
何虹 committed
783 784 785 786 787
          }
        }
      }
    },
    initTable(data) {
何虹's avatar
何虹 committed
788 789 790
      const { config, sourceData } = data
      this.initTabelData(sourceData)
      this.initTabelconfig(config)
何虹's avatar
何虹 committed
791 792
    },
    getSessionInfo() {
何虹's avatar
何虹 committed
793
      const { db_name, db_code } = commonUtility.parseUrlQueryString()
何虹's avatar
何虹 committed
794 795 796
      const {
        appCode,
        pagename
何虹's avatar
何虹 committed
797 798
      } = commonUtility.parseUrlQueryBIDyncAppcodePageName()
      const dbName = db_name || ''
何虹's avatar
何虹 committed
799 800 801 802 803
      const obj = _.cloneDeep({
        dbName,
        appCode,
        page: pagename,
        db_code
何虹's avatar
何虹 committed
804 805
      })
      return obj
何虹's avatar
何虹 committed
806 807
    },
    importSuccess(data) {
何虹's avatar
何虹 committed
808 809
      this.$emit('importSuccess', data)
      this.dialogIframeVisible = false
何虹's avatar
何虹 committed
810 811
    },
    submitUpload(fileList) {
何虹's avatar
何虹 committed
812 813
      const file = fileList[0]
      this.$emit('importItem', file.raw, this.currentImportItem)
何虹's avatar
何虹 committed
814 815
    },
    importItem(item) {
何虹's avatar
何虹 committed
816 817 818
      this.currentImportItem = item
      this.$emit('setCurrentImportItem', item)
      const parms = item.parms
何虹's avatar
何虹 committed
819 820
      if (!item.url) {
        // excel 导入
何虹's avatar
何虹 committed
821
        this.dialogUploadVisible = true
何虹's avatar
何虹 committed
822 823
      } else {
        if (!item.import_name) {
何虹's avatar
何虹 committed
824 825
          this.$message.error('请配置-import_name')
          return
何虹's avatar
何虹 committed
826 827
        }
        // 数据导入
何虹's avatar
何虹 committed
828 829 830 831 832
        const href = location.href
        const startUrl = href.split('#')[0]
        let url = item.url
        if (item.url.includes('?')) {
          url = item.url + '&fromMenu=1'
何虹's avatar
何虹 committed
833
        } else {
何虹's avatar
何虹 committed
834
          url = item.url + '?fromMenu=1'
何虹's avatar
何虹 committed
835
        }
何虹's avatar
何虹 committed
836
        let parmsStr = ''
何虹's avatar
何虹 committed
837
        for (const key in parms) {
何虹's avatar
何虹 committed
838
          parmsStr += `&${key}=${parms[key]}`
何虹's avatar
何虹 committed
839
        }
何虹's avatar
何虹 committed
840
        const appInfo = this.getSessionInfo()
何虹's avatar
何虹 committed
841
        const url_ =
何虹's avatar
何虹 committed
842 843 844
          `${startUrl}#${url}` + `&db_name=${appInfo.dbName}` + parmsStr
        this.dialogIframeSrc = url_
        this.dialogIframeVisible = true
何虹's avatar
何虹 committed
845 846 847 848 849
      }
    },
    getPageInfo(info = this.elInfo) {
      const data = {
        sControl: info.position
何虹's avatar
何虹 committed
850 851
      }
      return request.getSql(data)
何虹's avatar
何虹 committed
852 853
    },
    async submitTableColums(data, flage) {
何虹's avatar
何虹 committed
854 855
      const res = await this.getPageInfo()
      let paramsData = {}
何虹's avatar
何虹 committed
856
      if (!res || (res && Array.isArray(res) && !res.length)) {
何虹's avatar
何虹 committed
857 858 859 860 861
        const { config, sourceData } = this.allSourceData
        paramsData.json_config = JSON.stringify(config)
        paramsData.json_data = JSON.stringify(sourceData)
        paramsData.is_mock = 1
        paramsData.query_sql = ''
何虹's avatar
何虹 committed
862
      } else {
何虹's avatar
何虹 committed
863
        paramsData = res[0]
何虹's avatar
何虹 committed
864
      }
何虹's avatar
何虹 committed
865 866 867
      const { query_sql, json_config, json_data, is_mock } = paramsData
      const json_config_ = JSON.parse(json_config)
      json_config_.columnsConfig = data
何虹's avatar
何虹 committed
868 869 870 871 872 873 874
      const dataw = {
        sControl: this.elInfo.position,
        sConfig: json_config_,
        sData: JSON.parse(json_data),
        sQuerySql: query_sql,
        elInfo: this.elInfo,
        is_mock: is_mock ? 1 : 0
何虹's avatar
何虹 committed
875
      }
何虹's avatar
何虹 committed
876
      request.runSave(dataw).then(res => {
何虹's avatar
何虹 committed
877 878
        if (flage !== 'columnStyleSet') {
          this.dialogVisibleTbaleColums = false
何虹's avatar
何虹 committed
879
        }
何虹's avatar
何虹 committed
880 881
        this.configData.columnsConfig = data
      })
何虹's avatar
何虹 committed
882 883
    },
    tableColumnSet() {
何虹's avatar
何虹 committed
884
      const config = _.cloneDeep(this.configData)
何虹's avatar
何虹 committed
885
      if (config && config.columnsConfig && config.columnsConfig.length) {
何虹's avatar
何虹 committed
886
        this.tableDataColums = [...config.columnsConfig]
何虹's avatar
何虹 committed
887
      } else {
何虹's avatar
何虹 committed
888
        this.tableDataColums = [{}]
何虹's avatar
何虹 committed
889 890 891
      }
      this.tableDataColums.forEach((item, index) => {
        if (item.childs) {
何虹's avatar
何虹 committed
892
          this.tableDataColums.splice(index, 1, ...item.childs)
何虹's avatar
何虹 committed
893
        }
何虹's avatar
何虹 committed
894 895
      })
      this.dialogVisibleTbaleColums = true
何虹's avatar
何虹 committed
896 897 898
    },
    selectionChange(data) {
      data.forEach(item => {
何虹's avatar
何虹 committed
899 900 901
        this.$set(item, 'isSelected', true)
      })
      this.$emit('selectionChange', data)
何虹's avatar
何虹 committed
902 903
    },
    jumpItem(prop) {
何虹's avatar
何虹 committed
904 905
      const target = this.columnsConfig.find(
        item => item.prop === prop && !item.isHide
何虹's avatar
何虹 committed
906
      )
何虹's avatar
何虹 committed
907 908
      const target1 = this.columnsProp.find(
        item => item.prop === prop && !item.isHide
何虹's avatar
何虹 committed
909 910
      )
      return target || target1
何虹's avatar
何虹 committed
911 912 913
    },
    set_row_style(row) {
      if (
何虹's avatar
何虹 committed
914
        row.bill_status === '5' ||
何虹's avatar
何虹 committed
915 916 917 918
        row.usable === false ||
        row.bUsable === false
      ) {
        return {
何虹's avatar
何虹 committed
919 920 921
          'text-decoration': 'line-through',
          color: '#afafaf'
        }
何虹's avatar
何虹 committed
922 923 924
      }
    },
    tableRowDblclick(row, column, event) {
何虹's avatar
何虹 committed
925
      const disaledDblClick = this.configData.disaledDblClick
何虹's avatar
何虹 committed
926
      if (!disaledDblClick) {
何虹's avatar
何虹 committed
927
        this.$emit('tableRowDblclick', row)
何虹's avatar
何虹 committed
928 929 930 931
      }
    },
    selectAll(selection) {
      this.tableData.forEach(item => {
何虹's avatar
何虹 committed
932 933
        this.$set(item, 'isSelected', !!selection.length)
      })
何虹's avatar
何虹 committed
934 935
      if (!selection.length) {
        // 清空时 去掉当前行
何虹's avatar
何虹 committed
936
        this.$refs.hsTable.setCurrentRow()
何虹's avatar
何虹 committed
937 938 939
      }
    },
    selectCheckBox(selection, row) {
何虹's avatar
何虹 committed
940
      this.$set(row, 'isSelected', !row.isSelected)
何虹's avatar
何虹 committed
941 942
      // 设置当前行是否高亮
      if (!row.isSelected) {
何虹's avatar
何虹 committed
943 944
        this.$refs.hsTable.setCurrentRow()
        this.targetRowInner = {}
何虹's avatar
何虹 committed
945
      } else {
何虹's avatar
何虹 committed
946 947
        this.$refs.hsTable.setCurrentRow(row)
        this.targetRowInner = row
何虹's avatar
何虹 committed
948 949 950 951
      }
    },

    async exportExcel(flage) {
何虹's avatar
何虹 committed
952 953
      const data = this.tableData
      const columnsProp_ = []
何虹's avatar
何虹 committed
954 955
      this.columnsProp.forEach(item => {
        if (item.childs) {
何虹's avatar
何虹 committed
956
          columnsProp_.push(...item.childs)
何虹's avatar
何虹 committed
957
        } else {
何虹's avatar
何虹 committed
958
          columnsProp_.push(item)
何虹's avatar
何虹 committed
959
        }
何虹's avatar
何虹 committed
960 961
      })
      const tHeader = []
何虹's avatar
何虹 committed
962
      columnsProp_.forEach(item => {
何虹's avatar
何虹 committed
963 964 965 966
        const str = `${item.label}=${item.prop}`
        tHeader.push(str)
      })
      const exportExcelName = this.configData.exportExcelName || '表'
何虹's avatar
何虹 committed
967
      if (flage === 2) {
何虹's avatar
何虹 committed
968 969 970
        const result = await this.getSourceData({
          param: { per_page: -1 },
          elInfo: this.elInfo
何虹's avatar
何虹 committed
971
        })
何虹's avatar
何虹 committed
972
        if (Array.isArray(result) && result.length) {
何虹's avatar
何虹 committed
973
          let exportExcelData = []
何虹's avatar
何虹 committed
974
          if (result[0].json_data) {
何虹's avatar
何虹 committed
975
            const json_data =
何虹's avatar
何虹 committed
976
              typeof result[0].json_data === 'string'
何虹's avatar
何虹 committed
977
                ? JSON.parse(result[0].json_data)
何虹's avatar
何虹 committed
978
                : result[0].json_data
何虹's avatar
何虹 committed
979 980
            exportExcelData = Array.isArray(json_data)
              ? json_data
何虹's avatar
何虹 committed
981
              : json_data.table
何虹's avatar
何虹 committed
982
          } else {
何虹's avatar
何虹 committed
983
            exportExcelData = result
何虹's avatar
何虹 committed
984
          }
何虹's avatar
何虹 committed
985 986 987 988
          this.$utilsExcel.exportToExcel(
            tHeader,
            exportExcelData,
            exportExcelName
何虹's avatar
何虹 committed
989
          )
何虹's avatar
何虹 committed
990
        } else {
何虹's avatar
何虹 committed
991
          this.$message.warning('暂无数据~')
何虹's avatar
何虹 committed
992 993
        }
      } else {
何虹's avatar
何虹 committed
994
        this.$utilsExcel.exportToExcel(tHeader, data, exportExcelName)
何虹's avatar
何虹 committed
995 996 997
      }
    },
    handleClose() {
何虹's avatar
何虹 committed
998
      this.dialogVisiblePage = false
何虹's avatar
何虹 committed
999 1000
    },
    headerClick(column, event) {
何虹's avatar
何虹 committed
1001 1002
      const target = event.target
      const className = target.className
何虹's avatar
何虹 committed
1003 1004
      const data = {
        prop: column.property,
何虹's avatar
何虹 committed
1005 1006 1007
        order: ''
      }
      if (className && className.includes('sort-caret')) {
何虹's avatar
何虹 committed
1008
        if (
何虹's avatar
何虹 committed
1009 1010
          className.includes('ascending') &&
          !target.className.includes('activeBottomSort')
何虹's avatar
何虹 committed
1011
        ) {
何虹's avatar
何虹 committed
1012 1013
          data.order = '1'
          target.className = target.className + ' activeBottomSort'
何虹's avatar
何虹 committed
1014
          target.nextSibling.className = target.nextSibling.className.replace(
何虹's avatar
何虹 committed
1015 1016 1017
            'activeTopSort',
            ''
          )
何虹's avatar
何虹 committed
1018
        } else if (
何虹's avatar
何虹 committed
1019 1020
          className.includes('ascending') &&
          target.className.includes('activeBottomSort')
何虹's avatar
何虹 committed
1021
        ) {
何虹's avatar
何虹 committed
1022 1023
          data.order = ''
          target.className = target.className.replace('activeBottomSort', '')
何虹's avatar
何虹 committed
1024
        } else if (
何虹's avatar
何虹 committed
1025 1026
          className.includes('descending') &&
          !target.className.includes('activeTopSort')
何虹's avatar
何虹 committed
1027
        ) {
何虹's avatar
何虹 committed
1028 1029
          data.order = '0'
          target.className = target.className + ' activeTopSort'
何虹's avatar
何虹 committed
1030
          target.previousSibling.className = target.previousSibling.className.replace(
何虹's avatar
何虹 committed
1031 1032 1033
            'activeBottomSort',
            ''
          )
何虹's avatar
何虹 committed
1034
        } else if (
何虹's avatar
何虹 committed
1035 1036
          className.includes('descending') &&
          target.className.includes('activeTopSort')
何虹's avatar
何虹 committed
1037
        ) {
何虹's avatar
何虹 committed
1038 1039
          data.order = ''
          target.className = target.className.replace('activeTopSort', '')
何虹's avatar
何虹 committed
1040
        }
何虹's avatar
何虹 committed
1041
        this.$emit('sortChange', data)
何虹's avatar
何虹 committed
1042 1043
      }
    },
何虹's avatar
何虹 committed
1044
    ascendingClick() {},
何虹's avatar
何虹 committed
1045
    renderHeader(h, { column, $index }) {
何虹's avatar
何虹 committed
1046
      const { property, label } = column
何虹's avatar
何虹 committed
1047
      const target = this.columnsProp.find(item => {
何虹's avatar
何虹 committed
1048 1049
        return item.prop === property && !item.isHide
      })
何虹's avatar
何虹 committed
1050
      if (!target) {
何虹's avatar
何虹 committed
1051
        return label
何虹's avatar
何虹 committed
1052
      }
何虹's avatar
何虹 committed
1053
      let innerHtml = column.label
何虹's avatar
何虹 committed
1054
      if (target && target.isRequired) {
何虹's avatar
何虹 committed
1055
        innerHtml = '<i style="color:red;">*</i>' + innerHtml
何虹's avatar
何虹 committed
1056 1057
      }
      if (target && target.isSort) {
何虹's avatar
何虹 committed
1058
        innerHtml +=
何虹's avatar
何虹 committed
1059
          '<span class="caret-wrapper"><i  class="sort-caret ascending"></i><i class="sort-caret descending"></i></span>'
何虹's avatar
何虹 committed
1060 1061
      }
      return h(
何虹's avatar
何虹 committed
1062
        'span',
何虹's avatar
何虹 committed
1063 1064 1065 1066 1067 1068 1069 1070
        {
          domProps: {
            innerHTML: innerHtml
          },
          on: {
            click: this.ascendingClick
          }
        },
何虹's avatar
何虹 committed
1071 1072
        [h('span')]
      )
何虹's avatar
何虹 committed
1073 1074 1075 1076 1077
    },
    sortChange(column) {
      const data = {
        prop: column.prop,
        order: column.order
何虹's avatar
何虹 committed
1078 1079
      }
      this.$emit('sortChange', data)
何虹's avatar
何虹 committed
1080
    },
何虹's avatar
何虹 committed
1081
    cellClickItem(value, action) {},
何虹's avatar
何虹 committed
1082 1083 1084 1085 1086
    cellDblclick(row, column, cell, event) {
      // const { property } = column
    },
    rowCellBoolean(value) {
      if (Number(value)) {
何虹's avatar
何虹 committed
1087
        return 'el-icon-check'
何虹's avatar
何虹 committed
1088
      } else {
何虹's avatar
何虹 committed
1089
        return 'el-icon-close'
何虹's avatar
何虹 committed
1090 1091 1092
      }
    },
    getSummaries(param) {
何虹's avatar
何虹 committed
1093 1094
      const { columns } = param
      const sums = []
何虹's avatar
何虹 committed
1095 1096
      const sumKey = this.columnsConfig.reduce((prve, curr) => {
        if (curr.summarizing) {
何虹's avatar
何虹 committed
1097
          prve.push(curr.prop)
何虹's avatar
何虹 committed
1098
        }
何虹's avatar
何虹 committed
1099 1100 1101
        return prve
      }, [])
      const sumObj = {}
何虹's avatar
何虹 committed
1102
      sumKey.forEach(key => {
何虹's avatar
何虹 committed
1103
        sumObj[key] = 0
何虹's avatar
何虹 committed
1104 1105
        this.tableData.forEach(item => {
          if (item[key]) {
何虹's avatar
何虹 committed
1106
            sumObj[key] += Number(item[key])
何虹's avatar
何虹 committed
1107
          }
何虹's avatar
何虹 committed
1108 1109 1110 1111
        })
      })
      const total_ = Object.assign(_.cloneDeep(this.total))
      const tkeys = Object.keys(total_)
何虹's avatar
何虹 committed
1112
      columns.forEach((column, index) => {
何虹's avatar
何虹 committed
1113
        const { property } = column
何虹's avatar
何虹 committed
1114
        if (index === 0) {
何虹's avatar
何虹 committed
1115
          sums[index] = '合计'
何虹's avatar
何虹 committed
1116 1117
        } else if (tkeys.length) {
          if (tkeys.includes(property)) {
何虹's avatar
何虹 committed
1118
            sums[index] = total_[property]
何虹's avatar
何虹 committed
1119
          } else {
何虹's avatar
何虹 committed
1120
            sums[index] = ''
何虹's avatar
何虹 committed
1121 1122 1123
          }
        } else if (sumKey.length) {
          if (sumKey.includes(property)) {
何虹's avatar
何虹 committed
1124
            sums[index] = sumObj[property]
何虹's avatar
何虹 committed
1125
          } else {
何虹's avatar
何虹 committed
1126
            sums[index] = ''
何虹's avatar
何虹 committed
1127 1128
          }
        }
何虹's avatar
何虹 committed
1129 1130
      })
      return sums
何虹's avatar
何虹 committed
1131 1132 1133
    },
    jumpDisable(row, key) {
      if (row[`_data_${key}`]) {
何虹's avatar
何虹 committed
1134
        return false
何虹's avatar
何虹 committed
1135
      } else {
何虹's avatar
何虹 committed
1136
        return true
何虹's avatar
何虹 committed
1137 1138 1139 1140
      }
    },
    showpopover(row, key, cell) {
      if (row[`_data_${key}`]) {
何虹's avatar
何虹 committed
1141 1142 1143 1144
        const _data_value = row[`_data_${key}`]
        this.tableDataDetail = _data_value
        if (!this.tableDataDetail.length) return
        this.tableHeader = Object.keys(this.tableDataDetail[0])
何虹's avatar
何虹 committed
1145 1146 1147 1148 1149
      } else {
        // this.tableDataDetail = []
      }
    },
    minWidthChildFun(label) {
何虹's avatar
何虹 committed
1150 1151 1152 1153
      const l = label.length
      const f = 12
      const minWidth = f * l // 加上一个文字长度
      return minWidth
何虹's avatar
何虹 committed
1154 1155 1156
    },
    minWidthFun(column, flage) {
      // 表示要自适应
何虹's avatar
何虹 committed
1157 1158 1159 1160 1161 1162
      const { width, label, prop: property } = column
      if (width) return width
      if (this.configData.isAdaptive) return
      if (!label) return
      const l = flage === 1 ? label.length : label.split('__')[1].length
      const f = 12
何虹's avatar
何虹 committed
1163 1164
      const sortList = this.columnsConfig.find(
        item => item.isSort && item.prop === property
何虹's avatar
何虹 committed
1165 1166
      )
      let minWidth = f * (l + 2)
何虹's avatar
何虹 committed
1167
      if (sortList) {
何虹's avatar
何虹 committed
1168
        minWidth = f * (l + 4)
何虹's avatar
何虹 committed
1169
      }
何虹's avatar
何虹 committed
1170
      return minWidth
何虹's avatar
何虹 committed
1171 1172
    },
    initTabelData(sourceData) {
何虹's avatar
何虹 committed
1173 1174 1175
      if (
        sourceData &&
        sourceData.picture_url &&
何虹's avatar
何虹 committed
1176
        sourceData.picture_url !== ''
何虹's avatar
何虹 committed
1177 1178
      ) {
        this.imgUrl =
何虹's avatar
何虹 committed
1179 1180 1181 1182 1183
          '/uploadAPI/file/' +
          sessionStorage.getItem('app_code') +
          '/' +
          this.allSourceData.picture_url
        this.isPicture = '1'
何虹's avatar
何虹 committed
1184
      } else {
何虹's avatar
何虹 committed
1185
        this.isPicture = '0'
何虹's avatar
何虹 committed
1186 1187 1188
      }
      if (sourceData) {
        if (Array.isArray(sourceData)) {
何虹's avatar
何虹 committed
1189 1190 1191
          this.tableData = sourceData
          this.paging = null
          this.total = {}
何虹's avatar
何虹 committed
1192
        } else {
何虹's avatar
何虹 committed
1193
          const total = sourceData.total || sourceData.set3
何虹's avatar
何虹 committed
1194 1195
          if (total) {
            if (Array.isArray(total)) {
何虹's avatar
何虹 committed
1196
              this.total = total[0]
何虹's avatar
何虹 committed
1197
            } else {
何虹's avatar
何虹 committed
1198
              this.total = total
何虹's avatar
何虹 committed
1199 1200
            }
          }
何虹's avatar
何虹 committed
1201 1202
          this.tableData = sourceData.table || sourceData.set1 || []
          this.paging = sourceData.paging || sourceData.set2 // 分页信息
何虹's avatar
何虹 committed
1203 1204
          if (this.paging) {
            if (Array.isArray(this.paging)) {
何虹's avatar
何虹 committed
1205 1206 1207
              this.paginationPage = parseInt(this.paging[0].page) // 当前页
              this.paginationPageSize = parseInt(this.paging[0].per_page) // 分页条数
              this.paginationTotal = parseInt(this.paging[0].total)
何虹's avatar
何虹 committed
1208
            } else {
何虹's avatar
何虹 committed
1209 1210 1211
              this.paginationPage = parseInt(this.paging.page) // 当前页
              this.paginationPageSize = parseInt(this.paging.per_page) // 分页条数
              this.paginationTotal = parseInt(this.paging.total)
何虹's avatar
何虹 committed
1212 1213 1214 1215 1216
            }
          }
        }
      }
      if (this.tableData.length) {
何虹's avatar
何虹 committed
1217 1218
        const data0 = this.tableData[0]
        this.tableDataFirst = _.cloneDeep(data0)
何虹's avatar
何虹 committed
1219 1220
        if (data0._id) {
          // 此时有动态列 且 此时数据为空
何虹's avatar
何虹 committed
1221
          this.tableData.splice(0, 1)
何虹's avatar
何虹 committed
1222 1223 1224 1225
        }
      }
      this.tableData.forEach(item => {
        for (const p in item) {
何虹's avatar
何虹 committed
1226 1227 1228
          if (p.includes('_data_')) {
            if (typeof item[p] === 'string') {
              item[p] = JSON.parse(item[p])
何虹's avatar
何虹 committed
1229 1230 1231
            }
          }
        }
何虹's avatar
何虹 committed
1232
      })
何虹's avatar
何虹 committed
1233 1234
    },
    initTabelconfig(config_) {
何虹's avatar
何虹 committed
1235 1236
      const config = _.cloneDeep(config_)
      this.configData = this.getDefaultConfig(config)
何虹's avatar
何虹 committed
1237
      if (config && config.maxHeight) {
何虹's avatar
何虹 committed
1238
        this.maxHeight_ = config.maxHeight
何虹's avatar
何虹 committed
1239
      }
何虹's avatar
何虹 committed
1240 1241
      const { columnsConfig, cellDetailStyle } = this.configData
      this.columnsConfig = columnsConfig || []
何虹's avatar
何虹 committed
1242
      if (columnsConfig && columnsConfig.length) {
何虹's avatar
何虹 committed
1243 1244
        this.columnsProp = [...columnsConfig] // 筛选出可显示的
        const dyncProp = this.columnsProp.find(item => item.prop === '*')
何虹's avatar
何虹 committed
1245
        if (dyncProp) {
何虹's avatar
何虹 committed
1246 1247
          this.hsDyncProp = true
          this.setHeaderAnynsProp(this.columnsProp)
何虹's avatar
何虹 committed
1248
        } else {
何虹's avatar
何虹 committed
1249
          this.hsDyncProp = false
何虹's avatar
何虹 committed
1250 1251
        }
      } else {
何虹's avatar
何虹 committed
1252
        this.columnsProp = [...this.getAsyncProp(this.tableDataFirst)]
何虹's avatar
何虹 committed
1253
      }
何虹's avatar
何虹 committed
1254
      this.getHeaderCellStyle(this.tableData)
何虹's avatar
何虹 committed
1255
      this.columnsProp.forEach(item => {
何虹's avatar
何虹 committed
1256 1257
        if (!item.showType || item.showType === 'text') {
          item.showOverflowTooltip = true
何虹's avatar
何虹 committed
1258
        } else {
何虹's avatar
何虹 committed
1259
          item.showOverflowTooltip = false
何虹's avatar
何虹 committed
1260
        }
何虹's avatar
何虹 committed
1261 1262 1263
      })
      this.columnsProp = this.groupByProp(this.columnsProp)
      console.log(this.columnsConfig, ' this.columnsConfig')
何虹's avatar
何虹 committed
1264 1265
      // 避免数据变更 再次发出请求
      if (this.dataChangeNumber < 4) {
何虹's avatar
何虹 committed
1266
        this.dataChangeNumber++
何虹's avatar
何虹 committed
1267 1268
        // this.initTableColumnsControl()
      }
何虹's avatar
何虹 committed
1269 1270
      if (this.hsDyncProp) {
        // 有动态列的时候 每次数据变得都得重新请求一次下拉数据
何虹's avatar
何虹 committed
1271 1272
        // this.initTableColumnsControl()
      }
何虹's avatar
何虹 committed
1273 1274
      this.setCellDetailStyle(cellDetailStyle)
      this.dtlDialogFormDisAbled = this.disabledItem(this.configData)
何虹's avatar
何虹 committed
1275 1276
    },
    getHeaderCellStyle(datas) {
何虹's avatar
何虹 committed
1277
      if (!datas.length) return
何虹's avatar
何虹 committed
1278
      if (datas[0]._headerCellStyleSetting_) {
何虹's avatar
何虹 committed
1279 1280
        const _headerCellStyleSetting_ = datas[0]._headerCellStyleSetting_
        this.headerCellStyleSetting_ = _headerCellStyleSetting_
何虹's avatar
何虹 committed
1281 1282 1283 1284
      }
    },
    setHeaderAnynsProp(data) {
      data.forEach((item, index) => {
何虹's avatar
何虹 committed
1285
        if (item.prop === '*') {
何虹's avatar
何虹 committed
1286
          // 获取所有的动态列
何虹's avatar
何虹 committed
1287
          const anyncProp = this.getAsyncProp(this.tableDataFirst, data)
何虹's avatar
何虹 committed
1288 1289
          anyncProp.forEach(item_ => {
            // item.showType = 'input'
何虹's avatar
何虹 committed
1290 1291
            this.$set(item_, 'showType', item.showType)
          })
何虹's avatar
何虹 committed
1292
          // 删除那一带*的行 替换成动态列
何虹's avatar
何虹 committed
1293
          data.splice(index, 1, ...anyncProp)
何虹's avatar
何虹 committed
1294
        }
何虹's avatar
何虹 committed
1295
      })
何虹's avatar
何虹 committed
1296 1297
    },
    getAsyncProp(tableDataFirst, columnsProp = []) {
何虹's avatar
何虹 committed
1298 1299
      if (!tableDataFirst) return []
      const props = Object.keys(tableDataFirst)
何虹's avatar
何虹 committed
1300
      // 已经手动设置存在的表表头
何虹's avatar
何虹 committed
1301
      const constProps = []
何虹's avatar
何虹 committed
1302 1303
      if (columnsProp.length) {
        columnsProp.forEach(item => {
何虹's avatar
何虹 committed
1304 1305
          if (item.prop !== '*') {
            constProps.push(item.prop)
何虹's avatar
何虹 committed
1306
          }
何虹's avatar
何虹 committed
1307
        })
何虹's avatar
何虹 committed
1308 1309
      }
      // 动态设置1维表头
何虹's avatar
何虹 committed
1310
      const constProps_ = []
何虹's avatar
何虹 committed
1311
      props.forEach(prop => {
何虹's avatar
何虹 committed
1312
        if (
何虹's avatar
何虹 committed
1313 1314 1315 1316
          !prop.includes('__') &&
          !prop.startsWith('_') &&
          !prop.includes('_data_') &&
          prop !== 'isSelected'
何虹's avatar
何虹 committed
1317
        ) {
何虹's avatar
何虹 committed
1318 1319 1320
          constProps_.push({
            prop: prop,
            label: prop,
何虹's avatar
何虹 committed
1321
            showOverflowTooltip: true
何虹's avatar
何虹 committed
1322 1323 1324
          })
        } else if (prop.includes('__')) {
          const one_title = prop.split('__')[0]
何虹's avatar
何虹 committed
1325
          const target = columnsProp.find(
何虹's avatar
何虹 committed
1326 1327 1328
            p => p.prop.split('__')[0] === one_title
          )
          if (target) return
何虹's avatar
何虹 committed
1329
          const one_title_list = props.filter(
何虹's avatar
何虹 committed
1330 1331 1332
            item => item.split('__')[0] === one_title
          )
          const one_title_list_prop = []
何虹's avatar
何虹 committed
1333 1334 1335 1336
          one_title_list.forEach(item => {
            one_title_list_prop.push({
              prop: item,
              label: item,
何虹's avatar
何虹 committed
1337
              showOverflowTooltip: true
何虹's avatar
何虹 committed
1338 1339 1340
            })
          })
          const t = constProps_.find(item => item.prop === one_title)
何虹's avatar
何虹 committed
1341 1342 1343 1344 1345
          if (!t) {
            constProps_.push({
              prop: one_title,
              label: one_title,
              childs: one_title_list_prop
何虹's avatar
何虹 committed
1346
            })
何虹's avatar
何虹 committed
1347 1348
          }
        }
何虹's avatar
何虹 committed
1349
      })
何虹's avatar
何虹 committed
1350 1351
      const result = constProps_.filter(
        item => !constProps.includes(item.prop)
何虹's avatar
何虹 committed
1352 1353
      )
      return result || []
何虹's avatar
何虹 committed
1354 1355
    },
    groupByProp(list) {
何虹's avatar
何虹 committed
1356
      const parms = []
何虹's avatar
何虹 committed
1357 1358 1359 1360 1361 1362
      list.forEach(item => {
        // const itemProp = item.prop
        // if (!itemProp) {
        //   item.prop = item.label
        // }
        if (!item.prop) {
何虹's avatar
何虹 committed
1363
          item.prop = ''
何虹's avatar
何虹 committed
1364
        }
何虹's avatar
何虹 committed
1365 1366
        const prop = item.prop.split('__')[0]
        if (item.prop.includes('__')) {
何虹's avatar
何虹 committed
1367
          // const prop = item.prop.split('__')[0]
何虹's avatar
何虹 committed
1368
          const t = parms.find(jtem => jtem.prop === prop)
何虹's avatar
何虹 committed
1369
          if (t) {
何虹's avatar
何虹 committed
1370
            t.childs.push(item)
何虹's avatar
何虹 committed
1371 1372
          } else {
            const obj = {
何虹's avatar
何虹 committed
1373 1374
              prop: '',
              label: '',
何虹's avatar
何虹 committed
1375
              childs: []
何虹's avatar
何虹 committed
1376 1377 1378 1379 1380
            }
            obj.prop = prop
            obj.label = prop
            obj.childs.push(item)
            parms.push(obj)
何虹's avatar
何虹 committed
1381 1382
          }
        } else {
何虹's avatar
何虹 committed
1383
          parms.push(item)
何虹's avatar
何虹 committed
1384
        }
何虹's avatar
何虹 committed
1385 1386
      })
      return parms
何虹's avatar
何虹 committed
1387 1388
    },
    tansFormAsyncProps(list) {
何虹's avatar
何虹 committed
1389
      const rasyncProps = _(list)
何虹's avatar
何虹 committed
1390 1391 1392 1393
        .groupBy(item => item.split('__')[0])
        .value()
      const Keys = Object.keys(rasyncProps)
      const result = []
何虹's avatar
何虹 committed
1394 1395
      Keys.forEach(k => {
        const obj = {
何虹's avatar
何虹 committed
1396 1397
          prop: '',
          label: '',
何虹's avatar
何虹 committed
1398
          showOverflowTooltip: true,
何虹's avatar
何虹 committed
1399
          childs: []
何虹's avatar
何虹 committed
1400 1401 1402
        }
        obj.prop = k
        obj.label = k
何虹's avatar
何虹 committed
1403 1404 1405 1406
        rasyncProps[k].forEach(i => {
          obj.childs.push({
            prop: i,
            label: i,
何虹's avatar
何虹 committed
1407
            showOverflowTooltip: true
何虹's avatar
何虹 committed
1408 1409 1410 1411 1412
          })
        })
        result.push(obj)
      })
      return result
何虹's avatar
何虹 committed
1413 1414
    },
    getTableHeader(data = this.tableData) {
何虹's avatar
何虹 committed
1415 1416 1417 1418
      if (!data.length) return []
      const props = Object.keys(data[0])
      let __list = []
      const list = []
何虹's avatar
何虹 committed
1419
      props.forEach((prop, index) => {
何虹's avatar
何虹 committed
1420 1421 1422
        if (prop.includes('__') && !prop.includes('_data_')) {
          __list.push(prop)
          delete props[index]
何虹's avatar
何虹 committed
1423
        } else if (
何虹's avatar
何虹 committed
1424 1425 1426
          !prop.startsWith('_') &&
          !prop.includes('_data_') &&
          prop !== 'isSelected'
何虹's avatar
何虹 committed
1427
        ) {
何虹's avatar
何虹 committed
1428
          list.push(prop)
何虹's avatar
何虹 committed
1429
        }
何虹's avatar
何虹 committed
1430
      })
何虹's avatar
何虹 committed
1431
      if (__list.length) {
何虹's avatar
何虹 committed
1432
        __list = _(__list)
何虹's avatar
何虹 committed
1433 1434
          .groupBy(item => item.split('__')[0])
          .value()
何虹's avatar
何虹 committed
1435
      }
何虹's avatar
何虹 committed
1436 1437
      list.push(__list)
      return list
何虹's avatar
何虹 committed
1438 1439
    },
    getDefaultConfig(config = {}) {
何虹's avatar
何虹 committed
1440
      let _config = {}
何虹's avatar
何虹 committed
1441 1442
      if (
        config.hsConfig !== undefined &&
何虹's avatar
何虹 committed
1443
        config.hsConfig.default_type + '' === '1'
何虹's avatar
何虹 committed
1444
      ) {
何虹's avatar
何虹 committed
1445
        // mes样式
何虹's avatar
何虹 committed
1446
        _config = this.config_merge(mes_style, config)
何虹's avatar
何虹 committed
1447 1448
      } else {
        // 大屏样式
何虹's avatar
何虹 committed
1449
        _config = this.config_merge(screen_style, config)
何虹's avatar
何虹 committed
1450 1451
      }
      if (_config.queryBiTheme) {
何虹's avatar
何虹 committed
1452
        sessionStorage['queryBiTheme_'] = JSON.stringify(_config.queryBiTheme)
何虹's avatar
何虹 committed
1453
      }
何虹's avatar
何虹 committed
1454
      return _config
何虹's avatar
何虹 committed
1455 1456 1457
    },
    config_merge(defaultConfig, config) {
      if (!Object.keys(config).length) {
何虹's avatar
何虹 committed
1458
        return defaultConfig
何虹's avatar
何虹 committed
1459
      }
何虹's avatar
何虹 committed
1460
      const _defaultConfig = _.cloneDeep(defaultConfig)
何虹's avatar
何虹 committed
1461
      for (const key1 in _defaultConfig) {
何虹's avatar
何虹 committed
1462
        if (typeof _defaultConfig[key1] === 'object') {
何虹's avatar
何虹 committed
1463
          for (const key2 in _defaultConfig[key1]) {
何虹's avatar
何虹 committed
1464 1465 1466 1467
            if (
              config[key1] !== undefined &&
              config[key1][key2] !== undefined
            ) {
何虹's avatar
何虹 committed
1468
              _defaultConfig[key1][key2] = config[key1][key2]
何虹's avatar
何虹 committed
1469 1470 1471
            }
          }
        } else if (Array.isArray(_defaultConfig[key1])) {
何虹's avatar
何虹 committed
1472
          _defaultConfig[key1] = config[key1]
何虹's avatar
何虹 committed
1473 1474
        } else {
          if (config[key1] !== undefined) {
何虹's avatar
何虹 committed
1475
            _defaultConfig[key1] = config[key1]
何虹's avatar
何虹 committed
1476 1477 1478 1479 1480
          }
        }
      }
      Object.keys(config).forEach(item => {
        if (!(item in _defaultConfig)) {
何虹's avatar
何虹 committed
1481
          _defaultConfig[item] = config[item]
何虹's avatar
何虹 committed
1482
        }
何虹's avatar
何虹 committed
1483 1484
      })
      return _defaultConfig
何虹's avatar
何虹 committed
1485 1486 1487 1488
    },
    setRowSelect(row, f) {
      this.tableData.forEach(item => {
        if (item.isSelected) {
何虹's avatar
何虹 committed
1489
          this.$set(item, 'isSelected', false)
何虹's avatar
何虹 committed
1490
        }
何虹's avatar
何虹 committed
1491 1492 1493 1494 1495 1496
      })
      row.isSelected = true
      this.$refs.hsTable.clearSelection()
      this.$refs.hsTable.setCurrentRow(row)
      this.$refs.hsTable.toggleRowSelection(row)
      this.targetRowInner = row
何虹's avatar
何虹 committed
1497 1498
    },
    tableRowClick(row, column, event) {
何虹's avatar
何虹 committed
1499
      this.$emit('RowClick', {
何虹's avatar
何虹 committed
1500 1501 1502
        row: row,
        column: column,
        event: event
何虹's avatar
何虹 committed
1503
      })
何虹's avatar
何虹 committed
1504 1505 1506
    },
    // 单击某个单元格的时候 弹出明细
    tableCellClick(row, column, cell, event) {
何虹's avatar
何虹 committed
1507 1508 1509 1510
      this.setRowSelect(row)
      const key = column.label
      const { property } = column
      const target = this.columnsConfig.find(item => item.prop === property)
何虹's avatar
何虹 committed
1511 1512
      if (
        target &&
何虹's avatar
何虹 committed
1513
        (target.type === 'hyperlink' || target.type === 'asyncQueryDetail')
何虹's avatar
何虹 committed
1514
      ) {
何虹's avatar
何虹 committed
1515 1516
        let value_ = row[property]
        const otherConfig = target.otherConfig
何虹's avatar
何虹 committed
1517 1518
        if (
          otherConfig &&
何虹's avatar
何虹 committed
1519 1520
          !otherConfig.startsWith('/') &&
          !otherConfig.startsWith('http')
何虹's avatar
何虹 committed
1521
        ) {
何虹's avatar
何虹 committed
1522
          value_ = row[target.otherConfig]
何虹's avatar
何虹 committed
1523
        } else if (otherConfig) {
何虹's avatar
何虹 committed
1524
          value_ = otherConfig
何虹's avatar
何虹 committed
1525
        }
何虹's avatar
何虹 committed
1526 1527
        const reg = /\{(.*?)\}/g //  /(?<=\{).*?(?=\})/g
        const queryList = value_.match(reg) || [] // value_.match(/(?<=\{).*?(?=\})/g) || [] // value_.match(reg) || [] //
何虹's avatar
何虹 committed
1528
        queryList.forEach(p => {
何虹's avatar
何虹 committed
1529 1530 1531 1532 1533 1534 1535 1536 1537 1538
          const p_ = p.replace('{', '').replace('}', '')
          const pt = row[p_]
          value_ = value_.replace(`{${p_}}`, pt)
        })
        const origin = location.origin
        let url = value_
        if (value_.startsWith('http')) {
          url = value_
        } else if (value_.startsWith('/')) {
          url = origin + '/#' + value_
何虹's avatar
何虹 committed
1539
        }
何虹's avatar
何虹 committed
1540 1541 1542 1543
        if (target.type === 'hyperlink') {
          window.open(url, '_blank')
        } else if (target.type === 'asyncQueryDetail') {
          const property = column.property
何虹's avatar
何虹 committed
1544
          if (row[property]) {
何虹's avatar
何虹 committed
1545 1546
            this.pageSrc = url
            this.dialogVisiblePage = true
何虹's avatar
何虹 committed
1547 1548 1549 1550
          }
        }
      }
      if (row[`_data_${key}`]) {
何虹's avatar
何虹 committed
1551 1552 1553
        this.detailVisible = true
        const _data_value = row[`_data_${key}`]
        this.tableDataDetail = _data_value
何虹's avatar
何虹 committed
1554
      } else {
何虹's avatar
何虹 committed
1555
        this.$emit('CellClick', {
何虹's avatar
何虹 committed
1556 1557 1558 1559
          row: row,
          column: column,
          cell: cell,
          event: event
何虹's avatar
何虹 committed
1560
        })
何虹's avatar
何虹 committed
1561 1562 1563 1564
      }
    },
    // 鼠标移入事件
    tableCellmouse(row, column, cell, event) {
何虹's avatar
何虹 committed
1565
      return
何虹's avatar
何虹 committed
1566
      if (this.configData.hover) {
何虹's avatar
何虹 committed
1567
        const { hoverBackground } = this.configData.hover
何虹's avatar
何虹 committed
1568
        if (hoverBackground) {
何虹's avatar
何虹 committed
1569
          cell.parentNode.style.background = hoverBackground
何虹's avatar
何虹 committed
1570 1571 1572 1573 1574
        }
      }
    },
    // 鼠标离开事件
    tableCelleave(row, column, cell, event) {
何虹's avatar
何虹 committed
1575 1576 1577 1578
      const { property } = column
      const { _styleCellSetting_, _styleRowSetting_ } = row
      const _styleRowSetting__ = _styleRowSetting_ || {}
      const cellStyel = {}
何虹's avatar
何虹 committed
1579
      if (_styleCellSetting_) {
何虹's avatar
何虹 committed
1580 1581
        const keys = Object.keys(_styleCellSetting_)
        const targetKey = keys.find(k => k === property)
何虹's avatar
何虹 committed
1582
        if (targetKey) {
何虹's avatar
何虹 committed
1583
          Object.assign(cellStyel, _styleCellSetting_[property])
何虹's avatar
何虹 committed
1584 1585 1586 1587
        }
      }
      // this.detailVisible2 = false
      if (this.configData.hover) {
何虹's avatar
何虹 committed
1588
        const { leaveBackground } = this.configData.hover
何虹's avatar
何虹 committed
1589 1590
        if (leaveBackground) {
          if (_styleRowSetting__.background) {
何虹's avatar
何虹 committed
1591
            cell.parentNode.style.background = _styleRowSetting__.background
何虹's avatar
何虹 committed
1592
          } else {
何虹's avatar
何虹 committed
1593
            cell.parentNode.style.background = leaveBackground
何虹's avatar
何虹 committed
1594 1595 1596 1597 1598
          }
        }
      }
    },
    handleSizeChange(pageSize) {
何虹's avatar
何虹 committed
1599
      this.paginationPageSize = parseInt(pageSize)
何虹's avatar
何虹 committed
1600
      if (this.paginationPage !== 1) {
何虹's avatar
何虹 committed
1601
        this.paginationPage = 1
何虹's avatar
何虹 committed
1602
      }
何虹's avatar
何虹 committed
1603
      this.$emit('paginationFun', {
何虹's avatar
何虹 committed
1604 1605 1606
        elInfo: this.elInfo, // 此处把组件信息返回出去 方便queryBi统一处理
        pageSize: this.paginationPageSize,
        page: this.paginationPage
何虹's avatar
何虹 committed
1607
      })
何虹's avatar
何虹 committed
1608 1609 1610
    },
    // 当前页 change cb
    handleCurrentChange(currentPage) {
何虹's avatar
何虹 committed
1611 1612
      this.paginationPage = parseInt(currentPage)
      this.$emit('paginationFun', {
何虹's avatar
何虹 committed
1613 1614 1615
        elInfo: this.elInfo,
        pageSize: this.paginationPageSize,
        page: this.paginationPage
何虹's avatar
何虹 committed
1616
      })
何虹's avatar
何虹 committed
1617 1618 1619 1620
    },
    // 轮播table数据
    changeTableDataFun() {
      if (this.currentPage === this.page) {
何虹's avatar
何虹 committed
1621
        this.currentPage = 0
何虹's avatar
何虹 committed
1622
      }
何虹's avatar
何虹 committed
1623 1624
      this.grouptableData = this.pageArr[this.currentPage]
      this.currentPage = this.currentPage + 1
何虹's avatar
何虹 committed
1625 1626
    },
    boxEventMouse(event) {
何虹's avatar
何虹 committed
1627 1628
      const that = this
      event.stopPropagation()
何虹's avatar
何虹 committed
1629
      if (event.shiftKey && event.altKey && !event.ctrlKey) {
何虹's avatar
何虹 committed
1630
        that.jsoneditorVisible = true
何虹's avatar
何虹 committed
1631 1632 1633 1634
      }
    },
    // 弹出可编辑的弹框
    showEditJsonDialog() {
何虹's avatar
何虹 committed
1635
      this.outBoxDom = document.getElementById(this.elId)
何虹's avatar
何虹 committed
1636
      if (this.outBoxDom) {
何虹's avatar
何虹 committed
1637 1638
        this.maxHeight_ = this.outBoxDom.offsetHeight
        this.outBoxDom.addEventListener('mousedown', this.boxEventMouse)
何虹's avatar
何虹 committed
1639 1640 1641 1642
      }
    },
    // 修改表头行的样式
    setHeaderRowStyle(rowData) {
何虹's avatar
何虹 committed
1643 1644
      const headerRowStyle = this.configData.headerRowStyle || {}
      return typeof headerRowStyle === 'string'
何虹's avatar
何虹 committed
1645
        ? JSON.parse(headerRowStyle)
何虹's avatar
何虹 committed
1646
        : headerRowStyle
何虹's avatar
何虹 committed
1647 1648 1649
    },
    // 修改表头单元格样式 会合并行的样式
    setHeaderCellStyle(rowData) {
何虹's avatar
何虹 committed
1650 1651 1652
      const { column } = rowData
      const headerCellStyle = this.configData.headerCellStyle || {}
      const { property } = column
何虹's avatar
何虹 committed
1653
      // 这是后台设置的表头单元格子数据
何虹's avatar
何虹 committed
1654 1655 1656 1657
      const commonStyle_ = this.headerCellStyleSetting_.commonStyle || {}
      const data_ = this.headerCellStyleSetting_.data || []
      const target = data_.find(item => item.property === property)
      let targetStyle_ = {}
何虹's avatar
何虹 committed
1658
      if (target && target.style) {
何虹's avatar
何虹 committed
1659
        targetStyle_ = target.style
何虹's avatar
何虹 committed
1660
      }
何虹's avatar
何虹 committed
1661 1662 1663 1664
      const commonStyle = headerCellStyle.commonStyle || {}
      const data = headerCellStyle.data || []
      const targetProp = data.find(item => item.property === property)
      let targetPropStyle = {}
何虹's avatar
何虹 committed
1665
      if (targetProp && targetProp.style) {
何虹's avatar
何虹 committed
1666
        targetPropStyle = targetProp.style
何虹's avatar
何虹 committed
1667
      }
何虹's avatar
何虹 committed
1668 1669 1670 1671 1672
      const result = Object.assign(
        _.cloneDeep(commonStyle),
        _.cloneDeep(targetPropStyle),
        _.cloneDeep(commonStyle_),
        targetStyle_
何虹's avatar
何虹 committed
1673 1674
      )
      return result
何虹's avatar
何虹 committed
1675 1676
    },
    setRowStyle(rowData) {
何虹's avatar
何虹 committed
1677 1678 1679 1680
      const { rowStyle, onlyDataStyleRow } = this.configData
      const { rowIndex, row } = rowData
      const data_style = _.cloneDeep(this.set_row_style(row) || {}) // 数据样式
      const _styleRowSetting_ = row._styleRowSetting_ || {}
何虹's avatar
何虹 committed
1681
      const _styleRowSetting_P =
何虹's avatar
何虹 committed
1682
        typeof _styleRowSetting_ === 'string'
何虹's avatar
何虹 committed
1683
          ? JSON.parse(_styleRowSetting_)
何虹's avatar
何虹 committed
1684
          : _styleRowSetting_
何虹's avatar
何虹 committed
1685 1686
      // 如果设置了这个参数 仅仅数据样式生效
      if (onlyDataStyleRow) {
何虹's avatar
何虹 committed
1687 1688 1689
        return Object.assign(
          _.cloneDeep(_styleRowSetting_P),
          _.cloneDeep(data_style)
何虹's avatar
何虹 committed
1690
        )
何虹's avatar
何虹 committed
1691 1692 1693
      }
      if (rowStyle) {
        // 合并本地默认样式+手动设置样式+后台返回样式
何虹's avatar
何虹 committed
1694 1695 1696
        const { commonStyle, data } = rowStyle
        const data_ = data || []
        let targetRowIndexStyle = {}
何虹's avatar
何虹 committed
1697 1698
        const targetRow = data_.find(
          item => parseInt(item.rowIndex) === rowIndex
何虹's avatar
何虹 committed
1699
        )
何虹's avatar
何虹 committed
1700
        if (targetRow) {
何虹's avatar
何虹 committed
1701
          targetRowIndexStyle = targetRow.style
何虹's avatar
何虹 committed
1702 1703 1704 1705 1706 1707
        }
        const result = Object.assign(
          _.cloneDeep(commonStyle),
          _.cloneDeep(targetRowIndexStyle),
          _.cloneDeep(_styleRowSetting_),
          _.cloneDeep(data_style)
何虹's avatar
何虹 committed
1708 1709
        )
        return result
何虹's avatar
何虹 committed
1710 1711 1712 1713 1714
      } else {
        // 只有后台样式或者没有任何样式
        const result = Object.assign(
          _.cloneDeep(_styleRowSetting_P),
          _.cloneDeep(data_style)
何虹's avatar
何虹 committed
1715 1716
        )
        return result
何虹's avatar
何虹 committed
1717 1718 1719
      }
    },
    setCellStyle(cellData) {
何虹's avatar
何虹 committed
1720 1721
      const { column, columnIndex, row, rowIndex } = cellData
      const { property } = column // 对应的列名
何虹's avatar
何虹 committed
1722
      // 后端返回的样式
何虹's avatar
何虹 committed
1723
      const _styleCellSetting_ = row._styleCellSetting_ || {} // 对应行 所有列的样式汇总
何虹's avatar
何虹 committed
1724
      // 前端config中设置的样式
何虹's avatar
何虹 committed
1725 1726 1727 1728 1729 1730
      const { onlyDataStyleCell, cellStyle, columnStyle } = this.configData
      let cellDataStyle = {} // 数据中的样式
      let config_columnStyle = {} // config中的columnStyle的样式
      let config_cellStyle = {} // config中的cellStyle的样式
      let columnsConfig_columnStyle = {} // columnsConfig数据列配置中的columnStyle
      let columnsConfig_otherStyle = {} //  其他样式
何虹's avatar
何虹 committed
1731
      const _styleCellSetting_P =
何虹's avatar
何虹 committed
1732
        typeof _styleCellSetting_ === 'string'
何虹's avatar
何虹 committed
1733
          ? JSON.parse(_styleCellSetting_)
何虹's avatar
何虹 committed
1734 1735 1736
          : _styleCellSetting_
      const keys = Object.keys(_styleCellSetting_P)
      const targetKey = keys.find(k => k === property)
何虹's avatar
何虹 committed
1737
      // 附加样式 如超链接 配置中columnsConfig
何虹's avatar
何虹 committed
1738 1739
      const otherStyle = this.columnsConfig.find(
        item => item.prop === property
何虹's avatar
何虹 committed
1740
      )
何虹's avatar
何虹 committed
1741 1742
      if (
        otherStyle &&
何虹's avatar
何虹 committed
1743 1744
        (otherStyle.type === 'hyperlink' ||
          otherStyle.type === 'asyncQueryDetail')
何虹's avatar
何虹 committed
1745
      ) {
何虹's avatar
何虹 committed
1746
        columnsConfig_otherStyle = this.subjoinStyle[otherStyle.type] || {}
何虹's avatar
何虹 committed
1747 1748
      }
      if (otherStyle && otherStyle.columnStyle) {
何虹's avatar
何虹 committed
1749
        columnsConfig_columnStyle = otherStyle.columnStyle || {}
何虹's avatar
何虹 committed
1750 1751
      }
      if (targetKey) {
何虹's avatar
何虹 committed
1752
        cellDataStyle = _styleCellSetting_P[property]
何虹's avatar
何虹 committed
1753 1754 1755
      }
      if (onlyDataStyleCell) {
        // 仅仅 数据样式生效本地样式不生效
何虹's avatar
何虹 committed
1756
        return cellDataStyle
何虹's avatar
何虹 committed
1757 1758 1759
      }
      if (columnStyle) {
        // config中的columnStyle的样式的时候
何虹's avatar
何虹 committed
1760 1761 1762 1763 1764
        const { data, commonStyle: commonColumnStyle } = columnStyle
        const data_ = data
        const commonColumnStyle_ = _.cloneDeep(commonColumnStyle || {})
        const targetColumn = data_.find(item => item.property === property)
        let targetColumnStyle = {}
何虹's avatar
何虹 committed
1765
        if (targetColumn && targetColumn.style) {
何虹's avatar
何虹 committed
1766
          targetColumnStyle = targetColumn.style
何虹's avatar
何虹 committed
1767
        }
何虹's avatar
何虹 committed
1768 1769 1770
        config_columnStyle = Object.assign(
          commonColumnStyle_,
          targetColumnStyle
何虹's avatar
何虹 committed
1771
        )
何虹's avatar
何虹 committed
1772 1773
      }
      if (cellStyle) {
何虹's avatar
何虹 committed
1774 1775 1776 1777
        const { commonStyle: commonCellStyle, data } = cellStyle
        const data_ = data || []
        const commonCellStyle_ = _.cloneDeep(commonCellStyle || {})
        let targetCellIndexStyle = {}
何虹's avatar
何虹 committed
1778 1779 1780 1781 1782
        const targetCell = data_.find(
          item =>
            parseInt(item.rowIndex) === rowIndex &&
            (item.property === property ||
              parseInt(item.columnIndex) === columnIndex)
何虹's avatar
何虹 committed
1783 1784
        )
        if (targetCell) { targetCellIndexStyle = _.cloneDeep(targetCell.style || {}) }
何虹's avatar
何虹 committed
1785 1786 1787
        config_cellStyle = Object.assign(
          commonCellStyle_,
          targetCellIndexStyle
何虹's avatar
何虹 committed
1788
        )
何虹's avatar
何虹 committed
1789 1790 1791 1792 1793 1794 1795
      }
      return Object.assign(
        config_columnStyle,
        config_cellStyle,
        cellDataStyle,
        columnsConfig_otherStyle,
        columnsConfig_columnStyle
何虹's avatar
何虹 committed
1796
      )
何虹's avatar
何虹 committed
1797 1798 1799
    },
    alterConfigAction() {
      if (this.configData.tableStyle) {
何虹's avatar
何虹 committed
1800
        this.tableStyle = JSON.stringify(this.configData.tableStyle)
何虹's avatar
何虹 committed
1801 1802 1803 1804
          .replace(new RegExp('"', 'g'), '')
          .replace(new RegExp('{', 'g'), '')
          .replace(new RegExp(',', 'g'), ';')
          .replace(new RegExp('}', 'g'), ';')
何虹's avatar
何虹 committed
1805 1806
      }
      if (this.configData.imgStyle) {
何虹's avatar
何虹 committed
1807
        this.imgStyle = JSON.stringify(this.configData.imgStyle)
何虹's avatar
何虹 committed
1808 1809 1810 1811
          .replace(new RegExp('"', 'g'), '')
          .replace(new RegExp('{', 'g'), '')
          .replace(new RegExp(',', 'g'), ';')
          .replace(new RegExp('}', 'g'), ';')
何虹's avatar
何虹 committed
1812 1813
      }
      if (this.configData.gutter) {
何虹's avatar
何虹 committed
1814 1815 1816 1817 1818 1819 1820 1821 1822 1823
        var tableId = document.getElementById(this.elId)
        if (!tableId) return
        var gutterArr = tableId.getElementsByClassName('gutter')
        if ((gutterArr && !gutterArr.length) || !gutterArr) return
        gutterArr[0].style.background = this.configData.gutter.background
        gutterArr[0].style.border = this.configData.gutter.border
        gutterArr[0].style.borderTop = this.configData.gutter.borderTop
        gutterArr[0].style.borderBottom = this.configData.gutter.borderBottom
        gutterArr[0].style.borderLeft = this.configData.gutter.borderLeft
        gutterArr[0].style.borderRight = this.configData.gutter.borderRight
何虹's avatar
何虹 committed
1824 1825 1826 1827
      }
    },
    setCellDetailStyle(data = {}) {
      // const { headerRowStyle, rowStyle } = data
何虹's avatar
何虹 committed
1828
      this.cellDetailStyle = data
何虹's avatar
何虹 committed
1829 1830
    },
    setCellHeaderRowStyle() {
何虹's avatar
何虹 committed
1831 1832
      const { headerRowStyle } = this.cellDetailStyle
      return headerRowStyle || {}
何虹's avatar
何虹 committed
1833 1834
    },
    setCellRowStyle() {
何虹's avatar
何虹 committed
1835 1836
      const { rowStyle } = this.cellDetailStyle
      return rowStyle || {}
何虹's avatar
何虹 committed
1837 1838
    }
  }
何虹's avatar
何虹 committed
1839
}
何虹's avatar
何虹 committed
1840 1841
</script>
<style>
何虹's avatar
何虹 committed
1842
.activeBottomSort {
何虹's avatar
何虹 committed
1843 1844
  border-bottom-color: #1f5ede !important;
}
何虹's avatar
何虹 committed
1845
.activeTopSort {
何虹's avatar
何虹 committed
1846 1847
  border-top-color: #1f5ede !important;
}
何虹's avatar
何虹 committed
1848 1849
._hs_table .el-table--border {
  border: 1px solid #ebeef5 !important;
何虹's avatar
何虹 committed
1850
}
何虹's avatar
何虹 committed
1851 1852 1853 1854 1855 1856 1857 1858 1859 1860 1861 1862 1863 1864 1865 1866 1867 1868 1869 1870
/* 禁止掉默认的hover事件 */
._hs_table .el-table--striped .el-table__body tr.current-row > td,
._hs_table .el-table__body tr.hover-row.current-row > td,
._hs_table .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
._hs_table .el-table__body tr.hover-row.el-table__row--striped > td,
._hs_table .el-table__body tr.hover-row > td {
  background-color: transparent !important;
}
._hs_table .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: transparent !important;
}
/* 去除表格边框线 */
._hs_table .el-table::before,
._hs_table .el-table::after {
  height: 0 !important;
}
._hs_table body .el-table th.gutter {
  display: table-cell !important;
}
.paginationBox {
何虹's avatar
何虹 committed
1871 1872 1873
  display: flex;
  justify-content: flex-end;
}
何虹's avatar
何虹 committed
1874 1875 1876 1877 1878 1879 1880 1881 1882 1883 1884
/*滑块轨道*/
._hs_table .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
._hs_table .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
/*轨道*/
._hs_table .el-table__body-wrapper::-webkit-scrollbar-track {
何虹's avatar
何虹 committed
1885 1886 1887 1888 1889
  box-shadow: none;
  -webkit-box-shadow: none;
  border-radius: 0;
  background: transparent;
}
何虹's avatar
何虹 committed
1890
._hs_table .el-table::-webkit-scrollbar-track {
何虹's avatar
何虹 committed
1891 1892 1893 1894 1895 1896
  /*滚动条里面轨道*/
  box-shadow: none;
  -webkit-box-shadow: none;
  border-radius: 0;
  background: transparent;
}
何虹's avatar
何虹 committed
1897
._hs_table .el-table::-webkit-scrollbar-thumb {
何虹's avatar
何虹 committed
1898 1899 1900 1901 1902 1903 1904
  /*滚动条里面小方块*/
  border-radius: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
  opacity: 0.7;
}
.addtableFooterWrapper {
何虹's avatar
何虹 committed
1905
  margin-top: -57px;
何虹's avatar
何虹 committed
1906 1907
}

何虹's avatar
何虹 committed
1908
.addtableBodyWrapper {
何虹's avatar
何虹 committed
1909 1910
  padding-bottom: 49px;
}
何虹's avatar
何虹 committed
1911 1912 1913
._hs_table ::-webkit-scrollbar {
  width: 0px;
  background-color: transparent;
何虹's avatar
何虹 committed
1914 1915
}
.closeAllItem {
何虹's avatar
何虹 committed
1916 1917 1918
  padding: 3px;
  cursor: pointer;
  font-size: 10px;
何虹's avatar
何虹 committed
1919
}
何虹's avatar
何虹 committed
1920 1921 1922 1923 1924
.paginationBox .el-input__inner {
  border: 1px solid #dcdfe6 !important;
  border-radius: 4px;
  background-color: #fff;
  background-image: none;
何虹's avatar
何虹 committed
1925
}
何虹's avatar
何虹 committed
1926
.elLink {
何虹's avatar
何虹 committed
1927 1928 1929
  margin: 0 3px;
  font-size: 12px;
}
何虹's avatar
何虹 committed
1930
.toolsBox {
何虹's avatar
何虹 committed
1931
  float: right;
何虹's avatar
何虹 committed
1932 1933 1934 1935
  top: 34px;
  position: relative;
  z-index: 1009;
  opacity: 0.8;
何虹's avatar
何虹 committed
1936 1937
}
</style>