t

src/api/house.js

@@ -275,4 +275,22 @@ export default {
   admestateupdateprice: params => { // 楼盘自动更新均价 开关
     return getRequestNoSort('/adm/estate/update/price', params, 'loading')
   },
+  admrenthouselist: params => { // 租房 列表接口
+    return getRequest('/adm/rent/house/list', params)
+  },
+  admrenthouseadd: params => { // 租房 添加
+    return getRequestNoSort('/adm/rent/house/add', params, 'loading')
+  },
+  admrenthouseedit: params => { // 租房 编辑
+    return getRequestNoSort('/adm/rent/house/edit', params, 'loading')
+  },
+  admrenthousedetail: params => { // 租房 详情
+    return getRequestNoSort('/adm/rent/house/detail', params, 'loading')
+  },
+  admrenthousesortedit: params => { // 租房  排序
+    return getRequestNoSort('/adm/rent/house/sort/edit', params, 'loading')
+  },
+  admrenthousedel: params => { // 租房 删除
+    return getRequestNoSort('/adm/rent/house/del', params, 'loading')
+  },
 }

src/views/room/components/popup/RentEdit.vue

@@ -0,0 +1,391 @@
+<template>
+  <div>
+    <el-dialog
+      v-loading="loading"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :visible.sync="isShow"
+      :title="curObj.id ? '编辑房源' : '新增房源'"
+      :fullscreen="false"
+      :width="estate_id ? '960px' : '360px'"
+      custom-class="xl-dialog"
+      center
+    >
+      <base-form ref="ruleForm" :class="estate_id ? 'lib-edit' : 'lib-edit scoped-le2' " :data="formData" :is-inline="false" label-width="110px" :insertSlotArr="[8]">
+        <div slot="OI8">
+          <div class="scoped-img-area">
+            <div class="sia-op" v-for="(imgsrc,index) in imagesArr" :key="index">
+              <img class="img" :src="imgsrc + '_adm0'" alt="img">
+              <span class="close" @click="imgDel(index)"></span>
+            </div>
+            <el-upload
+              class="sia-img"
+              :action="`${domainUrl}/adm/upload/cloud`"
+              :data="{logic_type: 'estate', token}"
+              name="upload"
+              :show-file-list="false"
+              :on-success="roomAreaUploadSuccess"
+              :before-upload="roomAreaUploadBefore"
+              >
+              <i class="el-icon-plus icon"/>
+            </el-upload>
+          </div>
+        </div>
+        <div slot="OI8" class="scoped-other-form">
+          <el-form-item label="点位坐标" class="scoped-item-two item">
+            纬度N<el-input v-model="cObj.latitude" disabled />
+            经度E<el-input v-model="cObj.longitude" disabled />
+            <el-button type="primary" class="map-btn" size="small" @click="openMap">点击从地图获取</el-button>
+          </el-form-item>
+        </div>
+        <div slot="footer">
+          <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
+          <el-button class="xl-form-btn t1" @click="close('confirm')">确定</el-button>
+        </div>
+      </base-form>
+    </el-dialog>
+    <handle-map :is-show="isShowMap" @close="closeMap" />
+  </div>
+</template>
+<script>
+import { arrToObj } from '@/utils'
+import handleMap from '@/components/Common/Map'
+export default {
+  components: { handleMap },
+  mixins,
+  props: {
+    isShow: Boolean,
+    curObj: Object
+  },
+  inject: ['parentData'],
+  data() {
+    const token = window.sessionStorage.getItem('fp_token')
+    let domainUrl = process.env.VUE_APP_BASE_API
+    return {
+      domainUrl,
+      token,
+      loading: false,
+      formData: [],
+      cObj: {},
+      isShowMap: false,
+      imagesArr: [],
+      roomAreaList: [],
+      estate_id: '',
+    }
+  },
+  watch: {
+    isShow: function(val) {
+      if (val) {
+        if (this.curObj.id) {
+          this.loading = true
+          this.$api.house.admoldhousedetail({id: this.curObj.id}).then(res => {
+            let curData = res || {}
+            this.imagesArr = curData.images ? curData.images.split(',') : []
+            this.cObj = curData || {}
+            this.getDef()
+            this.loading = false
+          })
+        } else {
+          this.cObj = this.curObj
+          this.imagesArr = []
+          this.getDef()
+        }
+      }
+    },
+  },
+  methods: {
+    imgDel (index) {
+      this.imagesArr.splice(index, 1)
+    },
+    roomAreaUploadSuccess(res, file) {
+      const data = res.data || {}
+      this.imagesArr.push(`${data.url}`)
+    },
+    roomAreaUploadBefore(file) {
+      const isJPGPNG = file.type === 'image/jpeg' || file.type === 'image/png'
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isJPGPNG) {
+        this.$message.error('上传图片只能是 JPG PNG 格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2M!')
+      }
+      return isJPGPNG && isLt2M
+    },
+    getDef (str) {
+      let params = {}
+      params = { ...this.cObj }
+      if (str === 'edit') {
+        params = {...this.$refs.ruleForm.baseForm, ...params}
+      }
+      if (!params.custom_tag) params.custom_tag = '洪楼房源'
+      if (params.estate_id) {
+        this.estate_id = params.estate_id
+        this.formData = [
+          { label: '所属楼盘', key: 'estate_id', rules: 1, type: 'selectRemote', changeHandle: this.estateChange,
+            remoteParams: { skey: 'estate_name', api: `house.admestatelist?estate_tag=二手`, opKey: 'estate_name', opVal: 'id' },
+            remoteOptions: [
+              { keyRO: params.estate_name, valRO: params.estate_id }
+            ]
+          },
+          { label: `面积产品户型`, label2: `快捷选择工具`, key: `HT`, type: 'select', options: this.roomAreaList, changeHandle: this.htChange,},
+          { label: '面积', key: 'area', class: 'c-3', type: 'inputFont', appendFont: '㎡', rules: [
+            { validator: (rule, value, callback) => {
+              if (Number(value) < 0 || isNaN(Number(value))) {
+                callback(new Error('请输入数字'))
+              } else {
+                callback()
+              }
+            }, trigger: 'blur' },
+          ]},
+          { label: '产品类型', key: 'product_type', class: 'c-3', type: 'select', options: this.$dictData.product_type},
+          { label: '房源户型', key: 'house_type', class: 'c-3', type: 'select', options: this.$dictData.house_type},
+          { label: '房源标题', key: 'title', rules: 1},
+          { label: '户型图', key: 'house_img', class: 'c-3', type: 'upload' },
+          { label: '房源封面', key: 'pri_image', rules: 1, class: 'c-3', type: 'cuImg',
+            options: {
+              w: 375,
+              h: 250,
+              SY: 1,
+            }
+          }, 
+          { label: '房源地址', key: 'address', class: 'c-3s' },
+          { label: '区域', key: 'area_type', class: 'c-3', type: 'select', options: this.$dictData.area_type},
+          { label: '总价', key: 'price', class: 'c-3', type: 'inputFont', appendFont: '万元', rules: [
+            { validator: (rule, value, callback) => {
+              if (Number(value) < 0 || isNaN(Number(value))) {
+                callback(new Error('请输入数字'))
+              } else {
+                callback()
+              }
+            }, trigger: 'blur' },
+          ]},
+          { label: '层高', class: 'c-3', key: 'floor_height', rules: [
+            { validator: (rule, value, callback) => {
+              if (Number(value) < 0 || isNaN(Number(value))) {
+                callback(new Error('请输入数字'))
+              } else {
+                callback()
+              }
+            }, trigger: 'blur' },
+          ] },
+          { label: '总层数', class: 'c-3', key: 'height', rules: [
+            { validator: (rule, value, callback) => {
+              if (Number(value) < 0 || isNaN(Number(value))) {
+                callback(new Error('请输入数字'))
+              } else {
+                callback()
+              }
+            }, trigger: 'blur' },
+          ] },
+          { label: '详细地址', label2: '如：1栋2单元305室', class: 'c-3', key: 'detail_address' },
+          { label: '装修状态', key: 'is_dec', class: 'c-3', type: 'select', options: this.$dictData.room_dec },
+          { label: '业主称呼', class: 'c-3', key: 'owner' },
+          { label: '业主电话', class: 'c-3', key: 'phone' },
+          { label: '自定义标签', class: 'c-3', key: 'custom_tag', rules: 1 },
+          { label: '置业经理', key: 'sale_id', rules: 1, class: 'c-3', type: 'selectRemote',
+            remoteParams: { skey: 'sale_name', api: `user.admsaleuserlist?page_size=999`, opKey: 'sale_name', opVal: 'id' },
+            remoteOptions: [
+              { keyRO: params.sale_name, valRO: params.sale_id }
+            ]
+          },
+          { label: '(对外展示)房源简介', key: 'introduce', type: 'textarea' },
+          { label: '备注', key: 'remarked', type: 'textarea' },
+        ]
+      } else {
+        this.formData = [
+          { label: '所属楼盘', key: 'estate_id', rules: 1, type: 'selectRemote', changeHandle: this.estateChange,
+            remoteParams: { skey: 'estate_name', api: `house.admestatelist?estate_tag=二手`, opKey: 'estate_name', opVal: 'id' },
+          },
+        ]
+      }
+      params.pri_image = this.IMadd(params.pri_image)
+      this.setDefaultValue(params)
+    },
+    estateChange (estate_id, op, cur) {
+      if (estate_id) {
+        this.estate_id = estate_id
+        this.$api.house.admestatehousearealist({estate_id}).then(res => {
+          const list = res.list || []
+          const htObj = arrToObj(this.$dictData.house_type)
+          const ptObj = arrToObj(this.$dictData.product_type)
+          list.map(item => {
+            item.key = `${item.area}㎡-${ptObj[item.product_type]}-${htObj[item.house_type]}`
+            item.key2 = `${htObj[item.house_type]}`
+            item.val = item.id
+          })
+          this.roomAreaList = [...list]
+          this.cObj.estate_id = estate_id
+          this.cObj.area_type = cur.area_type
+          this.cObj.address = cur.address
+          this.cObj.latitude = cur.latitude
+          this.cObj.longitude = cur.longitude
+          this.cObj.estate_name = cur.estate_name
+          this.cObj.title = `${cur.estate_name}-${arrToObj(this.$dictData.area_type)[cur.area_type]}`
+          this.cObj.product_type = ''
+          this.cObj.house_type = ''
+          this.cObj.area = ''
+          this.cObj.house_img = ''
+          this.cObj.HT = ''
+          this.getDef('edit')
+        })
+      } else {
+        this.estate_id = ''
+      }
+    },
+    htChange (val) {
+      this.roomAreaList.forEach(ra => {
+        if (val === ra.id) {
+          this.cObj.product_type = ra.product_type
+          this.cObj.house_type = ra.house_type
+          this.cObj.area = ra.area
+          this.cObj.house_img = ra.pri_image
+          this.cObj.HT = val
+          this.cObj.title = `${ra.key}(${arrToObj(this.$dictData.area_type)[this.cObj.area_type]})`
+          this.getDef('edit')
+        }
+        return
+      })
+    },
+    close (str) {
+      if (str === 'confirm') {
+        this.$refs['ruleForm'].$refs['baseForm'].validate((valid) => {
+          if (valid) {
+            const oldform = this.$refs.ruleForm.baseForm
+            const newForm = { ...oldform }
+            if (this.curObj.id) newForm.id = this.curObj.id
+            newForm.longitude = this.cObj.longitude
+            newForm.latitude = this.cObj.latitude
+            if (!newForm.longitude) return this.$msgw('请选择经度！')
+            else if (!newForm.latitude) return this.$msgw('请选择纬度！')
+            const imgUrlArr = this.imagesArr.map(urlStr => {
+              return urlStr
+            })
+            newForm.images = imgUrlArr.join(',')
+            newForm.pri_image = this.IMdel(newForm.pri_image)
+            newForm.custom_tag = newForm.custom_tag.replace(/，|、|\/|\\/g, ',')
+            let apiStr = 'admrenthouseadd'
+            if (this.curObj.id) apiStr = 'admrenthouseedit'
+            this.$api.house[apiStr](newForm).then(data => {
+              this.$msgs(newForm.id ? '编辑成功' : '新增成功')
+              this.productData = []
+              this.$emit('close', newForm)
+            })
+          }
+        })
+      } else {
+        this.$emit('close')
+        this.productData = []
+        this.setDefaultValue()
+      }
+    },
+    openMap() { // 定位
+      this.isShowMap = true
+      const pointObj = {
+        latitude: this.cObj.latitude || '',
+        longitude: this.cObj.longitude || '',
+        address: this.cObj.address || ''
+      }
+      this.$root.$emit('handleMap', pointObj)
+    },
+    closeMap(obj) {
+      if (obj) {
+        const oldform = this.$refs.ruleForm.baseForm
+        const newForm = { ...oldform, ...obj }
+        this.cObj = newForm
+        this.setDefaultValue(newForm)
+      }
+      this.isShowMap = false
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../../styles/libEdit.scss';
+.lib-edit {
+  width: 900px;
+  padding-top: 0;
+  padding-left: 0;
+  padding-bottom: 40px;
+  &.scoped-le2 {
+    width: 300px;
+  }
+  ::v-deep .el-form-item {
+    margin-bottom: 10px;
+  }
+  ::v-deep .el-date-editor.el-input {
+    width: 100%;
+  }
+}
+.scoped-other-form {
+  .scoped-item-two {
+    .el-input {
+      display: inline-block;
+      width: 140px;
+      margin: 0 10px;
+    }
+  }
+}
+.map-btn{
+  height: 36px;
+}
+::v-deep .el-drawer__header {
+  margin-bottom: 10px;
+}
+.scoped-img-area {
+  text-align: left;
+  width: 280px;
+  .sia-op {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #f2f2f2;
+    width: 80px;
+    height: 80px;
+    position: relative;
+    &:hover {
+      .img-big {
+        display: block;
+      }
+    }
+    .img {
+      width: 80px;
+      height: 80px;
+    }
+    .close {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      top: -10px;
+      right: -10px;
+      background: url(../../../../assets/icon_g_close.png) no-repeat;
+      background-size: 20px;
+      cursor: pointer;
+    }
+    .img-big {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 400px;
+      height: auto;
+      display: none;
+      box-shadow: 10px 10px 10px #ccc;
+      z-index: 99;
+    }
+  }
+  .sia-img {
+    display: inline-block;
+    vertical-align: middle;
+    width: 80px;
+    height: 80px;
+    overflow: hidden;
+    border: 1px dashed #999;
+    margin-bottom: 10px;
+    .el-icon-plus {
+      color: #999;
+      padding: 30px;
+    }
+  }
+}
+</style>

src/views/room/components/searchForm/Rent.vue

@@ -0,0 +1,51 @@
+<template>
+  <base-form slot="content" ref="ruleForm" :data="searchData">
+    <div slot="footer">
+      <el-button :loading="listLoading" icon="el-icon-search" class="xl-form-btn bgc1" @click="searchHandle">查询</el-button>
+      <!-- <el-button :loading="listLoading" icon="el-icon-document" class="xl-form-btn bgc2" @click="toExportExcel">导出{{ this.$route.meta.title }}信息</el-button> -->
+    </div>
+  </base-form>
+</template>
+<script>
+export default {
+  props: {
+    listLoading: Boolean
+  },
+  inject: ['parentData'],
+  mixins,
+  data() {
+    return {
+      searchData: []
+    }
+  },
+  mounted () {
+    this.getDef()
+  },
+  methods: {
+    subwayLineChange (val) {
+      this.getDef('change')
+    },
+    getDef (str) {
+      let params = { ...this.$refs.ruleForm.baseForm }
+      this.searchData = [
+        { label: '标题', key: 'title' },
+        { label: '所属楼盘', key: 'estate_id', type: 'selectRemote',
+          remoteParams: { skey: 'estate_name', api: `house.admestatelist?estate_tag=二手`, opKey: 'estate_name', opVal: 'id' }
+        },
+        { label: '置业经理', key: 'sale_id', type: 'selectRemote',
+          remoteParams: { skey: 'sale_name', api: `user.admsaleuserlist?page_size=999`, opKey: 'sale_name', opVal: 'id' }
+        },
+        { label: '所属区域', key: 'area_type', type: 'select', options: this.$dictData.area_type},
+        { label: '楼盘类型', key: 'product_type', type: 'select', options: this.$dictData.product_type},
+        { label: '房源户型', key: 'house_type', type: 'select', options: this.$dictData.house_type},
+      ]
+      this.setDefaultValue(params, 'searchData')
+    },
+    searchHandle() {
+      const oldform = this.$refs.ruleForm.baseForm
+      const newForm = { ...oldform }
+      this.$emit('change', newForm)
+    }
+  }
+}
+</script>

src/views/room/rent.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="app-container">
+    <search-form
+      :list-loading="listLoading"
+      @change="searchHandle"
+    />
+    <table-list
+      :list-loading="listLoading"
+      :data="tableData2"
+      :columns="listConfig"
+      :current-page="currentPage"
+      :page-size="pageSize"
+      :total-records="totalRecords"
+      @currentChange="pageHandle"
+      @sizeChange="sizeChange"
+      :isAdd="true"
+      @add="openPopup"
+      :operationsDefaultLength="5"
+    />
+    <popup-edit
+      :isShow="isDtlShow"
+      :curObj="curObj"
+      @close="closePopup"
+    />
+  </div>
+</template>
+<script>
+import { arrToObj } from '@/utils'
+import SearchForm from './components/searchForm/Rent'
+import PopupEdit from './components/popup/RentEdit'
+import baseTable from '_m/baseTable.js'
+export default {
+  name: 'Index',
+  components: {
+    SearchForm,
+    PopupEdit,
+  },
+  provide() {
+    return {
+      parentData: this
+    }
+  },
+  mixins: [baseTable],
+  data() {
+    return {
+      apiStr: 'house.admrenthouselist',
+      searchForm: null,
+      isDtlShow: false,
+      // noCreated: true,
+      curObj: {},
+    }
+  },
+  computed: {
+    tableData2() {
+      const arr = [...this.tableData]
+      arr.map(item => {
+        item.pri_image = this.IMadd(item.pri_image)
+      })
+      return arr
+    }
+  },
+  created() {},
+  mounted() {
+    this.listConfig = {
+      rows: [
+        { label: '排序', prop: 'sort', type: 'input', width: 80},
+        { label: '编号', prop: 'id' },
+        { label: '楼盘', prop: 'estate_name' },
+        { label: '浏览数', prop: 'view_count' },
+        { label: '置业经理', prop: 'sale_name' },
+        { label: '标题', prop: 'title' },
+        { label: '主图', prop: 'pri_image', type: 'img' },
+        { label: '详细地址', prop: 'detail_address', fullShow: true, minWidth: 100 },
+        { label: '总价', prop: 'price' },
+        { label: '面积㎡', prop: 'area' },
+        { label: '房源类型', prop: 'house_type', width: 100, fullShow: true, type: 'flag', flags: arrToObj(this.$dictData.house_type) },
+        { label: '所属区域', prop: 'area_type', type: 'flag', flags: arrToObj(this.$dictData.area_type) },
+        { label: '更新人', prop: 'update_by' },
+        { label: '更新时间', prop: 'update_at' },
+        { label: '创建人', prop: 'create_by' },
+        { label: '创建时间', prop: 'create_at' },
+        { label: '操作', width: 200, type: 'handle2', operations:
+          [
+            { label: '保存排序', func: this.saveHandle, btnType: 'success' },
+            { label: '编辑', func: this.openPopup, btnType: 'primary' },
+            { label: '删除', func: this.delHandle, btnType: 'danger' },
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    saveHandle (row) {
+      this.$api.house.admrenthousesortedit({
+        id: row.id,
+        sort: row.sort,
+      }).then(data => {
+        this.$msgs(`已保存！`)
+        this.fetchData()
+      })
+    },
+    delHandle(row) {
+      this.$msg(`您确定要删除该楼盘吗？`, 'confirm', () => {
+        this.$api.house.admrenthousedel({
+          id: row.id,
+          status: 2
+        }).then(data => {
+          this.$msgs(`已删除！`)
+          this.fetchData()
+        })
+      }, null, true)
+    },
+    openPopup(row) {
+      if (row && row.id) {
+        this.curObj = row
+      } else {
+        this.curObj = {}
+      }
+      this.isDtlShow = true
+    },
+    closePopup(obj) {
+      this.isDtlShow = false
+      if (obj) {
+        this.fetchData()
+      }
+    }
+  }
+}
+</script>