<template>
  <div class="app-container">
    <el-form class="searchIndex" :model="queryParams" size="mini" ref="queryParams" :inline="true" :rules="queryRules" v-show="showSearch" label-width="88px">
      <div style="display: inline-block;">
        <el-form-item :class="['treeselectForm treeselectForm2',{borderRed:!validTree}]" label="组织架构" prop="orgIds">
          <tree @treeselectFn="treeselectFn" :treeval="queryParams.orgIds" :ismultiple="true" style="width:193px;"></tree>
        </el-form-item>
      </div>
      <el-form-item label="业务员姓名" prop="nickName">
        <el-input
          v-model="queryParams.nickName"
          placeholder="请输入业务员姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="门店类型"  prop="storeCategorysVal">
        <el-select size="mini" clearable v-model="queryParams.storeCategorysVal" multiple collapse-tags placeholder="请选择门店类型" @change="storeCategorysChange">
          <el-option
            v-for="item in storeTypeOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市等级" prop="cityLevels">
        <el-select  v-model="queryParams.cityLevels" clearable multiple collapse-tags placeholder="请选择城市等级" >
          <el-option
            v-for="item in cityLevelOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务类型">
        <div style="position:relative;">
          <div  class="tableSearchInput"  @click="onTastList">
            <p class="text"  v-if="taskIdNames.length==0">请选择任务类型</p>
            <p class="text1" v-if="taskIdNames.length>0">
              <span v-if="taskIdNames.length>0" style="width: 132px;" class="lableSpan">{{taskIdNames[0]}}</span>
              <span v-if="taskIdNames.length>1" class="lableSpan">+{{taskIdNames.length-1}}</span></p>
          </div>
          <i v-if="taskIdNames.length>0" class="el-icon-circle-close tableSearchInputclear" @click="clearTast"></i>
        </div>
      </el-form-item>
<!--              <el-form-item label="起始日期" prop="startTime">-->
<!--                <el-date-picker-->
<!--                  style="width: 193px;"-->
<!--                  v-model="datetimerange"-->
<!--                  type="daterange"-->
<!--                  align="right"-->
<!--                  range-separator="至"-->
<!--                  start-placeholder="开始日期"-->
<!--                  end-placeholder="结束日期"-->
<!--                  value-format="yyyy-MM-dd"-->
<!--                  :picker-options="pickerOptions"-->
<!--                  @change="datetimeRangeChange">-->
<!--                </el-date-picker>-->
<!--              </el-form-item>-->
      <el-form-item label="开始日期" prop="startTime">
        <el-date-picker
          v-model="queryParams.startTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          :picker-options="pickerOptionsStart"
          style="width: 193px;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期" prop="stopTime">
        <el-date-picker
          v-model="queryParams.stopTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          :picker-options="pickerOptionsEnd"
          style="width: 193px;">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery('queryParams')">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['sfa:visitCollection:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="handleQuery('queryParams')"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="visitColletionList" max-height="500">
      <el-table-column v-for="(item,index) in titleInfos" :key="index" :label="item.lable" align="center" :prop="item.prop" :width="item.width">
        <el-table-column v-if="item.children.length>0" v-for="(level2,i) in item.children" :key="index+''+i"  :label="level2.lable" align="center" :prop="level2.prop" :width="level2.width">
          <el-table-column v-if="level2.children.length>0" v-for="(level3,ii) in level2.children" :key="index+''+i+''+ii"  :label="level3.lable" align="center" :prop="level3.prop" :width="level3.width">
            <el-table-column v-if="level3.children.length>0" v-for="(level4,iii) in level3.children" :key="index+''+i+''+ii+iii"  :label="level4.lable" align="center" :prop="level4.prop" :width="level4.width">
            </el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList('queryParams')"
    />
    <!-- 添加或修改门店任务组对话框 -->
    <el-dialog title="门店任务列表" :visible.sync="open" width="90%" append-to-body>
      <el-form :model="queryTastParams" ref="queryTastForm" size="mini" :inline="true"  label-width="68px">
        <el-form-item label="任务名称" prop="taskName">
          <el-input
            v-model="queryTastParams.taskName"
            placeholder="请输入任务名称"
            clearable
            @keyup.enter.native="handleQueryTast"
          />
        </el-form-item>
        <el-form-item label="任务类型" prop="taskType">
          <el-select disabled v-model="queryTastParams.taskType" clearable placeholder="任务类型" @change="onInput()" >
            <el-option
              v-for="item in taskTypeOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否删除" prop="delFlag">
          <el-select  v-model="queryTastParams.delFlag"  placeholder="是否删除" @change="onInput()" >
            <el-option label="全部" value="1"></el-option>
            <el-option label="未删除" value="0"></el-option>
            <el-option label="已删除" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否有效" prop="isValids">
          <el-select  v-model="queryTastParams.isValids"  placeholder="是否有效" @change="onInput()" >
            <el-option label="全部" value=""></el-option>
            <el-option label="有效" value="0"></el-option>
            <el-option label="无效" value="1"></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="是否删除" prop="delFlag">-->
