SZYGM1.0/src/views/permissionItem/components/home.vue

<template>
  <div class="permission scroll-y">
    <div class="permission-head rowSS">
      <div class="manageTitle">权限项管理</div>
      <div class="status0"><span class="icon"></span>交互权限</div>
      <div class="status1"><span class="icon"></span>API接口</div>
      <div class="status2"><span class="icon"></span>数据读写</div>
    </div>
    <div class="permission-content rowSS">
      <div class="permission-content-tree box">
        <div class="manageTitle">权限树</div>
        <div class="contentTree">
          <el-tree :data="data" :props="defaultProps" node-key="auth_id" highlight-current :default-expanded-keys="currentKey" :expand-on-click-node="false" @node-click="handleNodeClick" />
        </div>
      </div>
      <div class="permission-content-card box">
        <div class="grid-contentBottom">
          <div class="capTitle rowBS">
            <div class="manageTitle">下级权限</div>
            <div class="btn-create">
              <el-button size="default" plain class="btn-white" @click="addAuth">新增</el-button>
            </div>
          </div>
          <div class="content">
            <template v-if="childrenData.length">
              <el-row :gutter="24">
                <el-col v-for="data in childrenData" :key="data.auth_id" :span="6">
                  <div class="account-left-content-teams">
                    <div class="team">
                      <div class="bg" :class="data.auth_type == 1 ? 'status0' : data.auth_type == 2 ? 'status1' : 'status2'"></div>
                      <div class="list" :class="data.QueryTarget == 1 ? 'activeStatus' : ''">
                        <div class="rowBS info">
                          <div :title="data.auth_name" class="name">
                            {{ data.auth_name }}
                          </div>
                          <div v-if="data.auth_type > 0" class="icon">
                            <el-tooltip effect="dark" :content="`修改${data.auth_name}`" placement="bottom">
                              <span class="cap cap-edit" @click="renderEdit(data)"></span>
                            </el-tooltip>
                          </div>
                        </div>
                        <div v-if="data.auth_type > 0" class="rowBS details">
                          <div class="details-msg">
                            状态：<span :class="data.auth_status ? 'success' : 'error'">{{ data.auth_status ? "启用" : "禁用" }}</span>
                          </div>
                          <div class="details-info">
                            <el-switch v-model="data.auth_status" active-color="#AC014D" @change="renderChange(data)"> </el-switch>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div>
                      <div v-if="data.auth_type !== 0" class="info-close" @click.stop="onNodeClick(data)">
                        <CloseBold class="icon" :class="data.auth_type === 1 ? 'close1' : data.auth_type > 2 ? 'close2' : ''" />
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </template>
            <template v-else>
              <el-empty description="暂无数据" />
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--删除弹框-->
  <Dialog :flag="flag">
    <div class="airportInfoDialog">
      <div class="title del-title">删除权限</div>
      <div class="Delcontent">
        <div class="content del-content">
          <span class="DelIcon"></span>是否确认删除<span class="error l10">{{ title }}</span>？
        </div>
        <div class="Delfoot text-right t30">
          <el-button size="default" type="danger" @click="remove">删除</el-button>
          <el-button size="default" @click="flag = false">取消</el-button>
        </div>
      </div>
    </div>
  </Dialog>
  <!--新增/编辑-->
  <Dialog :flag="editDialogVisible" width="628px" :show-flag="true">
    <div class="airportInfoDialog dialog-public-background">
      <div class="title">{{ editDialogTitle }}</div>
      <div class="content">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="110px" class="demo-ruleForm">
          <el-form-item label="权限名称" prop="auth_name">
            <el-input v-model="ruleForm.auth_name" size="default" placeholder="请输入权限名称" />
          </el-form-item>
          <div class="flex">
            <el-form-item label="权限类型" prop="auth_type">
              <el-select v-model="ruleForm.auth_type" size="default" placeholder="请选择">
                <el-option v-for="(item, index) in optionsType" :key="index" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="父级权限" prop="authParent">
              <el-select v-model="ruleForm.auth_id" size="default" placeholder="请选择">
                <el-option v-for="(item, index) in optionsParent" :key="index" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="flex-wrap">
            <el-form-item class="flex1" label="所属应用" prop="app_name">
              <el-select v-model="ruleForm.app_name" style="display: block" size="default" placeholder="请选择">
                <el-option v-for="(item, index) in optionsApp" :key="index" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="权限标识符" prop="auth_ident">
            <el-input v-model="ruleForm.auth_ident" size="default" type="textarea" :rows="3" placeholder="请输入权限标识符" />
          </el-form-item>
          <el-form-item label="数据项描述" prop="auth_comment">
            <el-input v-model="ruleForm.auth_comment" size="default" type="textarea" :rows="3" placeholder="请输入数据项描述" />
          </el-form-item>
        </el-form>
      </div>
      <div class="foot text-right t30">
        <el-button size="default" type="primary" class="r25 r26" @click="submitForm(ruleFormRef)">提交</el-button>
        <el-button size="default" class="r26" @click="resetForm(ruleFormRef)">取消</el-button>
      </div>
    </div>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { CloseBold } from "@element-plus/icons-vue";
