cloud-web-corejs 1.0.54-dev.802 → 1.0.54-dev.803

package/src/views/user/role/edit.vue

@@ -96,11 +96,11 @@
                 </tr>
                 <tr>
                   <th>{{ $t1("创建人") }}</th>
-                  <td>{{ role.createBy }}</td>
+                  <td>{{ role._createBy }}</td>
                   <th>{{ $t1("创建时间") }}</th>
                   <td>{{ role.createDate }}</td>
                   <th>{{ $t1("更新人") }}</th>
-                  <td>{{ role.modifyBy }}</td>
+                  <td>{{ role._modifyBy }}</td>
                   <th>{{ $t1("更新时间") }}</th>
                   <td>{{ role.modifyDate }}</td>
                 </tr>
@@ -117,7 +117,11 @@
                   <i
                     class="fr"
                     @click="$set(item, 'visibleRole', !item.visibleRole)"
-                    :class="!item.visibleRole ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
+                    :class="
+                      !item.visibleRole
+                        ? 'el-icon-arrow-up'
+                        : 'el-icon-arrow-down'
+                    "
                   ></i>
                 </div>
                 <div class="c" :class="{ hide: item.visibleRole }">
@@ -170,7 +174,9 @@
                   <i
                     class="fr"
                     @click="visibleHome = !visibleHome"
-                    :class="!visibleHome ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
+                    :class="
+                      !visibleHome ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
+                    "
                   ></i>
                 </div>
                 <div class="c" :class="{ hide: visibleHome }">
@@ -195,13 +201,21 @@
         <baseTabPane :label="$t1('移动端菜单信息')">
           <template #default>
             <div class="role-box">
-              <div class="item" v-for="(item, index) in allMobileMenus" :key="index">
+              <div
+                class="item"
+                v-for="(item, index) in allMobileMenus"
+                :key="index"
+              >
                 <div class="t">
                   {{ item.menuName }}
                   <i
                     class="fr"
                     @click="$set(item, 'visibleRole', !item.visibleRole)"
-                    :class="!item.visibleRole ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
+                    :class="
+                      !item.visibleRole
+                        ? 'el-icon-arrow-up'
+                        : 'el-icon-arrow-down'
+                    "
                   ></i>
                 </div>
                 <div class="c" :class="{ hide: item.visibleRole }">