<!--          <el-radio-group v-model="queryTastParams.delFlag">-->
<!--            <el-radio :label="1">全部</el-radio>-->
<!--            <el-radio :label="0">未删除</el-radio>-->
<!--            <el-radio :label="2">已删除</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->

        <el-form-item label="显示周期" prop="displayCycle">
          <el-select v-model="queryTastParams.displayCycle" clearable placeholder="显示周期" @change="onInput()">
            <el-option
              v-for="item in displayCycleOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="创建日期" prop="createTime">-->
<!--          <el-date-picker-->
<!--            v-model="queryTastParams.createTime"-->
<!--            type="date"-->
<!--            value-format="yyyy-MM-dd"-->
<!--            placeholder="选择日期"-->
<!--            style="width: 193px;">-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="更新日期" prop="updateTime">-->
<!--          <el-date-picker-->
<!--            v-model="queryTastParams.updateTime"-->
<!--            type="date"-->
<!--            value-format="yyyy-MM-dd"-->
<!--            placeholder="选择日期"-->
<!--            style="width: 193px;">-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryTast">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryTast">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" ref="table" :data="taskList" @select="handleSelectionChange" @select-all="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <!--      <el-table-column label="任务id" align="center" prop="taskId" />-->
        <el-table-column label="任务编号" align="center" prop="taskCode" width="90" />
        <el-table-column label="任务名称" align="center" prop="taskName" :show-overflow-tooltip="true" />
        <el-table-column label="任务类型" align="center" prop="taskType" width="110" >
          <template slot-scope="scope">
            <span>{{taskTypeFormat(scope.row,scope.column)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否必填" align="center" prop="isMust" width="110">
          <template slot-scope="scope">
            <span>{{isMustFormat(scope.row,scope.column)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="显示周期" align="center" prop="displayCycle" width="110" >
          <template slot-scope="scope">
            <span>{{displayCycleFormat(scope.row,scope.column)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否删除" align="center" prop="delFlag" width="110">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.delFlag==0">{{delFlagFormat(scope.row,scope.column)}}</el-tag>
            <el-tag v-if="scope.row.delFlag==2" type="danger">{{delFlagFormat(scope.row,scope.column)}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否有效" align="center" prop="isValid" width="110" >
          <template slot-scope="scope">
            <span>{{isValidFormat(scope.row,scope.column)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="150" />
        <el-table-column label="更新日期" align="center" prop="updateTime" width="150" />
      </el-table>

      <pagination
        v-show="totalTast>0"
        :total="totalTast"
        :page.sync="queryTastParams.pageNum"
        :limit.sync="queryTastParams.pageSize"
        @pagination="getTastList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addTast">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listVisitCollection } from "@/api/sfa/visitColletion";
import tree from "@/views/components/sfa/treeselectParent";
import {listTask} from "@/api/sfa/task";
export default {
  name: "VisitColletion",
  components: { tree},
  data() {
    let that = this;
    return {
      // 遮罩层
      loading: false,
      taskList:[],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      open:false,
      totalTast:0,
      // 门店任务组表格数据
      visitColletionList: [],
      displayCycleOptions:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orgIds: null,
        storeCategorysVal:[],
        storeCategorys:[],
      },
      taskIdName:[],
      taskIdList:[],
      taskIdNames:[],
      storeTypeOptions:[],
      cityLevelOptions:[],
      isNotOptions:[],
      choiceDate0: '',
      pickerOptions: {
        // // 设置不能选择的日期
        // onPick: ({ maxDate, minDate }) => {
        //   this.choiceDate0 = minDate.getTime();
        //   if (maxDate) {
        //     this.choiceDate0 = '';
        //   }
        // },
        disabledDate: (time) => {
          // 设置可选择的日期为今天之后的一个月内
          const curDate = (new Date()).getTime()
          // 这里算出一个月的毫秒数,
          const day = 10 * 24 * 3600 * 1000
          const dateRegion = curDate+day
          return time.getTime() < Date.now() - 8.64e7 || time.getTime() > dateRegion
        }
      },
      pickerOptionsStart: {
        disabledDate: time => {
          let da = 1000*60*60*24*90;
          if(that.queryParams.stopTime !== '') {
            let value2 = Date.parse(that.queryParams.stopTime)
            //  value2 < time.getTime() time.getTime()< value2-da
            return  value2 < time.getTime()|| time.getTime()< value2-da
          } else {
            return false
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          let oneDay = 1000*60*60*24*1;
          let year = 1000*60*60*24*365;
          if(that.queryParams.startTime !== '') {
            let value1 = Date.parse(that.queryParams.startTime)
            // && time.getTime() > value1+year;
            return value1 > time.getTime() || time.getTime() > new Date().getTime();
          } else {
            return false
          }
        }
      },
      taskTypeOptions:[
        {
          dictLabel: "常规类型",
          dictValue: "1"
        },
        {
          dictLabel: "产品类型",
          dictValue: "2"
        },
      ],
      taskIds:[],
      queryTastParams:{
        pageNum: 1,
        pageSize: 10,
        taskType:"1",
        taskCode: null,
        taskName: null,
        isMust: null,
        isValids:"",
        isValid:null,
        displayCycle: null,
        taskId:"",
        delFlag:"1"
      },

      taskId:[],
      queryRules:{
        orgIds: [ { required: true, message: '请选择组织架构', trigger: 'blur' }],
        startTime: [ { required: true, message: '请选择开始日期', trigger: 'change' }],
        stopTime: [ { required: true, message: '请选择结束日期', trigger: 'change' }],
        storeCategorysVal: [ { required: true, message: '请选择门店类型', trigger: 'change' }]
      },
      titleInfos:[],
      validTree:true,
      datetimerange:""
    };
  },
  created() {
    // 显示周期
    this.getDicts("sfa_task_display_cycle").then(response => {
      this.displayCycleOptions = response.data;
    });
    // 是否
    this.getDicts("is_not").then(response => {
      this.isNotOptions = response.data;
    });
    // 门店类型
    if(this.$store.state.user.type == '2'){
      this.getDicts("ysl_store_type").then(response => {
        var storeTypeOptions=[{dictValue:"vall",dictLabel:"全部类型"}];
        this.storeTypeOptions = storeTypeOptions.concat(response.data);
        // this.storeTypeOptions = response.data;
      });
    }else if("5,6,7,8".indexOf(this.$store.state.user.type)!=-1){
      var storeTypeOptions=[{dictValue:"vall",dictLabel:"全部类型"}];
      this.getDicts("cw_store_type").then(response => {
        this.storeTypeOptions = response.data;
      });
    }else{
      this.getDicts("sfa_store_type").then(response => {
        var storeTypeOptions=[{dictValue:"vall",dictLabel:"全部类型"}];
        this.storeTypeOptions = storeTypeOptions.concat(response.data);
        // this.storeTypeOptions = response.data;
      });
    }
    // 城市等级
    this.getDicts("sfa_city_level").then(response => {
      this.cityLevelOptions = response.data;
    });
    // this.queryParams.stopTime = this.parseTime(new Date(),'{yy}-{mm}-{dd}');
    // this.queryParams.startTime = this.queryMonth();
    this.$set(this.queryParams,"stopTime", this.parseTime(new Date(),'{yy}-{mm}-{dd}'));
    this.$set(this.queryParams,"startTime", this.queryMonth());
    // this.getList('queryParams');

  },
  methods: {
    datetimeRangeChange(val){
      this.$forceUpdate()
      if(val == undefined || val == null){
        this.datetimerange = [];
        this.queryParams.startTime = '';
        this.queryParams.stopTime = '';
      }else{
        this.queryParams.startTime = val[0];
        this.queryParams.stopTime = val[1];
      }
    },
    onTastList(){
      this.open=true;
      this.getTastList()
    },
    onInput(){
      this.$forceUpdate();
    },
    /** 搜索按钮操作 */
    handleQueryTast() {
      this.queryTastParams.pageNum = 1;
      this.getTastList();
    },
    /** 重置按钮操作 */
    resetQueryTast() {
      this.resetForm("queryTastForm");
      this.handleQueryTast();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.taskId[this.queryTastParams.pageNum-1]=selection
      console.log(this.taskId)
    },
    addTast(){
      this.taskIds=[]
      this.taskIdNames=[]
      this.taskIdList = [].concat.apply([], this.taskId);
      for(var s=0;s<this.taskIdList.length;s++){
        if(this.taskIdList[s]!=undefined){
          this.taskIds.push(this.taskIdList[s].taskId)
          this.taskIdNames.push(this.taskIdList[s].taskName)
        }
      }
      this.queryParams.taskId=this.taskIds.join(",")
      this.open=false;
      // this.handleQueryTast()
    },
    /** 查询任务列表 */
    getTastList() {
      this.loading = true;
      if(this.queryTastParams.isValids==""){
        this.queryTastParams.isValid=null
      }else{
        this.queryTastParams.isValid=this.queryTastParams.isValids
      }
      listTask(this.queryTastParams).then(response => {
        this.taskList = response.rows;
        this.totalTast = response.total;
        this.taskIdList = [].concat.apply([], this.taskId);
        var newArr=this.taskIdList
        setTimeout(()=>{
          this.taskList.forEach((row,index) => {
            newArr.forEach((rowarr,indexarr) => {
              if(rowarr.taskId==row.taskId)
                this.$refs.table.toggleRowSelection(this.taskList[index],true);
            })

          });
        })
        this.loading = false;
      });
    },
    newArrFn (arr) {
      // 创建一个新的空数组
      let newArr = []
      for(let i = 0;i<arr.length;i++){
        // 设置一个开关，如果是true，就存进去，不是就不存
        let  flag = true
        for(let j = 0;j<newArr.length;j++){
          // 原数组和新数组作比较，如果一致，开关变为 false
          arr[i] === newArr[j] ? flag = false : flag
        };
        flag ? newArr.push(arr[i]) : newArr
      };
      return newArr
    },
    newArrFns (arr) {
      // 创建一个新的空数组
      let newArr = []
      for(let i = 0;i<arr.length;i++){
        // 设置一个开关，如果是true，就存进去，不是就不存
        let  flag = true
        for(let j = 0;j<newArr.length;j++){
          // 原数组和新数组作比较，如果一致，开关变为 false
          arr[i].taskId === newArr[j].taskId ? flag = false : flag
        };
        flag ? newArr.push(arr[i]) : newArr
      };
      return newArr
    },
    // 任务类型转换
    taskTypeFormat(row, column){
      return this.selectDictLabel(this.taskTypeOptions, row.taskType);
    },
    delFlagFormat(row, column){
      if(row.delFlag==2){
        return "已删除"
      }else{
        return  "未删除"
      }
    },
    // 是否必填中文转换
    isMustFormat(row, column){
      if(row.isMust==1){
        return "否"
      }else{
        return  "是"
      }
    },
    // 是否支持图片中文转换
    isPictureFormat(row, column){
      return this.selectDictLabel(this.isNotOptions, row.isPicture);
    },
    // 是否有效中文转换
    isValidFormat(row, column){
      return this.selectDictLabel(this.isNotOptions, row.isValid);
    },
    // 任务周期
    displayCycleFormat(row, column){
      return this.selectDictLabel(this.displayCycleOptions, row.displayCycle);
    },
    // 采集项类型中文转换
    collectionTypeFormat(row, column){
      return this.selectDictLabel(this.collectionTypeOptions, row.collectionType);
    },
    // 回答类型中文转换
    answerTypeFormat(row, column){
      return this.selectDictLabel(this.answerTypeOptions, row.answerType);
    },

    storeCategorysChange(val){
      if(val.indexOf("vall")!=-1){
        if(val.length<this.storeTypeOptions.length){
          if(val.indexOf("vall")==val.length-1){
            var storeCategorys=[]
            var storeCategorys1=[]
            for(var s=0;s<this.storeTypeOptions.length;s++){
              storeCategorys.push(this.storeTypeOptions[s].dictValue)
              storeCategorys1.push(this.storeTypeOptions[s].dictValue)
            }
            this.queryParams.storeCategorysVal=storeCategorys
            storeCategorys1.splice(storeCategorys1.indexOf("vall"),1)
            this.queryParams.storeCategorys=storeCategorys1.join(",")
          }else{
            val.splice(val.indexOf("vall"),1);
            this.queryParams.storeCategorysVal=val
            this.queryParams.storeCategorys=val.join(",")
          }
        }
      }else{
        if(val.length==this.storeTypeOptions.length-1){
          var storeCategorys=[]
          for(var s=0;s<this.storeTypeOptions.length;s++){
            storeCategorys.push(this.storeTypeOptions[s].dictValue)
          }
          this.queryParams.storeCategorysVal=storeCategorys
          this.queryParams.storeCategorys=storeCategorys.join(",")
        }else{
          this.queryParams.storeCategorysVal=val
          this.queryParams.storeCategorys=val.join(",")
        }
      }
      console.log(this.storeCategorysVal)
    },
    queryMonth () {
      //先获取当前日期
      let data = new Date()
      let year = data.getFullYear()
      //当前月份需要加一
      let mon = data.getMonth() + 1
      let day = data.getDate()
      //一月的时候年份要减一
      if(mon == 1){
        year--
        mon = 12
      }else if(mon == 3 && day > 28){
        //三月要考虑是否为闰年
        mon--
        if(year%4==0&&year%100!=0||year%400==0){
          day = 29
        }else{
          day = 28
        }
      }else if(mon != 12 || mon != 8 && day == 31){
        //31号的月份要考虑上个月是否有31号
        mon--
        day == 30
      } else {
        mon--
      }
      mon < 10 ? mon = '0'+mon: mon;
      day < 10 ? day = '0'+day: day;

      //最后拼接年月日
      let date = year + "-" + mon + "-" + day
      return date;
    },
    queryDouble() {
      let data = new Date()
      let endData=new Date().getTime()-1000*60*60*24*14
      return this.parseTime(new Date(endData),'{yy}-{mm}-{dd}')
    },
    treeselectFn(val){
      this.queryParams.orgIds = val;
      // if(val.length==0){
      //     this.$refs['queryParams'].validate((valid) => {
      //         console.log(valid)
      //     })
      // }
    },
    userIdFn(val){
      this.queryParams.userId = val;
    },
    /** 查询门店任务组列表 */
    getList(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.validTree = true;
          console.log(this.queryParams)
          let obj =  Object.assign({},this.queryParams,{});
          obj.orgIds = obj.orgIds.join(',');
          // obj.storeCategorys.splice(obj.storeCategorys.indexOf("vall"),1);
          // obj.storeCategorys = obj.storeCategorys.join(',');
          delete obj.storeCategorysVal
          obj.cityLevels = obj.cityLevels.join(',');
          listVisitCollection(obj).then(response => {
            this.titleInfos = response.data.titleInfos;
            this.visitColletionList = response.data.contentInfos;
            this.total = response.total;
            this.loading = false;
          });
        }else{
          if(this.queryParams.orgIds == null || this.queryParams.orgIds.length == 0){
            this.validTree = false;
          }else{
            this.validTree = true;
          }

        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery(formName) {
      this.queryParams.pageNum = 1;
      this.getList(formName);
    },
    clearTast(){
      this.queryParams.taskId=""
      this.taskIds=[]
      this.taskId=[]
      this.taskIdList=[]
      this.taskIdNames=[]
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.taskId=""
      this.taskIds=[]
      this.taskId=[]
      this.taskIdNames=[]
      this.taskIdList=[]
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      let obj =  Object.assign({},this.queryParams,{});
      obj.orgIds = obj.orgIds.join(',');
      // obj.storeCategorys = obj.storeCategorys.join(',');
      delete obj.storeCategorysVal
      obj.cityLevels = obj.cityLevels.join(',');
      this.download('sfa/visitCollection/export', {
        ...obj
      }, `指标分析_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style>
.tableSearchInput{
  color:#039be5;border: 1px solid #ccc;border-radius:5px;width: 192px;
  padding: 0 10px;}
.tableSearchInput .text{
  color: #ccc;font-size: 12px;
  margin: 0;
  padding-left: 6px;
}
.tableSearchInput .text1{
  font-size: 12px;
  margin: 0;
  padding-left: 0px;
  line-height: 12px;
  padding: 4px 0;
}
.tableSearchInput .lableSpan{
  background-color: #e3f2fd;display: inline-block;
  padding: 0px 4px;
  border-radius: 2px;
  margin-right: 2px;
  font-size: 12px;
  line-height: 18px;
  overflow:hidden; /*超出的部分隐藏起来。*/
  white-space:nowrap;/*不显示的地方用省略号...代替*/
  text-overflow:ellipsis;/* 支持 IE */
}
.searchIndex .el-input--suffix .el-input__inner{padding-right: 20px;}
.tableSearchInputclear{position: absolute;right: 8px;top:8px;}
</style>
