LuCodeAdminMix/vite/src/pages/settings/router.vue

<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2022年12月26日 15:06:55
 */
import {
  AuthUpdateAction,
  AuthCreateAction,
  AuthDeleteAction,
  AuthListAction,
  $response
} from '~/api'
import {computed, h} from "vue";
import {NTag} from "naive-ui";
import Icon from '~/components/Icon.vue';
import icons_json from '@icon-park/vue-next/icons.json';

onMounted(() => {
  AuthList()
})
const icons_search = ref('')
const icons_list = computed(() => {
  let list = []
  let search = icons_search.value
  if (!!search) {
    for (let i = 0; i < icons_json.length; i++) {
      let push = false
      if (icons_json[i].title.toLowerCase().indexOf(search.toLowerCase()) !== -1) push = true
      if (icons_json[i].name.toLowerCase().indexOf(search.toLowerCase()) !== -1) push = true
      if (icons_json[i].category.toLowerCase().indexOf(search.toLowerCase()) !== -1) push = true
      if (icons_json[i].categoryCN.toLowerCase().indexOf(search.toLowerCase()) !== -1) push = true
      for (let ii = 0; ii < icons_json[i].tag.length; ii++) {
        if (icons_json[i].tag[ii].toLowerCase().indexOf(search.toLowerCase()) !== -1) push = true
      }
      if (push) list.push(icons_json[i])
    }
  } else {
    list = icons_json
  }
  let list_turn = {}
  for (let i = 0; i < list.length; i++) {
    if (!(list[i]['category'] in list_turn)) {
      list_turn[list[i]['category']] = {
        name: list[i]['category'],
        nameCN: list[i]['categoryCN'],
        children: []
      }
    }
    list_turn[list[i]['category']]['children'].push({
      title: list[i]['title'],
      name: list[i]['name'],
    })
  }
  let ret = []
  for (let i in list_turn) {
    ret.push(list_turn[i])
  }
  return ret
})
const auth_active = ref([])
const auth_list = ref([])
const AuthList = async () => {
  auth_list.value = []
  const response = await AuthListAction()
  $response(response, () => {
    auth_list.value = response.data.list
  })
}
const auth_columns = [{
  type: 'selection',
  multiple: false,
}, {
  title: '名称',
  key: 'title',
  render(row) {
    return h(
      'span',
      {},
      {
        default: () => `#${row.id} ${row.title}`
      }
    )
  }
}, {
  title: '路由',
  key: 'name'
}, {
  title: '排序',
  key: 'order'
}, {
  title: '图标',
  key: 'icon',
  render(row) {
    return row.icon ? h(Icon, {
      size: 20,
      type: row.icon
    }, {default: () => row.icon}) : ''
  }
}, {
  title: '权限级别',
  key: 'status',
  render(row) {
    return h(
      NTag,
      {
        type: row.check_type === 1 ? 'success' : row.check_type === 2 ? 'warning' : 'error'
      },
      {
        default: () => `${row.check_type}级`
      }
    )
  }
}, {
  title: '状态',
  key: 'status',
  render(row) {
    return h(
      NTag,
      {
        type: row.status === 1 ? 'success' : 'error'
      },
      {
        default: () => {
          return row.status === 1 ? '可用' : '停用'
        }
      }
    )
  }
}, {
  title: '显示',
  key: 'show',
  render(row) {
    return h(
      NTag,
      {
        type: row.show === 1 ? 'success' : 'error'
      },
      {
        default: () => {
          return row.show === 1 ? '显示' : '隐藏'
        }
      }
    )
  }
}]
const delete_show = ref(false)
const deleteShowClick = () => {
  if (auth_active.value.length <= 0) return window.$message().error('请选择一个路由')
  delete_show.value = true
}
const AuthDelete = async () => {
  const response = await AuthDeleteAction(auth_active.value[0])
  $response(response, () => {
    window.$message().success(response.message)
    delete_show.value = false
    auth_active.value = []
    AuthList()
  })
}
const create_show = ref(false)
const create_data_default = {
  name: '',
  title: '',
  icon: '',
  pid: 0,
  check_type: 1,
  show: 1,
  status: 1,
  order: 0,
}
const create_data = ref(JSON.parse(JSON.stringify(create_data_default)))
const AuthCreate = async () => {
  const response = await AuthCreateAction(create_data.value)
  $response(response, () => {
    window.$message().success(response.message)
    create_show.value = false
    create_data.value = JSON.parse(JSON.stringify(create_data_default))
    AuthList()
  })
}
const createShowClick = () => {
  create_data.value = JSON.parse(JSON.stringify(create_data_default))
  create_show.value = true
}
const icons_active = ref(false)
const update_show = ref(false)
const update_data_default = {
  id: 0,
  name: '',
  title: '',
  icon: '',
  pid: 0,
  check_type: 1,
  show: 1,
  status: 1,
  order: 0,
}
const update_data = ref(JSON.parse(JSON.stringify(update_data_default)))
const iconChooseClick = (icon) => {
  if (update_show.value) {
    update_data.value.icon = ''
    setTimeout(() => {
      update_data.value.icon = icon
    })
  } else {
    create_data.value.icon = ''
    setTimeout(() => {
      create_data.value.icon = icon
    })
  }
  icons_active.value = false
}
const AuthUpdate = async () => {
  const response = await AuthUpdateAction(update_data.value)
  $response(response, () => {
    window.$message().success(response.message)
    update_show.value = false
    update_data.value = JSON.parse(JSON.stringify(update_data_default))
    AuthList()
  })
}
const updateShowClick = () => {
  if (auth_active.value.length !== 1) return window.$message().error('请选择一个路由')
  update_data.value = JSON.parse(JSON.stringify(update_data_default))
  for (let i = 0; i < auth_list.value.length; i++) {
    if (auth_active.value[0] === auth_list.value[i].id) {
      update_data.value = {
        id: auth_list.value[i].id,
        name: auth_list.value[i].name,
        title: auth_list.value[i].title,
        icon: auth_list.value[i].icon,
        pid: auth_list.value[i].pid,
        check_type: auth_list.value[i].check_type,
        show: auth_list.value[i].show,
        status: auth_list.value[i].status,
        order: auth_list.value[i].order,
      }
      update_show.value = true
      return
    }
    for (let ii = 0; ii < auth_list.value[i].children.length; ii++) {
      if (auth_active.value[0] === auth_list.value[i].children[ii].id) {
        update_data.value = {
          id: auth_list.value[i].children[ii].id,
          name: auth_list.value[i].children[ii].name,
          title: auth_list.value[i].children[ii].title,
          icon: auth_list.value[i].children[ii].icon,
          pid: auth_list.value[i].children[ii].pid,
          check_type: auth_list.value[i].children[ii].check_type,
          show: auth_list.value[i].children[ii].show,
          status: auth_list.value[i].children[ii].status,
          order: auth_list.value[i].children[ii].order,
        }
        update_show.value = true
        return
      }
    }
  }
}
</script>
<template>
  <div>
    <n-modal v-model:show="delete_show" preset="card" :style="{width: '400px'}" title="删除确认" :auto-focus="false"
             :bordered="false">
      <div>
        <n-alert title="删除可能会引发严重BUG！" type="error">
          <template #icon>
            <n-icon>
              <Icon type="alarm"></Icon>
            </n-icon>
          </template>
        </n-alert>
        <n-alert mt-2 title="删除可能会引发严重BUG！" type="error">
          <template #icon>
            <n-icon>
              <Icon type="alarm"></Icon>
            </n-icon>
          </template>
        </n-alert>
        <n-alert mt-2 title="删除可能会引发严重BUG！" type="error">
          <template #icon>
            <n-icon>
              <Icon type="alarm"></Icon>
            </n-icon>
          </template>
        </n-alert>
        <n-space mt-2 justify="center">
          <n-button @click="AuthDelete()" type="info">确定</n-button>
          <n-button @click="delete_show = false">取消</n-button>
        </n-space>
      </div>
    </n-modal>
    <n-drawer v-model:show="icons_active" :width="500" placement="right">
      <n-drawer-content title="选择图标">
        <div>
          <n-space align="center">
            <n-tag>
              <div class="form_tag_wrapper">搜索</div>
            </n-tag>
            <n-input class="form_input_wrapper" v-model:value="icons_search"></n-input>
            <n-button type="info" @click="iconChooseClick('')">清除图标</n-button>
          </n-space>
        </div>
        <n-collapse mt-5>
          <n-collapse-item v-for="(i,k) in icons_list" :key="k" :title="i.nameCN" :name="i.name">
            <n-grid x-gap="12" :cols="10">
              <n-gi v-for="(ii,kk) in i.children" :key="kk">
                <div text-center mt-2>
                  <n-tooltip trigger="hover">
                    <template #trigger>
                      <n-button @click="iconChooseClick(ii.name)" quaternary circle size="large">
                        <template #icon>
                          <n-icon>
                            <Icon :type="ii.name"></Icon>
                          </n-icon>
                        </template>
                      </n-button>
                    </template>
                    {{ ii.title }}
                  </n-tooltip>
                </div>
              </n-gi>
            </n-grid>
          </n-collapse-item>
        </n-collapse>
      </n-drawer-content>
    </n-drawer>
    <n-modal v-model:show="create_show" preset="card" :style="{width: '500px'}" title="新建" :auto-focus="false"
             :bordered="false">
      <div>
        <n-space align="center">
          <n-tag>
            <div class="form_tag_wrapper">名称</div>
          </n-tag>
          <n-input class="form_input_wrapper" v-model:value="create_data.title"></n-input>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">路由</div>
          </n-tag>
          <n-input class="form_input_wrapper" v-model:value="create_data.name"></n-input>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">分组</div>
          </n-tag>
          <n-select class="form_input_wrapper" v-model:value="create_data.pid" :options="[
            {value:0,label:'根分组'},
            ...auth_list.map((item)=>{return {value:item.id,label:item.title}})
          ]"/>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">排序</div>
          </n-tag>
          <n-input-number class="form_input_wrapper" v-model:value="create_data.order" :min="0"
                          :max="999"></n-input-number>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">图标</div>
          </n-tag>
          <n-button v-if="!!create_data.icon" @click="icons_active = true" quaternary circle size="large">
            <template #icon>
              <n-icon>
                <Icon :type="create_data.icon"></Icon>
              </n-icon>
            </template>
          </n-button>
          <n-button @click="icons_active = true" type="info" size="small">选择图标</n-button>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">权限级别</div>
          </n-tag>
          <n-radio-group v-model:value="create_data.check_type" name="status_radio">
            <n-space>
              <n-radio :value="1">1级</n-radio>
              <n-radio :value="2">2级</n-radio>
              <n-radio :value="3">3级</n-radio>
            </n-space>
          </n-radio-group>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">显示</div>
          </n-tag>
          <n-radio-group v-model:value="create_data.show" name="show_radio">
            <n-space>
              <n-radio :value="1">显示</n-radio>
              <n-radio :value="2">隐藏</n-radio>
            </n-space>
          </n-radio-group>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">状态</div>
          </n-tag>
          <n-radio-group v-model:value="create_data.status" name="status_radio">
            <n-space>
              <n-radio :value="1">可用</n-radio>
              <n-radio :value="2">停用</n-radio>
            </n-space>
          </n-radio-group>
        </n-space>
        <n-button @click="AuthCreate()" type="info" mt-2>确定</n-button>
      </div>
    </n-modal>
    <n-modal v-model:show="update_show" preset="card" :style="{width: '500px'}" title="修改" :auto-focus="false"
             :bordered="false">
      <div>
        <n-space align="center">
          <n-tag>
            <div class="form_tag_wrapper">名称</div>
          </n-tag>
          <n-input class="form_input_wrapper" v-model:value="update_data.title"></n-input>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">路由</div>
          </n-tag>
          <n-input class="form_input_wrapper" v-model:value="update_data.name"></n-input>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">分组</div>
          </n-tag>
          <n-select class="form_input_wrapper" v-model:value="update_data.pid" :options="[
            {value:0,label:'根分组'},
            ...auth_list.map((item)=>{return {value:item.id,label:item.title}})
          ]"/>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">排序</div>
          </n-tag>
          <n-input-number class="form_input_wrapper" v-model:value="update_data.order" :min="0"
                          :max="999"></n-input-number>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">图标</div>
          </n-tag>
          <n-button v-if="!!update_data.icon" @click="icons_active = true" quaternary circle size="large">
            <template #icon>
              <n-icon>
                <Icon :type="update_data.icon"></Icon>
              </n-icon>
            </template>
          </n-button>
          <n-button @click="icons_active = true" type="info" size="small">选择图标</n-button>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">权限级别</div>
          </n-tag>
          <n-radio-group v-model:value="update_data.check_type" name="status_radio">
            <n-space>
              <n-radio :value="1">1级</n-radio>
              <n-radio :value="2">2级</n-radio>
              <n-radio :value="3">3级</n-radio>
            </n-space>
          </n-radio-group>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">显示</div>
          </n-tag>
          <n-radio-group v-model:value="update_data.show" name="show_radio">
            <n-space>
              <n-radio :value="1">显示</n-radio>
              <n-radio :value="2">隐藏</n-radio>
            </n-space>
          </n-radio-group>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">状态</div>
          </n-tag>
          <n-radio-group v-model:value="update_data.status" name="status_radio">
            <n-space>
              <n-radio :value="1">可用</n-radio>
              <n-radio :value="2">停用</n-radio>
            </n-space>
          </n-radio-group>
        </n-space>
        <n-button @click="AuthUpdate()" type="info" mt-2>确定</n-button>
      </div>
    </n-modal>
    <n-card title="路由配置">
      <div>
        <n-space>
          <n-button @click="createShowClick()" type="success">新建</n-button>
          <n-button @click="deleteShowClick()" type="error">删除</n-button>
          <n-button @click="updateShowClick()" type="info">修改</n-button>
        </n-space>
        <n-alert mt-2 title="在修改和删除前，请确保您已经充分理解该路由的含义及用法，盲目修改或删除可能会引发严重BUG！"
                 type="error">
          <template #icon>
            <n-icon>
              <Icon type="alarm"></Icon>
            </n-icon>
          </template>
        </n-alert>
        <n-data-table mt-2 v-model:checked-row-keys="auth_active" v-if="auth_list.length > 0" :default-expand-all="true"
                      :columns="auth_columns"
                      :row-key="row=>row.id" :data="auth_list"/>
      </div>
    </n-card>
  </div>
</template>
<style scoped>

</style>
<route>
{"meta":{"title":"路由配置"}}
</route>