Web/admin.ui.plus-master/src/views/example/application/applicationManage/index.vue

<template>
  <div class="my-layout">
    <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
      <el-form :inline="true" @submit.stop.prevent>
        <el-form-item label="应用名称">
          <el-input v-model="state.filter.name" placeholder="请输入应用名称" @keyup.enter="onQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="my-fill mt8" shadow="never">
      <el-row>
        <el-col :span="6">
          <div class="flex app appDdd" @click="onAdd">
            <div class="flex appDdd" style="width: 100px;height: 100px;background-color: #EFEFEF;border-radius: 50%;font-size: 20px;">+</div>
          </div>
        </el-col>
        <el-col :span="6" v-for="(v, k) in state.applyData" :key="k">
          <div class="flex app">
            <div style="display: flex;justify-content: space-between;align-items: flex-start;align-self: flex-end;">
              <div class="flex delete" @click="onDelete(v)">X</div>
            </div>
            <div class="flex" style="flex: 1;">{{ v.name }}</div>
            <div class="flex" style="flex: 1;">最小可用版本：{{ v.minVersion }}</div>
            <div class="flex" style="height: 75px;width: 100%;">
              <el-row style="width: 100%">
                <el-col :span="8"><el-button style="width: 100%;height: 38px;border-radius: 0" type="primary" @click="toPermissPage(v)">权限</el-button></el-col>
                <el-col :span="8"><el-button style="width: 98%;height: 38px;border-radius: 0;" type="primary" @click="toRolePage(v)">角色</el-button></el-col>
                <el-col :span="8"><el-button style="width: 100%;height: 38px;border-radius: 0;" type="primary" @click="toViewPage(v)">视图</el-button></el-col>
                <el-col :span="8"><el-button style="width: 100%;height: 38px;border-radius: 0;margin-top: 1%;" type="primary" @click="toEquipmentPage(v)">设备管理</el-button></el-col>
                <el-col :span="8"><el-button style="width: 98%;height: 38px;border-radius: 0;margin-top: 1%;" type="primary" @click="onEdit(v)">修改</el-button></el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <org-form ref="orgFormRef" :title="state.orgFormTitle" :org-tree-data="state.orgTreeData"></org-form>
  </div>
</template>

<script lang="ts" setup name="admin/org">
import { ref, reactive, onMounted, getCurrentInstance, onBeforeMount, defineAsyncComponent } from 'vue'
import { OauthApply,OauthApplyDto } from '/@/api/admin/data-contracts'
import { PermissionApi } from '/@/api/admin/Permission'
import router from "/@/router";
import eventBus from '/@/utils/mitt'
import { auth } from '/@/utils/authFunction'

// 引入组件
const OrgForm = defineAsyncComponent(() => import('./components/org-form.vue'))

const { proxy } = getCurrentInstance() as any

const orgFormRef = ref()

const state = reactive({
  loading: false,
  orgFormTitle: '',
  filter: {
    name: '',
  }as OauthApplyDto,
  applyData: [] as Array<OauthApply>,
})

onMounted(() => {
  onQuery()
  eventBus.off('refreshOrg')
  eventBus.on('refreshOrg', () => {
    onQuery()
  })
})

onBeforeMount(() => {
  eventBus.off('refreshOrg')
})

const onQuery = async () => {
  state.loading = true
  const res = await new PermissionApi().getApplyInfo(state.filter).catch(() => {
    state.loading = false
  })
  state.applyData=res.data
  state.loading=false
}

const onAdd = () => {
  state.orgFormTitle = '新增应用'
  orgFormRef.value.open()
}

const onEdit = (row: OauthApply) => {
  state.orgFormTitle = '编辑应用'
  orgFormRef.value.open(row)
}

const onDelete = (row: OauthApply) => {
  proxy.$modal
    .confirmDelete(`确定要删除应用【${row.name}】?`)
    .then(async () => {
      await new PermissionApi().applyDelete({ id: row.id }, { loading: true })
      onQuery()
    })
    .catch(() => {})
}
const toRolePage = (row: OauthApply) => {
  router.push({path:`/application/roleManage/${row.name}`})
}
const toViewPage = (row: OauthApply) => {
  router.push({path:`/application/viewManage/${row.name}`})
}
const toPermissPage = (row: OauthApply) => {
  router.push({path:`/application/permissionManage/${row.name}`})
}
const toEquipmentPage = (row: OauthApply) => {
  router.push({path:`/application/equipment/${row.name}`})
}
</script>

<style scoped lang="scss">
.flex{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.app{
  margin-left: 10px;
  margin-bottom: 10px;
  height: 175px;
  border: #7728F5 solid 2px;
}
.appDdd{
  border: #7728F5 dashed 1px;
  cursor: default;
}
.delete{
  width: 25px;
  height: 25px;
  border: #BBBBBB solid 2px;
  border-radius: 50%;
  color: #BBBBBB;
  font-size: 25px;
  cursor: default;
}
</style>