@utogether/udp-core 1.0.0

package/src/views/system/role/Role.vue

@@ -0,0 +1,57 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-22 15:44:50
+ * @LastEditors: wei.li
+ * @LastEditTime: 2021-12-09 13:37:47
+ * @Description: 角色管理
+-->
+<template>
+  <div class="u-content-panel">
+    <div class="u-left-panel">
+      <ScrollPane
+        :title="$t('company')"
+        url="/uums/unit"
+        :tree-otions="{ children: 'children', label: 'unitName' }"
+      />
+    </div>
+    <div class="content">
+      <role-panel />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, provide } from 'vue';
+import ScrollPane from '../../../components/SuScrollTree/ScrollPanel.vue';
+import RolePanel from './RolePanel.vue';
+
+const active: any = ref({});
+const scrollPanelChange: any = ref(false);
+const treeList: any = ref([]);
+provide('active', active);
+
+provide('scrollPanelChange', scrollPanelChange);
+
+provide('treeList', treeList);
+</script>
+
+<style lang="scss" scoped>
+.u-content-panel {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: 84vh;
+  padding: 5px;
+
+  .u-left-panel {
+    width: 250px;
+  }
+
+  .content {
+    flex: 1;
+    width: calc(100% - 250px);
+    height: 82vh;
+    margin: 0 10px;
+  }
+}
+</style>

package/src/views/system/role/RolePanel.vue

@@ -0,0 +1,191 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2021-12-23 17:33:21
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-04-08 15:45:33
+ * @Description: 角色管理
+-->
+<template>
+  <div class="page-content">
+    <ut-grid
+      ref="xgrid"
+      :items="formItems"
+      :columns="columns"
+      url="/uums/role"
+      mode="form"
+      @buttonClick="onButtonClick"
+    />
+    <!-- 权限 -->
+    <authority-info
+      v-if="data.showAuthView"
+      :show="data.showAuthView"
+      :record="data.record"
+      :data-status="data.dataStatus"
+      @onClose="onClose"
+    />
+    <!-- 用户 -->
+    <user-info
+      v-if="data.showUserView"
+      :show="data.showUserView"
+      :record="data.record"
+      :data-status="data.dataStatus"
+      @onClose="onClose"
+    />
+    <ut-modal-form
+      v-if="data.showModalView"
+      ref="xmodal"
+      :record="data.record"
+      :items="subItems"
+      :url="url"
+      :method="method"
+      width="400"
+      height="220"
+      data-status="update"
+      :title="$t('message.title.authEdit')"
+      @close="data.showModalView = false"
+    />
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { reactive, ref, watch, inject } from 'vue';
+import { useRender } from '@utogether/utils';
+import AuthorityInfo from './AuthorityInfo.vue';
+import UserInfo from './UserInfo.vue';
+import { useSystemStoreHook } from '../../../store/modules/system';
+import { getServiceApi } from '../../../api';
+
+const data = reactive<IRecord>({
+  record: {},
+  showAuthView: false,
+  showModalView: false,
+  showUserView: false,
+  dataStatus: ''
+});
+
+const active: IRecord = inject('active');
+const renderHook = useRender();
+const xgrid = ref(null);
+const method = ref('');
+const fetchParam = ref({});
+
+const url = ref('');
+watch(
+  () => active.value,
+  () => {
+    resetListQuery();
+  }
+);
+
+const formItems = [
+  { field: 'roleName', title: 'message.udp.roleName' },
+  { field: 'roleCode', title: 'message.udp.roleCode' }
+];
+const subItems = [
+  { field: 'roleName', title: 'message.udp.roleName', required: true },
+  { field: 'roleCode', title: 'message.udp.roleCode', required: true },
+  { field: 'roleDesc', title: 'message.udp.roleDesc' }
+];
+const columns = [
+  { type: 'checkbox', width: 40, align: 'center', fixed: 'left' },
+  { field: 'roleCode', title: 'message.udp.roleCode' },
+  { field: 'roleName', title: 'message.udp.roleName' },
+  { field: 'roleDesc', title: 'message.udp.roleDesc' },
+  {
+    field: 'enabled',
+    width: 90,
+    cellRender: renderHook.renderEnabled(handleClick)
+  },
+  {
+    field: 'operate',
+    width: 260,
+    fixed: 'right',
+    slots: {
+      default: ({ row }) => {
+        // <ut-button content="edit" onTap={() => handleShowChild(row, 'update')} />
+        return [
+          <>
+            <ut-button content="edit" auth="edit" onTap={() => handleEdit(row)} />
+            <ut-button
+              content="dispatchUser"
+              status="warning"
+              icon="ri-user-3-line"
+              auth="user"
+              onTap={() => handleDispathUser(row)}
+            />
+            <ut-button
+              content="dispatchAuth"
+              status="success"
+              icon="ri-plane-line"
+              auth="auth"
+              onTap={() => handleDispathAuth(row)}
+            />
+          </>
+        ];
+      }
+    }
+  }
+];
+const resetListQuery = () => {
+  fetchParam.value = { unitId: active?.value?.id };
+  xgrid.value.refreshData();
+};
+
+/**
+ * @description:监听grid事件
+ * @return {*}
+ */
+const onButtonClick = code => {
+  code === 'add' && handleAdd();
+  code === 'del' && handleDel();
+};
+
+// 新增
+const handleAdd = () => {
+  data.dataStatus = 'add';
+  method.value = 'post';
+  url.value = '/uums/role';
+  data.record = {};
+  data.record.unitId = active?.value?.id;
+  data.record.enabled = '1';
+  data.record.orgId = useSystemStoreHook().getOrgId;
+  data.showModalView = true;
+};
+// 编辑
+const handleEdit = (record: Object) => {
+  method.value = 'put';
+  url.value = '/uums/role/singleUpdate';
+  data.dataStatus = 'update';
+  data.record = record;
+  data.showModalView = true;
+};
+const handleDel = () => {
+  xgrid.value.getInstance().commitProxy('delete');
+};
+// 分配权限
+const handleDispathAuth = record => {
+  data.record = record;
+  data.showAuthView = true;
+};
+// 分配用户
+const handleDispathUser = record => {
+  data.record = record;
+  data.showUserView = true;
+};
+// 启用/禁用
+async function handleClick({ row }) {
+  await getServiceApi().put('/uums/role/singleUpdate', row);
+  xgrid.value.refreshData();
+}
+// 关闭弹框
+const onClose = () => {
+  data.showDrawView = false;
+  data.showAuthView = false;
+  data.showUserView = false;
+};
+// 拷贝当前列表项的数据（字典类型）
+// const { clipboardRef } = useCopyToClipboard();
+// const cellDBLClickEvent: VxeTableEvents.CellDblclick = ({ row }) => {
+//   clipboardRef.value = unref(row).model;
+// };
+</script>

