机构配额管理-机构树改为下拉机构树

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

@@ -4,80 +4,81 @@
 @Date: 2021-05-20 15：34
 -->
 <template>
-    <div>
-        <dg-tree-drop
-            ref="tree"
-            v-model="value"
-            :props="props"
-            :tree-props="treeProps"
-            clearable
-            filterable
-            visible-type="branch"
-            radioType= "all"
-            :placeholder="placeholder"
-            @change="handleChange"
-        >
-        </dg-tree-drop>
-    </div>
+  <div>
+    <dg-tree-drop
+      ref="tree"
+      style="width: 280px"
+      v-model="value"
+      :props="props"
+      :tree-props="treeProps"
+      clearable
+      filterable
+      visible-type="branch"
+      radioType="all"
+      :placeholder="placeholder"
+      @change="handleChange"
+    >
+    </dg-tree-drop>
+  </div>
 </template>
 
 <script>
-import * as commonApi from "@/api/common";
+import * as commonApi from '@/api/common';
 export default {
-    props: {
-      nodeKey: {
-          type: String,
-          default:"code",
-      },
-        apiName: {
-            type: String,
-            default: "getTree"
-        },
-        placeholder: {
-            type: String,
-            default: "请选择所属单位"
-        }
+  props: {
+    nodeKey: {
+      type: String,
+      default: 'code'
+    },
+    apiName: {
+      type: String,
+      default: 'getTree'
     },
-    components: {},
-    data() {
-        return {
-            value: "",
-            props: {
-                value: this.nodeKey,
-                label: "name",
-                children: "children",
-                isLeaf(data) {
-                    return data.isParent !== true;
-                }
-            },
-            treeProps: {
-                nodeKey: this.nodeKey,
-                lazy: true,
-                load: this.loadNode
-            }
-        };
+    placeholder: {
+      type: String,
+      default: '请选择所属单位'
+    },
+  },
+  components: {},
+  data() {
+    return {
+      value: '',
+      props: {
+        value: this.nodeKey,
+        label: 'name',
+        children: 'children',
+        isLeaf(data) {
+          return data.isParent !== true;
+        }
+      },
+      treeProps: {
+        nodeKey: this.nodeKey,
+        lazy: true,
+        load: this.loadNode
+      }
+    };
+  },
+  computed: {},
+  methods: {
+    loadNode(node, resolve) {
+      this.getTree(node.level === 0 ? void 0 : node.data.id, resolve, node.level);
     },
-    computed: {},
-    methods: {
-        loadNode(node, resolve) {
-            this.getTree(node.level === 0 ? void 0 : node.data.id, resolve, node.level);
-        },
-        // 组织机构
-        getTree(id, resolve) {
-            const { params, apiName } = this;
-            commonApi[apiName]({ id, ...params })
-                .then((res) => {
-                    // 就为了存根节点, 用于刷新
-                    return resolve(res || []);
-                })
-                .catch(() => resolve([]));
-        },
-         handleChange(val) {
-            this.$emit("submitTreeValue", val)
-         }
+    // 组织机构
+    getTree(id, resolve) {
+      const { params, apiName } = this;
+      commonApi[apiName]({ id, ...params })
+        .then((res) => {
+          // 就为了存根节点, 用于刷新
+          return resolve(res || []);
+        })
+        .catch(() => resolve([]));
     },
-    created() {},
-    mounted() {}
+    handleChange(val) {
+      this.$emit('submitTreeValue', val);
+    }
+  },
+  created() {},
+  mounted() {}
 };
 </script>
 

src/pages/data-auth-module/auth-subject-manage/user-prop-manage/index.vue

@@ -20,7 +20,12 @@
       </el-form-item>
 
       <el-form-item label="所属机构">
-        <select-tree ref="selectTree" api-name="getOrgTree" @submitTreeValue="getTreeValue" :key="key" placeholder="请选择所属机构"></select-tree>
+        <select-tree
+          ref="selectTree"
+          api-name="getOrgTree"
+          @submitTreeValue="getTreeValue"
+          placeholder="请选择所属机构"
+        ></select-tree>
       </el-form-item>
 
       <el-form-item>
@@ -38,7 +43,7 @@
     </div>
     <Table ref="myTable" :url="tableUrl" :headerData="UserTableData" :condition="form">
       <!-- 所属机构 -->
-      <template #orgName="{row}">
+      <template #orgName="{ row }">
         <span v-if="row.userType + '' === '30'"></span>
         <span v-else>{{ row.orgName }}</span>
       </template>
@@ -117,8 +122,7 @@ export default {
       options: [],
       UserTableData,
       tableUrl: authUserTableUrl,
-      LatestSyncTime: '',
-      key: 0
+      LatestSyncTime: ''
     };
   },
   computed: {}, // 计算属性
@@ -136,7 +140,7 @@ export default {
      */
     handleReset() {
       if (this.form.orgCode.value) {
-        this.key++;
+        this.$refs.selectTree.value = '';
       }
       for (const key in this.form) {
         this.form[key].value = '';
@@ -160,7 +164,7 @@ export default {
             layer.close(layer.dialogIndex);
           }
         },
-        cancel: function(index, layero) {
+        cancel: function (index, layero) {
           // 关闭对应弹窗的ID
           layer.close(index);
           return false;
@@ -172,7 +176,7 @@ export default {
      * @description:同步方法，假同步
      */
     handleSynchro() {
-      authUserSync().then(res => {
+      authUserSync().then((res) => {
         this.$message.success('同步中，若数据量大，可能会存在延迟，请稍后自行刷新！');
         this.handleSearch();
       });
@@ -181,7 +185,7 @@ export default {
      * @description:详情
      */
     handleViewDetail(row) {
-      const userTypeName = this.userType.find(item => item.value == row.userType).label;
+      const userTypeName = this.userType.find((item) => item.value == row.userType).label;
       const layer = this.$dgLayer({
         title: `${userTypeName}详情`,
         shade: [0.4, '#FFF'],
@@ -206,7 +210,7 @@ export default {
     }
   },
   created() {
-    baseApi.fetchEnum('UserTypeEnum').then(res => {
+    baseApi.fetchEnum('UserTypeEnum').then((res) => {
       this.userType = res.data;
     });
   } // 组件创建完成后

src/pages/empower-manage/institutional-quotas-manage/index.vue

@@ -4,141 +4,107 @@
     @Date:  2020-08-03
 -->
 <template>
-    <dg-row :gutter="20" class="authen-main">
-        <dg-col :span="5">
-            <tree
-                ref="tree"
-                class="u-pm__left"
-                title="机构列表"
-                @handleGetNode="handleGetNode"
-                @submitRootNode="submitRootNode"
-            />
-        </dg-col>
-        <dg-col :span="19">
-            <el-form ref="form" :model="reportPersionForm" label-suffix=":" inline>
-                <el-form-item label="应用系统名称" prop="applyName.value">
-                    <el-input
-                        clearable
-                        placeholder="请输入应用系统名称"
-                        v-model="reportPersionForm.applyName.value"
-                        @keyup.enter.native="doSearch"
-                    ></el-input>
-                </el-form-item>
-                <el-form-item>
-                    <dg-button type="primary" icon="el-icon-search" @click="doSearch">查询</dg-button>
-                    <dg-button type="primary" icon="el-icon-refresh-right" @click="hanldReset">重置</dg-button>
-                </el-form-item>
-            </el-form>
-            <Table
-                ref="myTable"
-                :url="tableUrl"
-                :headerData="titleData"
-                :condition="reportPersionForm"
-                class="myTable"
-                :lazyLoad="true"
-            >
-                <dg-table-column label="应用系统名称" align="center">
-                    <template slot-scope="{ row }">
-                        <a href="javascript:;" @click="handleDetail(row)">{{ row.name }}</a>
-                    </template>
-                </dg-table-column>
-            </Table>
-        </dg-col>
-    </dg-row>
+  <dg-row>
+    <el-form ref="form" :model="form" label-suffix=":" inline>
+      <el-form-item label="所属机构">
+        <select-tree
+          ref="selectTree"
+          api-name="getOrgTree"
+          @submitTreeValue="getTreeValue"
+          nodeKey="id"
+          placeholder="请选择所属机构"
+        ></select-tree>
+      </el-form-item>
+      <el-form-item label="应用系统名称" prop="applyName.value">
+        <el-input
+          clearable
+          placeholder="请输入应用系统名称"
+          v-model="form.applyName.value"
+          @keyup.enter.native="doSearch"
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+        <dg-button type="primary" icon="el-icon-search" @click="handleSearch">查询</dg-button>
+        <dg-button type="primary" icon="el-icon-refresh-right" @click="hanldReset">重置</dg-button>
+      </el-form-item>
+    </el-form>
+    <Table ref="myTable" :url="tableUrl" :headerData="titleData" :condition="form" class="myTable">
+      <dg-table-column label="应用系统名称" align="center">
+        <template slot-scope="{ row }">
+          <a href="javascript:;" @click="handleDetail(row)">{{ row.name }}</a>
+        </template>
+      </dg-table-column>
+    </Table>
+  </dg-row>
 </template>
 
 <script>
-import Tree from "@/pages/common/tree";
-import Table from "@/pages/common/table";
-import Editor from "./edit";
-import * as empowMegApi from "@/api/empower-manage";
+import Table from '@/pages/common/table';
+import Editor from './edit';
+import { tableUrl } from '@/api/empower-manage';
+import selectTree from '@/pages/common/select-tree';
 export default {
-    name: "index",
-    components: {
-        Tree,
-        Table
+  name: 'index',
+  components: {
+    Table,
+    selectTree
+  },
+  // 接收父页面传过来的属性
+  props: {},
+  // 页面数据绑定
+  data() {
+    return {
+      tableUrl,
+      titleData: [
+        {
+          label: '应用角色',
+          prop: 'roles',
+          fixed: 'right'
+        }
+      ],
+      form: {
+        applyName: { value: '', op: 'like' },
+        orgId: { value: '', op: '=' }
+      }
+    };
+  },
+  // 计算属性
+  computed: {},
+  // 方法
+  methods: {
+    handleSearch() {
+      this.$refs.myTable.handleSearchClick();
     },
-    // 接收父页面传过来的属性
-    props: {},
-    // 页面数据绑定
-    data() {
-        return {
-            tableUrl: empowMegApi.tableUrl,
-            titleData: [
-                {
-                    label: "应用角色",
-                    prop: "roles",
-                    fixed: "right"
-                }
-            ],
-            reportPersionForm: {
-                applyName: { value: "", op: "like" },
-                orgId: { value: "", op: "=" }
-            }
-        };
+    // 重置
+    hanldReset() {
+      this.$refs.selectTree.value = '';
+      for (const key in this.form) {
+        this.form[key].value = '';
+      }
     },
-    // 计算属性
-    computed: {},
-    // 方法
-    methods: {
-        handleGetNode({ id }) {
-            const that = this;
-            const oldVal = that.reportPersionForm.orgId.value;
-            if (oldVal != id) {
-                that.reportPersionForm.orgId.value = id;
-                that.handleSearch();
-            }
-        },
-        // 默认查询跟节点
-        submitRootNode({ id, name }) {
-            const that = this;
-            this.$nextTick(() => {
-                that.handleGetNode({ id, name });
-            });
-        },
-        handleSearch() {
-            this.$refs.myTable.handleSearchClick();
-        },
-        doSearch() {
-            this.reportPersionForm.orgId.value = "";
-            this.handleSearch();
-        },
-        // 重置
-        hanldReset() {
-            const that = this;
-            that.reportPersionForm.orgId.value = "";
-            this.$refs.form.resetFields();
+    handleDetail(row) {
+      const that = this;
+      const layer = that.$dgLayer({
+        title: '机构配额详情',
+        shade: [0.4, '#fff'],
+        props: {
+          row
         },
-        handleDetail(row) {
-            const that = this;
-            const layer = that.$dgLayer({
-                title: "机构配额详情",
-                shade: [0.4, "#fff"],
-                props: {
-                    row
-                },
-                area: ["1400px", "837px"],
-                content: Editor,
-                on: {}
-            });
-        }
+        area: ['1400px', '837px'],
+        content: Editor,
+        on: {}
+      });
     },
-    // 创建组件时调用
-    created() {}
+    getTreeValue(val) {
+      this.form.orgId.value = val;
+    }
+  },
+  // 创建组件时调用
+  created() {}
 };
 </script>
 <style lang="scss">
-@import "@/assets/style/my-card.scss";
 </style>
 <style scope lang="scss">
-.myTable {
-    .a-link {
-        color: blue;
-        cursor: pointer;
-    }
-    .a-visible-link {
-        color: #000;
-        cursor: default;
-    }
-}
+
 </style>

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

@@ -23,7 +23,7 @@
       <dg-button type="primary" @click="handleSetListLevel" icon="el-icon-setting">批量设置名单级别</dg-button>
       <dg-button type="primary" @click="handleBatchRemove" icon="el-icon-remove-outline">批量移除</dg-button>
     </dg-row>
-    <vxe-table ref="vxeGrid" :data="tableData" v-bind="gridOptions">
+    <vxe-table ref="vxeGrid" :data="tableData" v-bind="gridOptions" highlight-hover-row>
       <vxe-table-column type="checkbox" width="60" align="center">
         <template #header="row">
           <span class="custom-checkbox">

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

@@ -14,7 +14,7 @@
       </el-form-item>
     </el-form>
     <!-- 表格树 -->
-    <vxe-table ref="vxeGrid" :data="sourceData" v-bind="gridOptions">
+    <vxe-table ref="vxeGrid" :data="sourceData" v-bind="gridOptions" highlight-hover-row>
       <vxe-table-column type="checkbox" width="60" align="center">
         <template #header="row">
           <span class="custom-checkbox">

src/pages/list-manage/red-list-manage/index.scss

@@ -19,4 +19,7 @@
   }
   /deep/ .vxe-table--render-default .vxe-cell--checkbox .vxe-checkbox--icon:before {   
       border: 1px solid rgba(0, 0, 0, 0.15);
+  }
+  /deep/ .vxe-body--row:hover {
+     background-color: rgba(24, 144, 255, 0.08);
   }

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

@@ -20,7 +20,6 @@
             api-name="getOrgTree"
             nodeKey="id"
             @submitTreeValue="getTreeValue"
-            :key="key"
           ></select-tree>
         </el-form-item>
         <el-form-item>
@@ -70,8 +69,7 @@ export default {
         orgId: { value: '', op: '=' },
         name: { value: '', op: 'like' },
         idcard: { value: '', op: 'like' }
-      },
-      key: 0
+      }
     };
   },
   computed: {},
@@ -87,7 +85,7 @@ export default {
      */
     handleReset() {
       if (this.form.orgId.value) {
-        this.key++;
+        this.$refs.selectTree.value = '';
       }
       for (const key in this.form) {
         this.form[key].value = '';

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

@@ -18,13 +18,7 @@
         <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"
-          nodeKey="id"
-          @submitTreeValue="getTreeValue"
-          :key="key"
-        ></select-tree>
+        <select-tree ref="selectTree" api-name="getOrgTree" nodeKey="id" @submitTreeValue="getTreeValue"></select-tree>
       </el-form-item>
 
       <el-form-item>
@@ -92,7 +86,6 @@ export default {
           op: 'like'
         }
       },
-      key: 0,
       userListHeader: [
         {
           label: '姓名',
@@ -134,7 +127,7 @@ export default {
      */
     handleReset() {
       if (this.form.orgId.value) {
-        this.key++;
+        this.$refs.selectTree.value = '';
       }
       for (const key in this.form) {
         this.form[key].value = '';

src/pages/statistics-manage/role-authorization/index.vue

@@ -1,141 +1,133 @@
 /** * 组件名称:角色授权情况 * @author:laiyh * @Date:2020-07-28 */
 
 <template>
-    <dg-row>
-        <el-form ref="form" :model="form" inline label-suffix=":" id="my-form">
-            <dg-row>
-                <dg-col :span="24">
-                    <el-form-item prop="appId.value" label="应用系统名称">
-                        <dg-select
-                            v-model="form.appId.value"
-                            clearable
-                            filterable
-                            :data="appNames"
-                            valueName="code"
-                            labelName="value"
-                            placeholder="请选择应用系统名称"
-                            @change="handleChangeSysName"
-                        ></dg-select>
-                    </el-form-item>
-                </dg-col>
-            </dg-row>
-        </el-form>
-        <p class="table-text__detail" v-show="isShowNums">
-            当前应用拥有角色【<span class="text-detail__number">{{ roleNums }}</span
-            >】个，应用分配总名额 【<span class="text-detail__number">{{ initNums }}</span
-            >】名
-        </p>
-        <Table ref="myTable" :url="tableUrl" :headerData="headerData" :condition="form" :lazyLoad="true">
-            <dg-table-column label="机构名称" prop="name" align="center" fixed="left">
-                <template slot-scope="{ row }">
-                    <a href="javascript:;" @click="handleDetail(row)">{{ row.name }}</a>
-                </template>
-            </dg-table-column>
-        </Table>
-    </dg-row>
+  <dg-row>
+    <el-form ref="form" :model="form" inline label-suffix=":">
+      <el-form-item prop="appId.value" label="应用系统名称">
+        <dg-select
+          v-model="form.appId.value"
+          clearable
+          filterable
+          :data="appNames"
+          valueName="code"
+          labelName="value"
+          placeholder="请选择应用系统名称"
+          style="width: 280px"
+          @change="handleChangeSysName"
+        ></dg-select>
+      </el-form-item>
+    </el-form>
+    <p class="table-text__detail" v-show="isShowNums">
+      当前应用拥有角色【<span class="text-detail__number">{{ roleNums }}</span
+      >】个，应用分配总名额 【<span class="text-detail__number">{{ initNums }}</span
+      >】名
+    </p>
+    <Table ref="myTable" :url="tableUrl" :headerData="headerData" :condition="form" :lazyLoad="true">
+      <dg-table-column label="机构名称" prop="name" align="center" fixed="left">
+        <template slot-scope="{ row }">
+          <a href="javascript:;" @click="handleDetail(row)">{{ row.name }}</a>
+        </template>
+      </dg-table-column>
+    </Table>
+  </dg-row>
 </template>
 
 <script>
-import Table from "@/pages/common/table";
-import Editor from "./editor";
-import * as statisticsApi from "@/api/statistics-manage";
-const areaEditor = ["910px", "560px"];
+import Table from '@/pages/common/table';
+import Editor from './editor';
+import * as statisticsApi from '@/api/statistics-manage';
+const areaEditor = ['910px', '560px'];
 
 export default {
-    name: "",
-    components: { Table },
-    // 接收父节点的参数
-    props: {},
-    data() {
-        return {
-            tableUrl: statisticsApi.tableUrl,
-            form: {
-                appId: { value: "", op: "=" }
-            },
-            headerData: [
-                { label: "机构代码", prop: "code", fixed: "left" },
-                { label: "应分配名额", prop: "mustQuotas" },
-                { label: "实际分配名额", prop: "quotaed" },
-                { label: "待分配名额", prop: "kfpme" },
-                { label: "完成情况", prop: "overRate" }
-            ],
-            // appNames
-            appNames: [],
-            roleNums: "",
-            initNums: "",
-            isShowNums: false
-        };
+  name: '',
+  components: { Table },
+  // 接收父节点的参数
+  props: {},
+  data() {
+    return {
+      tableUrl: statisticsApi.tableUrl,
+      form: {
+        appId: { value: '', op: '=' }
+      },
+      headerData: [
+        { label: '机构代码', prop: 'code', fixed: 'left' },
+        { label: '应分配名额', prop: 'mustQuotas' },
+        { label: '实际分配名额', prop: 'quotaed' },
+        { label: '待分配名额', prop: 'kfpme' },
+        { label: '完成情况', prop: 'overRate' }
+      ],
+      // appNames
+      appNames: [],
+      roleNums: '',
+      initNums: '',
+      isShowNums: false
+    };
+  },
+  // 方法
+  methods: {
+    handleSearch() {
+      this.$refs.myTable.handleSearchClick();
     },
-    // 方法
-    methods: {
-        handleSearch() {
-            this.$refs.myTable.handleSearchClick();
-        },
-        // 应用系统下拉
-        getAppName() {
-            const that = this;
-            statisticsApi
-                .getAppName()
-                .then(res => {
-                    that.appNames = res;
-                })
-                .catch(error => {
-                    that.$error("获取应用系统失败！");
-                });
-        },
-        // 应用拥有的角色、配额
-        getRoleQuotasInfo(appId) {
-            const that = this;
-            statisticsApi.getRoleQuotasInfo(appId).then(res => {
-                that.roleNums = res.roleNums;
-                that.initNums = res.initNums;
-            });
-        },
-        // 应用系统名称改变
-        handleChangeSysName(appId) {
-            if (appId) {
-                this.handleSearch();
-                this.getRoleQuotasInfo(appId);
-                this.isShowNums = true;
-            }
-        },
-        handleDetail({ id }) {
-            const that = this;
-            const layer = that.$dgLayer({
-                title: "分局应用授权情况",
-                shadow: [0.4, "#fff"],
-                area: areaEditor,
-                props: {
-                    orgId: id,
-                    appId: that.form.appId.value,
-                    isInit: true
-                },
-                content: Editor
-            });
-        }
+    // 应用系统下拉
+    getAppName() {
+      const that = this;
+      statisticsApi
+        .getAppName()
+        .then((res) => {
+          that.appNames = res;
+        })
+        .catch((error) => {
+          that.$error('获取应用系统失败！');
+        });
+    },
+    // 应用拥有的角色、配额
+    getRoleQuotasInfo(appId) {
+      const that = this;
+      statisticsApi.getRoleQuotasInfo(appId).then((res) => {
+        that.roleNums = res.roleNums;
+        that.initNums = res.initNums;
+      });
+    },
+    // 应用系统名称改变
+    handleChangeSysName(appId) {
+      if (appId) {
+        this.handleSearch();
+        this.getRoleQuotasInfo(appId);
+        this.isShowNums = true;
+      }
     },
-    // 页面创建完成$data可访问 $el不可以访问
-    created() {
-        this.getAppName();
+    handleDetail({ id }) {
+      const that = this;
+      const layer = that.$dgLayer({
+        title: '分局应用授权情况',
+        shadow: [0.4, '#fff'],
+        area: areaEditor,
+        props: {
+          orgId: id,
+          appId: that.form.appId.value,
+          isInit: true
+        },
+        content: Editor
+      });
     }
+  },
+  // 页面创建完成$data可访问 $el不可以访问
+  created() {
+    this.getAppName();
+  }
 };
 </script>
 
 <style lang="scss" scope>
-#my-form {
-    .el-select {
-        width: 800px;
-    }
-}
 .table-text__detail {
-    .text-detail__number {
-        color: blue;
-        font-size: 20px;
-        font-weight: bold;
-    }
+  .text-detail__number {
+    color: blue;
+    font-size: 20px;
+    font-weight: bold;
+  }
 }
 .orgName__aLink {
-    color: blue;
-    cursor: pointer;
+  color: blue;
+  cursor: pointer;
 }
 </style>