platform/io.sc.platform.system.frontend/src/views/user/User.vue

<template>
  <q-splitter :model-value="70" class="w-full h-full">
    <template #before>
      <div class="px-1">
        <w-grid
          ref="userGridRef"
          :title="userGrid.title"
          selection="multiple"
          :query-form-fields="userGrid.queryFormFields"
          :toolbar-actions="userGrid.toolbarActions"
          :toolbar-configure="userGrid.toolbarConfigure"
          :data-url="userGrid.dataUrl"
          :columns="userGrid.columns"
          :row-key="userGrid.rowKey"
          :editor="userGrid.editor"
          :viewer="userGrid.viewer"
          @row-click="userGrid.rowClick"
        ></w-grid>
      </div>
    </template>
    <template #after>
      <div class="px-1">
        <q-tabs v-model="selectedTabRef" inline-label align="left" :breakpoint="0">
          <q-tab name="role" icon="bi-people" :label="$t('role')" />
          <q-tab name="org" icon="bi-diagram-3" :label="$t('org')" />
        </q-tabs>

        <q-tab-panels v-model="selectedTabRef" animated swipeable keep-alive>
          <q-tab-panel name="role">
            <platform-grid
              ref="roleGridRef"
              :table-props="{ borderded: false, flat: true }"
              :query-form-cols-number="roleConfigure.queryFormColsNumber"
              :hide-bottom="roleConfigure.hideBottom"
              :query-form-cols-auto="roleConfigure.queryFormColsAuto"
              :table-title="roleConfigure.tableTitle"
              :table-row-key="roleConfigure.tableRowKey"
              :table-init-load-data="roleConfigure.tableInitLoadData"
              :table-data-url="roleConfigure.tableDataUrl"
              :table-show-sort-no="false"
              :table-columns="roleConfigure.tableColumns"
              :table-left-column-sticky-number="roleConfigure.tableLeftColumnStickyNumber"
              :table-buttons="roleConfigure.tableButtons"
              :query-form-fields="roleConfigure.queryFormFields"
              :table-pagination="roleConfigure.tablePagination"
              table-selection="multiple"
              :table-dense="false"
            >
            </platform-grid>
          </q-tab-panel>
          <q-tab-panel name="org">
            <w-tree-grid ref="orgTreeGridRef" label-key="name" :actions="orgConfigure.actions" tick-strategy="leaf" />
          </q-tab-panel>
        </q-tab-panels>
      </div>
    </template>
    <SelectRoleDialog ref="selectRoleDialog" title="可选角色列表" :maximized="false" width="50%" height="500px"></SelectRoleDialog>
    <SetPasswordDialog ref="setPasswordDialogRef"></SetPasswordDialog>
  </q-splitter>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { Environment, axios, EnumTools, NotifyManager, DialogManager, Tools } from 'platform-core';
import SelectRoleDialog from './SelectRoleDialog.vue';
import SetPasswordDialog from './SetPasswordDialog.vue';
import UserStatusTag from './UserStatusTag.vue';

const { t } = useI18n();

const userGridRef = ref();
const roleGridRef = ref();
const orgTreeGridRef = ref();

const selectRoleDialog = ref();
const selectedTabRef = ref('role');
const setPasswordDialogRef = ref();

const DataComeFromEnum = await EnumTools.fetch('io.sc.platform.orm.api.enums.DataComeFrom', t);
const YesNoEnum = EnumTools.yesno(t);