import Dialog from "@/components/dialog/index.vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";

interface Tree {
  label: string;
  children?: Tree[];
}

//下级权限数据
const childrenData = ref([]);
//默认展开
const currentKey = ref([-1]);
//权限树
const data: Tree[] = [
  {
    auth_name: "应用名称",
    auth_id: -1,
    auth_type: -1,
    QueryTarget: -1,
    auth_status: true,
    children: [
      {
        auth_name: "交互权限",
        auth_id: 1,
        auth_type: 1,
        QueryTarget: 1,
        auth_status: true,
      },
      {
        auth_name: "API接口",
        auth_id: 2,
        auth_type: 1,
        QueryTarget: 1,
        auth_status: true,
      },
      {
        auth_name: "数据读写",
        auth_id: 3,
        auth_type: 1,
        QueryTarget: 1,
        auth_status: true,
      },
    ],
  },
];
//删除弹框
const flag = ref(false);
//新增编辑弹框
const editDialogVisible = ref(false);
//删除弹框标题
const title = ref("");
//删除id
const auId = ref("");
//新增编辑弹框-标题
const editDialogTitle = ref("新增下级权限");
//新增编辑弹框-表单
const ruleForm = reactive({
  auth_name: "",
  auth_type: "",
  auth_comment: "",
  app_name: "",
  auth_ident: "",
  auth_type: "",
  app_name: "",
  app_id: "",
  auth_status: true,
});
const optionsType = ref([]);
const optionsParent = ref([]);
const optionsApp = ref([]);
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  auth_name: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
});
const defaultProps = {
  children: "children",
  label: "auth_name",
};
//权限树点击
const handleNodeClick = (data: Tree) => {
  if (data.children) {
    childrenData.value = data.children;
  } else {
    childrenData.value = [];
  }
};

//启用禁用
const renderChange = (data) => {
  console.log(data);
};

//修改
const renderEdit = (data) => {
  console.log(data);
};

//删除弹框
const onNodeClick = (data) => {
  flag.value = true;
  title.value = data.auth_name;
  auId.value = data.auth_id;
};

//删除
const remove = () => {
  const datas = childrenData.value;
  datas.filter((item, index) => {
    if (item.auth_id == auId.value) {
      datas.splice(index, 1);
    }
  });
  flag.value = false;
  ElMessage.success("删除成功");
};

//新增
const addAuth = () => {
  editDialogVisible.value = true;
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      editDialogVisible.value = false;
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  editDialogVisible.value = false;
};
</script>

