supply-front/src/components/SalesTable/SalesTable.vue

<template>
  <div class="sales">
    <h5>销售订单明细</h5>
    <slot name="bts">
      <div>
        <el-button type="primary" size="mini">添加</el-button>
        <el-button type="danger" size="mini">删除</el-button>
      </div>
    </slot>
    <div class="table">
      <el-table
        :data="dataList"
        style="width: 100%"
        v-bind="tableAttributes"
      >
        <el-table-column
          v-if="isSelection"
          type="selection"
          width="55"
        >
        </el-table-column>
        <el-table-column
          v-if="isIndex"
          type="index"
          width="50"
        >
        </el-table-column>
        <el-table-column
          v-for="(item,index) in column"
          :key="index"
          v-bind="{...item,...columnAttributes}"
        >
          <template v-slot="{row}">
            <template v-if="item.isInput">
              {{ row.prop }}
            </template>
            <template v-else>
              <el-input
                v-model.number="row.prop"
                class="yinput"
                :type="item.type?item.type:'number'"
                :placeholder="item.placeholder"
                size="mini"
                @mousewheel.native.prevent
              />
            </template>
          </template>
        </el-table-column>
        <el-table-column v-if="isOperation" fixed="left" label="操作" min-width="250" align="center">
          <slot>
            <template v-slot="{row}">
              <el-popconfirm
                style="margin-left: 10px"
                title="删除？"
                @onConfirm="handleDel(row)"
              >
                <el-button slot="reference" type="text" size="mini">提审</el-button>
              </el-popconfirm>
            </template>
          </slot>
        </el-table-column>
      </el-table>
    </div>
    <slot />
    <div>
      <h5>物流信息</h5>
      <div class="diy-table-1">
        <el-row>
          <el-col :span="6" class="item">
            <div class="label">销售政策编号</div>
            <div class="value">2222</div>
          </el-col>
          <el-col :span="6" class="item">
            <div class="label">销售政策编号</div>
            <div class="value">2222</div>
          </el-col>
          <el-col :span="6" class="item">
            <div class="label">销售政策编号</div>
            <div class="value">2222</div>
          </el-col>
          <el-col :span="6" class="item">
            <div class="label">销售政策编号</div>
            <div class="value">2222</div>
          </el-col>
          <el-col :span="6" class="item">
            <div class="label">销售政策编号</div>
            <div class="value">2222</div>
          </el-col>
        </el-row>
      </div>
      <el-timeline :reverse="reverse">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.timestamp"
          :color="activity.color"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </div>
    <slot name="events">
      <div>
        <el-button type="primary" size="mini">保存</el-button>
        <el-button size="mini">重置</el-button>
      </div>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'SalesTable',
  props: {
    isSelection: {
      type: Boolean,
      default: false
    },
    isIndex: {
      type: Boolean,
      default: false
    },
    isOperation: {
      type: Boolean,
      default: false
    },
    tableAttributes: {
      type: Object,
      default: () => {
        return {}
      }
    },
    columnAttributes: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dataList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      column: [
        {
          prop: 'date',
          label: '日期'
        },
        {
          prop: 'date',
          label: '日期'

        },
        {
          prop: 'date',
          label: '日期'

        }
      ],
      activities: [{
        content: '活动按期开始',
        color: '#0bbd87',
        timestamp: '2018-04-15'
      }, {
        content: '通过审核',
        timestamp: '2018-04-13'
      }, {
        content: '创建成功',
        timestamp: '2018-04-11'
      }]
    }
  },
  methods: {
    handleDel(row) {
      console.log(row)
    }
  }
}
</script>

<style lang="scss" scoped>
.sales {
  margin: 20px;
  padding: 20px;
  box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
}

.diy-table-1 {
  margin: 20px 0;
}
</style>