qj-happy-common-zhongjian 1.0.27

package/src/views/templates/templateTableData.vue

@@ -0,0 +1,1883 @@
+<template>
+  <div class="template-table">
+    <!--header-->
+    <div class="tem-header" v-if="temInput">
+      <ul class="clearfix">
+        <li :class="{li:temInput[0].btnArray}" :key="index" v-for="(item,index) in temInput">
+          <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
+                v-model.trim="item.value"
+              ></el-input>
+            </div>
+            <div v-if="item.type==='select'">
+              <el-select
+                :filterable="'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)"
+                clearable
+                collapse-tags
+                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>
+
+                <div class="selectJob" v-if="item.pagenation || false">
+                  <span @click.stop="prePage(item)" class="text">上一页</span>
+                  <span
+                    @click.stop="nextPage(item)"
+                    class="text"
+                    style="padding-left:30px;"
+                    v-show="sltPage!==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 === '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=temtable.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 temInput" 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-tabs
+      @tab-click="handleClickTab"
+      type="border-card"
+      v-if="temTab && 'tabPane' in temTab"
+      v-model="activeName"
+    >
+      <el-tab-pane :key="index" :label="item.label" v-for="(item,index) in temTab.tabPane">
+        <!--main table-->
+        <div class="template-box">
+          <div class="tem-main" v-if="temTable">
+            <h3
+              class="temTable-title"
+              v-if="'title' in temTable ? temTable.title : ''"
+            >{{temTable.title}}：</h3>
+            <el-table
+              :data="tableData"
+              :empty-text=" 'emptyText' in temTable ? temTable.emptyText : '暂无数据'"
+              :row-key="row_Key"
+              :rowKey="rowKey=(temTable.rowKey?temTable.rowKey:'')"
+              @select="handleSelectionChange"
+              @select-all="handleSelectionChange"
+              @toggleSelection="toggleSelection"
+              ref="multipleTable"
+              style="width: 100%"
+              v-loading="loading"
+               :height="'tabHeight' in temTable ?temTable.tabHeight:false"
+            >
+              <el-table-column
+                :reserve-selection="temTable.reserve_selection?true:false"
+                type="selection"
+                v-if="'selection' in temTable ? temTable.selection.state : false"
+              ></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 : '180'"
+                :prop="'prop' in item ? item.prop : ''"
+                :width="'width' in item ? item.width : 'auto'"
+               
+                v-for="(item,index) in temTable.tableHead"
+                 :fixed="'fixed' in item ? item.fixed:false"
+              >
+
+              <!-- {{item.fixed}} -->
+                <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 temTable ? temTable.tabBtnWidth : '180'"
+                label="操作"
+                :fixed="'fixed' in temTable ? temTable.fixed:false"
+                v-if="'tabBtnState' in temTable ? temTable.tabBtnState:true"
+              >
+                <template slot-scope="scope">
+                  <!--四个以内的按钮是这么显示-->
+                  <span
+                    :key="index"
+                    class="tem-span-btn"
+                    style="display:inline-block"
+                    v-for="(item,index) in temTable.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="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-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 && 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 temTable ">
+              <el-button
+                :key="indexBtn"
+                :type="itemBtn.type"
+                @click="btn(itemBtn,indexBtn)"
+                v-for="(itemBtn,indexBtn) in temTable.tablePageBtn "
+              >{{itemBtn.label}}</el-button>
+            </div>
+            <div class="page-item" v-if="'tabpageState' in temTable ? temTable.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>
+          <!-- 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>
+      </el-tab-pane>
+    </el-tabs>
+    <div v-else>
+      <div class="template-box template-boild-box">
+        <!--main table-->
+        <div class="tem-main" v-if="temTable">
+          <h3
+            class="temTable-title"
+            v-if="'title' in temTable ? temTable.title : ''"
+          >{{temTable.title}}：</h3>
+          <el-table
+            :data="tableData"
+            :empty-text=" 'emptyText' in temTable ? temTable.emptyText : '暂无数据'"
+            :row-key="row_Key"
+            :rowKey="rowKey=(temTable.rowKey?temTable.rowKey:'')"
+            @select="handleSelectionChange"
+            @select-all="handleSelectionChange"
+            @toggleSelection="toggleSelection"
+            ref="multipleTable"
+            style="width: 100%"
+            v-loading="loading"
+             :height="'tabHeight' in temTable ?temTable.tabHeight:false"
+          >
+            <el-table-column
+              :reserve-selection="temTable.reserve_selection?true:false"
+              type="selection"
+              v-if="'selection' in temTable ? temTable.selection.state : false"
+              width="40"
+              fixed="left"
+            ></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 temTable.tableHead"
+               :fixed="'fixed' in item ? item.fixed:false"
+            >
+              <!-- {{item.fixed}} -->
+              <!-- 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 temTable ? temTable.tabBtnWidth : '180'"
+              label="操作"
+              v-if="'tabBtnState' in temTable ? temTable.tabBtnState:true"
+              :fixed="'fixed' in temTable ? temTable.fixed:false"
+            >
+              <template slot-scope="scope">
+                <!--四个以内的按钮是这么显示-->
+
+                <span
+                  :key="index"
+                  class="tem-span-btn"
+                  style="display:inline-block"
+                  v-for="(item,index) in temTable.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-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="temTable">
+          <!-- 按钮部分 -->
+          <div v-if="'tablePageBtn' in temTable ">
+            <el-button
+              :key="indexBtn"
+              :type="itemBtn.type"
+              @click="btn(itemBtn,indexBtn)"
+              v-for="(itemBtn,indexBtn) in temTable.tablePageBtn "
+            >{{itemBtn.label}}</el-button>
+          </div>
+          <div class="page-item" v-if="'tabpageState' in temTable ? temTable.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>
+</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 { parseTime } from "#/utils/index"; //时间格式化
+export default {
+  props: [
+    "temInput",
+    "params",
+    "temTable",
+    "temPage",
+    "temTab",
+    "url",
+    "temPageLayout",
+    "subtotal",
+    "tableData"
+  ],
+  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,
+      pageCount: null,
+      restaurants: null, //搜索的数据
+      searchUrl: "",
+      parseTime,
+      loading: false,
+      dialogFormVisible: false, //dialog编辑是否显示
+      dialogFormVisibleSee: false, //dialog查看是否显示
+      dialogData: {},
+      dialogDataSee: {},
+      formLabelWidth: "9rem", //长度根据标题长度来，一个字一个rem
+      activeName: "",
+      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,
+      // tableData: [], //table内容
+      dropdowIndexObj: {},
+      flag: 0,
+      inputHtmlReset: null, //初始化数据
+      clickState: true //防止多次重复点击
+    };
+  },
+  // beforeCreate() {
+  //   this.dialogData
+  // },
+  mounted() {
+    // console.log(this.temInput, "ddd");
+    // 在template-table上新增加绑定一个temPageLayout,值是字符串,不传默认是'total, sizes, prev, pager, next, jumper',
+    // 根据需要添加或者减少
+    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: {
+    btn(itemBtn, index) {
+      if (itemBtn.id === "query" || itemBtn.id === "search") {
+        //表示查询
+        this.data.page = 1;
+        this.searchUrl = "url" in itemBtn && itemBtn.url ? itemBtn.url : "";
+        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 {
+        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;
+      if (item.pagenation.page < 1) {
+        // 判断点击的页数是否小于1
+        this.$message.error("已到第一页");
+        item.pagenation.page = 1;
+        return;
+      }
+      item.state = false;
+      this.getSltInfo(item);
+    },
+    nextPage(item) {
+      //  		console.log(item,'item1')
+      //  		console.log(this.pageCount,'this.pageCount')
+      if (item.pagenation.page < this.pageCount) {
+        // 判断点击的页数是否小于总页数;
+        ++item.pagenation.page;
+        item.state = false;
+        this.getSltInfo(item);
+      } else {
+        this.$message.error("已到最后一页");
+      }
+    },
+    getSltInfo(item) {
+      if (item.url && !item.state) {
+        request({
+          url: item.url,
+          method: "get",
+          params: {
+            rows: (item.pagenation && item.pagenation.rows) || null,
+            page: (item.pagenation && item.pagenation.page) || null
+          }
+        }).then(res => {
+          this.pageCount =
+            item.pagenation && item.pagenation.rows
+              ? Math.ceil(res.total / item.pagenation.rows)
+              : 1;
+          item.options = res.list;
+          item.state = true;
+        });
+      }
+    },
+    handleClick(item, val, index) {
+      // 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]];
+            } 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("size-change", val);
+    },
+    currentChange(val) {
+      console.log("开始请求");
+      this.data.page = val;
+      this.getDataList();
+      // this.$emit("current-change", val);
+    },
+    handleCommand(key, data) {
+      console.log(key, data, "f");
+      //折叠按钮请求
+      // this.$message("click on item " + command);
+      // this.$emit("tableBtnClick", command); //抛出去，根据id来执行事件
+    },
+    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.temInput &&
+          this.temInput.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)) {
+                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]
+              );
+            });
+        }
+        //查询列表
+        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;
+            }
+          });
+        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;
+                    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.rows) {
+              this.tableData = res.rows;
+              if (this.temPage !== false) {
+                this.pagenation.total = res.total;
+              }
+              this.tableData = res.rows;
+              this.$emit("getData", res.rows);
+              // 小计
+              if (res.rows.length > 0) {
+                if (this.subtotal && this.subtotal.length > 0) {
+                  this.subtotal.forEach(el => {
+                    el.value = 0;
+                    res.rows.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;
+              }
+              this.tableData = [];
+              this.$emit("getData", []);
+            }
+          } else {
+            if (this.temPage !== false) {
+              this.pagenation.total = 0;
+            }
+            this.tableData = [];
+            this.$emit("getData", []);
+          }
+        });
+      }
+    },
+    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 {
+              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("多选", selection, row);
+      this.$emit("handleSelectionChange", selection, row);
+
+      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) {
+          this.$confirm(item.promptTitle, {
+            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();
+        });
+      }
+    },
+    temInput(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: #fcfcfc;
+}
+.el-table .el-table__header .cell {
+  color: #666;
+  font-weight: normal;
+  line-height: 20px;
+  text-align: left;
+}
+.el-table .el-table__body .cell {
+  font-size: 12px;
+  text-align: left;
+}
+.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: 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>
+.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;
+}
+.temTable-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>
+
+