|
@@ -0,0 +1,381 @@
|
|
|
+<template>
|
|
|
+ <div class="form" style="padding-bottom: 60px">
|
|
|
+ <van-form
|
|
|
+ @submit="onSubmit"
|
|
|
+ label-align="top"
|
|
|
+ style="margin-top: 20px"
|
|
|
+ ref="formDom"
|
|
|
+ >
|
|
|
+ <van-cell-group inset>
|
|
|
+ <van-field
|
|
|
+ v-model="formData.deptName"
|
|
|
+ is-link
|
|
|
+ readonly
|
|
|
+ :label="$t('procureList.procurementDepartment')"
|
|
|
+ :placeholder="$t('procureList.selectProcurementDepartment')"
|
|
|
+ :rules="[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: $t('procureList.procurementDepartmentCanNotBeEmpty'),
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ :readonly="true"
|
|
|
+ required
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="formData.purchaseName"
|
|
|
+ type="text"
|
|
|
+ :name="$t('procureList.procurementPersonName')"
|
|
|
+ :label="$t('procureList.procurementPersonName')"
|
|
|
+ :placeholder="$t('procureList.pleaseFillInTheProcurementPersonName')"
|
|
|
+ :rules="[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: $t('procureList.procurementPersonNameCanNotBeEmpty'),
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ required
|
|
|
+ :readonly="true"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="formData.purchaseTime"
|
|
|
+ is-link
|
|
|
+ readonly
|
|
|
+ name="datePicker"
|
|
|
+ :label="$t('procureList.procurementTime')"
|
|
|
+ :placeholder="$t('procureList.clickToSelectTime')"
|
|
|
+ :rules="[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: $t('procureList.procurementTimeCanNotBeEmpty'),
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ required
|
|
|
+ :readonly="true"
|
|
|
+ />
|
|
|
+ <van-popup v-model:show="timePicker" position="bottom">
|
|
|
+ <van-date-picker
|
|
|
+ @confirm="timeOnConfirm"
|
|
|
+ @cancel="timePicker = false"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ <van-field
|
|
|
+ v-model="formData.supplyName"
|
|
|
+ is-link
|
|
|
+ readonly
|
|
|
+ :label="$t('procureList.supplier')"
|
|
|
+ :placeholder="$t('procureList.selectSupplier')"
|
|
|
+ @click="typeModal = true"
|
|
|
+ :rules="[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: $t('procureList.supplierCanNotBeEmpty'),
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ required
|
|
|
+ />
|
|
|
+ <van-popup v-model:show="typeModal" position="bottom">
|
|
|
+ <van-picker
|
|
|
+ :title="$t('common.title')"
|
|
|
+ :columns="supplyList"
|
|
|
+ @confirm="onConfirm"
|
|
|
+ @cancel="typeModal = false"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ <van-field
|
|
|
+ v-model="formData.purchaseContent"
|
|
|
+ type="textarea"
|
|
|
+ :name="$t('procureList.procurementDescription')"
|
|
|
+ :label="$t('procureList.procurementDescription')"
|
|
|
+ :placeholder="$t('procureList.pleaseFillInTheProcurementDescription')"
|
|
|
+ :rules="[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: $t('procureList.procurementDescriptionCanNotBeEmpty'),
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ required
|
|
|
+ rows="3"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+
|
|
|
+ <!-- 明细列表 -->
|
|
|
+ <div v-for="(item, index) in formData.purchaseDetailList" :key="index">
|
|
|
+ <div class="commons-delete">
|
|
|
+ <div class="title">{{ $t("common.details") }}{{ index + 1 }}</div>
|
|
|
+ <!-- <div
|
|
|
+ class="delete"
|
|
|
+ @click.native="handleDel(index)"
|
|
|
+ v-if="!route.query.id"
|
|
|
+ >
|
|
|
+ <van-icon name="cross" />
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <van-cell-group inset>
|
|
|
+ <van-field
|
|
|
+ v-model="formData.purchaseDetailList[index].productName"
|
|
|
+ is-link
|
|
|
+ readonly
|
|
|
+ :label="$t('procureList.procurementProduct')"
|
|
|
+ :placeholder="$t('procureList.selectProcurementProduct')"
|
|
|
+ :readonly="true"
|
|
|
+ :rules="[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: $t('procureList.procurementProductCanNotBeEmpty'),
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ required
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="formData.purchaseDetailList[index].count2"
|
|
|
+ :label="$t('procureList.quantity')"
|
|
|
+ :placeholder="$t('procureList.pleaseEnterTheQuantity')"
|
|
|
+ :rules="[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: $t('procureList.quantityCanNotBeEmpty'),
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ required
|
|
|
+ type="number"
|
|
|
+ :readonly="true"
|
|
|
+ />
|
|
|
+
|
|
|
+ <van-field
|
|
|
+ v-model="formData.purchaseDetailList[index].count"
|
|
|
+ :name="$t('procureList.thisPurchase')"
|
|
|
+ :label="$t('procureList.thisPurchase')"
|
|
|
+ :placeholder="$t('procureList.pleaseEnterThisPurchase')"
|
|
|
+ @change="changePrice(index)"
|
|
|
+ :rules="[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: $t('procureList.thisPurchaseCanNotBeEmpty'),
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ required
|
|
|
+ type="number"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="formData.purchaseDetailList[index].price"
|
|
|
+ :name="$t('procureList.unitPrice')"
|
|
|
+ :label="$t('procureList.unitPrice')"
|
|
|
+ @change="changePrice(index)"
|
|
|
+ :placeholder="$t('procureList.pleaseEnterTheUnitPrice')"
|
|
|
+ :rules="[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: $t('procureList.unitPriceCanNotBeEmpty'),
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ required
|
|
|
+ type="number"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="formData.purchaseDetailList[index].amount"
|
|
|
+ :name="$t('procureList.totalPrice')"
|
|
|
+ :label="$t('procureList.totalPrice')"
|
|
|
+ :placeholder="$t('procureList.accordingToThisPurchaseAndUnitPrice')"
|
|
|
+ :readonly="true"
|
|
|
+ type="number"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ </div>
|
|
|
+ <van-field
|
|
|
+ style="margin-top: 16px"
|
|
|
+ v-model="formData.amount"
|
|
|
+ :name="$t('procureList.totalPrice')"
|
|
|
+ :label="$t('procureList.totalPrice')"
|
|
|
+ :placeholder="$t('procureList.theTotalAmountOfAllDetails')"
|
|
|
+ :readonly="true"
|
|
|
+ type="number"
|
|
|
+ />
|
|
|
+ <van-popup v-model:show="typeModalOne" round position="bottom">
|
|
|
+ <van-picker
|
|
|
+ :columns="columnsOne"
|
|
|
+ @cancel="typeModalOne = false"
|
|
|
+ @confirm="(data) => onConfirmOne(data)"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ <!-- <div style="margin: 16px" v-if="!route.query.id">
|
|
|
+ <van-button round block type="primary" native-type="submit">
|
|
|
+ {{ $t("common.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";
|
|
|
+import { setUserInfo, setToken, getUserInfo, formatDate } from "@/utils/auth";
|
|
|
+const proxy = getCurrentInstance().proxy;
|
|
|
+const route = useRoute();
|
|
|
+const typeModal = ref(false);
|
|
|
+const typeModalOne = ref(false);
|
|
|
+let selectIndex = ref(null);
|
|
|
+const timePicker = ref(false);
|
|
|
+const userInfo = getUserInfo();
|
|
|
+const formData = ref({
|
|
|
+ deptName: userInfo.dept.deptName,
|
|
|
+ purchaseName: userInfo.nickName,
|
|
|
+ purchaseTime: formatDate(new Date(), "yyyy-MM-dd"),
|
|
|
+ supplyId: "",
|
|
|
+ purchaseContent: "",
|
|
|
+ amount: "",
|
|
|
+ purchaseDetailList: [],
|
|
|
+});
|
|
|
+const handleAddRow = () => {
|
|
|
+ formData.value.subscribeDetailList.push({
|
|
|
+ bussinessId: "",
|
|
|
+ bussinessName: "",
|
|
|
+ name: "",
|
|
|
+ quantity: "",
|
|
|
+ content: "",
|
|
|
+ count: "",
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const supplyList = ref([]);
|
|
|
+
|
|
|
+const timeOnConfirm = ({ selectedValues }) => {
|
|
|
+ formData.value.subcribeTime = selectedValues.join("-");
|
|
|
+ timePicker.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+const getDict = () => {
|
|
|
+ proxy
|
|
|
+ .post("/supplierPrice/page", { pageNum: 1, pageSize: 9999 })
|
|
|
+ .then((res) => {
|
|
|
+ supplyList.value = res.data.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ text: item.supplierName,
|
|
|
+ value: item.supplierInfoId,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ console.log(supplyList, 12312312312312);
|
|
|
+ });
|
|
|
+
|
|
|
+ proxy
|
|
|
+ .post("/productInfo/page", { pageNum: 1, pageSize: 9999 })
|
|
|
+ .then((res) => {
|
|
|
+ columnsOne.value = res.data.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ text: item.name,
|
|
|
+ value: item.id,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+//总价保留两位小数
|
|
|
+const changePrice = (index) => {
|
|
|
+ formData.value.purchaseDetailList[index].amount = (
|
|
|
+ formData.value.purchaseDetailList[index].count *
|
|
|
+ formData.value.purchaseDetailList[index].price
|
|
|
+ ).toFixed(2);
|
|
|
+ formData.value.amount = formData.value.purchaseDetailList.reduce(
|
|
|
+ (total, item) => {
|
|
|
+ return total + Number(item.amount);
|
|
|
+ },
|
|
|
+ 0
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+const getDetails = (id) => {
|
|
|
+ proxy.post("/subscribe/detail", { id: id }).then((res) => {
|
|
|
+ res.data.subscribeDetailList.map((item) => {
|
|
|
+ columnsOne.value.map((itemOne) => {
|
|
|
+ if (itemOne.value === item.bussinessId) {
|
|
|
+ item.bussinessName = itemOne.name;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ formData.value = res.data;
|
|
|
+
|
|
|
+ console.log(formData.value);
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const columns = ref([]);
|
|
|
+const columnsOne = ref([]);
|
|
|
+const submitType = ref("add");
|
|
|
+
|
|
|
+const onConfirm = ({ selectedOptions }) => {
|
|
|
+ formData.value.supplyId = selectedOptions[0].value;
|
|
|
+ formData.value.supplyName = selectedOptions[0].text;
|
|
|
+ typeModal.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+const onConfirmOne = ({ selectedOptions }) => {
|
|
|
+ formData.value.subscribeDetailList[selectIndex.value].bussinessId =
|
|
|
+ selectedOptions[0].value;
|
|
|
+ formData.value.subscribeDetailList[selectIndex.value].bussinessName =
|
|
|
+ selectedOptions[0].text;
|
|
|
+ typeModalOne.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+const handleSelect = (index) => {
|
|
|
+ if (submitType.value === "edit") return;
|
|
|
+ selectIndex.value = index;
|
|
|
+ typeModalOne.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+const handleDel = (index) => {
|
|
|
+ formData.value.subscribeDetailList.splice(index, 1);
|
|
|
+};
|
|
|
+
|
|
|
+const onClickLeft = () => history.back();
|
|
|
+const formDom = ref(null);
|
|
|
+const handleSubmit = () => {
|
|
|
+ // return formData.value;
|
|
|
+};
|
|
|
+const getDtl = (query) => {
|
|
|
+ proxy
|
|
|
+ .post("/subscribeDetail/detail", { ids: JSON.parse(query.ids) })
|
|
|
+ .then((res) => {
|
|
|
+ formData.value.purchaseDetailList = res.data.map((item) => {
|
|
|
+ return {
|
|
|
+ bussinessId: item.bussinessId,
|
|
|
+ productName: item.productName,
|
|
|
+ count2: item.count,
|
|
|
+ subscribeDetailId: item.id,
|
|
|
+ count: null,
|
|
|
+ content: null,
|
|
|
+ price: null,
|
|
|
+ amount: null,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+defineExpose({
|
|
|
+ handleSubmit,
|
|
|
+});
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getDtl(route.query);
|
|
|
+ getDict();
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.row {
|
|
|
+ display: flex;
|
|
|
+ padding: 5px 15px;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ color: #999999;
|
|
|
+ .title {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .delete {
|
|
|
+ width: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|