supply-front/src/views/merchant/merchant_detail.vue

<template>

   <div class="app-container">
    <div>
      <el-form class="my-form" ref="mainForm" :model="mainForm" label-width="100px" label-position="right">
        <el-form-item label="商户账号" prop="account">
          <el-input v-model="mainForm.account" disabled></el-input>
        </el-form-item>
        <el-form-item label="账户昵称" prop="nickName">
          <el-input v-model="mainForm.nickName" disabled></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="chargePerson">
          <el-input v-model="mainForm.chargePerson" disabled></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="mainForm.phone" disabled></el-input>
        </el-form-item>
        <el-form-item label="金蝶主体账号" prop="kingdeeId">
          <el-input v-model="mainForm.kingdeeId" disabled></el-input>
        </el-form-item>
        <el-form-item label="金蝶主体名称" prop="kingdeeName">
          <el-input v-model="mainForm.kingdeeName" disabled></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="mainForm.email" disabled></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="mainForm.address" disabled></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input v-model="mainForm.password" type="password" disabled></el-input>
          <el-button class="reset" @click="handleReset()">重置密码</el-button>
        </el-form-item>
        <!-- <el-form-item class="tr">
          <el-button type="primary" @click="submitmainForm">保存</el-button>
        </el-form-item> -->
      </el-form>
    </div>

    <div class="page-footer">
      <div class="footer" :class="classObj">
        <!-- <el-button type="primary" @click="submitMainForm" :loading="formLoading">{{ formLoading ? '保存中 ...' : '保 存' }}</el-button> -->
        <el-popconfirm
          title="确定关闭吗？"
          @onConfirm="goBack"
          style="margin-left: 10px;"
        >
          <el-button slot="reference">关 闭</el-button>
        </el-popconfirm>
      </div>
    </div>
    
    <!-- 重置密码 -->
    <el-dialog title="重置密码" :visible.sync="resetFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
      <el-form ref="resetForm" :model="resetForm" :rules="resetFormRules" label-position="left" label-width="100px">
        <el-form-item label="输入新密码" prop="newPassword">
          <el-input v-model="resetForm.newPassword" ref="password1" autocomplete="off" placeholder="请输入新密码" :type="passwordType1"></el-input>
          <span class="show-pwd" @click="showPwd(1)">
            <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="resetForm.confirmPassword" ref="password2" autocomplete="off" placeholder="请再次输入新密码" :type="passwordType2"></el-input>
          <span class="show-pwd" @click="showPwd(2)">
            <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelResetForm">取 消</el-button>
        <el-button type="primary" @click="submitResetForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
  

 
</template>

<script>
import { getToken } from '@/utils/auth'
import { getDetail, resetPassword, editAccount } from "@/api/merchant";

