yusheng-admin/src/views/Nobility/nobilityList/hook.tsx

import { ref, h } from "vue";
import editForm from "./form.vue";
import attireList from './List/index.vue'
import { message } from "@/utils/message";
import {
  queryList,
  addNobilityData,
  deleteRobotData,
  editNobilityData
} from "@/api/modules/nobility";
import { addDialog } from "@/components/ReDialog";
export function useData() {
  const formRef = ref();
  const loading = ref(true);
  const tableList = ref([]);
  const isShow = ref(false);
  const pagination = ref({
    total: 0,
    pageSize: 10,
    pageSizes: [10, 20, 50, 100, 500, 1000, 2000],
    currentPage: 1,
    background: true
  });
  const tableLabel = ref([
    {
      label: "ID",
      prop: "lid"
    },
    {
      label: "爵位名称",
      prop: "name"
    },
    {
      label: "图标",
      prop: "image",
      cellRenderer: ({ row }) => (
        <el-image
          fit="cover"
          preview-teleported={true}
          src={row.image}
          preview-src-list={Array.of(row.image)}
          class="w-[24px] h-[24px] rounded-full align-middle"
        />
      ),
    },
    {
      label: "购买价格",
      prop: "pay_price"
    },
    {
      label: "续费价格",
      prop: "renew_price"
    },
    {
      label: "购买增加金币",
      prop: "pay_coin"
    },
    {
      label: "续费增加金币",
      prop: "renew_coin"
    },
    {
      label: "天数",
      prop: "day"
    },
    {
      label: "操作",
      fixed: "right",
      width: 210,
      slot: "operation"
    }
  ]);
  const onSearch = async () => {
    loading.value = true;
    const { data, code } = await queryList({
      page: pagination.value.currentPage,
      page_limit: pagination.value.pageSize
    });
    if (code) {
      tableList.value = data.lists;
      pagination.value.total = data.count;
      pagination.value.currentPage = data.page;
    }
    loading.value = false;
  };
  const handleSizeChange = (val: number) => {
    pagination.value.pageSize = val;
    onSearch();
  };
  const handleCurrentChange = (val: number) => {
    pagination.value.currentPage = val;
    onSearch();
  };
  const handleDelete = async rowData => {
    const { code } = await deleteRobotData({ lid: rowData.lid });
    if (code) {
      message(`您删除了名称为${rowData.name}的这条数据`, {
        type: "success"
      });
      onSearch();
    }
  };
  const openList = (title = "爵位装扮", rowData: any) => {
    addDialog({
      title: `查看爵位装扮列表`,
      props: {
        formInline: rowData
      },
      width: "60%",
      hideFooter: true,
      closeOnClickModal: false,
      contentRenderer: () => h(attireList)
    });
  }
  // 新增
  const openDialog = (title = "新增", rowData: any) => {
    addDialog({
      title: `${title}魅力等级`,
      props: {
        formInline: {
          name: rowData?.name ?? "",
          image: rowData?.image ?? "",
          images: rowData?.images ?? "",
          pay_price: rowData?.pay_price ?? "",
          pay_coin: rowData?.pay_coin ?? "",
          renew_price: rowData?.renew_price ?? "",
          renew_coin: rowData?.renew_coin ?? "",
          day: rowData?.day ?? "",
          nick_name_color: rowData?.nick_name_color ?? "",
          power_ids: rowData?.power_ids ?? '',
          nick_name_color_name: rowData?.nick_name_color_name ?? '',
          play_image: rowData?.play_image ?? '',
          enter_image: rowData?.enter_image ?? '',
        }
      },
      width: "40%",
      closeOnClickModal: false,
      contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
      beforeSure: (done, { options }) => {
        const FormRef = formRef.value.getRef();
        const curData = options.props.formInline;
        const saveData = async form => {
          const { code, msg } = await addNobilityData(form);
          if (code) {
            message("新增成功", { type: "success" });
            onSearch();
            done();
          } else {
            message(msg, { type: "error" });
          }
        };
        const updateData = async form => {
          const { code, msg } = await editNobilityData({
            ...form,
            lid: rowData.lid
          });
          if (code) {
            message("修改成功", { type: "success" });
            onSearch();
            done();
          } else {
            message(msg, { type: "error" });
          }
        };
        FormRef.validate(valid => {
          if (valid) {
            console.log("curData", curData);
            // 表单规则校验通过
            if (title === "新增") {
              // 实际开发先调用新增接口，再进行下面操作
              saveData(curData);
            } else {
              // 实际开发先调用修改接口，再进行下面操作
              updateData(curData);
            }
          }
        });
      }
    });
  };
  return {
    onSearch,
    isShow,
    tableList,
    tableLabel,
    pagination,
    handleSizeChange,
    handleCurrentChange,
    loading,
    handleDelete,
    openDialog,
    openList
  };
}