zuel-itsm-3.0.2/src/views/supplementary.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>
          <div>工号</div>
          <div>{{ loginUser.account || "暂无" }}</div>
        </li>
        <li>
          <div>联系电话</div>
          <div class="factionAdd" @click="toModify('mphone')">
            <span>{{ loginUser.mphone || "暂无" }}</span>
            <i class="iconfont icon-moren"></i>
          </div>
        </li>
        <li class="myArea">
          <div>区域地点</div>
          <div>
            <cube-button @click="showCascadePicker">
              {{ areaData || "暂无" }}
              <i class="iconfont icon-moren"></i>
            </cube-button>
          </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="goToSystem" @click="goToSystem">进入系统</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: {
    loginNext() {
      // seimin
      // 获取报修主体
      this.$http
        .post("service/sysinfo/data/fetchDataList/systemConfiguration", {
          idx: 0,
          sum: 1000,
          systemConfiguration: { keyconfig: "repairMain" }
        })
        .then(result => {
          if (result.data.status == 200) {
            var repairMain = result.data.list[0];
            window.localStorage.setItem(
              "repairMain",
              JSON.stringify(repairMain)
            );
            // 获取是否自动建单
            this.$http
              .post("service/sysinfo/data/fetchDataList/systemConfiguration", {
                idx: 0,
                sum: 1000,
                systemConfiguration: { keyconfig: "reqHasCategory" }
              })
              .then(result => {
                if (result.data.status == 200) {
                  var reqHasCategory = result.data.list[0];
                  window.localStorage.setItem(
                    "reqHasCategory",
                    JSON.stringify(reqHasCategory)
                  );
                  this.$router.push({ path: "/main" });
                }
              });
          }
        });
      // seimin
    },
    goToSystem() {
      if (!this.loginUser.mphone) {
        this.$createDialog({
          type: "alert",
          content: "联系电话不能为空",
          icon: "cubeic-wrong"
        }).show();
      } else if (!this.areaData) {
        this.$createDialog({
          type: "alert",
          content: "区域地点不能为空",
          icon: "cubeic-wrong"
        }).show();
      } else {
        this.loginNext();
      }
    },
    toModify(data) {
      this.$router.push({
        name: "MyModify",
        params: {
          data
        }
      });
    },
    getUserAreaData() {
      if (this.loginUser.place) {
        this.areaData =
          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() {
      var that = this;
      this.$http
        .post("service/user/data/fetchDataList/place", {
          idx: 0,
          sum: 1000,
          area: {
            wechatAreaId: ""
          }
        })
        .then(function(res) {
          var 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
                });
              }
            }
          }
          that.cascadePicker = that.$createCascadePicker({
            title: "请选择区域地点",
            data: that.treeData,
            selectedIndex: [0, 0],
            onSelect: that.selectHandle,
            onCancel: that.cancelHandle
          });
        });
    },
    showCascadePicker() {
      this.cascadePicker.show();
    },
    selectHandle(selectedVal, selectedIndex, selectedText) {
      var that = this;
      this.$http
        .get(
          "service/user/updPlace/" + this.loginUser.id + "/" + selectedVal[1],
          {}
        )
        .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.place.id = selectedVal[1];
            that.loginUser.place.area.id = selectedVal[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];
          } 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>
.goToSystem {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 90%;
  height: 1rem;
  background-color: #005395;
  border-radius: 10px;
  line-height: 1rem;
  color: white;
  font-size: 0.36rem;
  text-align: center;
}
.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: 2.4rem;
  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: nowrap;
  text-overflow: ellipsis;
}
</style>