byte-sailing-mobile/src/views/purchase-sales/inbound-outbound/addDetails.vue

<template>
  <div>
    <van-form @submit="onSubmit" label-align="top">
      <van-field
        v-model="result"
        is-link
        readonly
        name="picker"
        label="仓库名称"
        placeholder="请选择"
        @click="formStatus.isShowWarehouse = true"
        :rules="[
          { required: true, message: '请选择仓库名称', trigger: 'onChange' },
        ]"
      />

      <div>
        出库明细1
        <van-field
          v-model="result"
          is-link
          readonly
          name="picker"
          label="物品名称"
          placeholder="请选择"
          :rules="[
            { required: true, message: '请选择物品名称', trigger: 'onChange' },
          ]"
          @click="formStatus.isShowProduct = true"
        />
        <van-field
          v-model="username"
          name="出库数量"
          label="出库数量"
          placeholder="请输入"
          :rules="[
            { required: true, message: '请输入出库数量', trigger: 'onBlur' },
          ]"
        />
      </div>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
    <!-- 仓库弹窗选择 -->
    <van-popup v-model:show="formStatus.isShowWarehouse" position="bottom">
      <van-picker
        :columns="formStatus.warehouseColumns"
        :columns-field-names="{
          text: 'name',
          value: 'id',
        }"
        @confirm="onConfirm"
        @cancel="formStatus.isShowWarehouse = false"
      />
    </van-popup>
    <!-- 产品弹窗选择 -->
    <van-popup v-model:show="formStatus.isShowProduct" position="bottom">
      <van-picker
        :columns="formStatus.productColumns"
        :columns-field-names="{
          text: 'name',
          value: 'id',
        }"
        @confirm="onConfirm"
        @cancel="formStatus.isShowProduct = false"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const submitForm = reactive({});
const formStatus = reactive({
  isShowWarehouse: false,
  isShowProduct: false,
  warehouseColumns: [],
  productColumns: [],
});
const getSelectData = async () => {
  const res = await proxy.post("/warehouse/page", {
    pageNum: 1,
    pageSize: 9999,
  });
  formStatus.warehouseColumns = res.data.rows;
  const res1 = await proxy.post("/productInfo/page", {
    pageNum: 1,
    pageSize: 9999,
    definition: "1",
  });
  formStatus.productColumns = res1.data.rows;
};
getSelectData();
</script>

<style lang="scss" scoped>
</style>