'个人中心修改企业资料'

zhangwei

2025-07-23 9df24dd94096b622e42230498e2f679f0c5dbb37

 src/views/mine/index.vue

@@ -1,26 +1,235 @@
<script setup lang="tsx">
import { cusExtendInfo } from "@/api/mine";
import { message } from "@/utils/message";
import { onMounted, reactive } from "vue";
import { useNav } from "@/layout/hooks/useNav";
import { useUserStoreHook } from "@/store/modules/user";
import type { FormInstance, FormRules, UploadProps } from "element-plus";
import { cloneDeep } from "@pureadmin/utils";
import { onMounted, reactive, ref, watch } from "vue";
import { getToken } from "@/utils/auth";
const { route } = useNav();
import { baseUrlApi } from "@/api/util";
import { cusExtendInfo, changeCusExtend } from "@/api/mine";
import { Edit } from "@element-plus/icons-vue";
import { enterpriseTypes } from "@/api/register/index";

import {
  addDialog,
  closeDialog,
  updateDialog,
  closeAllDialog
} from "@/components/ReDialog";
let state = reactive({
  userInfo: {}

const ruleFormRef = ref<FormInstance>();
const isLoading = ref(false);
const showDialog = ref(false);
const state = reactive({
  userInfo: {},
  headers: {
    // Accept: "application/json, text/plain, */*",
    // "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
    // "X-Requested-With": "XMLHttpRequest",
    Authorization: `Bearer ${getToken()?.accessToken}`
  },
  isShowPassword: false,
  ruleForm: {
    // 主键（唯一标识）
    id: null, // integer($int64)，可空
    // 企业类型（从预设企业类型列表中选择）
    enterpriseType: null, // string，可空
    // 交易主体代码（同角色代码，不可空，最小长度为1）
    transactionCode: "", // string，必填
    // 交易主体名称
    transactionName: null, // string，可空
    // 营业执照文件路径
    businessLicense: null, // string，可空
    // 企业名称
    enterpriseName: null, // string，可空
    // 统一社会信用代码
    unifiedSocialCreditCode: null, // string，可空
    // 注册资金（单位：万元）
    registeredCapital: null, // number($double)，可空
    // 法定代表人姓名
    legalRepresentativeName: null, // string，可空
    // 法定代表人身份证文件路径
    legalRepresentativeIdCard: null, // string，可空
    // 法定代表人身份证号码
    legalRepresentativeIdNumber: null, // string，可空
    // 法定代表人联系电话
    legalRepresentativePhone: null, // string($tel)，可空
    // 企业住所（下拉选择，暂以字符串接收）
    residence: null, // string，可空
    // 企业联系电话
    enterprisePhone: null, // string($tel)，可空
    // 企业成立时间（格式示例：2025-07-08 14:56:54）
    establishmentTime: null, // string($date-time)，可空
    // 企业主营业务
    mainBusiness: null, // string，可空
    // 企业邮箱
    enterpriseEmail: null, // string，可空
    // 业务经办人姓名
    operatorName: null, // string，可空
    // 业务经办人身份证文件路径或标识（上传后存储信息）
    operatorIdCard: null, // string，可空
    // 业务经办人身份证号码
    operatorIdNumber: null, // string，可空
    // 业务经办人联系电话
    operatorPhone: null, // string($tel)，可空
    // 企业开户行
    bankName: null, // string，可空
    // 企业银行账号
    bankAccount: null // string，可空
  },
  enterpriseList: [],
  type: "",
  rules: {
    enterpriseType: [
      { required: true, message: "请选择企业类型", trigger: "change" }
    ],
    businessLicense: [
      { required: true, message: "请上传营业执照", trigger: "change" }
    ],
    enterpriseName: [
      { required: true, message: "请输入企业名称", trigger: "blur" }
    ],
    unifiedSocialCreditCode: [
      { required: true, message: "请输入统一社会信用代码", trigger: "blur" }
    ],
    registeredCapital: [
      { required: true, message: "请输入注册资金", trigger: "blur" }
    ],
    legalRepresentativeName: [
      { required: true, message: "请输入法定代表人姓名", trigger: "blur" }
    ],
    legalRepresentativeIdCard: [
      { required: true, message: "请上传法定代表人身份证", trigger: "change" }
    ],
    legalRepresentativeIdNumber: [
      {
        required: true,
        message: "请输入法定代表人身份证号码",
        trigger: "blur"
      }
    ],
    legalRepresentativePhone: [
      { required: true, message: "请输入法定代表人联系电话", trigger: "blur" },
      {
        type: "string",
        pattern: /^1[3-9]\d{9}$/,
        message: "请输入正确的手机号码",
        trigger: "blur"
      }
    ],
    residence: [
      { required: true, message: "请选择企业住所", trigger: "change" }
    ],
    enterprisePhone: [
      { required: true, message: "请输入企业联系电话", trigger: "blur" },
      {
        type: "string",
        pattern: /^1[3-9]\d{9}$/,
        message: "请输入正确的手机号码",
        trigger: "blur"
      }
    ],
    establishmentTime: [
      { required: true, message: "请选择企业成立时间", trigger: "change" }
    ],
    mainBusiness: [
      { required: true, message: "请输入企业主营业务", trigger: "blur" }
    ],
    enterpriseEmail: [
      { required: true, message: "请输入企业邮箱", trigger: "blur" },
      { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" }
    ],
    operatorName: [
      { required: true, message: "请输入业务经办人姓名", trigger: "blur" }
    ],
    operatorIdCard: [
      { required: true, message: "请上传业务经办人身份证", trigger: "change" }
    ],
    operatorIdNumber: [
      {
        required: true,
        message: "请输入业务经办人身份证号码",
        trigger: "blur"
      }
    ],
    operatorPhone: [
      { required: true, message: "请输入业务经办人联系电话", trigger: "blur" },
      {
        type: "string",
        pattern: /^1[3-9]\d{9}$/,
        message: "请输入正确的手机号码",
        trigger: "blur"
      }
    ],
    bankName: [
      { required: true, message: "请输入企业开户行", trigger: "blur" }
    ],
    bankAccount: [
      { required: true, message: "请输入企业银行账号", trigger: "blur" }
    ]
  },
  loading: {
    signIn: false
  },
  captchaImage: "",
  rotateVerifyVisible: false,
  // rotateVerifyImg: verifyImg,
  // rotateVerifyImg: themeConfig.value.logoUrl,
  secondVerEnabled: false,
  // captchaEnabled: false,
  isPassRotate: false,
  capsLockVisible: false,
  hideTenantForLogin: false,
  expirySeconds: 60, // 验证码过期时间
  phoneSeconds: 0, // 手机验证码倒计时
  roleList: [],
  showDialog: false
});
onMounted(async () => {
  let res = await cusExtendInfo();
  if (res.code == 200) {
    state.userInfo = res.result;
    state.userInfo.enterpriseTypeName = res.result.enterpriseType;
    state.ruleForm = res.result;
    state.ruleForm.enterpriseType = state.ruleForm.enterpriseType.split(",");
  } else {
    message(res.message, {
      type: "error"
    });
  }
  let nowRole = useUserStoreHook()?.exRoles;
  if (nowRole.length >= 1 && !route.query.code) {
    state.ruleForm.transactionCode = nowRole[0].code;
    state.userInfo.transactionName = nowRole[0].name;
  } else {
    state.ruleForm.transactionCode = route.query.code;
    state.userInfo.enterpriseTypeName = route.query.name;
  }

  let restypes = await enterpriseTypes();
  state.enterpriseList = restypes?.result;
});
const isLeaf = data => {
  data.forEach(item => {
    if (!item.child) {
      item.leaf = true;
    }
  });
};
const loadNode = (node, resolve) => {
  if (node.level === 0) {
    isLeaf(node.data);
    return resolve(node.data);
  } else if (node.level > 0 && node.data.child) {
    isLeaf(node.data.child);
    return resolve(node.data.child);
  } else {
    return resolve([]);
  }
};

const showImg = name => {
  addDialog({
    width: "40%",
@@ -39,6 +248,95 @@
    }
  });
};
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  if (response.code == "200") {
    // state.ruleForm.businessLicense = URL.createObjectURL(uploadFile.raw!);
    let res = response.result;
    state.ruleForm.businessLicense = res.url; // 营业执照文件路径
    state.ruleForm.enterpriseName = res.info.Name; // 企业名称
    state.ruleForm.unifiedSocialCreditCode = res.info.RegNum; // 统一社会信用代码
    state.ruleForm.registeredCapital = res.info.Capital; // 注册资金（单位：万元）
    state.ruleForm.legalRepresentativeName = res.info.Person; // 法定代表人姓名
    state.ruleForm.establishmentTime = res.info.SetDate; // 企业成立时间（格式示例：2025-07-08 14:56:54）
    state.ruleForm.residence = res.info.Address; // 企业住所（下拉选择，暂以字符串接收）
    state.ruleForm.mainBusiness = res.info.Business; // 企业主营业务
  } else {
    message(response.message, {
      type: "error"
    });
  }
  isLoading.value = false;
};
const handleAvatarSuccessLegalRepresentative: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  console.log(response);
  if (response.code == "200") {
    // state.ruleForm.businessLicense = URL.createObjectURL(uploadFile.raw!);
    let res = response.result;
    state.ruleForm.legalRepresentativeIdCard = res.url; // 法定代表人身份证文件路径
    state.ruleForm.legalRepresentativeIdNumber = res.info.IdNum; // 法定代表人身份证号码
  } else {
    message(response.message, {
      type: "error"
    });
  }
  isLoading.value = false;
};

