cas_cloud_web/src/views/admin/agent/account/basic-info.vue

<template>
  <div class="app-container">
    <el-card shadow="always" style="width: 55%; margin: 0 auto"
      ><p><b>基本资料</b></p>
      <el-form
        ref="personFormRef"
        :model="personForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="姓名:" prop="nickName">
          <el-input v-model="personForm.nickName" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="手机:" prop="mobile">
          <el-input v-model="personForm.mobile" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="邮箱:" prop="email">
          <el-input v-model="personForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="职务:" prop="post">
          <el-input v-model="personForm.post" placeholder="请输入职务" />
        </el-form-item>
        <el-form-item label="固定电话:" prop="phone">
          <el-input v-model="personForm.phone" placeholder="请输入固定电话" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitPersonalInfo">提交</el-button>
        </el-form-item>
      </el-form>
      <p><b>实验室资料</b></p>
      <!--    <laboratory-form ref="labFormRef" v-model="form" :is-add="false"/>-->
      <agent-form ref="agentFormRef" v-model="form" :is-add="false" />
      <div :style="{ marginLeft: labelWidth + 'px' }">
        <el-button type="primary" @click="submitExpertForm">提交</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import AgentForm from "@/views/components/AgentForm";
import { reactive, ref, toRefs } from "vue";
import { ElMessage } from "element-plus";
import {
  getInfo,
  insertClientUser,
  updateCasBroker,
} from "@/api/admin/agent/account";

const data = reactive({
  form: {
    researchs: [],
    keywords: [],
  },
  personForm: {},
  rules: {},
  personRules: {},
});
const { form, personForm, rules } = toRefs(data);
const agentFormRef = ref();
const personFormRef = ref();
const labelWidth = ref(140);

// 获取基础信息用于回显
const getBasicInfo = async () => {
  const { data } = await getInfo();
  data.broker.industrys = data.broker.industry?.split(",") ?? [];
  data.broker.keywords = data.broker.keyword?.split(",") ?? [];
  form.value = data.broker ?? {};
  personForm.value = data.user ?? {};
};

const submitPersonalInfo = async () => {
  try {
    await personFormRef.value.validate();
    await insertClientUser(personForm.value);
    ElMessage.success("更新个人信息成功");
    const { data } = await getInfo();
    personForm.value = data.user ?? {};
  } catch (error) {
    console.log(error);
  }
};
const submitExpertForm = async () => {
  const valid = await agentFormRef.value.validateForm();
  if (valid) {
    // form.value.researchDirection = form.value.researchs?.join(",") ?? null;
    form.value.keyword = form.value.keywords?.join(",") ?? null;
    updateCasBroker(form.value).then((res) => {
      ElMessage.success("修改成功");
      getBasicInfo();
    });
  } else {
    console.log("校验未通过");
  }
};
getBasicInfo();
</script>

<style lang="scss" scoped></style>