1.24-1.28

1.24-1.28

一、预化简

1、BeforeSimpleSetting.vue

• 1、一进入页面在created中调用initValues方法（参数为从父组件通过props传过来beforeSimples）,将参数中的enable、min、mid赋值给当前页面 this.isChecked、this.minLevel、this.maxLevel
• 2、当点击是否开启按钮、或者框中的数字发生变化时，将值发送出去

1
  created() {
    this.initValues(this.beforeSimples);
  },
    initValues(obj = {}) {
      if (obj.enable == 1) {
        this.isChecked = true;
      } else {
        this.isChecked = false;
      }

      this.minLevel = obj.min || 0;
      this.maxLevel = obj.mid || 20;
    },

 2
  //监控data中的数据变化
  watch: {
    minLevel(newVal) {
      this.emitValues();
      this.minLevel = newVal;
    },
    maxLevel(newVal) {
      this.emitValues();
      this.maxLevel = newVal;
    },
  },
   //方法集合
  methods: { 
    checkChange(value) {
      this.isChecked = value;
      let obj = {
        enable: this.isChecked ? 1 : 0,
        min: this.minLevel,
        mid: this.maxLevel,
      };
      this.$bus.$emit("beforeSimpleChange", obj);
    },
    emitValues() {
      let obj = {
        enable: this.isChecked ? 1 : 0,
        min: this.minLevel,
        mid: this.maxLevel,
      };
      this.$bus.$emit("beforeSimpleChange", obj);
    },
   }

2、ItemSetting.vue（子组件）、SettingDialog.vue（父组件）

• 1、ItemSetting.vue 主要是控制具体的每一项，当发生点击事件的时候将当前item对象发送给SettingDialog.vue；同时 SettingDialog.vue 通过props将item又重新赋值给ItemSetting.vue
• 2、SettingDialog.vue（父组件）同时还通过this.$bus.on()方法接收BeforeSimpleSetting.vue传出来的值

ItemSetting.vue（子组件）
props: {
   item: {
     type: Object,
   },
   beforeSimples: {
     type: Object,
     default: () => {},
   },
}
    handleItemClick() {
     this.$emit("item-change", this.item);
   },

SettingDialog.vue（父组件）
    <ItemSetting
      :item="item"
      @item-change="handleItemClick"
      :beforeSimples="feature_simple_level"
    ></ItemSetting>
    
   mounted() {
	//预化简设置
    this.$bus.$on("beforeSimpleChange", (params) => {
      params = params || {};
      this.feature_simple_level = params;
    });
   }

main.js
Vue.prototype.$bus = new Vue();//绑定在vue的原型链上

二、studio-页面布局

**1、页码10 20 30 50 100
2、跳转至=》共多少条
3、一开始进入页面只显示10条，切换页码大于10条显示滚动条
**

1、页码、下拉选中条数

   
            <Page
              :total="total"	//总数
              :page-size="pageSize"		//每页条数
              :current.sync="current"
              @on-change="handleChange"		//页码改变的回调，返回改变后的页码
              :show-sizer="true"		//可以切换每页显示的数量
              :page-size-opts="pageSizeOpts"		//每页条数切换的配置
              @on-page-size-change="handlePageSizeChange"		//切换每页条数时的回调，返回切换后的每页条数
              show-elevator	//显示电梯，可以快速切换到某一页
              show-total	//显示总条数
            />

pageSizeOpts: [10, 20, 50, 100],
重置=》一页设置成10个

2、表格颜色、上间距、按钮大小

  /deep/.ivu-table th {
    background-color: #f5f7fa;
    height: 50px;
    text-align: left;
  }

  /deep/.ivu-table td {
    background-color: #fff;
    height: 46px;
    text-align: left;
  }
  /deep/ .ivu-table-body {
  margin-top: 49px;
}
 button {
   width: 98px;
   height: 32px;
 }

height=279	//表格高度

3、搜索框前面的关键字

<span  style="font-size:14px">关键字</span>

4、暂无筛选数据下面的横线

/deep/.ivu-table-tip td {
  height: 350px !important;
  text-align:center;
}

  <Col span="2" style="text-align: center;font-size:14px">共{{ total }}条</Col>

5、footer布局

.temp-list {
 padding: 16px 20px 0px 20px;
}

6、摸上去有小手

cursor="pointer"	//cursor：鼠标	pointer：指针 edit

7、选择页码

 @on-page-size-change="handlePageSizeChange"

    // 选择页码的改变
    handlePageSizeChange(val) {
      this.pageSize = val;
      this.current = 1;
      this.searchClick();
    },

8、添加框提示语=>添加____

9、出现横向滚动条

/deep/ .ivu-table-body {
  margin-top: 50px;
  overflow-x: hidden;
  overflow-y: auto;
}

• 投影管理
• projectionDialog
• 坐标系
  curDialog
• 比例尺
  Scale
• 产品类别
  ProductCategory
• 用户管理
  UserManage
  • 添加、编辑用户 AddUserManage
  • 添加组
    • 添加用户
    • 添加资源
• 水印管理
  WaterManager
• 色板方案
  ColorProgram
• 卫星管理
  Sat
• 统计信息
  Statistics
• 鉴权管理
  AccessKey

3、封装添加组

组管理（AddOrganize.vue=>OrganizeManage.vue）、添加组（AddOrganizeItem）、添加用户(AddUser)、添加资源（AddResource）

• 1、先封装成一个单独的模块
    1）引入、注册、挂载
    2）点击 组管理中的添加(addOSure)=》弹出 添加组 组件
  代码块
  loading用法
• 2、点击 添加组 中的 添加用户 (addUserRelate)按钮 ，调用了组件（AddUser），触发了show方法。发送请求
• 3、同理：
  点击 添加组 中的 添加用户 (addResourceRelate)按钮 ，调用了组件（AddResource），触发了show方法。发送请求
• 4、完善页面逻辑
    1）搜索、重置、页码切换、切换每页条数 功能
    2）点击 取消、确定按钮
        1、清空关键字
       2、清空切换每页条数，默认10条
       3、清空切换每页条数，默认第1页
   3）点击添加组、默认是第一步
• 5、添加/编辑共用一个弹框
  添加
  进入页面，组名称、用户表格（groupData）、资源表格（resourceData）应当为空
  编辑
    1）渲染

  3、echarts使用

  Test.vue