Tp_Web2.0/src/views/system/user/utils/hook.tsx

// import dayjs from "dayjs";
import { message } from "@/utils/message";
import editForm from "../form.vue";
import { addDialog } from "@/components/ReDialog";
import { type FormItemProps } from "../utils/types";
import {
  getUserList,
  getDeptList,
  addUser,
  updateUser,
  deleteUser
} from "@/api/system";
import { ElMessageBox } from "element-plus";
import { type PaginationProps } from "@pureadmin/table";
import { reactive, ref, computed, h, onMounted } from "vue";
// import { http } from "@/utils/http";
import { string } from "vue-types";
import { cloneDeep } from "@pureadmin/utils";

// 共享列表数据
const dataList = ref([]);

// 共享表格页码
const pagination = reactive<PaginationProps>({
  total: 0,
  pageSize: 10,
  currentPage: 1,
  background: true
});

export function useUser() {
  const form = reactive({
    /** 角色名称 */
    username: "",
    /** 手机号 */
    phone_number: "",
    /** 状态 */
    status: "",
    /** 部门 */
    department_id: ""
  });
  const formRef = ref();

  const loading = ref(true);
  const switchLoadMap = ref({});

  const columns: TableColumnList = [
    {
      label: "序号",
      type: "index",
      width: 70,
      fixed: "left"
    },
    // {
    //   label: "用户编号",
    //   prop: "id",
    //   minWidth: 130
    // },
    {
      label: "用户名称",
      prop: "username",
      minWidth: 130
    },
    // {
    //   label: "用户昵称",
    //   prop: "nickname",
    //   minWidth: 130
    // },
    {
      label: "性别",
      prop: "gender",
      minWidth: 90,
      cellRenderer: ({ row, props }) => (
        <el-tag
          size={props.size}
          type={row.gender === 1 ? "" : "danger"}
          effect="plain"
        >
          {row.gender === 1 ? "男" : "女"}
        </el-tag>
      )
    },
    {
      label: "部门",
      prop: "department_name",
      minWidth: 90
      // formatter: ({ dept }) => dept.name
    },
    {
      label: "手机号码",
      prop: "phone_number",
      minWidth: 90
    },
    {
      label: "状态",
      prop: "status",
      minWidth: 90,
      cellRenderer: scope => (
        <el-switch
          size={scope.props.size === "small" ? "small" : "default"}
          loading={switchLoadMap.value[scope.index]?.loading}
          v-model={scope.row.status}
          active-value={1}
          inactive-value={0}
          active-text="已开启"
          inactive-text="已关闭"
          inline-prompt
          onChange={() => onChange(scope as any)}
        />
      )
    },
    {
      label: "创建时间",
      minWidth: 90,
      prop: "date_joined"
    },
    {
      label: "操作",
      fixed: "right",
      width: 180,
      slot: "operation"
    }
  ];
  const buttonClass = computed(() => {
    return [
      "!h-[20px]",
      "reset-margin",
      "!text-gray-500",
      "dark:!text-white",
      "dark:hover:!text-primary"
    ];
  });

  function onChange({ row, index }) {
    ElMessageBox.confirm(
      `确认要<strong>${
        row.status === 0 ? "停用" : "启用"
      }</strong><strong style='color:var(--el-color-primary)'>${
        row.username
      }</strong>用户吗?`,
      "系统提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        dangerouslyUseHTMLString: true,
        draggable: true
      }
    )
      .then(() => {
        const params = {
          department_id: row.department_id,
          username: row.username,
          phone_number: row.phone_number,
          status: row.status,
          gender: row.gender,
          id: row.id
        };
        updateUser(params).then(res => {
          if (res.success) {
            setTimeout(() => {
              switchLoadMap.value[index] = Object.assign(
                {},
                switchLoadMap.value[index],
                {
                  loading: false
                }
              );
              message("已成功修改用户状态", {
                type: "success"
              });
            }, 300);
          } else {
            row.status === 0 ? (row.status = 1) : (row.status = 0);
            message(`${res.msg}`, {
              type: "warning"
            });
          }
        });
        // switchLoadMap.value[index] = Object.assign(
        //   {},
        //   switchLoadMap.value[index],
        //   {
        //     loading: true

        //   }
        // );
      })
      .catch(() => {
        row.status === 0 ? (row.status = 1) : (row.status = 0);
      });
  }

  function handleUpdate(row) {
    console.log(row);
    openDialog("编辑", row);
  }

  function handleDelete(row) {
    // const deleteListData = userList.value.list.filter(
    //   item => item.id !== row.id
    // );
    // userList.value.list = deleteListData;
    deleteUser(row.id).then(res => {
      if (!res.success) {
        message(`${res.msg}`, {
          type: "warning"
        });
      } else {
        message(`您删除了角色名称为${row.username}的这条数据`, {
          type: "success"
        });
        onSearch();
      }
    });
  }

  function handleSizeChange() {
    onSearch();
  }

  function handleCurrentChange() {
    onSearch();
  }

  function handleSelectionChange(val) {
    console.log("handleSelectionChange", val);
  }

  // function getUserList() {
  //   // http.request("post", "/login")
  //   return userList;
  // }
  const deptList = ref([]);
  async function onSearch() {
    loading.value = true;
    const params = {
      ...form,
      page: pagination.currentPage || undefined,
      page_size: pagination.pageSize || undefined
    };
    const data = await getUserList(params);
    await getDeptList().then(res => {
      deptList.value = res.data;
    });
    dataList.value = data.results;
    pagination.total = data.count;
    setTimeout(() => {
      loading.value = false;
    }, 500);
  }

  const resetForm = formEl => {
    if (!formEl) return;
    formEl.resetFields();
    onSearch();
  };
  function openDialog(title = "新增", row?: FormItemProps) {
    addDialog({
      title: `${title}用户`,
      props: {
        formInline: {
          higherDeptOptions: cloneDeep(deptList.value),
          department_id: row?.department_id ?? "",
          username: row?.username ?? "",
          phone_number: row?.phone_number ?? "",
          status: row?.status ?? 1,
          gender: row?.gender ?? null,
          id: row?.id ?? ""
        }
      },
      width: "40%",
      draggable: true,
      fullscreenIcon: true,
      closeOnClickModal: false,
      contentRenderer: () => h(editForm, { ref: formRef }),
      beforeSure: (done, { options }) => {
        const FormRef = formRef.value.getRef();
        const curData = options.props.formInline as FormItemProps;
        function chores() {
          message(`您${title}了用户名称为${curData.username}的这条数据`, {
            type: "success"
          });
          done(); // 关闭弹框
          onSearch(); // 刷新表格数据
        }
        FormRef.validate(valid => {
          if (valid) {
            console.log("curData", curData);
            // 表单规则校验通过
            if (title === "新增") {
              // 实际开发先调用新增接口，再进行下面操作
              addUser(curData).then(res => {
                console.log(res);
                if (res.success) {
                  chores();
                } else {
                  message(`${res.msg}`, {
                    type: "warning"
                  });
                }
              });
            } else {
              const params = {
                department_id: curData.department_id,
                username: curData.username,
                phone_number: curData.phone_number,
                status: curData.status,
                gender: curData.gender,
                id: curData.id
              };
              updateUser(params)
                .then(res => {
                  console.log(res);
                  if (res.success) {
                    chores();
                  } else {
                    message(`${res.msg}`, {
                      type: "warning"
                    });
                  }
                })
                .catch(error => {
                  message(`${error}`, {
                    type: "warning"
                  });
                });
              // 实际开发先调用编辑接口，再进行下面操作
            }
          }
        });
      }
    });
  }
  const formData = reactive({
    username: string
  });
  const drawerShow = ref(null);
  const checkAll = ref(false);
  const allRole = ref([]);
  const userRole = ref([]);
  function setRole(row) {
    Object.assign(formData, row);
    Object.assign(allRole.value, [
      {
        createTime: "2021-05-31 18:09:18",
        id: 1,
        remark: null,
        roleName: "超级管理员",
        updateTime: "2023-04-28 11:03:38"
      },
      {
        createTime: "2021-05-31 18:09:18",
        id: 1,
        remark: null,
        roleName: "普通角色",
        updateTime: "2023-04-28 11:03:38"
      }
    ]);
    Object.assign(userRole.value, [
      {
        createTime: "2021-05-31 18:09:18",
        id: 1,
        remark: null,
        roleName: "超级管理员",
        updateTime: "2023-04-28 11:03:38"
      }
    ]);
    console.log(allRole);
    drawerShow.value = true;
  }
  function confirmClick() {
    drawerShow.value = false;
  }
  //控制顶部全选复选框不确定的样式

  const isIndeterminate = ref(true);
  //顶部的全部复选框的change事件
  function handleCheckAllChange(val: boolean) {
    // console.log(val);
    // console.log(allRole.value);
    //val:true(全选)|false(没有全选)
    userRole.value = val ? allRole.value : [];
    //不确定的样式(确定样式)
    isIndeterminate.value = false;
  }
  //顶部全部的复选框的change事件
  function handleCheckedCitiesChange(value: string[]) {
    console.log(value);
    //顶部复选框的勾选数据
    //代表:勾选上的项目个数与全部的职位个数相等，顶部的复选框勾选上
    checkAll.value = value.length === allRole.value.length;
    //不确定的样式
    isIndeterminate.value = value.length !== allRole.value.length;
  }

  function resetPassword(row: { username: string; id: any }) {
    ElMessageBox.prompt(
      "请输入用户「" + row.username + "」的新密码",
      "重置密码",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }
    )
      .then(({ value }) => {
        if (!value) {
          message(`请输入新密码`, {
            type: "warning"
          });
          return false;
        }
      })
      .catch(() => {});
  }
  onMounted(() => {
    onSearch();
  });

  return {
    form,
    loading,
    columns,
    dataList,
    pagination,
    buttonClass,
    drawerShow,
    formData,
    allRole,
    userRole,
    setRole,
    confirmClick,
    handleCheckAllChange,
    handleCheckedCitiesChange,
    resetPassword,
    onSearch,
    openDialog,
    resetForm,
    handleUpdate,
    handleDelete,
    handleSizeChange,
    handleCurrentChange,
    handleSelectionChange
  };
}