添加用户管理

src/components/dialog/index.vue

@@ -2,7 +2,32 @@
   <div class="dialog">
     <el-dialog :model-value="props.flag" :append-to-body="props.isBody" ref="dialogTk" :top="props.top" :custom-class="props.customClass" :lock-scroll="false" :modal="props.modal" :before-close="close" :close-on-click-modal="false" :width="props.width" :show-close="props.showFlag">
       <div class="dialog-content">
-        <slot />
+        <template v-if="props.type=='del'">
+          <div class="airportInfoDialog">
+            <div class="title del-title">{{props.msgTitle}}</div>
+            <div class="Delcontent">
+              <div class="content del-content">
+                <span class="DelIcon"></span>是否确认删除<span class="error l10">{{ props.delName }}</span>？
+              </div>
+              <div class="Delfoot text-right t30">
+                <el-button size="default" type="danger" @click="delRemove">删除</el-button>
+                <el-button size="default" @click="delRest">取消</el-button>
+              </div>
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <div class="airportInfoDialog dialog-public-background">
+            <div class="title">{{ props.msgTitle }}</div>
+            <div class="content">
+              <slot />
+            </div>
+            <div class="foot text-right t30">
+              <el-button size="default" type="primary" class="r25 r26" @click="submitForm">提交</el-button>
+              <el-button size="default" class="r26" @click="resetForm">取消</el-button>
+            </div>
+          </div>
+        </template>
       </div>
     </el-dialog>
   </div>
@@ -48,9 +73,42 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  //弹框类型
+  type: {
+    type: String,
+    default: "",
+  },
+  //弹框-标题
+  msgTitle: {
+    type: String,
+    default: "",
+  },
+  //弹框-删除-内容
+  delName: {
+    type: String,
+    default: "",
+  },
 });
-const emits = defineEmits(["closeDialog"]);
+const emits = defineEmits([
+  "closeDialog",
+  "delRemove",
+  "delRest",
+  "submitForm",
+  "resetForm",
+]);
 const close = () => {
   emits("closeDialog");
 };
+const delRemove = () => {
+  emits("delRemove");
+};
+const delRest = () => {
+  emits("delRest");
+};
+const submitForm = () => {
+  emits("submitForm");
+};
+const resetForm = () => {
+  emits("resetForm");
+};
 </script>

src/components/tableTemp/index.vue

@@ -1,46 +1,14 @@
 <template>
