feats

src/store/models/room.js

@@ -157,8 +157,6 @@ export default () => {
       url: '/room/save',
       data,
       toast: '请稍候...',
-    }).then(() => {
-      return
     })
   }
 
@@ -171,6 +169,15 @@ export default () => {
     })
   }
 
+  // 设置封面
+  const setRescCover = rescId => {
+    return request({
+      url: '/room/resc/cover',
+      params: { id: rescId },
+      toast: '请稍候...',
+    })
+  }
+
 
   return {
     list,
@@ -191,5 +198,6 @@ export default () => {
     closeHouse,
     houseEdit,
     getRescList,
+    setRescCover,
   }
 }

src/utils/index.js

@@ -1,6 +1,10 @@
 
 import { Notify, Dialog } from 'vant'
 
+export function showSuccess(message) {
+  return Notify({ type: 'success', message, duration: 1000 })
+}
+
 export function showDanger(message) {
   return Notify({ type: 'danger', message })
 }

src/utils/request/index.js

@@ -77,7 +77,7 @@ const handleError = type => error => {
   if (error.response) {
     console.error(`[${type}]:`)
     console.error(error.response)
-    showDanger(`错误的请求 - [${error.status}]`)
+    showDanger(`错误的请求 - [${error.status || error.message}]`)
   } else {
     const errorMessage = error.message || error.msg || error
     console.error(`[${type}] ${errorMessage}`)

src/utils/uploadImage.js

@@ -0,0 +1,24 @@
+import { showDanger } from './index'
+import request from './request'
+
+export default (file, imgType) => {
+  const formData = new FormData()
+  formData.append('resourceImg', file)
+  formData.append('imgType', imgType)
+
+  return request({
+    url: '/upload-img',
+    data: formData,
+    toast: '请稍候...'
+  }).then(res => {
+    if (res.result) {
+      return res.filepath
+    } else {
+      showDanger(res.errMessage)
+    }
+  })
+  .catch(e => {
+    console.error(e)
+    showDanger(e.message)
+  })
+}

src/view/resc/components/Items.vue

@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <van-uploader
+      v-model="fileList"
+      :max-count="multiple ? 99 : 1"
+      :disabled="!canUpload"
+      :after-read="handleUpload"
+      :before-delete="handleDelete"
+    >
+      <template #preview-cover="item" >
+        <div class="resc-preview-hide" v-if="notAllowed">
+          <div style="width: 100%">
+            <span>上传人</span>:<br />
+            <span>{{item.raw.createName}}</span>
+          </div>
+        </div>
+        <div v-else-if="canSetCover">
+          <div class="resc-preview-tag" v-if="item.raw.imgTags === '1'">
+            <van-tag type="warning">主</van-tag>
+          </div>
+          <div v-else class="resc-preview-btn">
+            <van-button size="mini" type="warning" block @click.stop="handleCoverClick(item.raw)">设为封面</van-button>
+        </div>
+        </div>
+      </template>
+    </van-uploader>
+  </div>
+</template>
+
+<script>
+import { computed, onMounted } from 'vue'
+import { Uploader, Button, Tag } from 'vant'
+import { useModel } from '@zjxpcyc/vue-tiny-store'
+
+export default {
+  components: {
+    [Button.name]: Button,
+    [Tag.name]: Tag,
+    [Uploader.name]: Uploader,
+  },
+  
+  props: {
+    rescType: String,
+    limitFlag: String,
+    roomInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    rescList: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+
+  emits: ['cover', 'upload', 'delete'],
+
+  setup(props, { emit }) {
+    const { permissions, getPermission } = useModel('shiro')
+
+    const multiple = computed(() => {
+      return props.rescType - 0 > 1
+    })
+
+    const canSetCover = computed(() => {
+      return ['2', '3', '4'].includes(props.rescType)
+    })
+
+    // 看不到图
+    const notAllowed = computed(() => {
+      return props.rescType === '0' && !permissions['room:info:viewNum'] && !permissions['room:info:delResc']
+    })
+
+    // 是否允许删除图片
+    const canDelDesc = resc => {
+      const origin = resc.status === '0' && props.roomInfo?.status !== '7' && permissions['room:info:viewNum'] && permissions['room:info:delResc']
+      const nwd = !resc.id
+      return nwd || origin
+    }
+
+    // 是否允许上传图片
+    const canUpload = computed(() => {
+      const inProtected = props.limitFlag !== 'rescLimit' && props.roomInfo?.rescStatus === '9'
+      const validating = props.roomInfo?.rescStatus === '1'
+
+      return !inProtected && !validating
+    })
+
+    // 已上传列表
+    const fileList = computed({
+      get: () => {
+        return props.rescList.map((resc) => {
+          return {
+            url: notAllowed.value ? undefined : resc.url,
+            deletable: canDelDesc(resc),
+            raw: resc
+          }
+        })
+      },
+      set: val => {
+        console.log(val)
+      }
+    })
+
+    // 上传图片
+    const handleUpload = file => {
+      if (file && file.file) {
+        emit('upload', {file: file.file, type: props.rescType})
+      }
+    }
+
+    // 删除图片
+    const handleDelete = (file, detail) => {
+      emit('delete', {resc: file.raw, index: detail.index, rescType: props.rescType})
+    }
+
+    // 设为封面
+    const handleCoverClick = item => {
+      emit('cover', item)
+    }
+
+    onMounted(() => {
+      if (typeof permissions['room:info:viewNum'] !== 'boolean') {
+        getPermission('room:info:viewNum')
+      }
+
+      if (typeof permissions['room:info:delResc'] !== 'boolean') {
+        getPermission('room:info:delResc')
+      }
+    })
+    
+    return {
+      notAllowed,
+      multiple,
+      canSetCover,
+      fileList,
+      canUpload,
+      handleUpload,
+      handleDelete,
+      handleCoverClick,
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.resc-preview-hide {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  left: 0;
+  bottom: 0;
+  z-index: 100;
+  text-align: center;
+  font-size: .8em;
+  display: flex;
+  justify-items: center;
+  align-items: center;
+  line-height: 1.6em;
+}
+
+.resc-preview-btn {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  z-index: 100;
+}
+
+.resc-preview-tag {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+</style>

src/view/resc/index.vue

@@ -1,70 +1,99 @@
 <template>
   <x-loading x-id="room.resc.list">
-    <div class="resc">
-      <div class="mgtp" v-if="initData.limitFlag === 'rescLimit' && initData.rescStatus === '9'">
-        <p>房源录入后4小时内仅允许房源录入人上传图片，目前尚无权限上传实勘图</p>
-      </div>
-      <div class="mgtp" v-if="initData.rescStatus === '1'">
-        <p>当前实勘图正在审核中</p>
-      </div>
-      <div class="mgtp" v-if="initData.rescStatus === '0'">
-        <x-field label="实勘人">{{initData.rescUser}}</x-field>
-        <x-field label="达成时间">{{initData.rescTime}}</x-field>
-      </div>
-
-      <g-section title="门牌">
-        <van-uploader
-          v-model="houseNumberImg"
-          max-count="1"
-          :after-read="afterRead"
-        />
-      </g-section>
+    <div class="resc-mgtp" v-if="initData.limitFlag === 'rescLimit' && detail.roomInfo?.rescStatus === '9'">
+      <p>房源录入后4小时内仅允许房源录入人上传图片，目前尚无权限上传实勘图</p>
+    </div>
+    <div class="resc-mgtp" v-if="detail.roomInfo?.rescStatus === '1'">
+      <p>当前实勘图正在审核中</p>
+    </div>
+    <div class="resc-mgtp" v-if="detail.roomInfo?.rescStatus === '0'">
+      <x-field label="实勘人">{{initData.rescUser}}</x-field>
+      <x-field label="达成时间">{{initData.rescTime}}</x-field>
+    </div>
 
-      <g-section title="户型">
-        <van-uploader
-          v-model="houseNumberImg"
-          max-count="1"
-          :after-read="afterRead"
-        />
-      </g-section>
+    <div class="resc">
+      <van-row>
+        <van-col span="12">
+          <g-section title="门牌">
+            <RescItems
+              :room-info="detail.roomInfo"
+              :resc-list="initData.rescList?.[0]"
+              resc-type="0"
+              @upload="handleUpload"
+              @delete="handleDelete"
+            />
+          </g-section>
+        </van-col>
+        <van-col span="12">
+          <g-section title="户型">
+            <RescItems
+              :room-info="detail.roomInfo"
+              :resc-list="initData.rescList?.[1]"
+              resc-type="1"
+              @upload="handleUpload"
+              @delete="handleDelete"
+            />
+           </g-section>
+        </van-col>
+      </van-row>
 
       <g-section title="客厅">
-        <van-uploader
-          v-model="houseNumberImg"
-          :after-read="afterRead"
+        <RescItems
+          :room-info="detail.roomInfo"
+          :resc-list="initData.rescList?.[2]"
+          resc-type="2"
+          @cover="handleCover"
+          @upload="handleUpload"
+          @delete="handleDelete"
         />
       </g-section>
 
       <g-section title="卧室">
-        <van-uploader
-          v-model="houseNumberImg"
-          :after-read="afterRead"
+        <RescItems
+          :room-info="detail.roomInfo"
+          :resc-list="initData.rescList?.[3]"
+          resc-type="3"
+          @cover="handleCover"
+          @upload="handleUpload"
+          @delete="handleDelete"
         />
       </g-section>
 
       <g-section title="厨房">
-        <van-uploader
-          v-model="houseNumberImg"
-          :after-read="afterRead"
+        <RescItems
+          :room-info="detail.roomInfo"
+          :resc-list="initData.rescList?.[4]"
+          resc-type="4"
+          @cover="handleCover"
+          @upload="handleUpload"
+          @delete="handleDelete"
         />
       </g-section>
 
       <g-section title="卫生间">
-        <van-uploader
-          v-model="houseNumberImg"
-          :after-read="afterRead"
+        <RescItems
+          :room-info="detail.roomInfo"
+          :resc-list="initData.rescList?.[5]"
+          resc-type="5"
+          @cover="handleCover"
+          @upload="handleUpload"
+          @delete="handleDelete"
         />
       </g-section>
 
       <g-section title="其他">
-        <van-uploader
-          v-model="houseNumberImg"
-          :after-read="afterRead"
+        <RescItems
+          :room-info="detail.roomInfo"
+          :resc-list="initData.rescList?.[6]"
+          resc-type="6"
+          @cover="handleCover"
+          @upload="handleUpload"
+          @delete="handleDelete"
         />
       </g-section>
 
       <div style="margin-top: 2em">
-        <van-button block type="warning">
+        <van-button block type="warning" v-shiro="'room:info:addResc'">
           保存审核并提交
         </van-button>
       </div>
@@ -73,50 +102,110 @@
 </template>
 
 <script>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { useRoute } from 'vue-router'
 import { useModel } from '@zjxpcyc/vue-tiny-store'
 //
 import {
+  Row,
+  Col,
   Uploader,
   Button,
 } from "vant"
-import { showDanger } from '@/utils';
+import RescItems from './components/Items'
+import { showDanger, showSuccess } from '@/utils'
+import uploadImage from '@/utils/uploadImage'
 
 export default {
   components: {
+    [Row.name]: Row,
+    [Col.name]: Col,
     [Uploader.name]: Uploader,
     [Button.name]: Button,
+    RescItems,
   },
 
   setup() {
     const initData = ref({})
     const route = useRoute()
-
-    const { getRescList } = useModel('room')
-
-    getRescList(route.query.roomId).then(res => {
-      initData.value = res
-    }).catch(e => {
-      showDanger(e.message)
+    const willSave = ref([])
+
+    const { detail, getRescList, getDetail, setRescCover } = useModel('room')
+
+    const roomId = route.query.roomId - 0
+
+    // 设置封面
+    const handleCover = resc => {
+      setRescCover(resc.id).then(() => {
+        (initData.value.rescList[resc.imgType] || []).forEach(it => {
+          if (it.id === resc.id) {
+            it.imgTags = '1'
+          } else {
+            it.imgTags = '0'
+          }
+        })
+
+        showSuccess('设置成功')
+      })
+    }
+
+    // 上传图片
+    const handleUpload = ({file, type}) => {
+      const sort = (initData.value.rescList[type] || []).length + willSave.value.filter(x => x.imgType === type).length
+
+      uploadImage(file, '1').then(url => {
+        const img = {
+          roomId,
+          url,
+          imgType: type,
+          sort
+        }
+
+        willSave.value.push(img)
+        initData.value = {
+          ...initData.value,
+          rescList: {
+            ...initData.value.rescList || {},
+            [type]: (initData.value.rescList[type] || []).concat(img)
+          }
+        }
+      })
+    }
+
+    // 删除图片
+    const handleDelete = ({resc, index, rescType}) => {
+      // 尚未保存
+      if (!resc.id) {
+        const list = initData.value.rescList[rescType] || []        
+        list.splice(index, 1)
+
+        initData.value = {
+          ...initData.value,
+          rescList: {
+            ...initData.value.rescList || {},
+            [rescType]: list
+          }
+        }
+      } else {
+        // 
+      }
+    }
+    
+    onMounted(() => {
+      getDetail(roomId)
+      getRescList(roomId).then(res => {
+        initData.value = res
+      }).catch(e => {
+        showDanger(e.message)
+      })
     })
 
-    const fileList = ref([
-      { url: "https://img.yzcdn.cn/vant/leaf.jpg" },
-      // Uploader 根据文件后缀来判断是否为图片文件
-      // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
-      { url: "https://cloud-image", isImage: true },
-    ]);
-
-    const afterRead = (file) => {
-      // 此时可以自行将文件上传至服务器
-      console.log(file);
-    };
-
     return {
       initData,
-      fileList,
-      afterRead,
+      detail,
+      handleCover,
+      handleUpload,
+      handleDelete,
     };
   },
 };
@@ -125,11 +214,11 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="less" scoped>
 .resc {
-  background: #fff;
   padding: 1em;
+}
 
-  .mgtp {
-    margin-top: 1em;
-  }
+.resc-mgtp {
+  margin-top: 1em;
 }
+
 </style>