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

<template>
  <div class="form">
    <van-nav-bar
      title="手动出库"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <van-form @submit="onSubmit" label-align="top" style="margin-top: 20px">
      <van-cell-group inset>
        <van-field
          v-model="formData.warehouseName"
          is-link
          readonly
          label="仓库名称"
          placeholder="选择仓库名称"
          @click="typeModal = true"
          :rules="[{ required: true, message: '仓库名称不能为空' }]"
          required
        />
        <van-popup v-model:show="typeModal" round position="bottom">
          <van-picker
            :columns="columns"
            @cancel="typeModal = false"
            @confirm="onConfirm"
          />
        </van-popup>
        <!-- 明细列表 -->
        <div v-for="(item, index) in list" :key="index">
          <div class="commons-delete">
            <div class="title">明细{{ index + 1 }}</div>
            <div
              class="delete"
              @click.native="handleDel(index)"
              v-if="!route.query.id"
            >
              <van-icon name="cross" />
            </div>
          </div>
          <van-field
            v-model="list[index].productName"
            is-link
            readonly
            label="物品名称"
            placeholder="选择物品名称"
            @click="handleSelect(index)"
            :rules="[{ required: true, message: '物品名称不能为空' }]"
            required
          />

          <van-field
            v-model="list[index].quantity"
            label="出库数量"
            placeholder="请输入出库数量"
            :rules="[{ required: true, message: '出库数量不能为空' }]"
            required
          />
        </div>
        <van-popup v-model:show="typeModalOne" round position="bottom">
          <van-picker
            :columns="columnsOne"
            @cancel="typeModalOne = false"
            @confirm="(data) => onConfirmOne(data, index)"
          />
        </van-popup>
      </van-cell-group>

      <div class="commons-add-btn"  v-if="!route.query.id">
        <van-button
          icon="plus"
          type="default"
          
          size="small"
          style="margin-top: 10px"
          block
          @click="handleAddRow"
          >添加明细</van-button
        >
      </div>

      <div style="margin: 16px" v-if="!route.query.id">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import { showSuccessToast, showFailToast } from "vant";
import { useRoute } from "vue-router";

const proxy = getCurrentInstance().proxy;
const route = useRoute();
const showPicker = ref(false);
const typeModal = ref(false);
const typeModalOne = ref(false);
let selectIndex = ref(null);
const formData = ref({
  warehouseId: "",
  type: "2",
  warehouseName: "",
});
const list = ref([]);
const handleAddRow = () => {
  list.value.push({
    productId: "",
    productName: "",
    quantity: "",
  });
};
const getDetails = (id) => {
  proxy.post("/stockJournal/detail", { id }).then((res) => {
    console.log(res, "www");
    formData.value = res.data;
    list.value = res.data.list.map((x) => ({
      productId: x.productId,
      productName: x.productName,
      quantity: x.quantity,
    }));
  });
};

const getDict = () => {
  proxy.post("/warehouse/page", { pageNum: 1, pageSize: 9999 }).then((res) => {
    columns.value = res.data.rows.map((item) => {
      return {
        text: item.name,
        value: item.id,
      };
    });
    // formData.value.warehouseName = formData.value.warehouseId
    //   ? columns.value.find((item) => item.value == formData.value.warehouseId).name
    //   : null;
  });

  proxy
    .post("/productInfo/page", { pageNum: 1, pageSize: 9999, definition: "" })
    .then((res) => {
      columnsOne.value = res.data.rows.map((item) => {
        return {
          text: item.name,
          value: item.id,
        };
      });
      // formData.value.warehouseName = formData.value.warehouseId
      //   ? columns.value.find((item) => item.value == formData.value.warehouseId).name
      //   : null;
    });
};

const columns = ref([]);
const columnsOne = ref([]);

const onConfirm = ({ selectedOptions }) => {
  formData.value.warehouseId = selectedOptions[0].value;
  formData.value.warehouseName = selectedOptions[0].text;
  typeModal.value = false;
};

const onConfirmOne = ({ selectedOptions }, index) => {
  list.value[selectIndex.value].productId = selectedOptions[0].value;
  list.value[selectIndex.value].productName = selectedOptions[0].text;
  typeModalOne.value = false;
};

const handleSelect = (index) => {
  selectIndex.value = index;
  typeModalOne.value = true;
};

const handleDel = (index) => {
  list.value.splice(index, 1);
};

const onClickLeft = () => history.back();

const onSubmit = () => {
  if (!list.value.length > 0) return showFailToast("请添加明细！");
  formData.value.list = list.value.map((x) => ({
    productId: x.productId,
    quantity: x.quantity,
  }));
  formData.value.type = "2";
  proxy.post("/stock/edit", formData.value).then(
    (res) => {
      setTimeout(() => {
        showSuccessToast("出库成功");
        proxy.$router.push("/main/manualOutbound");
      }, 500);
    },
    (err) => {
      return showFailToast(err.message);
    }
  );
};
onMounted(() => {
  if(route.query.id) getDetails(route.query.id);
  
  getDict();
});
</script>
<style lang="scss" scoped>
.row {
  display: flex;
  padding: 5px 10px 0 10px;
  justify-content: space-between;
  align-items: center;
  .title {
    flex: 1;
  }
  .delete {
    width: 20px;
    cursor: pointer;
    text-align: center;
  }
}
</style>