<style lang="scss" scoped>
.permission {
  &-head {
    line-height: 35px;
    font-size: 14px;
    margin-bottom: 30px;
    .icon {
      width: 14px;
      height: 14px;
      background: #58c274;
      border-radius: 2px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px;
      position: relative;
      top: -2px;
    }
    &:last-child {
      margin-right: 0;
    }

    .status2 {
      margin-left: 28px;
      .icon {
        background: #2d67e3;
      }
    }
    .status0 {
      margin-right: 28px;
      .icon {
        background: #d8b53b;
      }
    }
  }
  &-content {
    height: calc(100% - 65px);
    &-tree {
      width: 504px;
      height: 100%;
      margin-right: 24px;
      .contentTree {
        margin-top: 30px;
      }
    }
    &-card {
      height: 100%;
      flex: 1;
    }
  }
  .account-left-content-teams {
    position: relative;
    margin-top: 24px;
    .info-close {
      position: absolute;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      background: #000000;
      border-radius: 50%;
      top: -12px;
      right: -12px;
      z-index: 5;
      cursor: pointer;
      .icon {
        color: #fff;
        font-weight: 600;
        width: 12px;
        height: 12px;
      }
    }
    .list {
      background-color: #f5f7fa;
      .info {
        line-height: normal;
        margin-bottom: 37px;
        .name {
          font-size: 16px;
          font-weight: bold;
          max-width: 120px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .cap {
          width: 16px;
          height: 16px;
          display: inline-block;
          background-repeat: no-repeat;
          background-size: 100%;
          transition: all 0.3s;
          margin-left: 16px;
          &:first-child {
            margin-right: 0;
          }
        }
        .cap-plus {
          background-image: url("@/assets/status/ic_plus.png");
          &:hover {
            background-image: url("@/assets/status/ic_plus_hovar.png");
          }
        }
        .cap-edit {
          background-image: url("@/assets/status/ic_edit_default.png");
          &:hover {
            background-image: url("@/assets/status/ic_edit_hovar.png");
          }
        }
        .cap-sub {
          background-image: url("@/assets/status/ic_permissions_add_default.png");
          &:hover {
            background-image: url("@/assets/status/ic_permissions_add_hoavr.png");
          }
        }
        .cap-job {
          background-image: url("@/assets/status/ic_jobs.png");
          &:hover {
            background-image: url("@/assets/status/ic_jobs_hovar.png");
          }
        }
        .cap-member {
          background-image: url("@/assets/status/ic_member.png");
          &:hover {
            background-image: url("@/assets/status/ic_member_hovar.png");
          }
        }
      }
    }
    .team {
      background: #fff;
      border-radius: 4px;
      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      .bg {
        height: 4px;
        background: #6f81bc;
      }
      .status0 {
        background: #d8b53b;
      }
      .status1 {
        background: #58c274;
      }
      .status2 {
        background: #2d67e3;
      }
    }
    .list {
      padding: 23px 24px;
      position: relative;
      min-width: 240px;
      min-height: 118px;
      .info {
        margin-bottom: 20px;
        .info-avoutr {
          display: flex;
          .avoutr {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #303133;
            img {
              max-width: 100%;
            }
          }
          .msg {
            margin-left: 20px;
            p {
              margin: 0;
              padding: 0;
              height: 20px;
              line-height: 20px;
            }
            .name {
              font-weight: bold;
              color: #303133;
              font-size: 18px;
              margin-bottom: 8px;
            }
            .group {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #303133;
            }
          }
        }
        .icon {
          font-size: 16px;
          cursor: pointer;
        }
      }
      .time,
      .ip {
        height: 16px;
        line-height: 16px;
        font-size: 16px;
        .glr {
          color: #909399;
        }
      }
      .ip {
        margin-top: 23px;
        margin-bottom: 38px;
      }
      .details {
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        .success {
          color: #2d67e3;
        }
        .error {
          color: #909399;
        }
      }
    }
  }
}
</style>