权限自助，红白名单接口联调

config/dev.env.js

@@ -34,14 +34,12 @@ module.exports = merge(prodEnv, {
     PROT: "8871",
     PROXY_TABLE: JSON.stringify({
         "/dcucauth": {
-            // target: "http://10.254.11.200:8861" // 傅志强
-            // target: "http://10.254.10.15:8861" // 傅志强
             // target: "http://10.11.1.164:8861"
             // target: "http://10.11.0.48:8861",// 邱宇
             // target: "http://10.254.11.203:8861"
             // target: "http://10.11.1.237:8861"
-            // target: "http://10.254.11.203:8861"
-             target: "http://192.168.10.2:8871"
+            target: "http://10.254.11.203:8861"
+            //  target: "http://192.168.10.2:8871"
 
         },
         "/approve-gateway": {

src/api/list-manage.js

@@ -0,0 +1,118 @@
+/**
+ 红白名单管理接口
+ @author linqian
+ @Date：2021-07-14
+ */
+import request from '@/utils/request';
+import Qs from 'qs';
+
+const baseUrl = `/authsvr/v2`;
+
+/** ********************** 白名单 ************************************/
+
+// 白名单列表url
+export const whiteListTableUrl = `${baseUrl}/whitelist/userWhiteListPage`;
+
+// 保存白名单
+export function saveWhiteList(data) {
+  return request({
+    url: `${baseUrl}/whitelist/userWhiteListAdd`,
+    method: 'POST',
+    data
+  });
+}
+
+// 白名单批量删除
+export function delWhiteList(data) {
+  return request({
+    url: `${baseUrl}/whitelist/whiteListDel`,
+    method: 'POST',
+    data
+  });
+}
+
+// 白名单批量修改等级
+export function updateWhiteListLevel(data) {
+  return request({
+    url: `${baseUrl}/whitelist/whiteListUpdateLevel`,
+    method: 'POST',
+    data
+  });
+}
+
+/** ********************** 红名单 ************************************/
+function handleSearchCondition(page, size, searchCondition) {
+  let conditions = [];
+  for (const key in searchCondition) {
+    if (searchCondition[key].value) {
+      let obj = {
+        name: key,
+        op: searchCondition[key].op,
+        value: searchCondition[key].value,
+        type: '',
+        format: ''
+      };
+      conditions.push(obj);
+    }
+  }
+  let params = {
+    searchCondition: JSON.stringify(conditions),
+    page: page - 1,
+    size
+  };
+  return Qs.stringify(params);
+}
+
+// 应用功能红名单列表
+export function getRedAppFuncList({ page, size, searchCondition }) {
+  return request({
+    url: `${baseUrl}/redlist/funRedListPage`,
+    method: 'POST',
+    data: handleSearchCondition(page, size, searchCondition)
+  });
+}
+
+// 添加应用功能红名单
+export function saveRedAppFunc(data) {
+  return request({
+    url: `${baseUrl}/redlist/funRedListAdd`,
+    method: 'POST',
+    data
+  });
+}
+
+// 批量设置应用功能红名单
+export function updateRedAppFuncLevel(data) {
+  return request({
+    url: `${baseUrl}/redlist/redListUpdateLevel`,
+    method: 'POST',
+    data
+  });
+}
+
+// 单条移除应用功能红名单
+export function delRedAppFunc(params) {
+  return request({
+    url: `${baseUrl}/redlist/funRedListDel`,
+    method: 'DELETE',
+    params
+  });
+}
+
+// 批量移除应用功能红名单
+export function delBatchRedAppFunc(data) {
+  return request({
+    url: `${baseUrl}/redlist/funRedListBatchDel`,
+    method: 'POST',
+    data
+  });
+}
+
+// 查询已被添加为红名单的功能id
+export function getFunIdsInRedList() {
+  return request({
+    url: `${baseUrl}/redlist/funIdsInRedList`,
+    method: 'GET'
+  });
+}
+

src/api/permission-selfhelp-manage.js

@@ -5,6 +5,29 @@
  */
 import request from '@/utils/request';
 
+const baseUrl = `/authsvr/v2/selfauth`
+
+// 权限自助申请
+export function savePermissionApply(data) {
+  return request({
+    url: `${baseUrl}/funApplySave`,
+    method: 'POST',
+    data
+  });
+}
+
+// 权限自助列表ul
+export const tableUrl = `${baseUrl}/funAuthList`
+
+// 获取全量应用功能菜单树
+export function allAppFuncTree() {
+  return request({
+    url: `/authsvr/v2/appfuninfo/allMenuTree`,
+    method: 'GET'
+  });
+}
+
+
 // 获取流程图配置
 export function processConfig(id, appCode) {
   return request({

src/pages/common/new-table/index.vue

@@ -12,7 +12,7 @@
       :condition="condition"
       :data="data"
       border
-      row-key="id"
+      :row-key="rowKey"
       :lazy="lazy"
       :load="load"
       :tree-props="treeProps"
@@ -56,6 +56,10 @@ export default {
     load: {
       type: Function,
       default: (conditions) => conditions
+    },
+    rowKey: {
+      type: String,
+      default: 'id'
     }
   },
   components: {},

src/pages/common/select-tree/index.vue

@@ -24,30 +24,10 @@
 import * as commonApi from "@/api/common";
 export default {
     props: {
-        // props: {
-        //     type: Object,
-        //     default() {
-        //         return {
-        //             value: "id",
-        //             label: "name",
-        //             children: "children",
-        //             isLeaf(data) {
-        //                 return data.isParent !== true;
-        //             }
-        //         };
-        //     }
-        // },
-        // treeProps: {
-        //     type: Object,
-        //     default() {
-        //         return {
-        //             nodeKey: "id",
-        //             lazy: true,
-        //             load: this.loadNode
-        //         };
-        //     }
-        // },
-
+      nodeKey: {
+          type: String,
+          default:"code",
+      },
         apiName: {
             type: String,
             default: "getTree"
@@ -58,7 +38,7 @@ export default {
         return {
             value: "",
             props: {
-                value: "code",
+                value: this.nodeKey,
                 label: "name",
                 children: "children",
                 isLeaf(data) {
@@ -66,7 +46,7 @@ export default {
                 }
             },
             treeProps: {
-                nodeKey: "code",
+                nodeKey: this.nodeKey,
                 lazy: true,
                 load: this.loadNode
             }

src/pages/common/transfer-tree/index.vue

@@ -44,6 +44,7 @@
               :default-expand-all="openAll"
               :render-content="renderContent"
               :default-checked-keys="sourceCheckKeys"
+              :check-strictly="checkStrictly"
             ></el-tree>
           </div>
         </div>
@@ -113,6 +114,7 @@
                 :default-expand-all="openAll"
                 :render-content="renderContent"
                 :default-checked-keys="targetCheckKeys"
+                :check-strictly="checkStrictly"
               ></el-tree>
             </template>
             <template v-if="accept === 'list'">
@@ -234,6 +236,11 @@ export default {
     accept: {
       type: String,
       default: 'tree'
+    },
+    // 是否父子关联
+    checkStrictly: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -493,7 +500,6 @@ export default {
      *
      */
     addToTarget() {
-        debugger
       let keys = this.$refs['from-tree'].getCheckedKeys(true);
 
       let _newValue = _.union(this.value, keys);

src/pages/list-manage/DataConfig.js

@@ -2,7 +2,7 @@
 export const userListHeader = [
   {
     label: '姓名',
-    prop: 'name'
+    prop: 'userName'
   },
   {
     label: '身份证号码',
@@ -10,11 +10,13 @@ export const userListHeader = [
   },
   {
     label: '单位名称',
-    prop: 'userName'
+    prop: 'orgName'
   },
   {
     label: '白名单级别',
-    prop: 'userName'
+    prop: 'listLevel',
+    enum: "ListLevelEnum"   
+  
   }
 ];
 

src/pages/list-manage/red-list-manage/component/app-func.vue

@@ -1,16 +1,15 @@
- <template>
+<template>
   <div>
     <!-- 筛选项 -->
     <el-form ref="ruleForm" inline>
       <el-form-item label="红名单级别">
-        <dg-select v-model="form.userType.value" placeholder="请选择用户类型" enum="UserTypeEnum" clearable>
-        </dg-select>
+        <dg-select v-model="form.level.value" placeholder="请选择用户类型" enum="ListLevelEnum" clearable> </dg-select>
       </el-form-item>
       <el-form-item label="应用系统名称">
-        <el-input v-model="form.name.value" placeholder="请输入应用系统名称" clearable></el-input>
+        <el-input v-model="form.appName.value" placeholder="请输入应用系统名称" clearable></el-input>
       </el-form-item>
       <el-form-item label="应用系统编号">
-        <el-input v-model="form.idcard.value" placeholder="请输入应用系统编号" clearable></el-input>
+        <el-input v-model="form.appCode.value" placeholder="请输入应用系统编号" clearable></el-input>
       </el-form-item>
       <el-form-item>
         <dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
@@ -39,7 +38,7 @@
         @current-change="handleCurrentChange"
         :current-page="currentPage"
         :page-sizes="[10, 20, 30]"
-        :page-size="10"
+        :page-size="size"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total"
       >
@@ -51,124 +50,31 @@
 import batchAddAppFunc from './batch-add-appfunc.vue';
 import batchSetLevelAppFunc from './batch-setlevel-appfunc.vue';
 import batchDeleteAppFunc from './batch-delete-appfunc.vue';
+import { getRedAppFuncList, delRedAppFunc } from '@/api/list-manage';
+import { allAppFuncTree } from '@/api/permission-selfhelp-manage';
 export default {
   data() {
     return {
       form: {
-        name: {
+        level: {
           value: '',
-          op: 'like'
+          op: '='
         },
-        idcard: {
+        appCode: {
           value: '',
           op: 'like'
         },
-        userType: {
+        appName: {
           value: '',
-          op: '='
+          op: 'like'
         }
       },
       // 分页器
       currentPage: 1,
-      total: 2,
+      total: 0,
+      size: 10,
       // 数据
-      tableData: [
-        {
-          id: '1',
-          p: 0,
-          label: '一级 1',
-          child: [
-            {
-              id: '1-1',
-              p: '1',
-              label: '二级 1-1',
-              child: []
-            },
-            {
-              id: '1-2',
-              p: '1',
-              label: '二级 1-2',
-              child: [
-                {
-                  id: '1-2-1',
-                  p: '1-2',
-                  child: [],
-                  label: '二级 1-2-1'
-                },
-                {
-                  id: '1-2-2',
-                  p: '1-2',
-                  child: [],
-                  label: '二级 1-2-2'
-                }
-              ]
-            },
-            {
-              id: '1-3',
-              p: '1',
-              label: '二级 1-3',
-              child: [
-                {
-                  id: '1-3-1',
-                  p: '1-3',
-                  child: [],
-                  label: '二级 1-3-1'
-                },
-                {
-                  id: '1-3-2',
-                  p: '1-3',
-                  child: [],
-                  label: '二级 1-3-2'
-                }
-              ]
-            },
-            {
-              id: '1-4',
-              p: '1',
-              label: '二级 1-4',
-              child: [
-                {
-                  id: '1-4-1',
-                  p: '1-4',
-                  child: [],
-                  label: '二级 1-4-1'
-                },
-                {
-                  id: '1-4-2',
-                  p: '1-4',
-                  child: [],
-                  label: '二级 1-4-2'
-                },
-                {
-                  id: '1-4-3',
-                  p: '1-4',
-                  child: [],
-                  label: '二级 1-4-3'
-                },
-                {
-                  id: '1-4-4',
-                  p: '1-4',
-                  child: [],
-                  label: '二级 1-4-4'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          id: '2',
-          p: 0,
-          label: '二级 1',
-          child: [
-            {
-              id: '2-1',
-              p: '2',
-              label: '二级 1-2',
-              child: []
-            }
-          ]
-        }
-      ],
+      tableData: [],
       gridOptions: {
         border: true,
         rowId: 'id',
@@ -182,7 +88,7 @@ export default {
           { type: 'checkbox', width: 50, align: 'center' },
           { type: 'seq', width: 60, align: 'center', title: '序号' },
           { title: '应用功能名称', field: 'label', treeNode: true, align: 'center' },
-          { field: 'id', title: '红名单级别', align: 'center' },
+          { field: 'level', title: '红名单级别', align: 'center' },
           {
             field: 'address',
             title: '操作',
@@ -198,7 +104,8 @@ export default {
      * @description:查询
      */
     handleSearch() {
-      // this.$refs.vxeGrid.handleSearch();
+      this.currentPage = 1;
+      this.getList();
     },
     /**
      * 重置
@@ -209,17 +116,21 @@ export default {
       }
     },
     // 打开弹窗
-    openLayer(title, content) {
+    openLayer(title, content, operate) {
       const vm = this;
-      const selectedData = vm.$refs.vxeGrid.getCheckboxRecords(true);
+      const selectedData = vm.$refs.vxeGrid.getCheckboxRecords(true).filter((item) => !item.isTreeNode);
       const layer = this.$dgLayer({
         title,
         content,
         props: {
-          data: this.tableData
+          data: this.allTree,
+          selectedData,
+          operate,
+          value: selectedData.map((item) => item.id)
         },
         on: {
           success() {
+            vm.handleSearch();
             layer.close(layer.dialogIndex);
           }
         },
@@ -235,8 +146,11 @@ export default {
      * 添加
      */
     handleAdd() {
-      this.openLayer('批量添加应用功能红名单', batchAddAppFunc);
+      this.openLayer('批量添加应用功能红名单', batchAddAppFunc, 'add');
     },
+    /**
+     * 验证是否有批量选中
+     */
     verify() {
       const selectedData = this.$refs.vxeGrid.getCheckboxRecords(true);
       if (selectedData.length == 0) {
@@ -251,25 +165,64 @@ export default {
      */
     handleSetListLevel() {
       if (!this.verify()) return;
-      this.openLayer('批量设置红名单等级', batchSetLevelAppFunc);
+      this.openLayer('批量设置红名单等级', batchSetLevelAppFunc, 'set');
     },
     handleBatchRemove() {
       if (!this.verify()) return;
-      this.openLayer('批量删除应用功能红名单', batchDeleteAppFunc);
+      this.openLayer('批量删除应用功能红名单', batchDeleteAppFunc, 'del');
     },
 
     /**
      * 移除
      */
-    handleRemove() {
-      this.$dgConfirm(`是否确认移除该条数据！`, '提示', {}).then(() => {});
+    handleRemove(row) {
+      this.$dgConfirm(`是否确认移除该条数据！`, '提示', {}).then(() => {
+        const params = {
+          isTreeNode: row.isTreeNode,
+          resourceId: row.id,
+          resourceType: row.type
+        }
+         delRedAppFunc(params).then(res => {
+           this.$message.success("删除成功！");
+           this.getList();
+         })
+      });
     },
+
     handleSizeChange(val) {},
     handleCurrentChange(val) {},
     selectChangeEvent({ records, reserves, indeterminates, checked, row }) {
       // debugger
       console.info(`勾选${records.length}个树形节点`, records);
+    },
+    /**
+     * 获取列表
+     */
+    getList() {
+      const params = {
+        page: this.currentPage,
+        size: this.size,
+        searchCondition: this.form
+      };
+
+      getRedAppFuncList(params).then((res) => {
+        const { content, totalElements } = res.data;
+        this.tableData = content;
+        this.total = totalElements;
+      });
+    },
+    /**
+     * 获取全量的应用功能树
+     */
+    getAllFuncTree() {
+      allAppFuncTree().then((res) => {
+        this.allTree = res.data.content;
+      });
     }
+  },
+  created() {
+    this.getList();
+    this.getAllFuncTree();
   }
 };
 </script>

src/pages/list-manage/red-list-manage/component/batch-add-appfunc.vue

@@ -12,7 +12,7 @@
       <el-form-item>
         <dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
       </el-form-item>
-    </el-form>
+    </el-form>  
     <!-- 表格树 -->
     <vxe-grid v-bind="gridOptions" ref="vxeGrid" :data="sourceData" @checkbox-change="selectChangeEvent"></vxe-grid>
     <!-- <vxe-grid v-bind="gridOptions" ref="vxeGrid" :data="targetData" @checkbox-change="selectChangeEvent"></vxe-grid> -->
@@ -26,6 +26,8 @@
 
 <script>
 import getTreeDataMixin from '@/pages/common/transfer-tree/mixin';
+import batchSetlevelAppFunc from './batch-setlevel-appfunc.vue';
+import { getFunIdsInRedList } from '@/api/list-manage'
 export default {
   props: {
     data: [Array]
@@ -35,7 +37,7 @@ export default {
   data() {
     return {
       appName: '',
-      value: ['1-1', '1-2-1'],
+      value: [],
       valueName: 'id',
       childrenName: 'child',
       pidName: 'p',
@@ -64,10 +66,48 @@ export default {
       this.$emit('close');
     },
     handleSubmit() {
-      this.$emit('success');
+       const selectedData = this.$refs.vxeGrid.getCheckboxRecords(true);
+      if (selectedData.length > 0) {
+        this.setLevel(selectedData);
+      } else {
+        this.$message.warning('请至少选择一个应用功能!');
+      }
+    },
+      /**
+     * 设置名单等级
+     */
+    setLevel(selectedData) {
+      const vm = this;
+      const layer = this.$dgLayer({
+        title: '设置红名单等级',
+        content: batchSetlevelAppFunc,
+        props: {
+          data: this.data,
+          value: selectedData.filter(item => !item.isTreeNode).map(item => item.id),
+          selectedData,
+          operate: "add"
+        },
+        on: {
+          success() {
+             vm.$emit('success');
+              layer.close(layer.dialogIndex);
+          }
+        },
+        cancel: function (index) {
+          // 关闭对应弹窗的ID
+          layer.close(index);
+          return false;
+        },
+        area: ['800px', '600px']
+      });
     }
   },
-  created() {},
+  created() {
+    // 查询已被添加为红名单的功能id
+    getFunIdsInRedList().then(res => {
+       this.value = res.data.content;
+    })
+  },
   mounted() {}
 };
 </script>

src/pages/list-manage/red-list-manage/component/batch-delete-appfunc.vue

@@ -5,7 +5,7 @@
 -->
 <template>
   <div>
-     <p>是否确定移除以下应用功能红名单？</p>
+    <p>是否确定移除以下应用功能红名单？</p>
     <p style="margin-top: 10px; margin-bottom: 5px">选中的应用功能列表：</p>
     <!-- 表格树 -->
     <vxe-grid v-bind="gridOptions" ref="vxeGrid" :data="targetData"></vxe-grid>
@@ -18,13 +18,14 @@
 
 <script>
 import getTreeDataMixin from '@/pages/common/transfer-tree/mixin';
+import { delBatchRedAppFunc } from '@/api/list-manage';
 export default {
   props: {
     data: [Array],
     value: {
       type: Array,
       default() {
-        return ['1-1', '1-2-1']
+        return [];
       }
     }
   },
@@ -58,7 +59,12 @@ export default {
       this.$emit('close');
     },
     handleSubmit() {
-      this.$emit('success');
+      delBatchRedAppFunc({
+        listIds: this.value
+      }).then((res) => {
+        this.$message.success('删除成功！');
+        this.$emit('success');
+      });
     }
   },
   created() {},

src/pages/list-manage/red-list-manage/component/batch-setlevel-appfunc.vue

@@ -7,10 +7,10 @@
   <div>
     <el-form inline>
       <el-form-item label="红名单级别：">
-        <dg-select v-model="appName" clearable></dg-select>
+        <dg-select v-model="level" enum="ListLevelEnum" clearable></dg-select>
       </el-form-item>
     </el-form>
-     <p style="margin-bottom: 5px">选中的应用功能列表：</p>
+    <p style="margin-bottom: 5px">选中的应用功能列表：</p>
     <!-- 表格树 -->
     <vxe-grid v-bind="gridOptions" ref="vxeGrid" :data="targetData"></vxe-grid>
     <div v-footer>
@@ -22,21 +22,27 @@
 
 <script>
 import getTreeDataMixin from '@/pages/common/transfer-tree/mixin';
+import { saveRedAppFunc, updateRedAppFuncLevel } from '@/api/list-manage';
 export default {
   props: {
     data: [Array],
     value: {
       type: Array,
       default() {
-        return ['1-1', '1-2-1']
+        return [];
       }
+    },
+    selectedData: [Array],
+    operate: {
+      type: String,
+      default: 'add'
     }
   },
   mixins: [getTreeDataMixin],
   components: {},
   data() {
     return {
-      appName: '',
+      level: '1',
       valueName: 'id',
       childrenName: 'child',
       pidName: 'p',
@@ -61,7 +67,59 @@ export default {
     handleCancel() {
       this.$emit('close');
     },
-    handleSubmit() {
+    handlerValues(arr, key) {
+      let obj = {};
+      arr.forEach((item, index) => {
+        let { appId } = item;
+          if (!obj[appId]) {
+            obj[appId] = {
+              appId,
+              funIds: []
+            };
+          } 
+          // else {
+            obj[appId].funIds.push(item.id);
+          // }
+      });
+      return Object.values(obj); // 最终输出
+    },
+    // 保存
+    save() {
+      const params = this.handlerValues(this.selectedData.filter(item => !item.isTreeNode)).map((item) => {
+        return {
+          ...item,
+          level: this.level
+        };
+      });
+      return new Promise((resolve) => {
+        saveRedAppFunc(params).then((res) => {
+          resolve(res.data);
+          this.$message.success('保存成功！');
+        });
+      });
+    },
+    // 设置等级
+    setLevel() {
+      const params = {
+        level: this.level,
+        listIds: this.value
+      };
+      return new Promise((resolve) => {
+        updateRedAppFuncLevel(params).then((res) => {
+          resolve(res.data);
+          this.$message.success('设置成功！');
+        });
+      });
+    },
+
+    async handleSubmit() {
+      // 添加白名单
+      if (this.operate == 'add') {
+        await this.save();
+      } else {
+        // 设置白名单
+        await this.setLevel();
+      }
       this.$emit('success');
     }
   },

src/pages/list-manage/white-list-manage/component/batch-add-user.vue

@@ -135,12 +135,13 @@ export default {
         title: '设置白名单等级',
         content: batchSetlevelUser,
         props: {
-          selectedData
+          selectedData,
+          operate: "add"
         },
         on: {
           success() {
-            vm.$emit('success');
-            layer.close(layer.dialogIndex);
+             vm.$emit('success');
+              layer.close(layer.dialogIndex);
           }
         },
         cancel: function (index) {

src/pages/list-manage/white-list-manage/component/batch-setlevel-user.vue

@@ -7,7 +7,7 @@
   <div>
     <el-form inline>
       <el-form-item label="白名单级别：">
-        <dg-select v-model="level" :data="[]"></dg-select>
+        <dg-select v-model="level" enum="ListLevelEnum"></dg-select>
       </el-form-item>
     </el-form>
     <p style="margin-bottom: 5px">选中的人员列表：</p>
@@ -26,15 +26,21 @@
 
 <script>
 import { userListHeader } from '../../DataConfig';
+import { saveWhiteList, updateWhiteListLevel } from '@/api/list-manage';
+
 export default {
   components: {},
   props: {
-    selectedData: Array
+    selectedData: Array,
+    operate: {
+      type: String,
+      default: 'add'
+    }
   },
   data() {
     return {
       tableHeader: userListHeader.slice(0, 3),
-      level: ''
+      level: '1' // 默认为低等级
     };
   },
   computed: {},
@@ -42,7 +48,41 @@ export default {
     handleCancel() {
       this.$emit('close');
     },
-    handleSubmit() {
+    // 保存
+    save() {
+      const params = {
+        level: this.level,
+        subIds: this.selectedData.map((item) => item.id)       
+      };
+      return new Promise((resolve) => {
+        saveWhiteList(params).then((res) => {
+          resolve(res.data);
+          this.$message.success('保存成功！');
+        });
+      });
+    },
+    // 设置等级
+    setLevel() {
+      const params = {
+        level: this.level,
+        listIds: this.selectedData.map((item) => item.listId)
+      };
+      return new Promise((resolve) => {
+        updateWhiteListLevel(params).then((res) => {
+          resolve(res.data);
+          this.$message.success('设置成功！');
+        });
+      });
+    },
+
+    async handleSubmit() {
+      // 添加白名单
+      if (this.opetate == 'add') {
+        await this.save();
+      } else {
+        // 设置白名单
+        await this.setLevel();
+      }
       this.$emit('success');
     }
   },

src/pages/list-manage/white-list-manage/component/user-list.vue

@@ -8,7 +8,7 @@
     <!-- 筛选项 -->
     <el-form ref="ruleForm" inline>
       <el-form-item label="白名单级别">
-        <dg-select v-model="form.userType.value" placeholder="请选择用户类型" enum="UserTypeEnum" clearable>
+        <dg-select v-model="form.level.value" placeholder="请选择白名单级别" enum="ListLevelEnum" clearable>
         </dg-select>
       </el-form-item>
       <el-form-item label="姓名">
@@ -17,9 +17,8 @@
       <el-form-item label="身份证号码">
         <el-input v-model="form.idcard.value" placeholder="请输入身份证号码" clearable></el-input>
       </el-form-item>
-
       <el-form-item label="单位名称">
-        <select-tree ref="selectTree" api-name="getOrgTree" @submitTreeValue="getTreeValue" :key="key"></select-tree>
+        <select-tree ref="selectTree" api-name="getOrgTree" nodeKey="id" @submitTreeValue="getTreeValue" :key="key"></select-tree>
       </el-form-item>
 
       <el-form-item>
@@ -34,7 +33,13 @@
       <dg-button type="primary" @click="handleBatchRemove" icon="el-icon-remove-outline">批量移除</dg-button>
     </dg-row>
     <!-- 表格 -->
-    <new-table ref="table" :tableUrl="tableUrl" :tableHeader="userListHeader" :condition="form">
+    <new-table
+      ref="table"
+      :tableUrl="whiteListTableUrl"
+      :tableHeader="userListHeader"
+      rowKey="idcard"
+      :condition="form"
+    >
       <dg-table-column label="操作" align="center">
         <template slot-scope="scope">
           <div class="u-table__operation">
@@ -51,7 +56,7 @@
 <script>
 import selectTree from '@/pages/common/select-tree';
 import { userListHeader } from '../../DataConfig';
-import { appRestApi } from '@/api/application';
+import { whiteListTableUrl, delWhiteList } from '@/api/list-manage';
 import newTable from '@/pages/common/new-table';
 import batchAddUser from './batch-add-user.vue';
 import batchSetlevelUser from './batch-setlevel-user.vue';
@@ -63,27 +68,27 @@ export default {
   },
   data() {
     return {
+      whiteListTableUrl,
       form: {
-        name: {
+        level: {
           value: '',
-          op: 'like'
+          op: '='
         },
         idcard: {
           value: '',
           op: 'like'
         },
-        userType: {
+        orgId: {
           value: '',
           op: '='
         },
-        orgCode: {
+        name: {
           value: '',
-          op: '='
+          op: 'like'
         }
       },
       key: 0,
-      userListHeader,
-      tableUrl: appRestApi.table
+      userListHeader
     };
   },
   computed: {},
@@ -93,7 +98,7 @@ export default {
      */
 
     getTreeValue(val) {
-      this.form.orgCode.value = val;
+      this.form.orgId.value = val;
     },
     /**
      * @description:查询
@@ -105,7 +110,7 @@ export default {
      * 重置
      */
     handleReset() {
-      if (this.form.orgCode.value) {
+      if (this.form.orgId.value) {
         this.key++;
       }
       for (const key in this.form) {
@@ -113,17 +118,23 @@ export default {
       }
     },
     // 打开弹窗
-    openLayer(title, content, area = ['800px', '600px']) {
+    openLayer(title, content, opetare, area = ['800px', '600px']) {
       const vm = this;
       const selectedData = vm.$refs.table.newChooseArr;
       const layer = this.$dgLayer({
         title,
         content,
         props: {
-          selectedData
+          selectedData,
+          opetare
         },
         on: {
           success() {
+            if (opetare == 'del') {
+              this.removeList(selectedData);
+            } else {
+              vm.handleSearch();
+            }
             layer.close(layer.dialogIndex);
           }
         },
@@ -139,7 +150,7 @@ export default {
      * 添加
      */
     handleAdd() {
-      this.openLayer('批量添加人员白名单', batchAddUser, ['1100px', '800px']);
+      this.openLayer('批量添加人员白名单', batchAddUser, 'add', ['1100px', '800px']);
     },
     /**
      * 设置名单级别
@@ -155,20 +166,31 @@ export default {
     },
     handleSetListLevel() {
       if (!this.verify()) return;
-      this.openLayer('批量设置白名单等级', batchSetlevelUser);
+      this.openLayer('批量设置白名单等级', batchSetlevelUser, 'set');
     },
     /**
      * 移除
      */
-    handleRemove() {
-      this.$dgConfirm(`是否确认移除该白名单人员！`, '提示', {}).then(() => {});
+    handleRemove(row) {
+      this.$dgConfirm(`是否确认移除该白名单人员！`, '提示', {}).then(() => {
+        this.removeList([row]);
+      });
     },
     /**
      * 批量移除
      */
     handleBatchRemove() {
       if (!this.verify()) return;
-      this.openLayer('批量移除白名单人员', batchDeleteUser);
+      this.openLayer('批量移除白名单人员', batchDeleteUser, 'del');
+    },
+    removeList(selectData) {
+      const params = {
+        listIds: selectData.map((item) => item.listId)
+      };
+      delWhiteList(params).then((res) => {
+        this.$message.success('移除成功!');
+        this.handleSearch();
+      });
     }
   },
   created() {},

src/pages/permission-selfhelp-manage/component/app-func-form.vue

@@ -13,7 +13,7 @@
       :data="data"
       children-name="child"
       pid-name="p"
-      :open-all="true"
+      :open-all="false"
       :transfer-open-node="true"
       :filter-node-from="handleSearch"
       value-name="id"
@@ -28,6 +28,7 @@
 
 <script>
 import transferTree from '@/pages/common/transfer-tree';
+import { allAppFuncTree } from '@/api/permission-selfhelp-manage';
 
 function findIndexArray(data, id, indexArray) {
   let arr = Array.from(indexArray);
@@ -55,104 +56,7 @@ export default {
     return {
       approveContent: this.value,
       selectedValue: this.selectKeys,
-      data: [
-        {
-          id: '1',
-          p: 0,
-          label: '一级 1',
-          child: [
-            {
-              id: '1-1',
-              p: '1',
-              label: '二级 1-1',
-              dd: false,
-              child: []
-            },
-            {
-              id: '1-2',
-              p: '1',
-              label: '二级 1-2',
-              child: [
-                {
-                  id: '1-2-1',
-                  p: '1-2',
-                  child: [],
-                  label: '二级 1-2-1'
-                },
-                {
-                  id: '1-2-2',
-                  p: '1-2',
-                  child: [],
-                  label: '二级 1-2-2'
-                }
-              ]
-            },
-            {
-              id: '1-3',
-              p: '1',
-              label: '二级 1-3',
-              child: [
-                {
-                  id: '1-3-1',
-                  p: '1-3',
-                  child: [],
-                  label: '二级 1-3-1'
-                },
-                {
-                  id: '1-3-2',
-                  p: '1-3',
-                  child: [],
-                  label: '二级 1-3-2'
-                }
-              ]
-            },
-            {
-              id: '1-4',
-              p: '1',
-              label: '二级 1-4',
-              child: [
-                {
-                  id: '1-4-1',
-                  p: '1-4',
-                  child: [],
-                  label: '二级 1-4-1'
-                },
-                {
-                  id: '1-4-2',
-                  p: '1-4',
-                  child: [],
-                  label: '二级 1-4-2'
-                },
-                {
-                  id: '1-4-3',
-                  p: '1-4',
-                  child: [],
-                  label: '二级 1-4-3'
-                },
-                {
-                  id: '1-4-4',
-                  p: '1-4',
-                  child: [],
-                  label: '二级 1-4-4'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          id: '2',
-          p: 0,
-          label: '二级 1',
-          child: [
-            {
-              id: '2-1',
-              p: '2',
-              label: '二级 1-2',
-              child: []
-            }
-          ]
-        }
-      ]
+      data: []
     };
   },
   computed: {},
@@ -175,8 +79,18 @@ export default {
       if (this.selectedValue.length == 0) {
         this.$message.warning('请至少选择一条功能资源！');
       } else {
+       
         const approveContent = this.nodeTransferLabel();
-        this.$emit('success', approveContent, this.selectedValue);
+        const resourceInfos = this.selectedValue
+          .map((item) => this.$refs.transferTree.$refs['to-tree'].getNode(item).data)
+          .map((item) => {
+            return {
+              appId: item.pid,
+              funId: item.id
+            };
+          });
+
+        this.$emit('success', approveContent, this.selectedValue, resourceInfos);
       }
     },
     handleSearch(value, data) {
@@ -185,11 +99,15 @@ export default {
       return data.label.indexOf(value) !== -1;
     }
   },
-  created() {},
+  created() {
+    allAppFuncTree().then((res) => {
+      this.data = res.data.content;
+    });
+  },
   mounted() {}
 };
 </script>
 
 <style lang='scss' scoped>
-@import url("../index.scss");
+@import url('../index.scss');
 </style>

src/pages/permission-selfhelp-manage/component/basic-form.vue

@@ -5,15 +5,15 @@
 -->
 <template>
   <div>
-    <el-form :class="isDetail ? '' : 'v-form-text'" ref="formItem" :model="sizeForm" :rules="rules" label-width="160px">
+    <el-form :class="isDetail ? '' : 'v-form-text'" ref="ruleForm" :model="sizeForm" :rules="rules" label-width="160px">
       <dg-row>
         <dg-col :span="12">
-          <el-form-item label="审批类型：" prop="approveType">
-            <div v-if="isDetail">{{ sizeForm.approveType }}</div>
+          <el-form-item label="审批类型：" prop="applyType">
+            <div v-if="isDetail">{{ sizeForm.applyType }}</div>
             <div v-else>
               <dg-select
-                :data="approveType"
-                v-model="sizeForm.approveType"
+                :data="applyType"
+                v-model="sizeForm.applyType"
                 @change="handleChangeApproveType"
                 :disabled="type == 'edit'"
               ></dg-select>
@@ -24,31 +24,30 @@
           <el-form-item label="流程名称：" prop="processName">
             <div v-if="isDetail">{{ sizeForm.processName }}</div>
             <div v-else>
-              <dg-select :data="[]" v-model="sizeForm.processName"></dg-select>
+              <dg-select
+                :data="processNameType"
+                v-model="sizeForm.processName"
+                @change="handleChangeProcessName"
+              ></dg-select>
             </div>
           </el-form-item>
         </dg-col>
-        <dg-col :span="12">
-          <el-form-item label="流程编号：" prop="processTitle">
-            <div v-if="isDetail">{{ sizeForm.processTitle }}</div>
-            <div v-else>
-              <el-input v-model="sizeForm.processTitle" :disabled="true"></el-input>
-            </div>
+        <dg-col :span="12" v-if="isDetail">
+          <el-form-item label="流程编号：" prop="businessCode">
+            <div>{{ sizeForm.businessCode }}</div>
           </el-form-item>
         </dg-col>
-        <dg-col :span="12">
-          <el-form-item label="审批单标题：" prop="processTitle">
-            <div v-if="isDetail">{{ sizeForm.processTitle }}</div>
-            <div v-else>
-              <el-input v-model="sizeForm.processTitle" :disabled="true"></el-input>
-            </div>
+        <dg-col :span="12" v-if="isDetail">
+          <el-form-item label="审批单编号：" prop="applicantId">
+            <div>{{ sizeForm.applicantId }}</div>
           </el-form-item>
         </dg-col>
         <dg-col :span="12">
-          <el-form-item label="审批单编号：" prop="processTitle">
-            <div v-if="isDetail">{{ sizeForm.processTitle }}</div>
+          <!-- 流程名称+申请人姓名+日期 -->
+          <el-form-item label="审批单标题：" prop="applyTitle">
+            <div v-if="isDetail">{{ sizeForm.applyTitle }}</div>
             <div v-else>
-              <el-input v-model="sizeForm.processTitle" :disabled="true"></el-input>
+              <el-input v-model="sizeForm.applyTitle" :disabled="true"></el-input>
             </div>
           </el-form-item>
         </dg-col>
@@ -92,7 +91,7 @@
             </div>
           </el-form-item>
         </dg-col>
-        <dg-col :span="12" v-if="sizeForm.approveType == '1'">
+        <dg-col :span="12" v-if="sizeForm.applyType == '1'">
           <el-form-item label="应用方：" prop="applyId">
             <div v-if="isDetail">{{ sizeForm.applyId }}</div>
             <div v-else>
@@ -112,18 +111,18 @@
       <dg-row>
         <dg-col :span="24">
           <!-- <component :is="approveComponent"></component> -->
-          <el-form-item label="审批内容：" class="self-form-item" prop="applyContent">
+          <el-form-item label="审批内容：" class="self-form-item" prop="flowContent">
             <div style="display: flex" v-if="!isDetail">
               <el-input
                 type="textarea"
                 :autosize="{ minRows: 5 }"
-                v-model="sizeForm.applyContent"
+                v-model="sizeForm.flowContent"
                 :disabled="true"
               ></el-input>
               <dg-button style="margin-left: 10px" @click="handleChoice">选择</dg-button>
             </div>
             <div v-else>
-              {{ sizeForm.applyContent }}
+              {{ sizeForm.flowContent }}
             </div>
           </el-form-item>
         </dg-col>
@@ -146,7 +145,7 @@
           </el-form-item>
         </dg-col>
         <!-- 数据资源访问权限 -->
-        <div v-if="sizeForm.approveType == '2'">
+        <div v-if="sizeForm.applyType == '2'">
           <dg-col :span="13">
             <el-form-item label="案件/事件/线索/被查询人员类别：" prop="userType" label-width="250px">
               <div v-if="isDetail">{{ sizeForm.userType }}</div>
@@ -196,14 +195,18 @@
                 </dg-col>
                 <dg-col :span="10">
                   <dg-date-picker
-                    v-model="sizeForm.yxq"
+                    :start-value.sync="sizeForm.startTime"
+                    :end-value.sync="sizeForm.endTime"
                     type="daterange"
                     range-separator="至"
                     start-placeholder="开始日期"
                     end-placeholder="结束日期"
-                    value-format="yyyy-MM-dd"
+                    value-format="yyyy-MM-dd HH:mm:ss"
+                    :default-time="['00:00:00', '23:59:59']"
                     v-show="sizeForm.permissionValidType !== '02'"
                     :picker-options="pickerOptions"
+                    clearable
+                    :unlink-panels="true"
                   >
                   </dg-date-picker>
                 </dg-col>
@@ -245,17 +248,20 @@
     </el-form>
     <div v-footer>
       <dg-button @click="handleCancel">取消</dg-button>
-      <!-- <dg-button type="primary" @click="handleSave">保存</dg-button> -->
+      <dg-button type="primary" @click="handleSave">保存</dg-button>
       <dg-button type="primary" @click="handleSubmit">提交</dg-button>
     </div>
   </div>
 </template>
 
 <script>
-import * as regular from '@/utils/regular';
+import { checkPhone } from '@/utils/regular';
 import appFuncForm from './app-func-form.vue';
 import serviceSourceForm from './service-source-form.vue';
 import dataSourceForm from './data-source-form.vue';
+import moment from 'moment';
+import { savePermissionApply } from '@/api/permission-selfhelp-manage';
+
 export default {
   name: 'FormItem',
   // 接收父页面传过来的属性
@@ -267,11 +273,11 @@ export default {
   },
   // 页面数据绑定
   data() {
-    const checkPhone = (rule, val, callback) => {
+    const checkPhoneValid = (rule, val, callback) => {
       if (!val) {
         return callback(new Error('请输入手机号码'));
       }
-      if (val && !regular.checkPhone(val)) {
+      if (val && !checkPhone(val)) {
         return callback(new Error('请输入正确格式的手机号码'));
       }
       callback();
@@ -279,7 +285,7 @@ export default {
     return {
       sizeForm: {},
       approveComponent: 'appFuncForm',
-      approveType: [
+      applyType: [
         {
           label: '应用功能访问权限',
           value: '0'
@@ -293,15 +299,24 @@ export default {
           value: '2'
         }
       ],
+      processNameType: [
+        {
+          label: '应用功能访问权限申请',
+          value: '0'
+        },
+        {
+          label: '服务资源访问权限申请',
+          value: '1'
+        }
+      ],
       rules: {
-        processTitle: { required: true, message: '请输入流程标题', trigger: 'blur' },
-        applyContent: { required: true, message: '请选择审批内容', trigger: 'blur' },
-        approveType: { required: true, message: '请输入流程类型', trigger: 'blur' },
+        flowContent: { required: true, message: '请选择审批内容', trigger: 'blur' },
+        applyType: { required: true, message: '请选择审批类型', trigger: 'blur' },
         processName: { required: true, message: '请输入流程名称', trigger: 'blur' },
         applyReason: [{ required: true, message: '请输入申请理由', trigger: 'blur' }],
         applicantPhoneNo: [
           { required: true, message: '请输入申请人电话号码', trigger: 'blur' },
-          { validator: checkPhone, trigger: 'blur' }
+          { validator: checkPhoneValid, trigger: 'blur' }
         ],
         permissionValidType: { required: true, message: '请选择有效期类型', trigger: 'change' },
         applyId: [{ required: true, message: '请选择应用方', trigger: 'blur' }], // 应用方
@@ -325,35 +340,85 @@ export default {
         disabledDate(currentDate) {
           return currentDate.getTime() < Date.now() - 8.64e7;
         }
-      }
+      },
+      applySelectKeys: []
     };
   },
-  components: {
-    appFuncForm
-  },
+  components: {},
   computed: {
     isDetail() {
       return this.type == 'detail';
     }
   },
+  watch: {
+    'sizeForm.processName': {
+      handler(val) {
+        if (val) {
+          this.sizeForm.applyTitle =
+            this.processNameType.find((item) => item.value == val).label +
+            '-' +
+            this.sizeForm.applicantName +
+            '-' +
+            moment().format('YYYY-MM-DD');
+          this.sizeForm.businessCode = val;
+        }
+      }
+    },
+    'sizeForm.applyType': {
+      handler(val) {
+        this.sizeForm.applicantId = val;
+      }
+    }
+  },
   methods: {
+    // 改变流程名称
+    handleChangeProcessName() {},
     // 取消
     handleCancel() {
       this.$emit.close();
     },
     // 保存
-    handleSave() {},
+    handleSave() {
+      this.sizeForm.operateType = '1';
+      this.save();
+    },
     // 提交
-    handleSubmit() {},
+    handleSubmit() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          if ( !this.sizeForm.startTime && !this.sizeForm.endTime) {
+            this.$message.warning("请选择开始时间和结束时间!");
+            return;
+          }
+          this.sizeForm.operateType = '2';
+          this.save();
+        }
+      });
+    },
+    save() {
+      const { resourceInfos, applyId, userType, userName, userCode, ...otherInfo } = this.sizeForm;
+      const params = {
+        resourceInfos,
+        workFlow: otherInfo
+      };
+      savePermissionApply(params).then((res) => {
+        if (this.sizeForm.operateType == '2') {
+          this.$message.success('提交成功！');
+        } else {
+          this.$message.success('保存成功！');
+        }
+        this.$emit('success');
+      });
+    },
     // 选择
     handleChoice() {
       const vm = this;
-      const approveType = vm.sizeForm.approveType;
+      const applyType = vm.sizeForm.applyType;
       // 审批内容选择
       let component;
-      if (approveType == '0') {
+      if (applyType == '0') {
         component = appFuncForm;
-      } else if (approveType == '1') {
+      } else if (applyType == '1') {
         component = serviceSourceForm;
       } else {
         component = dataSourceForm;
@@ -363,14 +428,15 @@ export default {
         title: '选择资源',
         shadow: [0.4, '#fff'],
         props: {
-          selectKeys: vm.sizeForm.resourceInfoDTO
+          selectKeys: this.applySelectKeys
         },
         content: component,
         area: ['1200px', '700px'],
         on: {
-          success(approveContent, selectKeys) {
-            vm.sizeForm.resourceInfoDTO = selectKeys;
-            vm.sizeForm.applyContent = vm.sizeForm.applicantName + '申请资源：' + approveContent;
+          success(approveContent, selectKeys, resourceInfos = []) {
+            vm.sizeForm.resourceInfos = resourceInfos;
+            vm.applySelectKeys = selectKeys;
+            vm.sizeForm.flowContent = vm.sizeForm.applicantName + '申请访问资源：' + approveContent;
             layer.close(layer.dialogIndex);
           },
           close() {
@@ -381,7 +447,7 @@ export default {
     },
     // 切换审批类型
     handleChangeApproveType(val) {
-      this.sizeForm.applyContent = '';
+      this.sizeForm.flowContent = '';
       this.sizeForm.resourceInfoDTO = [];
       if (val == '0') {
         this.approveComponent = 'appFuncForm';
@@ -430,28 +496,23 @@ export default {
     if (!this.id) {
       this.sizeForm = {
         // 流程标题
-        processTitle: '',
-        applicantId: id, // 申请人id
+        applyTitle: '',
+        applicantId: '0', // id
         applicantIdcard: idcard, // 申请人身份证号
         applicantName: name, // 申请人姓名
         applicantOrgCode: securityOrg, // 申请人机构代码
         applicantOrgName: securityOrgName, //申请人机构名称
         applicantPhoneNo: mobile, // 申请人号码
-        applyContent: '', // 审核内容
+        flowContent: '', // 审核内容
         applyReason: '', // 申请原因
-        approveTaskIdentifier: '', // 前端无用
-        yxq: '', // 有效日期
-        createTime: '',
         businessCode: '', // 前端无用
         operateType: '', // 1--保存  2--提交
-        processInstanceId: '', //前端无用
-        processType: '',
-        approveType: '0',
+        applyType: '0',
         processName: '',
-        permissionValidType: '',
+        permissionValidType: '02',
         startTime: '',
         endTime: '',
-        resourceInfoDTO: [],
+        resourceInfos: [],
         applyId: '', // 应用方
         userType: '',
         userName: '',

src/pages/permission-selfhelp-manage/index.vue

@@ -8,10 +8,10 @@
     <!-- 搜索项 -->
     <el-form ref="ruleForm" inline :model="form">
       <el-form-item label="流程标题">
-        <el-input v-model="form.processTitle.value" placeholder="请输入流程标题" clearable></el-input>
+        <el-input v-model="form.processName.value" placeholder="请输入流程标题" clearable></el-input>
       </el-form-item>
       <el-form-item label="审批类型">
-        <dg-select v-model="form.type.value" placeholder="请选择授权管理类型" enum="AuthorizeTypeEnum" clearable>
+        <dg-select v-model="form.applyType.value" placeholder="请选择授权管理类型" enum="AuthorizeTypeEnum" clearable>
         </dg-select>
       </el-form-item>
       <el-form-item label="创建时间">
@@ -63,20 +63,21 @@
 <script>
 import Table from '@/pages/common/table';
 import { tableHeader } from './DataConfig';
+import { tableUrl } from "@/api/permission-selfhelp-manage"
 export default {
   components: {
     Table
   },
   data() {
     return {
-      tableUrl: '/appsvr/v2/apps',
+      tableUrl,
       tableHeader,
       form: {
-        processTitle: {
+        processName: {
           value: '',
           op: 'like'
         },
-        type: {
+        applyType: {
           value: '',
           op: '='
         },
@@ -109,6 +110,7 @@ export default {
      * 权限申请
      */
     handleApplyPermission(id) {
+      const vm = this;
       const layer = this.$dgLayer({
         title: '权限自助申请',
         props: {
@@ -119,6 +121,7 @@ export default {
         area: ['1100px', '800px'],
         on: {
           success(params) {
+            vm.handleSearch();
             layer.close(layer.dialogIndex);
           },
           close() {