From af0903a9796ff118ed5c60d64651ab8a7e44e4ca Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Sat, 18 Dec 2021 11:39:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=B4=A6=E5=8F=B7=E8=A7=92?=
 =?UTF-8?q?=E8=89=B2=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/apps/AppAccountRole/AppAccountRole.vue  |  33 ++
 core/apps/AppAccountRole/accountRoleList.vue | 372 +++++++++++++++++++
 core/apps/AppAccountRole/addAccountRole.vue  | 173 +++++++++
 packages/core.import.js                      |   1 +
 4 files changed, 579 insertions(+)
 create mode 100644 core/apps/AppAccountRole/AppAccountRole.vue
 create mode 100644 core/apps/AppAccountRole/accountRoleList.vue
 create mode 100644 core/apps/AppAccountRole/addAccountRole.vue

diff --git a/core/apps/AppAccountRole/AppAccountRole.vue b/core/apps/AppAccountRole/AppAccountRole.vue
new file mode 100644
index 00000000..d1dfd679
--- /dev/null
+++ b/core/apps/AppAccountRole/AppAccountRole.vue
@@ -0,0 +1,33 @@
+<template>
+  <section class="AppAccountRole">
+    <add-account-role v-if="showDetail"/>
+    <account-role-list v-else/>
+  </section>
+</template>
+
+<script>
+import AddAccountRole from "./addAccountRole";
+import AccountRoleList from "./accountRoleList";
+
+export default {
+  name: "AppAccountRole",
+  props: {
+    instance: Function
+  },
+  components: {AccountRoleList, AddAccountRole},
+  computed: {
+    showDetail() {
+      return this.$route.hash == "#add"
+    }
+  },
+  provide() {
+    let {instance} = this
+    return {instance}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppAccountRole {
+}
+</style>
diff --git a/core/apps/AppAccountRole/accountRoleList.vue b/core/apps/AppAccountRole/accountRoleList.vue
new file mode 100644
index 00000000..3ddbaeea
--- /dev/null
+++ b/core/apps/AppAccountRole/accountRoleList.vue
@@ -0,0 +1,372 @@
+<template>
+  <ai-list class="accountRoleList">
+    <ai-title slot="title" title="账号角色管理" isShowBottomBorder/>
+    <template #content>
+      <ai-search-bar>
+        <template #left>
+          <el-button
+              type="primary"
+              icon="el-icon-circle-plus"
+              @click="$router.push({hash:'#add'})"
+              v-if="$permissions('admin_sysaccountrole_add')"
+          >添加
+          </el-button>
+          <el-button
+              icon="el-icon-delete"
+              class="delete-btn del-btn-list"
+              @click="allDelete"
+              :disabled="!Boolean(multipleSelection.length)"
+              v-if="$permissions('admin_sysaccountrole_del')"
+          >删除
+          </el-button>
+        </template>
+        <template #right>
+          <el-input
+              size="small"
+              v-model="searchInfo"
+              placeholder="角色名称"
+              clearable
+              @keyup.enter.native="mhSearch()"
+              prefix-icon="iconfont iconSearch"
+          />
+          <el-button
+              type="primary"
+              icon="iconfont iconSearch"
+              @click="mhSearch()"
+          >查询
+          </el-button
+          >
+          <el-button
+              icon="el-icon-refresh-right"
+              style="padding: 8px 13.5px"
+              @click="resetConditon"
+          >重置
+          </el-button
+          >
+        </template>
+      </ai-search-bar>
+      <el-table
+          :data="tableData"
+          @selection-change="handleSelectionChange"
+          header-cell-class-name="table-header"
+          tooltip-effect="light"
+          max-height="calc(100% - 80px)"
+          row-class-name="table-row"
+          cell-class-name="table-cell"
+      >
+        <el-table-column type="selection" width="55"/>
+        <el-table-column prop="name" label="角色名" width="300"/>
+        <el-table-column label="权限明细" prop="appRoleList">
+          <template slot-scope="scope">
+            <el-tooltip
+                content="更多角色用户请点击详情按钮"
+                placement="top"
+                effect="light"
+                v-if="scope.row.appRoleList.length > 3"
+            >
+              <span>{{ scope.row.appRoleListHtml }}</span>
+            </el-tooltip>
+            <span
+                v-for="(item, index) in scope.row.appRoleList"
+                :key="index"
+                v-else
+            >
+              <span>{{ item.appName }}-</span>
+              <span>{{ item.name }}；</span>
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" align="center">
+          <template class="operation_icon" slot-scope="scope">
+            <el-button
+                type="text"
+                size="small"
+                @click="beforeCopy(scope.row)"
+                v-if="$permissions('admin_sysaccountrole_add')"
+            >复制角色
+            </el-button>
+            <el-button
+                type="text"
+                size="small"
+                @click="detailShow(scope.row)"
+                v-if="$permissions('admin_sysaccountrole_detail')"
+            >详情
+            </el-button>
+            <el-button
+                type="text"
+                size="small"
+                @click="edit(scope.row)"
+                v-if="$permissions('admin_sysaccountrole_edit')"
+            >编辑
+            </el-button
+            >
+            <el-button
+                type="text"
+                size="small"
+                @click="beforeDelete(scope.row)"
+                v-if="$permissions('admin_sysaccountrole_del')"
+            >删除
+            </el-button
+            >
+          </template>
+        </el-table-column>
+        <div slot="empty" class="no-data"></div>
+      </el-table>
+      <div class="pagination">
+        <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            background
+            :page-size="pageSize"
+            :page-sizes="[10, 20, 50, 100, 200]"
+            layout="total,prev, pager, next,sizes, jumper"
+            :total="total"
+        />
+      </div>
+      <el-dialog
+          class="editStyle"
+          :visible.sync="copyDialog"
+          width="520px"
+          @close="dataInit()"
+          title="复制角色"
+      >
+        <el-form :model="form" label-width="80px">
+          <el-form-item
+              label="角色名"
+              :rules="[{ required: true, message: '', trigger: 'blur' }]"
+          >
+            <el-input
+                v-model="roleName"
+                placeholder="请输入..."
+                size="small"
+                clearable
+            />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" style="text-align: center">
+          <el-button
+              style="width: 92px"
+              size="small"
+              class="delete-btn"
+              @click="copyDialog = false"
+          >取消
+          </el-button
+          >
+          <el-button
+              style="width: 92px"
+              size="small"
+              type="primary"
+              @click="copyFn()"
+              :disabled="!Boolean(roleName)"
+          >确认
+          </el-button>
+        </div>
+      </el-dialog>
+      <ai-dialog title="账号角色详情" :visible.sync="viewShow" customFooter>
+        <ai-card title="基本信息">
+          <template #content>
+            <ai-wrapper>
+              <ai-info-item label="账号角色名称" :value="row.name"/>
+            </ai-wrapper>
+          </template>
+        </ai-card>
+        <ai-card title="权限信息">
+          <template #content>
+            <div
+                class="view_info"
+                v-for="(item, index) in row.appRoleList"
+                :key="index"
+            >
+              <i class="iconfont iconProlife" style="color: #999"/>&nbsp;
+              {{ [item.appName, item.name].join(" / ") }}
+            </div>
+          </template>
+        </ai-card>
+        <template #footer>
+          <el-button
+              type="primary"
+              @click="edit(row)"
+              v-if="$permissions('admin_sysaccountrole_edit')"
+          >编辑角色
+          </el-button>
+        </template>
+      </ai-dialog>
+    </template>
+  </ai-list>
+</template>
+<script>
+export default {
+  name: "accountRoleList",
+  inject:{
+    instance:{}
+  },
+  data() {
+    return {
+      searchInfo: "",
+      pageSize: 10,
+      tableData: [],
+      multipleSelection: [],
+      total: 0,
+      pageNum: 1,
+      row: {},
+      deleteIds: [],
+      copyDialog: false,
+      roleName: "",
+      viewShow: false,
+      titleDel: "",
+      form: {},
+    };
+  },
+  methods: {
+    getTableList() {
+      this.tableData = [];
+      this.instance.post(`/admin/role-acc/page`, null, {
+        params: {
+          pageSize: this.pageSize,
+          pageNum: this.pageNum,
+          roleName: this.searchInfo,
+        },
+      }).then((res) => {
+        if (res.code == 0) {
+          this.tableData = res.data.records;
+          this.total = res.data.total;
+          if (this.tableData.length) {
+            this.tableData.map((item) => {
+              if (item.appRoleList.length > 3) {
+                item.appRoleListHtml = `${item.appRoleList[0].appName}-${item.appRoleList[0].name}；${item.appRoleList[1].appName}-${item.appRoleList[1].name}；${item.appRoleList[2].appName}-${item.appRoleList[2].name}；`;
+              }
+            });
+          }
+        }
+      });
+    },
+    dataInit() {
+      this.deleteIds = [];
+      this.multipleSelection = [];
+      this.row = {};
+    },
+    handleSelectionChange(val) {
+      this.deleteIds = [];
+      this.multipleSelection = val;
+      this.multipleSelection.forEach((e) => {
+        this.deleteIds.push(e.id);
+      });
+    },
+    allDelete() {
+      this.titleDel = "确定要执行删除操作吗？";
+      this.deleteRole();
+    },
+    beforeDelete(row) {
+      this.deleteIds = [];
+      this.row = row;
+      this.titleDel = "确定需要删除该角色吗？";
+      this.deleteIds.push(row.id);
+      this.deleteRole();
+    },
+
+    beforeCopy(row) {
+      this.row = row;
+      this.copyDialog = true;
+    },
+    detailShow(row) {
+      this.row = row;
+      this.viewShow = true;
+    },
+    edit(row) {
+      this.$router.push({
+        hash: "#add",
+        query: {
+          info: row,
+        },
+      });
+    },
+    copyFn() {
+      let crr = [];
+      let appRoleList = this.row.appRoleList;
+      appRoleList.forEach((e) => {
+        crr.push(e.id);
+      });
+      this.instance.post(`/admin/role-acc/modify?appRoles=${crr}`, null, {
+        params: {
+          roleName: this.roleName,
+        },
+      })
+      .then((res) => {
+        if (res.code == 0) {
+          this.$message({message: "复制成功", type: "success"});
+          this.copyDialog = false;
+          this.pageNum = 1;
+          this.getTableList();
+        }
+      });
+    },
+    deleteRole() {
+      this.$confirm(this.titleDel, {
+        type: "error",
+      })
+      .then(() => {
+        this.instance
+        .post(`/admin/role-acc/del?ids=${this.deleteIds}`, null, {})
+        .then((res) => {
+          if (res.code == 0) {
+            this.$message.success("删掉角色成功");
+            this.getTableList();
+          }
+        });
+      })
+      .catch(() => {
+      });
+    },
+    mhSearch() {
+      this.pageNum = 1;
+      this.getTableList();
+    },
+    // 重置
+    resetConditon() {
+      this.pageNum = 1;
+      this.searchInfo = "";
+      this.getTableList();
+    },
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.getTableList();
+    },
+    handleCurrentChange(val) {
+      this.pageNum = val;
+      this.getTableList();
+    },
+  },
+  created() {
+    this.getTableList();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.accountRoleList {
+  height: 100%;
+
+  ::v-deep.ai-card {
+    box-shadow: none;
+    border: 1px solid #eee;
+
+    .aibar {
+      height: 40px;
+      background: #f3f6f9;
+    }
+
+    .ai-card__body {
+      padding: 0 16px;
+    }
+  }
+
+  .view_info {
+    color: #333;
+    padding-left: 20px;
+    margin-bottom: 10px;
+
+    .info-title {
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>
diff --git a/core/apps/AppAccountRole/addAccountRole.vue b/core/apps/AppAccountRole/addAccountRole.vue
new file mode 100644
index 00000000..701c464c
--- /dev/null
+++ b/core/apps/AppAccountRole/addAccountRole.vue
@@ -0,0 +1,173 @@
+<template>
+  <section class="addAccountRole">
+    <ai-detail>
+      <ai-title slot="title" :title="pageTitle" isShowBottomBorder isShowBack @onBackClick="$router.push({})"/>
+      <template #content>
+        <ai-card title="基本信息">
+          <template #content>
+            <el-form size="small" label-width="120px">
+              <el-form-item required label="账号角色名称">
+                <el-input clearable v-model="roleName" placeholder="请输入..."/>
+              </el-form-item>
+            </el-form>
+          </template>
+        </ai-card>
+        <ai-card title="角色信息(必选)">
+          <template #content>
+            <el-form size="small" label-width="120px">
+              <el-form-item required label="角色列表">
+                <div class="roleList">
+                  <p class="input">
+                    <el-input placeholder="请输入..." size="small" v-model="filterText" suffix-icon="iconfont iconSearch">
+                    </el-input>
+                    <el-button icon="iconfont iconDelete" size="small" @click="filterText=''">清空</el-button>
+                  </p>
+                  <div class="tree_list">
+                    <el-tree
+                        class="filter-tree"
+                        :data="roleList"
+                        show-checkbox
+                        :props="defaultProps"
+                        default-expand-all
+                        :check-strictly="true"
+                        node-key="id"
+                        :default-checked-keys="defaultId"
+                        :filter-node-method="filterNode"
+                        ref="tree">
+                    </el-tree>
+                  </div>
+                </div>
+              </el-form-item>
+            </el-form>
+          </template>
+        </ai-card>
+      </template>
+      <template #footer>
+        <el-button @click="toAppRole">取消</el-button>
+        <el-button type="primary" @click="confirm">保存</el-button>
+      </template>
+    </ai-detail>
+  </section>
+</template>
+<script>
+
+export default {
+  name: "addAccountRole",
+  inject: {instance: {}},
+  data() {
+    return {
+      roleName: '',
+      id: '',
+      roleList: [],
+      searchVal: '',
+      defaultProps: {
+        children: 'roles',
+        label: 'name'
+      },
+      treeList: [],
+      defaultId: [],
+      filterText: ''
+    }
+  },
+  computed: {
+    isAdd() {
+      return !this.$route.query?.info?.id
+    },
+    pageTitle() {
+      return this.isAdd ? "新增账号角色" : "编辑账号角色"
+    }
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  created() {
+    this.getAppList();
+    if (JSON.stringify(this.$route.query) != '{}') {
+      this.roleName = this.$route.query.info.name;
+      this.id = this.$route.query.info.id;
+      this.$route.query.info.appRoleList.forEach(e => {
+        this.defaultId.push(e.id)
+      })
+    }
+  },
+  methods: {
+    //查询下拉列表
+    getAppList() {
+      this.instance.post(`/admin/role-app/list-all`).then(res => {
+        if (res.code == 0) {
+          this.roleList = res.data;
+          this.roleList.forEach(e => {
+            e.disabled = true;
+          })
+        }
+      })
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    },
+    confirm() {
+      let crr = [];
+      let arrCheckList = [];
+      arrCheckList = this.$refs.tree.getCheckedKeys();
+      for (let i = 0; i < arrCheckList.length; i++) {
+        crr.push(arrCheckList[i]);
+      }
+      if (!this.roleName) {
+        this.$message.error('请输入账号角色名称')
+        return;
+      }
+      if (crr.length == 0) {
+        this.$message.error('请选择角色列表')
+        return;
+      }
+      this.instance.post(`/admin/role-acc/modify?appRoles=${crr}`, null, {
+        params: {
+          roleName: this.roleName,
+          id: this.id
+        }
+      }).then(res => {
+        if (res?.code == 0) {
+          this.$message({message: '保存成功', type: 'success'});
+          this.toAppRole()
+        }
+      })
+    },
+    //取消 返回
+    toAppRole() {
+      this.$router.push({})
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.addAccountRole {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  position: relative;
+
+  .roleList {
+    display: inline-block;
+    width: 340px;
+    height: 420px;
+    background-color: #fcfcfc;
+    border-radius: 2px;
+    border: solid 1px #d0d4dc;
+
+    .input {
+      display: flex;
+      justify-content: space-between;
+      padding: 5px;
+      margin: 0;
+    }
+
+    .tree_list {
+      height: 370px;
+      overflow: auto;
+    }
+  }
+}
+</style>
diff --git a/packages/core.import.js b/packages/core.import.js
index bd366fd8..8e88643e 100644
--- a/packages/core.import.js
+++ b/packages/core.import.js
@@ -4,4 +4,5 @@ export default [
   {label: "企业微信配置", name: "AppQyWxConfig"},
   {label: "个人中心", name: "AppUserInfo"},
   {label: "权限管理", name: "AppRightsManager"},
+  {label: "账号角色", name: "AppAccountRole"}
 ].map(e => ({...e, component: require(`../core/apps/${e.name}/${e.name}`)?.default}))