qingcheng-Web/src/view/userList/userList.vue

<template>
  <!-- 搜索框 -->
  <div class="search-box">
    <div class="search-container">
      <a-form layout="inline">
        <a-space>

          <a-form-item label="手机号">
            <a-input-search
                style="width: 300px;"
                placeholder="请输入手机号"
                enter-button
                @search="handlePhoneSearch"
                v-model:value="searchPhone"
                type="text"
                class="custom-search"
                :maxlength="11"
                @input="handleSearchPhoneInput"
                @keydown="handleKeyDown"
            />
          </a-form-item>

          <a-button class="custom-button" @click="showModal">新增管理员</a-button>
          <!--新增用户-->
          <a-modal
              v-model:open="openUser"
              title="新增管理员"
              @ok="handleOk"
              :footer="null"
          >
            <a-form
                ref="formRef"
                :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }"
                @submit="handleSubmit"
                :rules="formRules"
            >
              <a-form-item label="昵称" name="nickName">
                <a-input
                    v-model:value="formData.nickName"
                    :maxlength="6"
                    @input="handleNicknameInput"
                    autocomplete="off"
                />
                <template #help>
    <span v-if="formData.nickName.length > 0" class="tip">
      {{ formData.nickName.length }}/6
      <span v-if="formData.nickName.length > 6" class="error-tip">（超过最大长度）</span>
    </span>
                </template>
              </a-form-item>

              <a-form-item label="头像" name="userAvatar" required>
                <a-upload
                    name="file"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    :before-upload="beforeUpload"
                    :custom-request="handleUpload"
                >
                  <img v-if="formData.userAvatar" :src="previewImage" alt="avatar" style="width: 100%"/>
                  <div v-else>
                    <loading-outlined v-if="uploadLoading"></loading-outlined>
                    <plus-outlined v-else></plus-outlined>
                    <div class="ant-upload-text">上传头像</div>
                  </div>
                </a-upload>
              </a-form-item>

              <a-form-item label="手机号" name="phoneNumber">
                <a-input
                    v-model:value="formData.phoneNumber"
                    :maxlength="11"
                    @input="handlePhoneInput"
                    autocomplete="off"
                />
                <template #help>
    <span v-if="formData.phoneNumber.length > 0" class="tip">
      {{ formData.phoneNumber.length }}/11
      <span v-if="formData.phoneNumber.length > 11" class="error-tip">（超过最大长度）</span>
    </span>
                </template>
              </a-form-item>

              <!-- 修改账户表单项 -->
              <a-form-item label="账号" name="userAccount">
                <a-input
                    v-model:value="formData.userAccount"
                    :maxlength="11"
                    @input="handleAccountInput"
                    autocomplete="off"
                />
                <template #help>
    <span v-if="formData.userAccount.length > 0" class="tip">
      {{ formData.userAccount.length }}/11
      <span v-if="!/^[A-Za-z0-9]+$/.test(formData.userAccount)" class="error-tip">（包含非法字符）</span>
    </span>
                </template>
              </a-form-item>

              <a-form-item label="密码" name="userPassword">
                <a-input
                    v-model:value="formData.userPassword"
                    type="password"
                    :maxlength="10"
                    @input="handlePasswordInput"
                    autocomplete="off"
                />
                <template #help>
                  <div v-if="formData.userPassword.length > 0">
                    <span class="tip">{{ formData.userPassword.length }}/10</span>
                    <div class="password-strength">
                      <span :class="{ 'strength-ok': hasLower }">小写字母</span>
                      <span :class="{ 'strength-ok': hasUpper }">大写字母</span>
                      <span :class="{ 'strength-ok': hasNumber }">数字</span>
                    </div>
                  </div>
                  <!-- 新增错误提示 -->
                  <span v-if="formData.userPassword.length > 0 && !passwordMeetsRequirements" class="error-tip">
        请输入包含数字、字母小写、字母大写的组合
      </span>
                </template>
              </a-form-item>

              <a-form-item :wrapper-col="{ span: 16, offset: 5 }">
                <a-button type="primary" html-type="submit">提交</a-button>
              </a-form-item>
            </a-form>
          </a-modal>
          <a-button
              type="primary"
              danger
              :disabled="selectedRowKeys.length === 0"
              @click="batchDelete"
          >
            批量删除({{ selectedRowKeys.length }})
          </a-button>
          <a-button class="custom-button" @click="reset">重置搜索</a-button>
        </a-space>
      </a-form>
    </div>
  </div>
  <!--  数据-->
  <a-table
      :columns="columns"
      :data-source="tableData"
      :scroll="{ x: 1400, y: 550 }"
      :loading="loading"
      :row-selection="rowSelection"
      :pagination="pagination"
      bordered
      rowKey="id"
      @change="handleTableChange"
  >
    <template #bodyCell="{ column, record }">

      <template v-if="column.key === 'userAvatar'">
        <a-avatar :src="downLoadImage + record.userAvatar" />
      </template>

      <template v-if="column.key === 'operation'">
        <a-space :size="16">
          <a class="action-btn" @click="showDrawer(record)">详情</a>
          <a-divider type="vertical" v-if="store.loginUser.userRole === 'boss' && record.userRole === 'admin'"/>
          <a class="action-btn" type="link"
             @click="confirmDeleteUser(record.id)"
             v-if="store.loginUser.userRole === 'boss' && record.userRole === 'admin'">
            删除
          </a>
        </a-space>
      </template>
    </template>
  </a-table>

  <!--  抽屉-->
  <a-drawer
      v-model:open="open"
      title="用户详细信息"
      placement="right"
      width="600"
  >
    <div v-if="selectedUser" class="user-detail">
      <div class="header">
        <a-avatar :size="128" :src="downLoadImage+selectedUser.userAvatar" class="avatar" />
        <a-button
            v-if="store.loginUser.userRole === 'boss' && selectedUser?.userRole === 'admin'"
            @click="toggleEditMode"
            class="custom-button"
        >
          {{ isEditMode ? '取消编辑' : '编辑信息' }}
        </a-button>
      </div>

      <a-form
          v-if="isEditMode"
          :model="editForm"
          :rules="editFormRules"
          ref="editFormRef"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }"
      >
        <!-- 可编辑表单 -->
        <a-form-item label="昵称" name="nickName">
          <a-input
              v-model:value="editForm.nickName"
              :maxlength="6"
              @input="handleEditNicknameInput"
              @keypress="handleMaxLength(6)"
          >
            <template #suffix>
              <span v-if="editForm.nickName.length > 0" class="input-tip">
                {{ editForm.nickName.length }}/6
                <span v-if="editForm.nickName.length > 6" class="error-tip">（超过最大长度）</span>
              </span>
            </template>
          </a-input>
        </a-form-item>

        <a-form-item label="头像" name="userAvatar" required>
          <a-upload
              name="file"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              :before-upload="beforeUpload"
              :custom-request="handleEditUpload"
          >
            <img v-if="editForm.userAvatar" :src="editPreviewImage" alt="avatar" style="width: 100%"/>
            <div v-else>
              <loading-outlined v-if="editUploadLoading"></loading-outlined>
              <plus-outlined v-else></plus-outlined>
              <div class="ant-upload-text">上传头像</div>
            </div>
          </a-upload>
        </a-form-item>


        <a-form-item label="手机号" name="phoneNumber">
          <a-input
              v-model:value="editForm.phoneNumber"
              :maxlength="11"
              @input="handleEditPhoneInput"
          >
            <template #suffix>
              <span v-if="editForm.phoneNumber.length > 0" class="input-tip">
                {{ editForm.phoneNumber.length }}/11
                <span v-if="editForm.phoneNumber.length > 11" class="error-tip">（超过最大长度）</span>
              </span>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item label="账户">
          <a-input v-model:value="editForm.userAccount" disabled />
        </a-form-item>
        <a-form-item label="密码" name="userPassword" required>
          <a-input
              v-model:value="editForm.userPassword"
              type="password"
              :maxlength="10"
              @input="handleEditPasswordInput"
              @keypress="handleMaxLength(10)"
          >
            <template #suffix>
              <span v-if="editForm.userPassword.length > 0" class="input-tip">
                {{ editForm.userPassword.length }}/10
                <div class="password-strength">
                  <span :class="{ 'strength-ok': editHasLower }">小写字母</span>
                  <span :class="{ 'strength-ok': editHasUpper }">大写字母</span>
                  <span :class="{ 'strength-ok': editHasNumber }">数字</span>
                </div>
              </span>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item label="身份">
          <a-select v-model:value="editForm.userRole" disabled>
            <a-select-option value="user">普通用户</a-select-option>
            <a-select-option value="admin">管理员</a-select-option>
            <a-select-option value="boss">老板</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 6 }">
          <a-button class="custom-button" @click="handleSave">保存修改</a-button>
        </a-form-item>
      </a-form>

      <div v-else class="view-mode">
        <!-- 基本信息卡片 -->
        <a-card title="基本信息" class="info-card">
          <div class="info-item">
            <user-outlined class="info-icon" />
            <div class="info-content">
              <span class="info-label">用户ID</span>
              <span class="info-value">{{ selectedUser.id }}</span>
            </div>
          </div>

          <div class="info-item">
            <idcard-outlined class="info-icon" />
            <div class="info-content">
              <span class="info-label">账户信息</span>
              <div class="account-detail">
                <span>{{ selectedUser.userAccount }}</span>
                <a-tag class="role-tag">
                  {{ editForm.userRole}}
                </a-tag>
              </div>
            </div>
          </div>

          <div class="info-item">
            <smile-outlined class="info-icon" />
            <div class="info-content">
              <span class="info-label">昵称</span>
              <span class="info-value highlight">{{ selectedUser.nickName }}</span>
            </div>
          </div>
        </a-card>

        <!-- 联系信息卡片 -->
        <a-card title="联系信息" class="info-card">
          <div class="info-item">
            <phone-outlined class="info-icon" />
            <div class="info-content">
              <span class="info-label">手机号码</span>
              <span class="info-value">{{ selectedUser.phoneNumber || '未绑定' }}</span>
            </div>
          </div>
        </a-card>


      </div>

    </div>
  </a-drawer>



