supply-front/src/components/SalesHeader/SalesHeader.vue

<template>
  <div class="sales">
    <el-form ref="form" :rules="rules" label-position="left" :disabled="screenForm.disabled" label-width="120px" :model="screenForm" size="mini">
      <el-row :gutter="20">
        <el-col :xs="24" :ms="6" :lg="6">
          <el-form-item label="销售订单号">
            <el-input v-model="screenForm.id" disabled placeholder="销售订单号" size="mini" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :ms="6" :lg="6">
          <el-form-item label="商家编号">
            <el-input v-model="screenForm.customerNumber" disabled placeholder="商家编号" size="mini" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :ms="6" :lg="6">
          <el-form-item label="商家名称">
            <el-input v-model="screenForm.customerName" disabled placeholder="商家名称" size="mini" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :ms="6" :lg="6">
          <el-form-item label="配送日期" prop="pickTime">
            <el-date-picker
              v-model="screenForm.pickTime"
              style="width: 100%"
              type="date"
              size="mini"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-col>
        <!--        <el-col :xs="24" :ms="6" :lg="6">-->
        <!--          <el-form-item label="发货仓库编号" prop="code">-->
        <!--            <el-input v-model="screenForm.code" placeholder="发货仓库编号" size="mini" />-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :xs="24" :ms="6" :lg="6">
          <el-form-item label="发货仓库名称" prop="stockType">
            <el-select v-model="screenForm.stockType" placeholder="请选择" clearable @change="handleStokType">
              <el-option
                label="嘉贤前置仓"
                :value="1"
              />
              <el-option
                label="商家商家仓"
                :value="2"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :ms="6" :lg="6">
          <el-form-item label="用户名称" prop="userName">
            <el-input v-model="screenForm.userName" placeholder="用户名称" size="mini" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :ms="6" :lg="6">
          <el-form-item label="用户电话" prop="phone">
            <el-input v-model="screenForm.phone" placeholder="用户电话" size="mini" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :ms="18" :lg="18" style="display: flex;" class="custom">
          <el-form-item label="省" prop="provinceId" class="item">
            <el-select
              v-model="screenForm.provinceId"
              placeholder="请选择省"
              style="width: 100%"
              @change="changeProvince"
            >
              <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="市" prop="cityId" label-width="50px">
            <el-select v-model="screenForm.cityId" placeholder="请选择市" style="width: 100%" @change="changeCity">
              <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="区" prop="areaId" label-width="50px">
            <el-select v-model="screenForm.areaId" placeholder="请选择区" style="width: 100%" @change="changeArea">
              <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="街道" prop="streetId" label-width="50px">
            <el-select v-model="screenForm.streetId" placeholder="请选择街道" style="width: 100%" @change="changeStreet">
              <el-option v-for="item in streetList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>

          </el-form-item>
        </el-col>
        <el-col :xs="24" :ms="6" :lg="6">
          <el-form-item label="送货地址" prop="receAddress">
            <el-input v-model="screenForm.receAddress" placeholder="送货地址" size="mini" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :ms="24" :lg="24">
          <el-form-item label="备注" prop="notes">
            <el-input v-model="screenForm.notes" placeholder="备注" size="mini" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getRegion } from '@/api/sales'

export default {
  name: 'SalesHeader',
  data() {
    return {
      screenForm: {
        id: '',
        city: '',
        area: '',
        province: '',
        street: '',
        cityId: '',
        areaId: '',
        provinceId: '',
        streetId: '',
        customerNumber: '',
        customerName: '',
        pickTime: '',
        stockType: '',
        userName: '',
        phone: '',
        receAddress: '',
        notes: ''
      },
      rules: {
        // id: [
        //   { required: true, message: '请输入销售订单号', trigger: 'change' },
        //
        // ],
        cityId: [{
          required: true, message: '请输入市', trigger: 'change'
        }],
        areaId: [{
          required: true, message: '请输入区', trigger: 'change'
        }],
        provinceId: [{
          required: true, message: '请输入省', trigger: 'change'
        }],
        streetId: [{
          required: true, message: '请输入街道', trigger: 'change'
        }],
        // customerNumber: [          { required: true, message: '请输入商家编号', trigger: 'change' },
        // ],
        // customerName: [{
        //   required: true, message: '请输入商家名称', trigger: 'change'
        // }],
        pickTime: [{
          required: true, message: '请输入配送日期', trigger: 'change'
        }],
        // stockType: [{
        //   required: true, message: '请输入发货仓库名称', trigger: 'change'
        // }],
        userName: [{
          required: true, message: '请输入用户名称', trigger: 'change'
        }],
        phone: [{
          required: true, message: '请输入用户电话', trigger: 'change'
        },
        { min: 11, max: 11, message: '请输入11位手机号', trigger: 'change' }
        ],
        receAddress: [{
          required: true, message: '请输入送货地址', trigger: 'change'
        }]
      },
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: [],
      areaValue: ''
    }
  },
  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
        }
      })
    },
    handleArea(value, type) {
      this.screenForm[type] = this[type + 'List'].find(k => k.id === value).name
    },
    // 切换省
    changeProvince(value) {
      this.screenForm.cityId = ''
      this.screenForm.areaId = ''
      this.screenForm.streetId = ''
      this.cityList = []
      this.areaList = []
      this.streetList = []
      this.getRegion(1, value)
      this.handleArea(value, 'province')
    },

    // 切换市
    changeCity(value) {
      this.screenForm.areaId = ''
      this.screenForm.streetId = ''
      this.areaList = []
      this.streetList = []
      this.getRegion(2, value)
      this.handleArea(value, 'city')
    },

    // 切换区
    changeArea(value) {
      this.areaValue = value
      this.screenForm.streetId = ''
      this.streetList = []
      this.getRegion(3, value)
      this.handleArea(value, 'area')
    },

    // 切换街道
    changeStreet(value) {
      this.getRegion(3, this.areaValue)
      this.handleArea(value, 'street')
    },

    // 初始化省市区街道
    initRegion(level, item, id = 0) {
      const { province, city, area, street } = item
      let nextId = null
      getRegion({ pid: id }).then(res => {
        if (level === 0) {
          this.provinceList = res.data
          nextId = this.screenForm.provinceId = this.provinceList[findElem(this.provinceList, 'name', province)].id
        } else if (level === 1) {
          this.cityList = res.data
          nextId = this.screenForm.cityId = this.cityList[findElem(this.cityList, 'name', city)].id
        } else if (level === 2) {
          this.areaList = res.data
          nextId = this.screenForm.areaId = this.areaList[findElem(this.areaList, 'name', area)].id
        } else if (level === 3) {
          this.streetList = res.data
          nextId = this.screenForm.streetId = this.streetList[findElem(this.streetList, 'name', street)].id
        }
        if (level < 3) {
          level = level + 1
          this.initRegion(level, item, nextId)
        }
      })
    },
    handleStokType(e) {
      this.$emit('setStokType', e)
    }
  }
}
</script>

<style scoped lang="scss">
.sales {
  margin: 20px;
  padding: 20px;
  box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
}
::v-deep .el-select{
 width: 100%;
}
.custom {
  .item {
    ::v-deep .el-form-item__label:first-child {
      text-align: left;
    }
  }

  ::v-deep .el-form-item__label {
    text-align: center;
  }
}
</style>