GCLS_Page_Personal/src/components/Personalcenter/AccountSet.vue

<template>
  <!-- 账号设置 -->
  <div class="AccountSet">
    <div class="form" v-if="userInfor">
      <el-form
        :model="userInfor"
        ref="ruleForm"
        class="demo-ruleForm"
        :hide-required-asterisk="true"
        :show-message="false"
      >
        <div class="title">{{ $t("Key76") }}</div>
        <el-form-item prop="user_name">
          <span slot="label" class="lable">
            <img src="../../assets/login/singin1.png" alt="" />
            <span>{{ $t("Key25") }}</span>
          </span>
          <el-input
            placeholder="Please enter"
            v-model="userInfor.user_name"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item prop="user_real_name">
          <span slot="label" class="lable">
            <img src="../../assets/login/singin2.png" alt="" />
            <!-- 真实姓名 -->
            <span>{{ $t("Key27") }}</span>
          </span>
          <el-input
            :placeholder="$t('Key28')"
            v-model="userInfor.real_name"
          ></el-input>
          <!-- 保存 -->
          <el-button
            v-loading="realLoading"
            type="warning"
            @click="saveRealName"
            >{{ $t("Key78") }}</el-button
          >
        </el-form-item>
        <el-form-item class="Noafter" v-if="countryList.length > 0">
          <span slot="label" class="lable">
            <img src="../../assets/login/singin3.png" alt="" />
            <!-- 国家 -->
            <span>{{ $t("Key77") }}</span>
          </span>
          <el-select
            v-model="userInfor.country_name"
            placeholder="选择国家"
            @change="changeCountry"
          >
            <el-option
              v-for="(item, index) in countryList"
              :key="item.code + index"
              :value="item.code"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="Noafter" v-if="countryList.length > 0">
          <span slot="label" class="lable">
            <img src="../../assets/login/singin3.png" alt="" />
            <!-- 出生日期 -->
            <span>{{ $t("Key79") }}</span>
          </span>
          <el-date-picker
            v-model="userInfor.birth_date"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="changeBirth"
          >
          </el-date-picker>
        </el-form-item>
        <template>
          <el-form-item prop="org_id" class="Noafter">
            <span slot="label" class="lable">
              <img src="../../assets/login/singin4.png" alt="" />
              <!-- 机构 -->
              <span>{{ $t("Key31") }}</span>
            </span>
            <!--已审核通过的机构-->
            <ul
              v-loading="myOrgloading"
              class="approved_org_list"
              v-if="myOrgList.length > 0"
            >
              <li v-for="(item, index) in myOrgList" :key="item.org_id + index">
                <el-input
                  placeholder="Please enter"
                  v-model="item.org_name"
                  :disabled="true"
                ></el-input>
                <!-- 审核中 -->
                <span class="auditing" v-if="item.is_audited == 'false'">{{
                  $t("Key81")
                }}</span>
                <!--  -->
                <template v-if="!isModOrg">
                  <el-popover
                    placement="top"
                    width="160"
                    class="delOrgBox"
                    v-model="item.isPop"
                  >
                    <p>确定退出本机构吗？</p>
                    <div style="text-align: right; margin: 0">
                      <!-- 取消 -->
                      <el-button size="mini" type="text" @click="close(item)">{{
                        $t("Key83")
                      }}</el-button>
                      <el-button
                        type="primary"
                        size="mini"
                        @click="exitOrg(item)"
                        >{{ $t("Key94") }}</el-button
                      >
                    </div>
                    <img
                      slot="reference"
                      src="../../assets/Personalcenter/del-3.png"
                      class="delOrg"
                    />
                  </el-popover>
                </template>
              </li>
            </ul>
            <template v-if="!isModOrg">
              <el-select
                class="selectOrg"
                v-model="selectedOrgList"
                multiple
                filterable
                allow-create
                default-first-option
                :placeholder="$t('Key32')"
                v-loadmore="SelectScroll"
                v-loading="SelectLoading"
                :disabled="isModOrg"
                @change="changeOrg"
              >
                <el-option
                  v-for="(item, index) in orgList"
                  :key="'orgList_' + index"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select>
            </template>
            <!-- 修改机构 -->
            <el-button v-if="isModOrg" class="btn" @click="modifyOrg">{{
              $t("Key80")
            }}</el-button>
            <div v-else>
              <el-button
                class="btn"
                @click="cancleJoinOrg"
                style="margin-right: 16px"
                >{{ $t("Key83") }}</el-button
              >
              <!-- 完成 -->
              <el-button
                type="warning"
                class="btn"
                @click="joinOrg"
                style="margin-right: 16px"
                >{{ $t("Key82") }}</el-button
              >
            </div>
          </el-form-item>
        </template>
        <el-divider></el-divider>
        <!-- 注册信息 -->
        <div class="title2">{{ $t("Key84") }}</div>
        <el-form-item prop="email">
          <span slot="label" class="lable">
            <!-- 邮箱 -->
            <img src="../../assets/login/singin6.png" alt="" />
            <span>{{ $t("Key34") }}</span>
          </span>
          <el-input
            v-model="userInfor.email_encrypt"
            placeholder="Email"
            :disabled="true"
          />
          <!-- 修改邮箱 -->
          <el-button @click="editEmail">{{ $t("Key86") }}</el-button>
        </el-form-item>
        <el-form-item prop="phone">
          <span slot="label" class="lable">
            <!-- 手机号码 -->
            <img src="../../assets/login/phone2.png" alt="" />
            <span>{{ $t("Key85") }}</span>
          </span>
          <el-input
            v-model="userInfor.phone_encrypt"
            placeholder="phone"
            :disabled="true"
          />
          <!-- 修改手机号 -->
          <el-button @click="editPhone">{{ $t("Key87") }}</el-button>
        </el-form-item>
        <el-form-item prop="password">
          <span slot="label" class="lable">
            <!-- 密码 -->
            <img src="../../assets/login/singin9.png" alt="" />
            <span>{{ $t("Key14") }}</span>
          </span>
          <!-- 请输入密码 -->
          <el-input
            v-model="password"
            type="password"
            :placeholder="$t('Key14')"
            :disabled="true"
          />
          <!-- 修改密码 -->
          <el-button @click="editPassword">{{ $t("Key88") }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <Modifymail ref="Modifymail" />
    <Modifypassword ref="Modifypassword" />
    <Modifyphone ref="Modifyphone" />
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import Cookies from "js-cookie";
import { getContent, getStaticContent } from "@/api/ajax";
import Modifymail from "../common/Modifymail.vue";
import Modifypassword from "../common/Modifypassword.vue";
import Modifyphone from "../common/Modifyphone.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Modifymail,
    Modifypassword,
    Modifyphone,
  },
  props: {},
  data() {
    //这里存放数据
    return {
      form: {},
      userInfor: null,
      countryLoading: false,
      countryList: [],
      country: "",
      pageNum: 1,
      pageSize: 50,
      total: 0,
      orgList: [],
      SelectLoading: false,
      myOrgList: [],
      isModOrg: true,
      selectedOrgList: [],
      isEmail: false,
      myOrgloading: false,
      password: "111111111111",
      realLoading: false,
      title: this.$t("Key65"),
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    //得到我的用户信息
    GetMyUserInfo() {
      let _this = this;
      let MethodName = "user_manager-GetMyUserInfo";

      let data = {};
      getContent(MethodName, data).then((res) => {
        _this.userInfor = res;
        _this.myOrgList = res.org_list;
      });
    },
    changeOrg() {
      console.log(this.selectedOrgList);
    },
    // 去除空格
    trimInput(key) {
      this.form[key] = this.form[key].trim();
    },
    initInfor() {
      let userInfor = getToken();
      if (userInfor) {
        this.userInfor = JSON.parse(userInfor);
        this.userInfor.country = "";
        console.log(this.userInfor);
      }
    },
    //得到国家地区列表
    getCountryList() {
      let MethodName = "dict_manager-GetCountryList";
      let data = {};
      getStaticContent(MethodName, data).then((res) => {
        this.countryList = res.country_list;
      });
    },
    //修改姓名
    saveRealName() {
      if (!this.userInfor.real_name) {
        this.$message.warning("真实姓名不能为空！");
        return;
      }
      this.realLoading = true;
      let MethodName = "user_manager-UpdateMyRealName";
      let data = {
        real_name: this.userInfor.real_name,
      };
      getContent(MethodName, data)
        .then((res) => {
          this.realLoading = false;
          this.$message.success("保存成功");
        })
        .catch(() => {
          this.realLoading = false;
          this.$message.error("保存失败");
        });
    },
    //修改国家
    changeCountry(val) {
      console.log(val);
      let MethodName = "user_manager-UpdateMyCountry";
      let data = {
        country_code: val,
      };
      getContent(MethodName, data)
        .then((res) => {
          this.$message.success("设置成功");
        })
        .catch(() => {
          this.$message.error("设置失败");
        });
    },
    //修改生日
    changeBirth(val) {
      console.log(val);
      let MethodName = "user_manager-UpdateMyBirthDate";
      let data = {
        birth_date: val,
      };
      getContent(MethodName, data)
        .then((res) => {
          this.$message.success("设置成功");
        })
        .catch(() => {
          this.$message.error("设置失败");
        });
    },
    //修改机构
    modifyOrg() {
      this.isModOrg = false;
      this.getinstitutionList();
    },
    //取消修改机构
    cancleJoinOrg() {
      this.isModOrg = true;
      this.selectedOrgList = [];
    },
    //加入机构
    joinOrg() {
      if (this.selectedOrgList.length > 0) {
        let MethodName = "user_manager-JoinOrg";
        let data = {
          org_id_list: this.selectedOrgList,
        };
        getContent(MethodName, data)
          .then((res) => {
            this.$message.success("添加成功");
            this.selectedOrgList = [];
            this.getMyOrgList();
          })
          .catch((error) => {
            this.$message.warning("添加失败");
          });
      } else {
        this.cancleJoinOrg();
      }
    },
    //退出机构
    exitOrg(item) {
      let MethodName = "user_manager-ExitOrg";
      let data = {
        org_id: item.org_id,
      };
      getContent(MethodName, data)
        .then((res) => {
          this.close(item);
          this.$message.success("退出成功");
          setTimeout(() => {
            this.getMyOrgList();
          }, 500);
        })
        .catch((error) => {
          this.close(item);
          this.$message.warning("退出失败");
        });
    },
    close(item) {
      item.isPop = false;
    },
    //得到我的机构列表-org_manager-GetMyOrgList
    getMyOrgList() {
      this.myOrgloading = true;
      let MethodName = "org_manager-GetMyOrgList";
      let data = {
        audited_status: -1,
      };
      getContent(MethodName, data).then((res) => {
        this.myOrgloading = false;
        let myOrgList = res.org_list;
        this.myOrgList = myOrgList.map((item) => {
          item.isPop = false;
          return item;
        });
        console.log(this.myOrgList);
      });
    },
    // 获取机构列表
    getinstitutionList() {
      this.SelectLoading = true;
      let MethodName = "org_manager-PageQueryOrgList";
      let data = {
        name: this.inName,
        page_capacity: this.pageSize,
        cur_page: this.pageNum,
      };
      getContent(MethodName, data).then((res) => {
        this.SelectLoading = false;
        this.total = this.total ? this.total : res.total_count;
        let orgList = JSON.parse(JSON.stringify(this.orgList));
        let list = orgList.concat(res.org_list);
        this.orgList = this.handleOrgList(JSON.parse(JSON.stringify(list)));
      });
    },
    //处理数据交集
    handleOrgList(list) {
      let resArr = [];
      if (this.myOrgList.length > 0) {
        let myOrgId = [];
        this.myOrgList.forEach((item) => {
          myOrgId.push(item.org_id);
        });
        for (let i = 0; i < list.length; i++) {
          let item = list[i];
          if (myOrgId.indexOf(item.id) < 0) {
            resArr.push(item);
          } else {
            this.total = this.total - 1;
          }
        }
      } else {
        resArr = list;
      }

      return resArr;
    },
    // 滚动加载
    SelectScroll() {
      // debugger;
      // console.log(this.orgList.length, this.total);
      // if (this.orgList.length >= this.total) {
      //   // this.$message.warning("No more data");
      //   return;
      // }
      this.pageNum++;
      this.getinstitutionList();
    },
    //修改邮箱
    editEmail() {
      this.$refs.Modifymail.changeShow();
    },
    //修改密码
    editPassword() {
      this.$refs.Modifypassword.changeShow();
    },
    //
    editPhone() {
      this.$refs.Modifyphone.changeShow();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.GetMyUserInfo();
    _this.getCountryList();
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.AccountSet {
  .form {
    padding: 51px 64px 0px 64px;
    .title {
      font-size: 20px;
      font-weight: 600;
      color: #000000;
    }
    .title2 {
      font-size: 20px;
      font-weight: 600;
      color: #000000;
      margin-top: 32px;
    }
    .el-input {
      width: 334px;
    }
    .el-button {
      margin: 0 16px;
    }
    .el-select {
      width: 334px;
      display: block;
      &.selectOrg {
        margin-bottom: 16px;
      }
    }
    .el-form-item {
      margin-top: 24px;
      display: flex;
      .lable {
        display: inline-block;
        min-width: 128px !important;
        text-align: left;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        img {
          width: 24px;
          vertical-align: middle;
        }
        span {
          margin-left: 10px;
          margin-right: 10px;
        }
      }
      .btn {
        margin-left: 0px;
      }
    }
  }
  .approved_org_list {
    > li {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 16px;
      .auditing {
        font-weight: normal;
        font-size: 16px;
        line-height: 150%;
        color: #ff3f3f;
        margin-left: 24px;
        margin-right: 24px;
      }
      .delOrgBox {
        display: flex;
      }
      .delOrg {
        margin-left: 24px;
        margin-right: 24px;
        height: 100%;
        cursor: pointer;
        width: 24px;
        height: 24px;
      }
    }
  }
}
</style>
<style lang="scss">
.AccountSet {
  .el-form-item__label {
    font-size: 16px;
    padding: 8px 0;
    line-height: 16px;
  }
  .el-button--warning {
    background: #ff9900;
    font-size: 16px;
  }
}
</style>