zuel-itsm-3.0.2/src/views/my.vue

<template>
  <div class="bgColor">
    <div class="head">
      <!-- <div class="img"></div> -->
      <div class="name">{{ loginUser.name }}</div>
    </div>
    <div class="myMessage">
      <div class="label">个人信息</div>
      <ul>
        <li>
          <div>姓名</div>
          <div>{{ loginUser.name }}</div>
        </li>
        <li v-if="repairMain.valueconfig == 2">
          <div>科室名称</div>
          <div>{{ loginUser.dept ? loginUser.dept.dept : "暂无" }}</div>
        </li>
        <li>
          <div>工号</div>
          <div>{{ loginUser.account }}</div>
        </li>
        <li>
          <div>联系电话</div>
          <div v-if="repairMain.valueconfig == 1">
            <a :href="'tel:' + loginUser.mphone"><i class="iconfont icon-shouji"></i>{{ loginUser.mphone }}</a>
          </div>
          <div v-if="repairMain.valueconfig != 1 && loginUser.dept">
            <a :href="'tel:' + loginUser.dept.phone"><i class="iconfont icon-shouji"></i>{{
              loginUser.dept.phone
            }}</a>
          </div>
          <div v-if="repairMain.valueconfig != 1 && !loginUser.dept">暂无</div>
        </li>
        <li class="myArea">
          <div>校区区域地点</div>
          <div>
            <cube-button @click="showCascadePicker">
              {{ areaData || "暂无" }}
            </cube-button>
            <i class="iconfont icon-moren"></i>
          </div>
        </li>
        <li>
          <div>详细地址</div>
          <div class="factionAdd" @click="toModify('houseNumber')">
            <span>{{ loginUser.houseNumber || "暂无" }}</span>
            <i class="iconfont icon-moren"></i>
          </div>
        </li>
      </ul>
    </div>
    <div class="myRapir">
      <div class="label">我的报修</div>
      <div class="tit">
        <div>我的报修</div>
        <div @click="toIncidentList()">
          {{ incidentStateData.resultCount }}条&nbsp;&nbsp;&nbsp;>
        </div>
      </div>
      <div class="rapirMessage">
        <div class="status" @click="toIncidentList(1592)">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-daishouli" />
            </svg>
          </div>
          <div>
            <span>未受理</span>
            <span>{{
              incidentStateData.notAcc > 99 ? 99 : incidentStateData.notAcc
            }}</span>
          </div>
        </div>
        <div class="status" @click="toIncidentList(1593)">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-bushouli" />
            </svg>
          </div>
          <div>
            <span>不受理</span>
            <span>{{
              incidentStateData.noAcc > 99 ? 99 : incidentStateData.noAcc
            }}</span>
          </div>
        </div>
        <div class="status" @click="toIncidentList(1594)">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-chulizhong" />
            </svg>
          </div>
          <div>
            <span>处理中</span>
            <span>{{
              incidentStateData.processing > 99
                ? 99
                : incidentStateData.processing
            }}</span>
          </div>
        </div>
        <div class="status" @click="toIncidentList(1595)">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-daipingjia" />
            </svg>
          </div>
          <div>
            <span>待评价</span>
            <span>{{
              incidentStateData.evaluated > 99
                ? 99
                : incidentStateData.evaluated
            }}</span>
          </div>
        </div>
        <div class="status" @click="toIncidentList(1596)">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yijiejue" />
            </svg>
          </div>
          <div>
            <span>已解决</span>
            <span>{{
              incidentStateData.solve > 99 ? 99 : incidentStateData.solve
            }}</span>
          </div>
        </div>
        <div class="status" @click="toIncidentList(1597)">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yichehui" />
            </svg>
          </div>
          <div>
            <span>已撤回</span>
            <span>{{
              incidentStateData.retract > 99 ? 99 : incidentStateData.retract
            }}</span>
          </div>
        </div>
      </div>
    </div>
    <promp-ting
      :conents="promptingConent"
      :status="promptingStatus"
    ></promp-ting>
  </div>
