This commit is contained in:
parent
ef313b9399
commit
04a8c08904
62
App.vue
62
App.vue
|
@ -25,7 +25,7 @@
|
||||||
@import 'uni.scss';
|
@import 'uni.scss';
|
||||||
/* #endif */
|
/* #endif */
|
||||||
|
|
||||||
// 设置整个项目的背景色
|
/* 设置整个项目的背景色 */
|
||||||
page {
|
page {
|
||||||
background-color: $uni-bg-color-default !important;
|
background-color: $uni-bg-color-default !important;
|
||||||
color: $uni-text-color-inverse;
|
color: $uni-text-color-inverse;
|
||||||
|
@ -37,15 +37,15 @@
|
||||||
}
|
}
|
||||||
.page_padding{padding: 14px;}
|
.page_padding{padding: 14px;}
|
||||||
.page_content{padding: 0 12px 10px;}
|
.page_content{padding: 0 12px 10px;}
|
||||||
//内容框
|
/* 内容框 */
|
||||||
.contentboxsty{border-radius: 8px;background: $uni-bg-color-primary;}
|
.contentboxsty{border-radius: 8px;background: $uni-bg-color-primary;}
|
||||||
//没有底部边框
|
/* 没有底部边框 */
|
||||||
.noborbot{border-bottom:none !important}
|
.noborbot{border-bottom:none !important}
|
||||||
|
|
||||||
.t-icon{background-repeat: no-repeat;}
|
.t-icon{background-repeat: no-repeat;}
|
||||||
.icon22{width: 22px;height: 22px;}
|
.icon22{width: 22px;height: 22px;}
|
||||||
|
|
||||||
//字体大小
|
/* 字体大小 */
|
||||||
.font12{font-size: 12px;}
|
.font12{font-size: 12px;}
|
||||||
.font13{font-size: 13px;}
|
.font13{font-size: 13px;}
|
||||||
.font14{font-size: 14px;}
|
.font14{font-size: 14px;}
|
||||||
|
@ -57,17 +57,17 @@
|
||||||
.font35{font-size: 35px;}
|
.font35{font-size: 35px;}
|
||||||
.font_bold{font-weight: bold;}
|
.font_bold{font-weight: bold;}
|
||||||
|
|
||||||
//文字颜色
|
/* 文字颜色 */
|
||||||
.text_color_black{color: $uni-text-color-default;}
|
.text_color_black{color: $uni-text-color-default;}
|
||||||
.theme_color{color: $uni-text-color-primary } //主题绿
|
.theme_color{color: $uni-text-color-primary } //主题绿
|
||||||
//按钮颜色
|
/* 按钮颜色 */
|
||||||
.but_color{background: $uni-color-primary !important;}
|
.but_color{background: $uni-color-primary !important;}
|
||||||
|
|
||||||
//布局
|
/* 布局 */
|
||||||
.flex_layout{display: flex;}
|
.flex_layout{display: flex;}
|
||||||
.flex1{flex: 1;}
|
.flex1{flex: 1;}
|
||||||
.comView{flex: 1;overflow: hidden;}
|
.comView{flex: 1;overflow: hidden;}
|
||||||
//paddind
|
/* paddind */
|
||||||
.padd_rigth5{padding-right: 5px;}
|
.padd_rigth5{padding-right: 5px;}
|
||||||
.padd_bot6{padding-bottom: 6px;}
|
.padd_bot6{padding-bottom: 6px;}
|
||||||
.padd_top12{padding-top:12px;}
|
.padd_top12{padding-top:12px;}
|
||||||
|
@ -75,12 +75,12 @@
|
||||||
.padd_bot12{padding-bottom: 12px;}
|
.padd_bot12{padding-bottom: 12px;}
|
||||||
.padd_left12{padding-left:12px;}
|
.padd_left12{padding-left:12px;}
|
||||||
.padd12{padding: 12px;}
|
.padd12{padding: 12px;}
|
||||||
//margin
|
/* margin */
|
||||||
.mar_top12{margin-top: 12px;}
|
.mar_top12{margin-top: 12px;}
|
||||||
.mar_bot12{margin-bottom: 12px;}
|
.mar_bot12{margin-bottom: 12px;}
|
||||||
.page_list{margin-bottom: 12px;padding:0 12px;}
|
.page_list{margin-bottom: 12px;padding:0 12px;}
|
||||||
|
|
||||||
//有详情的列表
|
/* 有详情的列表 */
|
||||||
.detail_list{
|
.detail_list{
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
.list_top{
|
.list_top{
|
||||||
|
@ -132,11 +132,11 @@
|
||||||
.flexBox .detail_list:first-child{
|
.flexBox .detail_list:first-child{
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
}
|
}
|
||||||
// 检索固定
|
/* 检索固定 */
|
||||||
.headerViewFixed{
|
.headerViewFixed{
|
||||||
background: $uni-bg-color-default;
|
background: $uni-bg-color-default;
|
||||||
}
|
}
|
||||||
//页面固定按钮
|
/* 页面固定按钮 */
|
||||||
.bottom_but{
|
.bottom_but{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
@ -147,7 +147,7 @@
|
||||||
height: 80px;
|
height: 80px;
|
||||||
view{width: 50%;text-align: center;margin: 0 20px;border-radius: 19px;background: #DDD;line-height: 38px;height: 38px;margin-top: 6px;}
|
view{width: 50%;text-align: center;margin: 0 20px;border-radius: 19px;background: #DDD;line-height: 38px;height: 38px;margin-top: 6px;}
|
||||||
}
|
}
|
||||||
//底部固定添加按钮
|
/* 底部固定添加按钮 */
|
||||||
.page_bottom_button{
|
.page_bottom_button{
|
||||||
width: 100%;position: fixed;bottom: 0px;background-color: #060B26;border-top: 1px solid #2E3249;height: 80px;
|
width: 100%;position: fixed;bottom: 0px;background-color: #060B26;border-top: 1px solid #2E3249;height: 80px;
|
||||||
.page_add{display:flex;justify-content:center;align-items: center;margin: 7px 20px;border-radius: 17.5px;background: #1C2755;height: 38px;}
|
.page_add{display:flex;justify-content:center;align-items: center;margin: 7px 20px;border-radius: 17.5px;background: #1C2755;height: 38px;}
|
||||||
|
@ -160,7 +160,7 @@
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 圆形进度条
|
/* 圆形进度条 */
|
||||||
.progressBg{
|
.progressBg{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 2px;
|
left: 2px;
|
||||||
|
@ -207,7 +207,7 @@
|
||||||
background-image: conic-gradient($uni-color-primary 0%, $uni-color-primary var(--progress), transparent 0);
|
background-image: conic-gradient($uni-color-primary 0%, $uni-color-primary var(--progress), transparent 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 选择日期时间颜色的配置
|
/* 选择日期时间颜色的配置 */
|
||||||
.input_date .uni-date-x .uni-date__x-input{
|
.input_date .uni-date-x .uni-date__x-input{
|
||||||
color: $uni-text-color-tip;
|
color: $uni-text-color-tip;
|
||||||
}
|
}
|
||||||
|
@ -215,11 +215,41 @@
|
||||||
color: $uni-text-color-inverse;
|
color: $uni-text-color-inverse;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 修改 日期时间选择组件
|
/* 修改 日期时间选择组件 */
|
||||||
.input_date ::v-deep .uni-date-changed .uni-datetime-picker--btn{
|
.input_date ::v-deep .uni-date-changed .uni-datetime-picker--btn{
|
||||||
background: $uni-color-primary !important;
|
background: $uni-color-primary !important;
|
||||||
}
|
}
|
||||||
.input_date ::v-deep .uni-calendar-item--checked{
|
.input_date ::v-deep .uni-calendar-item--checked{
|
||||||
background: $uni-color-primary !important;
|
background: $uni-color-primary !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 自定义 复选框-背景颜色 */
|
||||||
|
checkbox.checkbox-custom[checked] .wx-checkbox-input , checkbox.checkbox-custom.checked .uni-checkbox-input{
|
||||||
|
background-color: $uni-color-primary;
|
||||||
|
border-color: $uni-color-primary;
|
||||||
|
color: $uni-text-color-inverse;
|
||||||
|
}
|
||||||
|
::v-deep .checkbox_indeterminate::before{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: calc(50% - 2px);
|
||||||
|
z-index: 80;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
width: 12px;
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: $uni-bg-color-whith;
|
||||||
|
}
|
||||||
|
::v-deep .checkbox_indeterminate::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 10;
|
||||||
|
width: calc(100% - 5px);
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 3px;
|
||||||
|
background-color: $uni-color-primary;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -5,14 +5,14 @@
|
||||||
<view class="data_name">头像</view>
|
<view class="data_name">头像</view>
|
||||||
<view class="">
|
<view class="">
|
||||||
<button class="person_button" open-type="chooseAvatar" @chooseavatar='onChooseAvatar'>
|
<button class="person_button" open-type="chooseAvatar" @chooseavatar='onChooseAvatar'>
|
||||||
<image class="person_logo" :src="avatarUrl"></image>
|
<image class="person_logo" :src="avatarUrl" mode="aspectFill"></image>
|
||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="content_box">
|
<view class="content_box">
|
||||||
<view class="data_name">真实姓名</view>
|
<view class="data_name">真实姓名</view>
|
||||||
<view class="">
|
<view class="">
|
||||||
>
|
<text class="iconfont icon-gengduo"></text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="content_box noborbot">
|
<view class="content_box noborbot">
|
||||||
|
@ -58,7 +58,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0';
|
const defaultAvatarUrl = 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/avatar.png';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
|
@ -1,39 +1,31 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="page_padding">
|
<view class="page_padding checkbox-container">
|
||||||
<!-- <checkbox-group @change="checkboxChange">
|
|
||||||
<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
|
|
||||||
<view>
|
|
||||||
<checkbox :value="item.value" :checked="item.checked" />
|
|
||||||
</view>
|
|
||||||
<view>{{item.name}}</view>
|
|
||||||
</label>
|
|
||||||
</checkbox-group> -->
|
|
||||||
<view class="contentboxsty" v-for="(item, index) in list" :key="index.id">
|
<view class="contentboxsty" v-for="(item, index) in list" :key="index.id">
|
||||||
<view class="list_name">
|
<view class="list_name listItem">
|
||||||
<checkbox-group @change="changeCheckbox">
|
<checkbox-group @change="changeCheckbox">
|
||||||
<checkbox value="cb" class="checkbox-backgroun-yellow" :value="item.id" :checked="item.checked" style="transform:scale(0.7)" />
|
<label>
|
||||||
|
<checkbox class="checkbox-custom" :class="{ 'checkbox_indeterminate': item.indeterminate }" :value="item.id" :checked="item.checked" style="transform:scale(0.6)" />
|
||||||
|
<text class="font14">{{item.name}}</text>
|
||||||
|
</label>
|
||||||
</checkbox-group>
|
</checkbox-group>
|
||||||
<!-- <checkbox-group @change="selectPath(e,item)">
|
|
||||||
<checkbox value="cb" class="checkbox-backgroun-yellow" :value="item.id" :checked="item.checked" style="transform:scale(0.7)" />
|
|
||||||
</checkbox-group> -->
|
|
||||||
<!-- <text class="t-icon t-icon-xuanzhong padd_rigth12" @click="selectPath($event.target,item)"></text> -->
|
|
||||||
{{item.name}}{{item.checked}}
|
|
||||||
</view>
|
</view>
|
||||||
<view class="list_content" v-for="(i, ind) in item.child" :key="ind">
|
<view class="list_content listItem padd_bot12" v-for="(i, ind) in item.child" :key="ind">
|
||||||
<view class="content_name">
|
<view class="content_name">
|
||||||
<checkbox-group @change="selectPath(e,i)">
|
<checkbox-group @change="selectPath(item,i)">
|
||||||
<checkbox value="cb" class="checkbox-backgroun-yellow" :value="i.id" :checked="i.checked" style="transform:scale(0.7)" />
|
<label>
|
||||||
|
<checkbox class="checkbox-custom" :class="{ 'checkbox_indeterminate': i.indeterminate }" :value="i.id" :checked="i.checked" style="transform:scale(0.6)" />
|
||||||
|
<text class="font14">{{i.name}}</text>
|
||||||
|
</label>
|
||||||
</checkbox-group>
|
</checkbox-group>
|
||||||
<!-- <text class="t-icon t-icon-xuanzhong padd_rigth5"></text> -->
|
|
||||||
<text class="">{{i.name}}</text>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="content_item">
|
<view class="content_item">
|
||||||
<view class="content_data" v-for="(btn, inx) in i.child" :key="inx">
|
<view class="content_data" v-for="(btn, inx) in i.child" :key="inx">
|
||||||
<checkbox-group @change="selectPath(e,i)">
|
<checkbox-group @change="selectPath(item,i,inx)">
|
||||||
<checkbox value="cb" class="checkbox-backgroun-yellow" :value="btn.id" :checked="btn.checked" style="transform:scale(0.7)" />
|
<label>
|
||||||
|
<checkbox class="checkbox-custom" :class="{ 'checkbox_indeterminate': btn.indeterminate }" :value="btn.id" :checked="btn.checked" style="transform:scale(0.6)" />
|
||||||
|
<text class="font14">{{btn.name}}</text>
|
||||||
|
</label>
|
||||||
</checkbox-group>
|
</checkbox-group>
|
||||||
<!-- <text class="t-icon t-icon-xuanzhong padd_rigth5"></text> -->
|
|
||||||
<text class="">{{btn.name}}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
@ -45,60 +37,61 @@
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
items: [{
|
list:[
|
||||||
value: 'USA',
|
{
|
||||||
name: '美国'
|
id:1,name:'首页',checked:true,indeterminate:true,
|
||||||
|
child:[
|
||||||
|
{
|
||||||
|
id: 2,name:'控制台',checked:true,indeterminate:true,
|
||||||
|
child:[
|
||||||
|
{id:121,name:'设备信息',checked:true,},
|
||||||
|
{id:122,name:'生产加工信息',checked:true,},
|
||||||
|
{id:123,name:'设备能耗信息',},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'CHN',
|
id:124,name:'账号信息',
|
||||||
name: '中国',
|
child:[
|
||||||
checked: 'true'
|
{id:125,name:'通知设置',},
|
||||||
},
|
{id:126,name:'升级角色'},
|
||||||
{
|
]
|
||||||
value: 'BRA',
|
|
||||||
name: '巴西'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'JPN',
|
|
||||||
name: '日本'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'ENG',
|
|
||||||
name: '英国'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'FRA',
|
|
||||||
name: '法国'
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
list:[
|
},
|
||||||
{name:'首页',checked:true,id:1,child:[{
|
{
|
||||||
id: 2,
|
id:11,name:'生产工单',
|
||||||
name:'控制台',
|
|
||||||
checked:true,
|
|
||||||
child:[
|
child:[
|
||||||
{id:121,name:'设备信息',},
|
{
|
||||||
{id:122,name:'生产加工信息',},
|
id: 3,name:'待生产工单',
|
||||||
{id:123,name:'生产加工信息',},
|
child:[
|
||||||
{id:124,name:'账号信息',},
|
{name:'添加工单',id:31},
|
||||||
{id:125,name:'通知设置',},
|
{name:'审核工单',id:32},
|
||||||
{id:126,name:'升级角色'},],
|
{name:'删除工单',id:33},
|
||||||
|
{name:'撤回工单',id:34},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:4,name:'已排产工单',
|
||||||
|
child:[],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
// {name:'生产工单',id:11,child:[{
|
{
|
||||||
// id: 3,
|
id:12,name:'生产排程',
|
||||||
// name:'待生产工单',
|
child:[
|
||||||
// child:[{name:'添加工单'},
|
{
|
||||||
// {name:'审核工单'},
|
id: 4,name:'工单排程表',
|
||||||
// {name:'删除工单'},
|
child:[
|
||||||
// ],
|
{name:'创建生产计划',id:41},
|
||||||
// },
|
{name:'修改生产计划',id:42},
|
||||||
// {name:'已排产工单',
|
{name:'拆分生产计划',id:43},
|
||||||
// child:[],
|
{name:'删除生产计划',id:44},
|
||||||
// },
|
{name:'创建计划依赖',id:45},
|
||||||
// ],
|
{name:'删除计划依赖',id:46},
|
||||||
// }
|
],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
],
|
],
|
||||||
arr:[]
|
arr:[]
|
||||||
}
|
}
|
||||||
|
@ -115,44 +108,26 @@
|
||||||
this.$set(item,'checked',false)
|
this.$set(item,'checked',false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.log(items)
|
|
||||||
},
|
|
||||||
changeCheckbox(e){
|
|
||||||
console.log(e)
|
|
||||||
// var items = this.list,
|
|
||||||
// values = e.detail.value;
|
|
||||||
// for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
|
||||||
// const item = items[i]
|
|
||||||
// if(values.includes(item.value)){
|
|
||||||
// this.$set(item,'checked',true)
|
|
||||||
// }else{
|
|
||||||
// this.$set(item,'checked',false)
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// console.log(items)
|
// console.log(items)
|
||||||
},
|
},
|
||||||
|
changeCheckbox(e){
|
||||||
|
// console.log(e)
|
||||||
|
},
|
||||||
selectPath(e,item){
|
selectPath(e,item){
|
||||||
console.log(e,item,222)
|
// console.log(e,item,222)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped lang="scss">
|
||||||
.contentboxsty{padding: 14px 12px;margin-bottom: 12px;}
|
.contentboxsty{padding: 14px 12px;margin-bottom: 12px;}
|
||||||
.list_name{display: flex;align-items: center;padding-bottom: 7px;border-bottom: 1px solid #2D3A6F;}
|
.contentboxsty .listItem:last-child{padding-bottom: 0;}
|
||||||
|
.list_name{display: flex;align-items: center;padding-bottom: 7px;border-bottom: 1px solid $uni-border-color-primary;}
|
||||||
.content_name{padding:8px 0 ;display: flex;align-items: center;}
|
.content_name{padding:8px 0 ;display: flex;align-items: center;}
|
||||||
.content_item{display: flex;align-items: center;flex-wrap: wrap;}
|
.content_item{display: flex;align-items: center;flex-wrap: wrap;}
|
||||||
.content_data{padding: 4px 15px 4px 0;display: flex;align-items: center;}
|
.content_data{padding: 4px 15px 4px 0;display: flex;align-items: center;}
|
||||||
|
|
||||||
/* 复选框-背景颜色 */
|
|
||||||
checkbox.checkbox-backgroun-yellow[checked] .wx-checkbox-input,
|
|
||||||
checkbox.checkbox-backgroun-yellow.checked .uni-checkbox-input{
|
|
||||||
background-color: #009688 !important;
|
|
||||||
border-color: #009688 !important;
|
|
||||||
color: #ffffff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue