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

<template>
  <view class="mine">
    <scroll-view scroll-y class="body">
      <view class="bottom">
        <view class="bottom_name">个人信息</view>
        <view class="bottom_list">
          <view class="bottom_list_item">
            <view class="name"><text class="required newicon newicon-bitian"></text>工号</view>
            <view class="value no-mar">{{loginUserStore.loginUser.user.account}}</view>
          </view>
					<view class="bottom_list_item">
					  <view class="name"><text class="required newicon newicon-bitian"></text>姓名</view>
					  <view class="value no-mar">{{loginUserStore.loginUser.user.name}}</view>
					</view>
					<view class="bottom_list_item">
					  <view class="name"><text class="required newicon newicon-bitian"></text>院区名称</view>
						<uni-data-picker class="value" placeholder="请选择院区名称"
							v-model="dataForm.branch" :localdata="branchData"
							:clear-icon="false" :class="{formRed: isSubmit && !dataForm.branch}">
						</uni-data-picker>
						<text class="newicon newicon-youjiantou icon"></text>
					</view>
					<view class="bottom_list_item" v-if="deptRepair.valueconfig==1">
					  <view class="name"><text class="required newicon newicon-bitian"></text>科室名称</view>
						<uni-data-picker class="value" placeholder="请选择报修科室"
							v-model="dataForm.dept" :localdata="deptData"
							:clear-icon="false" :class="{formRed: isSubmit && !dataForm.dept}">
						</uni-data-picker>
						<text class="newicon newicon-youjiantou icon"></text>
					</view>
					<view class="bottom_list_item" v-if="deptRepair.valueconfig==1" @click="deptSelect">
					  <view class="name">常用科室</view>
					  <view class="value">{{commonDeptName}}</view>
						<text class="newicon newicon-youjiantou icon"></text>
					</view>
          <view class="bottom_list_item">
            <view class="name"><text class="required newicon newicon-bitian"></text>联系电话</view>
            <view class="value no-mar" @click="makePhoneCall(loginUserStore.loginUser.user.phone)">{{loginUserStore.loginUser.user.phone}}</view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="foot_common_btns">
			<button @click="addInfo" 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_userSave, api_department, api_branch, api_systemConfiguration} 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'
	
  useSetTitle();
  const loginUserStore = useLoginUserStore();
  const incidentNumStore = useIncidentNumStore();
  const { makePhoneCall }  = useMakePhoneCall();
  const repositorySearchStore = repositoryListSearchStore();
  const { setTabbar }  = useSetTabbar();
	
  // 主题颜色
  const primaryColor = ref(defaultColor)
  
	const deptRepair = ref(null)
	
	const deptData = ref([])
	
	const branchData = ref([])
	
	const commonDeptName = ref(null)
	
	const commonDeptData = ref(null)
	
	const dataForm = reactive({
	  dept: '',
		branch:''
	})
	
	const userData = reactive(loginUserStore.loginUser.user)
	
	const commonDeptDTO = ref([])
	
	// 是否提交
	const isSubmit = ref(false)
	
  // 数据
  const dataInfo = reactive({
    todo: 0,
    doing: 0,
    owns: 0,
    resolve: 0,
  })
  
  // 保存
  function addInfo(){
    isSubmit.value = true
		uni.showLoading({
		  title: "加载中",
		  mask: true,
		});
		userData.branch.id = dataForm.branch
		userData.commonDeptName = commonDeptName.value
		userData.dept={
			id:dataForm.dept
		}
		let arr = []
		for(let i of commonDeptDTO.value){
			arr.push({
				dept:i
			})
		}
		let postData = {
			...loginUserStore.loginUser.user,
			commonDept:commonDeptData.value,
			commonDeptDTO:arr
		}
		api_userSave({
		  user: postData,
		}).then(res => {
		  uni.hideLoading();
			if(res.status == 200){
				loginUserStore.setLoginUser(postData);
				uni.showToast({
				  icon: 'none',
				  title: '保存成功'
				});
			}else{
				uni.showToast({
				  icon: 'none',
				  title: res.msg || '请求数据失败！'
				});
			}
		})
  }
  
	// 获取科室列表
	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();
			getBranch()
	    res = res.list || [];
	    deptData.value = res.map(v => ({
	      text: v.dept,
	      value: v.id,
	    }));
	  })
	}
	
	// 获取院区列表
	function getBranch(){
		let postData = {
			branch:'',
			idx:0,
			sum:9999
		}
		if(loginUserStore.loginUser.user.duty){
		  postData.branch = loginUserStore.loginUser.user.duty.id;
		}else if(loginUserStore.loginUser.user.branch){
		  postData.branch = loginUserStore.loginUser.user.branch.id;
		}
		api_branch(postData).then(res => {
		  uni.hideLoading();
		  res = res.list || [];
		  branchData.value = res.map(v => ({
		    text: v.hosName,
		    value: v.id,
		  }));
		})
	}
	
	// 选择常用科室
	function deptSelect(){
		uni.setStorageSync('configData',JSON.stringify(dataForm))
		let data = commonDeptData.value ? 
		commonDeptData.value : loginUserStore.loginUser.user.commonDept
		if(!data){
			data = null
		}
		uni.navigateTo({
		  url: '/pages/repair/deptSelect?data='+JSON.stringify(data)
		})
	}
	
  // 初始化
  function onLoadFn(){
		let data = JSON.parse(uni.getStorageSync('sysData'))
		deptRepair.value = data.find(i=>i.keyconfig=='deptRepair')
		getRepairTypes()
  }
  
  onLoad((option) => {
		if(option.data){
			let data = JSON.parse(option.data)
			commonDeptData.value = data.data.join(',')
			commonDeptName.value = data.name.join('/')
			commonDeptDTO.value = data.name
		}else{
			let user = loginUserStore.loginUser.user
			if(user){
				dataForm.branch = user.branch.id
				dataForm.dept = user.dept.id
				if(user.commonDeptDTO){
					let dept = user.commonDeptDTO.map(i=>{
						return i.dept
					})
					commonDeptName.value = dept.join('/')
				}else{
					commonDeptName.value = user.commonDeptName
				}
			}
		}
		let data = uni.getStorageSync('configData')
		if(data){
			data = JSON.parse(data)
			dataForm.dept = data.dept
			dataForm.branch = data.branch
		}
		for(let i = 0; i<5; i++){
			setTabbar(i)
		}
    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;
	}
	>>>.uni-data-tree-dialog{
		z-index: 9999;
	}
</style>
<style lang="scss" scoped>
page{
  height: calc(100vh - var(--window-bottom));
  background-color: #EBEBEB;
}
.mine{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .phone-filled{
    margin-right: 5rpx;
  }
  .newicon-xinjian2,
	.newicon-zhishiku{
    margin-right: 10rpx;
  }
  .body{
    width: 714rpx;
    height: 100%;
    margin: 16rpx auto var(--window-bottom) auto;
    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;
      .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>