package/src/views/system/role/UserInfo.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="u-dict-config_wrapper">
+    <el-drawer
+      :model-value="show"
+      :title="$t('message.title.authUser', { role: record.roleName })"
+      :before-close="handleClose"
+      direction="rtl"
+      destroy-on-close
+      size="80%"
+    >
+      <vxe-grid ref="xgrid" v-bind="gridOptions" v-on="gridEvents" />
+      <ut-modal-grid
+        v-if="showModalView"
+        url="/uums/user/listUserToRole"
+        :default-params="{ roleId: record.id }"
+        :items="modalFormItems"
+        :columns="modalColum"
+        :show-footer="true"
+        :editable="false"
+        width="60%"
+        @close="showModalView = false"
+        @confirm="onConfirm"
+      />
+    </el-drawer>
+  </div>
+</template>
+<script setup lang="ts">
+import { onBeforeMount, reactive, ref } from 'vue';
+import { VxeGridProps, VxeGridListeners, VxeGridInstance } from 'vxe-table';
+import to from 'await-to-js';
+import { getServiceApi } from '../../../api';
+
+interface IProps {
+  record: IRecord;
+  show: boolean;
+  direction?: string;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  record: (): IRecord => {
+    return {};
+  },
+  show: false,
+  direction: 'rtl'
+});
+const loading = ref(false);
+const showModalView = ref(false);
+
+const serviceApi = getServiceApi();
+
+const emit = defineEmits<{
+  (e: 'onClose'): void;
+}>();
+const formItems: IFormItemProps[] = [
+  {
+    field: 'userName',
+    title: 'message.userCode',
+    span: 8,
+    itemRender: { name: '$input' }
+  },
+  {
+    field: 'name',
+    title: 'message.userName',
+    span: 8,
+    itemRender: { name: '$input' }
+  },
+  {
+    span: 8,
+    align: 'right',
+    itemRender: {
+      name: '$buttons',
+      children: [
+        {
+          props: {
+            type: 'submit',
+            content: 'message.btn.search',
+            icon: 'ri-search-line',
+            status: 'primary'
+          }
+        },
+        { props: { type: 'reset', icon: 'ri-refresh-line', content: 'message.btn.reset' } }
+      ]
+    }
+  }
+];
+// 列字段
+const columns: ITableColProps[] = [
+  { type: 'checkbox', width: 50, align: 'center' },
+  {
+    field: 'userName',
+    title: 'message.userCode'
+  },
+  {
+    field: 'name',
+    title: 'message.userName'
+  },
+  {
+    field: 'enabled',
+    title: 'message.enabled',
+    width: 70,
+    editRender: {
+      name: '$select',
+      options: [
+        { label: '启用', value: '1' },
+        { label: '禁用', value: '0' }
+      ],
+      defaultValue: '1'
+    }
+  }
+];
+// 新增/删除/保存
+const buttons = [
+  { code: 'add', name: 'message.btn.add', status: 'u-cyan', icon: 'ri-add-line' },
+  { code: 'delete', name: 'message.btn.del', status: 'danger', icon: 'ri-delete-bin-5-fill' }
+];
+const modalFormItems = [
+  { field: 'userName', title: 'message.userCode' },
+  { field: 'name', title: 'message.userName' }
+];
+const modalColum = [
+  { type: 'checkbox', width: 40 },
+  { field: 'userName', title: 'message.userCode' },
+  { field: 'name', title: 'message.userName' },
+  { field: 'enabled', width: 70, formatter: ['formatDict', 'SU.ENABLE'] }
+];
+const xgrid = ref({} as VxeGridInstance);
+const gridOptions = reactive<VxeGridProps>({
+  height: 560,
+  border: true,
+  pagerConfig: {},
+  toolbarConfig: { buttons, perfect: true },
+  loading: false,
+  formConfig: { titleWidth: 100, titleAlign: 'right', items: formItems },
+  // data: props.record.children,
+  proxyConfig: {
+    form: true, // 查询是需要启用表单代理
+    ajax: {
+      // 接收 Promise
+      query: ({ page, form }) => {
+        const queryParams = Object.assign({}, form);
+        queryParams.id = props.record.id;
+        queryParams.pageNum = page.currentPage;
+        queryParams.pageSize = page.pageSize;
+        return serviceApi.get('/uums/user/listRoleUsers', queryParams);
+      },
+      // body 对象： { removeRecords }
+      delete: ({ body: { removeRecords } }) => {
+        const param = {
+          roleId: props.record.id,
+          userIds: removeRecords.map(v => v.id).join()
+        };
+        return serviceApi.delete('/uums/role/deleteRoleUsers', param);
+      }
+    }
+  },
+  columns
+});
+// grid点击事件监听
+const gridEvents: VxeGridListeners = {
+  toolbarButtonClick({ code }) {
+    if (code === 'add') {
+      showModalView.value = true;
+    }
+  }
+};
+// 监听modal table确定
+const onConfirm = async records => {
+  const param = { userIds: '', roleId: props.record.id };
+  param.userIds = records.map(m => m.id).join(',');
+  gridOptions.loading = true;
+  const [err] = await to(serviceApi.post('/uums/role/addUserRole', param));
+  gridOptions.loading = false;
+  if (!err) {
+    xgrid.value.commitProxy('query');
+    showModalView.value = false;
+  }
+};
+// 抽屉关闭
+function handleClose() {
+  emit('onClose');
+}
+onBeforeMount(() => {
+  loading.value = true;
+});
+</script>
+
+<style lang="scss">
+.u-dict-config_wrapper {
+  .el-drawer__header {
+    margin-bottom: 0;
+  }
+}
+</style>