</template>

<script lang="ts" setup>
import { onMounted, ref,computed } from "vue";
import myAxios from "../../api/myAxios.ts";
import { message, Modal  } from "ant-design-vue";
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import type { UploadProps } from 'ant-design-vue';
import {userStore} from "../../store/userStore.ts";
import {downLoadImage} from '../../api/ImageUrl.ts'
const store = userStore()
import {
  UserOutlined,
  IdcardOutlined,
  SmileOutlined,
  PhoneOutlined,
} from '@ant-design/icons-vue';
const uploadLoading = ref(false);
const previewImage = ref('');
// 上传前校验
const beforeUpload: UploadProps['beforeUpload'] = file => {
  const isImage = file.type.startsWith('image/');
  if (!isImage) {
    message.error('只能上传图片文件!');
    return false;
  }
  const isLt5M = file.size / 1024 / 1024 < 5;
  if (!isLt5M) {
    message.error('图片大小不能超过5MB!');
    return false;
  }
  return true;
};



// 自定义上传处理
const handleUpload = async ({ file }: { file: File }) => {
  const form = new FormData();
  form.append('file', file);

  try {
    uploadLoading.value = true;
    const storedToken = localStorage.getItem('token');


    const res:any = await myAxios.post('/file/upload?biz=avatar', form, {
      headers: {
        Authorization: storedToken,

      }
    });
    console.log(res)

    if (res.code === 1) {
      formData.value.userAvatar = res.data;
      previewImage.value = URL.createObjectURL(file);
      message.success('上传成功');
    } else {
      message.error(res.message || '上传失败');
    }
  } catch (error:any) {
    console.error('上传失败详情:', error);
    message.error(`上传失败：${error.response?.data?.error || error.message}`);
  } finally {
    uploadLoading.value = false;
  }
};


