sepax-products-web/src/views/application/index.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.title" placeholder="Title"></el-input>
              </div>
              <div>
                <el-input v-model="select.number" placeholder="Application Id"></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="editNote('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="editNote('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>
    <addNotes ref="addNotes" @refresh="getList"></addNotes>
  </div>
</template>

<script>
  import addNotes from './components/addNotes.vue';
  import {
    index,
    destroy
  } from "@/api/application/index.js"
  import {
    index as getCategory
  } from "@/api/application/category.js"
  export default {
    components: {
      addNotes
    },
    data() {
      return {
        select: {
          title: '',
          number:'',
          page: 1,
          page_size: 10,
        },
        appCategoryList:[],
        total: 0,
        list: [],
        table_item: [{
            type: 'index',
            width: 50,
            fixed: 'left'
          }, {
            prop: 'number',
            label: 'Application Id(应用id)',
            align: 'left',
            width:360
          }, {
            prop: 'title',
            label: 'Title(标题)',
            align: 'left',
          }
        ]

      }
    },
    created() {
      this.getCategoryList()
      this.getList()
    },
    methods: {
      editNote(type, id) {
        if (type == 'editor') {
          this.$refs.addNotes.id = id
        }
        this.$refs.addNotes.appCategoryList = this.appCategoryList
        this.$refs.addNotes.type = type
        this.$refs.addNotes.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.select.title = ''
        this.select.number = ''
        this.getList()
      },
      async getList() {
        const res = await index({
          ...this.select,
          filter:[{
            key:'title',
            op:'like',
            value:this.select.title
          },{
            key:'number',
            op:'like',
            value:this.select.number
          }]
        })
        this.list = res.data
        this.total = res.total
      },
      async getCategoryList(){
        const res = await getCategory({page:1,page_size:999})
        this.appCategoryList = res.data

      },
      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>