From d13487486a3c3c7cf93bd3bda65dcc0d6af51aa2 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 03 六月 2025 17:37:04 +0800
Subject: [PATCH] 销售出库页面开发
---
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