소스 검색

新建销售单

lilei 4 년 전
부모
커밋
84eb6dd09d
2개의 변경된 파일350개의 추가작업 그리고 2개의 파일을 삭제
  1. 334 0
      src/views/salesManagement/salesQuery/chooseCustom.vue
  2. 16 2
      src/views/salesManagement/salesQuery/list.vue

+ 334 - 0
src/views/salesManagement/salesQuery/chooseCustom.vue

@@ -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>

+ 16 - 2
src/views/salesManagement/salesQuery/list.vue

@@ -126,18 +126,22 @@
         </a-dropdown>
         </span>
     </s-table>
+    <!-- 选择客户弹框 -->
+    <chooseCustom :show="openModal" @ok="chooseCustomOk" @cancel="openModal=false"></chooseCustom>
   </a-card>
 </template>
 
 <script>
 import moment from 'moment'
 import { STable, VSelect } from '@/components'
+import chooseCustom from './chooseCustom.vue'
 // import { getRoleList, getServiceList } from '@/api/manage'
 export default {
   name: 'TableList',
   components: {
     STable,
-    VSelect
+    VSelect,
+    chooseCustom
   },
   data () {
     return {
@@ -145,6 +149,7 @@ export default {
       // 高级搜索 展开/关闭
       advanced: false,
       disabled: false, //  查询、重置按钮是否可操作
+      openModal: false, // 选择客户弹框是否显示
       customeList:[],
       // 查询参数
       queryParam: {},
@@ -255,7 +260,11 @@ export default {
   },
   methods: {
     handleNew(){
-      
+      this.openModal = true
+    },
+    // 选择客户成功
+    chooseCustomOk(data){
+      this.$router.push({ name: 'salesNew' })
     },
     handleEdit (record) {
       this.$router.push({ name: 'salesEdit', params: { id: record.id }})
@@ -276,6 +285,11 @@ export default {
       this.newTime = undefined
       this.$refs.table.refresh(true)
     },
+    filterOption(input, option) {
+    	return (
+    		option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    	)
+    },
   }
 }
 </script>