dvcp_v2_webapp/packages/bigscreen/designer/components/tableEditor.vue

<script>
import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
import Template from "../../../../project/sass/apps/AppAskForm/components/Template.vue";

export default {
  name: "tableEditor",
  components: {Template, AiDialogBtn},
  model: {
    event: "input",
    prop: "tableData"
  },
  props: {
    label: String,
    tableData: {default: () => []},
    configs: {default: () => []}
  },
  data() {
    return {
      records: [],
      form: {}
    }
  },
  computed: {
    option() {
      return {
        size: 'mini',
        filterDic: true,
        cellBtn: true,
        menuWidth: 120,
        addBtn: false,
        columnBtn: false,
        refreshBtn: false,
        border: true,
        delBtnText: " ",
        editBtnText: " ",
        saveBtnText: " ",
        saveBtnIcon: "el-icon-check",
        cancelBtnText: " ",
        cancelBtnIcon: "el-icon-close",
        column: this.configs.map(e => {
          const item = this.$copy(e)
          delete item.$index
          delete item.$cellEdit
          return {...item, cell: true}
        })
      }
    },
    columns:v=>v.configs
  },
  methods: {
    rowSave(form, done) {
      this.$emit("input", this.records)
      this.$emit("data", this.getFormatData())
      done()
    },
    rowDel(form, index) {
      this.$confirm("是否要删除该行?").then(() => {
        this.records.splice(index, 1)
        this.$emit("data", this.getFormatData())
      }).catch(() => 0)
    },
    getFormatData() {
      return this.configs.map((c, i) => {
        const item = {name: c.label}
        this.records.map((row, j) => item[`v${j || ""}`] = row[`c${i || ""}`])
        return item
      })
    },
    addColumn() {
      return this.$refs.addColumn.validate().then(() => {
        const cols = this.$copy(this.configs)
        const prop = `c${cols.length}`
        cols.push({label: this.form.label, prop})
        return this.$emit("update:configs", cols)
      })
    }
  },
  created() {
    this.records = this.tableData.map(e => ({$cellEdit: true, ...e}))
  }
}
</script>

<template>
  <section class="tableEditor">
    <avue-crud :option="option" :data="records" @row-save="rowSave" @row-cancel="rowSave" @row-del="rowDel">
      <template v-for="c in columns" :slot="`${c.prop}Header`" slot-scope="{column = {}}">
        <el-input class="headerInput" v-model="column.label" clearable placeholder="请输入列名" @change="$emit('update:configs', columns)"/>
      </template>
      <template v-if="label" v-slot:menuLeft>
        <div class="label" v-text="label"/>
      </template>
      <template v-slot:menuRight>
        <div class="flex">
          <ai-dialog-btn dialogTitle="增加列" appendToBody :submit="addColumn" @closed="form={}" width="400px">
            <div slot="btn" class="el-icon-plus pointer">增加列</div>
            <el-form ref="addColumn" :model="form" size="small" labelWidth="60px">
              <el-form-item label="列名" :rule="{required:true, message:'请输入列名'}">
                <el-input v-model="form.label" clearable placeholder="请输入列名"/>
              </el-form-item>
            </el-form>
          </ai-dialog-btn>
          <div class="el-icon-plus pointer mar-l8" @click="records.push({$cellEdit: true})">增加数据</div>
        </div>
      </template>
    </avue-crud>
  </section>
</template>
<style scoped lang="scss">
.tableEditor {
  width: 100%;
  height: auto;
  margin-bottom: 10px;

  :deep(.avue-crud__body) {
    background-color: transparent;

    .avue-crud__header, .el-table, tr {
      background-color: transparent;
    }

    .avue-crud__header {
      min-height: unset;
    }

    .el-table__cell {
      color: white;
      background-color: #1D2127;

      input:disabled {
        background-color: transparent;
        border-color: transparent;
        color: white;
        padding: 0;
      }

      &:last-of-type {
        border-left: 1px solid #fff;
      }
    }

    .label {
      width: 60px;
      color: #FFFFFF;
      font-size: 12px;
      text-align: right;
    }

    .el-icon-plus {
      font-size: 12px;
      color: $primaryColor;
      line-height: 18px;

      &:before {
        margin-right: 4px;
      }
    }
  }

  &:last-of-type {
    margin-bottom: 0;
  }

  :deep(.headerInput) {
    .el-input__inner {
      padding: 0;
      border: none;
      background: transparent;
    }
  }
}
</style>