const handleEditNicknameInput = (e: any) => {

  const trimmedValue = e.target.value.trim().slice(0, 6);
  editForm.value.nickName = trimmedValue;

  editFormRef.value?.validateField('nickName');
};

const handleEditPhoneInput = (e: any) => {

  const numericValue = e.target.value.replace(/\D/g, '').slice(0, 11);
  editForm.value.phoneNumber = numericValue;

  editFormRef.value?.validateField('phoneNumber');
};

const handleEditPasswordInput = (e: any) => {

  editForm.value.userPassword = e.target.value.slice(0, 10);
};


const handleMaxLength = (max: number) => (e: KeyboardEvent) => {
  if (e.target instanceof HTMLInputElement && e.target.value.length >= max) {
    e.preventDefault();
  }
};


const formRules = {
  nickName: [
    {
      required: true,
      message: '请输入昵称',
      trigger: ['input', 'blur']
    },
    {
      min: 1,
      max: 6,
      message: '昵称长度需为1-6位',
      trigger: ['input', 'blur']
    }
  ],
  phoneNumber: [
    {
      required: true,
      message: '请输入手机号',
      trigger: ['input', 'blur']
    },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '必须是有效的11位手机号',
      trigger: ['input', 'blur']
    }
  ],
  userAccount: [
    {
      required: true,
      message: '请输入账户',
      trigger: ['input', 'blur']
    },
    {
      min: 6,
      max: 11,
      message: '长度需为6-11位',
      trigger: ['input', 'blur']
    },
    {
      pattern: /^[A-Za-z0-9]+$/,
      message: '不能包含中文或特殊字符',
      trigger: ['input', 'blur']
    }
  ],
  userPassword: [
    {
      required: true,
      message: '请输入密码',
      trigger: ['input', 'blur']
    },
    {
      min: 6,
      max: 10,
      message: '长度需为6-10位',
      trigger: ['input', 'blur']
    },
    {
      validator: (_: any, value: string) => {
        if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
          return Promise.reject('请输入包含数字、字母小写、字母大写的组合');
        }
        return Promise.resolve();
      },
      trigger: ['input', 'blur']
    }
  ]
}

