yoe-shop-web/src/views/enterprise/companyInfo/edit.vue

<template>
  <div class="company-edit-container">
    <!-- 顶部返回 -->
    <div class="page-header">
      <el-button link @click="handleBack">
        <el-icon><ArrowLeft /></el-icon>
        <span>返回</span>
      </el-button>
      <span class="page-title">完善企业信息</span>
    </div>

    <div class="form-content">
      <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
        <!-- 工商信息 -->
        <div class="section">
          <div class="section-title"><i class="title-bar"></i>工商信息</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="企业名称" prop="companyName">
                <el-input v-model="form.companyName" placeholder="请输入" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="统一社会信用代码" prop="creditCode">
                <el-input v-model="form.creditCode" placeholder="请输入" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="法人" prop="legalPerson">
                <el-input v-model="form.legalPerson" placeholder="请输入" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="注册资本" prop="registeredCapital">
                <el-input v-model="form.registeredCapital" placeholder="请输入" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="详细地址" prop="detailAddress">
                <el-input v-model="form.detailAddress" placeholder="请输入" maxlength="50" show-word-limit disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="经营范围" prop="businessScope">
                <el-input v-model="form.businessScope" type="textarea" :rows="3" placeholder="请输入" maxlength="300" show-word-limit disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 办公信息 -->
        <div class="section">
          <div class="section-title"><i class="title-bar"></i>办公信息</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="主要办公地址">
                <el-select v-model="form.officeProvince" placeholder="请选择" style="width: 100%"> </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label=" ">
                <el-input v-model="form.officeAddress" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="所属行业" prop="industry">
                <el-select v-model="form.industry" placeholder="请选择" style="width: 100%">
                  <el-option label="电力行业" value="电力行业" />
                  <el-option label="制造业" value="制造业" />
                  <el-option label="互联网" value="互联网" />
                  <el-option label="金融业" value="金融业" />
                  <el-option label="其他" value="其他" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业规模" prop="scale">
                <el-select v-model="form.scale" placeholder="请选择" style="width: 100%">
                  <el-option label="50人以下" value="50人以下" />
                  <el-option label="50-200人" value="50-200人" />
                  <el-option label="200-500人" value="200-500人" />
                  <el-option label="500-1000人" value="500-1000人" />
                  <el-option label="1000-5000人" value="1000-5000人" />
                  <el-option label="5000人以上" value="5000人以上" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="联系方式" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="网址" prop="website">
                <el-input v-model="form.website" placeholder="请输入" maxlength="50" show-word-limit />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="营业执照" prop="businessLicense">
                <el-upload
                  class="upload-box"
                  action="#"
                  :auto-upload="false"
                  :show-file-list="false"
                  :on-change="(file: any) => handleUpload(file, 'businessLicense')"
                >
                  <div v-if="form.businessLicense" class="upload-preview">
                    <el-image :src="form.businessLicense" fit="cover" />
                  </div>
                  <div v-else class="upload-placeholder">
                    <el-icon :size="24"><Plus /></el-icon>
                    <span>上传</span>
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="法人身份证" prop="idCard">
                <el-upload
                  class="upload-box"
                  action="#"
                  :auto-upload="false"
                  :show-file-list="false"
                  :on-change="(file: any) => handleUpload(file, 'idCard')"
                >
                  <div v-if="form.idCard" class="upload-preview">
                    <el-image :src="form.idCard" fit="cover" />
                  </div>
                  <div v-else class="upload-placeholder">
                    <el-icon :size="24"><Plus /></el-icon>
                    <span>上传</span>
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <!-- 底部按钮 -->
      <div class="form-footer">
        <el-button type="danger" @click="handleSave">保存</el-button>
        <el-button @click="handleBack">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ArrowLeft, Plus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { getEnterpriseInfo, updateEnterpriseInfo } from '@/api/pc/enterprise';

const router = useRouter();
const formRef = ref();

const form = reactive({
  companyName: '',
  creditCode: '',
  legalPerson: '',
  registeredCapital: '',
  detailAddress: '',
  businessScope: '',
  officeProvince: '',
  officeAddress: '',
  industry: '',
  scale: '',
  phone: '',
  email: '',
  website: '',
  businessLicense: '',
  idCard: ''
});

const rules = {
  companyName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
  creditCode: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }]
};

// 加载企业信息
const loadEnterpriseInfo = async () => {
  try {
    const res = await getEnterpriseInfo();
    if (res.code === 200 && res.data) {
      const data = res.data;
      const businessInfo = data.customerBusinessInfoVo || {};

      form.companyName = data.customerName || data.businessCustomerName || '';
      form.creditCode = businessInfo.socialCreditCode || '';
      form.legalPerson = businessInfo.legalPersonName || '';
      form.registeredCapital = businessInfo.registeredCapital || '';
      form.detailAddress = businessInfo.businessAddress || '';
      form.businessScope = businessInfo.bussinessRange || '';
      form.officeAddress = data.address || '';
      form.industry = data.industryCategory || '';
      form.scale = data.enterpriseScale || '';
      form.phone = data.landline || '';
      form.email = businessInfo.email || data.fax || '';
      form.website = data.url || '';
      form.businessLicense = businessInfo.businessLicense || '';
      form.idCard = businessInfo.idCard || '';
    }
  } catch (error) {
    console.error('加载企业信息失败:', error);
    ElMessage.error('加载企业信息失败');
  }
};

onMounted(() => {
  loadEnterpriseInfo();
});

const handleBack = () => {
  router.push('/enterprise/companyInfo');
};

const handleUpload = (file: any, field: string) => {
  const reader = new FileReader();
  reader.onload = (e) => {
    (form as any)[field] = e.target?.result as string;
  };
  reader.readAsDataURL(file.raw);
};

const handleSave = async () => {
  const valid = await formRef.value?.validate();
  if (!valid) return;

  try {
    await updateEnterpriseInfo(form as any);
    ElMessage.success('保存成功');
    handleBack();
  } catch (error) {
    ElMessage.error('保存失败');
  }
};
</script>

<style scoped lang="scss">
.company-edit-container {
  background: #f5f5f5;
  min-height: 100%;
}

.page-header {
  background: #fff;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #eee;

  .page-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
}

.form-content {
  padding: 20px;
}

.section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;

  .section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.title-bar {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #e60012;
  border-radius: 2px;
}

.upload-box {
  :deep(.el-upload) {
    width: 100px;
    height: 100px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;

    &:hover {
      border-color: #e60012;
    }
  }

  .upload-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 12px;
    gap: 5px;
  }

  .upload-preview {
    width: 100%;
    height: 100%;

    .el-image {
      width: 100%;
      height: 100%;
    }
  }
}

.form-footer {
  text-align: center;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
}
</style>