spfm-market-front/src/pages/main/performance/components/table.vue

<!--
 * @Author       : yuanrunwei
 * @Date         : 2021-11-01 18:02:58
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-11 18:42:02
 * @FilePath     : /spfm-market-front/src/pages/main/performance/components/table.vue
-->
<template>
  <el-table
    class="simple-table"
    :data="computed_list"
    v-loading="loading"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      type="selection"
      width="55"
      :selectable="selectable"
      v-if="multiple"
    />
    <el-table-column
      v-for="(
        { props, label, type, width, align, children, dictionary, variable },
        index
      ) in config"
      :key="index"
      :prop="props"
      :width="width"
      :label="label"
      :align="align || 'center'"
    >
      <template #default="scope">
        <div v-if="type === 'edit'">
          <el-input
            v-if="scope.row[`edit`]"
            v-model="scope.row[props]"
            autosize
            type="textarea"
            @change="handleModify"
          />
        </div>
        <div v-if="type === 'number'">{{ scope.$index + 1 }}</div>
        <div v-else-if="type === 'textarea'">
          <pre class="simple-table-break">{{ scope.row[props] }}</pre>
        </div>
        <div v-else-if="type === 'date'">
          <div>{{ $formatDate(scope.row[props], "YYYY-MM-DD") }}</div>
        </div>
        <div v-else-if="type === 'time'">
          <div>
            {{ $formatDate(scope.row[props], "YYYY-MM-DD HH:00:00") }}
          </div>
        </div>
        <div v-else-if="type === 'click'">
          <div
            class="simple-table-click cursor-pointer"
            @click="handleClick(props, scope.row)"
          >
            {{ scope.row[props] }}
          </div>
        </div>
        <div v-else-if="type === 'dictionary'">
          {{ dictionary[scope.row[props]] }}
        </div>
        <div v-else>{{ scope.row[props] }}</div>
      </template>
      <template v-if="children">
        <el-table-column
          v-for="({ props, label, width, align, type }, index) in children"
          :key="index"
          :prop="props"
          :width="width"
          :label="label"
          :align="align || 'center'"
        >
          <template #default="scope">
            <div v-if="type === 'edit'">
              <el-input
                v-model="scope.row[props]"
                @change="handleModify"
                autosize
                type="textarea"
              />
            </div>
            <div v-else>{{ scope.row[props] }}</div>
          </template>
          <template v-if="variable">
            <div>{{ scope.row[props] }}</div>
          </template>
        </el-table-column>
      </template>
    </el-table-column>
    <el-table-column
      v-if="handleRow.length"
      label="操作"
      :align="'center'"
      :width="handleRow.length * 50"
    >
      <template slot-scope="scope">
        <span
          v-for="({ label, props, popconfirm, visible }, index) in handleRow"
          :key="index"
          class="padding-right-5"
        >
          <span v-if="handleFormat(visible, scope.row)">
            <el-popconfirm
              v-if="popconfirm"
              :title="`确定要${label}吗？`"
              @onConfirm="handleClick(props, scope.row)"
              @cancel="handleCancel"
            >
              <el-button slot="reference" type="text" size="small">{{
                label
              }}</el-button>
            </el-popconfirm>
            <el-button
              v-else
              @click="handleClick(props, scope.row)"
              type="text"
              size="small"
              >{{ label }}</el-button
            >
          </span>
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    config: {
      type: Array,
      default: () => [],
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    selectable: {
      type: Function,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    handleRow: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    computed_list() {
      return this.list.map((element) => ({
        ...element,
      }));
    },
  },
  methods: {
    handleFormat(params, data) {
      let visible = true;
      if (params) {
        visible = false;
        Object.keys(params).forEach((element) => {
          if (params[element].includes(data[element])) {
            visible = true;
          }
        });
      }
      return visible;
    },
    handleClick(props, row) {
      this.$emit(props, row);
    },
    handleCancel() {
      console.log("我被关闭了");
    },
    handleSelectionChange(val) {
      this.$emit("selection", val);
    },
    handleModify() {
      this.$emit("modify", this.computed_list);
    },
  },
};
</script>