DoubleTable.vue

<template>
  <div class="flex h-full w-full flex-col gap-2" v-loading="loading">
    <div class="flex w-full items-center justify-between">
      <div class="title">
        {{ title }}
      </div>
      <div class="flex gap-4">
        <el-button type="primary" size="small" @click="handleExport"
          >导出</el-button
        >

        <el-select
          v-if="type == 'pjOption'"
          size="small"
          filterable
          v-model="form.pjOption"
          placeholder="请选择评价选项"
          clearable
        >
          <el-option
            v-for="(v, i) in dict.pjOption"
            :key="i"
            :label="v"
            :value="v"
          >
          </el-option>
        </el-select>
        <el-select
          v-else-if="type == 'business'"
          size="small"
          filterable
          v-model="form.businessName"
          placeholder="请选择业务"
          clearable
        >
          <el-option
            v-for="(v, i) in getTopKeyList(dict.businessList)"
            :key="i"
            :label="v"
            :value="v"
          >
          </el-option>
        </el-select>
        <el-select
          v-else-if="type == 'dept'"
          size="small"
          filterable
          v-model="form.deptName"
          placeholder="请选择部门"
          clearable
        >
          <el-option
            v-for="(v, i) in getTopKeyList(dict.sectionNameList)"
            :key="i"
            :label="v"
            :value="v"
          >
          </el-option>
        </el-select>
        <el-select
          v-else-if="type == 'window'"
          size="small"
          filterable
          v-model="form.windowNum"
          placeholder="请选择窗口"
          clearable
        >
          <el-option
            v-for="(v, i) in getTopKeyList(dict.windowFromnumList)"
            :key="i"
            :label="v"
            :value="v"
          >
          </el-option>
        </el-select>
        <el-button
          type="primary"
          size="small"
          v-if="type != 'hall'"
          @click="handleSearch"
          >搜索</el-button
        >
      </div>
    </div>
    <div
      :class="[
        'w-full',
        'grid',
        data.length > 5 ? 'grid-cols-2' : 'grid-cols-1',
      ]"
    >
      <y-table
        size="small"
        border
        :column="leftColumn"
        :data="letTableData"
      ></y-table>
      <y-table
        v-show="data.length > 5"
        size="small"
        border
        :column="rightColumn"
        :data="rightTableData"
      ></y-table>
    </div>
  </div>
</template>

<script>
import storage from "@/utils/storage";
export default {
  props: {
    data: {
      required: true,
      type: Array,
      default: () => [],
    },
    type: {
      required: true,
      type: String,
      default: "",
    },
    loading: {
      type: Boolean,
      default: false,
    },
    current: {
      required: true,
      type: Number,
      default: 1,
    },
    size: {
      required: true,
      type: Number,
      default: 10,
    },
    column: {
      required: true,
      type: Array,
      default: () => [],
    },
    title: {
      required: true,
      type: String,
      default: "",
    },
    border: {
      type: Boolean,
      default: true,
    },
    dict: {
      required: true,
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      searchVal: "",
      siteId: storage.get(2, "siteId"),
      form: {
        pjOption: "",
        deptName: "",
        windowNum: "",
        businessName: "",
      },
    };
  },
  computed: {
    leftColumn() {
      let index = {
        label: "排序",
        type: "index",
        align: "center",
        index: (index) => {
          return (this.current - 1) * this.size + index + 1;
        },
      };
      return [index, ...this.column];
    },
    rightColumn() {
      let index = {
        label: "排序",
        type: "index",
        align: "center",
        index: (index) => {
          return (this.current - 1) * this.size + index + 6;
        },
      };
      return [index, ...this.column];
    },
    letTableData() {
      let arr = this.data.slice(0, 5);
      if (arr.length) {
        while (arr.length < 5) {
          arr.push(null);
        }
      }
      return arr;
    },
    rightTableData() {
      let arr = this.data.slice(5, 10);
      if (arr.length) {
        while (arr.length < 5) {
          arr.push(null);
        }
      }
      return arr;
    },
  },
  created() {},
  methods: {
    handleSearch() {
      this.$emit("search", this.type, this.form);
    },
    handleExport() {
      this.$emit("export", this.type, this.form);
    },
    getTopKeyList(arr) {
      if (arr) {
        return arr.map((item) => Object.keys(item)[0]);
      } else {
        return [];
      }
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  font-weight: 600;
}
:deep(.el-table__header-wrapper) {
  th {
    background: #e6f1f9;
  }
}
:deep(.el-table) {
  border-color: #dfe9f2 !important ;
  th {
    border-color: #dfe9f2 !important ;
  }
}
</style>