const handleSearchPhoneInput = (e: any) => {
  let value = e.target.value;

  // 只允许输入数字，并截取前11位
  const newValue = value.replace(/[^0-9]/g, '').slice(0, 11);

  if (newValue !== value) {
    searchPhone.value = newValue;
  }
};

// 新增 onKeyDown 事件处理函数
const handleKeyDown = (e: KeyboardEvent) => {

  const allowedKeys = [
    'Backspace',
    'Delete',
    'ArrowLeft',
    'ArrowRight',
    'Tab',
  ];


  if (!/[0-9]/.test(e.key) && !allowedKeys.includes(e.key)) {
    e.preventDefault();
  }
};


const formData = ref({
  nickName: '',
  userAvatar: '',
  phoneNumber: '',
  userAccount: '',
  userPassword: ''
});

// 手机号实时校验（输入时显示长度提示）
const handlePhoneInput = (e: any) => {
  // 实时过滤非数字字符并限制长度
  formData.value.phoneNumber = e.target.value
      .replace(/\D/g, '')
      .slice(0, 11);
}

const handleAccountInput = (e: any) => {
  // 过滤特殊字符并限制长度
  formData.value.userAccount = e.target.value
      .replace(/[^A-Za-z0-9]/g, '')
      .slice(0, 11);
}
const handleNicknameInput = (e: any) => {
  formData.value.nickName = e.target.value.slice(0, 6);
}
const passwordMeetsRequirements = computed(() => {
  const password = formData.value.userPassword;
  return /(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(password);
});

// 实时密码强度计算（保持原有）
const hasLower = computed(() => /[a-z]/.test(formData.value.userPassword))
const hasUpper = computed(() => /[A-Z]/.test(formData.value.userPassword))
const hasNumber = computed(() => /\d/.test(formData.value.userPassword))

// 密码输入处理
const handlePasswordInput = (e: any) => {
  formData.value.userPassword = e.target.value.slice(0, 10);
}
const loading = ref(false);

const searchParams = ref({
  current: 1,
  pageSize: 10,
  sortField: "id",
  sortOrder: "ascend",
  userRole:null,
  phoneNumber:null
});
//用户表
const columns = [
  {
    title: '用户ID',
    dataIndex: 'id',
    width: 50,
    key: 'id',
    fixed: 'left',
    align: 'center',
    sorter: true,
    sortDirections: ['ascend', 'descend']
  },

  {
    title: '头像',
    dataIndex: 'userAvatar',
    key: 'userAvatar',
    width: 50,
    fixed: 'left',
    align: 'center'
  },
  {
    title: '账号',
    dataIndex: 'userAccount',
    width: 90,
    key: 'userAccount',
    fixed: 'left',
    align: 'center'
  },
  {
    title: '用户昵称',
    dataIndex: 'nickName',
    width: 70,
    key: 'nickName',
    align: 'center'
  },
  {
    title: '身份',
    dataIndex: 'userRole',
    key: 'userRole',
    width: 50,
    align: 'center'
  },
  {
    title: '手机号',
    dataIndex: 'phoneNumber',
    key: 'phoneNumber',
    width: 80,
    align: 'center',
    sorter: true,
    sortDirections: ['ascend', 'descend']
  },
  {
    title: '邀请码',
    dataIndex: 'invitationCode',
    key: 'invitationCode',
    width: 70,
    align: 'center',
    sorter: true,
    sortDirections: ['ascend', 'descend']
  },
  {
    title: '上级ID',
    dataIndex: 'parentUserId',
    key: 'parentUserId',
    width: 40,
    align: 'center',
    sorter: true,
    sortDirections: ['ascend', 'descend']
  },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 90,
    align: 'center'
  }
];
// 分页配置
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  pageSizeOptions: ['10', '20', '50', '100']
});
//编辑用户表单