package/src/views/system/role-assign/RoleAssign.vue

@@ -0,0 +1,57 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-26 14:37:07
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2024-06-24 20:20:57
+ * @Description: 角色分配业务单元
+-->
+<template>
+  <div class="u-content-panel">
+    <div class="u-left-panel">
+      <ScrollPane
+        :title="$t('SuOrg')"
+        :tree-otions="{ children: 'children', label: 'orgName' }"
+        extParam="{ pageSize: 500 }"
+        url="/uums/org"
+      />
+    </div>
+    <div class="content">
+      <role-panel />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, provide } from 'vue';
+import ScrollPane from '../../../components/SuScrollTree/ScrollPanel.vue';
+import RolePanel from './RolePanel.vue';
+const active: any = ref({});
+const scrollPanelChange: any = ref(false);
+const treeList: any = ref([]);
+provide('active', active);
+
+provide('scrollPanelChange', scrollPanelChange);
+
+provide('treeList', treeList);
+</script>
+
+<style lang="scss" scoped>
+.u-content-panel {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: 84vh;
+  padding: 5px;
+
+  .u-left-panel {
+    width: 250px;
+  }
+
+  .content {
+    flex: 1;
+    width: calc(100% - 250px);
+    height: 82vh;
+    margin: 0 10px;
+  }
+}
+</style>

