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

<!--
 * @Author       : yuanrunwei
 * @Date         : 2021-11-01 18:02:58
 * @LastEditors  : yuanrunwei
 * @LastEditTime : 2021-12-03 21:22:43
 * @FilePath     : \spfm-market-front\src\pages\main\performance\components\table.vue
-->
<template>
  <el-table class="simple-table" :data="computed_list" v-loading="loading">
    <el-table-column
      v-for="({ props, label, type, width, align, children }, 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[`${props}_${type}`]"
            v-model="scope.row[props]"
            autosize
            type="textarea"
          />
          <pre v-else>{{ scope.row[props] }}</pre>
          <el-button
            size="mini"
            class="margin-top-10"
            @click="handleEdit({ scope, type, props })"
          >
            {{ !scope.row[`${props}_${type}`] ? "编辑" : "完成" }}
          </el-button>
        </div>
        <div v-else>{{ scope.row[props] }}</div>
      </template>
      <template v-if="children">
        <el-table-column
          v-for="({ props, label, width, align }, index) in children"
          :key="index"
          :prop="props"
          :width="width"
          :label="label"
          :align="align || 'center'"
        >
          <template #default="scope">
            <div>{{ scope.row[props] }}</div>
          </template>
        </el-table-column>
      </template>
    </el-table-column>
    <el-table-column
      v-if="handleRow.length"
      label="操作"
      :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}吗？`">
              <el-button
                slot="reference"
                @click="handleClick(props, scope.row)"
                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: () => [],
    },
    loading: {
      type: Boolean,
      default: false,
    },
    handleRow: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    computed_list() {
      const object = {};
      this.config
        .filter(({ type }) => type === "edit")
        .forEach(({ props, type }) => {
          object[`${props}_${type}`] = false;
        });
      return this.list.map((element) => ({
        ...element,
        ...object,
      }));
    },
  },
  methods: {
    handleFormat(params,data) {
      let visible = true;
      if (params) {
        visible = false;
        console.log(Object.keys(params));
        Object.keys(params).forEach((element) => {
          if (params[element].includes(data[element])) {
            visible = true;
          }
        });
      }
      return visible;
    },
    handleClick(props, row) {
      this.$emit(props, row);
    },
    handleEdit({ scope, type, props }) {
      scope.row[`${props}_${type}`] = !scope.row[`${props}_${type}`];
      this.$emit(props, scope.row);
    },
  },
};
</script>