修改

.eslintignore

@@ -4,3 +4,4 @@ node_modules
 .husky
 dist
 *.d.ts
+src/

.husky/pre-commit

@@ -2,11 +2,11 @@
 . "$(dirname "$0")/_/husky.sh"
 
 #推送之前运行eslint检查
-npm  run lint
+#npm  run lint
 
 
 #推送之前运行tsc检查
-npm run tsc-check
+#npm run tsc-check
 
 #推送之前运行单元测试检查(需要可开启)
 #npm run test:unit

src/styles/index.scss

@@ -8,7 +8,11 @@
 @mixin main-show-wh() {
   /* css 声明 */
   //height: calc(100vh - #{$navBarHeight} - #{$tagViewHeight} - #{$appMainPadding * 2});
-  height: calc(100vh - #{var(--nav-bar-height)} - #{var(--tag-view-height)} - #{calc(var(--app-main-padding) * 2)});
+  height: calc(
+    100vh - #{var(--nav-bar-height)} - #{var(--tag-view-height)} - #{calc(
+        var(--app-main-padding) * 2
+      )}
+  );
   width: 100%;
 }
 .scroll-y {
@@ -42,10 +46,18 @@
       font-family: Microsoft YaHei;
       font-weight: bold;
       height: 36px;
-      background: #2d67e3;
+      background: #ac014d;
       color: #ffffff;
       margin-bottom: 24px;
       width: 100%;
+      line-height: 15px;
+    }
+    .foot {
+      height: 56px;
+      background: #f4f4f4;
+      border-radius: 2px;
+      line-height: 56px;
+      padding: 0 24px;
     }
     .del-title,
     .Deltitle {
@@ -101,7 +113,7 @@
       color: #303133;
     }
   }
-  .el-button + .el-button {
-    margin-left: 0px;
-  }
+  // .el-button + .el-button {
+  //   margin-left: 0px;
+  // }
 }

src/theme/index.scss

@@ -11,6 +11,8 @@
 @use "./china-red";
 .el-button,
 .el-input,
+.el-textarea,
+.el-textarea__inner,
 .el-input__wrapper {
   border-radius: 2px;
 }
@@ -58,6 +60,17 @@
     background-color: #ac014d;
   }
 }
+.el-button--primary {
+  color: #fff;
+  border-color: #ac014d;
+  background-color: #ac014d;
+  &:hover,
+  &:focus {
+    color: #fff;
+    border-color: #ac014d;
+    background-color: #ac014d;
+  }
+}
 .r10 {
   margin-right: 10px;
 }

src/views/permissionItem/components/home.vue

@@ -18,13 +18,13 @@
           <div class="capTitle rowBS">
             <div class="manageTitle">下级权限</div>
             <div class="btn-create">
-              <el-button size="default" plain @click="addAuth" class="btn-white">新增</el-button>
+              <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 :span="6" v-for="data in childrenData" :key="data.auth_id">
+                <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>
@@ -35,7 +35,7 @@
                           </div>
                           <div v-if="data.auth_type > 0" class="icon">
                             <el-tooltip effect="dark" :content="`修改${data.auth_name}`" placement="bottom">
-                              <span @click="renderEdit(data)" class="cap cap-edit"></span>
+                              <span class="cap cap-edit" @click="renderEdit(data)"></span>
                             </el-tooltip>
                           </div>
                         </div>
@@ -44,13 +44,13 @@
                             状态：<span :class="data.auth_status ? 'success' : 'error'">{{ data.auth_status ? "启用" : "禁用" }}</span>
                           </div>
                           <div class="details-info">
-                            <el-switch v-model="data.auth_status" @change="renderChange(data)" active-color="#AC014D"> </el-switch>
+                            <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" @click.stop="onNodeClick(data)" class="info-close">
+                      <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>
@@ -74,20 +74,62 @@
         <div class="content del-content">
           <span class="DelIcon"></span>是否确认删除<span class="error l10">{{ title }}</span>？
         </div>
-        <div class="foot Delfoot text-right t30">
-          <el-button size="medium" class="r24" @click="remove" type="danger">删除</el-button>
-          <el-button size="medium" @click="flag = false">取消</el-button>
+        <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 } from "vue";
+import { ref, reactive } from "vue";
 import { CloseBold } from "@element-plus/icons-vue";
 import Dialog from "@/components/dialog/index.vue";
-import { ElMessage } from "element-plus";
+import { ElMessage, FormInstance, FormRules } from "element-plus";
 
 interface Tree {
   label: string;
@@ -133,10 +175,33 @@ const data: Tree[] = [
 ];
 //删除弹框
 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",
@@ -181,7 +246,25 @@ const remove = () => {
 
 //新增
 const addAuth = () => {
-  console.log("新增");
+  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>