midi-admin/src/views/system/rechargeRules/hook.tsx

import { ref, h } from "vue";
import editForm from "./form.vue";
import { message } from "@/utils/message";
import { ElMessageBox } from "element-plus";
import {
  queryRuleList,
  addRuleData,
  editRuleData,
  upadteRuleData,
  deleteRuleData
} from "@/api/modules/system";
import { addDialog } from "@/components/ReDialog";
export function useData() {
  const formRef = ref();
  const loading = ref(true);
  const tableList = ref([]);
  const isShow = ref(false);
  const searchForm = ref({
    search_name: ""
  });
  const searchLabel = ref([
    { label: "分类名称", prop: "search_name", type: "input" }
  ]);
  const pagination = ref({
    total: 0,
    pageSize: 10,
    pageSizes: [10, 20, 50, 100],
    currentPage: 1,
    background: true
  });
  const tableLabel = ref([
    {
      label: "ID",
      prop: "crid"
    },
    {
      label: "充值金额",
      prop: "money"
    },
    {
      label: "金币",
      prop: "coins"
    },
    {
      label: "状态",
      prop: "status",
      cellRenderer: ({ row, props }) => (
        <el-switch
          v-model={row.status}
          onChange={() => onChange(row as any)}
          active-value={1}
          inactive-value={2}
          active-text="显示"
          inactive-text="隐藏"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
        // <el-tag size={props.size} type={row.status == 0 ? "danger" : "success"}>{row.status == 0 ? "禁用" : "正常"}</el-tag>
      )
    },
    {
      label: "发布人员",
      prop: "admin"
    },
    {
      label: "创建时间",
      prop: "createtime"
    },
    {
      label: "操作",
      fixed: "right",
      width: 210,
      slot: "operation"
    }
  ]);
  const onChange = async (row) => {
    if (!loading.value) {
      ElMessageBox.confirm(
        `确认要<strong>${row.status === 2 ? "隐藏" : "显示"
        }</strong><strong style='color:var(--el-color-primary)'></strong>吗?`,
        "系统提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          dangerouslyUseHTMLString: true,
          draggable: true
        }
      )
        .then(async () => {
          const { data, code } = await upadteRuleData({ id: row.id, status: row.status })
          if (code) {
            message(`已${row.status === 2 ? "隐藏" : "显示"}`, {
              type: "success"
            });
          }
        })
        .catch(() => {
          row.status == 2 ? (row.status = 1) : (row.status = 2);
        });
    }

  }
  const onSearch = async (formData) => {
    loading.value = true;
    const { data, code } = await queryRuleList({
      ...formData,
      page: pagination.value.currentPage,
      page_limit: pagination.value.pageSize
    });
    if (code) {
      tableList.value = data.lists.map(ele => {
        ele.status === 0 ? 2 : 1
        return ele
      });
      pagination.value.total = data.count;
      pagination.value.currentPage = data.page;
    }
    loading.value = false;
  };
  const handleSizeChange = (val: number) => {
    pagination.value.pageSize = val;
    onSearch(searchForm.value);
  };
  const handleCurrentChange = (val: number) => {
    pagination.value.currentPage = val;
    onSearch(searchForm.value);
  };
  const handleDelete = async rowData => {
    const { code } = await deleteRuleData({ id: rowData.crid });
    if (code) {
      message(`删除成功`, {
        type: "success"
      });
      onSearch(searchForm.value);
    }
  };
  // 新增
  const openDialog = (title = "新增", rowData: any) => {
    addDialog({
      title: `${title}充值规则`,
      props: {
        formInline: {
          money: rowData?.money ?? "",
          coins: rowData?.coins ?? "",
          status: rowData?.status ?? ""
        }
      },
      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 addRuleData(form);
          if (code) {
            message("新增成功", { type: "success" });
            onSearch(searchForm.value);
            done();
          } else {
            message(msg, { type: "error" });
          }
        };
        const updateData = async form => {
          const { code, msg } = await editRuleData({
            ...form,
            id: rowData.crid
          });
          if (code) {
            message("修改成功", { type: "success" });
            onSearch(searchForm.value);
            done();
          } else {
            message(msg, { type: "error" });
          }
        };
        FormRef.validate(valid => {
          if (valid) {
            console.log("curData", curData);
            // 表单规则校验通过
            if (title === "新增") {
              // 实际开发先调用新增接口，再进行下面操作
              saveData(curData);
            } else {
              // 实际开发先调用修改接口，再进行下面操作
              updateData(curData);
            }
          }
        });
      }
    });
  };
  return {
    searchForm,
    searchLabel,
    onSearch,
    isShow,
    tableList,
    tableLabel,
    pagination,
    handleSizeChange,
    handleCurrentChange,
    loading,
    handleDelete,
    openDialog
  };
}