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