Vue3使用hooks组件更简洁

 

1。组件页面（list.vue）

<script setup>
import { useStatementLog } from "./hooks/useStatementLog";
const {
  loading,
  defaultFormData,
  defaultData,
  searchInit,
  excelInit,
} = useStatementLog();
</script>

　　

2。useStatementLog.js

import { ref, reactive } from "vue";

export function useStatementLog() {
      const loading = ref(false);
  getCountry_list("user");
  // 搜索配置
  const defaultFormData = reactive([
    {
      type: "input",
      placeholder: "请输入投放ID",
      name: "user_id",
      value: "",
      picon: "search",
      width: 180,
    },
    {
      type: "select",
      label: "时间周期",
      name: "w_time",
      value: "",
      placeholder: "全部",
      options: cofigStore.timePeriod,
    },
    {
      type: "select",
      label: "产品ID",
      name: "agent_id",
      value: "",
      placeholder: "全部",
      options: cofigStore.productID,
    },
    {
      type: "select",
      label: "国家地区",
      name: "country",
      value: "",
      width: 140,
      placeholder: "全部",
      options: country,
    },
    {
      type: "select",
      label: "广告渠道",
      name: "channel",
      value: "",
      placeholder: "全部",
      options: cofigStore.adChannel,
    },
  ]);
  // 搜索字段集合
  const searchInit = ref({
    page: 1,
    size: 20,
    user_id: defaultFormData[0].value,
    w_time: defaultFormData[1].value,
    agent_id: defaultFormData[2].value,
    country: defaultFormData[3].value,
    channel: defaultFormData[4].value,
  });

  // 获取顶部输入框数据
  const updaDefaultForm = (data) => {
    for (const item of data) {
      searchInit.value[item.name] = item.value;
    }
    excelInit.value.data = { ...searchInit.value, export: 1 };
    getTableList(searchInit.value);
  };

  const defaultData = reactive({
    total: 0,
    web: "useStatementLog",
    cols: cols,
    list: [],
  });
  // 获取列表数据
  function getTableList(data) {
    loading.value = true;
    post("/v1/adss_mgr/adss_report_list", { ...data, isLoading: false }).then(
      (res) => {
        if (res.code == 0) {
          loading.value = false;
          const { count, list } = res?.data;
          defaultData.total = count;
          defaultData.list = list;
        } else {
          return msg(res.msg);
        }
      }
    );
  }

    return {
        loading,
        defaultFormData,
        updaDefaultForm,
        defaultData,
        getUpdaTable,
        dialogInit,
      };
}