vue-insagent-pc/src/components/TemplateTable/index.vue

<template>
  <div ref="commonTable">
    <!-- 搜索栏 -->
    <el-form v-if="formList.length > 0" :inline="true" :model="searchDataClone" label-width="130px" ref="searchDataClone"
      id="commonTable" class="device-wrapper">
      <el-form-item v-for="f in formList" :key="f.prop" :label="f.label" :prop="f.prop">
        <template>
          <template v-if="f.type === 'input'">
            <el-input clearable v-model.trim="searchDataClone[f.prop]" size="small"
              :placeholder="'请输入' + f.label"></el-input>
          </template>
          <template v-else-if="f.type === 'company'">
            <el-select size="small" clearable v-model="searchDataClone[f.prop]" :placeholder="'请输入' + f.label" filterable >
              <el-option label="不限" value v-if="f.selectAuto"></el-option>
              <el-option v-for="(s, i) in InsCompanyList" :key="i" :label="s.name" :value="s.id"></el-option>
            </el-select>
          </template>
          <template v-else-if="f.type === 'companyCheck'">
            <el-select class="selectLength" multiple collapse-tags size="small" v-model="searchDataClone[f.prop]"
              :placeholder="'请输入' + f.label">
              <el-option label="不限" value v-if="f.selectAuto"></el-option>
              <el-option v-for="(s, i) in InsCompanyList" :key="i" :label="s.name" :value="s.id"></el-option>
            </el-select>
          </template>
          <template v-else-if="f.type === 'select'">
            <el-select size="small" clearable v-model="searchDataClone[f.prop]" :placeholder="'请输入' + f.label">
              <el-option label="不限" value v-if="f.selectAuto"></el-option>
              <el-option v-for="(s, i) in f.options" :key="i" :label="s.label || s.dictTag"
                :value="s.value || s.dictValue"></el-option>
            </el-select>
          </template>
          <template v-else-if="f.type === 'selectDept'">
            <el-select  size="small" v-model="searchDataClone[f.prop]" filterable clearable :placeholder="'请选择' + f.label"
              @change="selectChange($event, f.prop)">
              <el-option v-for="(option, index) in f.options" :key="index"
                :label="f.optionsIabel ? option[f.optionsIabel] : option.name"
                :value="f.optionsValue ? option[f.optionsValue] : option.id"></el-option>
            </el-select>
          </template>
          <template v-else-if="f.type === 'selectCompany'">
            <el-select  size="small" v-model="searchDataClone[f.prop]" filterable clearable :placeholder="'请选择' + f.label"
              @change="selectCompanyChange($event, f.prop)">
              <el-option v-for="(option, index) in f.options" :key="index"
                :label="f.optionsIabel ? option[f.optionsIabel] : option.name"
                :value="f.optionsValue ? option[f.optionsValue] : option.id"></el-option>
            </el-select>
          </template>
          <template v-else-if="f.type === 'datePicker'">
            <!-- 日期区间 -->
            <el-date-picker style="width: 215px;" type="daterange" size="small" v-model="searchDataClone[f.prop]" align="right" unlink-panels
              range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']" :clearable="true"></el-date-picker>
          </template>
          <template v-else-if="f.type === 'date'">
            <!-- 一天 -->
            <el-date-picker type="date" size="small"  v-model="searchDataClone[f.prop]" placeholder="选择日期"
              value-format="yyyy-MM-dd"></el-date-picker>
          </template>
          <!-- 年份 -->
          <template v-else-if="f.type === 'year'">
            <el-date-picker  type="year" size="small" v-model="searchDataClone[f.prop]" placeholder="选择年">
          </el-date-picker>
          </template>
          <template v-else-if="f.type === 'radio'">
            <el-radio-group v-model="searchDataClone[f.prop]" :placeholder="'请输入' + f.label">
              <el-radio v-for="(r, i) in f.radioList" :key="i" :label="r.value">{{ r.label }}</el-radio>
            </el-radio-group>
          </template>
          <template v-else-if="f.type === 'slot'">
            <slot show-overflow-tooltip :name="f.name" ></slot>
          </template>
        </template>

      </el-form-item>


      <el-form-item>
        <el-button style="margin-left:30px" size="small" @click="resetForm('searchDataClone')">重置</el-button>
        <el-button type="primary" size="small" @click="handleSearchList()">查询</el-button>
        <template v-if="btnGroup.length > 0">
          <span v-for="(val, idx) in btnGroup" :key="idx" style="margin-left:10px">
            <slot  v-if="val.slot" show-overflow-tooltip :name="val.name"></slot>
            <el-button v-else :disabled="false || (val.disabled && val.disabled())" :type="val.type || 'primary'" size="small" @click="val.click()">{{ val.name }}</el-button>
          </span>
        </template>
      </el-form-item>
      <!-- <el-form-item v-if="btnGroup.length>0" >
            <el-button v-for="(val, idx) in btnGroup" :key="idx" :type="val.type || 'primary'" size="small" @click="tabFun(val)">{{ val.name }}</el-button>
      </el-form-item> -->
    </el-form>

    <slot v-if="custom" show-overflow-tooltip ></slot>

    <el-table ref="table" :show-summary="tableConfig.showSummary||false" :data="data" border size="small" style="width: 100%" :height="tableConfig.tableHeight ||tableHeight" v-loading="tableConfig.loading"
      element-loading-text="数据加载中" element-loading-spinner="el-icon-loading" @selection-change="handleSelectionChange"  @select-all="selectAll"
      :row-style="{ height: '55px' }" :cell-style="{ padding: '0px' }"
      :header-cell-style="{ background: '#F2F7FC', fontWeight: '700', color: '#606266' }" :cell-class-name="rowClass">
      <el-table-column type="selection" :width="tableConfig.selectionWidth || '50'" v-if="tableConfig.isCheckBox"
        align="center" />
      <el-table-column type="index" :width="tableConfig.indexWidth || '50'" v-if="tableConfig.isShowIndex" align="center"
        label="序号" />
      <template v-for="(item, index) in tableConfig.columns">
        <!-- 日期内容 -->
        <el-table-column v-if="item.type === 'date'" :align="'center'" :fixed="item.fixed" :width="item.width || 150"
          show-overflow-tooltip :label="item.label" :key="item.prop">
          <template slot-scope="scope">
            <div>{{ scope.row[item.prop] | formateDate }}</div>
          </template>
        </el-table-column>
        <!-- 字典项 -->
        <el-table-column v-if="item.type === 'dic'" :align="'center'" :width="item.width || ''" :fixed="item.fixed"
          show-overflow-tooltip :label="item.label" :key="item.prop" :prop="item.prop">
          <template slot-scope="scope">
            <span>{{ selectDictLabel(dictData[item.dic], scope.row[item.prop]) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="item.type === 'statMap'" :align="'center'" :width="item.width || ''" :fixed="item.fixed"
          show-overflow-tooltip :label="item.label" :key="item.prop" :prop="item.prop">
          <template slot-scope="scope">
            <span> {{ statMaps(item.options)[scope.row[item.prop]] || '--' }}</span>
          </template>
        </el-table-column>
        <!-- 自定义内容 -->
        <el-table-column v-if="item.type === 'slot'" :align="'center'"  show-overflow-tooltip :name="item.name"
          :label="item.label" :key="item.prop" :prop="item.prop">
          <template slot-scope="scope">
            <slot show-overflow-tooltip v-bind="scope" :name="item.name"></slot>
          </template>
        </el-table-column>
        <!-- 常规文本内容 -->
        <el-table-column v-if="item.type === 'text'" :align="'center'" :width="item.width || ''" :fixed="item.fixed"
          :label="item.label" :key="item.prop" :prop="item.prop"></el-table-column>

      </template>
      <!-- <slot name="operate" :row="scope.row"></slot> -->
      <!-- 自定义操作栏 -->
      <el-table-column v-if="tableConfig.operateShow" label="操作" align="center"
        :min-width="tableConfig.operationWidth || '100'" fixed="right">
        <template slot-scope="scope">
          <slot name="operate" :row="scope.row"></slot>
        </template>
      </el-table-column>
      <!-- 数组形式的操作栏，用于普通按钮 -->
      <!-- // optBtns:[
            //   {
            //     type:'primary',
            //     label:'修改',
            //     hide:(row) => {
            //      return row.importStatus == 1?true:false
            //     },
            //     click:(row, index) => {return this.modifyFun(row)},
            //   }
            // ] -->
      <el-table-column v-if="tableConfig.optBtns" :min-width="tableConfig.operationWidth || '100'" label="操作"
        fixed="right" header-align="center" align="center">
        <template slot-scope="scope">
          <span v-for="(btn, index) in tableConfig.optBtns" :key="index">
            <!-- <el-button style="margin:0 10px" v-if="!btn.hide || (btn.hide && btn.hide(scope.row))" v-permission="btn.perm"
              @click="btn.click(scope.row, index)" :type="btn.type || 'primary'" :icon="btn.icon" size="small">{{
                btn.label
              }} </el-button> -->
            <kt-button style="margin:0 10px" v-if="!btn.hide || (btn.hide && btn.hide(scope.row))" :icon="btn.icon" :label="btn.label"
              :type="btn.type || 'primary'" size="small" :perms="btn.perm"  @click="btn.click(scope.row, index)" />
          </span>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页 -->
    <div class="block" ref="bottomFixed">
      <el-pagination v-if="tableConfig.isPaginationShow && pagination.totalSize" style="margin-top: 10px"
        :page-size="pagination.pageSize" :current-page.sync="pagination.pageNum" :total="pagination.totalSize"
        layout="total, sizes,prev, pager, next,jumper" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import KtButton from "@/views/Core/KtButton";
export default {
  components: {
    KtButton,
  },
  props: {
    custom: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    formList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    btnGroup: {
      type: Array,
      default: () => {
        return [];
      }
    },
    tableConfig: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // searchDataClone: {
    //   type: Object,
    //   default: () => {
    //     return {};
    //   }
    // },
    pagination: {
      type: Object,
      default: () => ({
        pageNum: 1,
        pageSize: 20,
        totalSize: 0,
      }),
    },
    rowClass: {
      type: Function,
      default: () => '',
    },
    data: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      tableHeight: 0,
      InsCompanyList: [],
      searchDataClone: {}
    };
  },
  created() {
    if(this.formList.length>0 && this.formList.find(val=>val.type=='company' || val.type=='companyCheck')){
      this.companyFun()
    }
  },
  mounted() {
    setTimeout(() => {
      var divHg = 0;
      if (document.getElementById("commonTable") != null) {
        divHg = document.getElementById("commonTable").clientHeight
      } else {
        divHg = 100
      }
      let bottomTop = this.$refs.bottomFixed.offsetTop;
      this.tableHeight = window.innerHeight - divHg -160  + "px";
    }, 10);
  },
  filters: {
    formateDate(val) {
      return formatDateTime(val)
    }
  },

  methods: {
    selectChange(id, filed) {
      switch (filed) {
        case 'provinceId':
          break;
        case 'cityId':

          break;
        case 'countyId':

          break;

        default:
          break;
      }
      if (id) {
        this.$emit('areaSelectChange', { id, filed });
      }
    },
    selectCompanyChange(id, filed) {
      if (id) {
        this.$emit('companySelectChange', { id, filed });
      }
    },
    formatDateTime(date) {
      let d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();
      if (month.length < 2) month = '0' + month;
      if (day.length < 2) day = '0' + day;
      return [year, month, day].join('-');
    },
    companyFun() {
      this.$api.cost.gainTopList({ type: 1 }).then(res => {
        if (res.data) {
          this.InsCompanyList = res.data;
        }
      });
    },
    statMaps(list) {
      if (!list) return;
      let obj = {};
      list.forEach(item => {
        obj[item.value || item.id] = item.label || item.value;
      });
      return obj;
    },

    selectDictLabel(dicts, value) {
      if (value === undefined) {
        return '';
      }
      if (dicts === undefined) {
        return '';
      }
      const actions = [];
      Object.keys(dicts).some((key) => {
        if (dicts[key].value === `${value}`) {
          actions.push(dicts[key].label);
          return true;
        }
      });
      if (actions.length === 0) {
        actions.push(value);
      }
      return actions.join('');
    },
    // 表格多选
    handleSelectionChange(currentRow) {
      this.$emit('selectionChange', currentRow,this.$refs.table);
    },
    selectAll(currentRow) {
      this.$emit('selectAll', currentRow,this.$refs.table);
    },
    handleSizeChange(value) {
      this.pagination.pageSize = value;
      this.pagination.pageNum = 1;
      this.$emit('getList',{...this.pagination,...this.searchDataClone});
    },
    handleCurrentChange(val) {
      this.pagination.pageNum = val;
      this.$emit('getList',{...this.pagination,...this.searchDataClone});
    },
    
    // 搜索
    handleSearchList() {
      // 更新父组件searchData
      this.pagination.pageNum = 1;
      this.pagination.pageSize = 20;
      this.$emit("handleSearchList", this.searchDataClone);
    },
    // 重置
    resetForm(formName) {
      this.searchDataClone = {}
      // this.$refs[formName].resetFields();
      this.handleSearchList();
    },
    handleOpt(row, index) {
      this.$emit('handleOpt', row, index)
    },
  }
};
</script>
<style scoped>
.selectLength /deep/ .el-select__tags-text {
  display: inline-block;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.device-wrapper /deep/  .el-form-item {
  margin-bottom: 12px;
}
</style>