export default {
 
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入登录密码'));
      } else if (value.length < 12) {
        callback(new Error('密码长度至少12位'));
      } else if (/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/.test(value) == false) {
        callback(new Error('密码必须包含数字和字母'));
      } else {
        if (this.resetForm.confirmPassword !== '') {
          this.$refs.resetForm.validateField('confirmPassword');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.resetForm.newPassword) {
        callback(new Error('两次输入密码不一致'));
      } else {
        callback();
      }
    };
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      myHeaders: {'x-token': getToken()},
      id: null,
      companyWechatId: null,
      step: 'first',
      mainForm: {
        account: '', // 账号
        nickName: '', // 用户名
        chargePerson: '', // 负责人
        phone: '', // 联系电话
        kingdeeId: '',
        kingdeeName: '',
        email: '', // 电子邮箱
        address: '', // 地址
        newPassword: '', // 新密码
        confirmPassword: '', // 确认密码
      },

      passwordType1: 'password',
      passwordType2: 'password',

      
      resetFormVisible: false,
      resetForm: {
        newPassword: '', // 新密码
        confirmPassword: '', // 确认密码
      },
      resetFormRules: {
        newPassword: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ],
      },

      formLoading: false,
    }
  },
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened
      }
    },
  },
  created() {
    const { id } = this.$route.query;
    this.id = id;
    this.getDetail();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },

    // 获取详情
    getDetail() {
      getDetail({adminUserId: this.id}).then(res => {
        this.mainForm.account = res.data.userName;
        this.mainForm.nickName = res.data.nickName;
        this.mainForm.chargePerson = res.data.linkName;
        this.mainForm.phone = res.data.linkPhone;
        this.mainForm.kingdeeId = res.data.useOrgNumber;
        this.mainForm.kingdeeName = res.data.useOrgName;
        this.mainForm.email = res.data.email;
        this.mainForm.address = res.data.address;
        this.mainForm.password = '************';
      })
    },

    // 重置密码
    handleReset(id) {
      this.resetId = id;
      this.resetFormVisible = true;
    },

    // 取消重置密码
    cancelResetForm(){
      this.resetFormVisible = false;
      this.passwordType1 = 'password';
      this.passwordType2 = 'password';
      this.$refs.resetForm.resetFields();
    },

    // 提交重置密码
    submitResetForm() {
      this.$refs.resetForm.validate((valid) => {
        if (valid) {
          let params = {
            password: this.resetForm.newPassword,
            adminUserId: this.id
          }
          resetPassword(params).then(res => {
            this.cancelResetForm();
            this.getDetail();
            this.$successMsg();
          })
        }
      })
    },

    // 显示隐藏密码
    showPwd(num) {
      if(num == 1) {
        if (this.passwordType1 === 'password') {
          this.passwordType1 = ''
        } else {
          this.passwordType1 = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password1.focus()
        })
      }
      if(num == 2) {
        if (this.passwordType2 === 'password') {
          this.passwordType2 = ''
        } else {
          this.passwordType2 = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password2.focus()
        })
      }
    },

    submitMainForm() {
      this.$refs.mainForm.validate((valid) => {
        if (valid) {
          this.formLoading = true;

          let params = {
            adminUserId: this.id,
            corpId: this.mainForm.enterpriseId,
            secret2: this.mainForm.listSecret,
            secret3: this.mainForm.listSyncSecret,
            agentId1: this.mainForm.appAgentId,
            secret1: this.mainForm.appSecret,
            appId: this.mainForm.appId,
            mchId: this.mainForm.merchantId,
            mchKey: this.mainForm.merchantKey,
            subAppId: this.mainForm.childAppId,
            subSecret: this.mainForm.childKey,
            subMchId: this.mainForm.childMerchantId,
            template: this.mainForm.templateId,
            companyWechatId: this.companyWechatId
          }
          editAccount(params).then(res => {
            this.$successMsg('保存成功');
            setTimeout(() => {
              this.goBack();
            }, 1500)
          }).finally(res => {
            this.formLoading = false;
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .setting_title {
    padding-left: 0;
  }
  .tips {
    font-size: 14px;
  }
  .my-card {
    margin-top: 20px;
    .box {
      background: rgb(235, 240, 249);
      padding: 10px;
      font-size: 14px;
      margin: 20px 0;
      line-height: 18px;
      ::v-deep .el-link {
        vertical-align: unset;
      }
    }
  }
  .my-form {
    width: 450px;
    margin-top: 20px;
  }
  .show-pwd {
    position: absolute;
    right: 15px;
    top: 0;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
  }
  .question {
    position: absolute;
    right: -30px;
    top: 0;
    font-size: 20px;
    cursor: pointer;
    user-select: none;
  }
  .reset {
    position: absolute;
    right: -110px;
    top: 0;
  }
  .my-form2 {
    ::v-deep input {
      width: 400px;
    }
  }
  .tips {
    margin-top: 10px;
    span {
      display: inline-block;
      width: 300px;
      text-align: center;
      line-height: 32px;
      background: #ffefef;
      font-size: 14px;
      color: #f66460;
    }
  }
  .images {
    display: flex;
    flex-wrap: wrap;
    .main-img {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 120px;
      margin-right: 20px;
      .img {
        border: 1px dashed #eaeaea;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        .el-image {
          display: block;
        }
        .mask {
          position: absolute;
          left: 0;
          top: 0;
          width: 120px;
          height: 120px;
          background: rgba($color: #000000, $alpha: 0.3);
          display: flex;
          align-items: center;
          justify-content: center;
          i {
            font-size: 20px;
            color: #ffffff;
            cursor: pointer;
            margin: 0 8px;
          }
        }
      }
      .text {
        font-size: 14px;
        color: #666666;
      }
    }
    .add {
      width: 120px;
      height: 120px;
      border: 1px dashed #eaeaea;
      border-radius: 5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        font-size: 30px;
        color: #999;
      }
    }
    .tmp-img {
      position: relative;
      .tmp {
        position: absolute;
        left: 0;
        top: 0;
        line-height: 20px;
        padding: 0 8px;
        background: #f66460;
        border-radius: 0 0 10px 0;
        font-size: 12px;
        color: #ffffff;
      }
    }
  }
</style>