|
@@ -1,379 +1,214 @@
|
|
|
<template>
|
|
|
<div class="form">
|
|
|
- <van-nav-bar
|
|
|
- :title="$t('supplierConfig.name')"
|
|
|
- :left-text="$t('common.back')"
|
|
|
- left-arrow
|
|
|
- @click-left="onClickLeft"
|
|
|
- >
|
|
|
- </van-nav-bar>
|
|
|
- <van-form
|
|
|
- @submit="onSubmit"
|
|
|
- label-align="top"
|
|
|
- style="margin-top: 20px; overflow-y: auto"
|
|
|
- >
|
|
|
- <van-cell-group inset>
|
|
|
- <van-field
|
|
|
- v-model="formData.typeName"
|
|
|
- is-link
|
|
|
- readonly
|
|
|
- :label="$t('supplierConfig.supplierType')"
|
|
|
- :placeholder="$t('supplierConfig.selectSupplierType')"
|
|
|
- @click="typeModal = true"
|
|
|
- :rules="[{ required: true, message: $t('supplierConfig.supplierTypeCanNotBeEmpty') }]"
|
|
|
- required
|
|
|
- />
|
|
|
- <van-popup v-model:show="typeModal" position="bottom">
|
|
|
- <van-picker
|
|
|
- :columns="classification"
|
|
|
- @confirm="onConfirmType"
|
|
|
- @cancel="typeModal = false"
|
|
|
- />
|
|
|
- </van-popup>
|
|
|
-
|
|
|
- <van-field
|
|
|
- v-model="formData.name"
|
|
|
- :name="$t('supplierConfig.supplierName')"
|
|
|
- :label="$t('supplierConfig.supplierName')"
|
|
|
- :placeholder="$t('supplierConfig.pleaseFillInTheSupplierName')"
|
|
|
- :rules="[{ required: true, message: $t('supplierConfig.supplierNameCanNotBeEmpty') }]"
|
|
|
- required
|
|
|
- />
|
|
|
-
|
|
|
- <van-field
|
|
|
- v-model="formData.cityName"
|
|
|
- is-link
|
|
|
- readonly
|
|
|
- :label="$t('supplierConfig.city')"
|
|
|
- :placeholder="$t('supplierConfig.selectCity')"
|
|
|
- @click="cityModal = true"
|
|
|
- :rules="[{ required: true, message: $t('supplierConfig.cityCanNotBeEmpty') }]"
|
|
|
- required
|
|
|
- />
|
|
|
- <van-popup v-model:show="cityModal" round position="bottom">
|
|
|
- <van-cascader
|
|
|
- v-model="formData.city"
|
|
|
- :title="$t('supplierConfig.selectArea')"
|
|
|
- :options="areaInfo"
|
|
|
- @close="showArea = false"
|
|
|
- @change="cityOnChange"
|
|
|
- @finish="getAreaInfo"
|
|
|
- />
|
|
|
- </van-popup>
|
|
|
- <van-field
|
|
|
- v-model="formData.areaDetail"
|
|
|
- rows="3"
|
|
|
- type="textarea"
|
|
|
- :name="$t('supplierConfig.detailedAddress')"
|
|
|
- :label="$t('supplierConfig.detailedAddress')"
|
|
|
- :placeholder="$t('supplierConfig.pleaseFillInTheDetailedAddress')"
|
|
|
- />
|
|
|
-
|
|
|
- <van-field
|
|
|
- v-model="formData.contactPerson"
|
|
|
- :name="$t('supplierConfig.contact')"
|
|
|
- :label="$t('supplierConfig.contact')"
|
|
|
- :placeholder="$t('supplierConfig.pleaseFillInTheContact')"
|
|
|
- :rules="[{ required: true, message: $t('supplierConfig.contactCanNotBeEmpty') }]"
|
|
|
- required
|
|
|
- />
|
|
|
-
|
|
|
- <van-field
|
|
|
- v-model="formData.contactNumber"
|
|
|
- :name="$t('supplierConfig.contactNumber')"
|
|
|
- :label="$t('supplierConfig.contactNumber')"
|
|
|
- :placeholder="$t('supplierConfig.pleaseFillInTheContactNumber')"
|
|
|
- :rules="[{ required: true, message: $t('supplierConfig.contactNumberCanNotBeEmpty') }]"
|
|
|
- required
|
|
|
- />
|
|
|
- <van-field name="uploader" :label="$t('supplierConfig.fileUpload')">
|
|
|
- <template #input>
|
|
|
- <van-uploader
|
|
|
- v-model="fileList"
|
|
|
- :after-read="afterRead"
|
|
|
- multiple
|
|
|
- :max-count="9"
|
|
|
- :max-size="5 * 1024 * 1024"
|
|
|
- @oversize="onOversize"
|
|
|
- />
|
|
|
- </template>
|
|
|
- </van-field>
|
|
|
- </van-cell-group>
|
|
|
- <div style="margin: 16px">
|
|
|
- <van-button round block type="primary" native-type="submit">
|
|
|
- {{$t('common.submit')}}
|
|
|
- </van-button>
|
|
|
- </div>
|
|
|
- </van-form>
|
|
|
+ <van-nav-bar :title="'供应商详情'" :left-text="$t('common.back')" 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, getCurrentInstance, onMounted, reactive } from "vue";
|
|
|
import { showSuccessToast, showToast } from "vant";
|
|
|
import { useRoute } from "vue-router";
|
|
|
-import { showLoadingToast, closeToast, showNotify } from "vant";
|
|
|
+import testForm from "@/components/testForm/index.vue";
|
|
|
|
|
|
const proxy = getCurrentInstance().proxy;
|
|
|
const route = useRoute();
|
|
|
-const show = ref(false);
|
|
|
-const typeModal = ref(false);
|
|
|
-const cityModal = ref(false);
|
|
|
-const areaInfo = ref([]);
|
|
|
-const classification = ref([
|
|
|
+const formData = reactive({
|
|
|
+ data: {
|
|
|
+ id: null,
|
|
|
+ definition: "2",
|
|
|
+ productClassifyId: null,
|
|
|
+ productClassifyName: null,
|
|
|
+ code: null,
|
|
|
+ customCode: null,
|
|
|
+ type: null,
|
|
|
+ typeName: null,
|
|
|
+ name: null,
|
|
|
+ spec: null,
|
|
|
+ unit: null,
|
|
|
+ remark: null,
|
|
|
+ fileList: [],
|
|
|
+ },
|
|
|
+});
|
|
|
+const formDom = ref(null);
|
|
|
+const formOption = reactive({
|
|
|
+ readonly: false, //用于控制整个表单是否只读
|
|
|
+ disabled: false,
|
|
|
+ labelAlign: "top",
|
|
|
+ scroll: true,
|
|
|
+ labelWidth: "62pk",
|
|
|
+ // hiddenSubmitBtn: true,
|
|
|
+});
|
|
|
+const formConfig = reactive([
|
|
|
{
|
|
|
- text: proxy.t('supplierConfig.trader'),
|
|
|
- value: 1,
|
|
|
+ type: "picker",
|
|
|
+ label: "供应商类型",
|
|
|
+ prop: "type",
|
|
|
+ itemType: "onePicker",
|
|
|
+ showPicker: false,
|
|
|
+ fieldNames: {
|
|
|
+ text: "dictValue",
|
|
|
+ value: "dictKey",
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
},
|
|
|
{
|
|
|
- text: proxy.t('supplierConfig.factory'),
|
|
|
- value: 2,
|
|
|
+ type: "input",
|
|
|
+ itemType: "text",
|
|
|
+ label: "供应商名称",
|
|
|
+ prop: "name",
|
|
|
+ clearable: true,
|
|
|
},
|
|
|
-]);
|
|
|
-const fieldNames = {
|
|
|
- text: "label",
|
|
|
- value: "id",
|
|
|
-};
|
|
|
-const typeList = ref([
|
|
|
{
|
|
|
- text: proxy.t('supplierConfig.rawMaterial'),
|
|
|
- value: "1",
|
|
|
+ type: "cascader",
|
|
|
+ label: "地址",
|
|
|
+ prop: "countryCity",
|
|
|
+ itemType: "city",
|
|
|
+ showPicker: false,
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ itemType: "text",
|
|
|
+ label: "联系人",
|
|
|
+ prop: "contactPerson",
|
|
|
+ clearable: true,
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ itemType: "text",
|
|
|
+ label: "联系信息",
|
|
|
+ prop: "contactNumber",
|
|
|
+ clearable: true,
|
|
|
},
|
|
|
{
|
|
|
- text: proxy.t('supplierConfig.accessory'),
|
|
|
- value: "2",
|
|
|
+ type: "input",
|
|
|
+ itemType: "number",
|
|
|
+ label: "账期 (天)",
|
|
|
+ prop: "accountPeriod",
|
|
|
+ clearable: true,
|
|
|
},
|
|
|
+
|
|
|
{
|
|
|
- text: proxy.t('supplierConfig.fittings'),
|
|
|
- value: "3",
|
|
|
+ type: "input",
|
|
|
+ itemType: "text",
|
|
|
+ label: "账期说明",
|
|
|
+ prop: "accountPeriodRemark",
|
|
|
+ clearable: true,
|
|
|
},
|
|
|
{
|
|
|
- text: proxy.t('supplierConfig.packaging'),
|
|
|
- value: "4",
|
|
|
+ type: "upload",
|
|
|
+ label: "上传附件",
|
|
|
+ prop: "fileList",
|
|
|
},
|
|
|
{
|
|
|
- text: proxy.t('supplierConfig.other'),
|
|
|
- value: "5",
|
|
|
+ type: "input",
|
|
|
+ itemType: "textarea",
|
|
|
+ label: "备注",
|
|
|
+ prop: "remark",
|
|
|
+ clearable: true,
|
|
|
},
|
|
|
-]);
|
|
|
|
|
|
-const formData = ref({
|
|
|
- id: null,
|
|
|
- definition: "2",
|
|
|
- productClassifyId: null,
|
|
|
- productClassifyName: null,
|
|
|
- code: null,
|
|
|
- customCode: null,
|
|
|
- type: null,
|
|
|
- typeName: null,
|
|
|
- name: null,
|
|
|
- spec: null,
|
|
|
- unit: null,
|
|
|
- remark: null,
|
|
|
- fileList: [],
|
|
|
-});
|
|
|
-const onConfirmType = ({ selectedOptions }) => {
|
|
|
- formData.value.type = selectedOptions[0].value;
|
|
|
- formData.value.typeName = selectedOptions[0].text;
|
|
|
- typeModal.value = false;
|
|
|
-};
|
|
|
-const cityOnChange = (selectedOptions) => {
|
|
|
- getAreaInfo(selectedOptions);
|
|
|
-};
|
|
|
-const onConfirmCity = (selectedOptions) => {
|
|
|
- console.log(selectedOptions);
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ itemType: "text",
|
|
|
+ label: "账户名称",
|
|
|
+ prop: "openingName",
|
|
|
+ clearable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ itemType: "text",
|
|
|
+ label: "开户银行",
|
|
|
+ prop: "openingBank",
|
|
|
+ clearable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ itemType: "text",
|
|
|
+ label: "银行账号",
|
|
|
+ prop: "accountOpening",
|
|
|
+ clearable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ itemType: "text",
|
|
|
+ label: "联行号",
|
|
|
+ prop: "interbankNumber",
|
|
|
+ clearable: true,
|
|
|
+ },
|
|
|
+]);
|
|
|
+const rules = {
|
|
|
+ productClassifyId: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: proxy.t("library.productClassificationCanNotBeEmpty"),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ type: [
|
|
|
+ { required: true, message: proxy.t("library.productTypeCanNotBeEmpty") },
|
|
|
+ ],
|
|
|
+ name: [
|
|
|
+ { required: true, message: proxy.t("library.productNameCanNotBeEmpty") },
|
|
|
+ ],
|
|
|
+ spec: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: proxy.t("library.specificationModelCanNotBeEmpty"),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ unit: [{ required: true, message: proxy.t("library.unitCanNotBeEmpty") }],
|
|
|
+ select: [{ required: true, message: proxy.t("library.pleaseSelect") }],
|
|
|
+ date: [{ required: true, message: proxy.t("library.pleaseSelectTime") }],
|
|
|
+ common: [
|
|
|
+ { required: true, message: proxy.t("library.pleaseSelectCascader") },
|
|
|
+ ],
|
|
|
+ // city: [{ required: true, message: "请选择城市" }],
|
|
|
};
|
|
|
+const onClickLeft = () => history.back();
|
|
|
|
|
|
-const getAreaInfo = (selectedOptions) => {
|
|
|
- showLoadingToast("加载中...");
|
|
|
- proxy
|
|
|
- .post("/customizeArea/list", { parentId: selectedOptions.value })
|
|
|
- .then((res) => {
|
|
|
- let countryIndex = selectedOptions.selectedOptions[0].index;
|
|
|
- let provinceIndex =
|
|
|
- selectedOptions.tabIndex === 1
|
|
|
- ? selectedOptions.selectedOptions[1].index
|
|
|
- : null;
|
|
|
- let cityIndex =
|
|
|
- selectedOptions.tabIndex === 2
|
|
|
- ? selectedOptions.selectedOptions[2].index
|
|
|
- : null;
|
|
|
- //已经没有下级数据
|
|
|
- if (res.data.length === 0) {
|
|
|
- if (selectedOptions.tabIndex === 1) {
|
|
|
- formData.value.cityName = selectedOptions.selectedOptions
|
|
|
- .map((item) => item.text)
|
|
|
- .join(" ");
|
|
|
- cityModal.value = false;
|
|
|
- formData.value.selectedOptions = selectedOptions;
|
|
|
- return;
|
|
|
- }
|
|
|
+onMounted(async () => {
|
|
|
+ const res = await proxy.getDictOne(["supplier_type"]);
|
|
|
+ formConfig[0].data = res["supplier_type"].data;
|
|
|
+ if (route.query.id) {
|
|
|
+ formOption.readonly = true;
|
|
|
+ formOption.hiddenSubmitBtn = true;
|
|
|
+ proxy.post("/supplierInfo/detail", { id: route.query.id }).then((res) => {
|
|
|
+ formData.data = res.data;
|
|
|
+ formData.data.countryCityName =
|
|
|
+ formData.data.countryName +
|
|
|
+ " " +
|
|
|
+ formData.data.provinceName +
|
|
|
+ " " +
|
|
|
+ formData.data.cityName;
|
|
|
+ if (formData.data.countryId) {
|
|
|
+ formData.data.countryCity = formData.data.countryId;
|
|
|
}
|
|
|
- if (selectedOptions.tabIndex === 2) {
|
|
|
- formData.value.cityName = selectedOptions.selectedOptions
|
|
|
- .map((item) => item.text)
|
|
|
- .join(" ");
|
|
|
- cityModal.value = false;
|
|
|
- formData.value.selectedOptions = selectedOptions;
|
|
|
- return;
|
|
|
+ if (formData.data.provinceId) {
|
|
|
+ formData.data.countryCity = formData.data.provinceId;
|
|
|
}
|
|
|
- if (selectedOptions.tabIndex === 0) {
|
|
|
- areaInfo.value[countryIndex].children = res.data.map((item, index) => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- index: index,
|
|
|
- text: item.name,
|
|
|
- value: item.id,
|
|
|
- };
|
|
|
- });
|
|
|
- } else if (selectedOptions.tabIndex === 1) {
|
|
|
- areaInfo.value[countryIndex].children[provinceIndex].children =
|
|
|
- res.data.map((item, index) => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- index: index,
|
|
|
- text: item.name,
|
|
|
- value: item.id,
|
|
|
- };
|
|
|
- });
|
|
|
- } else if (selectedOptions.tabIndex === 2) {
|
|
|
- areaInfo.value[countryIndex].children[provinceIndex].children[
|
|
|
- cityIndex
|
|
|
- ].children = res.data.map((item, index) => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- index: index,
|
|
|
- text: item.name,
|
|
|
- value: item.id,
|
|
|
- };
|
|
|
- });
|
|
|
+ if (formData.data.cityId) {
|
|
|
+ formData.data.countryCity = formData.data.cityId;
|
|
|
}
|
|
|
- console.log(areaInfo);
|
|
|
- closeToast();
|
|
|
});
|
|
|
-};
|
|
|
-
|
|
|
-const fileList = ref([]);
|
|
|
-const afterRead = (file) => {
|
|
|
- if (file && file.length > 0) {
|
|
|
- for (let i = 0; i < file.length; i++) {
|
|
|
- file[i].status = "uploading";
|
|
|
- file[i].message = "上传中...";
|
|
|
- proxy.post("/fileInfo/getSing", { fileName: file[i].file.name }).then(
|
|
|
- (res) => {
|
|
|
- let forms = new FormData();
|
|
|
- forms.append("file", file[i].file);
|
|
|
- proxy
|
|
|
- .post("https://winfaster.obs.cn-south-1.myhuaweicloud.com", {
|
|
|
- ...res.data.uploadBody,
|
|
|
- file: forms.get("file"),
|
|
|
- })
|
|
|
- .then(
|
|
|
- () => {
|
|
|
- file[i].id = res.data.id;
|
|
|
- file[i].url = res.data.fileUrl;
|
|
|
- file[i].fileName = res.data.fileName;
|
|
|
- delete file[i].status;
|
|
|
- delete file[i].message;
|
|
|
- },
|
|
|
- () => {
|
|
|
- file[i].status = "failed";
|
|
|
- file[i].message = "上传失败";
|
|
|
- }
|
|
|
- );
|
|
|
- },
|
|
|
- () => {
|
|
|
- file[i].status = "failed";
|
|
|
- file[i].message = "上传失败";
|
|
|
+ proxy
|
|
|
+ .post("/fileInfo/getList", { businessIdList: [route.query.id] })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data[route.query.id] && res.data[route.query.id].length > 0) {
|
|
|
+ setTimeout(() => {
|
|
|
+ formData.data.fileList = res.data[route.query.id].map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ url: item.fileUrl,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }, 1000);
|
|
|
+ } else {
|
|
|
+ formData.data.fileList = [];
|
|
|
}
|
|
|
- );
|
|
|
- }
|
|
|
- } else {
|
|
|
- file.status = "uploading";
|
|
|
- file.message = "上传中...";
|
|
|
- proxy.post("/fileInfo/getSing", { fileName: file.file.name }).then(
|
|
|
- (res) => {
|
|
|
- let forms = new FormData();
|
|
|
- forms.append("file", file.file);
|
|
|
- proxy
|
|
|
- .post("https://winfaster.obs.cn-south-1.myhuaweicloud.com", {
|
|
|
- ...res.data.uploadBody,
|
|
|
- file: forms.get("file"),
|
|
|
- })
|
|
|
- .then(
|
|
|
- () => {
|
|
|
- file.id = res.data.id;
|
|
|
- file.url = res.data.fileUrl;
|
|
|
- file.fileName = res.data.fileName;
|
|
|
- delete file.status;
|
|
|
- delete file.message;
|
|
|
- },
|
|
|
- () => {
|
|
|
- file.status = "failed";
|
|
|
- file.message = "上传失败";
|
|
|
- }
|
|
|
- );
|
|
|
- },
|
|
|
- () => {
|
|
|
- file.status = "failed";
|
|
|
- file.message = "上传失败";
|
|
|
- }
|
|
|
- );
|
|
|
- }
|
|
|
-};
|
|
|
-const onOversize = () => {
|
|
|
- showToast("文件大小不能超过 5MB");
|
|
|
-};
|
|
|
-const onClickLeft = () => history.back();
|
|
|
-const onSubmit = () => {
|
|
|
- if (fileList.value && fileList.value.length > 0) {
|
|
|
- formData.value.fileList = fileList.value.map((item) => {
|
|
|
- return {
|
|
|
- id: item.id,
|
|
|
- fileName: item.fileName,
|
|
|
- };
|
|
|
- });
|
|
|
- } else {
|
|
|
- formData.value.fileList = [];
|
|
|
- }
|
|
|
- console.log(formData.value.selectedOptions);
|
|
|
- if (formData.value.selectedOptions) {
|
|
|
- formData.value.countryId =
|
|
|
- formData.value.selectedOptions.selectedOptions[0].value;
|
|
|
- formData.value.provinceId =
|
|
|
- formData.value.selectedOptions.tabIndex === 2
|
|
|
- ? formData.value.selectedOptions.selectedOptions[1].value
|
|
|
- : null;
|
|
|
- formData.value.cityId =
|
|
|
- formData.value.selectedOptions.tabIndex === 1
|
|
|
- ? formData.value.selectedOptions.selectedOptions[1].value
|
|
|
- : formData.value.selectedOptions.selectedOptions[2].value;
|
|
|
+ });
|
|
|
}
|
|
|
- proxy.post("/supplierInfo/" + route.query.type, formData.value).then(() => {
|
|
|
- showSuccessToast(route.query.type == "add" ? "添加成功" : "修改成功");
|
|
|
- setTimeout(() => {
|
|
|
- history.back();
|
|
|
- }, 500);
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- proxy.post("/customizeArea/list", formData.value).then((res) => {
|
|
|
- areaInfo.value = res.data.map((item, index) => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- index: index,
|
|
|
- text: item.name,
|
|
|
- value: item.id,
|
|
|
- children: [],
|
|
|
- };
|
|
|
- });
|
|
|
- });
|
|
|
- if (route.query.type == "add") return;
|
|
|
- proxy.post("/supplierInfo/detail", { id: route.query.id }).then((res) => {
|
|
|
- formData.value = res.data;
|
|
|
- formData.value.typeName = res.data.type == 1 ? "供应商" : "客户";
|
|
|
- });
|
|
|
});
|
|
|
</script>
|
|
|
|