sepax-products-web/src/views/parameter/recommend.vue

<template>
  <div>

    <div>
      <div ref="lxHeader">
        <lx-header icon="md-apps" :text="$route.meta.title" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
          <div slot="content">
            <div class="searchwrap" style="display: flex;align-items: center;">
              <div>
                <el-input v-model="select.name" placeholder="Name"></el-input>
              </div>
              <div>
                <el-button type="primary" size="small" @click="select.page=1,getList()">search</el-button>
              </div>
              <div>
                <el-button type="primary" size="small" @click="resetSearch">reset</el-button>
              </div>
              <div>
                <el-button type="primary" size="small" @click="editParameter('add')">add</el-button>
              </div>
            </div>
          </div>

        </lx-header>
      </div>
    </div>
    <xy-table :list="list" :total="total" @pageIndexChange="pageIndexChange"
      @pageSizeChange="pageSizeChange" :table-item="table_item">
      <template v-slot:btns>
        <el-table-column align='center' fixed="right" label="Operate" width="180" header-align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="editParameter('editor',scope.row.id)">edit</el-button>
            <el-popconfirm confirm-button-text="confirm" cancel-button-text="cancel" style="margin:0 10px" @confirm="deleteList(scope.row.id)" title="Are you sure to delete it?">
              <el-button type="danger" size="small" slot="reference">delete</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </template>
    </xy-table>
    <add-recommend ref="addRecommend" @refresh="getList"></add-recommend>
  </div>
</template>

<script>
  import addRecommend from './components/addRecommend.vue';
  import {
    index,
    destroy
  } from "@/api/recommend/index.js";
  export default {
    components: {
      addRecommend
    },
    data() {
      return {
        select: {
          name: '',
          page: 1,
          page_size: 10,
          sort_name:'sort',
          sort_type:'ASC',
        },
        total: 0,
        list: [],
        table_item: [{
            type: 'index',
            width: 50,
            fixed: 'left'
          }, {
            prop: 'name',
            label: 'Name',
            align: 'left',
          },
          {
            prop: 'sort',
            label: 'Sort',
            align: 'left',
            width: 120
          }
        ]

      }
    },
    created() {
      this.getList()
    },
    methods: {
      editParameter(type, id) {
        if (type == 'editor') {
          this.$refs.addRecommend.id = id
        }
        this.$refs.addRecommend.type = type
        this.$refs.addRecommend.isShow = true
      },
      pageIndexChange(e) {
        this.select.page = e
        this.getList()
      },
      pageSizeChange(e) {
        this.select.page_size = e
        this.select.page = 1
        this.getList()
      },
      resetSearch() {
        this.select.page = 1
        this.getList()
      },
      async getList() {
        const res = await index({
          ...this.select,
          filter:[{
            key:'name',
            op:'like',
            value:this.select.name
          }]
          })
        this.list = res.data
        this.total = res.total
      },
      deleteList(id) {
        var that = this;
        destroy({
          id:id
        }).then(response => {
          this.$Message.success('Success');
          this.getList()
        }).catch(error => {
          console.log(error)
          reject(error)
        })
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>