yg-yygl 0.0.1

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

@@ -0,0 +1,514 @@
+<script setup lang="ts">
+import type { FormItemConfig } from '@udp/component-ui';
+
+import type {
+  CreateTenantParams,
+  TenantQueryOtherParams,
+  UpdateTenantParams,
+} from '../../../../api/tenant/types';
+
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+
+import { Form } from '@udp/component-ui';
+
+import { Loading } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+import {
+  createTenant,
+  getAccountList,
+  getUserList,
+  updateTenant,
+} from '../../../../api/tenant';
+
+import ApplicationMenuAuth from './application-menu-auth.vue';
+
+// 类型定义
+interface TenantFormData {
+  id: null | string;
+  tenantName: string;
+  code: string;
+  permissionWeb: string[];
+  permissionApp: string[]; // APP菜单权限
+  adminId: string;
+  status: number;
+  name: number | string;
+  ownerAccountName: string; // 所有者账号名称
+}
+
+interface UserOption {
+  value: string; // 已确认为string类型
+  label: string;
+  mobile: string;
+}
+
+interface EditData {
+  id?: string;
+  tenantName?: string;
+  code?: string;
+  permissionWeb?: string[];
+  permissionApp?: string[];
+  adminId?: string;
+  status?: number;
+}
+
+const props = defineProps<{
+  editData?: EditData;
+}>();
+
+// 组件状态
+const isEdit = computed(() => !!props.editData?.id);
+const loading = ref(false);
+const formRef = ref();
+
+// 表单数据
+const internalFormData = reactive<TenantFormData>({
+  id: null,
+  tenantName: '',
+  code: '',
+  permissionWeb: [],
+  permissionApp: [],
+  adminId: '',
+  name: '',
+  status: 1,
+  ownerAccountName: '', // 所有者账号名称
+});
+
+const formData = computed<TenantFormData>({
+  get() {
+    return (formRef.value?.getValues() as TenantFormData) || {};
+  },
+  set(value) {
+    console.log('99999999999999999', value);
+    formRef.value?.setValues(value as TenantFormData);
+  },
+});
+
+// 所有者账号相关状态
+const ownerAccountLoading = ref(false);
+// true表示可编辑，false表示不可编辑
+const ownerAccountEditable = ref(true); // 控制所有者账号是否可编辑
+
+// 下拉选择相关数据
+const availableUsers = ref<UserOption[]>([]);
+const userSelectLoading = ref(false);
+
+// 加载用户列表
+const loadUserList = async () => {
+  try {
+    userSelectLoading.value = true;
+
+    // 基础参数 - 不再使用搜索关键词作为API参数
+    const params: TenantQueryOtherParams = {
+      tenantId: '0', // 根据API文档，使用type=2查询账号列表
+    };
+
+    console.log('加载用户列表参数:', params);
+    const res = await getUserList(params);
+    console.log('API返回的用户列表数据:', res);
+
+    if (Array.isArray(res)) {
+      // 后端已确认id为string类型，不需要转换
+      availableUsers.value = res.map((item: any) => ({
+        value: item.id, // 后端返回的id已经是string类型
+        label: item.name || '',
+        mobile: item.mobile || '',
+      }));
+
+      const user = availableUsers.value.find(
+        (u) => u.value === props.editData?.adminId,
+      );
+
+      if (user) {
+        loadOwnerAccount(user?.mobile, props.editData?.id);
+      }
+
+      console.log('处理后的用户列表数据:', availableUsers.value);
+    } else {
+      console.error('API返回的数据格式不正确:', res);
+      availableUsers.value = [];
+    }
+  } catch (error) {
+    console.error('加载用户列表失败:', error);
+    ElMessage.error('加载用户列表失败');
+    availableUsers.value = [];
+  } finally {
+    userSelectLoading.value = false;
+  }
+};
+
+// 表单配置
+const formItems = computed<FormItemConfig[]>(() => [
+  {
+    prop: 'tenantName',
+    label: '租户名称',
+    type: 'input',
+    required: true,
+    placeholder: '请输入租户名称',
+    props: {
+      disabled: isEdit.value,
+    },
+    rules: [
+      { required: true, message: '请输入租户名称', trigger: ['blur', 'input'] },
+      {
+        pattern: /^[\u4E00-\u9FA5a-z0-9]+$/i,
+        message: '租户名称只能包含中文、英文和数字',
+        trigger: ['blur', 'input'],
+      },
+      {
+        min: 2,
+        max: 20,
+        message: '租户名称长度应在 2-20 个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'code',
+    label: '租户编码',
+    type: 'input',
+    required: true,
+    placeholder: '请输入租户编码',
+    props: {
+      disabled: isEdit.value,
+    },
+    rules: [
+      { required: true, message: '请输入租户编码', trigger: ['blur', 'input'] },
+      {
+        min: 2,
+        max: 20,
+        message: '租户编码长度应在 2-20 个字符',
+        trigger: ['blur', 'input'],
+      },
+      {
+        pattern: /^[\w-]+$/,
+        message: '租户编码只能包含字母、数字、下划线和横线',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'status',
+    label: '启用状态',
+    type: 'switch',
+    props: {
+      'inline-prompt': true,
+      activeText: '开',
+      inactiveText: '关',
+      activeValue: 1,
+      inactiveValue: 0,
+    },
+  },
+  {
+    prop: 'adminId',
+    label: '租户所有者',
+    required: true,
+    type: 'select',
+    options: availableUsers.value,
+    props: {
+      onChange: (value: string) => handleAdminChange(value),
+      filterable: true,
+    },
+    rules: [{ required: true, message: '请选择租户所有者', trigger: 'change' }],
+  },
+  {
+    prop: 'ownerAccountName',
+    label: '所有者账号',
+    slot: 'ownerAccountName',
+    tooltip: '所有者账号用于登录该租户系统',
+    required: true,
+    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'],
+      },
+    ],
+  },
+  {
+    prop: 'permissions',
+    label: '授权菜单',
+    slot: 'permissions',
+  },
+]);
+
+const onMenuPermissionChange = ({
+  web,
+  app,
+}: {
+  app: string[];
+  web: string[];
+}) => {
+  formRef.value.setValue('permissionWeb', web);
+  formRef.value.setValue('permissionApp', app);
+};
+
+// 查询所有者账号名称
+const loadOwnerAccount = async (mobile: string, tenantId?: string) => {
+  if (!mobile || !tenantId) {
+    ownerAccountEditable.value = true; // 没有选择所有者时可编辑
+    return;
+  }
+
+  try {
+    ownerAccountLoading.value = true;
+    const params = {
+      tenantId,
+      mobile,
+    };
+
+    console.log('查询账号信息参数:', params);
+    const res = await getAccountList(params);
+    console.log('查询账号信息结果:', res);
+
+    if (Array.isArray(res) && res.length > 0) {
+      formRef.value.setValue('ownerAccountName', res[0]?.loginCode || '');
+      ownerAccountEditable.value = false; // 查询到数据时不可编辑
+      formRef.value.clearValidate(['ownerAccountName']);
+    } else {
+      formRef.value.setValue('ownerAccountName', '');
+      ownerAccountEditable.value = true; // 查询不到数据时可编辑
+    }
+  } catch (error) {
+    console.error('查询所有者账号失败:', error);
+    // 查询失败，设置为可编辑
+    ownerAccountEditable.value = true;
+  } finally {
+    ownerAccountLoading.value = false;
+  }
+};
+
+// 处理下拉选择变化
+const handleAdminChange = (selectedId: string) => {
+  console.log('handleAdminChange', selectedId);
+  formRef.value.setValue('adminId', selectedId);
+  if (selectedId) {
+    const user = availableUsers.value.find((u) => u.value === selectedId);
+    if (user) {
+      // 查询所有者账号名称
+      if (formData.value.id) {
+        loadOwnerAccount(user.mobile, formData.value.id);
+      } else {
+        // 没有租户ID时，设置为可编辑
+        formRef.value.setValue('ownerAccountName', '');
+        ownerAccountEditable.value = true;
+        console.log('没有租户ID，设置ownerAccountEditable=true');
+      }
+    }
+  } else {
+    formRef.value.setValue('ownerAccountName', '');
+    ownerAccountEditable.value = true; // 清空选择时设为可编辑
+    console.log('清空所有者选择，设置ownerAccountEditable=true');
+  }
+};
+
+// 验证所有者账号格式
+const validateOwnerAccount = async (): Promise<boolean> => {
+  if (!formData.value.adminId) {
+    ElMessage.warning('请选择租户所有者');
+    return false;
+  }
+
+  if (!formData.value.ownerAccountName?.trim()) {
+    ElMessage.warning('请输入所有者账号');
+    await formRef.value?.validateField('ownerAccountName');
+    return false;
+  }
+
+  const accountName = formData.value.ownerAccountName.trim();
+  if (!/^[a-zA-Z0-9][a-zA-Z0-9@._\-]{3,63}$/.test(accountName)) {
+    ElMessage.error(
+      '所有者账号格式错误：只支持字母、数字、下划线_、连字符-、@符号、点.，且以字母或数字开头',
+    );
+    await formRef.value?.validateField('ownerAccountName');
+    return false;
+  }
+
+  if (accountName.length < 4 || accountName.length > 64) {
+    ElMessage.error('所有者账号长度应在 4-64 个字符');
+    await formRef.value?.validateField('ownerAccountName');
+    return false;
+  }
+
+  return true;
+};
+
+// 处理提交错误
+const handleSubmitError = async (error: any): Promise<boolean> => {
+  console.error('提交失败:', error);
+
+  let errorMessage = '操作失败，请重试';
+  let showGenericError = true;
+
+  if (error?.response?.data) {
+    const errorData = error.response.data;
+    errorMessage = errorData.message || errorData.msg || errorMessage;
+
+    if (
+      errorMessage.includes('登录账号格式错误') ||
+      errorMessage.includes('账号格式')
+    ) {
+      ElMessage.error(
+        '所有者账号格式错误：只支持字母、数字、下划线_、连字符-、@符号、点.，且以字母或数字开头',
+      );
+      await formRef.value?.validateField('ownerAccountName');
+      showGenericError = false;
+    }
+  } else if (error?.message) {
+    errorMessage = error.message;
+  }
+
+  if (showGenericError) {
+    ElMessage.error(errorMessage);
+  }
+  return false;
+};
+
+// 提交表单
+const handleSubmit = async (): Promise<boolean> => {
+  try {
+    loading.value = true;
+
+    // 表单验证
+    const valid = await formRef.value?.validate();
+    if (!valid) {
+      return false;
+    }
+
+    // 数据验证
+    if (!formData.value.tenantName.trim()) {
+      ElMessage.error('请输入租户名称');
+      return false;
+    }
+
+    if (!formData.value.code.trim()) {
+      ElMessage.error('请输入租户编码');
+      return false;
+    }
+
+    // 验证所有者账号
+    if (!await validateOwnerAccount()) {
+      return false;
+    }
+
+    // 准备提交数据
+    const submitData = { ...formData.value };
+
+    // 调用API
+    await (isEdit.value
+      ? updateTenant(submitData as UpdateTenantParams)
+      : createTenant(submitData as CreateTenantParams));
+    // 关闭抽屉
+    return true;
+  } catch (error: any) {
+    return handleSubmitError(error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 初始化表单数据
+const initFormData = (data?: EditData) => {
+  if (data?.id) {
+    // 如果有管理员ID，设置name并查询账号名称
+    // 在编辑模式下，如果有租户ID和管理员ID，查询账号名称
+    if (data.adminId) {
+      const user = availableUsers.value.find((u) => u.value === data.adminId);
+      if (user) {
+        loadOwnerAccount(user?.mobile, data.id);
+      }
+    }
+    Object.assign(internalFormData, {
+      id: data.id,
+      tenantName: data.tenantName || '',
+      code: data.code || '',
+      permissionWeb: data.permissionWeb || [],
+      permissionApp: data.permissionApp || [],
+      adminId: data.adminId || '',
+      status: data.status,
+      name: data.adminId || '',
+    });
+  }
+};
+
+// 监听编辑数据变化
+watch(
+  () => props.editData,
+  (newData) => {
+    initFormData(newData);
+  },
+  { immediate: true, deep: true },
+);
+
+// 生命周期
+onMounted(() => {
+  // 仅在页面初始化时加载一次用户列表
+  loadUserList();
+});
+
+defineExpose({
+  handleSubmit,
+});
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    :items="formItems"
+    :initial-values="internalFormData"
+    :show-actions="false"
+    label-width="auto"
+  >
+    <!-- 所有者账号插槽 -->
+    <template #ownerAccountName="{ model, serValue }">
+      <div class="w-full">
+        <el-input
+          v-model="model.ownerAccountName"
+          :disabled="!ownerAccountEditable"
+          :readonly="!ownerAccountEditable"
+          :placeholder="
+            isEdit && model.ownerAccountName
+              ? '选择租户所有者后自动显示'
+              : '请输入所有者账号'
+          "
+          class="w-full"
+          @input="serValue"
+        >
+          <template #suffix>
+            <el-icon v-if="ownerAccountLoading" class="is-loading">
+              <Loading />
+            </el-icon>
+          </template>
+        </el-input>
+        <!-- 格式提示文本 -->
+        <div
+          v-if="!isEdit || ownerAccountEditable"
+          class="mt-1 text-xs text-gray-500"
+        >
+          <span class="text-gray-400">格式要求：</span>
+          <span>小写字母开头，仅含小写字母和数字，长度 2-20 个字符</span>
+        </div>
+      </div>
+    </template>
+
+    <!-- 权限菜单树形选择插槽 -->
+    <template #permissions>
+      <ApplicationMenuAuth
+        :web-menus-selections="formData.permissionWeb || []"
+        :app-menus-selections="formData.permissionApp || []"
+        @change="onMenuPermissionChange"
+      />
+    </template>
+  </Form>
+</template>

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

@@ -0,0 +1,16 @@
+interface EditData {
+    id?: string;
+    tenantName?: string;
+    code?: string;
+    permissionWeb?: string[];
+    permissionApp?: string[];
+    adminId?: string;
+    status?: number;
+}
+type __VLS_Props = {
+    editData?: EditData;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    handleSubmit: () => Promise<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/views/sys/tenant/index.d.vue.ts

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