ostandari/pages/admin/pages/index.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton v-if="!$auth.user.specialPermissions.length" size="sm" color="success" :to="{name: 'admin-pages-details',params:{details: 'new'}}" class="mr-auto">
        افزودن
      </CButton>
    </CustomSubHeader>

    <CCard>
      <CCardHeader>
        <slot name="header">
          <i class="fal fa-filter"></i>
          <span style="color:#000">فیلتر</span>
        </slot>
      </CCardHeader>
      <CCardBody>
        <CRow>
          <CCol class="col">
            <CRow>
              <el-input
                  v-model="search"
                  size="medium"
                  placeholder="جستجو"/>
            </CRow>
          </CCol>
        </CRow>
      </CCardBody>
    </CCard>


    <CCard>
      <CCardHeader>
        <slot name="header">
          <i class="fal fa-bars"></i>
          <span>{{ list_title }}</span>
        </slot>
        <slot>

        </slot>
      </CCardHeader>
      <CCardBody>
        <el-tree
            :data="filteredPages"
            :props="defaultProps"
            class="filter-tree"
            :filter-node-method="filterNode"
            ref="tree"
            @node-click="handleNodeClick"
        >

        <span class="custom-tree-node" slot-scope="{ node }">
          <span style="flex: content;">{{ node.label }}</span>
          <el-tag class="flagType" style="width: 80px;text-align: center;">{{
              node.data.modelType === 'ostandari' ? 'استانداری' : 'ستاد انتخابات'
            }}</el-tag>
          <span style="margin-left: 10px;" class="btns">
            <el-button
                v-if="!$auth.user.specialPermissions.length"
                type="text"
                icon="el-icon-plus"
                style="color : lightseagreen"
                size="medium"
                @click="() => append(node)">
              </el-button>
            <el-button
                type="text"
                icon="el-icon-edit-outline"
                style="color : orange"
                size="medium"
                @click="() => goUpdate(node)">
              </el-button>
            <el-button
                v-if="!$auth.user.specialPermissions.length"
                type="text"
                icon="el-icon-delete"
                style="color : red"
                size="medium"
                @click="() => deletePage(node.data._id)">
            </el-button>
          </span>
        </span>
        </el-tree>
      </CCardBody>
    </CCard>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'لیست صفحات',
      list_title: 'لیست',
      pages: null,
      search: '',
      defaultProps: {
        children: 'childs',
        label: 'title'
      }
    }
  },
  computed: {
    filteredPages() {
      if (this.$auth.user.permissions.includes('superAdmin')) return this.pages
      else return this.pages.map(item => {
        return {
          ...item,
          childs: []
        }
      })
    }
  },
  watch: {
    search(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    },
    append(data) {
      this.$router.push({
        name: "admin-pages-details",
        params: {details: 'new'},
        query: {parent: data.data._id, type: data.data.modelType}
      });
    },
    goUpdate(data) {
      this.$router.push({name: "admin-pages-details", params: {details: data.data._id}});
    },
    handleNodeClick(data) {
      // console.log(data);
    },
    deletePage(id) {
      this.$confirm('صفحه حذف شود؟', 'هشدار', {
        confirmButtonText: 'بله',
        cancelButtonText: 'لغو',
        type: 'warning'
      }).then(async () => {
        this.$axios.delete(`/api/admin/category/${id}`)
            .then(res => {
              this.$message({
                type: 'success',
                message: 'صفحه با موفقیت حذف شد'
              })
              this.pages = this.pages.filter(item => item._id !== id)
              this.$nuxt.refresh();
            })
            .catch(err => {
              if (err.response.status === 401) {
                return this.$message({
                  type: 'error',
                  message: 'لطفا دوباره وارد سیستم شوید.'
                })
              }
              if (err.response.status === 403) {
                return this.$message({
                  type: 'error',
                  message: err.response.data.message
                })
              }
              if (err.response.status === 422) {
                return this.$message({
                  type: 'error',
                  message: err.response.data.message
                })
              }
              console.log(err.response.data)
            })
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: 'عملیات لغو شد'
        })
      })
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  layout: 'admin',
  async asyncData({$axios, error}) {
    try {
      const category = await $axios.get(`/api/admin/category`);
      return {
        pages: category.data
      }
    } catch (e) {
      if (e?.response?.status === 401) {
        error({status: 401, message: 'شما اجازه دسترسی به این صفحه را ندارید'})
      } else {
        error({status: 500, message: 'there is a problem here'})
      }
    }
  }
}
</script>