hr-admin/src/views/companyManage/basicInfo.vue

<!--
 * @Description: create
 * @Version: 1.0
 * @Autor: XuTongZhang
 * @Date: 2020-07-28 17:19:02
 * @LastEditors: XuTongZhang
 * @LastEditTime: 2020-07-29 19:38:47
-->
<template>
<div class="basicInfo">
    <el-card class="box-card">
        <el-form ref="form" :model="form" label-width="140px" :rules="rules" label-position="left">
            <el-form-item :label="$t('title.companyName')" prop="companyName">
                <el-input disabled v-model.trim="form.companyName" maxlength="64" show-word-limit></el-input>
            </el-form-item>
            <el-form-item :label="$t('title.companyAddress')">
                <el-input v-model.trim="form.companyAddress" maxlength="32" show-word-limit></el-input>
            </el-form-item>
            <el-form-item :label="$t('title.sendingMailbox')" prop="cmpMailAccount">
                <el-input v-model.trim="form.cmpMailAccount" maxlength="32" show-word-limit></el-input>
            </el-form-item>
            <el-form-item :label="$t('title.emailPassword')" prop="cmpMailPassword">
                <el-input v-model.trim="form.cmpMailPassword" show-password maxlength="32" show-word-limit></el-input>
            </el-form-item>
            <el-form-item :label="$t('title.mailboxType')">
                <el-radio-group v-model="form.cmpMailType">
                    <el-radio :label="0">阿里</el-radio>
                    <el-radio :label="1">网易</el-radio>
                    <el-radio :label="2">QQ</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item :label="$t('title.companyProfile')">
                <editor-bar class="editor" v-model.trim="form.companyIntroduce"></editor-bar>
                <div style="color: #666">提示： 1000字以内为佳</div>
                <div style="color: #666">已输入：{{getText.length}}字</div>
            </el-form-item>
            <el-form-item v-if="show" class="button-grounp">
                <el-button type="primary" @click="determine">{{$t('button.confirmTheChanges')}}</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</template>

<script>
import EditorBar from '../../components/wangEnduit/wangEnduit'
export default {
  data () {
    return {
      form: {
        cmpMailType: 0
      },
      info: {},
      show: false,
      email: {},
      rules: {
        companyAddress: [{
          required: true,
          message: this.$t('message.pleaseEnter') + this.$t('title.companyName'),
          trigger: 'blur'
        }],
        cmpMailAccount: [{
          required: true,
          message: this.$t('message.pleaseEnter') + this.$t('title.sendingMailbox'),
          trigger: 'blur'
        }],
        cmpMailPassword: [{
          required: true,
          message: this.$t('message.pleaseEnter') + this.$t('title.emailPassword'),
          trigger: 'blur'
        }]
      }
    }
  },
  components: {
    EditorBar
  },
  created () {
    this.getDetails()
    this.queryEmail()
  },
  methods: {
    queryEmail () {
      this.$api
        .post('/companyAccount/queryCompanyAccountList', {
          reqdata: {}
        })
        .then((res) => {
          this.email = res.list.some(item => item.useType === 1) ? res.list.find(item => item.useType === 1) : {}
          this.form = Object.assign({}, this.form, res.list.some(item => item.useType === 1) ? res.list.find(item => item.useType === 1) : {})
        })
    },
    getDetails () {
      let url = '/companyInfo/queryCompanyInfo'
      let reqdata = {}
      this.$api
        .post(url, {
          reqdata
        })
        .then((res) => {
          this.info = res.object
          this.form = Object.assign({}, this.form, res.object)
          this.form.emailId = res.object.id
        })
    },
    determine () {
      console.log(this.form.cmpMailAccount)
      let a
      this.$refs['form'].validate((valid) => {
        a = valid
      })
      if (!a) return
      let url = '/companyInfo/updateCompanyInfo'
      let reqdata = this.form
      reqdata.id = this.info.id
      this.$api
        .post(url, {
          reqdata
        })
        .then((res) => {
          let reqdata = this.form
          reqdata.id = this.email.id
          reqdata.useType = 1
          let url = this.email.id ? '/companyAccount/updateCompanyAccount' : '/companyAccount/saveReceiverMail'
          this.$api
            .post(url, {
              reqdata
            })
            .then((res) => {
              this.$message({
                message: this.$t('message.successfullyModified') + '！',
                type: 'success'
              })
              this.getDetails()
              this.queryEmail()
            })
        })
    }
  },
  computed: {
    getText () {
      return this.form.companyIntroduce
        .replace(/<[^<>]+>/g, '')
        .replace(/&nbsp;/gi, '')
    }
  },
  watch: {
    'form.companyAddress' (val) {
      this.show = this.info.companyAddress !== val
      console.log(this.info.companyAddress)
    },
    'form.cmpMailAccount' (val) {
      console.log(this.show)
      this.show = this.email.cmpMailAccount !== val
    },
    'form.cmpMailPassword' (val) {
      console.log(this.show)
      this.show = this.email.cmpMailPassword !== val
    },
    'form.cmpMailType' (val) {
      console.log(this.show)
      this.show = this.email.cmpMailType !== val
    },
    'form.companyIntroduce' (val) {
      console.log(this.show)
      this.show = this.info.companyIntroduce !== val
    },
    'email.cmpMailAccount' (val) {
      this.show = this.form.cmpMailAccount !== val
    },
    'email.cmpMailPassword' (val) {
      this.show = this.form.cmpMailPassword !== val
    },
    'email.cmpMailType' (val) {
      this.show = this.form.cmpMailType !== val
    },
    'info.companyAddress' (val) {
      this.show = this.form.companyAddress !== val
    },
    'info.companyIntroduce' (val) {
      this.show = this.form.companyIntroduce !== val
    }
  }
}
</script>

<style lang="scss" scoped>
.basicInfo {
    display: flex;
    justify-content: center;
    align-content: center;
}

.box-card {
    width: 800rpx;
    padding: 18px 0;
}

.button-grounp {
    display: flex;
    justify-content: flex-end;
}
</style>