live-telecast-vue3-ui-pc/src/views/stock/survey/index.vue

<script setup lang="ts">
import { ref, watch } from "vue";
import RemoteSelect from "/@/components/RemoteSelect";
import contentConfig from "./config/content.config";
import SearchWorkCompany from "/@/components/SearchWorkCompany";
import SearchStock from "/@/components/SearchStock";

import {
  PageContent,
  type PageContentInstance
} from "/@/components/PageContent";

import { httpSupplierlist, httpGoodstat } from "/@/api/other";
import { useAsync } from "/@/hooks/useAsync";

const pageContentRef = ref<PageContentInstance | null>(null);

const { run: goodStatRun } = useAsync<Record<string, string>>({
  initalData: {}
});

const data = ref({
  companyNo: "",
  supplier_code: "",
  stock_code: ""
});

watch(
  () => data,
  () => {
    pageContentRef.value.getPageData(data.value);
    goodStatRun(httpGoodstat(data.value));
  },
  {
    deep: true
  }
);
</script>

<template>
  <div class="bg-white">
    <div class="flex gap-2 p-2">
      <SearchWorkCompany v-model="data.companyNo" />
      <RemoteSelect
        v-model="data.supplier_code"
        :api="httpSupplierlist"
        placeholder="供应商公司"
        request-prop="name"
        response-label-prop="name"
        response-val-prop="code"
        :disabled="!data.companyNo"
      />
      <SearchStock
        v-model="data.stock_code"
        :company-no="data.companyNo"
        :supplier-no="data.supplier_code"
        :disabled="!data.companyNo || !data.supplier_code"
      />
    </div>

    <div class="flex justify-around">
      <div class="text-center w-[128px] h-[128px] border-gray-100 border">
        <h1>当前库存</h1>
      </div>
      <div class="text-center w-[128px] h-[128px] border-gray-100 border">
        <h1>待入库</h1>
      </div>
      <div class="text-center w-[128px] h-[128px] border-gray-100 border">
        <h1>待出库</h1>
      </div>
      <div class="text-center w-[128px] h-[128px] border-gray-100 border">
        <h1>可用库存</h1>
      </div>
    </div>

    <PageContent ref="pageContentRef" :content-config="contentConfig" />
  </div>
</template>