|
@@ -38,11 +38,11 @@
|
|
|
<el-form-item label="发货仓库名称" prop="code">
|
|
|
<el-select v-model="screenForm.stockType" placeholder="请选择" clearable>
|
|
|
<el-option
|
|
|
- label="前置"
|
|
|
+ label="前置仓"
|
|
|
value="1"
|
|
|
/>
|
|
|
<el-option
|
|
|
- label="i商家"
|
|
|
+ label="商家仓"
|
|
|
value="2"
|
|
|
/>
|
|
|
</el-select>
|
|
@@ -60,16 +60,27 @@
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :ms="18" :lg="18" style="display: flex;" class="custom">
|
|
|
<el-form-item label="省" prop="province" class="item">
|
|
|
- <el-input v-model="screenForm.province" placeholder="省" size="mini" />
|
|
|
+ <el-select v-model="screenForm.province" placeholder="请选择省" @change="changeProvince"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="市" prop="city" label-width="50px">
|
|
|
- <el-input v-model="screenForm.city" placeholder="市" size="mini" />
|
|
|
+ <el-select v-model="screenForm.city" placeholder="请选择市" @change="changeCity" style="width: 100%">
|
|
|
+ <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="区" prop="area" label-width="50px">
|
|
|
- <el-input v-model="screenForm.area" placeholder="区" size="mini" />
|
|
|
+ <el-select v-model="screenForm.area" placeholder="请选择区" @change="changeArea" style="width: 100%">
|
|
|
+ <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="街道" prop="street" label-width="50px">
|
|
|
- <el-input v-model="screenForm.street" placeholder="街道" size="mini" />
|
|
|
+ <el-select v-model="screenForm.street" placeholder="请选择街道" @change="changeStreet" style="width: 100%">
|
|
|
+ <el-option v-for="item in streetList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :ms="6" :lg="6">
|
|
@@ -88,23 +99,25 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { getRegion } from '@/api/sales'
|
|
|
+
|
|
|
export default {
|
|
|
name: 'SalesHeader',
|
|
|
data() {
|
|
|
return {
|
|
|
screenForm: {
|
|
|
- id:'',
|
|
|
- city:'',
|
|
|
- area:'',
|
|
|
- province:'',
|
|
|
- street:'',
|
|
|
- customerNumber:'',
|
|
|
- customerName:'',
|
|
|
- pickTime:'',
|
|
|
- stockType:'',
|
|
|
- userName:'',
|
|
|
- phone:'',
|
|
|
- receAddress:'',
|
|
|
+ id: '',
|
|
|
+ city: '',
|
|
|
+ area: '',
|
|
|
+ province: '',
|
|
|
+ street: '',
|
|
|
+ customerNumber: '',
|
|
|
+ customerName: '',
|
|
|
+ pickTime: '',
|
|
|
+ stockType: '',
|
|
|
+ userName: '',
|
|
|
+ phone: '',
|
|
|
+ receAddress: '',
|
|
|
notes: ''
|
|
|
},
|
|
|
rules: {
|
|
@@ -122,7 +135,88 @@ export default {
|
|
|
{ required: true, message: '请输入备注', trigger: 'blur' }
|
|
|
|
|
|
]
|
|
|
- }
|
|
|
+ },
|
|
|
+ provinceList: [],
|
|
|
+ cityList: [],
|
|
|
+ areaList: [],
|
|
|
+ streetList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getRegion()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ // 获取省市区街道
|
|
|
+ getRegion(level = 0, id = 0) {
|
|
|
+ getRegion({ pid: id }).then(res => {
|
|
|
+ if (level === 0) {
|
|
|
+ this.provinceList = res.data
|
|
|
+ } else if (level === 1) {
|
|
|
+ this.cityList = res.data
|
|
|
+ } else if (level === 2) {
|
|
|
+ this.areaList = res.data
|
|
|
+ } else if (level === 3) {
|
|
|
+ this.streetList = res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 切换省
|
|
|
+ changeProvince(value) {
|
|
|
+ this.screenForm.city = ''
|
|
|
+ this.screenForm.area = ''
|
|
|
+ this.screenForm.street = ''
|
|
|
+ this.cityList = []
|
|
|
+ this.areaList = []
|
|
|
+ this.streetList = []
|
|
|
+ this.getRegion(1, value)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 切换市
|
|
|
+ changeCity(value) {
|
|
|
+ this.screenForm.area = ''
|
|
|
+ this.screenForm.street = ''
|
|
|
+ this.areaList = []
|
|
|
+ this.streetList = []
|
|
|
+ this.getRegion(2, value)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 切换区
|
|
|
+ changeArea(value) {
|
|
|
+ this.screenForm.street = ''
|
|
|
+ this.streetList = []
|
|
|
+ this.getRegion(3, value)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 切换街道
|
|
|
+ changeStreet(value) {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ // 初始化省市区街道
|
|
|
+ initRegion(level, item, id = 0) {
|
|
|
+ let { province, city, area, street } = item
|
|
|
+ let nextId = null
|
|
|
+ getRegion({ pid: id }).then(res => {
|
|
|
+ if (level === 0) {
|
|
|
+ this.provinceList = res.data
|
|
|
+ nextId = this.screenForm.province = this.provinceList[findElem(this.provinceList, 'name', province)].id
|
|
|
+ } else if (level === 1) {
|
|
|
+ this.cityList = res.data
|
|
|
+ nextId = this.screenForm.city = this.cityList[findElem(this.cityList, 'name', city)].id
|
|
|
+ } else if (level === 2) {
|
|
|
+ this.areaList = res.data
|
|
|
+ nextId = this.screenForm.area = this.areaList[findElem(this.areaList, 'name', area)].id
|
|
|
+ } else if (level === 3) {
|
|
|
+ this.streetList = res.data
|
|
|
+ nextId = this.screenForm.street = this.streetList[findElem(this.streetList, 'name', street)].id
|
|
|
+ }
|
|
|
+ if (level < 3) {
|
|
|
+ level = level + 1
|
|
|
+ this.initRegion(level, item, nextId)
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|