const editFormRules = {
  nickName: [
    {
      required: true,
      message: '请输入昵称',
      trigger: ['input', 'blur']
    },
    {
      min: 1,
      max: 6,
      message: '昵称长度需为1-6位',
      trigger: ['input', 'blur']
    }
  ],
  phoneNumber: [
    {
      required: true,
      message: '请输入手机号',
      trigger: ['input', 'blur']
    },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '必须是有效的11位手机号',
      trigger: ['input', 'blur']
    }
  ],
  userPassword: [
    {
      min: 6,
      max: 10,
      message: '长度需为6-10位',
      trigger: ['input', 'blur']
    },
    {
      validator: (_: any, value: string) => {
        if (value && !/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
          return Promise.reject('必须包含大小写字母和数字');
        }
        return Promise.resolve();
      },
      trigger: ['input', 'blur']
    }
  ]
};

// 编辑表单的密码强度计算
const editHasLower = computed(() => /[a-z]/.test(editForm.value.userPassword))
const editHasUpper = computed(() => /[A-Z]/.test(editForm.value.userPassword))
const editHasNumber = computed(() => /\d/.test(editForm.value.userPassword))

const editFormRef = ref();

// 修改后的分页处理函数
const handleTableChange = (pag: any, _: any, sorter: any) => {

  let sortField = "id";
  let sortOrder = "ascend";

  if (sorter.field) {
    sortField = sorter.field;
    sortOrder = sorter.order;
  }

  searchParams.value = {
    ...searchParams.value,
    current: pag.current,
    pageSize: pag.pageSize,
    sortField: sortField,
    sortOrder: sortOrder
  };

  pagination.value.current = pag.current;
  pagination.value.pageSize = pag.pageSize;

  getUserList();
};



const getUserList = async () => {
  loading.value = true;
  try {
    const storedToken = localStorage.getItem('token');
    if (!storedToken) throw new Error('未找到登录信息');

    const res: any = await myAxios.post("/userInfo/page",
        {...searchParams.value },
        { headers: { Authorization: storedToken } }
    );
    console.log(res)
    if (res.code === 1 && res.data) {
      tableData.value = res.data.records.map((item: any) => {
        if (item.parentUserId === -1) {
          item.parentUserId = '无';
        }
        return {
          ...item,
          superUserList: item.superHostList? item.superHostList.join(', ') : '无'
        };
      });

      pagination.value.total = res.data.total;
      pagination.value.current = res.data.current;
      pagination.value.pageSize = res.data.size;
    }
  } finally {
    loading.value = false;
  }
};

onMounted(getUserList);

// ID查询方法
interface User {
  id: number;
  nickName: string;
  userAvatar: string;
  phoneNumber: string;
  userAccount: string;
  userPassword: string;
  invitationCode: string;
  userRole:string;
  parentUserId:number
}

const tableData = ref<User[]>([]);

const searchPhone = ref("");


const handlePhoneSearch = async () => {
  if (!searchPhone.value) {
    message.warning('请输入手机号');
    return;
  }

  // 验证手机号格式
  if (!/^1[3-9]\d{9}$/.test(searchPhone.value)) {
    message.warning('请输入有效的11位手机号');
    return;
  }

  loading.value = true;
  try {
    const storedToken = localStorage.getItem('token');
    if (!storedToken) throw new Error('未找到登录信息');


    const res: { code: number; data: any; message: any } = await myAxios.post(
        "/userInfo/page",
        {
          current: 1,
          pageSize: 10,
          phoneNumber: searchPhone.value
        },
        { headers: { Authorization: storedToken } }
    );

    if (res.code === 1 && res.data) {
      tableData.value = res.data.records.map((item: any) => {
        if (item.parentUserId === -1) {
          item.parentUserId = '无';
        }
        return {
          ...item,
          superUserList: item.superHostList? item.superHostList.join(', ') : '无'
        };
      });
      // 更新分页信息
      pagination.value.total = res.data.total;
      pagination.value.current = res.data.current;
      pagination.value.pageSize = res.data.size;
    } else {
      message.error(res.message || '查询失败');
    }
  } catch (error) {
    console.error('查询失败:', error);
    message.error('查询操作失败，请检查网络');
  } finally {
    loading.value = false;
  }
};