@@ -329,7 +343,8 @@ export default {
       this.$refs.editForm.$baseValidate((valid) => {
         if (valid) {
           this.$baseConfirm(this.$t1("您确定要保存吗？")).then(() => {
-            var url = USER_PREFIX + (this.isEdit ? `/role/update` : `/role/save`);
+            var url =
+              USER_PREFIX + (this.isEdit ? `/role/update` : `/role/save`);
             let formData = this.role;
             formData.menuIds = this.getMenuFormData();
             formData.mobileMenuIds = this.getMobileMenuFormData();
@@ -501,10 +516,18 @@ export default {
         that.handlePermission(item, menuRolePermDTOs, menuRolePermOrgDTOs);
         if (item.children) {
           item.children.forEach(function (subItem) {
-            that.handlePermission(subItem, menuRolePermDTOs, menuRolePermOrgDTOs);
+            that.handlePermission(
+              subItem,
+              menuRolePermDTOs,
+              menuRolePermOrgDTOs
+            );
             if (subItem.children) {
               subItem.children.forEach(function (thrItem) {
-                that.handlePermission(thrItem, menuRolePermDTOs, menuRolePermOrgDTOs);
+                that.handlePermission(
+                  thrItem,
+                  menuRolePermDTOs,
+                  menuRolePermOrgDTOs
+                );
               });
             }
           });

package/src/views/user/role/list.vue

@@ -2,36 +2,80 @@
   <div id="containt">
     <el-tabs v-model="activeName" class="tab-box">
       <el-tab-pane :label="$t1('常规')" name="first">
-        <editView v-if="showEdit" visible-key="showEdit" :_dataId.sync="dataId" :parent-target="_self"
-                  @reload="$reloadHandle"></editView>
+        <editView
+          v-if="showEdit"
+          visible-key="showEdit"
+          :_dataId.sync="dataId"
+          :parent-target="_self"
+          @reload="$reloadHandle"
+        ></editView>
+        <vocEditView
+          v-if="showVocEdit"
+          visible-key="showVocEdit"
+          :_dataId.sync="dataId"
+          :parent-target="_self"
+          @reload="$reloadHandle"
+        ></vocEditView>
       </el-tab-pane>
       <el-tab-pane :label="$t1('列表')" name="second">
         <div class="grid-height">
-          <vxe-grid ref="table-m1" v-bind="vxeOption" @resizable-change="$vxeTableUtil.onColumnWitchChange"
-                    @custom="$vxeTableUtil.customHandle">
+          <vxe-grid
+            ref="table-m1"
+            v-bind="vxeOption"
+            @resizable-change="$vxeTableUtil.onColumnWitchChange"
+            @custom="$vxeTableUtil.customHandle"
+          >
             <template #form>
               <div class="clearfix screen-btns">
                 <div class="fl">
-                  <vxe-button status="primary" class="button-sty" icon="el-icon-plus" @click="openEditDialog">
-                    {{ $t1('新增') }}
+                  <vxe-button
+                    status="primary"
+                    class="button-sty"
+                    icon="el-icon-plus"
+                    @click="openEditDialog"
+                  >
+                    {{ $t1("新增") }}
                   </vxe-button>
-                  <base-table-export :option="{ title: $t1('用户角色导出'), targetRef: 'table-m1'}"
-                                     :parent-target="_self"/>
+                  <base-table-export
+                    :option="{
+                      title: $t1('用户角色导出'),
+                      targetRef: 'table-m1',
+                    }"
+                    :parent-target="_self"
+                  />
                 </div>
                 <div class="fr">
-                  <vxe-button icon="el-icon-brush" class="button-sty" @click="resetEvent" type="text" status="primary"
-                              plain>{{ $t1('刷新') }}
+                  <vxe-button
+                    icon="el-icon-brush"
+                    class="button-sty"
+                    @click="resetEvent"
+                    type="text"
+                    status="primary"
+                    plain
+                    >{{ $t1("刷新") }}
                   </vxe-button>
-                  <vxe-button status="warning" icon="el-icon-search" class="button-sty" @click="searchEvent">
-                    {{ $t1('搜索') }}
+                  <vxe-button
+                    status="warning"
+                    icon="el-icon-search"
+                    class="button-sty"
+                    @click="searchEvent"
+                  >
+                    {{ $t1("搜索") }}
                   </vxe-button>
                 </div>
               </div>
-              <vxe-form ref="form" class="screen-box" title-width="92px" title-align="right" :data="formData"
-                        @submit="searchEvent" @reset="searchEvent">
-                <vxe-form-item :title="$t1('用户角色')+':'" field="name">
+              <vxe-form
+                ref="form"
+                class="screen-box"
+                title-width="92px"
+                title-align="right"
+                :data="formData"
+                @submit="searchEvent"
+                @reset="searchEvent"
+              >
+                <vxe-form-item :title="$t1('用户角色') + ':'" field="name">
                   <template v-slot>
-                    <el-input v-model="formData.name" size="small" clearable/>
+                    <el-input v-model="formData.name" size="small" clearable />
                   </template>
                 </vxe-form-item>
                 <!-- <vxe-form-item :title="$t1('角色编码')+':'" field="code">
@@ -49,62 +93,79 @@
 </template>
 
 <script>
-import editView from './edit.vue';
+import editView from "./edit.vue";
+import vocEditView from "./voc_edit.vue";
 
 export default {
-  name: 'role:list',
+  name: "role:list",
   components: {
-    editView
-  },
-  created() {
+    editView,
+    vocEditView,
   },
+  created() {},
   mounted() {
-    this.initTableList();
+    this.$getBaseDicts({
+      code: "sysType",
+      success: ({ dicts }) => {
+        this.showVocMenuBtn = (dicts || []).some((item) => item.sn === "voc");
+      },
+    }).finally(() => {
+      this.initTableList();
+    });
   },
   data() {
     return {
-      activeName: 'second',
+      activeName: "second",
       dataId: 0,
       showEdit: false,
+      showVocEdit: false,
+      showVocMenuBtn: false,
       vxeOption: {},
-      formData: {}
+      formData: {},
     };
   },
   methods: {
     searchEvent() {
-      this.$refs['table-m1'].commitProxy('reload');
+      this.$refs["table-m1"].commitProxy("reload");
     },
     resetEvent() {
       this.formData = {};
-      this.$refs['table-m1'].commitProxy('reload');
+      this.$refs["table-m1"].commitProxy("reload");
     },
     openEditDialog(id) {
-      this.dataId = !id || typeof id == 'object' ? '' : id;
-      this.activeName = 'first';
-      this.$openEditView('showEdit');
+      this.dataId = !id || typeof id == "object" ? "" : id;
+      this.activeName = "first";
+      this.showVocEdit = false;
+      this.$openEditView("showEdit");
+    },
+    openVocEditDialog(id) {
+      this.dataId = !id || typeof id == "object" ? "" : id;
+      this.activeName = "first";
+      this.showEdit = false;
+      this.$openEditView("showVocEdit");
     },
     initTableList() {
       let tableOption = {
         vue: this,
-        tableRef: 'table-m1',
-        tableName: 'basic_role_list-m1',
-        path: USER_PREFIX + '/role/listCurrentPage',
+        tableRef: "table-m1",
+        tableName: "basic_role_list-m1",
+        path: USER_PREFIX + "/role/listCurrentPage",
         param: () => {
           return this.formData;
         },
         columns: [
           {
-            type: 'checkbox',
-            fixed: 'left',
+            type: "checkbox",
+            fixed: "left",
             width: 48,
-            resizable: false
+            resizable: false,
           },
           {
-            title: this.$t1('用户角色'),
-            field: 'name',
+            title: this.$t1("用户角色"),
+            field: "name",
             width: 150,
             sortable: true,
-            fixed: 'left'
+            fixed: "left",
           },
           /* {
             title: this.$t1('角色编码'),
@@ -112,37 +173,36 @@ export default {
             width: 150
           }, */
           {
-            title: this.$t1('角色描述'),
-            field: 'description',
-
+            title: this.$t1("角色描述"),
+            field: "description",
           },
           {
-            title: this.$t1('是否内置'),
-            field: 'systems',
+            title: this.$t1("是否内置"),
+            field: "systems",
             width: 150,
             slots: {
-              default: ({row}) => {
+              default: ({ row }) => {
                 if (row.systems) {
-                  return this.$t1('是');
+                  return this.$t1("是");
                 } else {
-                  return this.$t1('否');
+                  return this.$t1("否");
                 }
-              }
-            }
+              },
+            },
           },
-          {title: this.$t1('所属组织'), field: 'companyName', width: 150},
+          { title: this.$t1("所属组织"), field: "companyName", width: 150 },
           {
-            field: 'createDate',
-            title: this.$t1('创建时间'),
-            width: 150
+            field: "createDate",
+            title: this.$t1("创建时间"),
+            width: 150,
           },
           {
-            width: 47,
-            fixed: 'right',
-            title: '',
+            width: 150,
+            fixed: "right",
+            title: "",
             sortable: false,
             slots: {
-              default: ({row}) => {
+              default: ({ row }) => {
                 return [
                   <a
                     href="javascript:void(0);"
@@ -151,22 +211,37 @@ export default {
                       this.openEditDialog(row.id);
                     }}
                   >
-                    <el-tooltip enterable={false} effect="dark" content={this.$t1('查看')} placement="top"
-                                popper-class="tooltip-skin">
-                      <i class="el-icon-edit"/>
+                    <el-tooltip
+                      enterable={false}
+                      effect="dark"
+                      content={this.$t1("查看")}
+                      placement="top"
+                      popper-class="tooltip-skin"
+                    >
+                      <i class="el-icon-edit" />
                     </el-tooltip>
-                  </a>
+                  </a>,
+                  <a
+                    href="javascript:void(0);"
+                    class="a-link"
+                    onclick={() => {
+                      this.openVocEditDialog(row.id);
+                    }}
+                    v-show={this.showVocMenuBtn}
+                  >
+                    {this.$t1("VOC菜单")}
+                  </a>,
                 ];
-              }
-            }
-          }
-        ]
+              },
+            },
+          },
+        ],
       };
-      this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
+      this.$vxeTableUtil.initVxeTable(tableOption).then((opts) => {
         this.vxeOption = opts;
       });
-    }
-  }
+    },
+  },
 };
 </script>
 

