zy-pda/pages/personalCenter/personalCenter.vue

<template>
  <view class="personalCenter">
    <view class="p_header">
      个人信息
    </view>
    <view class="orderDetail_info">
      <scroll-view scroll-y class="orderDetail_infoItem">
        <view class="orderDetail_infoItem_header">
          <view class="orderDetail_infoItem_header_title">
            <view class="taskNameAndWorkerName">
              <text class="taskName">姓名:{{loginInfo.user?loginInfo.user.name:'暂无'}}</text>
            </view>
          </view>
          <text class="orderDetail_infoItem_header_more green">工号:{{loginInfo.user?loginInfo.user.account:'暂无'}}</text>
        </view>
        <view class="orderDetail_infoItem_item">
          <view class="orderDetail_infoItem_item_content">
            <text class="orderDetail_infoItem_item_name">所属院区</text>
            <text
              class="orderDetail_infoItem_item_value">{{loginInfo.user?(loginInfo.user.currentHospital?loginInfo.user.currentHospital.hosName:'暂无'):'暂无'}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content">
            <text class="orderDetail_infoItem_item_name">所属科室</text>
            <text
              class="orderDetail_infoItem_item_value">{{loginInfo.user?(deptDisplay == 2?loginInfo.user.dept.deptalias:loginInfo.user.dept.dept):'暂无'}}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="changeDept">
      <button type="primary" @click="showDeptModel">切换科室</button>
    </view>
    <seiminFooterNav></seiminFooterNav>
    <seiminModel ref="seiminModel"></seiminModel>
    <seiminPicker ref="sPicker" :title="pickerTitle" titleColor="#808080" titleFontSize="28rpx" confirmColor="#333"
      confirmFontSize="38rpx" confirmFontWeight="500" itemFontSize="32rpx" @onClose="closePicker"
      @onConfirm="confirmPicker" :pickerList="hospitalList">
    </seiminPicker>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "vuex";
  export default {
    data() {
      return {
        hospitalList: [], //当前用户权限中的院区列表
        pickerTitle: "", //选择院区picker的title
      };
    },
    computed: {
      ...mapState("login", ["loginInfo"]),
      ...mapState("other", ["deptDisplay"]),
    },
    mounted() {
      //选择院区picker的title
      this.pickerTitle = `您当前所属科室为<b class="green">${this.loginInfo.user.dept.dept}</b>，请您先选择院区`;
      //权限中的院区修改数据结构
      this.hospitalList = this.loginInfo.infoPermission.hospitals.map((v) => ({
        value: v.id,
        label: v.hosName,
      }));
    },
    methods: {
      ...mapMutations('other', [
        "changeSearchDeptParams",
      ]),
      // 切换科室弹窗
      showDeptModel() {
        const {
          user, //当前登录用户
        } = this.loginInfo;
        const userDept =
          user && user.dept ?
          this.deptDisplay == 1 ?
          user.dept.dept :
          user.dept.deptalias :
          "";
        this.$refs.seiminModel.showChangeDept({
          content: `您当前所属科室为<text class="green">${userDept}</text>，如与您实际科室不符点击<text class="red">切换科室</text>。`,
          btns: [{
              name: "知道了",
              textColor: "#49B856",
              flex: 2,
            },
            {
              name: "前往切换科室",
              textColor: "#666",
              flex: 3,
              click: (e) => {
                this.$refs.seiminModel.close();
                this.openPicker();
              },
            },
          ],
        });
      },
      //关闭
      closePicker() {
        this.$refs.sPicker._close();
      },
      //打开
      openPicker() {
        this.$refs.sPicker._open();
        let index = this.hospitalList.findIndex(v => v.value == this.loginInfo.user.currentHospital.id);
        this.$refs.sPicker._changeValue(index);
      },
      //确定：接收子组件传来的参数
      confirmPicker(checkedObj) {
        this.changeSearchDeptParams({
          backUrl: "/pages/personalCenter/personalCenter", //返回的url
          type: "changeDept_index", //首页切换科室
          hospital: checkedObj, //先选择院区
        });
        uni.navigateTo({
          url: "/pages/searchDept/searchDept",
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .personalCenter {
    ::v-deep uni-button[type=primary] {
      background-color: $defaultColor;
    }

    .p_header {
      height: 88rpx;
      font-size: 46rpx;
      color: #333;
      font-weight: bold;
      @include flex(center, center);
    }

    .changeDept {
      margin: 24rpx 24rpx 0;
    }

    .orderDetail_info {
      padding: 0 24rpx;

      .orderDetail_infoItem {
        width: 702rpx;
        height: 30vh;
        background-color: #fff;
        border-radius: 8rpx;
        position: relative;
        padding: 0 24rpx 24rpx;
        font-size: 32rpx;
        @include border;
        @include semicircle(#f9fafb, 82rpx);
        @include flex(flex-start, stretch, column);

        .ji,
        .jiaji {
          width: 60rpx;
          position: absolute;
          right: 0;
          top: 0;
        }

        .orderDetail_infoItem_header {
          height: 86rpx;
          @include border($directive:bottom, $style:dashed);
          @include flex(space-between, center);

          .orderDetail_infoItem_header_title {
            color: #333;
            @include flex(flex-start, center);

            .taskNameAndWorkerName {
              flex: 1;
              @include flex;

              .taskName {
                max-width: 10em;
                font-size: 38rpx;
                font-weight: bold;
                @include clamp;
              }
            }
          }

          .orderDetail_infoItem_header_more {
            color: #333;
            font-weight: bold;
            font-size: 38rpx;
            @include clamp;
          }
        }

        .orderDetail_infoItem_item {
          padding-top: 12rpx;
          padding-bottom: 12rpx;
          color: #333;
          font-size: 30rpx;
          flex: 1;
          @include border(bottom);
          @include flex(flex-start, stretch, column);

          &.process {
            padding-top: 90rpx;
            padding-bottom: 90rpx;
          }

          &:last-of-type {
            border-bottom: none;
          }

          // 工单信息
          .orderDetail_infoItem_item_content {
            margin-top: 20rpx;
            @include flex(space-between, stretch);

            .orderDetail_infoItem_item_name {
              font-size: 34rpx;
              color: #666;
              max-width: 4em;
            }

            .orderDetail_infoItem_item_value {
              font-size: 38rpx;
              color: #333;
              font-weight: bold;
              max-width: 420rpx;
              text-align: justify;
              word-break: break-all;
            }
          }
        }
      }
    }
  }
</style>