|
|
@@ -1,195 +1,125 @@
|
|
|
<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>
|
|
|
+ <van-nav-bar title="手动出库" left-text="返回" left-arrow @click-left="onClickLeft"> </van-nav-bar>
|
|
|
+ <testForm v-model="formData.data" :formOption="formOption" :formConfig="formConfig" :rules="rules" @onSubmit="onSubmit" ref="formDom"></testForm>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, getCurrentInstance, onMounted } from "vue";
|
|
|
+import { ref, reactive, 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 formDom = ref(null);
|
|
|
+const formData = reactive({
|
|
|
+ data: {
|
|
|
+ warehouseId: "",
|
|
|
+ type: "2",
|
|
|
+ list: [],
|
|
|
+ },
|
|
|
});
|
|
|
-const list = ref([]);
|
|
|
-const handleAddRow = () => {
|
|
|
- list.value.push({
|
|
|
- productId: "",
|
|
|
- productName: "",
|
|
|
- quantity: "",
|
|
|
+const rules = {
|
|
|
+ warehouseName: [{ required: true, message: "仓库名称不能为空" }],
|
|
|
+ productName: [{ required: true, message: "物品名称不能为空" }],
|
|
|
+ quantity: [{ required: true, message: "出库数量不能为空" }],
|
|
|
+};
|
|
|
+const formOption = reactive({
|
|
|
+ readonly: false, //用于控制整个表单是否只读
|
|
|
+ disabled: false,
|
|
|
+ labelAlign: "top",
|
|
|
+ scroll: true,
|
|
|
+ labelWidth: "62pk",
|
|
|
+ btnConfig: {
|
|
|
+ isNeed: true,
|
|
|
+ label: "明细",
|
|
|
+ prop: "list",
|
|
|
+ plain: true,
|
|
|
+ listConfig: [
|
|
|
+ {
|
|
|
+ type: "picker",
|
|
|
+ label: "物品名称",
|
|
|
+ prop: "productId",
|
|
|
+ itemType: "onePicker",
|
|
|
+ showPicker: false,
|
|
|
+ readonly: false,
|
|
|
+ fieldNames: {
|
|
|
+ text: "name",
|
|
|
+ value: "id",
|
|
|
+ },
|
|
|
+ pickerOption: {
|
|
|
+ columns: [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ itemType: "text",
|
|
|
+ label: "出库数量",
|
|
|
+ prop: "quantity",
|
|
|
+ clearable: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ clickFn: () => {
|
|
|
+ if (formData.data.list && formData.data.list.length > 0) {
|
|
|
+ formData.data.list.push({
|
|
|
+ productId: "",
|
|
|
+ quantity: "",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ formData.data.list = [
|
|
|
+ {
|
|
|
+ productId: "",
|
|
|
+ quantity: "",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+});
|
|
|
+const formConfig = reactive([
|
|
|
+ {
|
|
|
+ type: "picker",
|
|
|
+ label: "仓库名称",
|
|
|
+ prop: "warehouseId",
|
|
|
+ itemType: "onePicker",
|
|
|
+ showPicker: false,
|
|
|
+ fieldNames: {
|
|
|
+ text: "name",
|
|
|
+ value: "id",
|
|
|
+ },
|
|
|
+ pickerOption: {
|
|
|
+ columns: [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+]);
|
|
|
+const onClickLeft = () => history.back();
|
|
|
+const getDict = async () => {
|
|
|
+ await proxy.post("/warehouse/page", { pageNum: 1, pageSize: 9999 }).then((res) => {
|
|
|
+ formConfig[0].pickerOption.columns = res.data.rows;
|
|
|
+ });
|
|
|
+ await proxy.post("/productInfo/page", { pageNum: 1, pageSize: 9999, definition: "" }).then((res) => {
|
|
|
+ formOption.btnConfig.listConfig[0].pickerOption.columns = res.data.rows;
|
|
|
});
|
|
|
};
|
|
|
+onMounted(async () => {
|
|
|
+ await getDict();
|
|
|
+ if (route.query.id) getDetails(route.query.id);
|
|
|
+});
|
|
|
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;
|
|
|
+ formData.data = res.data;
|
|
|
+ formDom.value.formDataInit(true);
|
|
|
});
|
|
|
-
|
|
|
- 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) => {
|
|
|
+ if (!formData.data.list.length > 0) return showFailToast("请添加明细！");
|
|
|
+ proxy.post("/stock/edit", formData.data).then(
|
|
|
+ () => {
|
|
|
setTimeout(() => {
|
|
|
showSuccessToast("出库成功");
|
|
|
- proxy.$router.push("/main/manualOutbound");
|
|
|
+ onClickLeft();
|
|
|
+ // proxy.$router.push("/main/manualInbound");
|
|
|
}, 500);
|
|
|
},
|
|
|
(err) => {
|
|
|
@@ -197,25 +127,5 @@ const onSubmit = () => {
|
|
|
}
|
|
|
);
|
|
|
};
|
|
|
-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>
|
|
|
+<style lang="scss" scoped></style>
|