package/src/views/user/role/voc_edit.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="detail-wrap">
+    <el-form ref="editForm" :model="role">
+      <div class="d-header clearfix">
+        <div class="fl">
+          <i class="el-icon-info" />
+          {{ $t1("VOC菜单") }}{{ role.name ? " - " + role.name : "" }}
+        </div>
+        <div class="fr">
+          <el-button
+            type="primary"
+            plain
+            class="button-sty"
+            @click="$baseReload()"
+            icon="el-icon-refresh-right"
+          >
+            {{ $t1("重置") }}
+          </el-button>
+          <el-button
+            type="primary"
+            class="button-sty"
+            icon="el-icon-check"
+            @click="saveData"
+            >{{ $t1("保存") }}
+          </el-button>
+        </div>
+      </div>
+      <baseTabs>
+        <baseTabPane :label="$t1('基本信息')">
+          <template #default>
+            <table class="table-detail">
+              <tbody>
+                <tr>
+                  <th>{{ $t1("用户角色") }}</th>
+                  <td>{{ role.name }}</td>
+                  <th>{{ $t1("角色编码") }}</th>
+                  <td>{{ role.code }}</td>
+                  <th>{{ $t1("是否内置") }}</th>
+                  <td>
+                    <template v-if="role.systems">
+                      {{ $t1("是") }}
+                    </template>
+                    <template v-else>
+                      {{ $t1("否") }}
+                    </template>
+                  </td>
+                  <th></th>
+                  <td></td>
+                </tr>
+                <tr>
+                  <th>{{ $t1("角色描述") }}</th>
+                  <td colspan="7">{{ role.description }}</td>
+                </tr>
+                <tr>
+                  <th>{{ $t1("创建人") }}</th>
+                  <td>{{ role._createBy }}</td>
+                  <th>{{ $t1("创建时间") }}</th>
+                  <td>{{ role.createDate }}</td>
+                  <th>{{ $t1("更新人") }}</th>
+                  <td>{{ role._modifyBy }}</td>
+                  <th>{{ $t1("更新时间") }}</th>
+                  <td>{{ role.modifyDate }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </template>
+        </baseTabPane>
+        <baseTabPane :label="$t1('VOC菜单')">
+          <template #default>
+            <div class="role-box">
+              <div class="item" v-for="item in allMenus" :key="item.id">
+                <div class="t">
+                  {{ item.menuName }}
+                  <i
+                    class="fr"
+                    @click="$set(item, 'visibleRole', !item.visibleRole)"
+                    :class="
+                      !item.visibleRole
+                        ? 'el-icon-arrow-up'
+                        : 'el-icon-arrow-down'
+                    "
+                  ></i>
+                </div>
+                <div class="c" :class="{ hide: item.visibleRole }">
+                  <div v-for="subItem in item.children" :key="subItem.id">
+                    <div class="c-2nd">
+                      <el-checkbox
+                        :label="subItem.menuName"
+                        v-model="subItem.hasAuth"
+                        @change="selectAll(subItem)"
+                      ></el-checkbox>
+                    </div>
+                    <div class="c-3rd">
+                      <div
+                        class="c-item"
+                        v-for="(thrItem, index3) in subItem.children"
+                        :key="thrItem.id"
+                      >
+                        <div class="name">
+                          <el-checkbox
+                            :label="thrItem.menuName"
+                            v-model="thrItem.hasAuth"
+                            @change="cancelSelect(subItem, index3)"
+                          ></el-checkbox>
+                        </div>
+                        <div class="c-4th">
+                          <el-checkbox
+                            v-for="(fourthItem, index4) in thrItem.children"
+                            :key="fourthItem.id"
+                            :label="fourthItem.menuName"
+                            v-model="fourthItem.hasAuth"
+                            @change="changeBtnSelect(subItem, index3, index4)"
+                          ></el-checkbox>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </baseTabPane>
+      </baseTabs>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "roleVocEdit",
+  props: ["_dataId"],
+  data() {
+    return {
+      dataId: "",
+      sysType: "voc",
+      role: {},
+      allMenus: [],
+    };
+  },
+  created() {
+    if (this._dataId) this.dataId = this._dataId;
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      if (!this.dataId) {
+        this.initMenuData();
+        return;
+      }
+      this.$commonHttp({
+        url: USER_PREFIX + `/role/get`,
+        method: `post`,
+        data: {
+          id: this.dataId,
+        },
+        isLoading: true,
+        modalStrictly: true,
+        success: (res) => {
+          this.role = res.objx || {};
+          this.initMenuData();
+        },
+      });
+    },
+    initMenuData() {
+      this.$http({
+        url: USER_PREFIX + "/third_party_menu/getAll",
+        method: "POST",
+        data: {
+          stringOne: this.sysType,
+        },
+        isLoading: true,
+        modalStrictly: true,
+        success: (res) => {
+          let menus = res.objx || [];
+          this.handleRoles(menus, this.role.thirdPartyMenuIds || []);
+          this.allMenus = menus;
+        },
+      });
+    },
+    saveData() {
+      if (!this.dataId) {
+        this.$message.warning(this.$t1("请先选择角色"));
+        return;
+      }
+      this.$baseConfirm(this.$t1("您确定要保存吗？")).then(() => {
+        this.$http({
+          url: USER_PREFIX + `/role/saveThirdPartyMenus`,
+          method: `post`,
+          data: {
+            id: this.dataId,
+            sysType: this.sysType,
+            thirdPartyMenuIds: this.getSelectedMenuIds(),
+          },
+          isLoading: true,
+          success: (res) => {
+            this.$message({
+              message: res.content,
+              type: "success",
+              duration: 500,
+              onClose: () => {
+                this.$baseReload();
+              },
+            });
+          },
+        });
+      });
+    },
+    getSelectedMenuIds() {
+      let ids = [];
+      let walk = (nodes) => {
+        let hasSelected = false;
+        (nodes || []).forEach((node) => {
+          let childSelected = walk(node.children);
+          if (node.hasAuth || childSelected) {
+            ids.push(node.id);
+            hasSelected = true;
+          }
+        });
+        return hasSelected;
+      };
+      walk(this.allMenus);
+      return ids;
+    },
+    selectAll(subItem) {
+      let res = subItem.hasAuth;
+      if (subItem.children) {
+        subItem.children.forEach(function (thrItem) {
+          thrItem.hasAuth = res;
+          if (thrItem.children) {
+            thrItem.children.forEach(function (fourthItem) {
+              fourthItem.hasAuth = res;
+            });
+          }
+        });
+      }
+      this.$forceUpdate();
+    },
+    cancelSelect(subItem, index3) {
+      let citem = subItem.children[index3];
+      let res = citem.hasAuth;
+      let isCheckSubItem = false;
+      subItem.children.forEach(function (thrItem) {
+        if (thrItem.hasAuth) {
+          isCheckSubItem = true;
+        }
+      });
+      if (citem.type !== 1) {
+        subItem.hasAuth = isCheckSubItem;
+      } else {
+        if (isCheckSubItem) subItem.hasAuth = true;
+      }
+      if (citem.children) {
+        citem.children.forEach(function (fourthItem) {
+          fourthItem.hasAuth = res;
+        });
+      }
+      this.$forceUpdate();
+    },
+    changeBtnSelect(subItem, index3) {
+      let isCheckSubItem = false;
+      subItem.children.forEach(function (thrItem) {
+        if (thrItem.hasAuth) {
+          isCheckSubItem = true;
+        }
+      });
+      subItem.hasAuth = isCheckSubItem;
+      this.$forceUpdate();
+    },
+    handleRoles(rows, menuIds) {
+      let idSet = new Set((menuIds || []).map((id) => String(id)));
+      (rows || []).forEach((row) => {
+        row.hasAuth = idSet.has(String(row.id));
+        if (row.children) {
+          this.handleRoles(row.children, menuIds);
+        }
+      });
+    },
+  },
+};
+</script>