const userGrid = {
  title: t('system.user.grid.title'),
  queryFormFields: [
    { name: 'loginName', label: t('loginName'), type: 'text' },
    { name: 'userName', label: t('userName'), type: 'text' },
    { name: 'enable', label: t('isEnable'), type: 'select', options: YesNoEnum.list },
    { name: 'dataComeFrom', label: t('dataComeFrom'), type: 'select', options: DataComeFromEnum.list },
  ],
  toolbarConfigure: { noIcon: false },
  toolbarActions: [
    'query',
    'refresh',
    'separator',
    'add',
    'clone',
    'edit',
    'remove',
    'separator',
    {
      name: 'setPassword',
      label: t('system.user.action.setPassword'),
      icon: 'bi-shield-check',
      enableIf: function (selecteds) {
        return selecteds.length > 0;
      },
      click: function (selecteds) {
        setPasswordDialogRef.value.show('setPassword', selecteds);
      },
    },
    {
      name: 'setAllPassword',
      label: t('system.user.action.setAllPassword'),
      icon: 'bi-shield',
      enableIf: function (selecteds) {
        return true;
      },
      click: function () {
        setPasswordDialogRef.value.show('setAllPassword');
      },
    },
    'separator',
    {
      name: 'resetPassword',
      label: t('system.user.action.resetPassword'),
      icon: 'bi-shield-fill-check',
      enableIf: function (selecteds) {
        return selecteds.length > 0;
      },
      click: function (selecteds) {
        DialogManager.confirm(t('system.user.confirm.resetPassword'), () => {
          const userIds = Tools.extractProperties(selecteds, 'id');
          axios.post(Environment.apiContextPath('/api/system/user/resetPassword'), userIds).then(() => {
            setPasswordDialogRef.value.hide();
            NotifyManager.info(t('operationSuccess'));
          });
        });
      },
    },
    {
      name: 'resetAllPassword',
      label: t('system.user.action.resetAllPassword'),
      icon: 'bi-shield-fill',
      enableIf: function (selecteds) {
        return true;
      },
      click: function () {
        DialogManager.confirm(t('system.user.confirm.resetAllPassword'), () => {
          axios.post(Environment.apiContextPath('/api/system/user/resetAllPassword')).then(() => {
            setPasswordDialogRef.value.hide();
            NotifyManager.info(t('operationSuccess'));
          });
        });
      },
    },
    'separator',
    'view',
    'export',
  ],
  dataUrl: Environment.apiContextPath('/api/system/user'),
  rowKey: 'id',
  columns: [
    { name: 'loginName', label: t('loginName') },
    { name: 'userName', label: t('userName') },
    //{ width: 100, name: 'enable', label: t('isEnable'), align: 'center', format: (value) => YesNoEnum.map[value] },
    //{ width: 100, name: 'accountExpired', label: t('accountExpired'), format: (value) => YesNoEnum.map[value] },
    //{ width: 100, name: 'accountLocked', label: t('accountLocked'), format: (value) => YesNoEnum.map[value] },
    //{ width: 160, name: 'credentialsExpired', label: t('credentialsExpired'), format: (value) => YesNoEnum.map[value] },
    {
      name: 'status',
      label: t('status'),
      format: (value, row) => {
        return {
          componentType: UserStatusTag,
          attrs: row,
        };
      },
    },
    { name: 'dataComeFrom', label: t('dataComeFrom'), format: (value) => DataComeFromEnum.map[value] },
    { name: 'lastModifier', label: t('lastModifier') },
    { name: 'lastModifyDate', label: t('lastModifyDate') },
  ],
  editor: {
    dialog: {},
    form: {
      colsNum: 2,
      fields: [
        { name: 'loginName', label: t('loginName'), type: 'text', required: true },
        { name: 'userName', label: t('userName'), type: 'text', required: true },
        { name: 'description', label: t('description'), type: 'textarea', colspan: 2, rows: 1 },
        { name: 'password', label: t('password'), type: 'password' },
        { name: 'confirmPassword', label: t('confirmPassword'), type: 'password' },
        { name: 'mobile', label: t('mobile'), type: 'text' },
        { name: 'phone', label: t('phone'), type: 'text' },
        { name: 'email', label: t('email'), type: 'text' },
        { name: 'weixin', label: t('weixin'), type: 'text' },
        { name: 'qq', label: t('qq'), type: 'text' },
        { name: 'enable', label: t('enable'), type: 'checkbox', defaultValue: true, colsFirst: true },
        { name: 'accountExpired', label: t('accountExpired'), type: 'checkbox', defaultValue: false, colsFirst: true },
        { name: 'accountLocked', label: t('accountLocked'), type: 'checkbox', defaultValue: false, colsFirst: true },
        { name: 'credentialsExpired', label: t('credentialsExpired'), type: 'checkbox', defaultValue: false, colsFirst: true },
      ],
    },
  },
  viewer: {
    panel: {
      columnNum: 1,
      fields: [
        { name: 'id', label: t('id') },
        { name: 'loginName', label: t('loginName') },
        { name: 'userName', label: t('userName') },
        { name: 'description', label: t('description') },
        { name: 'enable', label: t('enable') },
        { name: 'accountExpired', label: t('accountExpired') },
        { name: 'accountLocked', label: t('accountLocked') },
        { name: 'credentialsExpired', label: t('credentialsExpired') },
        { name: 'email', label: t('email') },
        { name: 'phone', label: t('phone') },
        { name: 'mobile', label: t('mobile') },
        { name: 'weixin', label: t('weixin') },
        { name: 'qq', label: t('qq') },
        { name: 'dataComeFrom', label: t('dataComeFrom'), format: (value) => DataComeFromEnum.map[value] },
        { name: 'creator', label: t('creator') },
        { name: 'createDate', label: t('createDate') },
        { name: 'lastModifier', label: t('lastModifier') },
        { name: 'lastModifyDate', label: t('lastModifyDate') },
        { name: 'corporationCode', label: t('corporationCode') },
      ],
    },
  },
  rowClick: (evt, row, index) => {
    if (roleGridRef.value) {
      axios.get(Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + row.id).then((response) => {
        //roleGridRef.value.replaceRows(response.data.content);
      });
    }
    if (orgTreeGridRef.value) {
      axios.get(Environment.apiContextPath('/api/system/org/listAllOrgsWithSelectedStatusByUser?userId=') + row.id).then((response) => {
        //orgTreeGridRef.value.setNodes(response.data);
      });
    }
  },
};