const reset = () => {
  searchPhone.value = "";
  searchParams.value = {
    current: 1,
    pageSize: 10,
    sortField: "id",
    sortOrder: "ascend",
    userRole: null,
    phoneNumber: null
  };
  getUserList();
};



// 删除用户
const selectedRowKeys = ref<number[]>([]);

// 配置行选择器
const rowSelection = {
  onChange: (selectedKeys: number[]) => {
    selectedRowKeys.value = selectedKeys;
  },
  selectedRowKeys: selectedRowKeys,

  getCheckboxProps: (record: User) => ({
    disabled: record.userRole !== 'admin',
    name: record.id.toString(),
  }),
};

const confirmDeleteUser = (id: number) => {
  Modal.confirm({
    title: '确认删除用户',
    content: '您确定要删除这个用户吗？此操作不可恢复！',
    okText: '确认删除',
    okType: 'danger',
    cancelText: '取消',
    onOk() {
      return deleteUser(id);
    },
    onCancel() {
      console.log('用户取消删除');
    },
  });
};


const batchDelete = async () => {
  if (selectedRowKeys.value.length === 0) {
    message.warning('请先选择要删除的用户');
    return;
  }

  Modal.confirm({
    title: '确认批量删除',
    content: `您确定要删除选中的 ${selectedRowKeys.value.length} 个用户吗？此操作不可恢复！`,
    okText: '确认删除',
    okType: 'danger',
    cancelText: '取消',
    async onOk() {
      try {
        const storedToken = localStorage.getItem('token');
        if (!storedToken) throw new Error('未找到登录信息');

        const res:any = await myAxios.post(
            '/userInfo/delBatch',
            { ids: selectedRowKeys.value },
            {
              headers: {
                Authorization: storedToken,
                'AfterScript': 'required-script'
              }
            }
        );

        if (res.code === 1) {
          message.success(`成功删除${selectedRowKeys.value.length}条数据`);
          selectedRowKeys.value = [];
          await getUserList();
        } else {
          message.error(res.message || '删除失败');
        }
      } catch (error) {
        console.error('批量删除失败:', error);
        message.error('删除操作失败，请检查网络');
      }
    },
    onCancel() {
      console.log('用户取消批量删除');
    },
  });
};


const deleteUser = async (id: number) => {
  try {
    const storedToken = localStorage.getItem('token');
    const res:any = await myAxios.post(
        "/userInfo/delete",
        { id },
        {
          headers: {
            Authorization: storedToken,
            'AfterScript': 'required-script'
          }
        }
    );

    if (res.code === 1) {
      message.success('删除成功');
      await getUserList();
    } else {
      message.error(res.message || '删除失败');
    }
  } catch (error) {
    console.error('删除失败:', error);
    message.error('删除操作失败');
  }
};



// 操作用户
const open = ref<boolean>(false);

const selectedUser = ref<any>(null);

const isEditMode = ref(false);
const editForm = ref({
  id: 0,
  nickName: '',
  userAvatar: '',
  phoneNumber: '',
  userAccount: '',
  userPassword: '',
  invitationCode: '',
  userRole: '',
  parentUserId: 0,
  SuperUserList: ''
});


const editUploadLoading = ref(false);
const editPreviewImage = ref('');


