<template>
    <div style="width: 100%;height: 100%">
        <el-container class="listview-box" style="height: 100%;position: relative" v-if="loadSuccess">
            <el-button type="primary" style="position: absolute;right:20px;top:20px;z-index:999"
                       @click="showFormSetting" v-if="workTurnOn">智能建表配置</el-button>
            <el-aside v-if="treeDefineObj.id" :width="viewDefinData.treeHideen != '1'? '250px': treeWidth" style="overflow: hidden;">
                <div class="aside-tree" style="width:100%;height: 100%;position: relative;box-sizing: border-box;padding:10px 5px 8px 10px;">
                    <div class="aside-tree-content" style="border: 1px solid #ddd;box-sizing: border-box;padding: 5px;width: 100%;height: 100%;overflow: hidden;">
                        <el-input :size="setting.formSize"
                                  placeholder="输入关键字进行过滤"
                                  v-model="filterTreeText"></el-input>
                        <div style="position: absolute;bottom: 10px;top: 60px;left: 12px;" :style="{width:'220px'}">
                            <el-tree
                                    class="filter-tree"
                                    :data="treeData"
                                    :highlight-current="true"
                                    :props="treeProps"
                                    node-key="id"
                                    :default-expanded-keys="treeDefaultExpandedKeys"
                                    :expand-on-click-node="false"
                                    @node-click="treeNodeClick"
                                    :filter-node-method="filterNode"
                                    ref="tree">
                            </el-tree>
                        </div>
                    </div>
                </div>
                <div style="position: absolute;left: 244px;top: 50%;cursor: pointer;;z-index: 99999" @click="closeTree()" v-if="viewDefinData.treeHideen=='1'&&treeUnfold">
                    <el-tooltip class="item" effect="dark" content="收起" placement="right-start">
                        <span><i class="el-icon-d-arrow-right font-20"></i></span>
                    </el-tooltip>
                </div>
                <div style="position: absolute;left: 0px;top: 50%;cursor: pointer;z-index: 99999" @click="openTree()" v-if="viewDefinData.treeHideen=='1'&&!treeUnfold">
                    <el-tooltip class="item" effect="dark" content="展开" placement="right-start">
                        <span><i class="el-icon-d-arrow-left font-20"></i></span>
                    </el-tooltip>
                </div>
            </el-aside>

            <el-container class="listview-right">
                <el-header class="no-print" style="height: auto;padding-bottom: 10px;box-sizing: border-box;padding-left: 0;padding-right: 0;position: relative" v-if="searchBoxArr.length > 0">
                    <div :style="{height:serrchboxHeightOld}" v-if="isShowAllSearchBox && showAllSearchBox"></div>
                    <div class="search-form-parent el-card" ref="hqgd" :class="(isShowAllSearchBox && showAllSearchBox)?'isShowAllSearch':''">
                        <el-form v-if="!setInitFunc.has('getSearchBox')" :data="searchForm" :inline="true" size="small" class="demo-form-inline" @keyup.enter.native="doSearch()" onSubmit="return false;" style="position: relative" :style="isShowAllSearchBox? {'display':showAllSearchBox?'block':'flex'} : ''">
                            <div :class="isShowAllSearchBox? (showAllSearchBox?'':'isSingleLineSearch') : '' " :style="isShowAllSearchBox? {'width':showAllSearchBox?'100%':SingleLineSearchWidth} : '' ">
                                <el-form-item v-for="(searchBox,index) in searchBoxArr" :key="index" :ref="'searchFormItem'+index" :label="searchBox.showName" style="flex-shrink: 0">
                                    <!--文本框-->
                                    <el-input v-if="searchBox.controlType == 'input'" v-model="searchForm[searchBox.id]" :style="{'width':searchBox.searchBoxWidth?searchBox.searchBoxWidth+'px':'100%'}"></el-input>
                                    <!--下拉框-->
                                    <div v-if="searchBox.controlType == 'select'">
                                        <!--下拉框 数据字典 start-->
                                        <el-select v-if="searchBox.dataOrigin == 'sysdata'" v-model="searchForm[searchBox.id]"
                                                   :multiple="searchBox.multiple == '1'" :clearable="searchBox.defaultClear == '1'"
                                                   :filterable="searchBox.allowEdit == '1'"
                                                   :allow-create="searchBox.allowEdit == '1'"
                                                   :style="{'width':searchBox.searchBoxWidth?searchBox.searchBoxWidth+'px':'100%'}">
                                            <el-option v-for="(item,index) in searchBox.selectSysData" :key="index" :value="item.id"
                                                       :label="item.dataName"></el-option>
                                        </el-select>
                                        <!--下拉框 数据字典 start-->

                                        <!--下拉框 自定义 start-->
                                        <el-select v-if="searchBox.dataOrigin == 'select'" v-model="searchForm[searchBox.id]"
                                                   :multiple="searchBox.multiple == '1'" :clearable="searchBox.defaultClear == '1'"
                                                   :filterable="searchBox.allowEdit == '1'"
                                                   :allow-create="searchBox.allowEdit == '1'"
                                                   :style="{'width':searchBox.searchBoxWidth?searchBox.searchBoxWidth+'px':'100%'}">
                                            <el-option v-for="(item,index) in searchBox.extendObj.optionSetting" :key="index"
                                                       :value="item.value" :label="item.label"></el-option>
                                        </el-select>
                                        <!--下拉框 自定义 end-->

                                        <!--下拉框 远程数据 无下级 start-->
                                        <el-select v-if="searchBox.dataOrigin == 'remote' && searchBox.extendObj.juniorData == '0'"
                                                   v-model="searchForm[searchBox.id]"
                                                   :multiple="searchBox.multiple == '1'" :clearable="searchBox.defaultClear == '1'"
                                                   :filterable="searchBox.allowEdit == '1'?true:searchBox.extendObj.filterableEdit == '1'"
                                                   :allow-create="searchBox.allowEdit == '1'"
                                                   :style="{'width':searchBox.searchBoxWidth?searchBox.searchBoxWidth+'px':'100%'}">
                                            <el-option v-for="(item,index) in dataOptions[searchBox.id]" :key="index"
                                                       :value="item[searchBox.extendObj.valueField]"
                                                       :label="item[searchBox.extendObj.textField]"></el-option>
                                        </el-select>
                                        <!--下拉框 远程数据 无下级 end-->

                                        <!--下拉框 远程数据 有下级 start-->
                                        <el-cascader
                                                v-if="searchBox.dataOrigin == 'remote' && searchBox.extendObj.juniorData == '1'"
                                                v-model="searchForm[searchBox.id]" :options="dataOptions[searchBox.id]"
                                                :props="searchBox.props" :clearable="searchBox.defaultClear == '1'"
                                                :filterable="searchBox.allowEdit == '1'" collapse-tags
                                                :style="{'width':searchBox.searchBoxWidth?searchBox.searchBoxWidth+'px':'100%'}">
                                        </el-cascader>
                                        <!--下拉框 远程数据 有下级 end-->
                                    </div>

                                    <!--时间-->
                                    <div v-if="searchBox.controlType == 'time'">
                                        <pl-date-time-picker :is-range="searchBox.dateRange == '1'" :type="searchBox.type"
                                                             :form-data="searchForm" :form-key="searchBox.id"
                                                             :date-pattern="searchBox.datePattern"
                                                             :clearable="searchBox.defaultClear == '1'"
                                                             :search-box-width="searchBox.searchBoxWidth">
                                        </pl-date-time-picker>
                                    </div>

                                    <!--级联下拉框-->
                                    <pl-cascade-select v-if="searchBox.controlType == 'cascadeSelect'"
                                                       :form-data="searchForm[searchBox.id]"
                                                       :field="searchBox.fieldId" :type-id="searchBox.dataDic"
                                                       :disabled="searchBox.disabled"
                                                       :clearable="searchBox.defaultClear == '1'"
                                                       :is-hidden="searchBox.isHidden" :parent-id="searchBox.parentId || '-1'"
                                                       :has-parent-judge="'true'" :is-tree-click="searchBox.isTreeClick"
                                                       size="small"
                                                       :search-box-width="searchBox.searchBoxWidth">
                                    </pl-cascade-select>

                                    <!--综合搜索框-->
                                    <el-input v-if="searchBox.controlType == 'synthesize'"
                                              v-model="searchForm[searchBox.id]"
                                              :style="{'width':searchBox.searchBoxWidth?searchBox.searchBoxWidth+'px':'100%'}"></el-input>

                                    <!--文本框区间-->
                                    <div v-if="searchBox.controlType == 'inputInterval'">
                                        <el-input v-model="searchForm[searchBox.id].start"  :style="{'width':searchBox.searchBoxWidth?searchBox.searchBoxWidth+'px':'150px'}"></el-input>
                                        <span> - </span>
                                        <el-input v-model="searchForm[searchBox.id].end"  :style="{'width':searchBox.searchBoxWidth?searchBox.searchBoxWidth+'px':'150px'}"></el-input>
                                    </div>
                                </el-form-item>
                                <el-form-item v-if="!isShowAllSearchBox">
                                  <el-button type="primary" icon="el-icon-search" @click="doSearch()">查询</el-button>
                                  <el-button icon="el-icon-close" @click="clearSearchBox()">清空</el-button>
                                </el-form-item>
                            </div>
                            <el-form-item v-if="isShowAllSearchBox" :class="(isShowAllSearchBox && showAllSearchBox)?'doSearchBOX':''">
                                <el-button type="primary" icon="el-icon-search" @click="doSearch()">查询</el-button>
                                <el-button icon="el-icon-close" @click="clearSearchBox()">清空</el-button>
                                <el-tooltip effect="dark" content="查询后是否收缩搜索栏" placement="top-start" v-if="isShowAllSearchBox && showAllSearchBox">
                                  <el-checkbox v-model="shrinkSearchBox" true-label="1" false-label="0" style="position: absolute;right: -22px" @change="isShrinkSearchBox"></el-checkbox>
                                </el-tooltip>
                            </el-form-item>
                            <div @click="isShowSearchBox" class="isShowBox" :title="showAllSearchBox?'收缩':'展开'" v-if="isShowAllSearchBox && isPullDown">
                              <el-button type="text" style="color:#cccccc;font-size: 12px;padding: 0" icon="saspiconfont pl-icon-shousuoshangjiantou" v-if="showAllSearchBox">
                              </el-button>
                              <el-button type="text" style="color:#cccccc;font-size: 12px;padding: 0" icon="saspiconfont pl-icon-shousuojiantou" v-else>
                              </el-button>
