sishitongtang-crm/src/views/bigSreen/dataManage.vue

<template>
  <div>
    <div ref="lxHeader">
      <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="大屏数据管理">
        <div slot="content"></div>
        <slot>
          <div>
            <Input v-model="select.type" placeholder="关键字搜索" style="width: 200px; margin-right: 10px"/>
            <Button style="margin-left: 10px" type="primary" @click="total = 0,select.page = 1,getList()">查询</Button>
            <Button style="margin-left: 10px" type="primary" @click="$refs['add'].setType('add'),$refs['add'].show()">新建</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table
      :total="total"
      :list="list"
      :span-method="objectSpanMethod"
      :table-item="table"
      @editor="editor"
      @delete="destroy"
      @pageSizeChange="e => select.page_size = e"
      @pageIndexChange="e => { select.page = e;getList(); }"></xy-table>

    <add ref="add" @refresh="getList"></add>
  </div>
</template>

<script>
import { getList, destroy } from "@/api/bigScreen"
import add from "./component/addDataManage.vue"
import { mergeTableRow } from "@/utils/mergeTableRow";
export default {
  components: {
    add
  },
  data() {
    return {
      select:{
        page:1,
        page_size:10,
        type:''
      },

      total:0,
      list:[],
      table:[
        {
          prop:'type',
          label:'名称',
          minWidth: 200,
          align:'left'
        },
        {
          prop: 'key',
          label: '标识',
          width: 160
        },
        {
          prop: 'value',
          label: '值',
          minWidth: 240,
          showOverflowTooltip: true
        },
        {
          prop: 'sort',
          label: '排序',
          width: 140
        }
      ]
    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const span = column["property"] + "-span";
      if (row[span]) {
        return row[span];
      }
    },
    async getList(){
      const res = await getList(this.select);
      this.list = mergeTableRow({
        data: res.data,
        mergeColNames: ["type"], // 需要合并的列，默认合并列相同的数据
        firstMergeColNames: ["type"], // 受影响的列，只合并以firstMerge为首的同类型数据
        firstMerge: "type", // 以哪列为基础进行合并，一般为第一列
      });
      this.total = res.total;
      console.log(this.list)
    },

    editor(row){
      this.$refs['add'].setId(row.id);
      this.$refs['add'].setType('editor');
      this.$refs['add'].show();
    },
    destroy(row){
      destroy(row.id).then(res => {
        this.$successMessage('destroy','')
        this.getList()
      })
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped lang="scss">
</style>