-  <el-table
-    v-el-table-infinite-scroll="load"
-    :row-key="props.tableProperty.rowKey?props.tableProperty.rowKey:tablePropertyDefault.rowKey"
-    :row-style="rowStyle"
-    :data="props.tableData"
-    :height="props.tableProperty.height?props.tableProperty.height:tablePropertyDefault.height"
-    :max-height="props.tableProperty.maxHeight?props.tableProperty.maxHeight:tablePropertyDefault.maxHeight"
-    :stripe="props.tableProperty.stripe?props.tableProperty.stripe:tablePropertyDefault.stripe"
-    :border="props.tableProperty.border?props.tableProperty.border:tablePropertyDefault.border"
-    :highlight-current-row="props.tableProperty.highlightCurrentRow?props.tableProperty.highlightCurrentRow:tablePropertyDefault.highlightCurrentRow"
-    :header-cell-class-name="props.tableProperty.headerRowClassName?props.tableProperty.headerRowClassName:tablePropertyDefault.headerRowClassName"
-    :tooltip-effect="props.tableProperty.tooltipEffect?props.tableProperty.tooltipEffect:tablePropertyDefault.tooltipEffect"
-    :show-summary="props.tableProperty.showSummary?props.tableProperty.showSummary:tablePropertyDefault.showSummary"
-    :row-class-name="tableRowClassName"
-    :cell-class-name="cellClassName"
-  >
-  <!-- label-class-name  可通过 tableHeader中传入class来修改某一个或某一类表头的样式-->
-    <el-table-column
-      class="infinite-list-item"
-      v-for="(items, index) in props.tableHeader"
-      :key="index"
-      :label="items.label"
-      :prop="items.key"
-      :width="props.tableColumnProperty.width"
-      :sortable="items.sortable ? items.sortable : props.tableColumnProperty.sortable"
-      :show-overflow-tooltip="props.tableColumnProperty.showOverflowTooltip"
-      :align="items.align ? items.align : props.tableColumnProperty.align"
-      :header-align="items.headerAlign ? items.headerAlign : props.tableColumnProperty.headerAlign"
-      :label-class-name="items.lableClass?items.lableClass:''"
-    >
+  <el-table v-el-table-infinite-scroll="load" :row-key="props.tableProperty.rowKey?props.tableProperty.rowKey:tablePropertyDefault.rowKey" :row-style="rowStyle" :data="props.tableData" :height="props.tableProperty.height?props.tableProperty.height:tablePropertyDefault.height" :max-height="props.tableProperty.maxHeight?props.tableProperty.maxHeight:tablePropertyDefault.maxHeight" :stripe="props.tableProperty.stripe?props.tableProperty.stripe:tablePropertyDefault.stripe" :border="props.tableProperty.border?props.tableProperty.border:tablePropertyDefault.border" :highlight-current-row="props.tableProperty.highlightCurrentRow?props.tableProperty.highlightCurrentRow:tablePropertyDefault.highlightCurrentRow" :header-cell-class-name="props.tableProperty.headerRowClassName?props.tableProperty.headerRowClassName:tablePropertyDefault.headerRowClassName" :tooltip-effect="props.tableProperty.tooltipEffect?props.tableProperty.tooltipEffect:tablePropertyDefault.tooltipEffect" :show-summary="props.tableProperty.showSummary?props.tableProperty.showSummary:tablePropertyDefault.showSummary" :row-class-name="tableRowClassName" :cell-class-name="cellClassName">
+    <!-- label-class-name  可通过 tableHeader中传入class来修改某一个或某一类表头的样式-->
+    <el-table-column class="infinite-list-item" v-for="(items, index) in props.tableHeader" :key="index" :label="items.label" :prop="items.key" :width="props.tableColumnProperty.width" :sortable="items.sortable ? items.sortable : props.tableColumnProperty.sortable" :show-overflow-tooltip="props.tableColumnProperty.showOverflowTooltip" :align="items.align ? items.align : props.tableColumnProperty.align" :header-align="items.headerAlign ? items.headerAlign : props.tableColumnProperty.headerAlign" :label-class-name="items.lableClass?items.lableClass:''">
       <template #default="scope">
         {{ scope.row[items.key] }}
       </template>
     </el-table-column>
     <el-table-column v-if="props.tableBtnGroup.length" label="操作" :align="props.tableColumnProperty.align">
       <template #default="scope">
-        <el-button v-for="(btn, index) in props.tableBtnGroup"
-        :key="index" size="small"
-        @click="handleClick(scope.$index, scope.row, btn.param)"
-        :class="btn.className"
-          >{{btn.name}}</el-button
-        >
+        <el-button v-for="(btn, index) in props.tableBtnGroup" :key="index" size="small" @click="handleClick(scope.$index, scope.row, btn.param)" :class="btn.className">{{btn.name}}</el-button>
       </template>
     </el-table-column>
   </el-table>
@@ -51,7 +19,7 @@
 
 <script setup lang="ts">
 //表格参数
