yg-yygl 0.0.1

package/dist/views/sys/account/components/account-form.vue

@@ -0,0 +1,581 @@
+<script setup lang="ts">
+import type { FormItemConfig } from '@udp/component-ui';
+
+import type { Account, AccountCreateParams } from '../../../../api/account/types';
+
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
+
+import { Dialog, Form, Icon } from '@udp/component-ui';
+import { useMask } from '@udp/mask';
+import { useSystemStore } from '@udp/stores';
+
+import { ElMessage } from 'element-plus';
+
+import {
+  cofigList,
+  createAccount,
+  getAccountAvatar,
+  getAccountDetail,
+  saveAccountAvatar,
+  updateAccount,
+} from '../../../../api/account';
+import { listDepartment } from '../../../../api/department';
+import { getPostListAll } from '../../../../api/post'; // fjl modify
+import { getRoleList } from '../../../../api/role';
+import { getUserListAll } from '../../../../api/user';
+
+import SubPositions from './sub-positions.vue';
+
+const props = withDefaults(
+  defineProps<{
+    editData?: any;
+    type?: 'add' | 'edit' | 'view';
+  }>(),
+  {
+    editData: () => ({}),
+    type: 'add',
+  },
+);
+
+const { maskText } = useMask();
+
+// 组件状态
+const isAdd = computed(() => props.type === 'add');
+const isEdit = computed(() => !!props.editData?.id && props.type === 'edit');
+const isView = computed(() => props.type === 'view');
+const activeName = ref(['1', '2']);
+const loading = ref(false);
+const baseFormRef = ref();
+const accountFormRef = ref();
+const subPositionsRef = ref();
+const initPassword = ref();
+const roleList = ref<any[]>([]);
+const userList = ref<any[]>([]);
+const postList = ref<any[]>([]);
+
+const systemStore = useSystemStore();
+
+// 加载部门树数据
+const loadNode = (node: any, resolve: (data: any[]) => void) => {
+  listDepartment({ departId: (node as any)?.data?.id, status: 1 }).then(
+    (res) => {
+      resolve(
+        res?.length > 0
+          ? res.map((item: any) => {
+              return {
+                ...item,
+                isLeaf: !item.hasChild,
+              };
+            })
+          : [],
+      );
+    },
+  );
+};
+
+// 表单数据
+const initBaseFormData = reactive({
+  loginCode: '',
+  nickname: '',
+  departmentId: '',
+  postIds: [],
+  roleIds: [],
+  userId: '',
+  sort: 1,
+  description: '',
+  status: 1,
+});
+
+const baseFormData = computed(() => {
+  return baseFormRef.value?.getValues();
+});
+
+const initAccountFormData = reactive({
+  avatar: '',
+  telephone: '',
+  workNum: '',
+  subPositions: [],
+});
+
+const accountFormData = computed(() => {
+  return accountFormRef.value?.getValues();
+});
+
+watch(
+  () => accountFormRef.value?.getValues(),
+  (newVal) => {
+    console.log('accountFormData', newVal);
+  },
+);
+
+// 基础信息表单配置
+const baseFormItems = computed<FormItemConfig[]>(() => [
+  {
+    prop: 'loginCode',
+    label: '登录账号',
+    type: 'input',
+    required: true,
+    placeholder: '请输入登录账号',
+    tooltip: `账号用于登录系统，默认密码：${systemStore.initPassword}`,
+    rules: [
+      { required: true, message: '请输入登录账号', trigger: ['blur', 'input'] },
+      {
+        min: 4,
+        max: 64,
+        message: '长度应在 4-64 个字符',
+        trigger: ['blur', 'input'],
+      },
+      {
+        pattern: /^[a-zA-Z0-9][a-zA-Z0-9@._\-]{3,63}$/,
+        message: '只支持字母、数字、下划线_、连字符-、@符号、点.，且以字母或数字开头',
+        trigger: ['blur', 'input'],
+      },
+    ],
+    props: {
+      disabled: isEdit.value || isView.value,
+    },
+  },
+  {
+    prop: 'nickname',
+    label: '账号昵称',
+    type: 'input',
+    required: true,
+    placeholder: '请输入账号昵称',
+    tooltip: '昵称用于在系统上显示用户的信息',
+    rules: [
+      { required: true, message: '请输入账号昵称', trigger: ['blur', 'input'] },
+      {
+        min: 2,
+        max: 20,
+        message: '账号昵称长度应在 2-20 个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'departmentId',
+    label: '主组织',
+    required: !isEdit.value || baseFormData.value?.type === 2,
+    placeholder: '请选择主组织',
+    slot: 'department',
+    rules: [
+      {
+        required: !isEdit.value || baseFormData.value?.type === 2,
+        message: '请选择主组织',
+        trigger: 'change',
+      },
+    ],
+  },
+  {
+    prop: 'postIds',
+    label: '所在岗位',
+    type: 'select',
+    placeholder: '请选择所在岗位',
+    options: postList.value,
+    props: {
+      multiple: true,
+      disabled:
+        (isEdit.value && baseFormData.value?.type !== 2) || isView.value,
+      collapseTags: true,
+      collapseTagsTooltip: true,
+      maxCollapseTags: 3,
+    },
+  },
+  {
+    prop: 'roleIds',
+    label: '绑定角色',
+    type: 'select-v2',
+    placeholder: '请选择角色',
+    options: roleList.value,
+    props: {
+      multiple: true,
+      disabled:
+        (isEdit.value && baseFormData.value?.type !== 2) || isView.value,
+      collapseTags: true,
+      collapseTagsTooltip: true,
+      filterable: true,
+      maxCollapseTags: 3,
+    },
+  },
+  {
+    prop: 'userId',
+    label: '绑定用户',
+    type: 'select-v2',
+    required: isEdit.value && baseFormData.value?.type !== 2,
+    placeholder: '请选择用户',
+    options: userList.value,
+    rules: [
+      {
+        required: !isEdit.value || baseFormData.value?.type === 2,
+        message: '请选择用户',
+        trigger: 'change',
+      },
+    ],
+    props: {
+      filterable: true,
+    },
+  },
+  {
+    prop: 'status',
+    label: '账号状态',
+    type: 'switch',
+    placeholder: '请选择账号状态',
+    props: {
+      activeValue: 1,
+      inactiveValue: 0,
+      inlinePrompt: true,
+      activeText: '开',
+      inactiveText: '关',
+      disabled:
+        (isEdit.value && baseFormData.value?.type !== 2) || isView.value,
+    },
+  },
+  {
+    prop: 'sort',
+    label: '排序',
+    type: 'number',
+    props: {
+      min: 1,
+      max: 999_999,
+    },
+  },
+  {
+    prop: 'description',
+    label: '账号描述',
+    type: 'textarea',
+    placeholder: '请输入账号描述',
+    gridCols: 1,
+    props: {
+      rows: 3,
+      maxlength: 100,
+      showWordLimit: true,
+    },
+  },
+]);
+
+// 账号信息表单配置
+const accountFormItems = computed<FormItemConfig[]>(() => [
+  {
+    prop: 'avatar',
+    label: '头像 ',
+    slot: 'avatar',
+    placeholder: '请上传头像',
+    gridCols: 1,
+  },
+  {
+    prop: 'telephone',
+    label: '办公电话',
+    type: 'input',
+    placeholder: '请输入办公电话',
+    rules: [
+      {
+        min: 11,
+        max: 11,
+        message: '办公电话长度应为 11 个字符',
+        trigger: ['blur', 'input'],
+      },
+      {
+        pattern: /^\d+$/,
+        message: '请输入正确的办公电话',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'workNum',
+    label: '工号',
+    type: 'input',
+    placeholder: '请输入工号',
+  },
+  {
+    prop: 'subPositions',
+    label: '附属组织',
+    slot: 'subPositions',
+    gridCols: 1,
+    placeholder: '请输入附属组织',
+  },
+]);
+
+const handleSubmit = async () => {
+  try {
+    loading.value = true;
+
+    // 表单验证
+    const baseFormValid = await baseFormRef.value?.validate();
+    const accountFormValid = await accountFormRef.value?.validate();
+    const subPositionsValid = await subPositionsRef.value?.validate();
+    if (!baseFormValid || !accountFormValid || !subPositionsValid) {
+      return;
+    }
+
+    const submitData = {
+      ...baseFormData.value,
+      ...accountFormData.value,
+      subPositions: subPositionsRef.value?.getSubPositions(),
+      ...(isEdit.value ? { id: props.editData.id } : {}),
+    };
+
+    console.warn('提交的表单数据:', submitData);
+    console.warn('当前模式:', isEdit.value ? '编辑' : '新增');
+
+    // 模拟API调用 // fjl modify
+    let accountId: string = '';
+    if (isEdit.value) {
+      await updateAccount(submitData as Account);
+    } else {
+      accountId = await createAccount(submitData as AccountCreateParams);
+    }
+
+    await saveAccountAvatar({
+      accountId: isEdit.value ? props.editData.id : accountId, // fjl modify
+      avatarBase64: accountFormData.value.avatar,
+    });
+
+    ElMessage.success(isEdit.value ? '更新成功!' : '创建成功!');
+    return true;
+  } catch (error) {
+    console.error('提交失败:', error);
+    return false;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const onDepartmentChange = (e: string, setValue: (value: any) => void) => {
+  setValue(e);
+};
+
+const handleCancel = () => {
+  ElMessage.info('取消操作');
+  return true;
+};
+
+const departmentCache = ref({
+  departName: '',
+  id: '',
+});
+// 初始化表单数据
+const initFormData = async (data?: any) => {
+  if (data?.id) {
+    const res = await getAccountDetail(data.id);
+    departmentCache.value.id = res.departmentId;
+    departmentCache.value.departName = res.departmentName || '';
+    // 保持响应式，逐个属性赋值
+    baseFormRef.value?.setValues(res);
+    const avatar = await getAccountAvatar(data.id); // fjl modify
+    const accountFormValues = {
+      avatar,
+      telephone: res.telephone,
+      workNum: res.workNum,
+      subPositions: res.subPositions,
+    };
+    accountFormRef.value?.setValues(accountFormValues);
+    loadPostList(); // fjl modify
+
+  }
+};
+
+// 监听编辑数据变化
+watch(
+  () => props.editData,
+  (newData) => {
+    console.warn('编辑数据变化:', newData);
+    initFormData(newData);
+  },
+  { immediate: true, deep: true },
+);
+
+const loadRoleList = () => {
+  getRoleList({ current: -1, size: 10_000, model: { roleStatus: 1 } }).then(
+    (res) => {
+      roleList.value = res.records.map((item: any) => ({
+        label: item.name,
+        value: item.id,
+      }));
+      console.log('角色列表:', roleList.value);
+    },
+  );
+};
+
+const loadUserList = () => {
+  getUserListAll().then((res) => {
+    console.log('用户列表:', res);
+    userList.value = res.map((item: any) => ({
+      label: `${item.name}/${maskText(item.mobile, { type: 'phone' })}`,
+      value: item.id,
+    }));
+  });
+};
+
+const loadInitPassWord = () => {
+  cofigList({ configType: 'login', configKey: 'initPassword' }).then((res) => {
+    initPassword.value = res?.find(
+      (item: { configKey: string; configValue: string }) =>
+        item.configKey === 'initPassword',
+    )?.configValue;
+  });
+};
+
+const loadPostList = () => {
+  getPostListAll().then((res) => { // fjl modify
+    postList.value = res.map((item: any) => ({
+      label: item.postName,
+      value: item.id,
+    }));
+  });
+};
+
+const updateAvatarVisible = ref(false);
+const avatarCropperRef = ref();
+const updateAvatarCommit = async () => {
+  const fileId = await avatarCropperRef.value.getImageId();
+  console.log(112_233, fileId);
+  accountFormRef.value?.setValue('avatar', fileId);
+  updateAvatarVisible.value = false;
+};
+const updateAvatarClose = () => {
+  updateAvatarVisible.value = false;
+};
+
+// 生命周期
+onMounted(() => {
+  console.warn('表单组件已挂载');
+  loadRoleList();
+  loadUserList();
+  loadInitPassWord();
+  loadPostList(); // fjl modify
+  // 初始化数据已在watch中处理
+});
+
+// 重置表单
+const resetForm = () => {
+  // 重置表单数据
+  initFormData();
+
+  // 清除表单验证
+  nextTick(() => {
+    baseFormRef.value?.clearValidate();
+    accountFormRef.value?.clearValidate();
+  });
+};
+
+defineExpose({
+  handleSubmit,
+  handleCancel,
+  resetForm,
+  initFormData,
+});
+</script>
+
+<template>
+  <div class="relative h-full w-full" :class="{ 'pt-[35px]': isAdd }">
+    <div
+      class="absolute left-[-1.25rem] top-[-1.25rem] flex h-[35px] w-[calc(100%+2.5rem)] items-center gap-2 bg-gray-300 px-4 text-xs text-gray-500 dark:bg-gray-700 dark:text-gray-400"
+      v-if="isAdd"
+    >
+      <Icon name="ep:warning" />
+      <!-- <span>新账号初始密码是{{ systemStore.initPassword }}</span> -->
+      <span>新账号初始密码是{{ initPassword }}</span>
+    </div>
+    <el-collapse v-model="activeName">
+      <el-collapse-item title="基础信息" name="1">
+        <template #title>
+          <div class="text-foreground text-base font-semibold">基础信息</div>
+        </template>
+        <Form
+          ref="baseFormRef"
+          :items="baseFormItems"
+          :initial-values="initBaseFormData"
+          :show-actions="false"
+          label-width="auto"
+          :use-grid="true"
+          :grid-cols="2"
+          :grid-gutter="20"
+          :disabled="isView"
+        >
+          <template #department="{ model, setValue }">
+            <el-tree-select
+              v-model="model.departmentId"
+              lazy
+              :load="loadNode"
+              node-key="id"
+              check-strictly
+              :disabled="(isEdit && baseFormData?.type !== 2) || isView"
+              :cache-data="[departmentCache]"
+              :props="{
+                children: 'children',
+                label: 'departName',
+                value: 'id',
+                isLeaf: 'isLeaf',
+              }"
+              :show-arrow="false"
+              @change="onDepartmentChange($event, setValue)"
+            />
+          </template>
+        </Form>
+      </el-collapse-item>
+      <el-collapse-item title="账号资料" name="2">
+        <template #title>
+          <div class="text-foreground text-base font-semibold">账号资料</div>
+        </template>
+        <Form
+          ref="accountFormRef"
+          :items="accountFormItems"
+          :initial-values="initAccountFormData"
+          :show-actions="false"
+          label-width="auto"
+          :use-grid="true"
+          :grid-cols="2"
+          :grid-gutter="20"
+          :disabled="isView"
+        >
+          <template #avatar="{ model }">
+            <div>
+              <div
+                class="hover:border-primary group flex h-[90px] w-[90px] items-center justify-center rounded-[var(--radius)] border-[1px] border-dashed border-[var(--el-border-color-darker)] bg-[var(--el-fill-color-lighter)]"
+                :class="{ 'cursor-not-allowed': isView }"
+                @click="!isView && (updateAvatarVisible = true)"
+              >
+                <img
+                  v-if="model.avatar"
+                  :src="model.avatar"
+                  class="h-full w-full rounded-[var(--radius)]"
+                />
+                <Icon
+                  v-else
+                  name="ep:plus"
+                  class="group-hover:text-primary h-8 w-8"
+                />
+              </div>
+              <div class="text-muted-foreground mt-2 text-xs">
+                限制图片格式为png, jpg, jpeg，不得超过5MB
+              </div>
+            </div>
+          </template>
+          <template #subPositions="{ model }">
+            <SubPositions
+              ref="subPositionsRef"
+              :model="model.subPositions"
+              :main-department-id="baseFormData?.departmentId"
+            />
+          </template>
+        </Form>
+      </el-collapse-item>
+    </el-collapse>
+    <Dialog
+      v-model="updateAvatarVisible"
+      title="修改头像"
+      icon="mdi:crop-rotate"
+      width="800px"
+      @confirm="updateAvatarCommit"
+      @closed="updateAvatarClose"
+    >
+      <AvatarCropper
+        ref="avatarCropperRef"
+        :url="accountFormData?.avatar || ''"
+      />
+    </Dialog>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

package/dist/views/sys/account/components/account-form.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    editData?: any;
+    type?: 'add' | 'edit' | 'view';
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    handleSubmit: () => Promise<boolean | undefined>;
+    handleCancel: () => boolean;
+    resetForm: () => void;
+    initFormData: (data?: any) => Promise<void>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: "add" | "edit" | "view";
+    editData: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/views/sys/account/components/account-import.d.vue.ts

@@ -0,0 +1,4 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    uploadFile: () => Promise<boolean | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/views/sys/account/components/account-import.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { h, ref } from 'vue';
+
+import { ElMessage } from 'element-plus';
+
+import { importAccountExcel } from '../../../../api/account';
+import { ImportFile } from '../../../../components/import-file';
+
+// 导入文件实例
+const importFileRef = ref();
+// 存储选择的文件
+const selectedFile = ref<File | null>(null);
+
+// 监听文件变化
+const handleFileChange = (file: File | null) => {
+  selectedFile.value = file;
+};
+
+const uploadFile = async () => {
+  // 获取上传的文件
+  const file = importFileRef.value?.getFile();
+
+  if (!file) {
+    ElMessage.warning('请先选择要导入的文件');
+    return;
+  }
+
+  // 显示加载提示
+  const loadingMessage = ElMessage({
+    type: 'info',
+    message: '正在导入数据，请稍候...',
+    duration: 0,
+  });
+
+  // 创建FormData
+  const formData = new FormData();
+  formData.append('file', file);
+
+  try {
+    // 调用API上传Excel文件
+    const data = await importAccountExcel(formData);
+    // 关闭加载提示并显示成功消息
+    loadingMessage.close();
+    if (!data || data.length === 0) {
+      ElMessage.success('账号导入成功');
+    } else {
+      // 账号导入成功，但有部分数据导入失败，请检查
+      ElMessage({
+        showClose: true,
+        type: 'warning',
+        plain: true,
+        message: h(
+          'div',
+          {
+            style:
+              'line-height: 1; font-size: 16px; max-height: 200px; overflow-y: auto',
+          },
+          [
+            h(
+              'div',
+              { style: 'color: var(--el-color-warning)' },
+              '账号导入成功，但有部分数据导入失败，请检查',
+            ),
+            data.map((item: any) => {
+              return h(
+                'div',
+                { style: 'color: var(--el-color-danger); margin-top: 10px;' },
+                item.fullErrorMessage,
+              );
+            }),
+          ],
+        ),
+      });
+    }
+    return true;
+  } catch {
+    // 关闭加载提示并显示错误消息
+    loadingMessage.close();
+    return false;
+  }
+};
+
+// 暴露方法给父组件
+defineExpose({
+  uploadFile,
+});
+</script>
+
+<template>
+  <div>
+    <ImportFile
+      ref="importFileRef"
+      v-model:file="selectedFile"
+      @change="handleFileChange"
+      :show-template-download="true"
+      file-name="账号导入模板.xlsx"
+      template-download-text="下载导入模板"
+    />
+  </div>
+</template>

package/dist/views/sys/account/components/account-import.vue.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    uploadFile: () => Promise<boolean | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;