<!--                              <i class="el-icon-arrow-up" v-if="showAllSearchBox"></i>-->
<!--                              <i class="el-icon-arrow-down" v-else></i>-->
                            </div>
                        </el-form>
                    </div>
                </el-header>
                <el-main class="listview-main" style="height: 100%;padding: 0 10px;box-sizing: border-box;overflow-y: hidden">
                    <!--列表视图按钮-->
                    <el-header style="height: auto;padding: 0 0 10px 0;" v-if="headButtonArr.length > 0 && !setInitFunc.has('getSearchBox')" class="topButtonClass">
                        <template v-for="(headButton,index) in headButtonArr">
                            <!-- 数据导入按钮渲染  -->
                            <el-popover v-if="headButton.buttonType =='import'" :style="{'margin-right':'10px','margin-left': index ? '10px' : '0'}"
                                        placement="bottom" width="200" trigger="click" v-model="importDataVisible">
                                <el-upload
                                        class="upload-demo"
                                        ref="impxlsupload"
                                        :action="impUrl"
                                        :http-request="impData"
                                        :file-list="fileList"
                                        :limit="1"
                                        :on-exceed="onExceedimportData"
                                        :on-change = "onchangeimport"
                                        :on-remove = "onremoveimport"
                                        :before-upload="beforeImport"
                                        :auto-upload="false">
                                    <el-button slot="trigger" size="small" type="primary">选取导入文件</el-button>
                                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">
                                        数据导入
                                    </el-button>
                                </el-upload>
                                <el-button size="small" slot="reference"
                                           :type="headButton.buttonColor && defaultButtonTypeArr.includes(headButton.buttonColor) ?
                                             headButton.buttonColor:''"
                                           :style="headButton.buttonColor && !defaultButtonTypeArr.includes(headButton.buttonColor)?
                                             'background-color:'+headButton.buttonColor : ''"
                                           :icon="headButton.icon" round
                                           v-if="showButtonConfigtion(headButton)"
                                           :circle="headButton.isCircle" :plain="headButton.isPlain"
                                >
                                    {{headButton.showName}}
                                </el-button>
                            </el-popover>
                            <el-popover v-else-if="headButton.buttonType =='export'&&headButton.confirm!='true'" :style="{'margin-right':'10px','margin-left': index ? '10px' : '0'}"
                                        placement="bottom" width="260" trigger="click">
                                <el-button size="small" type="primary" @click="exportLocalData('local')">当前数据</el-button>
                                <el-button size="small" type="primary" @click="exportLocalData('select')">选择数据</el-button>
                                <el-button size="small" type="primary" @click="exportLocalData('all')">全部数据</el-button>
                                <el-button size="small" slot="reference"
                                           :type="headButton.buttonColor && defaultButtonTypeArr.includes(headButton.buttonColor) ?
                                             headButton.buttonColor:''"
                                           :style="headButton.buttonColor && !defaultButtonTypeArr.includes(headButton.buttonColor)?
                                             'background-color:'+headButton.buttonColor : ''"
                                           :icon="headButton.icon" round
                                           v-show="showButtonConfigtion(headButton)"
                                           :circle="headButton.isCircle" :plain="headButton.isPlain"
                                >
                                    {{headButton.showName}}
                                </el-button>
                            </el-popover>
                            <el-button size="small" v-else
                                       :type="headButton.buttonColor && defaultButtonTypeArr.includes(headButton.buttonColor) ?
                                             headButton.buttonColor:''"
                                       :style="headButton.buttonColor && !defaultButtonTypeArr.includes(headButton.buttonColor)?
                                             'background-color:'+headButton.buttonColor : ''"
                                       :icon="headButton.icon" round
                                       v-show="showButtonConfigtion(headButton)"
                                       :circle="headButton.isCircle" :plain="headButton.isPlain"
                                       @click="buttonOpt(headButton)">
                                {{headButton.showName}}
                            </el-button>
                        </template>
                        <div class='topRightBtnClass'>
                            <div v-if='Number(viewDefinData.isDiyColumns)' class='xslsz'>
                                <el-popover
                                    popper-class='diyColumnPopver'
                                    placement="bottom-end"
                                    :width="200"
                                    v-model='diyColunmVisible'
                                    trigger="click">
                                    <div>
                                        <div class='diyColumnContent'>
                                            <el-button ref='checkBtn' class='checkBtn' size='mini' :type='checkAll ? "" : "primary"' style='margin-bottom: 8px' @click="handleCheckAllChange($event)">{{ checkAll ? '取消全选' : '全选' }}</el-button>
                                            <label v-for="(item,index) in showColumnFieldArr" :key="item.fieldId" :label="item.showName"
                                                   :value="item.fieldId">
                                                <el-row ref="fieldCheckboxRefs" class="field-row"
                                                        :style="{'background-color':item.checked ? '#E5F6FE' : '','margin-bottom':'8px','padding':'2px 3px','cursor': 'pointer'}">
                                                    <el-col :span="20">
                                                        <div>
                                                            <el-checkbox v-model="item.checked"
                                                                         style="margin-right: 10px">
                                                            </el-checkbox>
                                                            {{item.showName}}
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="4"></el-col>
                                                </el-row>
                                            </label>
                                        </div>
                                        <div style='border-top: 1px solid #EBEEF5;padding: 5px 0;text-align: center'>
                                            <el-button size="mini" type="primary" slot="reference" @click="saveDiyCloumn">确定</el-button>
                                            <el-button size="mini" slot="reference" @click="diyColunmVisible = false">取消</el-button>
                                        </div>
                                    </div>
                                    <el-button size="small" type="primary" round slot="reference">显示列设置</el-button>
                                </el-popover>
                            </div>
                        </div>
                    </el-header>
                    <!--编辑列表按钮-->
                    <el-header style="height: auto;padding: 0 0 10px 0;" v-if="isEditTable == '1' && isEditData && hidenDeleteBtn == '0' && !setInitFunc.has('getSearchBox')">
                        <el-button size="small" v-for="(headButton,index) in editTableButton.head" :key="index"
                                   v-if="(hidenAddBtn == '1' && headButton.buttonType == 'add') || hidenAddBtn == '0'"
                                   :type="headButton.type" :icon="headButton.icon" @click="buttonOpt(headButton)">
                            {{headButton.buttonName}}
                        </el-button>
                        <!--编辑列表头部自定义按钮-->
                        <el-button v-for="topButton in topDiyButtonArr" :key="topButton.id" size="small"
                                   :type="topButton.buttonColor && defaultButtonTypeArr.includes(topButton.buttonColor) ?
                                             topButton.buttonColor:''"
                                   :style="topButton.buttonColor && !defaultButtonTypeArr.includes(topButton.buttonColor)?
                                             'background-color:'+topButton.buttonColor: ''"
                                   :icon="topButton.icon"
                                   :round="topButton.isRound"
                                   :circle="topButton.isCircle"
                                   v-if="isShowDiyButton == '1'"
                                   @click="buttonOpt(topButton)">
                            {{topButton.showName}}
                        </el-button>
                    </el-header>
                    <el-main class="listview-table" :style="getTableStyle()">
                        <el-table :data="!this.isShowPage()?loadMoreItem:dataRows" stripe border :height="isCompositeView?'':'100%'"  :style="'width: 100%;'+autoOpenHeight? 'min-height:'+minHeight:''" ref="listViewPreViewRef" :header-cell-class-name="cellClass" @sort-change="sortChange"
                                  @selection-change="handleSelectionChange" :row-style="rowStyle ? rowStyle : {height:'10px'}"
                                  :header-row-style="headerRowStyle" v-if="!switchTable && isShowTableTest && viewDefinData.isShowCard != '1' && (!setInitFunc.has('getFormField'))"  v-infinite-scroll="loadMoreRows">
                            <el-table-column type="selection" width="40" align="center" v-if="isEjectTableShowSelect"></el-table-column>
                            <el-table-column type="selection" width="40" align="center" v-if="!isEjectTableShowSelect&&viewDefinData.selection=='1'&&isEjectTable == '0'&&isViewTable == '0'"  :selectable="selectable"></el-table-column>
                            <el-table-column type="index" label="序号" width="50" :align="viewDefinData.viewAlign"  v-if="viewDefinData.isNeedNum=='1'" fixed></el-table-column>
                            <el-table-column  v-for="(showField,index) in showFieldArr" :key="index" :align="(showField.align=='sys'?viewDefinData.viewAlign:showField.align)"
                                              v-if="showField.hiddenCol != '1' && showField.forbidden != '1' && showField.diyColumns !== '1'" :sortable="showField.rowSort == '1'?'custom':false"
                                              :label="showField.showName"
                                              :width="showField.fixed == '1' ? showField.width : 'auto'"
                                              :min-width="((Number(showField.width) / columnTotalLength) * 100) + '%'"
                                              :prop="index + ''"
                                              :fixed="showField.locked == '1'" :formatter="formatterColumn"
                                              :show-overflow-tooltip="(showField.textShowType== 'overflow' )|| (showField.textShowType==  'light')">
                                <!--<template slot-scope="scope">
                                    <span v-if="showField.combine == '1' && showField.combineType == '1' && showField.allFieldIdArr"
                                          v-for="(fieldId,idIndex) in showField.allFieldIdArr" :key="fieldId">
                                        <span v-if="idIndex != 0 && scope.row[showFieldObj[fieldId].fieldName + '_' + showFieldObj[fieldId].formId]">-</span>
                                        {{scope.row[showFieldObj[fieldId].fieldName + "_" + showFieldObj[fieldId].formId]}}
                                    </span>
                                    <span v-if="showField.combine == '0' && showField.combineType != '1'">
                                        {{scope.row[showField.fieldName + "_" + showField.formId]}}
                                    </span>
                                </template>-->
                            </el-table-column>
                            <!--列表视图按钮-->
                            <el-table-column class-name="no-print" label="操作" v-if="Object.keys(optButtonObj).length > 0 && isHideenOptBtn == '0'" fixed="right"
                                             :width="optColumnLength" :align="viewDefinData.viewAlign" align="center">
                                <template slot-scope="scope">
                                    <el-button v-for="(optButton,index) in optButtonArr" :key="index" size="small"
                                               :type="optButton.buttonColor && defaultButtonTypeArr.includes(optButton.buttonColor) ?
                                             optButton.buttonColor:''"
                                               :style="optButton.buttonColor && !defaultButtonTypeArr.includes(optButton.buttonColor)?
                                             'background-color:'+optButton.buttonColor: ''"
                                               :icon="optButton.icon" :round="optButton.isRound"
                                               :circle="optButton.isCircle" :plain="optButton.isPlain"
                                               v-if="showButtonConfigtion(optButton,scope.row) && viewDefinData.hideOperateBtnText != '1'"
                                               @click="buttonOpt(optButton,scope.row,scope.$index)">
                                        {{optButton.showName}}
                                    </el-button>
                                    <!--隐藏操作栏文字-->
                                    <el-tooltip class="item" effect="dark" :content="optButton.showName" placement="top-start"
                                                v-for="(optButton,index) in optButtonArr" :key="optButton.id">
                                        <el-button :key="index" size="small"
                                                   :type="optButton.buttonColor && defaultButtonTypeArr.includes(optButton.buttonColor) ?
                                         optButton.buttonColor:''"
                                                   :style="optButton.buttonColor && !defaultButtonTypeArr.includes(optButton.buttonColor)?
                                         'background-color:'+optButton.buttonColor: ''"
                                                   :icon="optButton.icon" :round="optButton.isRound"
                                                   :circle="optButton.isCircle" :plain="optButton.isPlain"
                                                   v-if="showButtonConfigtion(optButton,scope.row) && viewDefinData.hideOperateBtnText == '1'"
                                                   @click="buttonOpt(optButton,scope.row,scope.$index)">
                                        </el-button>
                                    </el-tooltip>

                                </template>
                            </el-table-column>
                            <!--弹出数据表、编辑列表、查看列表按钮-->
                            <el-table-column label="操作" align="center"
                                             v-if="(isEjectTable == '1' ||
                                                   (isEditTable == '1' && (hidenViewBtn == '0' || hidenViewBtn == '1' && (specialTypeWidth != '200'|| isEditData)))
                                             || isViewTable == '1') && isHideenOptBtn=='0' &&hidenAllBtn=='0'"
                                             fixed="right" :width="specialTypeWidth">
                                <template slot-scope="scope">
                                    <!--弹出数据表按钮-->
                                    <el-button size="small" v-if="isEjectTable == '1'&&isEjectTableShowRowButton"
                                               v-for="(optButton,index) in ejectTableButton" :key="index"
                                               :type="optButton.type" :icon="optButton.icon"
                                               @click="buttonOpt(optButton,scope.row,scope.$index)">
                                        {{optButton.buttonName}}
                                    </el-button>
                                    <!--弹出数据表按钮 不显示行选择按钮-->
                                    <el-button size="small" v-if="isEjectTable == '1'&&!isEjectTableShowRowButton"
                                               :type="optButton.type" :icon="optButton.icon" @click="buttonOpt(optButton,scope.row,scope.$index)"
                                               v-for="(optButton,index) in ejectTableButton2" :key="index">
                                        {{optButton.buttonName}}
                                    </el-button>
                                    <!--编辑列表按钮-->
                                    <div v-if="isEditTable == '1'">
                                        <el-button size="small" v-for="(optButton,index) in editTableButton.opt" :key="index"
                                                   v-if="(optButton.buttonType == 'view' &&　hidenViewBtn == '0') || (optButton.buttonType == 'update' && (isEditData && hidenUpdateBtn =='0')) &&diyHideRowBtn(scope.row)"
                                                   :type="optButton.type" :icon="optButton.icon"
                                                   @click="buttonOpt(optButton,scope.row,scope.$index)">
                                            {{optButton.buttonName}}
                                        </el-button>
                                        <!--编辑列表行自定义按钮-->
                                        <el-button v-for="optButton in optDiyButtonArr" :key="optButton.id" size="small"
                                                   :type="optButton.buttonColor && defaultButtonTypeArr.includes(optButton.buttonColor) ?
                                             optButton.buttonColor:''"
                                                   :style="optButton.buttonColor && !defaultButtonTypeArr.includes(optButton.buttonColor)?
                                             'background-color:'+optButton.buttonColor: ''"
                                                   :icon="optButton.icon" :round="optButton.isRound"
                                                   :circle="optButton.isCircle" :plain="optButton.isPlain"
                                                   v-if="showButtonConfigtion(optButton,scope.row) && isShowDiyButton == '1' && isEditData"
                                                   @click="buttonOpt(optButton,scope.row,scope.$index)">
                                            {{optButton.showName}}
                                        </el-button>
                                    </div>

                                    <!--查看列表按钮-->
                                    <el-button size="small" v-if="isViewTable == '1'&&isEjectTable != '1'"
                                               v-for="(optButton,index) in viewTableButton" :key="index"
                                               :type="optButton.type" :icon="optButton.icon"
                                               @click="buttonOpt(optButton,scope.row,scope.$index)">
                                        {{optButton.buttonName}}
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--列表视图行可编辑-->

                        <el-table :data="dataRows" stripe border height="100%" :style="'width: 100%;'+autoOpenHeight? 'min-height:'+minHeight:''" ref="listViewPreViewRef2" :header-cell-class-name="cellClass"
                                  @selection-change="handleSelectionChange" :row-style="rowStyle ? rowStyle : {height:'10px'}"
                                  :header-row-style="headerRowStyle" v-if="switchTable && isShowTableTest && viewDefinData.isShowCard != '1'">
                            <el-table-column type="selection" width="40" align="center" v-if="viewDefinData.selection=='1'&&((isEjectTable == '0'||isEjectTableShowSelect)||isViewTable=='0')"></el-table-column>
                            <el-table-column type="index" label="序号" width="50" :align="viewDefinData.viewAlign" v-if="viewDefinData.isNeedNum=='1'" fixed></el-table-column>
                            <el-table-column   v-for="(showField,index) in showFieldArr" :key="index" :align="(showField.align=='sys'?viewDefinData.viewAlign:showField.align)"
                                               v-if="showField.hiddenCol != '1' && showField.forbidden != '1'"
                                               :label="showField.showName"
                                               :width="showField.fixed == '1' ? showField.width : 'auto'"
                                               :min-width="((Number(showField.width) / columnTotalLength) * 100) + '%'"
                                               :prop="index + ''"
                                               :fixed="showField.locked == '1'" :formatter="formatterColumn"
                                               :show-overflow-tooltip="(showField.textShowType== 'overflow' )|| (showField.textShowType==  'light')">
                                <template slot-scope="scope">

