| | |
| | | </el-form-item> |
| | | <el-form-item label="经营地址" prop="bids"> |
| | | <el-cascader placeholder="请选择经营地址" size="default" :options="addressSelectOptions" v-model="formData.bids" |
| | | @change="handleChange"> |
| | | :props="cascaderProps" @change="handleChange"> |
| | | </el-cascader> |
| | | </el-form-item> |
| | | <el-form-item label="详细地址" prop="businessAddress"> |
| | |
| | | <el-form-item label="联系人电话" prop="contactPhone"> |
| | | <el-input v-model="formData.contactPhone" placeholder="请输入联系人电话" /> |
| | | </el-form-item> |
| | | <el-form-item label="联系人地址" prop="contactAddress"> |
| | | <el-form-item label="联系人地址" prop="cids"> |
| | | <el-cascader placeholder="请选择联系人地址" size="default" :options="addressSelectOptions" v-model="formData.cids" |
| | | :props="cascaderProps" @change="handleChange"> |
| | | </el-cascader> |
| | | </el-form-item> |
| | | <el-form-item label="联系人详细地址" prop="contactAddress"> |
| | | <el-input v-model="formData.contactAddress" placeholder="请输入联系人地址" /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="submitForm"> 确定 </el-button> |
| | | <el-form-item class="dialog-footer"> |
| | | <el-button v-if="addOrEdit === 'edit'" @click="resetForm">重置</el-button> |
| | | <el-button v-if="addOrEdit === 'add'" @click="cancelForm">取消</el-button> |
| | | <el-button type="primary" @click="submitForm"> 确定</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-dialog> |
| | |
| | | |
| | | <script setup> |
| | | import { ref, watch, defineProps, onMounted } from "vue"; |
| | | import addressList from "@/api/jsonApi/areaList.json"; |
| | | import { addOrEditSupply } from "@/api/basicInformation/supplier"; |
| | | import { getAreaOptions } from "@/api/system/area.js"; |
| | | |
| | | const props = defineProps({ |
| | | beforeClose: { |
| | | type: Function, |
| | | default: () => { }, |
| | | default: () => { |
| | | }, |
| | | }, |
| | | form: { |
| | | type: Object, |
| | |
| | | }); |
| | | |
| | | const emit = defineEmits(["submit", "handleBeforeClose"]); |
| | | |
| | | const copyForm = defineModel("copyForm", { |
| | | required: true, |
| | | type: Object, |
| | | }); |
| | | onMounted(() => { |
| | | addressSelectOptions.value = mapAddress(addressList); |
| | | fetchAreaOptions() |
| | | }) |
| | | |
| | | // 修改树形选择的映射 |
| | | const cascaderProps = ref({ |
| | | value: 'id', // 指定value字段为id |
| | | label: 'label', // 指定label字段 |
| | | children: 'children' // 指定子节点字段 |
| | | }) |
| | | |
| | | // 地址选择数据 |
| | | const addressSelectOptions = ref([]); |
| | | const fetchAreaOptions = async () => { |
| | | addressSelectOptions.value = []; |
| | | |
| | | const res = await getAreaOptions(); |
| | | if (res.code === 200) { |
| | | addressSelectOptions.value = res.data; |
| | | } |
| | | } |
| | | |
| | | // 处理地址数据转换 |
| | | function mapAddress(list) { |
| | | return list.map(item => ({ |
| | | value: item.no, |
| | | value: item.id, |
| | | label: item.name, |
| | | children: item.children ? mapAddress(item.children) : undefined |
| | | })); |
| | | } |
| | | |
| | | // 表单引用 |
| | | const formRef = ref(null); |
| | | // 表单数据 |
| | |
| | | if (!formRef.value) return; |
| | | await formRef.value.validate(async (valid, fields) => { |
| | | if (valid) { |
| | | if(props.title.includes('新增')){ |
| | | const obj = ref({}); |
| | | if (props.title.includes('新增')) { |
| | | let result = await addOrEditSupply({ |
| | | ...formData.value, |
| | | }) |
| | | let obj = { |
| | | ...formData.value, |
| | | result |
| | | }; |
| | | }else{ |
| | | ...formData.value, |
| | | }) |
| | | obj.value = { |
| | | title: "新增", |
| | | ...formData.value, |
| | | result |
| | | }; |
| | | } else { |
| | | delete formData.value.createTime |
| | | delete formData.value.updateTime |
| | | let result = await addOrEditSupply({ |
| | | ...formData.value, |
| | | }) |
| | | console.log(result) |
| | | ...formData.value, |
| | | }) |
| | | obj.value = { |
| | | title: "编辑", |
| | | ...formData.value, |
| | | result |
| | | }; |
| | | } |
| | | emit("submit", obj); |
| | | emit("submit", obj.value); |
| | | } |
| | | }); |
| | | }; |
| | |
| | | // 重置表单 |
| | | const resetForm = () => { |
| | | if (!formRef.value) return; |
| | | formRef.value.resetFields(); |
| | | formData.value = JSON.parse(JSON.stringify(copyForm.value)); |
| | | // formRef.value.resetFields(); |
| | | }; |
| | | // 关闭弹窗 |
| | | const handleClose = () => { |
| | |
| | | { required: true, message: "请正确输入纳税人识别号", trigger: "blur" }, |
| | | { min: 17, max: 20, message: "请输入17-20位纳税人识别号", trigger: "blur" }, |
| | | ], |
| | | bids: [ |
| | | { |
| | | required: true, |
| | | message: "请选择经营地址", |
| | | trigger: "change", |
| | | }, |
| | | ], |
| | | // bids: [ |
| | | // { |
| | | // required: true, |
| | | // message: "请选择经营地址", |
| | | // trigger: "change", |
| | | // }, |
| | | // ], |
| | | bankName: [{ required: true, message: "请输入银行账户", trigger: "blur" }], |
| | | bankAccount: [{ required: true, message: "请输入开户行", trigger: "blur" }], |
| | | contactPerson: [{ required: true, message: "联系人", trigger: "blur" }], |
| | |
| | | ], |
| | | }); |
| | | </script> |
| | | <style lang="sass" scoped> |
| | | <style lang="scss" scoped> |
| | | .dialog-footer { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | margin-top: 20px; |
| | | flex-direction: column; |
| | | } |
| | | </style> |