|
|
@@ -0,0 +1,488 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <!-- header -->
|
|
|
+ <view class="header">
|
|
|
+ <view class="header_title" :class="active===1?'active':''" @click="click_item(1)">
|
|
|
+ <view class="title">我的值班</view>
|
|
|
+ <view class="line"></view>
|
|
|
+ </view>
|
|
|
+ <view class="header_title" :class="active===2?'active':''" @click="click_item(2)">
|
|
|
+ <view class="title">单位值班表</view>
|
|
|
+ <view class="line"></view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="header_title" :class="active===3?'active':''" @click="click_item(3)">
|
|
|
+ <view class="title">全公司值班</view>
|
|
|
+ <view class="line"></view>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- content -->
|
|
|
+ <view class="content" v-if="active === 1">
|
|
|
+ <scroll-view scroll-x>
|
|
|
+ <!-- 月份 -->
|
|
|
+ <view class="month">
|
|
|
+ <view class="month_list">
|
|
|
+
|
|
|
+ <view class="month_item" v-for="(item,index) in month_list" :key="index"
|
|
|
+ :class="month_item_active===index?'month_item_active':''"
|
|
|
+ @click="click_month_item(index,item)">
|
|
|
+
|
|
|
+ <view class="text">{{item.month}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </scroll-view>
|
|
|
+ <!-- 内容 -->
|
|
|
+ <view class="inner" v-if="month_list.length > 0">
|
|
|
+ <view class="inner_title">
|
|
|
+ <view class="time">时间</view>
|
|
|
+ <view class="name">值班人</view>
|
|
|
+ </view>
|
|
|
+ <view class="inner_box">
|
|
|
+ <view class="inner_item" v-for="item in list" :key="item.id">
|
|
|
+ <view class="item_left">
|
|
|
+ <view class="month_day">{{item.date}}</view>
|
|
|
+ <view class="week">{{item.week}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="item_right">
|
|
|
+ <view class="inner_info">
|
|
|
+ <text>
|
|
|
+ {{item.content}}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="month_list.length == 0"
|
|
|
+ style="text-align: center;line-height: 90rpx;font-size: 28rpx;color:#666; ">当前没有你值班的排期!</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- content -->
|
|
|
+ <view class="content" v-if="active === 2">
|
|
|
+ <scroll-view scroll-x>
|
|
|
+ <!-- 月份 -->
|
|
|
+ <view class="month">
|
|
|
+ <view class="month_list">
|
|
|
+
|
|
|
+ <view class="month_item" v-for="(item,index) in month_all_list" :key="index"
|
|
|
+ :class="month_all_item_active===index?'month_item_active':''"
|
|
|
+ @click="click_month_all_item(index,item)">
|
|
|
+
|
|
|
+ <view class="text">{{item}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <!-- 内容 -->
|
|
|
+ <view class="inner">
|
|
|
+ <view class="inner_title">
|
|
|
+ <view class="time">时间</view>
|
|
|
+ <view class="name">值班人</view>
|
|
|
+ </view>
|
|
|
+ <view class="inner_box">
|
|
|
+ <view class="inner_item" v-for="item in all_list" :key="item.id">
|
|
|
+ <view class="item_left">
|
|
|
+ <view class="month_day">{{item.date}}</view>
|
|
|
+ <view class="week">{{item.week}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="item_right">
|
|
|
+ <view class="inner_info">
|
|
|
+ <text>
|
|
|
+ {{item.content}}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="content" v-if="active === 3">
|
|
|
+ <view class="section_name">
|
|
|
+ <view>
|
|
|
+ <picker mode="multiSelector" @columnchange="columnchange" @change="change_section" :value="array" :range="array" range-key="title">
|
|
|
+ <view class="uni-input">{{section_name}}</view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <uni-icons type="right"></uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ const user = uni.getStorageSync('user')
|
|
|
+ // console.log(user.name)
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 默认选中表
|
|
|
+ active: 1,
|
|
|
+
|
|
|
+ // 我的值班
|
|
|
+ // 当前选中的月份
|
|
|
+ month_item_active: 0,
|
|
|
+ // 值班月份-个人
|
|
|
+ month_list: [],
|
|
|
+ // 值班信息
|
|
|
+ list: [],
|
|
|
+
|
|
|
+
|
|
|
+ // 值班表
|
|
|
+ // 当前选中的月份
|
|
|
+ month_all_item_active: 0,
|
|
|
+ // 值班月份-所有人
|
|
|
+ month_all_list: [],
|
|
|
+ // 值班信息
|
|
|
+ all_list: [],
|
|
|
+
|
|
|
+
|
|
|
+ // 全公司值班
|
|
|
+ section_name: "部门名称",
|
|
|
+ array: [
|
|
|
+ [],
|
|
|
+ []
|
|
|
+ ],
|
|
|
+ index: [0, 0],
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+
|
|
|
+ // 获取值班月份-所有人
|
|
|
+ this.getMonthAll()
|
|
|
+
|
|
|
+ // 获取值班月份-个人
|
|
|
+ this.getMonth()
|
|
|
+
|
|
|
+
|
|
|
+ // 全公司值班
|
|
|
+ this.get_section_get_tree_structure(285)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 当前选中的表
|
|
|
+ click_item(item) {
|
|
|
+ this.active = item
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ click_month_item(index) {
|
|
|
+ this.month_item_active = index
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ // 值班月份-所有人
|
|
|
+ click_month_all_item(index, item) {
|
|
|
+ // 当前点击的月份
|
|
|
+ this.month_all_item_active = index
|
|
|
+ // 获取值班列表-所有人
|
|
|
+ this.getAllList(item)
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ // 值班月份-个人
|
|
|
+ click_month_item(index, item) {
|
|
|
+ // 当前点击的月份
|
|
|
+ this.month_item_active = index
|
|
|
+ // 获取值班列表-所有人
|
|
|
+ this.getList(item.month)
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 获取值班月份-所有人
|
|
|
+ getMonthAll() {
|
|
|
+ this.$api.notice_all_list_month({
|
|
|
+
|
|
|
+ }).then((res) => {
|
|
|
+ const data = res.data.data
|
|
|
+ this.month_all_list = data
|
|
|
+
|
|
|
+ // 获取值班列表-所有人
|
|
|
+ this.getAllList(this.month_all_list[0])
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ // 获取值班信息-所有人
|
|
|
+ getAllList(month) {
|
|
|
+ this.$api.notice_all_list_list({
|
|
|
+ month: month
|
|
|
+ }).then((res) => {
|
|
|
+ // console.log(res.data)
|
|
|
+ const data = res.data.data
|
|
|
+
|
|
|
+ this.all_list = data
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取值班月份-个人
|
|
|
+ getMonth() {
|
|
|
+
|
|
|
+ this.$api.notice_my_list_month({
|
|
|
+ name: user.name
|
|
|
+ }).then((res) => {
|
|
|
+ console.log(res.data.data)
|
|
|
+ const data = res.data.data
|
|
|
+ this.month_list = data
|
|
|
+
|
|
|
+ // 获取值班列表-个人
|
|
|
+ this.getList(this.month_list[0].month)
|
|
|
+ // console.log(this.month_list[0].month)
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ // 获取值班信息-个人
|
|
|
+ getList(month) {
|
|
|
+ this.$api.notice_my_list_list({
|
|
|
+ month: month,
|
|
|
+ name: user.name
|
|
|
+ }).then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ const data = res.data.data
|
|
|
+
|
|
|
+ this.list = data
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ // 全公司值班
|
|
|
+ get_section_get_tree_structure(section_id) {
|
|
|
+ this.$api.section_get_tree_structure({
|
|
|
+ section_id: section_id
|
|
|
+ }).then((res) => {
|
|
|
+ this.array[0] = res.data.content.data.children
|
|
|
+ this.$api.section_get_tree_structure({
|
|
|
+ section_id: res.data.content.data.children[0].id
|
|
|
+ }).then((res) => {
|
|
|
+ this.array[1] = res.data.content.data.children
|
|
|
+ this.section_name = this.array[0][0].title+ '-' +this.array[1][0].title
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ change_section(e) {
|
|
|
+ console.log('picker发送选择改变，携带值为', e.detail.value)
|
|
|
+ this.index = e.detail.value
|
|
|
+ this.section_name = this.array[0][this.index[0]].title+ '-' +this.array[1][this.index[1]].title
|
|
|
+ },
|
|
|
+ columnchange(e) {
|
|
|
+ let column = e.detail.column
|
|
|
+ let value = e.detail.value
|
|
|
+ if (column == 0) {
|
|
|
+ uni.showLoading({
|
|
|
+ mask: true
|
|
|
+ })
|
|
|
+ this.array[1] = []
|
|
|
+ this.$api.section_get_tree_structure({
|
|
|
+ section_id: this.array[0][value].id
|
|
|
+ }).then((res) => {
|
|
|
+ uni.hideLoading()
|
|
|
+ this.array[1] = res.data.content.data.children
|
|
|
+ this.$forceUpdate()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ page {
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ background-color: #fff;
|
|
|
+ width: 100%;
|
|
|
+ height: 97rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-top: 21rpx;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .header_title {
|
|
|
+ // width: 250rpx;
|
|
|
+ width: 50%;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ text-align: center;
|
|
|
+ height: 47rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #BDC3C7;
|
|
|
+ line-height: 47rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ .title {
|
|
|
+ color: #009FE8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line {
|
|
|
+ margin-top: 28rpx;
|
|
|
+
|
|
|
+ background-color: #009FE8;
|
|
|
+ height: 4rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ .month {
|
|
|
+ height: 100rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 13rpx;
|
|
|
+ padding-top: 24rpx;
|
|
|
+
|
|
|
+ .month_list {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .month_item {
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1rpx solid #009FE8;
|
|
|
+ background-color: transparent;
|
|
|
+ height: 60rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 21rpx;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ width: 210rpx;
|
|
|
+
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #009FE8;
|
|
|
+ line-height: 60rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .month_item_active {
|
|
|
+ background-color: #009FE8;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: #FFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .inner {
|
|
|
+ .inner_title {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 94rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 21rpx;
|
|
|
+
|
|
|
+ border-bottom: 4rpx solid #009FE8;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .time {
|
|
|
+ width: 194rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #009FE8;
|
|
|
+ line-height: 94rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ margin-left: 45rpx;
|
|
|
+ width: 469rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #009FE8;
|
|
|
+ line-height: 94rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .inner_box {
|
|
|
+
|
|
|
+ .inner_item {
|
|
|
+ margin-bottom: 2rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 21rpx;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .item_left {
|
|
|
+ width: 194rpx;
|
|
|
+
|
|
|
+ .month_day {
|
|
|
+ text-align: center;
|
|
|
+ height: 39rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #232627;
|
|
|
+ line-height: 39rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .week {
|
|
|
+ text-align: center;
|
|
|
+ height: 30rpx;
|
|
|
+ font-size: 27rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #6C6F74;
|
|
|
+ line-height: 39rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item_right {
|
|
|
+ width: 469rpx;
|
|
|
+
|
|
|
+ .inner_info {
|
|
|
+ margin-left: 45rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #232627;
|
|
|
+ line-height: 39rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .section_name {
|
|
|
+ width: 750rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 25rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #545454;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .uni-input {
|
|
|
+ width: 600rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
