@utogether/udp-core 1.0.1 → 1.0.2

package/src/views/system/sysUser/SysUserPanel.vue

@@ -1,278 +1,347 @@
-<template>
-  <div class="page">
-    <ut-grid
-      ref="xgrid"
-      :columns="columns"
-      :items="formItems"
-      :url="url"
-      :default-params="paramExt"
-      :events="onGridEvents"
-    />
-    <!-- 编辑用户信息 -->
-    <vxe-modal v-model="data.showModelView" title="用户信息" width="300">
-      <template #default>
-        <vxe-form ref="xForm" :data="data.record" :rules="rules" title-align="right">
-          <vxe-form-item :title="$t('message.unitName')" field="unitId" span="24">
-            <template #default="{ data }">
-              <vxe-select v-model="data.unitId">
-                <vxe-option
-                  v-for="unit in treeList"
-                  :key="unit.id"
-                  :value="unit.id"
-                  :label="unit.unitName"
-                />
-              </vxe-select>
-            </template>
-          </vxe-form-item>
-          <vxe-form-item
-            :title="$t('message.userCode')"
-            :item-render="{ name: 'input', attrs: { disabled: data.dataStatus === 'update' } }"
-            field="userName"
-            span="24"
-          />
-          <vxe-form-item
-            :title="$t('message.userName')"
-            field="name"
-            span="24"
-            :item-render="{ name: 'input' }"
-          />
-          <vxe-form-item
-            v-if="data.dataStatus === 'add'"
-            :title="$t('message.userPwd')"
-            :item-render="{ name: 'input' }"
-            field="userPwd"
-            span="24"
-          />
-          <vxe-form-item align="right" span="24">
-            <template #default>
-              <ut-button content="cancel" icon="ri-close-fill" @click="handleClose" />
-              <ut-button content="confirm" icon="ri-save-3-fill" status="u-cyan" @click="onSubmit" />
-            </template>
-          </vxe-form-item>
-        </vxe-form>
-      </template>
-    </vxe-modal>
-    <!-- 用户角色 -->
-    <vxe-modal v-model="data.showUserRole" :title="$t('message.title.roleInfo')" width="600">
-      <template #default>
-        <vxe-table height="300" :data="data.roleList" border>
-          <vxe-column type="seq" width="60" />
-          <vxe-column field="roleName" :title="$t('message.udp.roleName')" />
-          <vxe-column field="roleDesc" :title="$t('message.udp.roleDesc')" />
-        </vxe-table>
-      </template>
-    </vxe-modal>
-    <vxe-modal v-model="data.showAuth" :title="$t('message.title.authority')" height="300" width="360">
-      <template #default>
-        <el-tree-v2
-          ref="xTree"
-          :data="data.roleList"
-          :props="{ children: 'children', label: 'menuName' }"
-          :height="420"
-          node-key="id"
-        />
-      </template>
-    </vxe-modal>
-  </div>
-</template>
-
-<script setup lang="tsx">
-import { useI18n } from 'vue-i18n';
-import { ref, reactive, inject, nextTick, onMounted } from 'vue';
-import to from 'await-to-js';
-import { useRender, errorMessage, warnMessage } from '@utogether/utils';
-import { VxeUI, VxeFormPropTypes } from 'vxe-pc-ui';
-import { isEmpty } from 'xe-utils';
-import { getServiceApi } from '../../../api';
-
-const data = reactive<IRecord>({
-  record: {},
-  listQuery: {},
-  dataList: [],
-  roleList: [],
-  submitLoading: false,
-  showModelView: false,
-  showUserRole: false,
-  showAuth: false,
-  dataStatus: ''
-});
-
-const serviceApi = getServiceApi();
-const { t } = useI18n();
-
-const rules: VxeFormPropTypes.Rules = {
-  userName: [
-    {
-      required: true,
-      message: `${t('message.required')}${t('message.userCode')}`
-    }
-  ],
-  name: [
-    {
-      required: true,
-      message: `${t('message.required')}${t('message.userName')}`
-    }
-  ],
-  unitId: [
-    {
-      required: true,
-      message: `${t('message.required')}${t('message.unitName')}`
-    }
-  ],
-  userPwd: [
-    {
-      required: true,
-      message: `${t('message.required')}${t('message.userPwd')}`
-    }
-  ]
-};
-const renderHook = useRender();
-const paramExt = ref({});
-const treeList: IRecord[] = inject('treeList');
-
-const url = '/uums/user';
-
-const xgrid = ref(null);
-
-const formItems = [
-  { field: 'name', title: 'message.userName' },
-  { field: 'userName', title: 'message.userCode' }
-];
-
-const columns = [
-  { type: 'checkbox', width: 40, align: 'center' },
-  { field: 'userName', title: 'message.userCode', required: true, editRender: renderHook.renderInput() },
-  { field: 'name', title: 'message.userName', required: true, editRender: renderHook.renderInput() },
-  {
-    field: 'type',
-    title: 'message.sysType',
-    formatter: ['formatDict', 'SU.ENABLE'],
-    editRender: renderHook.renderDict('SU.USER.TYPE')
-  },
-  {
-    field: 'userPwd',
-    required: true,
-    width: 150,
-    editRender: renderHook.renderInput(),
-    formatter: () => '*******'
-  },
-  { field: 'enabled', width: 80, cellRender: renderHook.renderEnabled(handleClick) },
-  {
-    field: 'operate',
-    width: 240,
-    fixed: 'right',
-    slots: {
-      default: ({ row }) => {
-        return [
-          <>
-            <ut-button icon="ri-user-fill" content="role" onTap={() => handleRole(row)} />
-            <ut-button
-              icon="ri-lock-fill"
-              content="auth"
-              status="success"
-              onTap={() => handleAuth(row)}
-            />
-            <ut-button
-              icon="ri-lock-fill"
-              content="passwordReset"
-              status="warning"
-              onTap={() => handleResetPwd(row)}
-            />
-          </>
-        ];
-      }
-    }
-  }
-];
-
-// 启用/禁用
-async function handleClick({ row }) {
-  await to(serviceApi.put(url, [row]));
-  xgrid.value.refreshData();
-}
-
-/**
- * @description: 查看用户角色
- * @param {*} row 用户行
- * @return {*}
- */
-const handleRole = async (row: any) => {
-  const serverData = await serviceApi.get(url + '/getUserRole', { userName: row.userName });
-  data.roleList = serverData[0]?.sysRoles;
-  nextTick(() => {
-    data.showUserRole = true;
-  });
-};
-/**
- * @description: 密码重置
- * @param {*} row 用户信息
- * @return {*}
- */
-const handleResetPwd = async (row: Object) => {
-  await serviceApi.put(url + '/resetPwd', row);
-  await VxeUI.modal.alert(t('message.tip.initPassword'));
-};
-// 启用/禁用
-// const handleUpdate = async (record: IRecord) => {
-//   record.enabled = record.enabled === '1' ? '0' : '1';
-//   await serviceApi.put(url, record);
-//   getDataList();
-// };
-/**
- * @description: 用户权限
- * @param {*} row 用户信息
- * @return {*}
- */
-const handleAuth = async row => {
-  const [err, res] = await to(serviceApi.get(url + '/getUserRole', { userName: row.userName }));
-  if (!err) {
-    if (!isEmpty(res)) {
-      data.roleList = res[0]?.sysMenuExts;
-      data.showAuth = true;
-    } else {
-      warnMessage(t('message.tip.emptyAuth'));
-    }
-  }
-};
-
-const onGridEvents = {
-  editActived({ row }) {
-    columns[1].editRender.props.disabled = !!row.id;
-    columns[4].editRender.props.disabled = !!row.id;
-  }
-};
-const xForm = ref(null);
-// const xSarchFrom = ref(null);
-
-const onSubmit = () => {
-  xForm.value.validate(async valid => {
-    if (!valid) {
-      const { record, dataStatus } = data;
-      if (dataStatus === 'add') {
-        await serviceApi.post(url, record);
-      } else {
-        await serviceApi.put(url, record);
-      }
-      handleClose();
-    }
-  });
-};
-
-const handleClose = () => {
-  data.showModelView = false;
-};
-const getUnitList = () => {
-  serviceApi
-    .get('/uums/unit', { pageSize: 10 })
-    .then(res => {
-      paramExt.value = { unitId: res[0].id, enabled: '1' };
-    })
-    .catch(() => {
-      errorMessage('获取租户失败,刷新后重试');
-    });
-};
-
-onMounted(() => {
-  getUnitList();
-});
-</script>
+<template>
+  <div class="page">
+    <ut-grid
+      ref="xgrid"
+      :columns="columns"
+      :items="formItems"
+      :url="url"
+      :auto-load="false"
+      :default-params="defaultParams"
+      mode="form"
+      @buttonClick="onButtonClick"
+    />
+    <!-- 编辑用户信息 -->
+    <vxe-modal v-model="data.showModelView" title="用户信息" width="300">
+      <template #default>
+        <vxe-form ref="xForm" :data="data.record" :rules="rules" title-align="right">
+          <vxe-form-item :title="$t('message.unitName')" field="unitId" span="24">
+            <template #default="{ data }">
+              <vxe-select v-model="data.unitId">
+                <vxe-option v-for="unit in treeList" :key="unit.id" :value="unit.id" :label="unit.unitName" />
+              </vxe-select>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item
+            :title="$t('message.userCode')"
+            :item-render="{ name: 'input', attrs: { disabled: data.dataStatus === 'update' } }"
+            field="userName"
+            span="24"
+          />
+          <vxe-form-item :title="$t('message.userName')" field="name" span="24" :item-render="{ name: 'input' }" />
+          <vxe-form-item
+            v-if="data.dataStatus === 'add'"
+            :title="$t('message.userPwd')"
+            :item-render="{ name: 'input' }"
+            field="userPwd"
+            span="24"
+          />
+          <vxe-form-item align="right" span="24">
+            <template #default>
+              <ut-button content="cancel" icon="ri-close-fill" @click="handleClose" />
+              <ut-button content="confirm" icon="ri-save-3-fill" status="u-cyan" @click="onSubmit" />
+            </template>
+          </vxe-form-item>
+        </vxe-form>
+      </template>
+    </vxe-modal>
+    <!-- 用户角色 -->
+    <vxe-modal v-model="data.showUserRole" :loading="loading" :title="$t('message.title.roleInfo')" width="600">
+      <template #default>
+        <vxe-table height="300" :data="data.roleList" border>
+          <vxe-column type="seq" width="60" />
+          <vxe-column field="roleName" :title="$t('message.udp.roleName')" />
+          <vxe-column field="roleDesc" :title="$t('message.udp.roleDesc')" />
+        </vxe-table>
+      </template>
+    </vxe-modal>
+
+    <vxe-modal
+      v-model="data.showAuth"
+      :loading="loading"
+      :title="$t('message.title.authority', { role: data.record.name || '88888' })"
+      height="620"
+      width="560"
+    >
+      <template #default>
+        <el-tree-v2
+          ref="xTree"
+          :data="data.roleList"
+          :props="{ children: 'children', label: 'menuName' }"
+          :height="560"
+          node-key="id"
+        />
+      </template>
+    </vxe-modal>
+
+    <ut-modal-form
+      v-if="data.showModal"
+      :record="data.record"
+      :items="data.items"
+      :width="360"
+      :height="data.height"
+      :method="!data.record.id ? 'post' : 'put'"
+      :data-process-method="dataProcessMethod"
+      :title="$t('message.title.userInfo')"
+      data-status="update"
+      :url="url"
+      @close="data.showModal = false"
+      @confirm="onConfirm"
+    />
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { useI18n } from 'vue-i18n';
+import { ref, reactive, inject, onMounted } from 'vue';
+import to from 'await-to-js';
+import { useRender, errorMessage, warnMessage, delay, getDictChildren } from '@utogether/utils';
+import { VxeUI, VxeFormPropTypes } from 'vxe-pc-ui';
+import { clone, isEmpty } from 'xe-utils';
+import { getServiceApi } from '../../../api';
+
+const data = reactive<IRecord>({
+  record: {},
+  listQuery: {},
+  dataList: [],
+  roleList: [],
+  items: [],
+  submitLoading: false,
+  showModelView: false,
+  showUserRole: false,
+  showModal: false,
+  showAuth: false,
+  dataStatus: ''
+});
+
+const serviceApi = getServiceApi();
+const { t } = useI18n();
+
+const rules: VxeFormPropTypes.Rules = {
+  userName: [
+    {
+      required: true,
+      message: `${t('message.required')}${t('message.userCode')}`
+    }
+  ],
+  name: [
+    {
+      required: true,
+      message: `${t('message.required')}${t('message.userName')}`
+    }
+  ],
+  unitId: [
+    {
+      required: true,
+      message: `${t('message.required')}${t('message.unitName')}`
+    }
+  ],
+  userPwd: [
+    {
+      required: true,
+      message: `${t('message.required')}${t('message.userPwd')}`
+    }
+  ]
+};
+const renderHook = useRender();
+const defaultParams = ref({});
+const treeList: IRecord[] = inject('treeList');
+const loading = ref(false);
+
+const url = '/uums/user';
+let defaultPassword = '';
+
+const xgrid = ref(null);
+
+const formItems = [
+  { field: 'name', title: 'message.udp.userName' },
+  { field: 'userName', title: 'message.udp.userCode' },
+  { field: 'type', title: 'message.udp.userType', code: 'SU.USER.TYPE' }
+];
+
+const columns = [
+  { type: 'checkbox', width: 40, align: 'center' },
+  { field: 'userName', title: 'message.udp.userCode' },
+  { field: 'name', title: 'message.udp.userName' },
+  {
+    field: 'type',
+    title: 'message.udp.userType',
+    formatter: ['formatDict', 'SU.USER.TYPE']
+  },
+  { field: 'enabled', width: 80, cellRender: renderHook.renderEnabled(handleClick) },
+  {
+    field: 'operate',
+    width: 150,
+    fixed: 'right',
+    slots: {
+      default: ({ row }) => {
+        return [
+          <>
+            <ut-button content="edit" icon="ri-edit-line" onTap={() => handleEdit(row)} />
+
+            <ut-dropdown buttons={getButtons()} onCommand={code => handleCommand(row, code)} />
+          </>
+        ];
+      }
+    }
+  }
+];
+
+const handleCommand = (row, code) => {
+  code === 'role' && handleRole(row);
+  code === 'auth' && handleAuth(row);
+  code === 'passwordReset' && handleResetPwd(row);
+};
+
+const getButtons = () => {
+  // 项目延期
+  const buttons = [
+    { code: 'role', icon: 'ri-user-fill' },
+    { code: 'auth', icon: 'ri-lock-fill' },
+    { code: 'passwordReset', icon: 'ri-lock-password-line' }
+  ];
+  return buttons;
+};
+
+const items = [
+  { field: 'userName', title: 'message.udp.userCode', required: true, disabled: false },
+  { field: 'name', title: 'message.udp.userName', required: true },
+  { field: 'type', required: true, title: 'message.udp.userType', code: 'SU.USER.TYPE' },
+  { field: 'userPwd', required: true, visibleMethod: ({ data }) => !data.id }
+];
+
+const handleAdd = () => {
+  data.record = {
+    userPwd: defaultPassword,
+    ...defaultParams.value,
+    type: 'system'
+  };
+  data.items = clone(items, true);
+  data.height = 280;
+  data.showModal = true;
+};
+const handleEdit = row => {
+  data.record = clone(row, true);
+  data.items = clone(items, true);
+  data.items[0].disabled = true;
+  data.height = 240;
+  data.showModal = true;
+};
+
+const handleDel = () => {
+  xgrid.value.getInstance().commitProxy('delete');
+};
+
+const dataProcessMethod = data => {
+  return [data];
+};
+
+const onConfirm = () => {
+  xgrid.value.refreshData();
+};
+
+// 启用/禁用
+async function handleClick({ row }) {
+  await to(serviceApi.put(url, [row]));
+  xgrid.value.refreshData();
+}
+
+/**
+ * @description: 查看用户角色
+ * @param {*} row 用户行
+ * @return {*}
+ */
+const handleRole = async (row: any) => {
+  data.roleList = [];
+  data.showUserRole = true;
+  loading.value = true;
+  const serverData = await serviceApi.get(url + '/getUserRole', { userName: row.userName });
+  loading.value = false;
+  data.roleList = serverData[0]?.sysRoles;
+  // nextTick(() => {
+  // });
+};
+/**
+ * @description: 密码重置
+ * @param {*} row 用户信息
+ * @return {*}
+ */
+const handleResetPwd = async (row: Object) => {
+  await serviceApi.put(url + '/resetPwd', row);
+  await VxeUI.modal.alert(t('message.tip.initPassword', { code: defaultPassword }));
+};
+// 启用/禁用
+// const handleUpdate = async (record: IRecord) => {
+//   record.enabled = record.enabled === '1' ? '0' : '1';
+//   await serviceApi.put(url, record);
+//   getDataList();
+// };
+/**
+ * @description: 用户权限
+ * @param {*} row 用户信息
+ * @return {*}
+ */
+const handleAuth = async row => {
+  data.roleList = [];
+  data.showAuth = true;
+  loading.value = true;
+  data.record = row;
+  const [err, res] = await to(serviceApi.get(url + '/getUserRole', { userName: row.userName }));
+  loading.value = false;
+  if (!err) {
+    if (!isEmpty(res)) {
+      data.roleList = res[0]?.sysMenuExts;
+    } else {
+      warnMessage(t('message.tip.emptyAuth'));
+    }
+  }
+};
+
+const xForm = ref(null);
+// const xSarchFrom = ref(null);
+
+const onSubmit = () => {
+  xForm.value.validate(async valid => {
+    if (!valid) {
+      const { record, dataStatus } = data;
+      if (dataStatus === 'add') {
+        await serviceApi.post(url, record);
+      } else {
+        await serviceApi.put(url, record);
+      }
+      handleClose();
+    }
+  });
+};
+
+const handleClose = () => {
+  data.showModelView = false;
+};
+
+const onButtonClick = code => {
+  code === 'add' && handleAdd();
+  code === 'del' && handleDel();
+};
+
+const getUnitList = () => {
+  serviceApi
+    .get('/uums/unit', { pageSize: 10 })
+    .then(async res => {
+      defaultParams.value = { unitId: res[0].id, enabled: '1' };
+      await delay(100);
+      xgrid.value.refreshData();
+    })
+    .catch(() => {
+      errorMessage('获取租户失败,刷新后重试');
+    });
+};
+
+const getDefaultPassword = () => {
+  const dict = getDictChildren('SU.DEFAULT_PASSWORD')?.find(f => f.dictCode === 'default');
+  defaultPassword = dict.dictName;
+};
+
+onMounted(() => {
+  getDefaultPassword();
+  getUnitList();
+});
+</script>