</template>
<script>
import "./../../static/css/iconfont.js";
import PrompTing from "./../views/prompting.vue";
export default {
  data() {
    return {
      repairMain: null,
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      incidentStateData: "",
      treeData: [],
      areaData: "",
      promptingConent: "",
      promptingStatus: ""
    };
  },
  methods: {
    toModify(data) {
      this.$router.push({
        name: "MyModify",
        params: {
          data
        }
      });
    },
    getUserAreaData() {
      if (this.loginUser.place && this.loginUser.branch) {
        this.areaData = this.loginUser.branch.hosName + " " +this.loginUser.place.area.area + " " + this.loginUser.place.place;
      }
    },
    toIncidentList(res) {
      this.$router.push({
        name: "IncidentList",
        params: {
          state: res
        }
      });
    },
    getIncidentData() {
      var that = this;
      this.$http
        .post("service/apply/bpm/fetchServiceTasks", {
          assignee: that.loginUser.account,
          idx: 0,
          sum: 9999
        })
        .then(function(res) {
          that.incidentStateData = res.data;
        });
    },
    getAreaData() {
      var that = this;
      this.$http
        .post("service/user/data/fetchDataList/area", {
          idx: 0,
          sum: 1000,
          area: {
            wechatArea: true
          }
        })
        .then(function(res) {
          var data = res.data.list;
          for (var i = 0; i < data.length; i++) {
            that.treeData.push({
              text: data[i].area,
              value: data[i].id,
              children: []
            });
          }
        });
    },
    getPlaceData() {
      this.$http
        .post("service/user/data/fetchDataList/place", {
          idx: 0,
          sum: 1000,
          area: {
            wechatAreaId: ""
          }
        })
        .then((res) => {
          let data = res.data.list;
          // for (var i = 0; i < data.length; i++) {
          //   for (var j = 0; j < that.treeData.length; j++) {
          //     if (data[i].area.id == that.treeData[j].value) {
          //       that.treeData[j].children.push({
          //         text: data[i].place,
          //         value: data[i].id
          //       });
          //     }
          //   }
          // }
          console.log(data, 'data');
          this.treeData = [];
          const collectionBranch = {};
          data.forEach((v) => {
            if(collectionBranch[v.area.branch]){
              collectionBranch[v.area.branch].push(v);
            }else{
              this.treeData.push({text:v.area.branchName, value: v.area.branch, children: []})
              collectionBranch[v.area.branch] = [v];
            }
          })

          this.treeData.forEach(v => {
            let areaByPlace = collectionBranch[v.value];
            let areaCollection = {};
            let areaArr = [];
            areaByPlace.forEach(vv => {
              if(areaCollection[vv.area.id]){
                areaCollection[vv.area.id].push({text:vv.place, value: vv.id});
              }else{
                areaArr.push({text:vv.area.area, value: vv.area.id, children: []})
                areaCollection[vv.area.id] = [{text:vv.place, value: vv.id}];
              }
            })
            areaArr.forEach(vv => {
              vv.children = areaCollection[vv.value];
            })
            v.children = areaArr;
          })

          console.log(collectionBranch,'collectionBranch集合');
          console.log(this.treeData,'地点');
          this.cascadePicker = this.$createCascadePicker({
            title: "请选择校区区域地点",
            data: this.treeData,
            selectedIndex: [0, 0, 0],
            onSelect: this.selectHandle,
            onCancel: this.cancelHandle
          });
        });
    },
    showCascadePicker() {
      this.cascadePicker.show();
    },
    selectHandle(selectedVal, selectedIndex, selectedText) {
      var that = this;
      this.$http
        .get(
          "service/user/updPlace/" + this.loginUser.id + "/" + selectedVal[2],
          {}
        )
        .then(function(res) {
          if (res.status == 200) {
            that.promptingConent = "恭喜您,修改校区区域地点成功!";
            that.promptingStatus = true;
            $("#fade").fadeIn();
            setTimeout(function() {
              $("#fade").fadeOut();
            }, 2000);
            if (!that.loginUser.place) {
              that.loginUser.place = {
                area: {}
              };
            }
            that.loginUser.branch = {id: selectedVal[0]};
            that.loginUser.place.id = selectedVal[1];
            that.loginUser.place.area.id = selectedVal[0];
            that.loginUser.branch.hosName = selectedText[0];
            that.loginUser.place.place = selectedText[1];
            that.loginUser.place.area.area = selectedText[0];
            var loginUserStr = JSON.stringify(that.loginUser);
            localStorage.setItem("loginUser", loginUserStr);
            that.areaData = selectedText[0] + " " + selectedText[1] + " " + selectedText[2];
          } else {
            that.promptingConent = "对不起,修改失败,请稍后再试!";
            that.promptingStatus = false;
            $("#fade").fadeIn();
            setTimeout(function() {
              $("#fade").fadeOut();
            }, 2000);
          }
        });
    },
    cancelHandle() {}
  },
  created() {
    this.getUserAreaData();
    this.getAreaData();
    this.getPlaceData();
    this.getIncidentData();
    // 获取报修主体
    this.repairMain = JSON.parse(localStorage.getItem("repairMain"));
  },
  mounted() {
    // this.cascadePicker = this.$createCascadePicker({
    //     title: '请选择校区区域地点',
    //     data: this.treeData,
    //     selectedIndex: [0,0],
    //     onSelect: this.selectHandle,
    //     onCancel: this.cancelHandle
    // })
  },
  components: {
    PrompTing
  }
};
</script>
<style scoped>
.bgColor {
  background-color: white;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.label {
  background-color: rgb(238, 238, 238);
  height: 0.6rem;
  line-height: 0.6rem;
  padding-left: 0.2rem;
  font-size: 0.24rem;
  color: #666666;
  border-top: 0.01rem rgb(223, 222, 222) solid;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}
/* 头像 */

.head {
  height: 1.04rem;
  background: linear-gradient(#005395, #226ca8);
  padding-top: 0.3rem;
}

.head .img {
  width: 1.36rem;
  height: 1.36rem;
  border-radius: 50%;
  margin: 0 auto;
  overflow: hidden;
  background: url(./../../static/images/avatar-1-big.jpg);
  background-size: contain;
}

.head .name {
  font-size: 0.32rem;
  text-align: center;
  margin-top: 0.2rem;
  color: #ffffff;
}

/* 个人信息 */

/* .myMessage { */
/* background-color: rgb(242, 242, 242); */
/* margin-top: .2rem */
/* } */

.myMessage li {
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding: .2rem .28rem */
  /* height: .88rem; */
  /* line-height: .88rem; */
  line-height: 0.4rem;
  padding: 0.24rem 0.24rem;
}

.myMessage li div:nth-child(1) {
  width: 35%;
  font-size: 0.32rem;
}

.myMessage li div:nth-child(2) {
  width: 55%;
  display: flex;
  justify-content: flex-end;
  font-size: 0.32rem;
  /* line-height: .3rem */
}
.factionAdd {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.factionAdd span {
  display: inline-block;
  width: 90%;
  text-align: right;
}
.factionAdd i {
  display: inline-block;
  font-size: 0.34rem;
  width: 12%;
}
/* 我的报修 */

/* .myRapir {
    margin-top: .2rem
} */

.myRapir .tit {
  /* background-color: rgb(242, 242, 242); */
  height: 0.88rem;
  line-height: 0.88rem;
  display: flex;
  padding: 0 0.24rem;
  font-size: 0.32rem;
  justify-content: space-between;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}

.rapirMessage {
  display: flex;
  height: 1.4rem;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}
.rapirMessage .status {
  width: 16.5%;
  border-left: 0.01rem rgb(223, 222, 222) solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.rapirMessage .status div:nth-child(1) {
  width: 100%;
  text-align: center;
}
.rapirMessage .status div:nth-child(1) svg {
  width: 0.48rem;
  height: 0.48rem;
}
.rapirMessage .status div:nth-child(2) {
  margin-top: 0.2rem;
  display: flex;
  align-items: center;
}
.rapirMessage .status div:nth-child(2) span:nth-child(1) {
  font-size: 0.24rem;
  color: #333333;
}
.rapirMessage .status div:nth-child(2) span:nth-child(2) {
  display: inline-block;
  margin-left: 0.08rem;
  font-size: 0.32rem;
}
</style>
<style>
.myArea .cube-btn {
  padding: 0 !important;
  background-color: white !important;
  color: #333333 !important;
  text-align: right !important;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
}
</style>