package/src/views/system/role-assign/RolePanel.vue

@@ -0,0 +1,136 @@
+<template>
+  <div v-spinning="data.loading" class="page-content">
+    <ut-grid
+      ref="xgrid"
+      :items="formItems"
+      :columns="gridCol"
+      :default-params="data.fetchExtParam"
+      :buttons="buttons"
+      :auto-load="false"
+      :url="url"
+      mode="form"
+      @buttonClick="onButtonClick"
+    />
+    <ut-modal-grid
+      v-if="data.showModalView"
+      ref="xmodal"
+      :items="formItems"
+      :columns="columns"
+      :show-footer="true"
+      :editable="false"
+      url="/uums/role"
+      width="60%"
+      @close="data.showModalView = false"
+      @confirm="onConfirm"
+    />
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { useI18n } from 'vue-i18n';
+import { ref, reactive, watch, inject, nextTick } from 'vue';
+import { clone } from 'xe-utils';
+import { VxeUI } from 'vxe-pc-ui';
+import to from 'await-to-js';
+import { successMessage } from '@utogether/utils';
+import { getServiceApi } from '../../../api';
+
+const data = reactive<IRecord>({
+  record: {},
+  loading: false,
+  showModalView: false
+});
+const { t } = useI18n();
+
+const xgrid = ref(null);
+const xmodal = ref(null);
+const active: IRecord = inject('active');
+
+const url = '/uums/orgRole';
+watch(
+  () => active.value,
+  () => {
+    if (!active?.value.id) return;
+    data.fetchExtParam = { orgId: active?.value.id };
+    nextTick(() => {
+      xgrid.value.refreshData();
+    });
+  }
+);
+
+const buttons = [{ code: 'del', auth: '/' }];
+
+const formItems = [
+  { field: 'roleName', title: 'message.udp.roleName' },
+  { field: 'roleCode', title: 'message.udp.roleCode' }
+];
+
+const columns = [
+  { type: 'checkbox', width: 40 },
+  { field: 'roleCode', title: 'message.udp.roleCode' },
+  { field: 'roleName', title: 'message.udp.roleName' },
+  { field: 'roleDesc', title: 'message.udp.roleDesc' },
+  { field: 'enabled', width: 100, formatter: ['formatDict', 'SU.ENABLE'] }
+];
+
+const gridCol: any[] = clone(columns, true);
+gridCol.push({
+  field: 'operate',
+  width: 80,
+  fixed: 'right',
+  slots: {
+    default: ({ row }) => {
+      return [
+        <ut-button
+          icon="ri-delete-bin-5-fill"
+          content="del"
+          status="danger"
+          auth="del"
+          onTap={() => handleDel(row)}
+        />
+      ];
+    }
+  }
+});
+
+// 新增
+const handleAdd = () => {
+  data.record = {};
+  data.record.orgId = active.value.id;
+  data.showModalView = true;
+};
+// 删除
+const handleDel = async row => {
+  const type = await VxeUI.modal.confirm(t('message.tip.del'));
+  if (type === 'confirm') {
+    const param = { orgId: active.value.id, roleId: row.id };
+    data.loading = true;
+    const [err] = await to(getServiceApi().delete(url, param));
+    if (!err) {
+      successMessage(t('message.operateSuccess'));
+    }
+    xgrid.value.refreshData();
+    data.loading = false;
+  }
+};
+const onConfirm = async records => {
+  const orgRoleList = [];
+  records.forEach(m => {
+    m.orgId = active.value.id;
+    m.roleId = m.id;
+    orgRoleList.push(m);
+  });
+  const param = { orgRoleList };
+  xmodal.value.showLoading();
+  const [err] = await to(getServiceApi().post(url, param));
+  if (!err) {
+    successMessage();
+    xgrid.value.refreshData();
+    data.showModalView = false;
+  }
+};
+
+const onButtonClick = code => {
+  code === 'add' && handleAdd();
+};
+</script>