HM21St_Page_Manager/src/components/Setting.vue

<template>
  <div class="setting" v-if="info">
    <template v-if="!settingFlag">
      <div class="setting-top">
        <div class="avator-box">
          <el-image
            :src="
              info.sys_user && info.sys_user.image_url
                ? info.sys_user.image_url
                : info.image_url
                ? info.image_url
                : require('../assets/avatar.png')
            "
            fit="cover"
            style="width: 96px; height: 96px"
          >
          </el-image>
          <a class="img-crop" v-if="page !== 'personCheck'">
            <upload
              :datafileList="infoForm.cover_image_list"
              :filleNumber="99"
              :changeFillId="handleAvatarSuccess"
              :fileName="'cover'"
              :showList="true"
              uploadType="image"
            />
          </a>
        </div>
        <div class="center">
          <div class="info-items">
            <label>用户名：</label>
            <span>{{
              page === "editPerson" || page === "personal"
                ? info.sys_user.user_name
                : info.user_name
            }}</span>
          </div>
          <div class="info-items">
            <label>手机号码：</label>
            <span>{{
              (page === "editPerson" || page === "personal") &&
              info.sys_user.phone
                ? info.sys_user.phone.substring(0, 3) +
                  "******" +
                  info.sys_user.phone.substring(9, 11)
                : info.phone
                ? info.phone.substring(0, 3) +
                  "******" +
                  info.phone.substring(9, 11)
                : "-"
            }}</span>
          </div>
          <div class="info-items">
            <label>账号ID：</label>
            <span>{{
              page === "editPerson" || page === "personal"
                ? info.sys_user.id
                : info.id
            }}</span>
          </div>
          <div class="info-items">
            <label>邮箱：</label>
            <span>{{
              (page === "editPerson" || page === "personal") &&
              info.sys_user.email
                ? info.sys_user.email
                : info.email
                ? info.email
                : "-"
            }}</span>
          </div>
          <div class="info-items">
            <label>{{
              page === "editPerson" || page === "personal"
                ? "创建时间："
                : "注册时间："
            }}</label>
            <span>{{
              page === "editPerson" || page === "personal"
                ? info.sys_user.create_time
                : info.register_time
            }}</span>
          </div>
          <div
            class="info-items"
            v-if="page === 'editOrgPerson' || page === 'personCheck'"
          >
            <label>机构：</label>
            <span>{{ info.org_name }}</span>
          </div>
        </div>
      </div>
      <div class="setting-bottom">
        <div class="tabs-box">
          <a
            :class="[tabsIndex === 0 ? 'active' : '']"
            @click="handleChangeTabs(0)"
            >基本信息</a
          >
          <a
            :class="[tabsIndex === 1 ? 'active' : '']"
            @click="handleChangeTabs(1)"
            v-if="page !== 'personCheck'"
            >安全设置</a
          >
          <a
            :class="[tabsIndex === 2 ? 'active' : '']"
            @click="handleChangeTabs(2)"
            v-if="page !== 'personCheck'"
            >{{
              page === "editPerson" || page === "personal"
                ? "我的权限"
                : "权限设置"
            }}</a
          >
        </div>
        <template v-if="tabsIndex === 0">
          <el-form
            :model="infoForm"
            :rules="rules"
            ref="ruleForm"
            label-width="150px"
            class="setting-form"
          >
            <el-form-item label="用户名" prop="name">
              <el-input
                v-model="infoForm.name"
                disabled
                placeholder="请输入用户名"
                maxlength="20"
              ></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" prop="realName">
              <el-input
                v-model="infoForm.realName"
                placeholder="请输入真实姓名"
                @blur="handleTrim('infoForm', 'realName')"
                maxlength="20"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="infoForm.sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="所在省市" prop="selectedOptions">
              <el-cascader
                size="medium"
                :options="$provinceCityList"
                v-model="infoForm.selectedOptions"
                @change="handleCity"
              >
              </el-cascader>
            </el-form-item>
            <el-form-item label="备注" prop="desc">
              <el-input
                type="textarea"
                v-model="infoForm.desc"
                placeholder="请输入备注"
                maxlength="100"
                :rows="4"
                show-word-limit
                @blur="handleTrim('infoForm', 'desc')"
              ></el-input>
            </el-form-item>
            <el-form-item v-if="page !== 'personCheck'">
              <el-button
                type="primary"
                @click="onSubmit('ruleForm')"
                size="small"
                :loading="loading"
                >保存</el-button
              >
              <el-button @click="onCancel('ruleForm')" size="small"
                >取消</el-button
              >
            </el-form-item>
            <el-form-item v-else>
              <el-button
                type="primary"
                @click="handleAudit('up')"
                size="small"
                :loading="loading"
                >通过</el-button
              >
              <el-button @click="handleAudit('down')" size="small"
                >拒绝</el-button
              >
            </el-form-item>
          </el-form>
        </template>
        <template v-if="tabsIndex === 1">
          <div class="safe-items">
            <label>登录密码</label>
            <div class="safe-items-right">
              <p class="hasContent">
                已设置。密码至少6位字符，支持数字和字母，且必须同时包含数字和大小写字母。
              </p>
              <!-- <p v-else class="noContent">
                        您暂未设置密码，密码可以有效的保护账号的安全。 
                        </p> -->
              <a @click="handleSetting('passwordFlag')">{{ "修改" }}</a>
            </div>
          </div>
          <div class="safe-items">
            <label>绑定手机</label>
            <div class="safe-items-right">
              <p
                v-if="info.phone || (info.sys_user && info.sys_user.phone)"
                class="hasContent"
              >
                已绑定：
                {{
                  (page === "editPerson" || page === "personal") &&
                  info.sys_user.phone
                    ? info.sys_user.phone.substring(0, 3) +
                      "******" +
                      info.sys_user.phone.substring(9, 11)
                    : info.phone
                    ? info.phone.substring(0, 3) +
                      "******" +
                      info.phone.substring(9, 11)
                    : "-"
                }}
              </p>
              <p v-else class="noContent">
                您暂未绑定手机，绑定手机可以有效的保护账号的安全。
              </p>
              <a @click="handleSetting('phoneFlag')">{{
                info.phone || (info.sys_user && info.sys_user.phone)
                  ? "修改"
                  : "设置"
              }}</a>
            </div>
          </div>
          <div class="safe-items">
            <label>绑定邮箱</label>
            <div class="safe-items-right">
              <p
                v-if="info.email || (info.sys_user && info.sys_user.email)"
                class="hasContent"
              >
                已绑定： {{ info.email || info.sys_user.email }}
              </p>
              <p v-else class="noContent">
                您暂未设置邮箱，绑定邮箱可以用来找回密码、接收通知等。
              </p>
              <a @click="handleSetting('emailFlag')">{{
                info.email || (info.sys_user && info.sys_user.email)
                  ? "修改"
                  : "设置"
              }}</a>
            </div>
          </div>
        </template>
        <template
          v-if="
            tabsIndex === 2 && (page === 'editPerson' || page === 'personal')
          "
        >
          <table class="step-table">
            <tr>
              <td rowspan="2" class="step-table-header">管理权限</td>
              <td>系统用户</td>
              <td>机构管理</td>
            </tr>
            <tr>
              <td>
                <el-checkbox
                  v-model="manageAuth"
                  :label="10001"
                  :disabled="page === 'personal' ? true : false"
                  ><br
                /></el-checkbox>
              </td>
              <td>
                <el-checkbox
                  v-model="manageAuth"
                  :label="10002"
                  :disabled="page === 'personal' ? true : false"
                  ><br
                /></el-checkbox>
              </td>
            </tr>
          </table>
          <table class="step-table">
            <tr>
              <td rowspan="2" class="step-table-header">内容权限</td>
              <td class="td1">报纸管理</td>
              <td class="td1">画刊管理</td>
              <td class="td1">专辑管理</td>
              <td class="td1">评测管理</td>
              <td class="td1">练习册管理</td>
              <td class="td1">课程管理</td>
              <td class="td1">广告管理</td>
            </tr>
            <tr>
              <td class="td1">
                <el-checkbox
                  v-model="manageAuth"
                  :label="20001"
                  :disabled="page === 'personal' ? true : false"
                  ><br
                /></el-checkbox>
              </td>
              <td class="td1">
                <el-checkbox
                  v-model="manageAuth"
                  :label="20002"
                  :disabled="page === 'personal' ? true : false"
                  ><br
                /></el-checkbox>
              </td>
              <td class="td1">
                <el-checkbox
                  v-model="manageAuth"
                  :label="20003"
                  :disabled="page === 'personal' ? true : false"
                  ><br
                /></el-checkbox>
              </td>
              <td class="td1">
                <el-checkbox
                  v-model="manageAuth"
                  :label="20004"
                  :disabled="page === 'personal' ? true : false"
                  ><br
                /></el-checkbox>
              </td>
              <td class="td1">
                <el-checkbox
                  v-model="manageAuth"
                  :label="20005"
                  :disabled="page === 'personal' ? true : false"
                  ><br
                /></el-checkbox>
              </td>
              <td class="td1">
                <el-checkbox
                  v-model="manageAuth"
                  :label="20006"
                  :disabled="page === 'personal' ? true : false"
                  ><br
                /></el-checkbox>
              </td>
              <td class="td1">
                <el-checkbox
                  v-model="manageAuth"
                  :label="20007"
                  :disabled="page === 'personal' ? true : false"
                  ><br
                /></el-checkbox>
              </td>
            </tr>
          </table>
          <table class="step-table">
            <tr>
              <td rowspan="2" class="step-table-header">兑换码权限</td>
              <td>生成兑换码</td>
              <td>查看兑换码使用情况</td>
              <td>消费报表</td>
            </tr>
            <tr>
              <td>
                <el-checkbox
                  v-model="manageAuth"
                  :label="30001"
                  :disabled="page === 'personal' ? true : false"
                  ><br
                /></el-checkbox>
              </td>
              <td>
                <el-radio-group
                  v-model="codeAuth.viewCode"
                  :disabled="page === 'personal' ? true : false"
                >
                  <el-radio :label="1">全部</el-radio>
                  <el-radio :label="0">自己生成的</el-radio>
                </el-radio-group>
              </td>
              <td>
                <el-checkbox
                  v-model="manageAuth"
                  :label="30003"
                  :disabled="page === 'personal' ? true : false"
                  ><br
                /></el-checkbox>
              </td>
            </tr>
          </table>
          <table class="step-table">
            <tr>
              <td rowspan="2" class="step-table-header">财务权限</td>
              <td class="td1">查看数据</td>
              <td class="td1">导出数据</td>
              <td>授权地区</td>
              <td class="td1">退款管理</td>
            </tr>
            <tr>
              <td class="td1">
                <el-checkbox
                  v-model="manageAuth"
                  :label="40001"
                  :disabled="page === 'personal' ? true : false"
                  ><br
                /></el-checkbox>
              </td>
              <td class="td1">
                <el-checkbox
                  v-model="manageAuth"
                  :label="40002"
                  :disabled="page === 'personal' ? true : false"
                  ><br
                /></el-checkbox>
              </td>
              <td>
                <el-cascader
                  :disabled="page === 'personal' ? true : false"
                  class="step-cascader"
                  size="medium"
                  :props="props"
                  collapse-tags
                  clearable
                  :options="$provinceCityListAll"
                  v-model="financeAuth.selectedOptions"
                  @change="handleCity"
                >
                </el-cascader>
              </td>
              <td class="td1">
                <el-checkbox
                  v-model="manageAuth"
                  :label="40003"
                  :disabled="page === 'personal' ? true : false"
                  ><br
                /></el-checkbox>
              </td>
            </tr>
          </table>
          <table class="step-table">
            <tr>
              <td rowspan="2" class="step-table-header">系统配置</td>
              <td>系统配置</td>
            </tr>
            <tr>
              <td>
                <el-checkbox
                  v-model="manageAuth"
                  :label="50001"
                  :disabled="page === 'personal' ? true : false"
                  ><br
                /></el-checkbox>
              </td>
            </tr>
          </table>
          <template v-if="page === 'editPerson'">
            <el-button
              type="primary"
              @click="onSubmitAuth()"
              size="small"
              :loading="loading"
              >保存</el-button
            >
            <el-button @click="onCancelAuth()" size="small">取消</el-button>
          </template>
        </template>
        <template v-if="tabsIndex === 2 && page === 'editOrgPerson'">
          <el-form
            :model="managerForm"
            ref="managerForm"
            label-width="150px"
            class="setting-form"
          >
            <el-form-item label="机构管理员" prop="is_manager">
              <el-radio-group v-model="managerForm.is_manager">
                <el-radio label="true">是</el-radio>
                <el-radio label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="阅读全部内容" prop="is_can_see_all_content">
              <el-radio-group v-model="managerForm.is_can_see_all_content">
                <el-radio label="true">是</el-radio>
                <el-radio label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="onSubmitManager('managerForm')"
                size="small"
                :loading="loading"
                >保存</el-button
              >
              <el-button @click="onCancel('managerForm')" size="small"
                >取消</el-button
              >
            </el-form-item>
          </el-form>
        </template>
      </div>
    </template>
    <div class="setting-iframe" v-if="settingFlag && passwordFlag">
      <p class="title">
        <i
          class="el-icon-arrow-left"
          @click="handleSetting('passwordFlag')"
        ></i>
        修改登录密码
      </p>
      <el-form
        :model="passwordForm"
        :rules="rulesPassword"
        ref="passwordForm"
        label-width="100px"
        class="passwordForm"
      >
        <!-- <el-form-item label="原始密码" prop="oldPwd">
                <el-input v-model="passwordForm.oldPwd" :type="oldPwdFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" >
                    <i slot="suffix" class="el-icon-view show-icon" @click="changeIcon('oldPwdFlag')" v-if="oldPwdFlag"></i>
                    <i slot="suffix" class="show-icon" @click="changeIcon('oldPwdFlag')" v-else>
                        <svg-icon icon-class="eye-invisible"></svg-icon>
                    </i>
                </el-input>
            </el-form-item> -->
        <el-form-item label="修改密码" prop="newPwd">
          <el-input
            v-model="passwordForm.newPwd"
            :type="newPwdFlag ? 'text' : 'password'"
            autocomplete="off"
            placeholder="请输入密码"
            @blur="handleTrim('passwordForm', 'newPwd')"
            maxlength="20"
          >
            <i
              slot="suffix"
              class="el-icon-view show-icon"
              @click="changeIcon('newPwdFlag')"
              v-if="newPwdFlag"
            ></i>
            <i
              slot="suffix"
              class="show-icon"
              @click="changeIcon('newPwdFlag')"
              v-else
            >
              <svg-icon icon-class="eye-invisible"></svg-icon>
            </i>
          </el-input>
          <p class="tips">不少于6位，且必须同时包含数字和大小写字母</p>
        </el-form-item>
        <el-form-item label="再次输入" prop="confirmPwd">
          <el-input
            v-model="passwordForm.confirmPwd"
            :type="comfirmPwdFlag ? 'text' : 'password'"
            autocomplete="off"
            placeholder="请输入密码"
            @blur="handleTrim('passwordForm', 'confirmPwd')"
            maxlength="20"
          >
            <i
              slot="suffix"
              class="el-icon-view show-icon"
              @click="changeIcon('comfirmPwdFlag')"
              v-if="comfirmPwdFlag"
            ></i>
            <i
              slot="suffix"
              class="show-icon"
              @click="changeIcon('comfirmPwdFlag')"
              v-else
            >
              <svg-icon icon-class="eye-invisible"></svg-icon>
            </i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmitPassword('passwordForm')"
            size="small"
            :loading="loading"
            >保存</el-button
          >
          <el-button @click="onCancel('passwordForm')" size="small"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="setting-iframe" v-if="settingFlag && phoneFlag">
      <p class="title">
        <i class="el-icon-arrow-left" @click="handleSetting('phoneFlag')"></i>
        修改绑定手机
      </p>
      <el-form
        :model="phoneForm"
        :rules="rulesPhone"
        ref="phoneForm"
        label-width="100px"
        class="phoneForm"
      >
        <el-form-item
          label="原手机号"
          prop="oldPhone"
          v-if="phoneForm.oldPhone"
        >
          <el-input
            v-model="phoneForm.oldPhone"
            autocomplete="off"
            :disabled="phoneForm.oldPhone ? true : false"
            placeholder="请输入完整手机号"
            @blur="handleTrim('phoneForm', 'oldPhone')"
            maxlength="20"
          >
            <template slot="prepend">+86</template>
          </el-input>
        </el-form-item>
        <el-form-item label="新手机号" prop="newPhone">
          <el-input
            v-model="phoneForm.newPhone"
            autocomplete="off"
            placeholder="请输入完整手机号"
            @blur="handleTrim('phoneForm', 'newPhone')"
            maxlength="20"
          >
            <template slot="prepend">+86</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmitPhone('phoneForm')"
            size="small"
            :loading="loading"
            >保存</el-button
          >
          <el-button @click="onCancel('phoneForm')" size="small"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="setting-iframe" v-if="settingFlag && emailFlag">
      <p class="title">
        <i class="el-icon-arrow-left" @click="handleSetting('emailFlag')"></i>
        修改安全邮箱
      </p>
      <el-form
        :model="emailForm"
        :rules="rulesEmail"
        ref="emailForm"
        label-width="100px"
        class="emailForm"
      >
        <el-form-item label="原邮箱" prop="email" v-if="emailForm.email">
          <el-input
            v-model="emailForm.email"
            autocomplete="off"
            :disabled="emailForm.email ? true : false"
            placeholder="请输入邮箱地址"
            @blur="handleTrim('emailForm', 'email')"
            maxlength="100"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="新邮箱" prop="newEmail">
          <el-input
            v-model="emailForm.newEmail"
            autocomplete="off"
            placeholder="请输入邮箱地址"
            @blur="handleTrim('emailForm', 'newEmail')"
            maxlength="100"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmitEmail('emailForm')"
            size="small"
            :loading="loading"
            >保存</el-button
          >
          <el-button @click="onCancel('emailForm')" size="small"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Upload from "./Upload.vue";
