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-select style="width:100%" clearable v-model="select.is_top" placeholder="Top">
                  <el-option v-for="(item,index) in [{id: 1,value: 'Yes'}, {id: 0,value: 'No'}]" :key="index"
                    :label="item.value" :value="item.id">
                  </el-option>
                </el-select>
              </div>
              <div>
                <el-select style="width:100%" clearable v-model="select.is_visible" placeholder="Visible">
                  <el-option v-for="(item,index) in [{id: 1,value: 'Yes'}, {id: 0,value: 'No'}]" :key="index"
                    :label="item.value" :value="item.id">
                  </el-option>
                </el-select>
              </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: '',
          is_top:'',
          is_visible: '',
          page: 1,
          page_size: 10,
        },
        appCategoryList: [],
        total: 0,
        list: [],
        table_item: [{
          type: 'index',
          width: 50,
          fixed: 'left'
        }, {
          prop: 'number',
          label: 'Application Id',
          align: 'left',
          width: 360
        }, {
          prop: 'title',
          label: 'Title',
          align: 'left',
        }, {
          prop: 'is_top',
          label: 'Top',
          align: 'center',
          width: 120,
          is_text: true,
          text_prop: 'is_top_text',
          formatter: (cell, data, value) => {
            return value == 1 ? 'Yes' : 'No'
          }
        }, {
          prop: 'is_visible',
          label: 'Visible',
          align: 'center',
          width: 120,
          is_text: true,
          text_prop: 'is_visible_text',
          formatter: (cell, data, value) => {
            return value == 1 ? 'Yes' : 'No'
          }
        }, {
          prop: 'time',
          label: 'Sort Time',
          align: 'center',
          width: 180,
        }]

      }
    },
    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.select.is_visible = ''
        this.select.is_top = ''
        this.getList()
      },
      async getList() {
        const res = await index({
          ...this.select,
          sort_name: 'time',
          sort_type: 'desc',
          filter: [{
            key: 'title',
            op: 'like',
            value: this.select.title
          }, {
            key: 'number',
            op: 'like',
            value: this.select.number
          }, {
            key: 'is_visible',
            op: 'eq',
            value: this.select.is_visible
          }, {
            key: 'is_top',
            op: 'eq',
            value: this.select.is_top
          }]
        })
        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>