-const tablePropertyDefault={
+const tablePropertyDefault = {
   height: "100%",
   maxHeight: "100%",
   stripe: true,
@@ -61,8 +29,8 @@ const tablePropertyDefault={
   headerRowClassName: "headerRowClass",
   tooltipEffect: "light",
   showSummary: false,
-  rowKey:""
-}
+  rowKey: "",
+};
 const props = defineProps({
   //表头参数数组
   tableHeader: {
@@ -82,7 +50,7 @@ const props = defineProps({
       headerRowClassName: "headerRowClass",
       tooltipEffect: "light",
       showSummary: false,
-      rowKey:""
+      rowKey: "",
     },
   },
   //公共表头参数
@@ -97,15 +65,15 @@ const props = defineProps({
       headerAlign: "",
     },
   },
-  tableBtnGroup:{
-    type:Array,
-    default:[
-    // {
+  tableBtnGroup: {
+    type: Array,
+    default: [
+      // {
       // name:"编辑",     //按钮名称
       // className:"editBtn",  //按钮class样式  可以在父组件中定义好此class样式
       // param:2    //按钮类型参数
-    // }
-    ]
+      // }
+    ],
   },
   //表格数据
   tableData: {
@@ -114,39 +82,39 @@ const props = defineProps({
   },
 });
 //向父组件传参 btnClick：点击按钮后    load  触发下拉加载
-const emit = defineEmits(["btnClick","load"]);
+const emit = defineEmits(["btnClick", "load"]);
 //按钮点击index为当前行序号 row 为当前行 param按钮类型判断参数由父组件传过来
-const handleClick =(index: number, row:Object , param:number) => {
-  emit("btnClick",row,param)
-}
+const handleClick = (index: number, row: Object, param: number) => {
+  emit("btnClick", index, row, param);
+};
 
-const rowStyle = (row:Object,rowIndex:number) => {
-  let styleJson:Object={
-    height:'50px',
-    fontSize:"14px",
-    color:"#101116"
+const rowStyle = (row: Object, rowIndex: number) => {
+  let styleJson: Object = {
+    height: "50px",
+    fontSize: "14px",
+    color: "#101116",
   };
-  return styleJson
-}
+  return styleJson;
+};
 
 //表格行class样式 可通过父组件直接传class名称修改当前行样式
-const tableRowClassName = (row:Object,rowIndex:number) => {
+const tableRowClassName = (row: Object, rowIndex: number) => {
   if (row.row.rowClass) {
-    return row.row.rowClass
+    return row.row.rowClass;
   }
-  return ''
-}
+  return "";
+};
 
-const cellClassName= (row:Object) => {
+const cellClassName = (row: Object) => {
   // console.log(row.row)
   // console.log(row.column)
   // console.log(row.rowIndex)
   // console.log(row.columnIndex)
-}
+};
 //滚动分页加载
 const load = () => {
-  emit("load",true)
-}
+  emit("load", true);
+};
 </script>
 
 <style scoped lang="scss">
@@ -181,22 +149,22 @@ const load = () => {
   color: #101116;
 }
 ::v-deep.el-table .editBtn {
-  background: #FFFFFF;
-  border: 1px solid #F79EC6;
-  box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.06);
+  background: #ffffff;
+  border: 1px solid #f79ec6;
+  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
   border-radius: 4px;
   font-size: 12px;
   font-weight: 400;
-  color: #AC014D;
+  color: #ac014d;
 }
 
 ::v-deep.el-table .delBtn {
-  background: #EB2F3B;
-  box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.06);
+  background: #eb2f3b;
+  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
   border-radius: 4px;
   font-size: 12px;
   font-weight: 400;
-  color: #FFFFFF;
+  color: #ffffff;
   border: none;
 }
 </style>

src/views/userManagement/application/index.vue

@@ -1,9 +1,138 @@
 <template>
-  <div>应用管理</div>
+  <div class="application scroll-y">
+    <div class="application-head flex">
+      <div class="manageTitle">应用管理</div>
+      <div>
+        <el-button size="default" @click="addApp" plain>新增</el-button>
+      </div>
+    </div>
+    <div class="application-content">
+      <Table :tableHeader="tableHeader" @btnClick="btnClick" :tableBtnGroup="tableBtnGroup" :tableData="tableData" />
+    </div>
+    <!--删除弹框-->
+    <Dialog :flag="flag" msgTitle="删除应用" type="del" :delName="title" @delRest="delRest" @delRemove="remove" />
+    <!--新增/编辑-->
+    <Dialog :flag="editDialogVisible" :msgTitle="editDialogTitle" @submitForm="submitForm(ruleFormRef)" @resetForm="resetForm(ruleFormRef)" :show-flag="true">
+      <el-form ref="ruleFormRef" :model="ruleForm" label-width="110px" class="demo-ruleForm">
+        <el-form-item label="应用名称" prop="appName">
+          <el-input v-model="ruleForm.appName" size="default" placeholder="请输入应用名称" />
+        </el-form-item>
+        <el-form-item label="appid" prop="appId">
+          <el-input v-model="ruleForm.appId" size="default" placeholder="请输入appid" />
+        </el-form-item>
+        <el-form-item label="应用描述" prop="appDesc">
+          <el-input v-model="ruleForm.appDesc" size="default" type="textarea" :rows="3" placeholder="请输入应用描述" />
+        </el-form-item>
+      </el-form>
+    </Dialog>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { ref, reactive } from "vue";
+import { ElMessage, FormInstance, FormRules } from "element-plus";
+import Table from "@/components/tableTemp/index.vue";
+const ruleFormRef = ref<FormInstance>();
+const tableHeader = [
+  { label: "应用名称", key: "appName" },
+  { label: "appid", key: "appId" },
+  { label: "应用描述", key: "appDesc" },
+];
+const tableData = ref([
+  {
+    id: 1,
+    appName: "11",
+    appId: "22",
+    appDesc: "33",
+  },
+  {
+    id: 2,
+    appName: "11",
+    appId: "22",
+    appDesc: "33",
+  },
+]);
+const tableBtnGroup = [
+  {
+    name: "编辑",
+    className: "editBtn",
+    param: "edit",
+  },
+  {
+    name: "删除",
+    className: "delBtn",
+    param: "del",
+  },
+];
+const flag = ref(false);
+const title = ref("");
+const editDialogVisible = ref(false);
+const editDialogTitle = ref("新增应用");
+const ruleForm = reactive({
+  appName: "",
+  appDesc: "",
+  appId: "",
+});
+const rowIndex = ref(1);
+const btnClick = (index, row, param) => {
+  if (param == "del") {
+    flag.value = true;
+    title.value = row.appName;
+    rowIndex.value = index;
+  } else {
+    editDialogVisible.value = true;
+    editDialogTitle.value = "编辑应用";
+    ruleForm.appDesc = row.appDesc;
+    ruleForm.appName = row.appName;
+    ruleForm.appId = row.appId;
+  }
+};
+const delRest = () => {
+  flag.value = false;
+};
+const remove = () => {
+  tableData.value.splice(rowIndex.value, 1);
+  ElMessage.success("删除成功");
+  flag.value = false;
+};
+const addApp = () => {
+  editDialogVisible.value = true;
+  editDialogTitle.value = "新增应用";
+  ruleForm.appDesc = "";
+  ruleForm.appName = "";
+  ruleForm.appId = "";
+};
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      const len = tableData.value.length;
+      tableData.value.push({
+        id: len + 1,
+        appName: ruleForm.appName,
+        appDesc: ruleForm.appDesc,
+        appId: ruleForm.appId,
+      });
+      editDialogVisible.value = false;
+      ElMessage.success("添加成功");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+  editDialogVisible.value = false;
+};
 </script>
 
 <style lang="scss" scoped>
+.application {
+  &-content {
+    margin-top: 24px;
+    height: calc(100% - 56px);
+  }
+}
 </style>

src/views/userManagement/permission/index.vue

@@ -1,9 +1,490 @@
 <template>
-  <div>权限项</div>
+  <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>
+    <!--删除弹框-->
+    <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>
+  </div>
 </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>

src/views/userManagement/permission/index1.vue

@@ -1,490 +0,0 @@
-<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>