更新

src/views/Nobility/nobilityList/hook.tsx

@@ -0,0 +1,177 @@
+import { ref, h } from "vue";
+import editForm from "./form.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],
+    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 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 ?? ''
+        }
+      },
+      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
+  };
+}