From 6b9dd0a1b0c259a02c086f7834467e1fa2c2a5ea Mon Sep 17 00:00:00 2001 From: 张诺 <zhang_12370@163.com> Date: 星期五, 30 五月 2025 17:58:54 +0800 Subject: [PATCH] 调整基础信息供应商模块,客户信息模块并新增联动查询省市区联动,修改table表格方法 --- src/views/production/components/SupplierDialog.vue | 283 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 283 insertions(+), 0 deletions(-) diff --git a/src/views/production/components/SupplierDialog.vue b/src/views/production/components/SupplierDialog.vue new file mode 100644 index 0000000..38735b7 --- /dev/null +++ b/src/views/production/components/SupplierDialog.vue @@ -0,0 +1,283 @@ +<template> + <el-dialog + v-model="dialogVisible" + :title="title" + width="800px" + :close-on-click-modal="false" + @close="handleClose" + > + <el-form + ref="formRef" + :model="formData" + :rules="rules" + label-width="120px" + class="supplier-form" + > + <el-row :gutter="20"> + <el-col :span="12"> + <el-form-item label="渚涘簲鍟嗗悕绉�" prop="supplierName"> + <el-input v-model="formData.supplierName" placeholder="璇疯緭鍏ヤ緵搴斿晢鍚嶇О" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="绾崇◣浜鸿瘑鍒彿" prop="identifyNumber"> + <el-input v-model="formData.identifyNumber" placeholder="璇疯緭鍏ョ撼绋庝汉璇嗗埆鍙�" /> + </el-form-item> + </el-col> + </el-row> + + <el-row :gutter="20"> + <el-col :span="12"> + <el-form-item label="缁忚惀鍦板潃" prop="address"> + <el-cascader + v-model="formData.address" + :options="addressOptions" + placeholder="璇烽�夋嫨缁忚惀鍦板潃" + clearable + style="width: 100%" + /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="璇︾粏鍦板潃" prop="addressDetail"> + <el-input v-model="formData.addressDetail" placeholder="璇疯緭鍏ヨ缁嗗湴鍧�" /> + </el-form-item> + </el-col> + </el-row> + + <el-row :gutter="20"> + <el-col :span="12"> + <el-form-item label="閾惰璐︽埛" prop="bankAccount"> + <el-input v-model="formData.bankAccount" placeholder="璇疯緭鍏ラ摱琛岃处鎴�" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="寮�鎴疯" prop="bank"> + <el-input v-model="formData.bank" placeholder="璇疯緭鍏ュ紑鎴疯" /> + </el-form-item> + </el-col> + </el-row> + + <el-row :gutter="20"> + <el-col :span="12"> + <el-form-item label="鑱旂郴浜�" prop="contacts"> + <el-input v-model="formData.contacts" placeholder="璇疯緭鍏ヨ仈绯讳汉" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鑱旂郴浜虹數璇�" prop="contactsPhone"> + <el-input v-model="formData.contactsPhone" placeholder="璇疯緭鍏ヨ仈绯讳汉鐢佃瘽" /> + </el-form-item> + </el-col> + </el-row> + + <el-row :gutter="20"> + <el-col :span="12"> + <el-form-item label="鐢靛瓙閭" prop="email"> + <el-input v-model="formData.email" placeholder="璇疯緭鍏ョ數瀛愰偖绠�" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="澶囨敞" prop="remark"> + <el-input v-model="formData.remark" type="textarea" placeholder="璇疯緭鍏ュ娉ㄤ俊鎭�" /> + </el-form-item> + </el-col> + </el-row> + </el-form> + + <template #footer> + <div class="dialog-footer"> + <el-button @click="handleClose">鍙� 娑�</el-button> + <el-button v-if="type === 'edit'" @click="handleReset">閲� 缃�</el-button> + <el-button type="primary" :loading="loading" @click="handleSubmit">纭� 瀹�</el-button> + </div> + </template> + </el-dialog> +</template> + +<script setup> +import { ref, reactive, defineProps, watch } from 'vue' +import { ElMessage } from 'element-plus' + +const props = defineProps({ + visible: { + type: Boolean, + default: false + }, + type: { + type: String, + default: 'add' // 'add' 鎴� 'edit' + }, + title: { + type: String, + default: '鏂板渚涘簲鍟�' + }, + rowData: { + type: Object, + default: () => ({}) + } +}) + +const emit = defineEmits(['update:visible', 'success']) + +const dialogVisible = ref(false) +const loading = ref(false) +const formRef = ref(null) + +// 琛ㄥ崟鏁版嵁 +const formData = reactive({ + supplierName: '', + identifyNumber: '', + address: [], + addressDetail: '', + bankAccount: '', + bank: '', + contacts: '', + contactsPhone: '', + email: '', + remark: '' +}) + +// 鍦板潃閫夐」锛堢ず渚嬫暟鎹級 +const addressOptions = [ + { + value: 'shanghai', + label: '涓婃捣', + children: [ + { + value: 'pudong', + label: '娴︿笢鏂板尯' + }, + { + value: 'xuhui', + label: '寰愭眹鍖�' + } + ] + }, + { + value: 'beijing', + label: '鍖椾含', + children: [ + { + value: 'chaoyang', + label: '鏈濋槼鍖�' + }, + { + value: 'haidian', + label: '娴锋穩鍖�' + } + ] + } +] + +// 琛ㄥ崟楠岃瘉瑙勫垯 +const rules = { + supplierName: [ + { required: true, message: '璇疯緭鍏ヤ緵搴斿晢鍚嶇О', trigger: 'blur' } + ], + identifyNumber: [ + { required: true, message: '璇疯緭鍏ョ撼绋庝汉璇嗗埆鍙�', trigger: 'blur' }, + { min: 15, max: 20, message: '绾崇◣浜鸿瘑鍒彿闀垮害鍦�15鍒�20涓瓧绗�', trigger: 'blur' } + ], + address: [ + { required: true, message: '璇烽�夋嫨缁忚惀鍦板潃', trigger: 'change' } + ], + bankAccount: [ + { required: true, message: '璇疯緭鍏ラ摱琛岃处鎴�', trigger: 'blur' } + ], + bank: [ + { required: true, message: '璇疯緭鍏ュ紑鎴疯', trigger: 'blur' } + ], + contacts: [ + { required: true, message: '璇疯緭鍏ヨ仈绯讳汉', trigger: 'blur' } + ], + contactsPhone: [ + { required: true, message: '璇疯緭鍏ヨ仈绯讳汉鐢佃瘽', trigger: 'blur' }, + { pattern: /^1[3-9]\d{9}$/, message: '璇疯緭鍏ユ纭殑鎵嬫満鍙风爜', trigger: 'blur' } + ], + email: [ + { type: 'email', message: '璇疯緭鍏ユ纭殑閭鍦板潃', trigger: 'blur' } + ] +} + +// 鐩戝惉visible鍙樺寲 +watch(() => props.visible, (val) => { + dialogVisible.value = val + if (val && props.type === 'edit') { + Object.assign(formData, props.rowData) + } +}) + +// 鐩戝惉dialogVisible鍙樺寲 +watch(() => dialogVisible.value, (val) => { + emit('update:visible', val) +}) + +// 鎻愪氦琛ㄥ崟 +const handleSubmit = async () => { + if (!formRef.value) return + + await formRef.value.validate((valid) => { + if (valid) { + loading.value = true + try { + // 瑙﹀彂鎴愬姛浜嬩欢锛屼紶閫掕〃鍗曟暟鎹� + emit('success', { ...formData }) + handleClose() + } catch (error) { + ElMessage.error('鎻愪氦澶辫触') + } finally { + loading.value = false + } + } + }) +} + +// 閲嶇疆琛ㄥ崟 +const handleReset = () => { + formRef.value?.resetFields() +} + +// 鍏抽棴寮圭獥 +const handleClose = () => { + dialogVisible.value = false + formRef.value?.resetFields() + Object.assign(formData, { + supplierName: '', + identifyNumber: '', + address: [], + addressDetail: '', + bankAccount: '', + bank: '', + contacts: '', + contactsPhone: '', + email: '', + remark: '' + }) +} +</script> + +<style scoped> +.supplier-form { + padding: 20px; +} + +.dialog-footer { + display: flex; + justify-content: flex-end; + gap: 10px; +} + +:deep(.el-form-item__label) { + font-weight: bold; +} + +:deep(.el-input), +:deep(.el-cascader) { + width: 100%; +} + +:deep(.el-textarea__inner) { + min-height: 80px; +} +</style> \ No newline at end of file -- Gitblit v1.9.3