sepax-products-web/src/views/resource/user_manual.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="Title"></el-input>
              </div>
              <div>
                <el-select clearable style="width:100%" filterable v-model="select.category_ids"
                  placeholder="Product Phase">
                  <el-option v-for="(item,index) in categoryList" :key="index" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </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="editLr('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="editLr('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>
    <addUm ref="addUm" @refresh="getList"></addUm>
  </div>
</template>

<script>
  import addUm from './components/addUm.vue';
  import {
    index,
    destroy
  } from "@/api/system/baseForm.js"
  import {
    index as getCategory
  } from "@/api/product/category.js"
  export default {
    components: {
      addUm
    },
    data() {
      return {
        select: {
          name: '',
          table_name: 'user_manuals',
          category_ids: '',
          is_top:'',
          is_visible:'',
          page: 1,
          page_size: 10,
          sort_name: "is_top",
          sort_type: "DESC",
          sort_name2: "date",
          sort_type2: "DESC",
        },
        categoryList: [],
        total: 0,
        list: [],
        table_item: [{
          type: 'index',
          width: 50,
          fixed: 'left'
        }, {
          prop: 'name',
          label: 'Name',
          align: 'left',
        }, {
          prop: 'is_top',
          label: 'Top',
          align: 'left',
          width: 180,
          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: 'date',
          label: 'Sort Time',
          align: 'left',
          width: 180
        }, {
          prop: 'admin.name',
          label: 'Creator',
          align: 'left',
          width: 180
        }]

      }
    },
    created() {
      this.getList()
      this.getCategoryList()
    },
    methods: {
      async getCategoryList() {
        const res = await getCategory({
          page_size: 999,
          page: 1,
          sort_type: 'ASC',
          sort_name: 'sort',
          type: 2
        })
        this.categoryList = res.data
      },
      editLr(type, id) {
        if (type == 'editor') {
          this.$refs.addUm.id = id
        }
        this.$refs.addUm.categoryList = this.categoryList
        this.$refs.addUm.type = type
        this.$refs.addUm.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.name = ''
        this.select.category_ids = ''
        this.select.is_top=''
        this.select.is_visible=''
        this.getList()
      },
      async getList() {
        const res = await index({
          ...this.select,
          filter: [{
            key: 'name',
            op: 'like',
            value: this.select.name
          }, {
            key: 'category_ids',
            op: 'json_contains',
            value: this.select.category_ids
          }, {
            key: 'is_top',
            op: 'eq',
            value: this.select.is_top
          },  {
            key: 'is_visible',
            op: 'eq',
            value: this.select.is_visible
          }]
        })
        this.list = res.data
        this.total = res.total
      },
      deleteList(id) {
        var that = this;
        destroy({
          table_name: this.select.table_name,
          id: id
        }).then(response => {
          this.$Message.success('Success');
          this.getList()
        }).catch(error => {
          console.log(error)
          reject(error)
        })
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>