irc_web/src/views/trials/trials-myinfo/mine.vue

<template>
  <div class="trial-myinfo-left">
    <div class="trial-myinfo-left-bottom">
      <div class="trial-myinfo-head">
        <!-- 用户基本信息 -->
        {{ $t("trials:trials-myinfo:title:basicInfo") }}
      </div>
      <el-form
        ref="userForm"
        label-position="right"
        :model="user"
        :rules="userFormRules"
        label-width="120px"
      >
        <el-form-item v-if="user.Code" label="ID: " prop="Code">
          <el-input v-model="user.Code" disabled />
        </el-form-item>
        <!-- 姓 -->
        <el-form-item
          :disabled="user.UserTypeEnum === 8"
          :label="$t('trials:trials-myinfo:form:surname')"
          prop="LastName"
        >
          <el-input
            v-model="user.LastName"
            :placeholder="$t('trials:trials-myinfo:form:surname')"
          />
        </el-form-item>
        <!-- 名 -->
        <el-form-item
          :disabled="user.UserTypeEnum === 8"
          :label="$t('trials:trials-myinfo:form:givenname')"
          prop="FirstName"
        >
          <el-input
            v-model="user.FirstName"
            :placeholder="$t('trials:trials-myinfo:form:givenname')"
          />
        </el-form-item>
        <!-- 单位 -->
        <el-form-item
          :label="$t('trials:trials-myinfo:form:organization')"
          prop="OrganizationName"
        >
          <el-input
            :disabled="user.IsZhiZhun"
            v-model="user.OrganizationName"
            :placeholder="$t('trials:trials-myinfo:form:organization')"
          />
        </el-form-item>
        <!-- 部门 -->
        <el-form-item
          :label="$t('trials:trials-myinfo:form:department')"
          prop="DepartmentName"
        >
          <el-input
            v-model="user.DepartmentName"
            :placeholder="$t('trials:trials-myinfo:form:organization')"
          />
        </el-form-item>
        <!-- 职位 -->
        <el-form-item
          :label="$t('trials:trials-myinfo:form:position')"
          prop="PositionName"
        >
          <el-input
            v-model="user.PositionName"
            :placeholder="$t('trials:trials-myinfo:form:position')"
          />
        </el-form-item>
      </el-form>
      <!-- 保存 -->
      <el-button
        class="trial-info-btn"
        type="primary"
        size="small"
        @click="handleSave"
      >
        {{ $t("trials:trials-myinfo:button:save") }}
      </el-button>
    </div>
  </div>
</template>
<script>
import { updateUser } from "@/api/admin.js";
export default {
  name: "mine",
  props: {
    user: {
      required: true,
      default: () => {
        return {};
      },
    },
    userTypeOptions: {
      required: true,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      userFormRules: {
        UserName: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: "blur",
          },
        ],
        UserTypeId: [
          {
            required: true,
            message: this.$t("common:ruleMessage:select"),
            trigger: ["blur", "change"],
          },
        ],
        IsZhiZhun: [
          {
            required: true,
            message: this.$t("common:ruleMessage:select"),
            trigger: ["blur", "change"],
          },
        ],
        OrganizationName: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: "blur",
          },
        ],
        LastName: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: "blur",
          },
          { max: 50, message: `${this.$t("common:ruleMessage:maxLength")} 50` },
        ],
        FirstName: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: "blur",
          },
          { max: 50, message: `${this.$t("common:ruleMessage:maxLength")} 50` },
        ],
        Sex: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: "blur",
          },
        ],
        Status: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleSave() {
      this.$refs.userForm.validate((valid) => {
        console.log(valid);
        if (valid) {
          this.isDisabled = true;
          const selectedUserType = this.userTypeOptions.filter((item) => {
            return item.Id === this.user.UserTypeId;
          });
          if (selectedUserType.length > 0) {
            this.user.userTypeEnum = selectedUserType[0].UserTypeEnum;
          }
          // if (this.user.IsZhiZhun === true) {
          //   this.user.OrganizationName = 'ZhiZhun'
          // }
          if (this.user.Id) {
            updateUser(this.user)
              .then((res) => {
                this.isDisabled = false;
                this.$message.success(
                  this.$t("trials:trials-myinfo:message:updateSuccessfully")
                );
                this.$emit("getUserInfo");
              })
              .catch(() => {
                this.isDisabled = false;
              });
          }
        }
      });
    },
  },
};
</script>