const handleEditUpload = async ({ file }: { file: File }) => {
  const form = new FormData();
  form.append('file', file);

  try {
    editUploadLoading.value = true;
    const storedToken = localStorage.getItem('token');

    const res: any = await myAxios.post('/file/upload?biz=avatar', form, {
      headers: {
        Authorization: storedToken,
      }
    });

    if (res.code === 1) {
      editForm.value.userAvatar = res.data;
      editPreviewImage.value = URL.createObjectURL(file);
      message.success('头像更新成功');
    } else {
      message.error(res.message || '头像上传失败');
    }
  } catch (error: any) {
    console.error('编辑头像上传失败:', error);
    message.error(`上传失败：${error.response?.data?.error || error.message}`);
  } finally {
    editUploadLoading.value = false;
  }
};
const showDrawer = (record: any) => {
  selectedUser.value = record;
  editForm.value = {
    id: record.id,
    nickName: record.nickName,
    userAvatar: record.userAvatar||'',
    phoneNumber: record.phoneNumber,
    userAccount: record.userAccount,
    userPassword: record.userPassword,
    invitationCode: record.invitationCode,
    userRole: record.userRole,
    parentUserId: record.parentUserId,
    SuperUserList: Array.isArray(record.superHostList)
        ? record.superHostList.join(',')
        : record.SuperUserList || ''
  };
  open.value = true;
  isEditMode.value = false;
};

const toggleEditMode = () => {
  isEditMode.value = !isEditMode.value;
};

const handleSave = async () => {
  try {

    if (editForm.value.userPassword) {
      const password = editForm.value.userPassword;


      const hasNumber = /\d/.test(password);
      const hasUpperCase = /[A-Z]/.test(password);
      const hasLowerCase = /[a-z]/.test(password);

      if (!(hasNumber && hasUpperCase && hasLowerCase)) {
        message.error('密码必须包含数字、大写字母和小写字母');
        return;
      }
    }

    const storedToken = localStorage.getItem('token');
    if (!storedToken) throw new Error('未找到登录信息');


    const processValue = (value: any) => {
      if (value === "" || value === "无") return null;
      return value;
    };


    const processNumber = (value: any) => {
      const num = Number(value);
      return isNaN(num) ? null : num;
    };


    const payload = {
      id: editForm.value.id,
      nickName: processValue(editForm.value.nickName),
      userAvatar: processValue(editForm.value.userAvatar),
      phoneNumber: processValue(editForm.value.phoneNumber),
      userAccount: editForm.value.userAccount,  // 保持禁用状态的值
      userPassword: editForm.value.userPassword || undefined,  // 密码为空时不修改
      invitationCode: processValue(editForm.value.invitationCode),
      userRole: editForm.value.userRole || 'user',
      parentUserId: processNumber(editForm.value.parentUserId),
      SuperUserList: editForm.value.SuperUserList
          ? editForm.value.SuperUserList.split(',')
              .map(item => processNumber(item.trim()))
              .filter(num => num !== null)
          : []
    };


    const cleanPayload = Object.fromEntries(
        Object.entries(payload).filter(([_, v]) => v !== undefined)
    );

    console.log("最终请求体:", JSON.stringify(cleanPayload, null, 2));

    const res:any = await myAxios.post('/userInfo/update', cleanPayload, {
      headers: {
        Authorization: storedToken,
        'Content-Type': 'application/json'
      }
    });
    console.log(res)
    if (res.code === 1) {
      message.success('更新成功');
      await getUserList();
      const updatedUser = tableData.value.find(item => item.id === editForm.value.id);
      if (updatedUser) {
        selectedUser.value = { ...updatedUser };
      }
      isEditMode.value = false;
    } else {
      message.error(res.message || '更新失败');
    }
  } catch (error:any) {
    console.error('更新失败:', error);
    message.error(error.response?.data?.message || '更新失败，请检查网络');
  }
};



const openUser = ref<boolean>(false);
const formRef = ref();



const showModal = () => {
  openUser.value = true;
  formData.value = {
    nickName: '',
    userAvatar: '',
    phoneNumber: '',
    userAccount: '',
    userPassword: ''
  };

  previewImage.value = '';
};

const handleOk = (e: MouseEvent) => {
  console.log('点击确认:', e);
  openUser.value = false;
};

const extractErrorMessage = (errorMessage: string): string => {

  const pipeIndex = errorMessage.indexOf('|');

  if (pipeIndex !== -1) {
    return errorMessage.substring(pipeIndex + 1).trim();
  }
  return errorMessage;
};

