|
@@ -0,0 +1,334 @@
|
|
|
+<template>
|
|
|
+ <a-modal
|
|
|
+ v-model="opened"
|
|
|
+ title="选择客户"
|
|
|
+ centered
|
|
|
+ :maskClosable="false"
|
|
|
+ :confirmLoading="confirmLoading"
|
|
|
+ width="80%"
|
|
|
+ :footer="null"
|
|
|
+ @cancel="cancel"
|
|
|
+ >
|
|
|
+ <a-form-model
|
|
|
+ id="chooseCustom-form"
|
|
|
+ ref="ruleForm"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ :label-col="formItemLayout.labelCol"
|
|
|
+ :wrapper-col="formItemLayout.wrapperCol"
|
|
|
+ >
|
|
|
+ <a-row :gutter="15">
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-model-item label="客户名称" prop="name">
|
|
|
+ <a-input
|
|
|
+ id="chooseCustom-name"
|
|
|
+ :maxLength="30"
|
|
|
+ v-model="form.name"
|
|
|
+ placeholder="请输入客户名称(最多30个字符)"
|
|
|
+ allowClear />
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-model-item>
|
|
|
+ (未搜索到客户时为新增客户)
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="15">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-model-item label="客户地址" required style="margin: 0;" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
|
|
|
+ <a-row :gutter="15">
|
|
|
+ <!-- 客户地址 -->
|
|
|
+ <a-col span="8">
|
|
|
+ <a-form-model-item prop="provinceCode">
|
|
|
+ <a-select id="chooseCustom-provinceCode" @change="getCityList" v-model="form.provinceCode" placeholder="请选择省">
|
|
|
+ <a-select-option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col span="8">
|
|
|
+ <a-form-model-item prop="cityCode">
|
|
|
+ <a-select id="chooseCustom-cityCode" @change="getAreaList" v-model="form.cityCode" placeholder="请选择市">
|
|
|
+ <a-select-option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col span="8">
|
|
|
+ <a-form-model-item prop="districtCode">
|
|
|
+ <a-select id="chooseCustom-districtCode" @change="areaCharged" v-model="form.districtCode" placeholder="请选择区/县">
|
|
|
+ <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-model-item prop="address">
|
|
|
+ <a-input
|
|
|
+ id="chooseCustom-address"
|
|
|
+ :maxLength="60"
|
|
|
+ v-model="form.address"
|
|
|
+ placeholder="请输入详细地址(最多60个字符)"
|
|
|
+ allowClear />
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="15">
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-model-item label="联系人" prop="contacts">
|
|
|
+ <a-input
|
|
|
+ id="chooseCustom-contacts"
|
|
|
+ :maxLength="30"
|
|
|
+ v-model="form.contacts"
|
|
|
+ placeholder="请输入联系人(最多30个字符)"
|
|
|
+ allowClear />
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-model-item label="客户电话" prop="customerPhone">
|
|
|
+ <a-input
|
|
|
+ id="chooseCustom-customerPhone"
|
|
|
+ :maxLength="11"
|
|
|
+ v-model="form.customerPhone"
|
|
|
+ placeholder="请输入客户电话(最多11个字符)"
|
|
|
+ allowClear />
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="15">
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-model-item label="价格类型" prop="priceType">
|
|
|
+ <a-row :gutter="15">
|
|
|
+ <a-col :span="20">
|
|
|
+ <a-select id="chooseCustom-priceType" v-model="form.priceType" placeholder="请选择价格类型">
|
|
|
+ <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="4">
|
|
|
+ <a-popover>
|
|
|
+ <template slot="content">
|
|
|
+ (选择后在当前工单不可修改)
|
|
|
+ </template>
|
|
|
+ <a-icon type="question-circle" />
|
|
|
+ </a-popover>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-model-item label="支付方式" prop="payType">
|
|
|
+ <a-select id="chooseCustom-payType" v-model="form.payType" placeholder="请选择支付方式">
|
|
|
+ <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-model-item label="收款方式" prop="payment">
|
|
|
+ <a-select id="chooseCustom-payment" v-model="form.payment" placeholder="请选择收款方式">
|
|
|
+ <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="15">
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-model-item label="配送方式" prop="shipping">
|
|
|
+ <a-select id="chooseCustom-shipping" v-model="form.shippingCode" placeholder="请选择配送方式">
|
|
|
+ <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-model-item label="业务员" prop="salesman">
|
|
|
+ <a-select id="chooseCustom-salesman" v-model="form.salesman" placeholder="请选择业务员">
|
|
|
+ <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="15">
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-model-item label="备注" prop="remark">
|
|
|
+ <a-input
|
|
|
+ id="chooseCustom-remark"
|
|
|
+ type="textarea"
|
|
|
+ :maxLength="100"
|
|
|
+ v-model="form.remarks"
|
|
|
+ placeholder="请输入联系电话(最多100个字符)"
|
|
|
+ allowClear />
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-model-item label="开单人">
|
|
|
+ 王明
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
|
|
|
+ <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">保存</a-button>
|
|
|
+ <a-button @click="cancel" style="margin-left: 15px" id="chooseCustom-btn-back">取消</a-button>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-form-model>
|
|
|
+ </a-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: 'chooseCustom',
|
|
|
+ props:{
|
|
|
+ show: [Boolean]
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ opened: this.show,
|
|
|
+ confirmLoading: false,
|
|
|
+ formItemLayout: {
|
|
|
+ labelCol: { span: 8 },
|
|
|
+ wrapperCol: { span: 16 }
|
|
|
+ },
|
|
|
+ form: {
|
|
|
+ name: '', // 客户名称
|
|
|
+ provinceCode: undefined, // 省
|
|
|
+ provinceName: '',
|
|
|
+ cityCode: undefined, // 市
|
|
|
+ cityName: '',
|
|
|
+ districtCode: undefined, // 区
|
|
|
+ districtName: '',
|
|
|
+ address: '', // 详细地址
|
|
|
+ contactName: '', // 联系人
|
|
|
+ contactPhone: '', // 联系电话
|
|
|
+ remarks: '', // 备注
|
|
|
+ priceType: '',// 价格类型
|
|
|
+ payType: '', // 支付方式
|
|
|
+ payment: '', // 收款方式
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: '请输入客户名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ provinceCode: [
|
|
|
+ { required: true, message: '请选择省', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ cityCode: [
|
|
|
+ { required: true, message: '请选择市', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ districtCode: [
|
|
|
+ { required: true, message: '请选择区/县', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ address: [
|
|
|
+ { required: true, message: '请输入详细地址', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ contactName: [
|
|
|
+ { required: true, message: '请输入联系人', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ contactPhone: [
|
|
|
+ { required: true, message: '请输入联系人电话', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ priceType: [
|
|
|
+ { required: true, message: '请选择价格类型', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ payType: [
|
|
|
+ { required: true, message: '请选择支付方式', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ payment: [
|
|
|
+ { required: true, message: '请选择收款方式', trigger: 'change' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ addrProvinceList: [], // 省下拉
|
|
|
+ addrCityList: [], // 市下拉
|
|
|
+ addrDistrictList: [] // 区下拉
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取省列表'
|
|
|
+ getProvinceList () {
|
|
|
+ getProvince().then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.addrProvinceList = res.data || []
|
|
|
+ } else {
|
|
|
+ this.addrProvinceList = []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取城市列表
|
|
|
+ getCityList (val) {
|
|
|
+ this.addrCityList = []
|
|
|
+ this.addrDistrictList = []
|
|
|
+ this.form.cityCode = undefined
|
|
|
+ this.form.districtCode = undefined
|
|
|
+ this.form.address = ''
|
|
|
+ this.getCityListRequest(val)
|
|
|
+ },
|
|
|
+ getCityListRequest (val) {
|
|
|
+ getCityByPro({
|
|
|
+ id: val
|
|
|
+ }).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.addrCityList = res.data || []
|
|
|
+ } else {
|
|
|
+ this.addrCityList = []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取区县列表
|
|
|
+ getAreaList (val) {
|
|
|
+ this.addrDistrictList = []
|
|
|
+ this.form.districtCode = undefined
|
|
|
+ this.form.address = ''
|
|
|
+ this.getAreaListRequest(val)
|
|
|
+ },
|
|
|
+ getAreaListRequest (val) {
|
|
|
+ getDistrictByCity({
|
|
|
+ id: val
|
|
|
+ }).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.addrDistrictList = res.data || []
|
|
|
+ } else {
|
|
|
+ this.addrDistrictList = []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 区县变更
|
|
|
+ areaCharged (val) {
|
|
|
+ this.form.address = ''
|
|
|
+ },
|
|
|
+ // 保存
|
|
|
+ handleSubmit (e) {
|
|
|
+ e.preventDefault()
|
|
|
+ const _this = this
|
|
|
+ this.$emit('ok',{id:1000,customName:'车领主常青二路店'})
|
|
|
+ this.cancel()
|
|
|
+ // this.$refs.ruleForm.validate(valid => {
|
|
|
+ // if (valid) {
|
|
|
+ // const form = values.form
|
|
|
+ // form.desc = _this.form.desc
|
|
|
+ // form.id = this.isEdit ? this.$route.params.id : null
|
|
|
+ // console.log(form,'-----提交信息')
|
|
|
+ // // goodsSave(form).then(res => {
|
|
|
+ // // if (res.status == 200) {
|
|
|
+ // // _this.$message.success(res.message)
|
|
|
+ // // }
|
|
|
+ // // })
|
|
|
+ // } else {
|
|
|
+ // console.log('error submit!!')
|
|
|
+ // return false
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ cancel(){
|
|
|
+ this.opened = false
|
|
|
+ this.$refs.ruleForm.resetFields();
|
|
|
+ this.$emit('cancel')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ show(newValue, oldValue) {
|
|
|
+ this.opened = newValue
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+</style>
|