feats

src/components/Picker/index.vue

 </template>
 
 <script>
-import { Popup, Picker, Loading } from "vant"
-import { computed, ref, toRaw, unref } from "vue"
-import { isEmpty } from "@/utils"
+import { Popup, Picker, Loading } from 'vant'
+import { computed, ref, toRaw, unref } from 'vue'
+import { isEmpty } from '@/utils'
 
 export default {
   components: {
     placeholder: String,
     modelValue: undefined,
   },
-  emits: ["update:modelValue"],
+  emits: ['update:modelValue', 'change'],
   setup(props, { emit }) {
     const showPopup = ref(false)
 
     })
 
     const onConfirm = (value, index) => {
-      const val = ((props.options || [])[index] || {}).value
-      emit("update:modelValue", val)
+      const item = (props.options || [])[index]
+      const val = (item || {}).value
+      emit('update:modelValue', val)
+      emit('change', item)
       showPopup.value = false
     }
 

src/store/models/dicts.js

-import { reactive, computed } from "vue"
-import request from "../../utils/request"
+import { reactive, computed } from 'vue'
+import request from '../../utils/request'
 
 // 户型
 const roomType = [
   {
-    text: "一室",
-    value: "1",
+    text: '一室',
+    value: '1',
   },
   {
-    text: "两室",
-    value: "2",
+    text: '两室',
+    value: '2',
   },
   {
-    text: "三室",
-    value: "3",
+    text: '三室',
+    value: '3',
   },
   {
-    text: "三室以上",
-    value: "4",
+    text: '三室以上',
+    value: '4',
   },
 ]
 
 // 实勘状态
 const rescStatus = [
   {
-    text: "已实勘",
-    value: "0",
+    text: '已实勘',
+    value: '0',
   },
   {
-    text: "待审核",
-    value: "1",
+    text: '待审核',
+    value: '1',
   },
   {
-    text: "未实勘",
-    value: "9",
+    text: '未实勘',
+    value: '9',
   },
 ]
 
 // 钥匙状态
 const keyStatus = [
   {
-    text: "有钥匙",
-    value: "0",
+    text: '有钥匙',
+    value: '0',
   },
   {
-    text: "待审核",
-    value: "1",
+    text: '待审核',
+    value: '1',
   },
   {
-    text: "无钥匙",
-    value: "9",
+    text: '无钥匙',
+    value: '9',
   },
 ]
 
 // 业主委托
 const authStatus = [
   {
-    text: "有委托",
-    value: "0",
+    text: '有委托',
+    value: '0',
   },
   {
-    text: "待审核",
-    value: "1",
+    text: '待审核',
+    value: '1',
   },
   {
-    text: "无委托",
-    value: "9",
+    text: '无委托',
+    value: '9',
   },
 ]
 
 // 电梯
 const elevator = [
   {
-    text: "有",
-    value: "0",
+    text: '有',
+    value: '0',
   },
   {
-    text: "无",
-    value: "1",
+    text: '无',
+    value: '1',
   },
 ]
 
 // 带看
 const lookTimes = [
   {
-    text: "有",
-    value: "1",
+    text: '有',
+    value: '1',
   },
   {
-    text: "无",
-    value: "0",
+    text: '无',
+    value: '0',
   },
 ]
 
 // 锁盘
 const lockRoom = [
   {
-    text: "未锁盘",
-    value: "0",
+    text: '未锁盘',
+    value: '0',
   },
   {
-    text: "锁盘已关联",
-    value: "1",
+    text: '锁盘已关联',
+    value: '1',
   },
   {
-    text: "锁盘未关联",
-    value: "2",
+    text: '锁盘未关联',
+    value: '2',
   },
 ]
 
 //租房类型
 const leaseWay = [
   {
-    text: "整租",
-    value: "0",
+    text: '整租',
+    value: '0',
   },
   {
-    text: "合租",
-    value: "1",
+    text: '合租',
+    value: '1',
   },
 ]
 
 
   const getDict = (key) => {
     request({
-      url: "/comm/dict",
+      url: '/comm/dict',
       params: { groupCode: key },
     }).then((res) => {
       dicts[key] = (res || []).map((x) => ({ text: x.name, value: x.code }))
   //
   const getBusinessCity = (areaType, pcode) => {
     if (1 === areaType) {
-      pcode = "025"
+      pcode = '025'
     }
 
     request({
-      url: "/comm/dict/business-city",
+      url: '/comm/dict/business-city',
       params: { areaType, pcode },
     }).then((res) => {
       if (1 === areaType) {
         // 区县
-        dicts["roomDistrict"] = res
+        dicts['roomDistrict'] = res
       } else {
         // 商圈
-        dicts["roomBussines"] = res
+        dicts['roomBussines'] = res
       }
     })
   }
 
   const getBuilding = ({ buildingName, pageNo = 1, pageSize = 20 }) => {
     return request({
-      url: "/comm/dict/building-list",
+      url: '/comm/dict/building-list',
       params: { buildingName, pageNo, pageSize },
     }).then((res) => {
       if (res.result && res.result.length && !buildingName && pageNo === 1) {
         // 只缓存第一页的
-        dicts["building"] = res.result
+        dicts['building'] = res.result
       }
 
       return res
   const decorationOptions = computed(() => {
     const decorationDict = dicts.decoration || []
     if (!decorationDict.length) {
-      getDict("decoration")
+      getDict('decoration')
     }
 
     return decorationDict
   const aspectOptions = computed(() => {
     const aspectDict = dicts.aspect || []
     if (!aspectDict.length) {
-      getDict("aspect")
+      getDict('aspect')
     }
 
     return aspectDict
   const sourceFromOptions = computed(() => {
     const sourceFromDict = dicts.sourceFrom || []
     if (!sourceFromDict.length) {
-      getDict("sourceFrom")
+      getDict('sourceFrom')
     }
 
     return sourceFromDict
 
   // 建筑类型
   const buildTypeOptions = computed(() => {
-    const buildTypeDict = dicts["build_type"] || []
+    const buildTypeDict = dicts['build_type'] || []
     if (!buildTypeDict.length) {
-      getDict("build_type")
+      getDict('build_type')
     }
 
     return buildTypeDict
   const natureOptions = computed(() => {
     const natureDict = dicts.nature || []
     if (!natureDict.length) {
-      getDict("nature")
+      getDict('nature')
     }
 
     return natureDict
   const purposeOptions = computed(() => {
     const purposeDict = dicts.purpose || []
     if (!purposeDict.length) {
-      getDict("purpose")
+      getDict('purpose')
     }
 
     return purposeDict
   const mortgageOptions = computed(() => {
     const mortgageDict = dicts.mortgage || []
     if (!mortgageDict.length) {
-      getDict("mortgage")
+      getDict('mortgage')
     }
 
     return mortgageDict
 
   // 税费
   const buildTimeOptions = computed(() => {
-    const buildTimeDict = dicts["build_time"] || []
+    const buildTimeDict = dicts['build_time'] || []
     if (!buildTimeDict.length) {
-      getDict("build_time")
+      getDict('build_time')
     }
 
     return buildTimeDict

src/store/models/room.js

-import { reactive, ref } from "vue"
-import request from "@/utils/request"
-import { showDanger } from "@/utils"
+import { reactive, ref } from 'vue'
+import request from '@/utils/request'
+import { showDanger } from '@/utils'
 
 export default () => {
   const loading = ref(false)
   const getList = (data) => {
     loading.value = true
     request({
-      loadingId: "room.list",
-      url: "/room/list",
+      loadingId: 'room.list',
+      url: '/room/list',
       data: {
         pageNo: 1,
         pageSize: 10,
   // 房源详情--基础信息
   const getDetail = (id) => {
     request({
-      loadingId: "room.view",
-      url: "/room/detail",
+      loadingId: 'room.view',
+      url: '/room/detail',
       params: { id },
     })
       .then((res) => {
       })
       .catch((e) => {
         console.error(e)
-        showDanger("获取详情失败")
+        showDanger('获取详情失败')
       })
   }
 
   // 角色人信息
   const getRole = (data) => {
     request({
-      loadingId: "room.role",
-      url: "/room/role",
+      loadingId: 'room.role',
+      url: '/room/role',
       params: {
         roomId: data,
       },
       })
       .catch((e) => {
         console.error(e)
-        showDanger("获取角色人失败")
+        showDanger('获取角色人失败')
       })
   }
 
   // 委托书信息
   const getAuth = (data) => {
     request({
-      loadingId: "room.auth",
-      url: "/room/auth",
+      loadingId: 'room.auth',
+      url: '/room/auth',
       params: {
         roomId: data,
       },
       })
       .catch((e) => {
         console.error(e)
-        showDanger("获取委托书失败")
+        showDanger('获取委托书失败')
       })
   }
 
   // 钥匙信息
   const getKey = (data) => {
     request({
-      loadingId: "room.key",
-      url: "/room/key",
+      loadingId: 'room.key',
+      url: '/room/key',
       params: {
         roomId: data,
       },
       })
       .catch((e) => {
         console.error(e)
-        showDanger("获取钥匙失败")
+        showDanger('获取钥匙失败')
       })
   }
 
   // 房源保护
   const updateProtection = (data) => {
     return request({
-      url: "/room/protection/update-status",
+      url: '/room/protection/update-status',
       data,
-      toast: "请稍候...",
+      toast: '请稍候...',
     }).then(() => {
       detail.roomInfo.protectionFlag = data.protectionFlag
       return
   // 业主电话
   const addOwnerTel = (params) => {
     return request({
-      url: "/room/own-tel/add",
+      url: '/room/own-tel/add',
       params,
-      toast: "请稍候...",
+      toast: '请稍候...',
     }).then(() => {
-      const ownerTel = detail.roomInfo.ownerTel || ""
+      const ownerTel = detail.roomInfo.ownerTel || ''
       detail.roomInfo.ownerTel = ownerTel
-        .split(",")
+        .split(',')
         .filter(Boolean)
         .concat(params.newOwnerTel)
-        .join(",")
+        .join(',')
       return
     })
   }
   // 获取楼栋详情
   const getBuilding = (estateId) => {
     return request({
-      url: "/room/building",
+      url: '/room/building',
       params: { estateId },
     })
   }
   // 房源下架
   const closeHouse = (data) => {
     return request({
-      url: "/room/close",
+      url: '/room/close',
       params: { estateId: data.estateId },
       data,
-      toast: "请稍候...",
+      toast: '请稍候...',
     }).then(() => {
       return
     })
   // 房源编辑
   const houseEdit = (data) => {
     return request({
-      url: "/room/save",
+      url: '/room/save',
       data,
-      toast: "请稍候...",
+      toast: '请稍候...',
     })
   }
 
   // 实勘列表
   const getRescList = (roomId) => {
     return request({
-      url: "/room/resc/list",
+      url: '/room/resc/list',
       params: { roomId },
-      loadingId: "room.resc.list",
+      loadingId: 'room.resc.list',
     })
   }
 
   // 设置封面
   const setRescCover = (rescId) => {
     return request({
-      url: "/room/resc/cover",
+      url: '/room/resc/cover',
       params: { id: rescId },
-      toast: "请稍候...",
+      toast: '请稍候...',
     })
   }
 
   // 保存
   const saveResc = (data, roomId) => {
     return request({
-      url: "/room/resc/save",
+      url: '/room/resc/save',
       headers: {
-        "Content-Type": "application/json",
+        'Content-Type': 'application/json',
       },
       params: { roomId },
       data,
-      toast: "请稍候...",
+      toast: '请稍候...',
     })
   }
 
   // 删除
   const deleteResc = ({ roomId, rescId, rescType }) => {
     return request({
-      url: "/room/resc/delete",
+      url: '/room/resc/delete',
       params: { roomId, rescId, rescType },
-      toast: "请稍候...",
+      toast: '请稍候...',
     })
   }
 
   // 查看业务房源数
   const countOwnerTel = (ownerTel) => {
     return request({
-      url: "/room/owner-tel/count",
+      url: '/room/owner-tel/count',
       params: { ownerTel },
-      toast: "请稍候...",
+      toast: '请稍候...',
+    })
+  }
+
+  // 新增房源
+  const addHouse = (params, data) => {
+    return request({
+      url: '/room/add',
+      params,
+      data,
+      toast: '请稍候...',
     })
   }
 
     saveResc,
     deleteResc,
     countOwnerTel,
+    addHouse,
   }
 }

src/utils/index.js

-import { Notify, Dialog } from "vant"
+import { Notify, Dialog } from 'vant'
 
 export function showSuccess(message) {
-  return Notify({ type: "success", message, duration: 1000 })
+  return Notify({ type: 'success', message, duration: 1000 })
 }
 
 export function showDanger(message) {
-  return Notify({ type: "danger", message })
+  return Notify({ type: 'danger', message })
 }
 
 export function showWarn(message) {
-  return Notify({ type: "warning", message })
+  return Notify({ type: 'warning', message })
 }
 
 export function alert(message, opts) {
 }
 
 export function isEmpty(o) {
-  if (o === undefined || o === null || o === "") {
+  if (o === undefined || o === null || o === '') {
     return true
   }
 

src/view/addhouse/addsecondhand/index.vue

     </div>
 
     <div>
-      <van-form @submit="onSubmit">
+      <van-form @submit.prevent="() => false">
         <van-field
           v-model="roomInfo.estateName"
           readonly
           @change="handleEstateChange"
         />
 
-        <van-field
-          v-model="roomInfo.roomBuild"
-          name="roomBuild"
-          label="栋号"
-          placeholder="请输入"
-          required
-          :rules="[{ required: true, message: '请填写栋号' }]"
-        />
-
-        <van-field
-          v-model="roomInfo.roomUnit"
-          name="roomUnit"
-          label="单元"
-          placeholder="请输入"
-          required
-          :rules="[{ required: true, message: '请填写单元' }]"
-        />
-
-        <van-field
-          v-model="roomInfo.roomFloor"
-          name="roomFloor"
-          label="楼层"
-          placeholder="请输入"
-          required
-          :rules="[{ required: true, message: '请填写楼层' }]"
-        >
-          <template #input>
-            <Floor v-model="roomInfo.roomFloor" />
-          </template>
-        </van-field>
-
-        <van-field
-          v-model="roomInfo.roomNum"
-          name="roomNum"
-          label="房号"
-          placeholder="请输入"
-          required
-          :rules="[{ required: true, message: '请填写房号' }]"
-        />
+        <template v-if="isLock">
+          <van-field
+            v-model="roomInfo.roomBuild"
+            name="roomBuild"
+            label="栋号"
+            required
+            :rules="[{ required: true, message: '请选择栋号' }]"
+          >
+            <template #input>
+              <Picker
+                :options="lockBuilding.dong"
+                v-model="roomInfo.roomBuild"
+                placeholder="请选择"
+              />
+            </template>
+          </van-field>
+
+          <van-field
+            v-model="roomInfo.roomUnit"
+            name="roomUnit"
+            label="单元"
+            required
+            :rules="[{ required: true, message: '请选择单元' }]"
+          >
+            <template #input>
+              <Picker
+                :options="lockBuilding.unit"
+                v-model="roomInfo.roomUnit"
+                placeholder="请选择"
+              />
+            </template>
+          </van-field>
+
+          <van-field
+            v-model="roomInfo.roomFloor"
+            name="roomFloor"
+            label="楼层"
+            required
+            :rules="[{ required: true, message: '请选择楼层' }]"
+          >
+            <template #input>
+              <Picker
+                :options="lockBuilding.floor"
+                v-model="roomInfo.roomFloor"
+                placeholder="请选择"
+              />
+            </template>
+          </van-field>
+
+          <van-field
+            v-model="roomInfo.roomNum"
+            name="roomNum"
+            label="房号"
+            required
+            :rules="[{ required: true, message: '请选择房号' }]"
+          >
+            <template #input>
+              <Picker
+                :options="lockBuilding.room"
+                v-model="roomInfo.roomNum"
+                placeholder="请选择"
+                @change="handleRoomNumChange"
+              />
+            </template>
+          </van-field>
+        </template>
+
+        <template v-else>
+          <van-field
+            v-model="roomInfo.roomBuild"
+            name="roomBuild"
+            label="栋号"
+            placeholder="请输入"
+            required
+            :rules="[{ required: true, message: '请填写栋号' }]"
+          />
+
+          <van-field
+            v-model="roomInfo.roomUnit"
+            name="roomUnit"
+            label="单元"
+            placeholder="请输入"
+            required
+            :rules="[{ required: true, message: '请填写单元' }]"
+          />
+
+          <van-field
+            v-model="roomInfo.roomFloor"
+            name="roomFloor"
+            label="楼层"
+            placeholder="请输入"
+            required
+            :rules="[{ required: true, message: '请填写楼层' }]"
+          >
+            <template #input>
+              <Floor v-model="roomInfo.roomFloor" />
+            </template>
+          </van-field>
+
+          <van-field
+            v-model="roomInfo.roomNum"
+            name="roomNum"
+            label="房号"
+            placeholder="请输入"
+            required
+            :rules="[{ required: true, message: '请填写房号' }]"
+          />
+        </template>
 
         <van-field
           v-model="roomInfo.title"
         <van-field v-model="tel3" label="业主电话3" placeholder="请输入" />
 
         <div style="margin: 1em">
-          <van-button block type="warning" native-type="submit">
-            提交
-          </van-button>
+          <van-button block type="warning" @click="onSubmit"> 提交 </van-button>
         </div>
       </van-form>
     </div>
 import Floor from './components/Floor'
 import RoomType from './components/RoomType'
 import Proportion from './components/Proportion'
-import { showDanger, confirm } from '@/utils'
+import { showDanger, confirm, showSuccess } from '@/utils'
+import request from '@/utils/request'
 
 export default {
   name: 'addsecondhand',
     RoomType,
     Proportion,
   },
-  data() {
-    return {}
-  },
 
   setup() {
     const router = useRouter()
     const showBuildingPicker = ref(false)
     const { dicts, namedDicts } = useModel('dicts')
-    const { countOwnerTel } = useModel('room')
+    const { countOwnerTel, addHouse } = useModel('room')
+
+    const lockBuilding = reactive({
+      // 栋
+      dong: [],
+      // 单元
+      unit: [],
+      // 层
+      floor: [],
+      // 房
+      room: [],
+    })
 
     // 房源信息
     const roomInfo = reactive({
     const tel2 = ref('')
     const tel3 = ref('')
     const building = ref()
+    const isLock = ref()
+    const localRoomNo = ref()
 
     watch([tel1, tel2, tel3], (nw) => {
-      roomInfo.roomInfo = nw.join(',')
+      roomInfo.ownerTel = nw.join(',')
     })
 
-    const onSubmit = (values) => {
-      // 锁盘房号
-      let localRoomNo
-      const lockRoomType = 0
-      const isLock = building.value.isLock
-      if (isLock) {
-        localRoomNo = roomInfo.roomNum
+    // 锁盘的情况下监控楼栋的选择
+    // 生成单元字典
+    watch(
+      () => roomInfo.roomBuild,
+      (nw) => {
+        if (isLock.value) {
+          request({
+            url: '/lock/unit',
+            params: { buildingId: roomInfo.estateId, dong: nw },
+          }).then((res) => {
+            lockBuilding.unit = (res || []).map((x) => ({
+              text: x.name,
+              value: x.code,
+            }))
+          })
+        }
+      }
+    )
+
+    // 锁盘的情况下监控单元的选择
+    // 生成楼层字典
+    watch(
+      () => roomInfo.roomUnit,
+      (nw) => {
+        if (isLock.value) {
+          request({
+            url: '/lock/floor',
+            params: {
+              buildingId: roomInfo.estateId,
+              dong: roomInfo.roomBuild,
+              unit: nw,
+            },
+          }).then((res) => {
+            lockBuilding.floor = (res || []).map((x) => ({
+              text: x.name,
+              value: x.code,
+            }))
+          })
+        }
+      }
+    )
+
+    // 锁盘的情况下监控楼层的选择
+    // 生成楼栋-房号字典
+    watch(
+      () => roomInfo.roomFloor,
+      (nw) => {
+        if (isLock.value) {
+          request({
+            url: '/lock/room',
+            params: {
+              buildingId: roomInfo.estateId,
+              dong: roomInfo.roomBuild,
+              unit: roomInfo.roomUnit,
+              floor: nw,
+            },
+          }).then((res) => {
+            lockBuilding.room = (res || []).map((x) => ({
+              text: x.name,
+              value: x.code,
+            }))
+          })
+        }
+      }
+    )
+
+    const onSubmit = () => {
+      // 生成保存函数
+      const submit = () => {
+        addHouse(
+          { localRoomNo: localRoomNo.value || '', lockRoomType: 0 },
+          roomInfo
+        )
+          .then(() => {
+            showSuccess('添加成功')
+            router.go(-1)
+          })
+          .catch((e) => {
+            showDanger(e.message)
+          })
       }
 
       // 校验手机号
             message.push(`${tels[2]} 的业主已经有 ${r3} 套房源`)
           }
 
-          message.push('是否继续? (选否则返回上一页)')
+          if (message.length > 0) {
+            message.push('是否继续? (选否则返回上一页)')
 
-          confirm(message.join(','))
-            .then(() => {})
-            .catch(() => {
-              router.go(-1)
-            })
+            confirm(message.join(','))
+              .then(() => submit())
+              .catch(() => {
+                router.go(-1)
+              })
+          } else {
+            submit()
+          }
         })
         .catch((e) => {
           console.error(e)
           showDanger(`校验用户手机失败: ${e.message}`)
         })
-
-      console.log('submit', values)
     }
 
     const handleEstateChange = ({ id, item }) => {
       roomInfo.estateId = id
       roomInfo.estateName = item.buildingName
       building.value = item
+      isLock.value = building.value.isLock - 0
+
+      // 锁盘的情况下
+      // 生成楼栋字典
+      if (isLock.value) {
+        request({
+          url: '/lock/dong',
+          params: { buildingId: id },
+        }).then((res) => {
+          lockBuilding.dong = (res || []).map((x) => ({
+            text: x.name,
+            value: x.code,
+          }))
+        })
+      } else {
+        localRoomNo.value = undefined
+      }
+    }
+
+    const handleRoomNumChange = (item) => {
+      localRoomNo.value = item.text
     }
 
     return {
       tel2,
       tel3,
       onSubmit,
+      isLock,
+      lockBuilding,
       handleEstateChange,
+      handleRoomNumChange,
     }
   },
 }