const handleSubmit = async () => {
  try {
    const password = formData.value.userPassword;
    if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(password)) {
      message.error('请输入包含数字、字母小写、字母大写的组合');
      return;
    }

    // 原有手机号校验
    if (!/^1[3-9]\d{9}$/.test(formData.value.phoneNumber)) {
      message.error('请输入有效的11位手机号');
      return;
    }

    const storedToken = localStorage.getItem('token');
    if (!storedToken) throw new Error('未找到登录信息');

    const res: any = await myAxios.post('/userInfo/add', formData.value, {
      headers: {
        Authorization: storedToken,
        'Content-Type': 'application/json'
      }
    });

    if (res.code === 1) {
      message.success('新增成功');
      openUser.value = false;
      formRef.value?.resetFields();
      getUserList();
    } else {

      const errorMsg = extractErrorMessage(res.message);
      message.error(`${errorMsg}`);
    }
  } catch (error: any) {

    let errorMsg = error.response?.message || error.message;
    errorMsg = extractErrorMessage(errorMsg);
    message.error(`${errorMsg}`);
  }
};


</script>

<style scoped>
.action-btn {
  padding: 0 8px;
}

:deep(.ant-divider-vertical) {
  border-color: rgba(0, 0, 0, 0.15);
  height: 1.2em;
  margin: 0 4px;
}

.user-detail {
  padding: 20px;
}

.avatar {
  display: block;
  margin: 0 auto 20px;
}

:deep(.ant-descriptions-item-label) {
  font-weight: 600;
  width: 120px;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.avatar {
  margin-bottom: 20px;
}
.custom-button {
  width: 120px;
}
.view-mode {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  margin-bottom: 16px;
}

.info-card :deep(.ant-card-head) {
  background: #fafafa;
  border-bottom: 1px solid #e8e8e8;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-icon {
  font-size: 18px;
  color: #1890ff;
  margin-right: 16px;
  width: 24px;
  text-align: center;
}

.info-content {
  flex: 1;
}

.info-label {
  display: block;
  color: #666;
  font-size: 12px;
  margin-bottom: 4px;
}

.info-value {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.highlight {
  color: #1890ff;
}



.role-tag {
  margin-left: 8px;
  font-size: 12px;
}


:root {
  --role-user: #87d068;
  --role-admin: #f50;
  --role-boss: #722ed1;
}

.role-tag[color="user"] {
  background: var(--role-user);
  color: white;
}

.role-tag[color="admin"] {
  background: var(--role-admin);
  color: white;
}

.role-tag[color="boss"] {
  background: var(--role-boss);
  color: white;
}

.search-box {
  margin-bottom: 10px;
}
.error-tip {
  color: #ff4d4f;
  font-size: 12px;
  margin-left: 8px;
}

.tip {
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
}

.password-strength {
  margin-top: 4px;
  display: flex;
  gap: 8px;
}

.password-strength span {
  color: #999;
  font-size: 12px;
  position: relative;
  padding-left: 18px;
}

.password-strength span::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #eee;
  position: absolute;
  left: 0;
  top: 2px;
}

.strength-ok {
  color: #52c41a;
}

.strength-ok::before {
  background: #52c41a !important;
}

.avatar-uploader :deep(.ant-upload) {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ant-upload-text {
  margin-top: 8px;
}

.input-tip {
  font-size: 0.875rem;
  color: #666;
}

.error-tip {
  color: #f5222d;
  margin-left: 4px;
}

.password-strength {
  margin-top: 4px;
  font-size: 0.875rem;
}

.strength-ok {
  color: #52c41a;
}

.avatar-uploader {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}

.avatar-uploader .ant-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .ant-upload:hover {
  border-color: #40a9ff;
}

.avatar-uploader img {
  width: 100%;
  height: 100%;
  display: block;
}


.custom-button {
  background-color: #ffa940;
  border-color: #ffa940;
  color: #fff;
}

.custom-button:hover,
.custom-button:focus {
  background-color: #ffa940;
  border-color: #ffa940;
  color: #fff;
}

.custom-button[disabled] {
  background-color: #ffa940;
  border-color: #ffa940;
  opacity: 0.6;
  color: #fff;
}

.custom-search :deep(.ant-input-search-button) {
  background-color: #ffa940;
  border-color: #ffa940;
}

.custom-search :deep(.ant-input-search-button:hover),
.custom-search :deep(.ant-input-search-button:focus) {
  background-color: #fa8c16;
  border-color: #fa8c16;
}


.custom-search :deep(.ant-input) {
  border-right-color: #ffa940;
}

:deep(.ant-checkbox-wrapper-disabled) {
  display: none;
}
</style>