<!--                                  -->
                                    <!--引用组件-->
                                    <list-view-preview-redact
                                            :scope="scope"
                                            :showField="showField"
                                            :isShowRedact="isShowRedact"
                                            :showFieldType="showFieldType"
                                            :showContentField="showContentField"
                                            :tableviewsData="tableviewsData"
                                            :timeSpecialSet="timeSpecialSet"
                                            :currentPageDataObj="currentPageDataObj"
                                            :listFields="listFields"
                                            :checkboxValue="checkboxValue"
                                            :index="index"
                                            :formFieldObj="formFieldObj"
                                            :formatterColumnCard="formatterColumnCard"
                                            :parent-opt-form-data="parentOptFormData">
                                    </list-view-preview-redact>

                                </template>
                            </el-table-column>
                            <!--列表视图按钮-->
                            <el-table-column label="操作" v-if="Object.keys(optButtonObj).length > 0 && isHideenOptBtn=='0'" fixed="right"
                                             width="200" :align="viewDefinData.viewAlign">
                                <template slot-scope="scope">
                                    <el-button v-for="(optButton,index) in optButtonArr" :key="index" size="small"
                                               :type="optButton.buttonColor && defaultButtonTypeArr.includes(optButton.buttonColor) ?
                                             optButton.buttonColor:''"
                                               :style="optButton.buttonColor && !defaultButtonTypeArr.includes(optButton.buttonColor)?
                                             'background-color:'+optButton.buttonColor: ''"
                                               :icon="optButton.icon" :round="optButton.isRound"
                                               :circle="optButton.isCircle" :plain="optButton.isPlain"
                                               v-if="showButtonConfigtion(optButton,scope.row)&&viewBtnConfing(optButton,scope.$index)"
                                               @click="buttonOpt(optButton,scope.row,scope.$index)">
                                        {{optButton.showName}}
                                    </el-button>
                                    <!--v-show="saveBtnConfing(scope.$index)"   v-if="viewBtnConfing(optButton,scope.$index)" v-show="isShowSaveBtn[scope.$index]"-->
                                    <el-button type="primary" icon="el-icon-check" size="small"   @click="saveBtn(scope.row,scope.$index)" v-show="isShowSaveBtn[scope.$index]">保存
                                    </el-button>
                                    <el-button type="primary" icon="el-icon-close" size="small" @click="closeBtn(scope.row,scope.$index)" v-show="isShowSaveBtn[scope.$index]">取消
                                    </el-button>
                                </template>
                            </el-table-column>
                            <!--弹出数据表、编辑列表、查看列表按钮-->
                            <el-table-column label="操作" align="center"
                                             v-if="(isEjectTable == '1' ||
                                              (isEditTable == '1' && (hidenViewBtn == '0' || hidenViewBtn == '1' && ((specialTypeWidth != '200') || isEditData))
                                              || isViewTable == '1')) && isHideenOptBtn=='0'"
                                             fixed="right" :width="specialTypeWidth">
                                <template slot-scope="scope">
                                    <!--弹出数据表按钮-->
                                    <el-button size="small" v-if="isEjectTable == '1'&&isEjectTableShowRowButton"
                                               v-for="(optButton,index) in ejectTableButton" :key="index"
                                               :type="optButton.type" :icon="optButton.icon"
                                               @click="buttonOpt(optButton,scope.row,scope.$index)">
                                        {{optButton.buttonName}}
                                    </el-button>
                                    <!--弹出数据表按钮 不显示行选择按钮-->
                                    <el-button size="small" v-if="isEjectTable == '1'&&!isEjectTableShowRowButton"
                                               v-for="(optButton,index) in ejectTableButton2" :key="index"
                                               :type="optButton.type" :icon="optButton.icon"
                                               @click="buttonOpt(optButton,scope.row,scope.$index)">
                                        {{optButton.buttonName}}
                                    </el-button>
                                    <!--编辑列表按钮-->
                                    <div v-if="isEditTable == '1'">
                                        <el-button size="small" v-for="(optButton,index) in editTableButton.opt" :key="index"
                                                   v-if="viewBtnConfing(optButton,scope.$index) && ((optButton.buttonType == 'view' &&　hidenViewBtn == '0')|| (optButton.buttonType == 'update' && isEditData))"
                                                   :type="optButton.type" :icon="optButton.icon"
                                                   @click="buttonOpt(optButton,scope.row,scope.$index)">
                                            {{optButton.buttonName}}
                                        </el-button>
                                      <el-button type="primary" icon="el-icon-check" size="small"   @click="saveBtn(scope.row,scope.$index)" v-show="isShowSaveBtn[scope.$index]">保存
                                      </el-button>
                                      <el-button type="primary" icon="el-icon-close" size="small" @click="closeBtn(scope.row,scope.$index)" v-show="isShowSaveBtn[scope.$index]">取消
                                      </el-button>

                                        <!--编辑列表行自定义按钮-->
                                        <el-button v-for="(optButton,index) in optDiyButtonArr" :key="index" size="small"
                                                   :type="optButton.buttonColor && defaultButtonTypeArr.includes(optButton.buttonColor) ?
                                             optButton.buttonColor:''"
                                                   :style="optButton.buttonColor && !defaultButtonTypeArr.includes(optButton.buttonColor)?
                                             'background-color:'+optButton.buttonColor: ''"
                                                   :icon="optButton.icon" :round="optButton.isRound"
                                                   :circle="optButton.isCircle" :plain="optButton.isPlain"
                                                   v-if="showButtonConfigtion(optButton,scope.row) && isShowDiyButton == '1' && isEditData"
                                                   @click="buttonOpt(optButton,scope.row,scope.$index)">
                                            {{optButton.showName}}
                                        </el-button>
                                    </div>

                                    <!--查看列表按钮-->
                                    <el-button size="small" v-if="isViewTable == '1'&&isEjectTable != '1'"
                                               v-for="(optButton,index) in viewTableButton" :key="index"
                                               :type="optButton.type" :icon="optButton.icon"
                                               @click="buttonOpt(optButton,scope.row,scope.$index)">
                                        {{optButton.buttonName}}
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>


                        <!--卡片样式-->
                        <div v-if="viewDefinData.isShowCard=='1'" style="width: 100%;margin-top: 5px;">
                            <div v-if="dataRows.length>0" v-for="(item,index) in dataRows" :key="index" :class="mycardclass">
                                <el-card class="box-card" shadow="always" :style="{'cursor':'default'}">
                                    <div slot="header" class="clearfix" @click="clickCard(item,index)">
                                        <div class="cardhead">
                                            <span class="cardhead-title" style="visibility:hidden">{{item.startUserName || loginUser.userName}}</span>
                                            <i :id="'checkCard_'+index" class="el-icon-check deleteVal" style="cursor:pointer;visibility:hidden;position:absolute;top:12px;right: 10px;font-size: 30px;color:#409EFF;"></i>
                                        </div>
                                    </div>

                                    <div class="mycardBody">
                                        <div v-for="(showField,index2) in showFieldArr" :key="index2" class="cardbody-box" :style="{'border-bottom': index2==(showFieldArr.length-1)?'0px':'1px dashed #E4EAF7'}">
                                            <div class="cardbody-title">{{showField.showName}}：</div>
                                            <el-tooltip class="item" effect="dark" :content="formatterColumnCard(item,index2,index)" placement="right-start">
                                                <div class="cardbody-content">{{formatterColumnCard(item,index2,index)}}</div>
                                            </el-tooltip>
                                        </div>
                                    </div>

                                    <div class="mycardFoot">
                                        <!--列表视图按钮-->
                                        <div v-if="Object.keys(optButtonObj).length > 0">
                                            <el-button v-for="(optButton,index) in optButtonArr" :key="index" size="small"
                                                       :type="optButton.buttonColor && defaultButtonTypeArr.includes(optButton.buttonColor) ?
                                             optButton.buttonColor:''"
                                                       :style="optButton.buttonColor && !defaultButtonTypeArr.includes(optButton.buttonColor)?
                                             'background-color:'+optButton.buttonColor: ''"
                                                       :icon="optButton.icon" :round="optButton.isRound"
                                                       :circle="optButton.isCircle" :plain="optButton.isPlain"
                                                       v-if="viewBtnConfing(optButton,index)&&showButtonConfigtion(optButton,item)"
                                                       @click="buttonOpt(optButton,item,index)">
                                                {{optButton.showName}}
                                            </el-button>
                                        </div>
                                    </div>

                                </el-card>
                            </div>
                        </div>
                    </el-main>
                    <el-footer v-if="isShowPage() && viewDefinData.isShowCard == '1'"
                               style="padding: 20px 0 0 0;">
                        <el-pagination
                                :current-page="currentPage"
                                :page-sizes="pageSizes"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total"
                                @size-change="handleSizeChangeCard"
                                @current-change="handleCurrentChangeCard">
                        </el-pagination>
                    </el-footer>

                    <el-footer v-if="isShowPage() && viewDefinData.isShowCard == '0'"
                               style="padding: 20px 0 0 0;">
                        <el-pagination
                                :current-page="currentPage"
                                :page-sizes="pageSizes"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange">
                        </el-pagination>
                    </el-footer>

                </el-main>
            </el-container>

            <el-dialog :close-on-click-modal="false" append-to-body :visible.sync="optDataDialog" custom-class="listViewPreviewDialog"
                       :width="dialogWidth" :height="dialogHeight" :top="dialogTop" :before-close="dialogFormClose">
                <div slot="title" :style="Object.assign({'width':'100%'},tableviewsData['dialog-title-style'])">
                    {{dialogTitle}}
                </div>
                <table-form-render v-if="optDataDialog"
                                   ref="formDataRef"
                                   :form-operate="formOperate"
                                   :tableview-id="formOperate == 'view' ? (multiTableViewId ? multiTableViewId : tableViewData.id) : tableViewData.id"
                                   :data-id="dataId"
                                   :form-id="formId"
                                   :list-view-id="listViewId"
                                   :is-edit-data="isUpdateData"
                                   :form-field-obj="formFieldObj"
                                   :edit-param-obj="editParamObj"
                                   :edit-relation-id="relationId"
                                   :extra-path="formBaseObj.formModule"
                                   :refreshData = refreshData
                                   :list-search-method="search"
                                   :list-out-param="listOutParam"
                                   :parent-opt-form-data="parentOptFormData"
                                   :isCopyOperate="isCopyOperate"
                                   :noCopyArr="noCopyArr"
                                   :form-btn-hidden-condition-obj="tviewBtnConditionObj"
                                   :form-btn-visble-obj="formBtnVisbleObj"
                                   @changeValue="changeValue"
                >
                </table-form-render>
                <div slot="footer" class="dialog-footer">
                    <el-button v-if="isUpdateData && !formBtnVisbleObj[viewButton.id]" v-for="(viewButton,index) in tableViewButtonArr" :key="index"
                               size="small"
                               :type="viewButton.buttonColor && defaultButtonTypeArr.includes(viewButton.buttonColor) ?
                                                 viewButton.buttonColor:''"
                               :style="viewButton.buttonColor && !defaultButtonTypeArr.includes(viewButton.buttonColor)?
                                                 'background-color:'+viewButton.buttonColor : ''"
                               :icon="viewButton.buttonIcon"
                               @click="buttonOpt(viewButton)">
                        {{viewButton.buttonName}}
                    </el-button>
                    <el-button v-if="!isUpdateData" size="small" icon="el-icon-close" @click="closeDialog()">关闭</el-button>
                </div>
            </el-dialog>

            <el-dialog :close-on-click-modal="false" append-to-body :visible.sync="columnFormatDialogObj.visible"
                       :width="columnFormatDialogObj['width'] || '80%'"
                       :height="columnFormatDialogObj['height'] || '90%'"
                       :top="columnFormatDialogObj['top'] || '5vh'">
                <div slot="title">
                    {{columnFormatDialogObj.title}}
                </div>


                <div v-if="columnFormatDialogObj.visible && columnFormatDialogObj.type != 'listView'">
                    <table-form-render
                                       ref="formDataRef"
                                       form-operate="view"
                                       :list-out-param="listOutParam"
                                       :list-view-id="columnFormatDialogObj.listViewId"
                                       :tableview-id="columnFormatDialogObj.tableViewId"
                                       :data-id="columnFormatDialogObj.dataId">
                    </table-form-render>
                </div>

                <list-view-preview v-if="columnFormatDialogObj.type == 'listView' && columnFormatDialogObj.visible"
                                   v-bind="columnFormatDialogObj.listOutParam"
                                   :listOutParam="columnFormatDialogObj.listOutParam"
                                   :extraCondition="columnFormatDialogObj.extraCondition"
                                   :equilibriumData="columnFormatDialogObj.equilibriumData || {}"
                                   ref="columnFormatListViewPreViewRef"
                                   :class="columnFormatDialogRef"
                                   :pRefs="columnFormatDialogRef"
                                   isPreview
                                   :form-id="columnFormatDialogObj.formId"
                                   :condition-id="columnFormatDialogObj.conditionId || ''"
                                   :list-view-id="columnFormatDialogObj.listViewId">>
                </list-view-preview>

                <div slot="footer" class="dialog-footer">
                    <el-button size="small" icon="el-icon-close" @click="columnFormatDialogObj.visible = false">关闭</el-button>
                </div>
            </el-dialog>

            <!--自定义按钮 弹出框-->
            <el-dialog :close-on-click-modal="false" append-to-body :title="openDialogData.title"
                       :visible.sync="logicOpenDialogVisible" :custom-class="(openDialogData.needSaveBtn == '1'||openDialogData.needCloseBtn == '1')?'hasfooter-dialog':'nofooter-dialog'"
                       :width="openDialogData.dialogWidth" :height="openDialogData.dialogHeight"
                       :top="openDialogData.topSpace+'vh'" @close="closeDiyDialog" >

                <!--弹出表单-->
                <table-form-render v-if="logicOpenDialogVisible && isShow(openDialogData.pageUrl,'tableView')"
                                   :form-operate="openDialogData.paramObj['formOperate'] ? openDialogData.paramObj['formOperate'] : (openDialogData.paramObj['dataId'] ? 'update' : 'add')"
                                   v-bind="openDialogData.paramObj"
                                   ref="buttonFormDataRef"
                                   :list-out-param="listOutParam"
                                   :outParam="openDialogData.paramObj"
                                   :tableview-id="openDialogData.tableViewId"
                                   :data-id="openDialogData.paramObj['dataId']"
                                   :list-search-method="search"
                                   :form-id="openDialogData.formId"
                                   :form-field-obj="formFieldObj"
                                   :extra-path="formBaseObj.formModule">
                </table-form-render>

                <!--弹出列表视图-->
                <list-view-preview
                                   v-if="logicOpenDialogVisible && isShow(openDialogData.pageUrl,'listView')"
                                   v-bind="openDialogData.paramObj"
                                   :listOutParam="openDialogData.paramObj"
                                   :equilibriumData="openDialogData.equilibriumData || {}"
                                   ref="buttonFormDataRef" isPreview
                                   @diySureCallback="diySureCallback"
                                   :form-id="openDialogData.formId"
                                   :condition-id="openDialogData.conditionId || ''"
                                   :list-view-id="openDialogData.listViewId">
                </list-view-preview>

                <!--复合视图-->
                <!--<complex-rendering v-if="isShow(openDialogData.pageUrl,'complex')"-->
                <!--:id="item.url[item.url.length - 1]"-->
                <!--v-bind="openDialogData.paramObj"-->
                <!--menu-id="42e98c847d2a4befaa935724e10df086" :is-sup="true">-->
                <!--</complex-rendering>-->
                <complex-view-rendering   v-if="logicOpenDialogVisible && isShow(openDialogData.pageUrl,'complex')"
                                          v-bind="openDialogData.paramObj"
                                          ref="buttonFormDataRef"
                                          :resource-id="openDialogData.resouceId"
                                          :data-permis="openDialogData.dataPermis"
                                          :operate-permis="openDialogData.operatePermis"
                ></complex-view-rendering>

                <!--弹出自定义页面-->
                <component v-if="diyPageIsInit? (logicOpenDialogVisible && isShow(openDialogData.pageUrl,'diyPage')) : (isShow(openDialogData.pageUrl,'diyPage') && logicOpenDialogVisible)"
                           v-bind="openDialogData.paramObj"
                           ref="buttonFormDataRef"
                           :callbackMethod="callbackMethod"
                           @closeDiyDialog="closeDiyDialog"
                           :is="componentIndex">
                </component>

                <div slot="footer" class="dialog-footer" v-if="openDialogData.needSaveBtn == '1'||openDialogData.needCloseBtn == '1'">
                    <el-button size="small" icon="el-icon-success"  type="primary" @click="saveDiyDialog" v-if="openDialogData.needSaveBtn == '1'">{{openDialogData.needSaveBtnName}}</el-button>
                    <el-button size="small" icon="el-icon-close" @click="closeDiyDialog" v-if="openDialogData.needCloseBtn == '1'">{{openDialogData.needCloseBtnName}}</el-button>
                </div>
            </el-dialog>

            <!--模板导入-->

            <!--列格式化弹出框 弹出对话框-->
            <el-dialog :close-on-click-modal="false" append-to-body :visible.sync="formatterEventDialog" :title="formatEvetDilogObj.title"
                       :width="formatEvetDilogObj.width" :height="formatEvetDilogObj.height" :top="formatEvetDilogObj.top">
                <!--外部地址-->
                <div v-if="formatEvetDilogObj.type == 'url'" style="box-sizing: border-box;" :style="{'height':'100%'}">
                    <iframe :src="formatEvetDilogObj.url" frameborder="0" width="100%" scrolling="auto"
                            :style="{'height':'100%'}">
                    </iframe>
                </div>
                <!--内部地址-->
                <component  v-if="formatEvetDilogObj.type == 'page'"
                            :is="formatEvetDilogObj.componentIndex"
                            v-bind="formatEvetDilogObj.param" >
                </component>
                <div slot="footer" class="dialog-footer">
                    <el-button  size="small" icon="el-icon-close" @click="formatterEventDialog = false">关闭</el-button>
                </div>
            </el-dialog>

            <!-- 导出自定义 -->
            <el-dialog height="80%" width="80%" top="5vh" :title="expDialogObj.title"
                       :visible.sync="expDialogObj.showDialog" append-to-body
                       :close-on-click-modal=false>
                <el-container style="height: 100%" v-loading="expLoading" element-loading-text="正在导出，请稍候...">
                    <el-main style="width: 100%;height: 100%;padding: 0" class="expdialog">
                        <div>
                            <el-divider direction="vertical"></el-divider>
                            <span style="font-weight: bold">导出列设置</span>
                            <el-divider style="margin: 12px 0;"></el-divider>
                            <el-radio-group v-model="expDialogObj.activeColName">
                                <el-radio :label="'showCol'">当前显示列</el-radio>
                                <el-radio :label="'defineCol'">自定义列</el-radio>
                            </el-radio-group>
                            <el-checkbox v-model="expDialogObj.checkedAll" v-if="expDialogObj.activeColName == 'defineCol'"
                                         @change="checkalldiyexport"   style="margin-left: 45px">全选</el-checkbox>
                        </div>
                        <div v-if="expDialogObj.activeColName == 'defineCol'" style="margin-top: 10px;min-height:100px;max-height: calc(100% - 250px);overflow-y: auto" class="exp-legend">
                            <div style="min-width: 150px;float: left;margin-top: 15px;border: 0" v-if="!expDialogObj.isLegend"
                                 v-for="(item,itemIndex) in expDialogObj.defineColArr" :key="itemIndex">
                                <el-checkbox :label="item.showName" v-model="item.checked">
                                </el-checkbox>
                            </div>
                            <div v-if="expDialogObj.isLegend">
                                <fieldset v-for="(item,index) in expDialogObj.legendColArr" :key="index"
                                          style="border: 1px #DCDFE6 solid;padding: 0px 0px 10px 10px;margin-top: 5px;">
                                    <legend style="padding: 0px 5px;">{{item.name}}</legend>
                                    <div style="min-width: 150px;float: left;margin-top: 10px" v-for="(each,eachIndex) in item.colArr" :key="eachIndex">
                                        <el-checkbox :label="each.showName" v-model="each.checked" @change="explegendCheck">
                                        </el-checkbox>
                                    </div>
                                </fieldset>
                            </div>
                            <div style="clear:both"></div>
                        </div>
                        <div>
                            <el-divider style="margin: 12px 0;"></el-divider>
                            <el-divider direction="vertical"></el-divider>
                            <span style="font-weight: bold">导出行设置</span>
                            <el-divider style="margin: 12px 0;"></el-divider>
                            <el-radio-group v-model="expDialogObj.activeRowName">
                                <el-radio :label="'showRow'">当前显示行</el-radio>
                                <el-radio :label="'checkedRow'">选中行</el-radio>
                                <el-radio :label="'allRow'">所有行</el-radio>
                            </el-radio-group>
                        </div>
                    </el-main>
                </el-container>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="beginExp" type="primary" size="small" icon="el-icon-success">确定</el-button>
                    <el-button @click="expDialogObj.showDialog = false" size="small" icon="el-icon-error">关闭</el-button>
                </div>
            </el-dialog>

        </el-container>
        <!-- 请求前后加载组件 -->
        <component v-if="loadBeforeComp" v-for="componetObj in reqBeforeComps" :key="componetObj.name + '_beforeRef'" :ref="componetObj.name+'_beforeRef'"
                   :is="componetObj.component" :formatObj="componetObj.formatObj">
        </component>
        <component v-if="loadAfterComp" v-for="componetObj in reqAfterComps" :key="componetObj.name + '_afterRef'" :ref="componetObj.name+'_afterRef'"
                   :is="componetObj.component" :formatObj="componetObj.formatObj" :dataRows="dataRows" :showFieldObj="showFieldObj" :listOutParam="listOutParam">
        </component>
        <!-- 请求前后加载组件end -->
        <el-dialog :title="'智能建表配置(' + pageName + ')'" class="addDialog" append-to-body
                   :close-on-click-modal="false"
                   :visible.sync="formSettingVisible" width="99%" height="98%" top="1vh">
            <vue-form-edit :form-id="formId" :define-key="formDefineKey"
                           v-if="formSettingVisible" @cancel="formSettingVisible = false;"></vue-form-edit>
        </el-dialog>
    </div>