const handleAvatarSuccessOperator: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  if (response.code == "200") {
    // state.ruleForm.businessLicense = URL.createObjectURL(uploadFile.raw!);
    let res = response.result;
    state.ruleForm.operatorName = res.info.Name; // 业务经办人姓名
    state.ruleForm.operatorIdCard = res.url; // 业务经办人身份证文件路径或标识（上传后存储信息）
    state.ruleForm.operatorIdNumber = res.info.IdNum; // 业务经办人身份证号码
  } else {
    message(response.message, {
      type: "error"
    });
  }
  isLoading.value = false;
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
  isLoading.value = true;
  // if (rawFile.type !== "image/jpeg") {
  //   message(`请上传jpeg类型的图片`, {
  //     type: "error"
  //   });
  //   return false;
  // } else if (rawFile.size / 1024 / 1024 > 2) {
  //   message(`图片大小不能超过 2MB！`, {
  //     type: "error"
  //   });
  //   return false;
  // }
  return true;
};
// 提交修改企业注册信息
const modifyData = async () => {
  let obj = cloneDeep(state.ruleForm);
  obj.enterpriseType = state.ruleForm.enterpriseType.join(",");
  let res = await changeCusExtend(obj);
  if (res.code == "200") {
    showDialog.value = false;
    message("修改成功！", {
      type: "success"
    });
  } else {
    message(res.message, {
      type: "error"
    });
  }
};
defineOptions({
  name: "mine"
});
@@ -53,7 +351,7 @@
      <template #label>
        <div class="cell-item">交易主体</div>
      </template>
      {{ state.userInfo.transactionCode }}
      {{ state.userInfo.transactionName }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
@@ -77,11 +375,11 @@
      </template>
      {{ state.userInfo.registeredCapital }}
    </el-descriptions-item>
    <el-descriptions-item>
    <el-descriptions-item :span="2">
      <template #label>
        <div class="cell-item">企业类型</div>
      </template>
      {{ state.userInfo.enterpriseType }}
      {{ state.userInfo.enterpriseTypeName }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
@@ -169,6 +467,304 @@
      {{ state.userInfo.bankAccount }}
    </el-descriptions-item>
  </el-descriptions>
  <div class="m-5">
    <el-button type="primary" :icon="Edit" @click="() => (showDialog = true)"
      >修改资料</el-button
    >
  </div>
  <el-dialog
    v-model="showDialog"
    title="修改资料"
    :width="1500"
    draggable
    :close-on-click-modal="false"
  >
    <div v-loading="isLoading" class="flex justify-center mt-5">
      <el-form
        ref="ruleFormRef"
        style="width: 95%"
        :model="state.ruleForm"
        :rules="state.rules"
        label-width="auto"
      >
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="企业类型" prop="enterpriseType">
              <el-tree-select
                v-model="state.ruleForm.enterpriseType"
                :data="state.enterpriseList"
                multiple
                node-key="name"
                :render-after-expand="false"
                show-checkbox
                check-strictly
                check-on-click-node
                :load="loadNode"
                lazy
                :props="{ label: 'name', children: 'child', isLeaf: 'leaf' }"
              />
              <!-- <el-select
                v-model="state.ruleForm.enterpriseType"
                placeholder="请选择"
                clearable
                multiple
              >
                <el-option
                  v-for="item in state.enterpriseList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row><div class="baseclass">基本资料</div></el-row>
        <!-- <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="交易主体">
                <el-input
                  v-model="state.ruleForm.transactionName"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row> -->
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="营业执照" prop="businessLicense">
              <el-upload
                :action="`${baseUrlApi('/api/upFile/upBizLicense')}`"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :headers="state.headers"
              >
                <img
                  v-if="state.ruleForm.businessLicense"
                  :src="state.ruleForm.businessLicense"
                  width="200px"
                  height="150px"
                />
                <el-button v-else type="primary">上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="企业名称" prop="enterpriseName">
              <el-input
                v-model="state.ruleForm.enterpriseName"
                disabled
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item
              label="统一社会信用代码"
              prop="unifiedSocialCreditCode"
            >
              <el-input
                v-model="state.ruleForm.unifiedSocialCreditCode"
                disabled
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="注册资金" prop="registeredCapital">
              <el-input
                v-model="state.ruleForm.registeredCapital"
                disabled
                placeholder="请输入"
              >
                <template #append>万元</template></el-input
              >
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="法定代表人" prop="legalRepresentativeName">
              <el-input
                v-model="state.ruleForm.legalRepresentativeName"
                disabled
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
            <el-form-item label="住所地" prop="residence">
              <el-input
                v-model="state.ruleForm.residence"
                disabled
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="成立时间" prop="establishmentTime">
              <el-input
                v-model="state.ruleForm.establishmentTime"
                disabled
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="主营业务" prop="mainBusiness">
              <el-input
                v-model="state.ruleForm.mainBusiness"
                disabled
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="联系电话" prop="enterprisePhone">
              <el-input
                v-model="state.ruleForm.enterprisePhone"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="邮箱" prop="enterpriseEmail">
              <el-input
                v-model="state.ruleForm.enterpriseEmail"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="法定代表人" prop="legalRepresentativeIdCard">
              <el-upload
                :action="`${baseUrlApi('/api/upFile/uploadIdCord?PageName=FRONT')}`"
                :show-file-list="false"
                :on-success="handleAvatarSuccessLegalRepresentative"
                :before-upload="beforeAvatarUpload"
                :headers="state.headers"
              >
                <img
                  v-if="state.ruleForm.legalRepresentativeIdCard"
                  :src="state.ruleForm.legalRepresentativeIdCard"
                  width="85.6px"
                  height="5.4px"
                />
                <el-button v-else type="primary">上传身份证</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="姓名" prop="legalRepresentativeName">
              <el-input
                v-model="state.ruleForm.legalRepresentativeName"
                disabled
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="身份证" prop="legalRepresentativeIdNumber">
              <el-input
                v-model="state.ruleForm.legalRepresentativeIdNumber"
                disabled
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="联系电话" prop="legalRepresentativePhone">
              <el-input
                v-model="state.ruleForm.legalRepresentativePhone"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="业务经办人" prop="operatorIdCard">
              <el-upload
                :action="`${baseUrlApi('/api/upFile/uploadIdCord?PageName=FRONT')}`"
                :show-file-list="false"
                :on-success="handleAvatarSuccessOperator"
                :before-upload="beforeAvatarUpload"
                :headers="state.headers"
              >
                <img
                  v-if="state.ruleForm.operatorIdCard"
                  :src="state.ruleForm.operatorIdCard"
                  width="85.6px"
                  height="5.4px"
                />
                <el-button v-else type="primary">上传身份证</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="姓名" prop="operatorName">
              <el-input
                v-model="state.ruleForm.operatorName"
                disabled
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="身份证" prop="operatorIdNumber">
              <el-input
                v-model="state.ruleForm.operatorIdNumber"
                disabled
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="联系电话" prop="operatorPhone">
              <el-input
                v-model="state.ruleForm.operatorPhone"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="开户行" prop="bankName">
              <el-input
                v-model="state.ruleForm.bankName"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
            <el-form-item label="银行账号" prop="bankAccount">
              <el-input
                v-model="state.ruleForm.bankAccount"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="() => (showDialog = false)">取 消</el-button>
        <el-button type="primary" :disabled="isLoading" @click="modifyData"
          >确 定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss">