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
              @change="f.change($event, f.prop)"
            >
              <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
              filterable
              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 || s.name"
                :value="s.value || s.dictValue || s.id"
              ></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 === 'dateTime'">
            <!-- 一天 -->
            <el-date-picker
              type="datetime"
              size="small"
              v-model="searchDataClone[f.prop]"
              placeholder="选择日期"
              value-format="yyyy-MM-dd hh:mm:ss"
            ></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>
    <slot v-if="tipFlag">
      <div >
        <span style="color:red">注意更新签单日期</span>
      </div>
    </slot>
    <el-table
      ref="table"
      :show-summary="tableConfig.showSummary || false"
      :data="data"
      border
      style="width: 100%"
      @expand-change="handleRowChange"
      :height="tableConfig.tableHeight || tableHeight"
      v-loading="tableConfig.loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      @selection-change="handleSelectionChange"
      @select="selectRow"
      @select-all="selectAll"
      @row-click="rowClick"
      :row-style="{ height: '55px' }"
      :cell-style="{ padding: '0px' }"
      @current-change="handleCurrentTableChange"
      :header-cell-style="{
        background: '#F2F7FC',
        fontWeight: '700',
        color: '#606266',
      }"
      :cell-class-name="rowClass"
    >
      <el-table-column v-if="tableConfig.expand" type="expand">
        <template slot-scope="scope">
          <slot v-bind="scope" name="expand"></slot>
        </template>
      </el-table-column>
      <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"
          :width="item.width || ''"
        >
          <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>

        <el-table-column
          v-if="item.type === 'flag'"
          :align="'center'"
          :width="item.width || ''"
          :fixed="item.fixed"
          :label="item.label"
          :key="item.prop"
          :prop="item.prop"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row[item.prop] == "1" ? "是" : "否" }}
            </div>
          </template>
        </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: {
    tipFlag: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    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;
      //160??待调整
      this.tableHeight = window.innerHeight - divHg - 210 + "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 });
      }
    },
    handleRowChange(row) {
      this.$emit("handleRowChange", row);
      //   if (!row.expanded) {
      //     this.$emit("handleRowChange", row);
      //       this.$refs.table.toggleRowExpansion(row, row.expanded);
      // } else {
      //   row.expanded = !row.expanded;
      //   this.$refs.table.toggleRowExpansion(row, row.expanded);
      // }
    },
    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.dictValue] =
          item.label || item.value || item.dictTag;
      });
      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);
    },
    // 表格单选
    selectRow(selection, row) {
      this.$emit("selectcurrentRow", selection, row);
    },
    selectAll(currentRow) {
      this.$emit("selectAll", currentRow, this.$refs.table);
    },

    rowClick(currentRow) {
      this.$emit("rowClick", 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 });
    },
    handleCurrentTableChange(val) {
      this.$emit("handleCurrentTableChange", val);
    },
    // 搜索
    handleSearchList() {
      // 更新父组件searchData
      this.pagination.pageNum = 1;
      this.pagination.pageSize = 10; //查询添加默认每页20条
      this.$emit("handleSearchList", this.searchDataClone);
    },
    // 重置
    resetForm(formName) {
      this.$emit("handleResetForm");
      this.searchDataClone = {};
      console.log(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;
}
/deep/ .el-table {
  overflow-y: auto;
}
</style>