@hbisty/qj-common 5.0.4

package/src/views/templates/templateTable.vue

@@ -0,0 +1,2244 @@
+<template>
+  <div>
+    <div class="template-table">
+      <!--header-->
+      <div class="tem-header" v-if="temInputPack">
+        <ul class="clearfix">
+          <li :class="{ li: temInputPack[0].btnArray }" :key="index" v-for="(item, index) in temInputPack">
+            <label v-if="'label' in item && item.label">{{ item.label }}：</label>
+            <div v-if="'type' in item">
+              <div v-if="item.type === 'text'">
+                <el-input :placeholder="'placeholder' in item ? item.placeholder : ''" clearable :disabled="'disabled' in item && item.disabled ? item.disabled : false" v-model.trim="item.value">
+                </el-input>
+              </div>
+              <div v-if="item.type === 'select'">
+                <el-select
+                  :filterable="'filterable' in item ? item.filterable : false"
+                  :remote="'filterable' in item ? item.filterable : false"
+                  :multiple="'multiple' in item ? item.multiple : false"
+                  :placeholder="'placeholder' in item ? item.placeholder : ''"
+                  @change="inputSelChange($event, item)"
+                  @visible-change="getSltInfo(item, $event)"
+                  :remote-method="remoteMethod"
+                  @input.native="filterData($event, item)"
+                  clearable
+                  collapse-tags
+                  :loading="loadings"
+                  v-model.trim="item.value"
+                >
+                  <!-- :multiple="'multiple' in item ? item.multiple : false"
+                :collapse-tags="'collapseTags' in item ? item.collapseTags : false"-->
+                  <el-option
+                    :key="'props' in item ? item2[item.props.value] : item2.value"
+                    :label="'props' in item ? item2[item.props.label] : item2.label"
+                    :value="'props' in item ? item2[item.props.value] : item2.value"
+                    clearable
+                    v-for="item2 in item.options"
+                    v-if="'options' in item"
+                  ></el-option>
+                  <!-- {{item.options}} -->
+                  <!-- {{ item.pagenation.page }}>> >>={{ item.pageCount }} -->
+
+                  <div class="selectJob" v-if="item.pagenation || false">
+                    <span @click.stop="prePage(item)" class="text" style="padding-right: 40px" v-if="item.pagenation.page > 1">上一页</span>
+                    <span @click.stop="nextPage(item)" class="text" v-if="item.pageCount && item.pageCount > 1 && item.pagenation.page < item.pageCount">下一页</span>
+                  </div>
+                </el-select>
+              </div>
+              <div v-if="item.type === 'remoteSelect'">
+                <temp-select :item="item" @selChange="inputSelChange"></temp-select>
+              </div>
+              <div v-if="item.type === 'date'">
+                <el-date-picker
+                  :picker-options="'pickerOptions' in item ? item.pickerOptions : {}"
+                  :placeholder="'placeholder' in item ? item.placeholder : ''"
+                  size="small"
+                  type="date"
+                  v-model.trim="item.value"
+                  value-format="yyyy-MM-dd"
+                ></el-date-picker>
+              </div>
+              <div @click="getOption('none', item)" v-if="item.type === 'cascader'">
+                <el-cascader
+                  :collapse-tags="'collapseTags' in item ? item.collapseTags : true"
+                  :disabled="'disabled' in item && item.disabled ? item.disabled : false"
+                  :options="'options' in item ? item.options : []"
+                  :placeholder="'placeholder' in item ? item.placeholder : ''"
+                  :props="'props' in item ? item.props : {}"
+                  :show-all-levels="'showAllLevels' in item ? item.showAllLevels : true"
+                  change-on-select
+                  clearable
+                  filterable
+                  size="small"
+                  v-model.trim="item.value"
+                ></el-cascader>
+              </div>
+              <div v-if="item.type === 'daterange'">
+                <el-date-picker
+                  :end-placeholder="'endPlaceholder' in item ? item.endPlaceholder || '结束时间' : '结束时间'"
+                  :picker-options="'pickerOptions' in item ? item.pickerOptions : {}"
+                  :range-separator="'rangeSeparator' in item ? item.rangeSeparator || '-' : '-'"
+                  :start-placeholder="'startPlaceholder' in item ? item.startPlaceholder || '开始时间' : '开始时间'"
+                  size="small"
+                  type="daterange"
+                  v-model.trim="item.value"
+                  value-format="yyyy-MM-dd"
+                ></el-date-picker>
+              </div>
+              <div v-if="item.type === 'month'">
+                              <el-date-picker
+                  :end-placeholder="'endPlaceholder' in item ? item.endPlaceholder || '结束时间' : '结束时间'"
+                  :picker-options="'pickerOptions' in item ? item.pickerOptions : {}"
+                  :range-separator="'rangeSeparator' in item ? item.rangeSeparator || '-' : '-'"
+                  :start-placeholder="'startPlaceholder' in item ? item.startPlaceholder || '开始时间' : '开始时间'"
+                  size="small"
+                  type="month"
+                  v-model.trim="item.value"
+                  value-format="yyyy-MM"
+                ></el-date-picker>
+                            
+              </div>
+              <div v-if="item.type === 'datetimerange'">
+                <el-date-picker
+                  :end-placeholder="'endPlaceholder' in item ? item.endPlaceholder || '结束时间' : '结束时间'"
+                  :picker-options="'pickerOptions' in item ? item.pickerOptions : {}"
+                  :range-separator="'rangeSeparator' in item ? item.rangeSeparator || '-' : '-'"
+                  :start-placeholder="'startPlaceholder' in item ? item.startPlaceholder || '开始时间' : '开始时间'"
+                  size="small"
+                  type="datetimerange"
+                  v-model.trim="item.value"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                >
+                </el-date-picker>
+              </div>
+              <div v-if="item.type === 'textMore'">
+                <div :key="indexMore" style="display: inline-block" v-for="(itemMore, indexMore) in item.children">
+                  <el-input :disabled="'disabled' in itemMore && itemMore.disabled ? itemMore.disabled : false" :placeholder="itemMore.placeholder" type="text" v-model="itemMore.value"></el-input>
+                  <span v-if="indexMore % 2 == 0">~</span>
+                </div>
+              </div>
+              <!--input 支持搜索-->
+              <div v-if="item.type === 'autocomplete'">
+                <el-autocomplete
+                  :fetch-suggestions="querySearchAsync"
+                  :loadAll="(restaurants = item.restaurants)"
+                  :placeholder="item.placeholder"
+                  :rowkey="(rowkey = temTablePack.rowkey)"
+                  @select="handleSelect"
+                  v-model.trim="item.value"
+                ></el-autocomplete>
+              </div>
+            </div>
+            <!--  <div v-if="'btnArray' in item">
+                  <el-button  v-for="(itemBtn,indexBtn) in item.btnArray " :key="indexBtn" :type="itemBtn.type" v-if="itemBtn.type=='query'|| itemBtn.type=='search' " @keyup.enter="btn(itemBtn,indexBtn)" @click="btn(itemBtn,indexBtn)">{{itemBtn.label}}</el-button>
+                  <el-button  v-for="(itemBtn,indexBtn) in item.btnArray " :key="indexBtn" :type="itemBtn.type" v-if="itemBtn.type!='query'&& itemBtn.type!='search' " @click="btn(itemBtn,indexBtn)">{{itemBtn.label}}</el-button>
+          </div>-->
+          </li>
+        </ul>
+        <template v-for="item in temInputPack" v-if="'btnArray' in item">
+          <el-button
+            :key="indexBtn"
+            :type="itemBtn.type || 'primary'"
+            @click="btn(itemBtn, indexBtn)"
+            v-for="(itemBtn, indexBtn) in item.btnArray"
+            v-if="itemBtn.type == 'query' || itemBtn.type == 'search'"
+          >
+            {{ itemBtn.label }}</el-button
+          >
+          <el-button
+            :disabled="'disabled' in itemBtn && itemBtn.disabled ? itemBtn.disabled : false"
+            :key="indexBtn"
+            :type="itemBtn.type || ''"
+            @click="btn(itemBtn, indexBtn)"
+            v-for="(itemBtn, indexBtn) in item.btnArray"
+            v-if="itemBtn.type != 'query' && itemBtn.type != 'search'"
+            >{{ itemBtn.label }}</el-button
+          >
+          <div class="page-count flex justify-content--flex-end" v-if="subtotal">
+            <p :key="index" v-for="(item, index) in subtotal">{{ item.label }}{{ item.beforeUnit }}{{ item.value }}{{ item.afterUnit }}</p>
+          </div>
+        </template>
+      </div>
+      <!--tab-->
+      <el-row v-if="temTab && 'tabPane' in temTab">
+        <el-col :span="24">
+          <el-tabs @tab-click="handleClickTab" type="border-card" v-model="activeName">
+            <el-tab-pane :key="index" :label="item.label" v-for="(item, index) in temTab.tabPane"></el-tab-pane>
+          </el-tabs>
+          <!--main table-->
+          <!-- {{activeName}} -->
+          <div class="template-box" v-for="(item, index) in temTab.tabPane" v-if="activeName == index">
+            <div class="tem-main" v-if="temTablePack">
+              <h3 class="temTablePack-title" v-if="'title' in temTablePack ? temTablePack.title : ''">{{ temTablePack.title }}：</h3>
+              <el-table
+                :data="tableData"
+                :empty-text="'emptyText' in temTablePack ? temTablePack.emptyText : '暂无数据'"
+                :row-key="row_Key"
+                :rowKey="(rowKey = temTablePack.rowKey ? temTablePack.rowKey : '')"
+                @select="handleSelectionChange"
+                @select-all="handleSelectionChange"
+                @toggleSelection="toggleSelection"
+                ref="multipleTable"
+                style="width: 100%"
+                v-loading="loading"
+                stripe
+                :height="'tabHeight' in temTablePack ? temTablePack.tabHeight : false"
+              >
+                <el-table-column
+                  :reserve-selection="temTablePack.reserve_selection ? true : false"
+                  type="selection"
+                  v-if="'selection' in temTablePack ? temTablePack.selection.state : false"
+                  width="40"
+                ></el-table-column>
+                <el-table-column
+                  :align="'align' in item ? item.align : ''"
+                  :key="index"
+                  :label="'label' in item ? item.label : ''"
+                  :min-width="'minWidth' in item ? item.minWidth : ''"
+                  :prop="'prop' in item ? item.prop : ''"
+                  :width="'width' in item ? item.width : 'auto'"
+                  v-for="(item, index) in temTablePack.tableHead"
+                  :fixed="'fixed' in item ? item.fixed : false"
+                  :show-overflow-tooltip="'overflow' in item ? item.overflow : false"
+                >
+                  <template slot-scope="scope">
+                    <template-table-content :item="item" :scope="scope" @changeGetData="getDataList"> </template-table-content>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  :width="'tabBtnWidth' in temTablePack ? temTablePack.tabBtnWidth : '180'"
+                  label="操作"
+                  :fixed="'fixed' in temTablePack ? temTablePack.fixed : false"
+                  v-if="'tabBtnState' in temTablePack ? temTablePack.tabBtnState : true"
+                >
+                  <template slot-scope="scope">
+                    <!--四个以内的按钮是这么显示-->
+                    <span :key="index" class="tem-span-btn" style="display: inline-block" v-for="(item, index) in temTablePack.tableBtn">
+                      <template v-if="'renderTemp' in item">
+                        <child :item="item" :para="scope.row" :temp="item.renderTemp"></child>
+                      </template>
+                      <template v-else>
+                        <span style="display: inline-block" v-if="'dropdown' in item && item.dropdown">
+                          <!--dropdown 为false 表示不需要折叠-->
+                          <!-- v-if="dropdownState(scope.row.dataState,item.dropdowMenu)" -->
+                          <el-dropdown @command="handleClick($event, scope, index)" @click.native="open($event, scope, index)">
+                            <el-button class="el-dropdown-link" size="text">
+                              处理
+                              <i class="el-icon-arrow-down el-icon--right"></i>
+                            </el-button>
+                            <el-dropdown-menu slot="dropdown">
+                              <el-dropdown-item
+                                :command="dropdowItem"
+                                :key="(dropdowIndexObj[scope.$index] = dropdowIndex)"
+                                v-for="(dropdowItem, dropdowIndex) in item.dropdowMenu"
+                                v-if="('dataState' in dropdowItem && dropdowItem.dataState.split(',').includes(scope.row.dataState.toString())) || ('state' in dropdowItem && dropdowItem.state)"
+                              >
+                                {{ dropdowItem.label }}</el-dropdown-item
+                              >
+                            </el-dropdown-menu>
+                          </el-dropdown>
+                        </span>
+                        <span style="display: inline-block" v-else>
+                          <template v-if="'dataState' in item && item.dataState == null">
+                            <template v-if="'reverse' in item && item.reverse">
+                              <el-button
+                                :class="'type' in item && item.type ? item.type : 'primary'"
+                                @click="handleClick(item, scope, index)"
+                                size="small"
+                                type="text"
+                                v-if="item.props && scope.row[item.props['dataState']] != null"
+                                >{{ item.label }}
+                              </el-button>
+                            </template>
+                            <template v-else>
+                              <el-button
+                                :class="'type' in item && item.type ? item.type : 'primary'"
+                                @click="handleClick(item, scope, index)"
+                                size="small"
+                                type="text"
+                                v-if="item.props && scope.row[item.props['dataState']] == null"
+                                >{{ item.label }}
+                              </el-button>
+                            </template>
+                          </template>
+                          <template v-if="'otherState' in item && item.otherState">
+                            <!-- {{scope.row[item.props['dataState']]}}
+                          {{item[item.props['dataState']]}}-->
+                            <el-button
+                              :class="'type' in item && item.type ? item.type : 'primary'"
+                              @click="handleClick(item, scope, index)"
+                              size="small"
+                              type="text"
+                              v-if="'dataState' in item && 'props' in item && scope.row.dataState == item.dataState && scope.row[item.props['dataState']] == item[item.props['dataState']]"
+                            >
+                              {{ item.label }}</el-button
+                            >
+                            <el-button
+                              :class="'type' in item && item.type ? item.type : 'primary'"
+                              @click="handleClick(item, scope, index)"
+                              size="small"
+                              type="text"
+                              v-else-if="!item.dataState && item.props && scope.row[item.props['dataState']] == item[item.props['dataState']]"
+                            >
+                              {{ item.label }}</el-button
+                            >
+                          </template>
+                          <template v-else>
+                            <!--万恶的后台接口，数据==null 显示-->
+                            <!-- {{dataState}} -->
+                            <!-- <el-button  v-if="'dataState' in item && 'props' in item && scope.row[item.props['dataState']] == item.dataState" :class="'type' in  item && item.type ? item.type : 'primary'"  @click="handleClick(item,scope,index)" type="text"  size="small">{{item.label}}</el-button> -->
+                            <el-button
+                              :class="'type' in item && item.type ? item.type : 'primary'"
+                              @click="handleClick(item, scope, index)"
+                              size="small"
+                              type="text"
+                              v-if="'dataState' in item && 'props' in item && String(item.dataState).split(',').includes(scope.row[item.props['dataState']].toString())"
+                            >
+                              {{ item.label }}</el-button
+                            >
+                            <el-button
+                              :class="'type' in item && item.type ? item.type : 'primary'"
+                              @click="handleClick(item, scope, index)"
+                              size="small"
+                              type="text"
+                              v-else-if="'dataState' in item && scope.row.dataState == item.dataState && !item.props"
+                            >
+                              {{ item.label }}</el-button
+                            >
+                            <el-button :class="'type' in item && item.type ? item.type : 'primary'" @click="handleClick(item, scope, index)" size="small" type="text" v-else-if="item.state">{{
+                              item.label
+                            }}</el-button>
+                          </template>
+                        </span>
+                      </template>
+                    </span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+
+            <div class="page-box">
+              <!-- 按钮部分 -->
+              <div v-if="'tablePageBtn' in temTablePack">
+                <el-button :key="indexBtn" :type="itemBtn.type" @click="btn(itemBtn, indexBtn)" v-for="(itemBtn, indexBtn) in temTablePack.tablePageBtn">{{ itemBtn.label }}</el-button>
+              </div>
+              <div class="page-item" v-if="'tabpageState' in temTablePack ? temTablePack.tabpageState : true">
+                <!--page-->
+                <div class="tem-page" v-if="pagenation && pagenation.total">
+                  <!-- 'currentPage' in pagenation ? pagenation.currentPage : 1 -->
+                  <!-- 'pageSize' in pagenation && pagenation.pageSize ? pagenation.pageSize : 10 -->
+                  <el-pagination
+                    :current-page="data.page"
+                    :page-size="data.rows"
+                    :page-sizes="'pageSizes' in pagenation && pagenation.pageSizes ? pagenation.pageSizes : [10, 20, 50, 100]"
+                    :pager-count="5"
+                    :total="'total' in pagenation ? pagenation.total : 1"
+                    @current-change="currentChange"
+                    @size-change="sizeChange"
+                    layout="total, sizes, prev, pager, next, jumper"
+                  ></el-pagination>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <div v-else>
+        <div class="template-box template-boild-box">
+          <!--main table-->
+          <div class="tem-main" v-if="temTablePack">
+            <h3 class="temTablePack-title" v-if="'title' in temTablePack ? temTablePack.title : ''">{{ temTablePack.title }}：</h3>
+            <el-table
+              :data="tableData"
+              :empty-text="'emptyText' in temTablePack ? temTablePack.emptyText : '暂无数据'"
+              :row-key="row_Key"
+              :rowKey="(rowKey = temTablePack.rowKey ? temTablePack.rowKey : '')"
+              @select="handleSelectionChange"
+              @select-all="handleSelectionChange"
+              @toggleSelection="toggleSelection"
+              ref="multipleTable"
+              style="width: 100%"
+              v-loading="loading"
+              stripe
+              :height="'tabHeight' in temTablePack ? temTablePack.tabHeight : false"
+            >
+              <el-table-column
+                :reserve-selection="temTablePack.reserve_selection ? true : false"
+                type="selection"
+                v-if="'selection' in temTablePack ? temTablePack.selection.state : false"
+                :selectable="selectable ? selectable : () => { return true}"
+                width="40"
+              ></el-table-column>
+              <el-table-column
+                :align="'align' in item ? item.align : ''"
+                :key="index"
+                :label="'label' in item ? item.label : ''"
+                :min-width="'minWidth' in item ? item.minWidth : ''"
+                :prop="'prop' in item ? item.prop : ''"
+                :width="'width' in item ? item.width : 'auto'"
+                v-for="(item, index) in temTablePack.tableHead"
+                :fixed="'fixed' in item ? item.fixed : false"
+                :show-overflow-tooltip="'overflow' in item ? item.overflow : false"
+              >
+                <!-- min-width 产品后期要最小宽度，开发以改了部分，以无法修改，width 代替min-width -->
+                <template slot-scope="scope">
+                  <template-table-content :item="item" :scope="scope" @changeGetData="getDataList"> </template-table-content>
+                </template>
+              </el-table-column>
+              <el-table-column
+                :width="'tabBtnWidth' in temTablePack ? temTablePack.tabBtnWidth : '180'"
+                label="操作"
+                :fixed="'fixed' in temTablePack ? temTablePack.fixed : false"
+                v-if="'tabBtnState' in temTablePack ? temTablePack.tabBtnState : true"
+              >
+                <template slot-scope="scope">
+                  <!--四个以内的按钮是这么显示-->
+
+                  <span :key="index" class="tem-span-btn" style="display: inline-block" v-for="(item, index) in temTablePack.tableBtn">
+                    <template v-if="'renderTemp' in item">
+                      <child :item="item" :para="scope.row" :temp="item.renderTemp"></child>
+                    </template>
+                    <template v-else>
+                      <span style="display: inline-block" v-if="'dropdown' in item && item.dropdown">
+                        <!--dropdown 为false 表示不需要折叠-->
+                        <!-- v-if="dropdownState(scope.row.dataState,item.dropdowMenu)" -->
+                        <el-dropdown @command="handleClick($event, scope, index)">
+                          <el-button class="el-dropdown-link" size="text">
+                            处理
+                            <i class="el-icon-arrow-down el-icon--right"></i>
+                          </el-button>
+                          <el-dropdown-menu slot="dropdown">
+                            <el-dropdown-item
+                              :command="dropdowItem"
+                              :key="(dropdowIndex = dropdowIndex)"
+                              v-for="(dropdowItem, dropdowIndex) in item.dropdowMenu"
+                              v-if="('dataState' in dropdowItem && dropdowItem.dataState.split(',').includes(scope.row.dataState.toString())) || ('state' in dropdowItem && dropdowItem.state)"
+                            >
+                              {{ dropdowItem.label }}</el-dropdown-item
+                            >
+                          </el-dropdown-menu>
+                        </el-dropdown>
+                      </span>
+
+                      <span style="display: inline-block" v-else>
+                        <template v-if="'dataState' in item && item.dataState == null">
+                          <template v-if="'reverse' in item && item.reverse">
+                            <el-button
+                              :class="'type' in item && item.type ? item.type : 'primary'"
+                              @click="handleClick(item, scope, index)"
+                              size="small"
+                              type="text"
+                              v-if="'reverse' in item && item.props && scope.row[item.props['dataState']] != null"
+                            >
+                              {{ item.label }}</el-button
+                            >
+                          </template>
+                          <template v-else>
+                            <el-button
+                              :class="'type' in item && item.type ? item.type : 'primary'"
+                              @click="handleClick(item, scope, index)"
+                              size="small"
+                              type="text"
+                              v-if="item.props && scope.row[item.props['dataState']] == null"
+                              >{{ item.label }}
+                            </el-button>
+                          </template>
+                        </template>
+                        <template v-if="'otherState' in item && item.otherState">
+                          <!-- {{scope.row[item.props['dataState']]}}
+                        {{item[item.props['dataState']]}}-->
+                          <el-button
+                            :class="'type' in item && item.type ? item.type : 'primary'"
+                            @click="handleClick(item, scope, index)"
+                            size="small"
+                            type="text"
+                            v-if="'dataState' in item && 'props' in item && scope.row.dataState == item.dataState && scope.row[item.props['dataState']] == item[item.props['dataState']]"
+                          >
+                            {{ item.label }}</el-button
+                          >
+                          <el-button
+                            :class="'type' in item && item.type ? item.type : 'primary'"
+                            @click="handleClick(item, scope, index)"
+                            size="small"
+                            type="text"
+                            v-else-if="!item.dataState && item.props && scope.row[item.props['dataState']] == item[item.props['dataState']]"
+                          >
+                            {{ item.label }}</el-button
+                          >
+                        </template>
+
+                        <template v-else>
+                          <!--万恶的后台接口，数据==null 显示-->
+                          <!-- <el-button  v-if="'dataState' in item && 'props' in item && scope.row[item.props['dataState']] == item.dataState" :class="'type' in  item && item.type ? item.type : 'primary'"  @click="handleClick(item,scope,index)" type="text"  size="small">{{item.label}}</el-button> -->
+                          <el-button
+                            :class="'type' in item && item.type ? item.type : 'primary'"
+                            @click="handleClick(item, scope, index)"
+                            size="small"
+                            type="text"
+                            v-if="
+                              'dataState' in item &&
+                              'props' in item &&
+                              (scope.row[item.props['dataState']] || scope.row[item.props['dataState']] == 0) &&
+                              String(item.dataState).split(',').includes(scope.row[item.props['dataState']].toString())
+                            "
+                            >{{ item.label }}</el-button
+                          >
+                          <el-button
+                            :class="'type' in item && item.type ? item.type : 'primary'"
+                            @click="handleClick(item, scope, index)"
+                            size="small"
+                            type="text"
+                            v-else-if="'dataState' in item && scope.row.dataState == item.dataState && !item.props"
+                          >
+                            {{ item.label }}</el-button
+                          >
+                          <el-button :class="'type' in item && item.type ? item.type : 'primary'" @click="handleClick(item, scope, index)" size="small" type="text" v-else-if="item.state">{{
+                            item.label
+                          }}</el-button>
+                        </template>
+                      </span>
+                    </template>
+                  </span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+
+          <div class="page-box" v-if="temTablePack">
+            <!-- 按钮部分 -->
+            <div v-if="'tablePageBtn' in temTablePack">
+              <el-button :key="indexBtn" :type="itemBtn.type" @click="btn(itemBtn, indexBtn)" v-for="(itemBtn, indexBtn) in temTablePack.tablePageBtn">{{ itemBtn.label }}</el-button>
+            </div>
+            <div class="page-item" v-if="'tabpageState' in temTablePack ? temTablePack.tabpageState : true">
+              <!--page-->
+              <div class="tem-page" v-if="pagenation && pagenation.total">
+                <!-- 'currentPage' in pagenation ? pagenation.currentPage : 1 -->
+                <!-- 'pageSize' in pagenation && pagenation.pageSize ? pagenation.pageSize : 10 -->
+                <el-pagination
+                  :current-page="data.page"
+                  :layout="temLayout"
+                  :page-size="data.rows"
+                  :page-sizes="'pageSizes' in pagenation && pagenation.pageSizes ? pagenation.pageSizes : [10, 20, 50, 100]"
+                  :pager-count="5"
+                  :total="'total' in pagenation ? pagenation.total : 1"
+                  @current-change="currentChange"
+                  @size-change="sizeChange"
+                ></el-pagination>
+              </div>
+            </div>
+          </div>
+          <!-- count -->
+          <!-- <div class="page-count flex justify-content--flex-end" v-if="count">
+          <p
+            v-for="(item,index) in count"
+            :key="index"
+          >{{item.label}}{{item.beforeUnit}}{{item.value}}{{item.afterUnit}}</p>
+        </div>-->
+        </div>
+      </div>
+
+      <!--编辑-->
+      <el-dialog
+        :title="'title' in dialogData.template ? dialogData.template.title : ''"
+        :visible.sync="dialogFormVisible"
+        @close="dialogClose"
+        append-to-body
+        :width="'width' in dialogData.template ? dialogData.template.width : '660px'"
+        v-if="dialogData && dialogData.template"
+      >
+        <template-input
+          :labelWidth="dialogData.template.labelWidth"
+          :rules="dialogData.template.rules"
+          :temInput="dialogData.template.html"
+          @cancel="dialogCancel"
+          @getData="getDataList"
+          @handleSelect="handleSelect"
+          @inputBlur="inputBlur"
+          @inputBtnClick="inputBtnClick"
+          @radioChange="radioChange"
+          @selChange="selChange"
+          ref="child"
+        ></template-input>
+      </el-dialog>
+      <!--查看-->
+      <el-dialog
+        :title="dialogDataSee && 'title' in dialogDataSee ? dialogDataSee.title : ''"
+        :visible.sync="dialogFormVisibleSee"
+        append-to-body
+        :width="dialogDataSee && 'width' in dialogDataSee ? dialogDataSee.width : '660px'"
+        v-if="JSON.stringify(dialogDataSee) != '{}'"
+      >
+        <ul class="dialogSee-ui">
+          <li :key="index" class="clearfix" v-for="(item, index) in dialogDataSee.html">
+            <div v-if="'state' in item">
+              <div v-if="item.state == item.stateValue">
+                <label :style="{ width: 'labelWidth' in dialogDataSee ? dialogDataSee.labelWidth + 'px' : 'auto' }" v-if="'label' in item">{{ item.label }}：</label>
+                <div class="dialog-main" v-if="'type' in item">
+                  <p v-if="item.type === 'text'">
+                    {{ 'template' in item && item.template === 'format' ? parseTime(item.value) : item.value }}
+                  </p>
+                  <!--表示文本框-->
+                  <p v-if="item.type === 'select'">{{ item.template[item.value] }}</p>
+                  <img :src="item.value" v-if="item.type === 'img'" />
+                  <p class="dialogSee-textarea" v-if="item.type === 'textarea'">{{ item.value }}</p>
+                </div>
+              </div>
+            </div>
+            <div v-else>
+              <label :style="{ width: 'labelWidth' in dialogDataSee ? dialogDataSee.labelWidth + 'px' : 'auto' }" v-if="'label' in item">{{ item.label }}：</label>
+              <div class="dialog-main" v-if="'type' in item">
+                <p v-if="item.type === 'text'">
+                  {{ 'template' in item && item.template === 'format' ? parseTime(item.value) : item.value }}
+                </p>
+                <!--表示文本框-->
+                <p v-if="item.type === 'select'">{{ item.template[item.value] }}</p>
+                <img :src="item.value" v-if="item.type === 'img'" />
+
+                <p class="dialogSee-textarea" v-if="item.type === 'textarea'">{{ item.value }}</p>
+              </div>
+            </div>
+            <el-button :key="indexBtn" :type="itemBtn.type" @click="reviewClick(itemBtn, dialogDataSee.html)" v-for="(itemBtn, indexBtn) in item.btnArray" v-if="'btnArray' in item">{{
+              itemBtn.label
+            }}</el-button>
+          </li>
+        </ul>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script>
+import request from '#/utils/request';
+import templateTableContent from './templateUi/templateTableContent';
+import tempSelect from './components/temp-select';
+import templateInput from './templateInput';
+const querystring = require('querystring');
+import { isUndefined } from 'lodash';
+import { parseTime } from '#/utils/index'; //时间格式化
+export default {
+  props: ['temInput', 'params', 'selectable', 'temTable', 'temPage', 'temTab', 'url', 'temPageLayout', 'subtotal'],
+  computed: {
+    temInputPack() {
+      if (!this.temInput) {
+        return this.temInput;
+      }
+      if (isUndefined(this.$route.meta.btnRules)) {
+        return this.temInput;
+      }
+      const index = this.temInput.findIndex((item) => Array.isArray(item.btnArray));
+      if (index === -1) {
+        return this.temInput;
+      }
+
+      let inputData = this.temInput;
+      const result = inputData[index];
+      result.btnArray = result.btnArray.filter((item1) => {
+        if (item1.menuCode) {
+          return this.$route.meta.btnRules.some((items) => items.menuCode == item1.menuCode);
+        } else {
+          return this.$route.meta.btnRules.some((items) => items.menuName == item1.label);
+        }
+      });
+      return inputData;
+    },
+    temTablePack() {
+      if (!this.temTable) {
+        return this.temTable;
+      }
+      if (isUndefined(this.$route.meta.btnRules)) {
+        return this.temTable;
+      }
+      if (!Array.isArray(this.temTable['tableBtn'])) {
+        return this.temTable;
+      }
+
+      let tabBtnData = this.temTable;
+
+      tabBtnData['tableBtn'] = tabBtnData['tableBtn'].filter((item1) => {
+        if (item1.menuCode) {
+          return this.$route.meta.btnRules.some((items) => items.menuCode == item1.menuCode);
+        } else {
+          return this.$route.meta.btnRules.some((items) => items.menuName == item1.label);
+        }
+      });
+      return tabBtnData;
+    },
+  },
+  components: {
+    tempSelect,
+    'template-table-content': templateTableContent,
+    'template-input': templateInput,
+    child: {
+      functional: true,
+      render: (h, context) => {
+        let temp = context.props.temp;
+        let para = context.props.para;
+        let item = context.props.item;
+        return temp(h, para, item);
+      },
+      props: {
+        temp: {
+          type: Function,
+          required: true,
+        },
+        para: {
+          type: Object,
+          required: true,
+        },
+        item: {
+          type: Object,
+          required: true,
+        },
+      },
+    },
+  },
+  data() {
+    return {
+      rowKey: '',
+      row_Key: 'row[this.rowKey]',
+      temLayout: 'total, sizes, prev, pager, next, jumper',
+      pagenation: null,
+      data: {
+        rows: 10,
+        page: 1,
+      },
+      sltPage: 1,
+      sltItem: {},
+      pageCount: null,
+      restaurants: null, //搜索的数据
+      searchUrl: '',
+      parseTime,
+      loading: false,
+      loadings: false,
+      dialogFormVisible: false, //dialog编辑是否显示
+      dialogFormVisibleSee: false, //dialog查看是否显示
+      dialogData: {},
+      dialogDataSee: {},
+      formLabelWidth: '9rem', //长度根据标题长度来，一个字一个rem
+      activeName: '0',
+      tableData: [],
+      ruleForm: {}, //编辑from
+      limit: null, //限制图片上传的数量
+      uploadUrl: '/web/rs/goodsFile/uploadGoodsFile.json', //图片上传的默认url
+      imageUrl: '', //单个图片的imgurl,
+      uploadImgValue: [], //上传图片url
+      showFileList: null,
+      uploadName: null, //上传图片name
+      imgLoading: false,
+      btnState: null, //1表示增加，2表示编辑
+      imgIndex: null,
+      iptSltname: '', //table内容
+      dropdowIndexObj: {},
+      flag: 0,
+      inputHtmlReset: null, //初始化数据
+      clickState: true, //防止多次重复点击
+    };
+  },
+  // beforeCreate() {
+  //   this.dialogData
+  // },
+  mounted() {
+    // console.log(this.temInputPack, "ddd");
+    // 在template-table上新增加绑定一个temPageLayout,值是字符串,不传默认是'total, sizes, prev, pager, next, jumper',
+    // 根据需要添加或者减少
+    if (localStorage.getItem('currenPage')) {
+      this.data.page = localStorage.getItem('currenPage');
+      this.getDataList();
+    }
+    if (this.temPageLayout) {
+      this.temLayout = this.temPageLayout;
+    }
+
+    this.temPage
+      ? (this.pagenation = this.temPage)
+      : this.temPage === false
+      ? (this.pagenation = false)
+      : (this.pagenation = {
+          currentPage: 1,
+          pageSizes: [10, 20, 50, 100],
+          pageSize: 10,
+          total: 1,
+        });
+    if (this.temPage && 'pageSize' in this.temPage) {
+      this.data.rows = this.temPage.pageSize;
+    }
+    //查询商家列表
+    this.getDataList();
+  },
+  methods: {
+    open(item, val, index) {
+      console.log('2222++++++++++', item, val, index);
+      if (val.row.dataState == -1 || val.row.dataState == 4) {
+        this.$message.warning('暂无操作');
+        return;
+      }
+    },
+    btn(itemBtn, index) {
+      console.log(itemBtn, index, '+++++++++++++++++++++++++++++');
+      if (itemBtn.id === 'query' || itemBtn.id === 'search') {
+        //表示查询
+        this.data.page = 1;
+        this.searchUrl = 'url' in itemBtn && itemBtn.url ? itemBtn.url : '';
+        console.log(this.searchUrl, 'this.searchUrl222222222222222222222++++++++++++++++++++++++++++++++++');
+        this.getDataList(this.searchUrl);
+      } else if (itemBtn.id === 'add') {
+        itemBtn.template.html.forEach((el) => {
+          this.$set(this.ruleForm, el.name, el.value);
+        });
+        // 给add 抛出一个方法
+        this.$emit('inputBtnClickAdd', itemBtn, index);
+        // this.$emit("editClick", val.row, index);
+        this.dialogData = itemBtn;
+        this.dialogFormVisible = true;
+        this.btnState = 1; //表示增加
+      } else if (itemBtn.id === 'accurateQuery') {
+        this.searchUrl = 'url' in itemBtn && itemBtn.url ? itemBtn.url : '';
+        this.getDataList(this.searchUrl, itemBtn.id);
+      } else if (itemBtn.id == 'exImportData') {
+        this.searchUrl = 'url' in itemBtn && itemBtn.url ? itemBtn.url : '';
+        let jump = 'jumpUrl' in itemBtn && itemBtn.jumpUrl ? itemBtn.jumpUrl : '';
+        this.importData(this.searchUrl, itemBtn.id, jump);
+      } else {
+        this.$emit('inputBtnClick', itemBtn, index);
+      }
+      // this.$emit("inputBtnClick", itemBtn, index);
+    },
+    inputBtnClick(itemBtn, indexBtn) {
+      //input子组件传递的通用事件
+      this.$emit('inputBtnClick', itemBtn, indexBtn);
+    },
+
+    dialogClose() {
+      // console.log(this.$refs.child);
+      this.$refs.child.setReset();
+      this.dialogFormVisible = false;
+      // console.log("close");
+    },
+    reviewClick(itemBtn, item) {
+      if (itemBtn.id == 'review') {
+        //表示确定
+        this.setData(itemBtn.url, itemBtn, item);
+      }
+    },
+    inputBlur(item) {
+      this.$emit('inputBlur', item);
+    },
+    setData(url, btnarr, item) {
+      if (url) {
+        let data = {};
+        btnarr.params.forEach((res) => {
+          if (res.value) {
+            data[res.name] = res.value;
+          } else {
+            data[res.name] = item[res.index].value;
+          }
+        });
+        //编辑请求接口
+        request({
+          url: url,
+          method: 'post',
+          data: querystring.stringify(data),
+        }).then((res) => {
+          if (res.success) {
+            this.$message({
+              message: res.msg,
+              type: 'success',
+            });
+            this.getDataList();
+            this.dialogFormVisibleSee = false;
+          } else {
+            this.$message.error(res.msg);
+          }
+        });
+      }
+    },
+    getOption(e, item) {
+      console.log(item, 'item');
+      if (item.url && !item.state) {
+        request({
+          url: item.url,
+          method: 'get',
+        }).then((res) => {
+          item.options = res;
+          item.state = true;
+        });
+      }
+    },
+    prePage(item) {
+      //  	console.log(item,'item2')
+      --item.pagenation.page;
+      // this.sltPage = item.pagenation.page;
+
+      if (item.pagenation.page < 1) {
+        // 判断点击的页数是否小于1
+        this.$message.error('已到第一页');
+        item.pagenation.page = 1;
+        return;
+      }
+      item.state = false;
+      this.getSltInfo(item, true);
+    },
+    nextPage(item) {
+      //  		console.log(item,'item1')
+      //  		console.log(this.pageCount,'this.pageCount')
+      if (item.pagenation.page < item.pageCount) {
+        // 判断点击的页数是否小于总页数;
+        ++item.pagenation.page;
+        // this.sltPage = item.pagenation.page;
+        item.state = false;
+        this.getSltInfo(item, true);
+      } else {
+        this.$message.error('已到最后一页');
+      }
+    },
+    remoteMethod(data) {
+      this.sltItem.pagenation.page = 1;
+      this.sltItem.state = false;
+      this.loadings = true;
+      this.sltItem.pageCount = '';
+      this.iptSltname = data;
+
+      //  let item=JSON.parse(JSON.stringify(this.sltItem));
+      console.log(this.iptSltname, 'item');
+      this.getSltInfo(this.sltItem, true);
+    },
+    filterData(data, item) {},
+    getSltInfo(item, flag) {
+      this.sltItem = item;
+      console.log(item, this.iptSltname, 'item');
+      // this.sltItem=JSON.parse(JSON.stringify(item));
+      if (item.url && !item.state) {
+        let json = {
+          rows: (item.pagenation && item.pagenation.rows) || null,
+          page: (item.pagenation && item.pagenation.page) || null,
+        };
+        if (!item.pagenation) {
+          delete json.page;
+          delete json.rows;
+        }
+        if (item.props.label && this.iptSltname) {
+          json[item.props.label] = this.iptSltname;
+        } else {
+          delete json[item.props.label];
+        }
+        request({
+          url: item.url,
+          method: 'post',
+          data: json,
+        }).then((res) => {
+          item.pageCount = item.pagenation && item.pagenation.rows ? Math.ceil(res.total / item.pagenation.rows) : 1;
+          if (res) {
+            if (Array.isArray(res)) {
+              item.options = res;
+            } else {
+              item.options = res.list;
+            }
+          }
+          this.loadings = false;
+          item.state = true;
+        });
+      }
+    },
+    handleClick(item, val, index) {
+      console.log('xialacaozuo++++++++++++++++');
+      // console.log(item);
+      //index表示btn的位置
+      let id = item.id;
+      if (id === 'see') {
+        // console.log(,"item")
+
+        this.seeDetails(item, val, index);
+      } else if (id === 'edit') {
+        item.template.html.forEach((el) => {
+          if (el.name in val.row) {
+            //判断属性是否存在
+            if (el.type === 'cascader') {
+              el.value = val.row[el.name] ? [...val.row[el.name]] : '';
+            } else {
+              el.value = val.row[el.name];
+            }
+          }
+
+          // 没有值时，保留原有的值，不作处理
+          // else {
+          //   el.value = ""; //没有值的时候，为空
+          // }
+        });
+        this.dialogData = item;
+        this.dialogFormVisible = true;
+        this.btnState = 2; //表示编辑
+      } else if (id === 'del' && !('params' in item)) {
+        console.log('删除');
+        this.delData(val, item);
+      } else if ('params' in item || ('prompt' in item && item.prompt)) {
+        //判断url和params 都不存在，还需要弹框时候"prompt" in item && item.prompt
+        // (!("params" in item) && !("url" in item))
+        this.changeData(item, val);
+      }
+
+      this.$emit('tableBtnClick', val.row, item, index);
+    },
+    querySearchAsync(queryString, cb) {
+      var restaurants = this.restaurants;
+      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
+
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        cb(results);
+      }, 3000 * Math.random());
+    },
+    createStateFilter(queryString) {
+      return (state) => {
+        return state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+      };
+    },
+    handleSelect(item) {
+      console.log('开始选');
+      this.$emit('handleSelect', item);
+    },
+    sizeChange(val) {
+      this.data.rows = val;
+      this.data.page = 1;
+      this.getDataList();
+      this.$emit('sizeChange', val);
+    },
+    currentChange(val) {
+      console.log('开始请求');
+      this.data.page = val;
+      this.getDataList();
+      this.$emit('currentChange', val);
+    },
+    handleCommand(key, data) {
+      console.log(key, data, 'f');
+      //折叠按钮请求
+      // this.$message("click on item " + command);
+      // this.$emit("tableBtnClick", command); //抛出去，根据id来执行事件
+    },
+    importData(paramsUrl, btnId, jump) {
+      let paramsResult = null, //判断参数是否必传
+        disabledPrompt = null, //参数必传的提示语
+        disabledValueArray = null; //参数必传的name值的数组
+      let requestUrl = paramsUrl ? paramsUrl : this.searchUrl ? this.searchUrl : this.url ? this.url : '';
+      if (requestUrl === '') {
+        // this.$message.error("url not defined");
+        return false;
+      }
+      let params = {};
+
+      //获取参数
+      this.temInputPack &&
+        this.temInputPack.forEach((el, index) => {
+          if ('disabledStatic' in el && el.disabledStatic) {
+            //添加这个字段表示这个字段传递后，才可点击搜索框
+            paramsResult = true; //设定为true，表示有这个字段
+            if ('disabledPrompt' in el && el.disabledPrompt) {
+              //这个字段只需给一个，一般以第一个为准
+              disabledPrompt = el.disabledPrompt;
+            }
+            disabledValueArray = [];
+            disabledValueArray.push(el.value);
+          }
+          if (el.type === 'daterange') {
+            //这是时间段
+            // console.log(el.name, "ddd");
+            el.name.split(',').forEach((res, index) => {
+              if (el.value) {
+                params[res] = el.value[index];
+              }
+            });
+          } else if (el.type === 'datetimerange') {
+            //这是时间段
+            console.log(el.name, 'ddd');
+            el.name.split(',').forEach((res, index) => {
+              if (el.value) {
+                params[res] = el.value[index];
+              }
+            });
+          } else if (el.type === 'cascader') {
+            let _array = el.options;
+            // 先判断是几级
+            if (el.value.length - 1) {
+            }
+            // if (Array.isArray(el.value[0])) {
+            //   let _val = "";
+            //   el.value.forEach((res, reIndex) => {
+            //     _val +=
+            //       el.value.length - 1 == reIndex
+            //         ? res[res.length - 1]
+            //         : res[res.length - 1] + ",";
+            //   });
+            //   params[el.name] = _val;
+            // } else {
+            if (el.value.length > 0) {
+              params[el.name] = el.value[el.value.length - 1];
+            }
+            // }
+          } else if (el.type === 'select') {
+            if (Array.isArray(el.value) && el.value.length > 0) {
+              let _val = '';
+              el.value.forEach((res, reIndex) => {
+                _val += el.value.length - 1 == reIndex ? res : res + ',';
+              });
+              params[el.name] = _val;
+            } else {
+              if (el.value) {
+                params[el.name] = el.value;
+                console.log(el, el.value, params, 'el.value');
+              }
+            }
+          } else if (el.name) {
+            if (el.value) {
+              //暂时修改，后台接口返回问题
+              // if(el.multiple){
+              //     params[el.name]=el.value.toString()
+              // }else{
+              params[el.name] = el.value;
+              // }
+
+              console.log(el, el.value, params, 'el.value');
+            }
+          } else if (el.type === 'textMore') {
+            el.children.forEach((response) => {
+              if (response.value) {
+                params[response.name] = response.value;
+              }
+            });
+          }
+        });
+      if (this.temTab && this.temTab.tabPane[this.activeName].value != '') {
+        this.temTab.tabPane[this.activeName].name.split(',').forEach((elpar, elIndex) => {
+          this.$set(params, elpar, this.temTab.tabPane[this.activeName].value.split(',')[elIndex]);
+        });
+      }
+      //查询列表
+
+      console.log(params, '+++++++++++++');
+      // this.loading = true;
+      // 请求需要携带的参数params
+      this.params &&
+        this.params.forEach((par) => {
+          if (par.value) {
+            params[par.name] = par.value;
+          }
+        });
+      params.exportFlag = true;
+      request({
+        url: requestUrl,
+        method: 'post',
+        data: querystring.stringify(params),
+      }).then((res) => {
+        this.$message.success('操作成功,请耐心等待');
+
+        setTimeout(() => {
+          if (!jump) {
+            window.locationProxy.href = process.env.API_ROOT + '/paas/system-manager/index.html#/importData';
+          } else {
+            window.locationProxy.href = jump;
+          }
+        }, 500);
+      });
+    },
+    getDataList(paramsUrl, btnId) {
+      if (this.clickState) {
+        this.clickState = false;
+
+        // debugger
+        let paramsResult = null, //判断参数是否必传
+          disabledPrompt = null, //参数必传的提示语
+          disabledValueArray = null; //参数必传的name值的数组
+        let requestUrl = paramsUrl ? paramsUrl : this.searchUrl ? this.searchUrl : this.url ? this.url : '';
+        if (requestUrl === '') {
+          // this.$message.error("url not defined");
+          return false;
+        }
+        let params = {};
+        if (!btnId) {
+          params['rows'] = this.data.rows;
+          params['page'] = this.data.page;
+        }
+        if (this.temPage == false) {
+          delete params.rows;
+          delete params.page;
+        }
+        //获取参数
+        this.temInputPack &&
+          this.temInputPack.forEach((el, index) => {
+            if ('disabledStatic' in el && el.disabledStatic) {
+              //添加这个字段表示这个字段传递后，才可点击搜索框
+              paramsResult = true; //设定为true，表示有这个字段
+              if ('disabledPrompt' in el && el.disabledPrompt) {
+                //这个字段只需给一个，一般以第一个为准
+                disabledPrompt = el.disabledPrompt;
+              }
+              disabledValueArray = [];
+              disabledValueArray.push(el.value);
+            }
+            if (el.type === 'daterange') {
+              //这是时间段
+              // console.log(el.name, "ddd");
+              el.name.split(',').forEach((res, index) => {
+                if (el.value) {
+                  params[res] = el.value[index];
+                }
+              });
+            } else if (el.type === 'datetimerange') {
+              //这是时间段
+              console.log(el.name, 'ddd');
+              el.name.split(',').forEach((res, index) => {
+                if (el.value) {
+                  params[res] = el.value[index];
+                }
+              });
+            } else if (el.type === 'cascader') {
+              let _array = el.options;
+              // 先判断是几级
+              if (el.value.length - 1) {
+              }
+              // if (Array.isArray(el.value[0])) {
+              //   let _val = "";
+              //   el.value.forEach((res, reIndex) => {
+              //     _val +=
+              //       el.value.length - 1 == reIndex
+              //         ? res[res.length - 1]
+              //         : res[res.length - 1] + ",";
+              //   });
+              //   params[el.name] = _val;
+              // } else {
+              if (el.value.length > 0) {
+                params[el.name] = el.value[el.value.length - 1];
+              }
+              // }
+            } else if (el.type === 'select') {
+              if (Array.isArray(el.value) && el.value.length > 0) {
+                let _val = '';
+                el.value.forEach((res, reIndex) => {
+                  _val += el.value.length - 1 == reIndex ? res : res + ',';
+                });
+                params[el.name] = _val;
+              } else {
+                if (el.value) {
+                  params[el.name] = el.value;
+                  console.log(el, el.value, params, 'el.value');
+                }
+              }
+            } else if (el.name) {
+              if (el.value) {
+                //暂时修改，后台接口返回问题
+                // if(el.multiple){
+                //     params[el.name]=el.value.toString()
+                // }else{
+                params[el.name] = el.value;
+                // }
+
+                console.log(el, el.value, params, 'el.value');
+              }
+            } else if (el.type === 'textMore') {
+              el.children.forEach((response) => {
+                if (response.value) {
+                  params[response.name] = response.value;
+                }
+              });
+            }
+          });
+        if (this.temTab && this.temTab.tabPane[this.activeName].value != '') {
+          console.log('111111111');
+
+          this.temTab.tabPane[this.activeName].name.split(',').forEach((elpar, elIndex) => {
+            this.$set(params, elpar, this.temTab.tabPane[this.activeName].value.split(',')[elIndex]);
+          });
+        } else if (this.temTab && this.temTab.tabPane[this.activeName].value == '') {
+          if (this.temTab.tabPane[this.activeName].url) {
+            requestUrl = this.temTab.tabPane[this.activeName].url;
+          }
+        }
+        //查询列表
+        if (Object.keys(params).length === 0 && btnId) {
+          this.tableData = [];
+          return;
+        }
+        if (paramsResult) {
+          //表示需要判断
+          console.log(disabledValueArray, 'disabledValueArray');
+          // debugger
+          if ((disabledValueArray.indexOf('') || disabledValueArray.indexOf('underfind') || disabledValueArray.indexOf('null') || disabledValueArray.indexOf(null)) != -1) {
+            this.$message.error(disabledPrompt);
+            return;
+          }
+        }
+        this.loading = true;
+        // 请求需要携带的参数params
+        this.params &&
+          this.params.forEach((par) => {
+            if (par.value) {
+              params[par.name] = par.value;
+            }
+          });
+        console.log(requestUrl, 'requestUrl');
+        request({
+          url: requestUrl,
+          method: 'post',
+          data: querystring.stringify(params),
+        }).then((res) => {
+          this.loading = false;
+          this.clickState = true;
+          if (res) {
+            if (Array.isArray(res)) {
+              this.tableData = res;
+              this.$emit('getData', res);
+              // 小计
+
+              if (res.length > 0) {
+                if (this.subtotal && this.subtotal.length > 0) {
+                  this.subtotal.forEach((el) => {
+                    el.value = 0;
+                    if (el.name) {
+                      res.forEach((res) => {
+                        el.value = this.accAdd(el.value, Number(res[el.name]));
+                        el.value = el.value.toFixed(2);
+                      });
+                    }
+                  });
+                }
+              } else {
+                if (this.subtotal && this.subtotal.length > 0) {
+                  this.subtotal.forEach((el) => {
+                    el.value = 0;
+                  });
+                }
+              }
+            } else if (res && res.list) {
+              this.tableData = res.list;
+              if (this.temPage !== false) {
+                this.pagenation.total = res.total;
+              }
+              this.tableData = res.list;
+              this.$emit('getData', res.list);
+              this.$emit('getTotal', res.total);
+              // 小计
+              if (res.list.length > 0) {
+                if (this.subtotal && this.subtotal.length > 0) {
+                  this.subtotal.forEach((el) => {
+                    el.value = 0;
+                    if (el.name) {
+                      res.list.forEach((res) => {
+                        el.value = this.accAdd(el.value, Number(res[el.name]));
+                        el.value = el.value.toFixed(2);
+                      });
+                    }
+                  });
+                }
+              } else {
+                if (this.subtotal && this.subtotal.length > 0) {
+                  this.subtotal.forEach((el) => {
+                    el.value = 0;
+                  });
+                }
+              }
+            } else {
+              if (this.temPage !== false) {
+                this.pagenation.total = 0;
+              }
+              if (this.subtotal && this.subtotal.length > 0) {
+                this.subtotal.forEach((el) => {
+                  el.value = 0;
+                });
+              }
+              this.tableData = [];
+              this.$emit('getData', []);
+              this.$emit('getTotal', 0);
+            }
+          } else {
+            if (this.temPage !== false) {
+              this.pagenation.total = 0;
+            }
+            this.tableData = [];
+            this.$emit('getData', []);
+            this.$emit('getTotal', 0);
+          }
+        });
+      }
+    },
+    seeDetails(item, val, index) {
+      console.log(item, val);
+      let nData = val.row;
+      let params = {};
+      if (item.props) {
+        item.props.forEach((res) => {
+          if ('extend' in res && res.exteng === false) {
+            params[res.name] = res.value;
+          } else {
+            params[res.name] = nData[res.value];
+            if (!res.value) {
+              params[res.name] = nData[res.name];
+            }
+          }
+        });
+      }
+      if (Object.keys(params).length === 0) {
+        params['1'] = '';
+      }
+      if (item.url) {
+        request({
+          url: item.url,
+          method: 'post',
+          data: querystring.stringify(params),
+        }).then((res) => {
+          if (res && !res.success) {
+            this.showDetails(item, res);
+          } else {
+            this.$message.error('操作失败');
+          }
+        });
+      } else {
+        this.showDetails(item, nData);
+      }
+    },
+    showDetails(item, data) {
+      let template = JSON.parse(JSON.stringify(item.template)); //去除数据的双向绑定
+      template.html.forEach((el) => {
+        if (el.value === '') {
+          if ('template' in el) {
+            if (el.template === 'format') {
+              el.value = data[el.name] ? parseTime(data[el.name]) : data[el.name];
+            } else if (el.template === 'area') {
+              el.name &&
+                el.name.map((val) => {
+                  console.log(data, val);
+                  if (data[val]) {
+                    el.value += data[val] + ' ';
+                  }
+                });
+            } else {
+              el.value = el.template[data[el.name]];
+            }
+          } else {
+            el.value = data[el.name];
+          }
+          if ('state' in el) {
+            el.stateValue = data[el.stateName];
+          }
+        }
+      });
+      console.log(template, 'template');
+      this.dialogDataSee = template;
+      // console.log(this.dialogDataSee.html, "template");
+      // var seeDe=this.dialogDataSee.html;
+      // for(var i in seeDe){
+      //   if(seeDe[i].type=="img"){
+      //     console.log(seeDe[i].value)
+      //   }
+      // }
+      this.dialogFormVisibleSee = true;
+    },
+    accAdd(num1, num2) {
+      var r1, r2, m;
+      try {
+        r1 = num1.toString().split('.')[1].length;
+      } catch (e) {
+        r1 = 0;
+      }
+      try {
+        r2 = num2.toString().split('.')[1].length;
+      } catch (e) {
+        r2 = 0;
+      }
+      m = Math.pow(10, Math.max(r1, r2));
+      // return (num1*m+num2*m)/m;
+      return Math.round(num1 * m + num2 * m) / m;
+    },
+    inputSelChange(val, item) {
+      // this.getDataList();
+      this.$emit('selChange', val, item);
+    },
+    selChange(val, item) {
+      this.$emit('selChange', val, item);
+    },
+    dialogCancel() {
+      //取消
+      this.dialogFormVisible = false;
+    },
+    dialogConfirm(url, formName) {
+      //编辑确定
+      this.$refs[formName].validate((valid) => {
+        //编辑验证
+        if (valid) {
+          if (url && this.dialogData.html) {
+            let data = this.ruleForm;
+            //编辑请求接口
+            request({
+              url: url,
+              method: 'post',
+              data: querystring.stringify(data),
+            }).then((res) => {
+              if (res.success) {
+                if (this.btnState === 1) {
+                  //表示增加
+                  this.$message({
+                    message: '新增成功',
+                    type: 'success',
+                  });
+                } else {
+                  this.$message({
+                    message: '编辑成功',
+                    type: 'success',
+                  });
+                }
+
+                this.dialogFormVisible = false;
+                this.getDataList();
+              } else {
+                this.$message.error(res.msg);
+              }
+            });
+          }
+        }
+      });
+    },
+    addData(data) {
+      // console.log(data, "dd");
+    },
+    delData(val, item) {
+      let promptTitle = item.promptTitle ? item.promptTitle : '是否确认删除?';
+      this.$confirm(promptTitle, {
+        center: true,
+      }).then((res) => {
+        return request({
+          url: item.url,
+          method: 'post',
+          data: querystring.stringify(val.row),
+        })
+          .then((res) => {
+            if (res.success) {
+              this.$message.success(res.msg);
+              this.getDataList();
+            }
+            //和request 封装的response起冲突
+            // else {
+            //   this.$message.error(res.msg);
+            // }
+            this.$emit('btnConfirm', val, item); //抛出确认按钮
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+      });
+    },
+    handleAvatarSuccess(res, file) {
+      console.log(res, file);
+      this.imageUrl = URL.createObjectURL(file.raw);
+    },
+    handleClickTab(tab, event) {
+      //tab事件操作
+      this.$emit('handleClickTab', this.temTab.tabPane[this.activeName]);
+      this.data.page = 1;
+      this.getDataList();
+    },
+    exceed() {
+      //图片个数超出的验证
+      this.$message.error(`最多上传${this.limit}张!`);
+    },
+    beforeAvatarUpload(file) {
+      //上传之前的回调
+      const fileType = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name);
+      if (!fileType) {
+        this.$message.error('图片格式为常见的jpg、png、gif格式！');
+      }
+      const isLt2M = file.size / 1024 / 1024 < 5;
+      if (!isLt2M) {
+        this.$message.error('上传的图片大小不能超过 5MB!');
+      }
+      return isLt2M && fileType;
+    },
+    picUpload(file) {
+      // this.imgLoading = true;
+      const formData = new FormData(); //转表单对象
+      formData.append('file', file.file);
+      return request({
+        url: this.uploadUrl,
+        method: 'post',
+        data: formData,
+      })
+        .then((res) => {
+          if (!this.showFileList) {
+            //组件中添加showFileList就是判断是否是单个图片
+            this.uploadImgValue = [];
+          }
+          this.uploadImgValue.push({ url: res.fileUrl, uid: file.file.uid });
+          if (this.uploadName) {
+            this.ruleForm[this.uploadName] = res.fileUrl;
+          }
+          // this.imgLoading = false;
+        })
+        .catch(() => {
+          // this.imgLoading = false;
+          console.log('上传失败');
+        });
+    },
+    handleRemove(file, fileList) {
+      //删除图片
+      this.uploadImgValue = this.uploadImgValue.filter((val) => {
+        return val.uid !== file.uid;
+      });
+      console.log(this.uploadImgValue);
+    },
+    handleSelectionChange(selection, row) {
+      console.log('多选222222222222', selection, row, this.tableData);
+      this.$emit('handleSelectionChange', selection, row);
+      localStorage.setItem('selectList', this.tableData);
+      this.multipleSelection = selection;
+      this.select_order_number = this.multipleSelection.length;
+
+      this.select_more = [];
+      if (selection) {
+        selection.forEach((row) => {
+          if (row) {
+            this.select_more.push(row);
+          }
+        });
+      }
+      console.log('多页', this.select_more);
+    },
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach((row) => {
+          this.$refs.multipleTable.toggleRowSelection(row, true);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+      this.$emit('toggleSelection', row);
+    },
+    dropdownState(state, arr) {
+      arr.every((res) => {
+        return res.dataState == state;
+      });
+      // let aa = arr.some(el => {
+      //   return el.dataState == state;
+      // });
+      // console.log(aa);
+    },
+
+    changeData(item, val) {
+      let params = 'params' in item ? JSON.parse(JSON.stringify(item.params)) : {};
+      for (let el in params) {
+        if (params[el] === '') {
+          params[el] = val.row[el];
+        }
+      }
+      if ('paramProps' in item) {
+        for (let el in item.paramProps) {
+          params[el] = val.row[item.paramProps[el]];
+        }
+      }
+      if ('url' in item && item.url) {
+        if ('promptTitle' in item) {
+          let title = 'title' in item ? item.title : '提示';
+          this.$confirm(item.promptTitle, title, {
+            center: true,
+          })
+            .then(() => {
+              this.postData(item.url, params);
+              this.$emit('btnConfirm', val, item); //抛出确认按钮,接口请求完成后
+            })
+            .catch(() => {
+              this.$message({
+                type: 'info',
+                message: '已取消',
+              });
+            });
+        } else {
+          this.postData(item.url, params);
+        }
+      } else {
+        if (item.prompt) {
+          //prompt 为true时表示有提示框
+          //当url不存在，表示不需要请求
+          this.$confirm(item.promptTitle, '提示', {
+            center: true,
+          })
+            .then(() => {
+              this.$emit('btnConfirm', val, item); //抛出确认按钮,接口请求完成后
+            })
+            .catch(() => {
+              this.$message({
+                type: 'info',
+                message: '已取消',
+              });
+            });
+        } else if ('url' in item && !item.url) {
+          //当url不传的时候
+          this.$message.error('url not defined');
+        }
+      }
+    },
+    postData(url, params) {
+      request({
+        url: url,
+        method: 'post',
+        data: querystring.stringify(params),
+      }).then((res) => {
+        if (res.success) {
+          //表示增加
+          this.$message({
+            message: '操作成功',
+            type: 'success',
+          });
+
+          this.getDataList();
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
+    radioChange(val, item) {
+      this.$emit('radioChange', val, item);
+    },
+  },
+  watch: {
+    temPage: {
+      handler() {
+        this.pagenation = this.temPage;
+      },
+      deep: true, //深度监听
+    },
+    dialogFormVisible(val) {
+      if (this.dialogFormVisible) {
+        this.$nextTick(function () {
+          this.$refs.child.clearValidate();
+        });
+      }
+    },
+    temInputPack(val) {
+      console.log(val, 'sss');
+    },
+    $route: function (to, form) {
+      //路由改变，重新请求页面
+      this.getDataList();
+    },
+  },
+};
+</script>
+<style lang="scss">
+.el-tabs__item:focus.is-active.is-focus:not(:active) {
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+}
+
+// .template-table .el-select {
+//   width: 120px !important;
+// }
+.el-button {
+  height: 30px !important;
+  border-radius: 2px !important;
+}
+
+.el-input__inner {
+  border-radius: 2px;
+}
+
+.tem-header .el-input {
+  width: inherit;
+}
+
+.tem-header li {
+  margin-bottom: 10px !important;
+}
+
+.tem-header .li {
+  margin-bottom: 0px !important;
+  line-height: 0;
+}
+
+// .tem-header .el-input .el-input__inner {
+//   height: 30px;
+//   line-height: 30px;
+//   padding: 0 20px 0 10px;
+//   width: 120px;
+//   font-size: 12px;
+//   text-overflow: ellipsis;
+//   white-space: nowrap;
+// }
+.tem-header .el-input .el-input__inner + .el-input__suffix {
+  right: 0px !important;
+}
+
+.el-tabs--border-card > .el-tabs__header {
+  background-color: #fff !important;
+  border-bottom: 1px solid transparent !important;
+}
+
+.el-table thead.has-gutter tr th {
+  background: #f3f4f5;
+}
+
+.el-table .el-table__header .cell {
+  color: #666;
+  font-weight: normal;
+  line-height: 20px;
+  text-align: left !important;
+}
+
+.el-table .el-table__body .cell {
+  font-size: 12px;
+  text-align: left !important;
+}
+
+.el-tabs--border-card > .el-tabs__content {
+  padding: 0 !important;
+}
+
+.template-box {
+  padding: 0 15px 20px 15px !important;
+  background: #fff;
+}
+
+.template-boild-box {
+  //   border: 1px solid #ededed !important;
+  box-shadow: 0 0px 0px 0 transparent, 0 0 0px 0 transparent !important;
+  -webkit-box-shadow: 0 0px 0px 0 transparent, 0 0 0px 0 transparent !important;
+}
+
+.el-tabs--border-card {
+  border: 1px solid #ededed !important;
+  box-shadow: 0 0px 0px 0 transparent, 0 0 0px 0 transparent !important;
+  -webkit-box-shadow: 0 0px 0px 0 transparent, 0 0 0px 0 transparent !important;
+}
+
+.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+  border-left-color: transparent !important;
+}
+
+.el-tabs--border-card > .el-tabs__header .el-tabs__item {
+  border-right: 1px solid #e0e0e0 !important;
+  height: 18px;
+  line-height: 18px;
+  margin: 20px 0 !important;
+  font-size: 16px;
+}
+
+.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child {
+  border: none !important;
+}
+
+.tem-table-img {
+  width: 40px;
+  height: 40px;
+  border-radius: 2px;
+  margin-right: 10px;
+  float: left;
+}
+
+.tem-table-img-center {
+  width: 40px;
+  height: 40px;
+  border-radius: 2px;
+}
+
+.tem-img-list img {
+  width: 150px;
+  display: inline-block;
+}
+
+.el-table td {
+  padding: 5px 0 !important;
+}
+
+.tem-ul-alert li {
+  line-height: 30px;
+}
+
+.tem-ul-alert li label {
+  float: left;
+}
+
+.tem-span-btn button {
+  margin: 0;
+  margin-right: 10px;
+}
+
+.el-dialog {
+  width: 660px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item,
+.el-upload--picture-card {
+  width: 100px;
+  height: 100px;
+}
+
+.el-upload--picture-card {
+  line-height: 104px;
+}
+
+.el-form-item__content .el-loading-mask {
+  width: 102px;
+  height: 102px;
+}
+
+.el-upload-add .el-loading-mask {
+  top: -36px;
+  right: 72px;
+  left: initial;
+}
+
+.mar-t10 {
+  margin-top: 10px;
+}
+
+.btn-custom-cancel {
+  float: right;
+  margin-left: 10px;
+}
+
+.el-checkbox {
+  margin-left: 15px;
+}
+
+.el-cascader-menu__item {
+  padding: 8px !important;
+}
+
+.el-cascader-menu {
+  height: 550px !important;
+  min-width: 120px !important;
+}
+
+.el-message-box {
+  width: 390px !important;
+
+  &.el-message-box--center {
+    padding-bottom: 20px;
+  }
+
+  /deep/ .el-message-box__title {
+    justify-content: flex-start !important;
+  }
+
+  .el-message-box__content {
+    padding: 0;
+  }
+
+  .el-message-box__message {
+    text-align: center;
+    font-size: 18px;
+    margin: 30px 0;
+  }
+
+  .el-message-box__btns {
+    text-align: center;
+    // margin-bottom: 30px;
+  }
+}
+
+// .el-message-box {
+//   width: 590px !important;
+//   .el-message-box--center {
+//     padding-bottom: 0px;
+//   }
+//   .el-message-box__content {
+//     padding: 0;
+//   }
+//   .el-message-box__message {
+//     text-align: center;
+//     font-size: 18px;
+//     margin: 45px 0;
+//   }
+//   .el-message-box__btns {
+//     text-align: center;
+//     margin-bottom: 30px;
+//   }
+// }
+
+//组件改变
+.template-table {
+  .el-select {
+    .el-select__tags-text {
+      display: inline-block;
+      max-width: 84px;
+      white-space: nowrap;
+      /*规定段落中的文本不进行换行*/
+      overflow: hidden;
+      /*内容会被修剪，并且其余内容是不可见的。*/
+      text-overflow: ellipsis;
+      /*显示省略号来代表被修剪的文本*/
+    }
+  }
+
+  .el-select .el-tag__close.el-icon-close {
+    top: -6px;
+  }
+
+  .el-select__tags {
+    white-space: nowrap;
+    height: 30px;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.el-select {
+  /deep/ .el-icon-::before {
+    content: '\e6e1' !important;
+  }
+}
+
+.page-count {
+  color: #333;
+  font-size: 14px;
+
+  p {
+    margin-left: 20px;
+  }
+}
+
+/**color**/
+
+.success {
+  color: #67c23a;
+
+  &:focus {
+    color: #67c23a;
+  }
+
+  &:link {
+    color: #67c23a;
+  }
+
+  &:hover {
+    color: #67c23a;
+  }
+
+  &:active {
+    color: #67c23a;
+  }
+
+  &:visited {
+    color: #67c23a;
+  }
+}
+
+.info {
+  color: #909399;
+
+  &:focus {
+    color: #909399;
+  }
+
+  &:link {
+    color: #909399;
+  }
+
+  &:hover {
+    color: #909399;
+  }
+
+  &:active {
+    color: #909399;
+  }
+
+  &:visited {
+    color: #909399;
+  }
+}
+
+.warning {
+  color: #e6a23c;
+
+  &:focus {
+    color: #e6a23c;
+  }
+
+  &:link {
+    color: #e6a23c;
+  }
+
+  &:hover {
+    color: #e6a23c;
+  }
+
+  &:active {
+    color: #e6a23c;
+  }
+
+  &:visited {
+    color: #e6a23c;
+  }
+}
+
+.danger {
+  color: #f56c6c;
+
+  &:focus {
+    color: #f56c6c;
+  }
+
+  &:link {
+    color: #f56c6c;
+  }
+
+  color: #f56c6c;
+
+  &:hover {
+    color: #f56c6c;
+  }
+
+  &:active {
+    color: #f56c6c;
+  }
+
+  &:visited {
+    color: #f56c6c;
+  }
+}
+
+.dialogSee-ui {
+  padding-bottom: 30px;
+}
+
+.dialogSee-ui li {
+  margin: 10px 0;
+}
+
+.dialogSee-ui li img {
+  width: 200px;
+}
+
+.dialogSee-textarea {
+  width: 360px;
+  white-space: normal;
+  word-break: break-all;
+}
+
+.dialogSee-ui label {
+  display: block;
+  text-align: right;
+  float: left;
+}
+
+.dialog-main {
+  float: left;
+}
+
+.tem-table-span {
+  text-align: left;
+}
+
+.clearfix:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+.template-table {
+  //margin: 10px;
+  overflow: auto;
+}
+
+.tem-header {
+  // margin-bottom: 30px;
+  padding: 20px;
+  background: #fff;
+  border: 1px solid #ededed;
+  margin-bottom: 12px;
+}
+
+.tem-header li {
+  // float: left;
+  display: inline-block;
+  margin-right: 20px;
+  margin-bottom: 20px;
+}
+
+.tem-header li > div {
+  display: inline-block;
+}
+
+.tem-header li label {
+  font-size: 14px;
+  color: #666;
+}
+
+.temTablePack-title {
+  font-weight: normal;
+  font-size: 16px;
+  margin: 10px 0 10px;
+}
+
+// .template-table .el-select {
+//   width: 140px;
+// }
+.el-date-editor .el-range-separator {
+  width: auto;
+}
+
+.el-date-editor--daterange.el-input__inner {
+  width: 320px;
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+  border: 1px dashed #c0ccda;
+  border-radius: 6px;
+  background-color: #fbfdff;
+}
+
+.avatar {
+  width: 100px;
+  height: 100px;
+  display: block;
+}
+
+.el-upload,
+.el-upload img {
+  /* border: 1px dashed #c0ccda; */
+  border-radius: 6px;
+}
+
+.page-box {
+  display: flex;
+  display: -webkit-flex;
+  /* Safari */
+  margin: 20px 0 0;
+}
+
+.page-item {
+  flex-grow: 1;
+  /* default 0 */
+}
+
+.selectJob {
+  text-align: center;
+  padding: 10px 0;
+
+  span {
+    width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .text {
+    padding-left: 10px;
+    font-size: 14px;
+    font-weight: bold;
+    cursor: pointer;
+    color: cornflowerblue;
+  }
+}
+</style>