precise_delivery_distribution_front/src/views/account/orangelog.vue

<template>
  <div>
    <tool-bar
      :text="['uid']"
      :label="['uid']"
      @confirm="onSearch"
      @cancel="onCancel"
    >
      <template #picker>
        <p class="label">充值日期</p>
        <a-range-picker
          v-model:value="pickered"
          format="YYYY/MM/DD"
          @change="changeTime"
        />
      </template>
    </tool-bar>

    <div>
      <a-table
        :columns="columns"
        :data-source="loglist"
        bordered
        :loading="loading"
        :scroll="{ x: 1450, y: 600 }"
      >
        <template #report_action="{ text, record }">
          <p v-if="record.report_status == 'success'">已上报</p>
          <a-popconfirm
            title="是否要继续强制回传?"
            ok-text="是"
            cancel-text="否"
            @confirm="orangeAction(record)"
          >
            <p v-if="record.report_status != 'success'">
              <a>强制回传</a>
            </p>
          </a-popconfirm>
        </template>
        <template #report_status="{ text, record }">
          <p>{{ record.report_status == "success" ? "成功" : "失败" }}</p>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts">
import logList from "./log.vue";
import { TableColumnLogOfOrange } from "@/views/_pageOptions/table-account";
import ToolBar from "@/components/tool-bar/index.vue";
import { message } from "ant-design-vue";
import {
  defineComponent,
  onMounted,
  reactive,
  watch,
  toRefs,
  ref,
} from "@vue/runtime-core";
import { getOrangeLogListApi, getforceReportApi } from "@/api";
import { picker } from "@/helper/config/range";
import { ILogitem } from "#/api";
export default defineComponent({
  component: {
    logList,
  },
  props: {
    Logappflag: String || undefined,
  },
  components: {
    ToolBar,
  },

  setup(props) {
    const state = reactive({
      isShowflag: true,
      rangePick: picker,
      loading: true,
      list: {
        guid: "",
        start_time: "",
        end_time: "",
        appflag: "",
      },
      orangeActionList: {
        appflag: "",
        guid: "",
        reportType: "",
      },
      loglist: ref<ILogitem[]>([]), //?
      columns: TableColumnLogOfOrange,
      pickered: [],
    });

    const getLogOrangeList = async () => {
      state.loading = true;
      const res = await getOrangeLogListApi(state.list);
      if (res) {
        state.loglist = res.data.list;
        state.loading = false;
      }
    };
    //初始化

    onMounted(() => {
      // state.list.appflag = props.Logappflag as string;
      console.log(1);
      // getLogOrangeList();
      test();
    });
    //监听传过来的值appflag
    watch(props, () => {
      state.list.appflag = props.Logappflag as string;
      console.log("appflag改变了");
      getLogOrangeList();
    });
    const test = () => {
      console.log("test函数执行了");
    };
    const changeTime = (time: string, stringtime: string) => {
      state.list.start_time = stringtime[0];
      state.list.end_time = stringtime[1];
    };
    //搜索时发的异步请求
    const getSearchList = async () => {
      state.loading = true;
      const Searchlist = await getOrangeLogListApi(state.list);
      if (Searchlist.data) {
        state.loglist = Searchlist.data.list;
        state.loading = false;
      }
    };
    const onSearch = (fields: Record<string, string>) => {
      const uid = fields.uid;
      state.list.guid = uid;
      getSearchList();
      getOrangeLogListApi(state.list);
    };
    const onCancel = () => {
      state.list.guid = "";
      (state.list.start_time = ""), (state.list.end_time = ""), getSearchList();
    };
    //强制回传操作
    const getOrangeActionRes = async () => {
      //放入强制回传的参数
      const res = await getforceReportApi(state.orangeActionList as any);
      if (res.data.result == "success") {
        message.success("上报成功！");
      }
    };
    const orangeAction = (record: ILogitem) => {
      console.log(record);
      state.orangeActionList.guid = record.guid;
      state.orangeActionList.appflag = props.Logappflag as string;
      state.orangeActionList.reportType = record.report_type;
      getOrangeActionRes();
      getLogOrangeList();
    };
    return {
      ...toRefs(state),
      changeTime,
      onSearch,
      onCancel,
      orangeAction,
      getLogOrangeList,
    };
  },
  mounted() {
    this.list.appflag = this.$props.Logappflag as string;
    this.getLogOrangeList();
  },
});
</script>
<style lang="scss" scoped>
</style>