页面开发总结【】

前端总结

（1）获取后台传的info
      import store from "@/store";
      store.getters.userInfo.businessId;

 (2)引入vue页面

   在需要引入housing的页面中：
        import housing from '@/views/housing/housing'

        components: {
          'housing': housing,
        },

        

    在housing页面中：
        props: {
          z: {
            type: Object,
           }
        }

 （3）路由跳转新的页面       

     需要点击按钮后跳转的页面：
       this.$router.push({
        path: "/mapAdd/index"
      });
      var f="1";
      window.localStorage.setItem("f", JSON.stringify(f));

     配置路由页面 router/views/index：
       {
            path: '/mapAdd',
            component: Layout,
            redirect: '/mapAdd/index',
            children: [{
              path: 'index',
              name: '房源信息',
              component: () =>
                import ('@/views/housing/hotelMapAdd'),
            }]
        } 

     跳转的新页面中：
        created() {
             this.getParams();
         }
          
        getParams() {
            this.form1 = JSON.parse(window.localStorage.getItem('hotel'));
         }

（4）标签
         

            标签信息：
                          :key="tag.id"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)">
              {{tag.represent}}
           
                          class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
           
            添加标签
           

           


         

 
      dynamicTags: {},
      inputVisible: false,
      inputValue: '',

      handleClose(tag) {
        delObj(tag.id).then(response => {
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success'
          })
          this.getData()
        });
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      handleInputConfirm() {
        if (this.inputValue) {
          //添加后重新获取 delObjLable
          var data = {
            businessId: this.businessId,
            represent: this.inputValue
          }
          addObj(data).then(response => {
            this.getData()
          });
        }
        this.inputVisible = false;
        this.inputValue = '';
      },

（5）头像
    {
      label: '单张图片的头像之类',
      prop: 'cardReverse',
      type: 'upload',
      loadText: '附件上传中，请稍等',
      span: 24,
      listType: 'picture-img',
      propsHttp: {
        res: 'data'
      },
      canvasOption: {
        text: 'avue',
        ratio: 0.1
      },
      slot: true,
      action: '/admin/upload/uploadImg/'+ 'IDCARD'
    }

   

    getLIst中拼接地址

（6）时间
    {
      label: '历史账单',
      prop: 'searchDate',
      search: true,
      type: "month",
      valueFormat:'yyyy-MM-dd',
      mock:{
        type:'date',
        format:'yyyy-MM-dd'
      },
      addDisplay: false,
      editDisplay: false,
      display: false,
      hide: true,
    },

    （5）修复下级角色切换上级角色页面丢失bug

    （6）前端回调
    getList(page, params,callback) {
     this.tableLoading = true
        if(callback){callback()}

        }

      调用出     
          this.getList(this.page, form,()=>{
          this.getData()
        })