修改设备工单
This commit is contained in:
306
components/calendar/index.vue
Normal file
306
components/calendar/index.vue
Normal file
@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<view class="calendarBox">
|
||||
<view class="content-top">
|
||||
<view class="content-left" @click="prveClick">
|
||||
<text class="iconfont icon-gengduo more_icon"></text>
|
||||
</view>
|
||||
<view class="content-scroll">
|
||||
<view class="center-cut-menu">
|
||||
<scroll-view scroll-x="true" show-scrollbar="false" scroll-with-animation="true" :scroll-left="scrollLeft" class="scroll-view horizontalScrollView" :class="{'monthScroll':params.date!=='day'}" >
|
||||
<view class="scroll-item" :style="'width:'+itemWidth+'px'" v-for="(item, index) in titleList" :key="index" @click="changeMenu(index)">
|
||||
<view class="viewItem" :class="{'active':curIndex == index,'monthViewItem':params.date !=='day'}">
|
||||
<text class="item-text">{{item.name}}</text>
|
||||
<text class="item-date" v-if="params.date == 'day'">{{item.text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-right" @click="nextClick">
|
||||
<text class="iconfont icon-gengduo"></text>
|
||||
</view>
|
||||
</view>
|
||||
<swiper v-if="params.date!='day'" class="swiper-box-list" circular="true" easing-function="linear" :current="curIndex" @change="swiperChange" :style="'height:'+swiperHeight+'px'">
|
||||
<swiper-item class="swiper-topic-list" v-for="(item,index) in titleList" :key="index">
|
||||
<view :style="'height:'+swiperHeight+'px'" v-if="curIndex == index">
|
||||
<view class="swiper-item padd_top12 font14">
|
||||
<view class="device_row" v-for="(em,inde) in item.data" :key="inde">
|
||||
<text class="name font_bold">{{em.text}}</text>
|
||||
<text class="text">{{em.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
params:this.params,
|
||||
|
||||
curIndex:0,
|
||||
scrollLeft:0,
|
||||
swiperHeight:0,
|
||||
itemWidth:53,
|
||||
itemColumn:5,
|
||||
|
||||
titleList:[
|
||||
{name:'日',date:11,text:''},
|
||||
{name:'一',date:12,text:''},
|
||||
{name:'二',date:13,text:''},
|
||||
{name:'三',date:14,text:''},
|
||||
{name:'四',date:15,text:''},
|
||||
{name:'五',date:16,text:''},
|
||||
{name:'六',date:17,text:''},
|
||||
],
|
||||
}
|
||||
},
|
||||
inject:['params','changeDateText'],
|
||||
watch:{
|
||||
'params.date':{
|
||||
handler(val){
|
||||
this.params.date = val;
|
||||
this.itemColumn = val=='day'?5:4
|
||||
this.setTitle();
|
||||
this.getScrollW();
|
||||
this.getSwiperH();
|
||||
},
|
||||
immediate:false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setTitle();
|
||||
},
|
||||
methods:{
|
||||
getScrollW() {
|
||||
let itemWidth = 0;
|
||||
let query = uni.createSelectorQuery().in(this);
|
||||
query.select('.scroll-view').boundingClientRect(data => {
|
||||
this.itemWidth = (data.width/this.itemColumn).toFixed(0);
|
||||
itemWidth = (data.width/this.itemColumn).toFixed(0);
|
||||
this.getItemWidth(itemWidth);
|
||||
}).exec();
|
||||
},
|
||||
getSwiperH(){
|
||||
if(this.params.date!='day'){
|
||||
setTimeout(()=>{
|
||||
let query = uni.createSelectorQuery().in(this);
|
||||
query.select('.swiper-item').boundingClientRect(data => {
|
||||
if(data){
|
||||
this.swiperHeight = data.height;
|
||||
}else{
|
||||
this.getSwiperH();
|
||||
}
|
||||
}).exec();
|
||||
},100)
|
||||
}
|
||||
},
|
||||
getItemWidth(num){
|
||||
let query = uni.createSelectorQuery().in(this);
|
||||
query.selectAll('.scroll-item').boundingClientRect(data => {
|
||||
let dataLen = data.length;
|
||||
for (let i = 0; i < dataLen; i++) {
|
||||
this.titleList[i].width = Number(num);
|
||||
this.titleList[i].left = Number(num) + Number(data[i].left);
|
||||
}
|
||||
}).exec();
|
||||
},
|
||||
|
||||
// 获取数据
|
||||
setTitle(){
|
||||
if(this.params.date == 'day'){
|
||||
let list = this.$wf.getDatesOfWeek();
|
||||
list.forEach(item=>{
|
||||
item.text = item.date.split('-')[2];
|
||||
})
|
||||
this.titleList = list;
|
||||
}
|
||||
if(this.params.date == 'week'){
|
||||
let list = [];
|
||||
let arr = this.$wf.getWeeksOfMonth();
|
||||
|
||||
arr.forEach((item,index)=>{
|
||||
let date = item.find(em=> em!==null && em!==undefined);
|
||||
item.forEach(em=>{
|
||||
if(em){
|
||||
em.text = em.date.split('-')[2];
|
||||
em.name = '星期'+em.name;
|
||||
}
|
||||
})
|
||||
list.push({
|
||||
name:'第'+this.$wf.numberToChineseLower(Number(index+1))+'周',
|
||||
date:date.date,
|
||||
data:item.filter(em=> em!==null),
|
||||
})
|
||||
})
|
||||
console.log(list,233)
|
||||
this.titleList = list;
|
||||
}
|
||||
if(this.params.date == 'month'){
|
||||
|
||||
}
|
||||
|
||||
this.getScrollW();
|
||||
this.changeDate();
|
||||
},
|
||||
|
||||
// 选择标题
|
||||
changeMenu(index) {
|
||||
this.curIndex = index;
|
||||
this.scrollLeft = 0;
|
||||
for (let i = 0; i < index - 1; i++) {
|
||||
this.scrollLeft += this.titleList[i].width;
|
||||
};
|
||||
this.changeDate(this.titleList[index].date);
|
||||
|
||||
if(this.params.date!='day'){
|
||||
this.getSwiperH();
|
||||
}
|
||||
},
|
||||
swiperChange(e) {
|
||||
let index = e.detail.current;
|
||||
this.changeMenu(index);
|
||||
},
|
||||
prveClick(){
|
||||
if(this.params.date == 'day'){
|
||||
let date = String(this.titleList[0].date);
|
||||
let list = this.$wf.getPreviousWeekDatesWithDays(date);
|
||||
list.forEach(item=>{
|
||||
item.text = item.date.split('-')[2];
|
||||
})
|
||||
this.titleList = list;
|
||||
}
|
||||
if(this.params.date == 'week'){
|
||||
// 获取本月的选中周日期
|
||||
let date = this.titleList[this.curIndex];
|
||||
let countNum = this.$wf.getPreviousMonthWeekCount(String(date.date));
|
||||
if(this.curIndex >= countNum){
|
||||
this.curIndex = countNum-1;
|
||||
}
|
||||
let list = [];
|
||||
let arr = this.$wf.getPreviousMonthGroupedByWeek(String(date.date));
|
||||
arr.forEach((item,index)=>{
|
||||
let date = item.find(em=> em!==null && em!==undefined);
|
||||
item.forEach(em=>{
|
||||
if(em){
|
||||
em.text = em.date.split('-')[2];
|
||||
em.name = '星期'+em.name;
|
||||
}
|
||||
})
|
||||
list.push({
|
||||
name:'第'+this.$wf.numberToChineseLower(Number(index+1))+'周',
|
||||
date:date.date,
|
||||
data:item.filter(em=> em!==null),
|
||||
})
|
||||
})
|
||||
this.titleList = list;
|
||||
}
|
||||
|
||||
this.getScrollW();
|
||||
this.changeDate();
|
||||
|
||||
if(this.params.date!='day'){
|
||||
this.getSwiperH();
|
||||
}
|
||||
},
|
||||
nextClick(){
|
||||
if(this.params.date == 'day'){
|
||||
let date = String(this.titleList[this.titleList.length -1].date);
|
||||
let list = this.$wf.getNextWeekDatesWithDays(date);
|
||||
list.forEach(item=>{
|
||||
item.text = item.date.split('-')[2];
|
||||
})
|
||||
this.titleList = list;
|
||||
}
|
||||
// 获取下一个月所有周
|
||||
if(this.params.date == 'week'){
|
||||
// 获取本月的选中周日期
|
||||
let date = this.titleList[this.curIndex];
|
||||
let countNum = this.$wf.getNextMonthWeekCount(String(date.date));
|
||||
if(this.curIndex >= countNum){
|
||||
this.curIndex = countNum-1;
|
||||
}
|
||||
let list = [];
|
||||
let arr = this.$wf.getNextMonthGroupedByWeek(String(date.date));
|
||||
arr.forEach((item,index)=>{
|
||||
let date = item.find(em=> em!==null && em!==undefined);
|
||||
item.forEach(em=>{
|
||||
if(em){
|
||||
em.text = em.date.split('-')[2];
|
||||
em.name = '星期'+em.name;
|
||||
}
|
||||
})
|
||||
list.push({
|
||||
name:'第'+this.$wf.numberToChineseLower(Number(index+1))+'周',
|
||||
date:date.date,
|
||||
data:item.filter(em=> em!==null),
|
||||
})
|
||||
})
|
||||
this.titleList = list;
|
||||
}
|
||||
|
||||
this.getScrollW();
|
||||
this.changeDate();
|
||||
|
||||
if(this.params.date!='day'){
|
||||
this.getSwiperH();
|
||||
}
|
||||
},
|
||||
|
||||
// 修改时间的阶段
|
||||
changeDate(item){
|
||||
let text = null;
|
||||
if(this.titleList[this.curIndex] == undefined){
|
||||
text = this.titleList[this.titleList.length -1].date;
|
||||
this.current = this.titleList.length -1;
|
||||
}else{
|
||||
text = this.titleList[this.curIndex].date;
|
||||
}
|
||||
if(item){
|
||||
text = item
|
||||
}
|
||||
let month = text.split('-')[0] + '-' + text.split('-')[1]
|
||||
this.changeDateText(month);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content-top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.content-left{flex-basis: 30px;text-align: center;
|
||||
.more_icon{display: inline-block;transform: scaleX(-1);}
|
||||
}
|
||||
.content-scroll{flex: 1;overflow: hidden;}
|
||||
.center-cut-menu {width: 100%;height: 50px;display: flex;align-items: center;
|
||||
.scroll-view {height: 50px;white-space: nowrap;
|
||||
.scroll-item {height: 100%;padding: 0 5px;display: inline-block;text-align: center;box-sizing: border-box;
|
||||
.viewItem{
|
||||
font-size: 14px;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;
|
||||
border: 1px solid $uni-color-primary;box-sizing: border-box;border-radius: 8px;
|
||||
}
|
||||
.monthViewItem{
|
||||
border: none;
|
||||
border-radius: 40px;
|
||||
}
|
||||
.active {
|
||||
background: $uni-color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.monthScroll{height: 28px;}
|
||||
}
|
||||
.content-right{flex-basis: 30px;text-align: center;}
|
||||
}
|
||||
.swiper-box-list{height: 240px;padding:0 12px;
|
||||
.swiper-item{display: flex;flex-direction: row;flex-wrap: wrap;}
|
||||
.device_row{display: flex;flex-direction: column;width: 33%;justify-content: center;align-items: center;margin-bottom: 12px;padding: 12px 0;height: 70px;box-sizing: border-box;
|
||||
.name{margin-bottom: 6px;}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -65,6 +65,6 @@
|
||||
}
|
||||
}
|
||||
.loadBox{
|
||||
color: $uni-color-primary;
|
||||
color: $uni-text-color-loading;
|
||||
}
|
||||
</style>
|
||||
119
components/pickerSelect/index.vue
Normal file
119
components/pickerSelect/index.vue
Normal file
@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<view class="selectView">
|
||||
<picker mode="selector" @change="bindPickerChange" @cancel="pickerHide" :value="value" range-key="name" :range="list" >
|
||||
<view class="pickerBom" @click="pickerClick">
|
||||
<input type="text" :value="text" :placeholder="placeholder" disabled />
|
||||
<text class="iconfont icon-gengduo" :class="selectShow?'selectOpen':'selectHide'"></text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectShow:false,
|
||||
value:'',
|
||||
text:'',
|
||||
id:this.id,
|
||||
array:this.list,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
placeholder:{
|
||||
type:[String],
|
||||
default:'请选择'
|
||||
},
|
||||
list:{
|
||||
type:[Array],
|
||||
default:[]
|
||||
},
|
||||
id:{
|
||||
type:[String,Number],
|
||||
default:''
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
id:{
|
||||
handler(val){
|
||||
this.array.forEach((item,index)=>{
|
||||
if(item.value == val){
|
||||
this.value = index;
|
||||
this.text = item.name;
|
||||
this.id = val;
|
||||
}
|
||||
})
|
||||
},
|
||||
immediate:true,
|
||||
deep:true
|
||||
},
|
||||
list:{
|
||||
handler(val){
|
||||
this.array = val;
|
||||
this.array.forEach((item,index)=>{
|
||||
if(item.value == this.id){
|
||||
this.value = index;
|
||||
this.text = item.name;
|
||||
this.id = item.value;
|
||||
}
|
||||
})
|
||||
},
|
||||
immediate:true,
|
||||
deep:true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
pickerClick(){
|
||||
this.selectShow = true;
|
||||
},
|
||||
bindPickerChange(e){
|
||||
this.value = e.detail.value;
|
||||
this.text = this.array[e.detail.value].name;
|
||||
this.id = this.array[e.detail.value].value;
|
||||
this.selectShow = false;
|
||||
|
||||
this.$emit('change',{name:this.array[e.detail.value].name,value:this.array[e.detail.value].value,item:this.array[e.detail.value]});
|
||||
},
|
||||
pickerHide(){
|
||||
this.selectShow = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.selectView{
|
||||
width: 100%;
|
||||
}
|
||||
.pickerBom{
|
||||
width: 100%;
|
||||
}
|
||||
.selectOpen{
|
||||
animation: rotate 0.6s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.selectHide{
|
||||
animation: rotate180 0.6s ;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotate180 {
|
||||
from {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user