</template>

<script>
    import PlCascadeSelect from "../../../components/public/plCascadeSelect";
    import PlDateTimePicker from "../../../components/public/plDateTimePicker";
    import TableFormRender from "../formRender/tableFormRender";
    import formMixins from "./js/listViewPreviewMixins";
    import PlDataRadioBox from "../tableViewsDialog/tableviewRenderComp/plDataRadioBox";
    import PlOrgSelect from "../../../components/public/plOrgSelect";
    import PlCascadeSingle from "../../../components/public/plCascadeSingle";
    import PlCascadeSelectForm from "../../../components/public/plCascadeSelectForm";
    import ListViewPreviewRedact from "./listViewPreviewRedact";
    import PlDivider from "../../../components/public/plDivider";
    import {WORK_GLOBAL} from "sasp-base";

    export default {
        name: "list-view-preview",
        mixins:[formMixins],
        components: {
            PlDivider,
            ListViewPreviewRedact,
            PlCascadeSelectForm,
            PlCascadeSingle,
            PlOrgSelect,
            PlDataRadioBox,
            TableFormRender, PlDateTimePicker, PlCascadeSelect},
        props: {

        },

        watch:{
            refreshPreview(){
                if(this.refreshPreview){
                    this.getDataRows();
                }
            },
            dataRows(){
              if(!this.isShowPage()){
                this.loadMoreRows()
              }
              this.dataRows.forEach(item=>{
                  if(!window.hasProject.includes(item.ID_cb36f7488d4c11eb83e4210a340ad991)){
                      window.hasProject.push(item.ID_cb36f7488d4c11eb83e4210a340ad991)
                  }
              })
            },
        },
        data(){
            return {
                formSettingVisible:false,
                workTurnOn:false,
                loadMoreCount:20,
                loadMoreItem:[],
                showAllSearchBox:false,
                serrchboxHeightOld:0,
                pageName: "",
            }
        },

        created() {
            window.hasProject=[];
            this.initWorkStageTurnOn();
            this.initData2();
        },
        mounted(){
          window.onresize = () =>{//浏览器变化时重新赋值
            this.showAllSearchBox = false;
            let h= this.$refs.hqgd.offsetHeight;
            this.serrchboxHeightOld = h + 'px';
            this.getSearchBoxWidth();
          }
        },
        methods:{ //公用方法在listviewpreviewmixins.js
            isShrinkSearchBox(val){//点击复选框更新是否查询后收缩
                this.getIsShrink().then(res => {
                    if(res && res.data.length > 0){
                        res.data.forEach(item => {
                            if(JSON.parse(item.preJson).id == this.listModel.listViews.id){
                                let formObj = {};
                                formObj['isShrink'] = val;
                                formObj['id'] = this.listModel.listViews.id;
                                let updataIsShrink = {"id":item.id,"preJson":JSON.stringify(formObj)};
                                this.axios.post(this.api.userPreferences.update, updataIsShrink).then(res => {
                                    if (res && res.data && !res.data.operateSuccess) {
                                        this.$message.error("设置失败");
                                    }
                                });
                            }
                        })
                    }
                })
            },
            //自定义显示列保存方法
            saveDiyCloumn(){
                this.showColumnFieldArr.forEach(item => {
                    if (item.checked){
                        this.showFieldArr.forEach(items => {
                            if (item.id == items.id){
                                this.$set(items,"diyColumns","0");
                            }
                        })
                    }else {
                        this.showFieldArr.forEach(items => {
                            if (item.id == items.id){
                                this.$set(items,"diyColumns","1");
                            }
                        })
                    }
                })
                this.diyColunmVisible = false;
            },
            isShowSearchBox(){//展开收缩
                this.showAllSearchBox = !this.showAllSearchBox;
                if(this.showAllSearchBox){//获取收缩时元素高度
                  let h1 = this.$refs.hqgd.offsetHeight;
                  this.serrchboxHeightOld = h1 + 'px';
                }
              },
              //点击列排序是的函数
              async sortChange({column, prop, order}){
                  if(order){//有排序定义
                      const loading = this.$loading({
                          target: this.$refs["listViewPreViewRef"].$el,
                          lock: true,
                          text: '正在加载，请稍后....',
                          spinner: 'el-icon-loading',
                          background: 'rgba(0, 0, 0, 0.7)'
                      });
                      let sortOrder = (this.showFieldArr||[])[prop].fieldName + (order == "ascending"?' asc':' desc')//拼接查询条件升序降序
                      //是否需要分页
                      if(this.isShowPage()){
                        this.currentPage = 1;
                      } else {
                        this.currentPage = 0;
                      }
                      this.axios.post(this.api.plCommonmethod.findDataByFormId,{//按照升降序重新查询
                        formId:this.formId,
                        currentPage:this.currentPage,
                        rows:this.pageSize,
                        order:sortOrder
                      }).then(res => {
                        if(res && res.data){
                          loading && loading.close();
                          let dataObj = res.data.operateObj;
                          let dataNew = [];

                          ((dataObj || {}).records || []).forEach(item => {//返回值拼接formDefineKey,让新值与正常查询返回值一致，否则无法渲染
                            let objNew = {};
                            Object.keys(item).forEach(item1 => {
                              objNew[item1 + '_' + (this.showFieldArr||[])[prop].formDefineKey] = item[item1]
                            })
                            dataNew.push(objNew)
                          })
                          if (this.currentPage) {//重新赋值
                            this.dataRows = dataNew;
                            this.total = (dataObj || {}).total;
                          } else {
                            this.dataRows = dataNew;
                          }
                        }
                      })
                  }else{//没有排序定义重新查询
                      this.doSearch();
                  }
              },
            dialogFormClose(){
                // console.log('关闭了');
                this.$refs.formDataRef.closeDialog();  //关闭
            },
            loadMoreRows(){
              if(this.dataRows && this.dataRows.length>0){
                let copyDataRows=JSON.parse(JSON.stringify(this.dataRows))
                if(this.dataRows.length>this.loadMoreCount){
                  this.loadMoreCount+=20
                  this.loadMoreItem=copyDataRows.slice(0,this.loadMoreCount)

                }else{
                  this.loadMoreItem=copyDataRows.slice(0,this.loadMoreCount)
                }

              }else{
                  this.loadMoreItem = [];
              }
            },
            async doSearch() {
                const loading = this.$loading({
                    target: this.$refs["listViewPreViewRef"].$el,
                    lock: true,
                    text: '正在加载，请稍后....',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                if(this.shrinkSearchBox == '1'){
                    this.showAllSearchBox = false;
                }
                if(this.isShowPage()){
                    this.currentPage = 1;
                }
                await this.getDataRows();
                loading.close();
                this.$message({
                    type: "success",
                    message: "查询成功"
                })
            },
            async search() {
                await this.getDataRows();
            },
            /*
                回调刷新table数据
            */
            refreshData(){
                this.getDataRows();
            },
            initWorkStageTurnOn(){
                this.workTurnOn = WORK_GLOBAL.getTurnOn(this.switchOnline,this.listViewId);
            },
            switchOnline(val){
                this.workTurnOn = val;
            },
            /**
             * 打开相关的智能建表
             */
            showFormSetting(){
                this.axios.post(this.api.plPageInfo.find,{tableViewId:this.tableViewData.id}).then(res => {
                    let pageInfo = (res.data || [])[0] || {};
                    this.pageName = pageInfo.pageName || "";
                    if (this.SASP_FORM_CONFIG_PACK) {
                        this.formSettingVisible = true;
                    } else {
                        let title = "智能建表配置("+ (this.pageName || this.tableViewData.viewName) +")";
                        let href = window.FORM_RENDER_URL + "/formPath/index.html#/vueFormEditRedirect" +
                            "?formId=" + this.formId + "&defineKey=" + this.formDefineKey +
                            "&title=" + title;
                        window.open(href,"_blank");
                    }
                })
            },
            /**
             * 动态计算top
             * @returns {string}
             */
            /*calcDialogTop() {
                if (this.dialogHeight.indexOf("%") > -1 || this.dialogHeight.indexOf("vh") > -1) {
                    return (100 - Number(this.dialogHeight.replace("%", "").replace("vh", ""))) / 2 + "vh";
                }
                return this.dialogTop;
            }*/

            /**
             * 回填自定义
             * @param arr 回填参数
             * @param callBackFiled 需要赋值的字段
             */
            diySureCallback(arr,callBackFiled){
                if(arr.length == 0){
                    return;
                }
                //回填对象数据回填到当前列表中
                //执行新增逻辑
                //将值先传给列表
                if(callBackFiled){
                    this.$set(this.parentFormData,callBackFiled,arr.join(","));
                    this.$set(this.compositeObj,callBackFiled,arr.join(","));
                }

                this.closeDiyDialog();
            }

        }
    }
</script>

<style scoped lang="scss">
    /* 去掉全选按钮 */
    /deep/.el-table .disabledCheck .cell .el-checkbox__inner{
        display: none !important;
    }
    .expdialog /deep/ .el-divider--horizontal {
        display: block;
        height: 1px;
        width: 100%;
        margin: 12px 0;
    }

    .el-tree {
        position: relative;
        cursor: default;
        background: #FFF;
        color: #606266;
        overflow: auto;
        height: 100%;
    }

    //
    .myelcard6{//3840*2160 6个
        width: 14%;
        height: 19.2%;
        display: inline-block;
        /*margin: 0 1.2% 1.4% 1.3%;//上右下左*/
        margin-right: 2.2%;
        margin-bottom: 26px;
    }
    .myelcard5{//2560*1440 5个
        width: 18%;
        height: 39.2%;
        display: inline-block;
        /*margin: 0 1% 1.4% 1%;//上右下左*/
        padding-right: 0;
        margin-right: 2%;
        margin-bottom: 26px;
    }
    .myelcard4{//1920*1080 4个
        width: 23.5%;
        height: 55%;
        display: inline-block;
        margin-right: 1.5%;
        margin-bottom: 26px;
    }
    .myelcard3{//1536*864 3个
        width: 31.7%;
        height: 82.2%;
        display: inline-block;
        margin-right: 1.6%;
        margin-bottom: 1.4%;
    }
    .myelcard2{//1280*720 2个
        width: 48%;
        height: 151.2%;
        display: inline-block;
        margin-right: 2%;
        margin-bottom: 1.4%;
    }
    /deep/ .el-card__header{
        height: 49px;
        padding: 5px 0;
        border-bottom:0;
    }
    /deep/ .el-card__body{
        padding: 5px 0 0;
        height: 80%;
    }
    //滚动条样式
    .main-box::-webkit-scrollbar{
        width: 4px;
        height: 6px;
    }
    .main-box::-webkit-scrollbar-thumb {
        background-color: #ddd;
        border-radius: 3px;
    }
    .box-card{
        height: 100%;
        width: 100%;
        border-radius: 4px;
        box-shadow: 0 6px 10px 0 rgba(52,127,255,0.10);
    }
    .cardhead{
        position: relative;
        line-height: 49px;
        padding-left: 15px;
    }
    .cardhead-title{
        font-size: 18px;
        font-weight: bold;
        color: #333333;
        font-family: 'PingFang SC-Medium';
        margin-right: 10px;
    }
    .cardhead-tag{
        /*width: 64px;*/
        height: 26px;
        text-align: center;
        line-height: 26px;
        margin-left: 6px;
        border: none;
        border-radius: 0;
        box-sizing: border-box;
        padding: 0 10px;
    }
    .mycardBody{
        //height: 77%;
        min-height: 125px;
        padding: 0 15px;
        border-bottom: 1px dashed #E4EAF7;
        border-top: 1px dashed #E4EAF7;
        .cardbody-box{
            display: flex;
            flex-direction: row;
            height: 44px;
            line-height: 44px;
            font-size: 14px;
            font-family: PingFangSC-Regular;
            .cardbody-title{
                color: #333333;
                flex-shrink: 0;
            }
            .cardbody-content{
                color: #666666;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

    }
    .mycardFoot{
        height: 54px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        button{
            width: 90px;
            height: 34px;
            font-size: 14px;
        }
    }
    .topButtonClass{
         position: relative;
         .topRightBtnClass{
             //width: 400px;
             position: absolute;
             top: 0;
             right: 0;
         }
     }
    .diyColumnContent{
        height: 280px;
        padding: 10px 10px 0;
        margin-bottom: 10px;
        overflow-y: auto;
        position: relative;
        &::-webkit-scrollbar-thumb{
            background-color: #ddd !important;
        }
    }
    .overflow_text{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .isShowBox{
      width: 100%;
      height: 15px;
      line-height: 15px;
      text-align: center;
      background-color: white;
      cursor: pointer;
      position: absolute;
      bottom: -16px;
    }
    .isShowAllSearch{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9;
    }
    .doSearchBOX{
        width: 100%;
        text-align: center;
        position: relative;
    }
    .isSingleLineSearch{
      display: flex;
      overflow: hidden;
    }
</style>

<style>
    .el-popover.diyColumnPopver{
        padding: 0;
    }
    .nofooter-dialog .el-dialog__body{
        bottom: 5px!important;
    }
</style>

