feats

src/components/EditableTag.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
     <el-tag
-      :key="item[label]"
-      v-for="item in value"
+      v-for="item in values"
+      :key="item[labelName]"
       closable
       :disable-transitions="false"
       @close="() => handleClose(item)">
-      {{item[label]}}
+      {{item[labelName]}}
     </el-tag>
     <el-input
       class="input-new-tag"
@@ -28,24 +28,63 @@
     props: [
       'value',
       'label',
+      'soureType', // String, StringArray, ObjectArray, 默认 String
     ],
     data() {
       return {
         inputVisible: false,
-        inputValue: ''
+        inputValue: '',
+        values: [],
+        labelName: 'tag',
       };
     },
+    watch: {
+      'label': {
+        handler (newVal) {
+          if (newVal) {
+            this.labelName = newVal
+          }
+        },
+        immediate: true,
+      },
+      'value': {
+        handler (newVal) {
+          // 支持 string, [ string ], [ object ] 三种形式
+          // 如果是 string 或者 [string] 形式, 则会被转换成 [ { xTagInx, label } ] 格式的数组
+          if (this.soureType === 'ObjectArray') {
+            this.values = newVal || []
+          } else if (this.soureType === 'StringArray') {
+            this.values = (newVal || []).map((x, i) => ({ xTagInx: i, [`${this.labelName}`]: x }))
+          } else {
+            this.values = (newVal || '').split(',').filter(x => x).map((x, i) => ({ xTagInx: i, [`${this.labelName}`]: x }))
+          }
+        },
+        immediate: true,
+      },
+    },
+    created () {
+    },
     methods: {
       handleClose(item) {
-        this.$confirm(`确认删除 ${item[this.label]}?`, '提示', {
+        const target = item[this.labelName]
+
+        this.$confirm(`确认删除 ${target}?`, '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
-          this.$emit('delete', item)
+          if (this.soureType === 'ObjectArray') {
+            this.$emit('delete', item)
+            this.$emit('input', this.values.filter(x => x[this.labelName] != target))
+          } else if (this.soureType === 'StringArray') {
+            this.$emit('delete', target)
+            this.$emit('input', this.values.filter(x => x[this.labelName] != target).map(x => x[this.labelName]))
+          } else {
+            this.$emit('delete', target)
+            this.$emit('input', this.values.filter(x => x[this.labelName] != target).map(x => x[this.labelName]).join(','))
+          }
         }).catch(() => {})
       },
-
       showInput() {
         this.inputVisible = true;
         this.$nextTick(() => {
@@ -54,9 +93,20 @@
       },
 
       handleInputConfirm() {
-        let inputValue = this.inputValue
+        const inputValue = this.inputValue
         if (inputValue) {
-          this.$emit('insert', inputValue)
+          // 输出结果与输入类型一致
+          if (this.soureType === 'ObjectArray') {
+            const newVal = { [`${this.labelName}`]: inputValue }
+            this.$emit('insert', newVal)
+            this.$emit('input', (this.value || []).concat(newVal))
+          } else if (this.soureType === 'StringArray') {
+            this.$emit('insert', inputValue)
+            this.$emit('input', (this.value || []).concat(inputValue))
+          } else {
+            this.$emit('insert', inputValue)
+            this.$emit('input', (this.value || '').split(',').filter(x => x).concat(inputValue).join(','))
+          }
         }
         this.inputVisible = false
         this.inputValue = ''

src/components/RichEditor.vue

@@ -19,14 +19,17 @@ export default {
     }
   },
   watch: {
-    value (newVal) {
-      const newTxt = this.getHtmlTxt(newVal)
-      const oriTxt = this.getHtmlTxt(this.html)
+    'value': {
+      handler (newVal) {
+        const newTxt = this.getHtmlTxt(newVal)
+        const oriTxt = this.getHtmlTxt(this.html)
 
-      if (newTxt != oriTxt) {
-        this.updateContent(newVal)
-        this.initedContent = true
-      }
+        if (newTxt != oriTxt) {
+          this.updateContent(newVal)
+          this.initedContent = true
+        }
+      },
+      immediate: true,
     }
   },
   mounted () {
@@ -43,6 +46,12 @@ export default {
         editor.customConfig = this.setting
       }
 
+      // 重定义 index
+      editor.customConfig.zIndex = 100
+
+      // 重定义 height
+      // 见 style
+
       // 重新定义图片上传
       editor.customConfig.customUploadImg = this.uploadImg
 
@@ -54,7 +63,7 @@ export default {
       editor.create()
 
       if (this.html) {
-        editor.txt.html(html)
+        editor.txt.html(this.html)
       }
     },
     uploadImg (files, insert) {
@@ -75,3 +84,8 @@ export default {
 }
 </script>
 
+<style>
+.w-e-text-container {
+  height: calc(100% - 52px) !important;
+}
+</style>

src/views/building/edit.vue

@@ -100,9 +100,6 @@
             <el-radio :label="0">否</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="项目备注">
-          <rich-editor v-model="building.remark" style="height: 400px" />
-        </el-form-item>
         <el-form-item label="楼盘区域">
           <el-input v-model="building.buildingArea"></el-input>
         </el-form-item>
@@ -124,6 +121,73 @@
             </div>
           </div>  
         </el-form-item>
+        <el-form-item label="周边交通">
+          <editable-tag v-model="building.buildingTransport" />
+        </el-form-item>
+        <el-form-item label="周边商业">
+          <editable-tag v-model="building.buildingMall" />
+        </el-form-item>
+        <el-form-item label="周边学校">
+          <editable-tag v-model="building.buildingEdu" />
+        </el-form-item>
+        <el-form-item label="周边医院">
+          <editable-tag v-model="building.buildingHospital" />
+        </el-form-item>
+        <el-form-item label="周边银行">
+          <editable-tag v-model="building.buildingBank" />
+        </el-form-item>
+        <el-form-item label="周边餐饮">
+          <editable-tag v-model="building.buildingRestaurant" />
+        </el-form-item>
+        <el-form-item label="项目类型">
+        </el-form-item>
+        <el-form-item label="绿化率">
+          <el-input v-model="building.greeningRate"></el-input>
+        </el-form-item>
+        <el-form-item label="容积率">
+          <el-input v-model="building.volumeRate"></el-input>
+        </el-form-item>
+        <el-form-item label="车位比">
+          <el-input v-model="building.parkingRate"></el-input>
+        </el-form-item>
+        <el-form-item label="规划户数">
+          <el-input-number v-model="building.familyNum"></el-input-number>
+        </el-form-item>
+        <el-form-item label="物业公司">
+          <el-input v-model="building.serviceCompany"></el-input>
+        </el-form-item>
+        <el-form-item label="物业费">
+          <el-input v-model="building.serviceFee"></el-input>
+        </el-form-item>
+        <el-form-item label="装修标准">
+          <el-input v-model="building.decoration"></el-input>
+        </el-form-item>
+        <el-form-item label="交房时间">
+          <el-date-picker
+            v-model="building.receivedDate"
+            type="date"
+            placeholder="选择日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="产权年限">
+          <el-input-number v-model="building.rightsYear"></el-input-number>
+        </el-form-item>
+        <el-form-item label="预售许可证">
+          <el-upload
+            class="avatar-uploader"
+            :action="upFileUrl"
+            :headers="uploadHeaders"
+            name='file'
+            :show-file-list="false"
+            :before-upload="beforeImgUpload"
+            :on-success="handlePreSalePermitSuccess">
+            <img v-if="building.preSalePermit" :src="building.preSalePermit" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="项目备注">
+          <rich-editor v-model="building.remark" style="height: 400px" />
+        </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="onSubmit">保存</el-button>
           <el-button @click="onCancel">取消</el-button>
@@ -221,6 +285,12 @@
           <el-form-item label="套内面积">
             <el-input v-model="aparmentInfo.insideArea"></el-input>
           </el-form-item>
+          <el-form-item label="户型总价">
+            <el-input v-model="aparmentInfo.apartmentPrice"></el-input>
+          </el-form-item>
+          <el-form-item label="户型简介">
+            <rich-editor v-model="aparmentInfo.apartmentDescription" style="height: 200px"></rich-editor>
+          </el-form-item>
           <el-form-item label="备注">
             <el-input type="textarea" v-model="aparmentInfo.remark"></el-input>
           </el-form-item>
@@ -243,6 +313,10 @@ const { mapState: mapBuildingState, mapActions: mapBuildingActions, mapMutations
 const { mapActions: mapApartmentActions } = createNamespacedHelpers('apartment')
 
 export default {
+  name: 'BuildingEdit',
+  components: {
+    EditableTag: () => import('@/components/EditableTag.vue'),
+  },
   data () {
     var _self = this
     return {
@@ -391,6 +465,10 @@ export default {
       this.building = {...this.building, poster: res.data }
       this.loading.close()
     },
+    handlePreSalePermitSuccess(res) {
+      this.building = {...this.building, preSalePermit: res.data }
+      this.loading.close()
+    },
     handleAparmentSuccess (res) {
       this.aparmentImg = [...this.aparmentImg, {
         url: res.data