const roleConfigure = {
  queryFormColsNumber: 4,
  queryFormColsAuto: false,
  queryFormFields: [],
  hideBottom: true,
  tableInitLoadData: false,
  tableLeftColumnStickyNumber: 0,
  tableTitle: t('system.role.gridTitle'),
  tableRowKey: 'id',
  tableDataUrl: '',
  tablePagination: {
    sortBy: 'lastModifyDate',
    descending: true,
    reqPageStart: 0,
    rowsPerPage: 0,
  },
  tableButtons: [
    'refresh',
    'inFullscreen',
    {
      name: 'addRole',
      label: t('system.role.action.addRole'),
      icon: '',
      enable: () => {
        if (userGridRef.value) {
          return userGridRef.value.getSelectedRows().length > 0;
        }
        return false;
      },
      click: () => {
        selectRoleDialog.value.show({ userGrid: userGridRef, roleGrid: roleGridRef });
      },
    },
    {
      name: 'addAllRole',
      label: t('system.role.action.addAllRole'),
      icon: '',
      enable: () => {
        if (userGridRef.value) {
          console.log(userGridRef.value.getSelectedRows());
          return userGridRef.value.getSelectedRows().length > 0;
        }
        return false;
      },
      click: () => {
        axios
          .post(Environment.apiContextPath('/api/system/user/addAllRoles'), {
            one: userGridRef.value.getSelectedRows()[0].id,
            many: [],
          })
          .then((response) => {
            axios.get(Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + userGridRef.value.getSelectedRows()[0].id).then((response) => {
              roleGridRef.value.replaceRowsFun(response.data.content);
            });
          });
      },
    },
    {
      name: 'removeRole',
      label: t('system.role.action.removeRole'),
      icon: '',
      enable: () => {
        if (userGridRef.value) {
          return userGridRef.value.getSelectedRows().length > 0;
        }
        return false;
      },
      click: () => {
        const roleIds = [];
        for (const role of roleGridRef.value.getSelectedRows()) {
          roleIds.push(role.id);
        }
        axios
          .post(Environment.apiContextPath('/api/system/user/removeRoles'), {
            one: userGridRef.value.getSelectedRows()[0].id,
            many: roleIds,
          })
          .then((response) => {
            axios.get(Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + userGridRef.value.getSelectedRows()[0].id).then((response) => {
              roleGridRef.value.replaceRowsFun(response.data.content);
            });
          });
      },
    },
    {
      name: 'removeAllRole',
      label: t('system.role.action.removeAllRole'),
      icon: '',
      enable: () => {
        if (userGridRef.value) {
          return userGridRef.value.getSelectedRows().length > 0;
        }
        return false;
      },
      click: () => {
        axios
          .post(Environment.apiContextPath('/api/system/user/removeAllRoles'), {
            one: userGridRef.value.getSelectedRows()[0].id,
            many: [],
          })
          .then((response) => {
            axios.get(Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + userGridRef.value.getSelectedRows()[0].id).then((response) => {
              roleGridRef.value.replaceRowsFun(response.data.content);
            });
          });
      },
    },
  ],
  tableColumns: [
    { width: 100, name: 'code', label: t('code') },
    { width: 100, name: 'name', label: t('name') },
    { width: 80, name: 'enable', label: t('isEnable'), format: (value) => (value ? t('yes') : t('no')) },
  ],
};

const orgConfigure = {
  actions: [
    {
      name: 'save',
      label: '保存',
      click: () => {
        axios
          .post(Environment.apiContextPath('/api/system/user/updateOrgs'), {
            one: userGridRef.value.getSelectedRows()[0].id,
            many: orgTreeGridRef.value.getTicked(),
          })
          .then((response) => {});
      },
    },
  ],
};
</script>