itsm-wx-handle/pages/repair/deptSelect.vue

<template>
  <view class="mine">
    <scroll-view scroll-y class="body">
      <view class="bottom">
        <checkbox-group @change="checkboxChange" :value="optionData">
					<label class="litem-list" v-for="item in deptData" :key="item.value">
						<view>{{item.text}}</view>
						<checkbox :value="item.value" color="#49b856" :checked="item.checked" />
					</label>
				</checkbox-group>
      </view>
    </scroll-view>
    <view class="foot_common_btns">
    	<button @click="goBackOrToList" type="default" class="cancelButton btn">返回</button>
    	<button @click="submit" type="default" class="primaryButton btn">确认</button>
    </view>
  </view>
</template>

<script setup>
  import { ref, reactive } from 'vue'
  import { onLoad, onTabItemTap } from '@dcloudio/uni-app'
  import { api_incident_count, api_department, api_branch} from "@/http/api.js"
  import { defaultColor } from '@/static/js/theme.js'
  import { useSetTitle } from '@/share/useSetTitle.js'
  import { useMakePhoneCall } from '@/share/useMakePhoneCall.js'
  import { useLoginUserStore } from '@/stores/loginUser'
  import { useIncidentNumStore } from '@/stores/incidentNum'
  import { repositoryListSearchStore } from '@/stores/repositorySearch'
  import { useSetTabbar } from '@/share/useSetTabbar.js'
	import { useGoBack } from '@/share/useGoBack.js'
	
  useSetTitle();
  const loginUserStore = useLoginUserStore();
  const incidentNumStore = useIncidentNumStore();
  const { makePhoneCall }  = useMakePhoneCall();
  const repositorySearchStore = repositoryListSearchStore();
  const { setTabbar }  = useSetTabbar();
	const { goBack }  = useGoBack();
	
	const deptData = ref([])
	
	const dataForm = reactive({
	  dept: '',
		branch:''
	})
	
	const deptSelectData = ref(null)
	const deptSelectName = ref(null)
	const checkBox = ref([])
	const optionData = ref(null)
	
	// 是否提交
	const isSubmit = ref(false)
  
	// 上一步或者返回列表
	function goBackOrToList(){
	  goBack();
	}
	
	function checkboxChange (e) {
		var items = deptData.value;
		let values = e.detail.value;
		deptSelectName.value = []
		for (var i = 0, lenI = items.length; i < lenI; ++i) {
			const item = items[i]
			if(values.includes(item.value)){
				deptSelectName.value.push(item)
			}
		}
	}
				
	// 获取科室列表
	function getRepairTypes(){
	  uni.showLoading({
	    title: "加载中",
	    mask: true,
	  });
	  let postData = {
			department: {
			  branch: '',
			},
			idx:0,
			sum:9999
		}
		if(loginUserStore.loginUser.user.duty){
		  postData.department.branch = loginUserStore.loginUser.user.duty.id;
		}else if(loginUserStore.loginUser.user.branch){
		  postData.department.branch = loginUserStore.loginUser.user.branch.id;
		}
	  api_department(postData).then(res => {
	    uni.hideLoading();
	    res = res.list || [];
	    deptData.value = res.map(v => ({
	      text: v.dept,
	      value: v.id+'',
				checked: false
	    }));
			for(let i of deptData.value){
				for(let t of optionData.value){
					if(i.value == Number(t)){
						i.checked = true
					}
				}
			}
			if(optionData.value){
				checkBox.value = optionData.value
			}
	  })
	}
	
	function submit(){
		if(!deptSelectName.value){
			uni.showToast({
				icon: 'none',
			  title: '请先选择科室'
			});
			return
		}
		let id = []
		let name = []
		for(let i of deptSelectName.value){
			id.push(i.value)
			name.push(i.text)
		}
		let data = {
			data:id,
			name:name
		}
		uni.reLaunch({
		  url: '/pages/repair/config?data='+JSON.stringify(data)
		})
	}
	
  // 初始化
  function onLoadFn(){
		getRepairTypes()
  }
  
  onLoad((option) => {
		if(option.data!=null){
			let data = JSON.parse(option.data).split(',')
			optionData.value = data
		}
    onLoadFn();
  })
  
  onTabItemTap(e => {
    onLoadFn();
  })
</script>

<style scoped>
	>>> .uni-data-tree-input{
		width: 100% !important;
	}
	>>> .input-value-border{
		border: none !important;
	}
	>>> .input-value{
		padding:0 !important;
		flex-direction: row-reverse !important;
	}
	>>> .selected-list{
		flex-direction: row-reverse !important;
	}
	>>> .arrow-area{
		display: none !important;
	}
</style>
<style lang="scss" scoped>
.uni-checkbox-input:hover{
	border-color:#49b856;
}
.mine{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
	background: #fff;
  .phone-filled{
    margin-right: 5rpx;
  }
  .newicon-xinjian2,
	.newicon-zhishiku{
    margin-right: 10rpx;
  }
  .body{
    height: 88vh;
    // padding: 0 30rpx;
    box-sizing: border-box;
    border-radius: 8rpx;
    .top{
      padding: 30rpx;
      background-color: #fff;
      .top_name{
        font-size: 28rpx;
        font-weight: bold;
      }
      .top_count{
        margin-top: 45rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .top_count_item{
          text-align: center;
          .name{
            color: #949494;
            font-size: 22rpx;
          }
          .value{
            font-size: 50rpx;
            font-weight: bold;
            margin-top: 15rpx;
          }
        }
      }
    }
    
    .bottom{
      background-color: #fff;
      margin-top: 15rpx;
			.litem-list{
				display: flex;
				justify-content: space-between;
				height: 70rpx;
				align-items: center;
				border-bottom: 1px solid #f5f5f5;
				padding: 0 20rpx;
				font-size: 28rpx;
			}
      .bottom_name{
        font-size: 26rpx;
        color: $uni-primary;
        padding: 21rpx 24rpx;
      }
      .bottom_list{
        .bottom_list_item{
          border-top: 1rpx solid #DEDEDE;
          padding: 30rpx 30rpx 30rpx 30rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 24rpx;
					position: relative;
          .value{
            max-width: 380rpx;
            color: #333;
            display: flex;
            align-items: center;
            text-align: justify;
						margin-right: 30rpx;
          }
					.no-mar{
						margin-right:0 !important;
					}
					.icon{
						position: absolute;
						right: 20rpx;
					}
        }
      }
    }
  }
}
</style>