| | |
| | | style="width: 240px" |
| | | clearable |
| | | @change="handleQuery"> |
| | | <el-option label="零售客户" |
| | | value="零售客户" /> |
| | | <el-option label="进销商客户" |
| | | value="进销商客户" /> |
| | | <el-option label="一批商" |
| | | value="一批商" /> |
| | | <el-option label="终端商" |
| | | value="终端商" /> |
| | | </el-select> |
| | | <el-button type="primary" |
| | | @click="handleQuery" |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="纳税人识别号:" |
| | | prop="taxpayerIdentificationNumber"> |
| | | <el-input v-model="form.taxpayerIdentificationNumber" |
| | | placeholder="请输入" |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="公司地址:" |
| | | prop="companyAddress"> |
| | | <el-input v-model="form.companyAddress" |
| | |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="公司电话:" |
| | | prop="companyPhone"> |
| | | <el-input v-model="form.companyPhone" |
| | | placeholder="请输入" |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="银行基本户:" |
| | | prop="basicBankAccount"> |
| | | <el-input v-model="form.basicBankAccount" |
| | | placeholder="请输入" |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="银行账号:" |
| | | prop="bankAccount"> |
| | | <el-input v-model="form.bankAccount" |
| | | placeholder="请输入" |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="开户行号:" |
| | | prop="bankCode"> |
| | | <el-input v-model="form.bankCode" |
| | | placeholder="请输入" |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="客户分类:" |
| | | prop="customerType"> |
| | | <el-select v-model="form.customerType" |
| | | placeholder="请选择" |
| | | clearable> |
| | | <el-option label="零售客户" |
| | | value="零售客户" /> |
| | | <el-option label="进销商客户" |
| | | value="进销商客户" /> |
| | | <el-option label="一批商" |
| | | value="一批商" /> |
| | | <el-option label="终端商" |
| | | value="终端商" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30" |
| | | v-for="(contact, index) in formYYs.contactList" |
| | | :key="index"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="联系人:" |
| | | prop="contactPerson"> |
| | | <el-input v-model="contact.contactPerson" |
| | | placeholder="请输入" |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="联系电话:" |
| | | prop="contactPhone"> |
| | | <div style="display: flex; align-items: center;width: 100%;"> |
| | | <el-input v-model="contact.contactPhone" |
| | | placeholder="请输入" |
| | | clearable /> |
| | | <el-button @click="removeContact(index)" |
| | | type="danger" |
| | | circle |
| | | style="margin-left: 5px;"> |
| | | <el-icon> |
| | | <Close /> |
| | | </el-icon> |
| | | </el-button> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-button @click="addNewContact" |
| | | style="margin-bottom: 10px;">+ 新增联系人</el-button> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="维护人:" |
| | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <div class="info-item"> |
| | | <span class="info-label">纳税人识别号:</span> |
| | | <span class="info-value">{{ detailForm.taxpayerIdentificationNumber }}</span> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div class="info-item"> |
| | | <span class="info-label">公司电话:</span> |
| | | <span class="info-value">{{ detailForm.companyPhone }}</span> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <div class="info-item"> |
| | | <span class="info-label">公司地址:</span> |
| | | <span class="info-value">{{ detailForm.companyAddress }}</span> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div class="info-item"> |
| | | <span class="info-label">银行基本户:</span> |
| | | <span class="info-value">{{ detailForm.basicBankAccount }}</span> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <div class="info-item"> |
| | | <span class="info-label">银行账号:</span> |
| | | <span class="info-value">{{ detailForm.bankAccount }}</span> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div class="info-item"> |
| | | <span class="info-label">开户行号:</span> |
| | | <span class="info-value">{{ detailForm.bankCode }}</span> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <div class="info-item"> |
| | | <span class="info-label">联系人:</span> |
| | | <span class="info-value">{{ detailForm.contactPerson }}</span> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div class="info-item"> |
| | | <span class="info-label">联系电话:</span> |
| | | <span class="info-value">{{ detailForm.contactPhone }}</span> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | const detailForm = reactive({ |
| | | customerName: "", |
| | | customerType: "", |
| | | taxpayerIdentificationNumber: "", |
| | | companyPhone: "", |
| | | companyAddress: "", |
| | | basicBankAccount: "", |
| | | bankAccount: "", |
| | | bankCode: "", |
| | | contactPerson: "", |
| | | contactPhone: "", |
| | | maintainer: "", |
| | | maintenanceTime: "", |
| | | }); |
| | |
| | | |
| | | const tableColumn = ref([ |
| | | { |
| | | label: "客户分类", |
| | | prop: "customerType", |
| | | width: 120, |
| | | }, |
| | | { |
| | | label: "客户名称", |
| | | prop: "customerName", |
| | | width: 220, |
| | | }, |
| | | { |
| | | label: "纳税人识别码", |
| | | prop: "taxpayerIdentificationNumber", |
| | | width: 220, |
| | | label: "客户分类", |
| | | prop: "customerType", |
| | | dataType: "tag", |
| | | width: 120, |
| | | formatType: value => { |
| | | if (value === "一批商") { |
| | | return "primary"; |
| | | } |
| | | return "success"; |
| | | }, |
| | | }, |
| | | { |
| | | label: "地址及联系方式", |
| | | prop: "addressPhone", |
| | | label: "公司地址", |
| | | prop: "companyAddress", |
| | | width: 250, |
| | | }, |
| | | { |
| | | label: "联系人", |
| | | prop: "contactPerson", |
| | | }, |
| | | { |
| | | label: "联系电话", |
| | | prop: "contactPhone", |
| | | width: 150, |
| | | }, |
| | | // { |
| | | // label: "跟进进度", |
| | | // prop: "followUpLevel", |
| | | // width: 120, |
| | | // }, |
| | | // { |
| | | // label: "跟进时间", |
| | | // prop: "followUpTime", |
| | | // width: 120, |
| | | // }, |
| | | { |
| | | label: "银行基本户", |
| | | prop: "basicBankAccount", |
| | | width: 220, |
| | | }, |
| | | { |
| | | label: "银行账号", |
| | | prop: "bankAccount", |
| | | width: 220, |
| | | }, |
| | | { |
| | | label: "开户行号", |
| | | prop: "bankCode", |
| | | width: 220, |
| | | }, |
| | | { |
| | | label: "维护人", |
| | |
| | | // 用户信息表单弹框数据 |
| | | const operationType = ref(""); |
| | | const dialogFormVisible = ref(false); |
| | | const formYYs = ref({ |
| | | // 其他字段... |
| | | contactList: [ |
| | | { |
| | | contactPerson: "", |
| | | contactPhone: "", |
| | | }, |
| | | ], |
| | | }); |
| | | const data = reactive({ |
| | | searchForm: { |
| | | customerName: "", |
| | |
| | | }, |
| | | form: { |
| | | customerName: "", |
| | | taxpayerIdentificationNumber: "", |
| | | companyAddress: "", |
| | | companyPhone: "", |
| | | contactPerson: "", |
| | | contactPhone: "", |
| | | maintainer: "", |
| | | maintenanceTime: "", |
| | | basicBankAccount: "", |
| | | bankAccount: "", |
| | | bankCode: "", |
| | | customerType: "", |
| | | }, |
| | | rules: { |
| | | customerName: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | taxpayerIdentificationNumber: [ |
| | | { required: true, message: "请输入", trigger: "blur" }, |
| | | ], |
| | | companyAddress: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | companyPhone: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | // contactPerson: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | // contactPhone: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | maintainer: [{ required: false, message: "请选择", trigger: "change" }], |
| | | maintenanceTime: [ |
| | | { required: false, message: "请选择", trigger: "change" }, |
| | | ], |
| | | basicBankAccount: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | bankAccount: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | bankCode: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | customerType: [{ required: true, message: "请选择", trigger: "change" }], |
| | | }, |
| | | }); |
| | |
| | | }, |
| | | }); |
| | | const { searchForm, form, rules } = toRefs(data); |
| | | const addNewContact = () => { |
| | | formYYs.value.contactList.push({ |
| | | contactPerson: "", |
| | | contactPhone: "", |
| | | }); |
| | | }; |
| | | |
| | | const removeContact = index => { |
| | | if (formYYs.value.contactList.length > 1) { |
| | | formYYs.value.contactList.splice(index, 1); |
| | | } |
| | | }; |
| | | // 查询列表 |
| | | /** 搜索按钮操作 */ |
| | | const handleQuery = () => { |
| | |
| | | operationType.value = type; |
| | | form.value = {}; |
| | | form.value.maintainer = userStore.nickName; |
| | | formYYs.value.contactList = [ |
| | | { |
| | | contactPerson: "", |
| | | contactPhone: "", |
| | | }, |
| | | ]; |
| | | form.value.maintenanceTime = getCurrentDate(); |
| | | userListNoPage().then(res => { |
| | | userList.value = res.data; |
| | |
| | | if (type === "edit") { |
| | | getCustomer(row.id).then(res => { |
| | | form.value = { ...res.data }; |
| | | formYYs.value.contactList = res.data.contactPerson |
| | | .split(",") |
| | | .map((item, index) => { |
| | | return { |
| | | contactPerson: item, |
| | | contactPhone: res.data.contactPhone.split(",")[index], |
| | | }; |
| | | }); |
| | | }); |
| | | } |
| | | dialogFormVisible.value = true; |
| | |
| | | }; |
| | | // 提交新增 |
| | | const submitAdd = () => { |
| | | if (formYYs.value.contactList.length < 1) { |
| | | return proxy.$modal.msgWarning("请至少添加一个联系人"); |
| | | } |
| | | form.value.contactPerson = formYYs.value.contactList |
| | | .map(item => item.contactPerson) |
| | | .join(","); |
| | | form.value.contactPhone = formYYs.value.contactList |
| | | .map(item => item.contactPhone) |
| | | .join(","); |
| | | addCustomer(form.value).then(res => { |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | closeDia(); |
| | |
| | | }; |
| | | // 提交修改 |
| | | const submitEdit = () => { |
| | | form.value.contactPerson = formYYs.value.contactList |
| | | .map(item => item.contactPerson) |
| | | .join(","); |
| | | form.value.contactPhone = formYYs.value.contactList |
| | | .map(item => item.contactPhone) |
| | | .join(","); |
| | | updateCustomer(form.value).then(res => { |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | closeDia(); |