import { getLogin } from "@/api/ajax";
import { getToken } from "@/utils/auth";
import { mapState } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Upload },
  props: ["page", "info"],
  data() {
    //这里存放数据
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]+)[a-zA-Z\d]{6,200}$/;
        let result = reg.test(value);
        if (result) {
          callback();
        } else {
          callback(new Error("密码必须同时包含数字和大小写字母"));
        }
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.passwordForm.newPwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    const validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else {
        let reg = /^1[3-9]\d{9}$/;
        let result = reg.test(value);
        if (result) {
          callback();
        } else {
          callback(new Error("请输入正确的手机号"));
        }
      }
    };
    const validateEmail = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入邮箱地址"));
      } else {
        let reg = /^[a-zA-Z0-9_\.-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        let result = reg.test(value);
        if (result) {
          callback();
        } else {
          callback(new Error("请输入正确的邮箱地址"));
        }
      }
    };
    const validateProvince = (rule, value, callback) => {
      if (value === []) {
        callback(new Error("请选择所在省市"));
      } else if (value.length === 2) {
        if (value[0] === "" || value[1] === "") {
          callback(new Error("请选择所在省市"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      show: false, // 编辑头像flag
      tabsIndex: 0,
      infoForm: {
        cover_image_url: "",
        cover_image_list: [],
        cover_image_id: null,
        name:
          this.page === "editPerson" || this.page === "personal"
            ? JSON.parse(JSON.stringify(this.info.sys_user.user_name))
            : JSON.parse(JSON.stringify(this.info.user_name)),
        realName:
          this.page === "editPerson" || this.page === "personal"
            ? JSON.parse(JSON.stringify(this.info.sys_user.real_name))
            : JSON.parse(JSON.stringify(this.info.real_name)),
        sex:
          this.page === "editPerson" || this.page === "personal"
            ? JSON.parse(JSON.stringify(this.info.sys_user.sex))
            : JSON.parse(JSON.stringify(this.info.sex)),
        selectedOptions:
          this.page === "editPerson" || this.page === "personal"
            ? [
                JSON.parse(JSON.stringify(this.info.sys_user.province_id)),
                JSON.parse(JSON.stringify(this.info.sys_user.city_id)),
              ]
            : [
                JSON.parse(JSON.stringify(this.info.province_id)),
                JSON.parse(JSON.stringify(this.info.city_id)),
              ],
        desc:
          this.page === "editPerson" || this.page === "personal"
            ? JSON.parse(JSON.stringify(this.info.sys_user.memo))
            : JSON.parse(JSON.stringify(this.info.memo)),
      },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        selectedOptions: [
          {
            type: "array",
            required: true,
            validator: validateProvince,
            trigger: "change",
          },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
      },
      settingFlag: false, // 修改设置
      passwordFlag: false, // 修改密码
      phoneFlag: false, // 修改手机
      emailFlag: false, // 修改邮箱
      passwordForm: {
        newPwd: "", // 新密码
        confirmPwd: "", // 确认密码
      },
      rulesPassword: {
        newPwd: [
          { required: true, validator: validatePass, trigger: "blur" },
          {
            min: 6,
            message: "请输入不少于 6 位密码，且必须同时包含数字和大小写字母",
            trigger: "change",
          },
        ],
        confirmPwd: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
      oldPwdFlag: false, // 查看旧密码
      newPwdFlag: false, // 查看新密码
      comfirmPwdFlag: false, // 查看确认密码
      phoneForm: {
        oldPhone:
          this.page === "editPerson" || this.page === "personal"
            ? JSON.parse(JSON.stringify(this.info.sys_user.phone))
            : JSON.parse(JSON.stringify(this.info.phone)), // 旧手机
        newPhone: "", // 新手机
      },
      rulesPhone: {
        oldPhone: [
          { required: true, validator: validatePhone, trigger: "blur" },
        ],
        newPhone: [
          { required: true, validator: validatePhone, trigger: "blur" },
        ],
      },
      time: 60, //获取验证码的时间
      verificationCodeShow: false, //是否已经获取了验证码
      times: 60, //获取验证码的时间
      verificationCodesShow: false, //是否已经获取了验证码
      timee: 60, //获取验证码的时间
      verificationCodeeShow: false, //是否已经获取了验证码
      emailForm: {
        email:
          this.page === "editPerson" || this.page === "personal"
            ? JSON.parse(JSON.stringify(this.info.sys_user.email))
            : JSON.parse(JSON.stringify(this.info.email)),
        newEmail: "",
      },
      rulesEmail: {
        email: [{ required: true, validator: validateEmail, trigger: "blur" }],
        newEmail: [
          { required: true, validator: validateEmail, trigger: "blur" },
        ],
      },
      manageAuth:
        this.page === "editPerson" || this.page === "personal"
          ? JSON.parse(JSON.stringify(this.info.popedom_code_list))
          : [], // 管理权限
      codeAuth: {
        auth: [],
        viewCode:
          this.page === "editPerson" || this.page === "personal"
            ? JSON.parse(
                JSON.stringify(this.info.data_scope.discount_code_view_scope)
              )
            : 0,
      }, // 兑换码权限
      financeAuth: {
        auth: [],
        selectedOptions:
          this.page === "editPerson" || this.page === "personal"
            ? JSON.parse(
                JSON.stringify(this.info.data_scope.finance_popedom_data_scope)
              )
            : [],
      }, // 财务权限
      props: { multiple: true },
      loading: false,
      id: this.$route.query.id ? this.$route.query.id : "",
      managerForm: {
        is_manager:
          this.page === "editOrgPerson"
            ? JSON.parse(JSON.stringify(this.info.is_manager))
            : "false",
        is_can_see_all_content:
          this.page === "editOrgPerson"
            ? JSON.parse(JSON.stringify(this.info.is_can_see_all_content))
            : "false",
      },
    };
  },
  //计算属性 类似于data概念
  computed: {
    ...mapState(["$provinceCityList", "$provinceCityListAll"]),
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    handleAvatarSuccess(fileList, name) {
      let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_Image";
      if (this.page === "editOrgPerson") {
        MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_Image";
      }
      let data = {
        id: this.page === "personal" ? JSON.parse(getToken()).user_id : this.id,
        image_id:
          fileList.length > 0 &&
          fileList[fileList.length - 1].response &&
          fileList[fileList.length - 1].response.file_info_list &&
          fileList[fileList.length - 1].response.file_info_list[0]
            ? fileList[fileList.length - 1].response.file_info_list[0].file_id
            : "",
      };
      getLogin(MethodName, data)
        .then((res) => {
          if (res.status === 1) {
            this.$emit("getInfo");
          }
        })
        .catch((res) => {});
    },
    // 切换tabs
    handleChangeTabs(value) {
      this.tabsIndex = value;
      let breadcrumb = [];
      if (this.page === "editOrgPerson") {
        breadcrumb = [
          {
            icon: "school-line",
            url: "",
            text: "",
          },
          {
            icon: "",
            url: "",
            text: "机构管理",
          },
          {
            icon: "",
            url: "",
            text: this.info.org_name,
          },
          {
            icon: "",
            url: "",
            notLink: true,
            text:
              value === 0 ? "人员信息" : value === 1 ? "安全设置" : "权限设置",
          },
        ];
        this.$emit("changeBread", breadcrumb);
      }
    },
    // 级联选择器
    handleCity(value) {
      // console.log(value)
    },
    // 提交表单
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          let MethodName =
            "/OrgServer/Manager/SysUserManager/UpdateSysUser_BaseInfo";
          if (this.page === "editOrgPerson") {
            MethodName =
              "/OrgServer/Manager/PersonManager/UpdatePerson_BaseInfo";
          }
          let data = {
            id:
              this.page === "personal"
                ? JSON.parse(getToken()).user_id
                : this.id,
            user_name: this.infoForm.name,
            real_name: this.infoForm.realName,
            sex: this.infoForm.sex,
            city_id: this.infoForm.selectedOptions[1],
            memo: this.infoForm.desc,
          };
          getLogin(MethodName, data)
            .then((res) => {
              this.loading = false;
              if (res.status === 1) {
                this.$emit("getInfo");
                this.$message({
                  message: "修改成功",
                  type: "success",
                  duration: 3000,
                });
              }
            })
            .catch((res) => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    // 取消 恢复到修改前状态
    onCancel(formName) {
      if (formName === "managerForm") {
        this.managerForm.is_manager =
          this.page === "editOrgPerson"
            ? JSON.parse(JSON.stringify(this.info.is_manager))
            : "false";
        this.managerForm.is_can_see_all_content =
          this.page === "editOrgPerson"
            ? JSON.parse(JSON.stringify(this.info.is_can_see_all_content))
            : "false";
      } else {
        this.$refs[formName].resetFields();
      }
    },
    // 修改设置
    handleSetting(flag) {
      this.settingFlag = !this.settingFlag;
      this[flag] = !this[flag];
      let breadcrumb = [];
      if (this.page === "editPerson") {
        if (this[flag]) {
          breadcrumb = [
            {
              icon: "contacts-line",
              url: "",
              text: "",
            },
            {
              icon: "",
              url: "",
              text: "系统用户",
            },
            {
              icon: "",
              url: "",
              notLink: true,
              text: "安全设置",
            },
            {
              icon: "",
              url: "",
              text:
                flag === "passwordFlag"
                  ? "修改密码"
                  : flag === "phoneFlag"
                  ? "绑定手机"
                  : "安全邮箱",
            },
          ];
        } else {
          breadcrumb = [
            {
              icon: "contacts-line",
              url: "",
              text: "",
            },
            {
              icon: "",
              url: "",
              text: "系统用户",
            },
            {
              icon: "",
              url: "",
              text: "编辑",
            },
          ];
        }
        this.$emit("changeBread", breadcrumb);
      }
    },
    changeIcon(flag) {
      this[flag] = !this[flag];
    },
    // 修改密码提交表单
    onSubmitPassword(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          let MethodName =
            "/OrgServer/Manager/SysUserManager/UpdateSysUser_Password";
          if (this.page === "editOrgPerson") {
            MethodName =
              "/OrgServer/Manager/PersonManager/UpdatePerson_Password";
          }
          let data = {
            id:
              this.page === "personal"
                ? JSON.parse(getToken()).user_id
                : this.id,
            password: this.passwordForm.newPwd,
          };
          getLogin(MethodName, data)
            .then((res) => {
              this.loading = false;
              if (res.status === 1) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                  duration: 3000,
                });
                this.$emit("getInfo");
                this.handleSetting("passwordFlag");
              }
            })
            .catch((res) => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    // 修改手机提交表单
    onSubmitPhone(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          let MethodName =
            "/OrgServer/Manager/SysUserManager/UpdateSysUser_Phone";
          if (this.page === "editOrgPerson") {
            MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_Phone";
          }
          let data = {
            id:
              this.page === "personal"
                ? JSON.parse(getToken()).user_id
                : this.id,
            phone: this.phoneForm.newPhone,
          };
          getLogin(MethodName, data)
            .then((res) => {
              this.loading = false;
              if (res.status === 1) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                  duration: 3000,
                });
                this.$emit("getInfo");
                this.handleSetting("phoneFlag");
                this.phoneForm.oldPhone = JSON.parse(
                  JSON.stringify(this.phoneForm.newPhone)
                );
                this.phoneForm.newPhone = "";
              }
            })
            .catch((res) => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    // 修改邮箱
    onSubmitEmail(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          let MethodName =
            "/OrgServer/Manager/SysUserManager/UpdateSysUser_Email";
          if (this.page === "editOrgPerson") {
            MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_Email";
          }
          let data = {
            id:
              this.page === "personal"
                ? JSON.parse(getToken()).user_id
                : this.id,
            email: this.emailForm.newEmail,
          };
          getLogin(MethodName, data)
            .then((res) => {
              this.loading = false;
              if (res.status === 1) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                  duration: 3000,
                });
                this.$emit("getInfo");
                this.handleSetting("emailFlag");
                this.emailForm.email = JSON.parse(
                  JSON.stringify(this.emailForm.newEmail)
                );
                this.emailForm.newEmail = "";
              }
            })
            .catch((res) => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    // 去掉前后空格
    handleTrim(form, fild) {
      this[form][fild] = this[form][fild].trim();
    },
    // 修改权限
    onSubmitAuth() {
      this.loading = true;
      let MethodName =
        "/OrgServer/Manager/SysUserManager/UpdateSysUser_Popedom";
      let finance_popedom_data_scope = {};
      if (this.financeAuth.selectedOptions.length > 0) {
        if (
          this.financeAuth.selectedOptions[0][0] &&
          this.financeAuth.selectedOptions[0][0] === "0"
        ) {
          finance_popedom_data_scope.is_all = "true";
        } else {
          finance_popedom_data_scope.is_all = "false";
          let province_id_list = [];
          let city_id_list = [];
          this.financeAuth.selectedOptions.forEach((item) => {
            if (province_id_list.indexOf(item[0]) === -1) {
              province_id_list.push(item[0]);
            }
            city_id_list.push(item[1] ? item[1] : "");
          });
          finance_popedom_data_scope.province_id_list = province_id_list;
          finance_popedom_data_scope.city_id_list = city_id_list;
        }
      }
      let data = {
        id: this.page === "personal" ? JSON.parse(getToken()).user_id : this.id,
        popedom_code_list: this.manageAuth,
        data_scope: {
          discount_code_view_scope: this.codeAuth.viewCode,
          finance_popedom_data_scope: finance_popedom_data_scope,
        },
      };
      getLogin(MethodName, data)
        .then((res) => {
          this.loading = false;
          if (res.status === 1) {
            this.$message({
              message: "修改成功",
              type: "success",
              duration: 3000,
            });
          }
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    // 取消权限
    onCancelAuth() {
      this.handleUserAuth();
      // this.manageAuth = []
      // this.codeAuth.viewCode = 0
      // this.financeAuth.selectedOptions = []
    },
    // 赋值权限
    handleUserAuth() {
      if (this.page === "editPerson" || this.page === "personal") {
        this.manageAuth = this.info.popedom_code_list
          ? JSON.parse(JSON.stringify(this.info.popedom_code_list))
          : [];
        this.codeAuth.viewCode = this.info.data_scope.discount_code_view_scope
          ? JSON.parse(
              JSON.stringify(this.info.data_scope.discount_code_view_scope)
            )
          : 0;
        if (
          this.info.data_scope.finance_popedom_data_scope &&
          this.info.data_scope.finance_popedom_data_scope.is_all === "true"
        ) {
          this.financeAuth.selectedOptions = ["0"];
        } else {
          let arr = [];
          this.info.data_scope.finance_popedom_data_scope.city_id_list.forEach(
            (item) => {
              arr.push([item.substring(0, 2), item]);
            }
          );
          this.financeAuth.selectedOptions = arr;
        }
      }
    },
    // 修改管理员权限
    onSubmitManager() {
      this.loading = true;
      let MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_Popedom";
      let data = {
        id: this.page === "personal" ? JSON.parse(getToken()).user_id : this.id,
        is_manager: this.managerForm.is_manager,
        is_can_see_all_content: this.managerForm.is_can_see_all_content,
      };
      getLogin(MethodName, data)
        .then((res) => {
          this.loading = false;
          if (res.status === 1) {
            this.$message({
              message: "修改成功",
              type: "success",
              duration: 3000,
            });
          }
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    // 通过 拒绝
    handleAudit(type) {
      let Mname = "/OrgServer/Manager/PersonManager/AuditPerson";
      let data = {
        id_list: [this.id],
      };
      if (type === "up") {
        // 下架状态
        data.is_pass = "true";
      } else if (type === "down") {
        data.is_pass = "false";
      }
      getLogin(Mname, data).then((res) => {
        this.$message({
          message: "操作成功",
          type: "success",
          duration: 3000,
        });
        this.$router.go(-1);
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.info) {
      this.handleUserAuth();
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.setting {
  height: 100%;
  &-top {
    margin: 0 0 12px 0;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 22px 40px;
    .avator-box {
      width: 96px;
      height: 96px;
      position: relative;
      .img-crop {
        position: absolute;
        // padding: 4px;
        width: 30px;
        height: 30px;
        right: -4px;
        bottom: -4px;
        border-radius: 50%;
        display: block;
        text-align: center;
        font-size: 0;
        border: 2px solid #ffffff;
        background: #f2f3f5 url("../assets/camera.png") center no-repeat;
        background-size: 12px;
      }
      .el-image {
        border-radius: 50%;
        overflow: hidden;
      }
    }
    .center {
      flex: 1;
      display: flex;
      flex-flow: wrap;
      margin-top: 12px;
      .info-items {
        margin-bottom: 12px;
        width: 40%;
      }
      label {
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        color: #86909c;
        width: 156px;
        text-align: right;
        display: inline-block;
        padding-right: 10px;
      }
      span {
        font-size: 14px;
        line-height: 22px;
        color: #1d2129;
      }
    }
  }
  &-bottom {
    padding: 24px;
    background: #ffffff;
    border-radius: 4px;
    min-height: calc(100vh - 270px);
    .tabs-box {
      display: flex;
      padding-bottom: 16px;
      a {
        font-size: 14px;
        line-height: 22px;
        color: #4e5969;
        border-radius: 100px;
        padding: 5px 16px;
        margin-right: 12px;
        &:hover {
          background: #f2f3f5;
        }
        &.active {
          background: #f2f3f5;
          font-weight: 500;
          color: #165dff;
        }
      }
    }
    .btn {
      margin-left: 16px;
    }
    .safe-items {
      display: flex;
      width: 100%;
      padding: 30px 20px 13px 20px;
      label {
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
        color: #4e5969;
      }
      &-right {
        border-bottom: 1px solid #e5e6eb;
        padding-bottom: 20px;
        flex: 1;
        margin-left: 16px;
        display: flex;
        justify-content: space-between;
        p {
          margin: 0;
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
          color: #4e5969;
          &.noContent {
            color: #86909c;
          }
        }
        a {
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
          color: #165dff;
        }
      }
    }
  }
  &-iframe {
    width: 100%;
    height: 100%;
    background: #ffffff;
    padding: 24px;
    .title {
      margin: 0;
      font-weight: 400;
      font-size: 20px;
      line-height: 28px;
      color: #000000;
      .el-icon-arrow-left {
        margin-right: 8px;
        cursor: pointer;
      }
    }
    .passwordForm,
    .phoneForm,
    .emailForm {
      padding-top: 40px;
      .show-icon {
        cursor: pointer;
        color: #4e5969;
      }
    }
    .code-input {
      width: 268px;
      .el-input__inner {
        border-radius: 2px 0 0 2px;
      }
    }
  }
}
.step-table {
  border: 1px solid #e5e6eb;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 22px;
  color: #1d2129;
  text-align: center;
  margin-bottom: 24px;
  &-header {
    background: #f7f8fa;
    width: 120px !important;
    color: #86909c;
    font-weight: 500;
  }
  td {
    height: 40px;
    width: 260px;
    border: 1px solid #e5e6eb;
    &.td1 {
      width: 130px;
    }
  }
  .step-cascader {
    width: 250px;
    height: 32px;
    line-height: 32px;
  }
}
.tips {
  margin: 0;
  color: #86909c;
  font-size: 12px;
  line-height: 20px;
}
</style>
<style lang="scss">
.setting {
  .el-input,
  .el-textarea {
    width: 360px;
  }
  .el-input__inner {
    height: 32px;
    color: #1d2129;
    background: #f2f3f5;
    border: none;
  }
  .el-textarea__inner,
  .el-input-group__prepend {
    color: #1d2129;
    background: #f2f3f5;
    border: none;
  }
  .el-input__count {
    background: #f2f3f5;
  }
  .el-form-item__label {
    font-weight: 400;
    font-size: 14px;
    line-height: 32px;
    color: #4e5969;
  }
  .el-form-item__content,
  .el-input__icon {
    line-height: 32px;
    color: #4e5969 !important;
  }
  .el-form-item {
    margin-bottom: 20px;
  }
  .el-radio__input.is-checked + .el-radio__label {
    color: #165dff;
  }
  .el-radio__input.is-checked .el-radio__inner {
    background: #165dff;
    border-color: #165dff;
  }
  .el-button--primary {
    background: #165dff;
    border-color: #165dff;
    border-radius: 2px;
    &:hover {
      background: #4080ff;
      border-color: #4080ff;
    }
    &:focus {
      background: #0e42d2;
      border-color: #0e42d2;
    }
  }
  .el-button--default {
    background: #f2f3f5;
    border-radius: 2px;
    border: none;
    color: #4e5969;
    height: 32px;
    &:hover {
      background: #e5e6eb;
    }
    &:focus {
      background: #c9cdd4;
    }
  }
  .setting-form {
    padding-top: 26px;
  }
  .code-box {
    .el-form-item__content {
      display: flex;
    }
  }
  .code-input {
    height: 32px;
    .el-input__inner {
      border-radius: 4px 0 0 4px;
    }
  }
  .sendCode {
    border-radius: 0 4px 4px 0;
    margin-top: 1px;
    width: 92px;
  }
  .el-input-group__prepend {
    width: 54px;
    height: 32px;
    border: none;
    background: #f2f3f5;
    border-radius: 2px 0px 0px 2px;
    line-height: 32px;
    text-align: center;
    padding: 0;
  }
  .el-input-group--prepend {
    display: flex;
    .el-input__inner {
      margin-left: 8px;
      flex: 1;
    }
  }
  .step-cascader {
    .el-input {
      width: 100% !important;
    }
  }
  .upload {
    width: 30px;
    height: 30px;
    overflow: hidden;
    .upload-demo {
      opacity: 0;
      width: 100% !important;
    }
  }
}
</style>