yoe-bp-web/src/views/partner/info/components/BasicInfo.vue

<template>
  <div class="basic-info">
    <div class="info-header">
      <h3>企业基本信息 / 伙伴商编号：{{ partnerInfo.partnerNo || '-' }}</h3>
      <div class="header-actions">
        <template v-if="!isEditing">
          <el-button type="primary" @click="handleEdit">编辑</el-button>
        </template>
        <template v-else>
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </template>
      </div>
    </div>

    <el-form :model="partnerInfo" label-width="120px" :disabled="!isEditing">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="伙伴商全称">
            <el-input v-model="partnerInfo.partnerName" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="伙伴商编号">
            <el-input v-model="partnerInfo.partnerNo" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="公司简称">
            <el-input v-model="partnerInfo.company" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="合作型态">
            <el-select v-if="isEditing" v-model="partnerInfo.partnerCooperateType" placeholder="请选择">
              <el-option label="伙伴商" :value="0" />
              <el-option label="经销商" :value="1" />
              <el-option label="代理商" :value="2" />
            </el-select>
            <el-input v-else :value="formatCooperateType(partnerInfo.partnerCooperateType)" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人代表">
            <el-input v-model="partnerInfo.legal" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="固定电话">
            <el-input v-model="partnerInfo.telephone" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="传真号码">
            <el-input v-model="partnerInfo.fax" />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="公司注册地址">
            <el-input v-model="partnerInfo.registerAddress" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="分司注册地址">
            <el-input v-model="partnerInfo.operatingAddress" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input v-model="partnerInfo.remark" type="textarea" :rows="3" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div v-if="loading" class="loading">加载中...</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getCurrentPartnerInfo, updatePartnerInfo } from '@/api/partner';

const partnerInfo = ref({
  id: null,
  partnerNo: '',
  partnerName: '',
  company: '',
  partnerCooperateType: '',
  legal: '',
  telephone: '',
  fax: '',
  registerAddress: '',
  operatingAddress: '',
  remark: ''
});

const originalData = ref({});
const loading = ref(false);
const isEditing = ref(false);

// 合作型态字典转换
const formatCooperateType = (type: number) => {
  const typeMap: Record<number, string> = {
    0: '伙伴商',
    1: '经销商',
    2: '代理商'
  };
  return typeMap[type] || type;
};

const fetchPartnerInfo = async () => {
  loading.value = true;
  try {
    const response = await getCurrentPartnerInfo();
    if (response.code === 200) {
      partnerInfo.value = response.data;
      originalData.value = { ...response.data };
    } else {
      ElMessage.error(response.msg || '获取伙伴商信息失败');
    }
  } catch (error) {
    console.error('获取伙伴商信息失败', error);
    ElMessage.error('获取伙伴商信息失败');
  } finally {
    loading.value = false;
  }
};

const handleEdit = () => {
  isEditing.value = true;
  originalData.value = { ...partnerInfo.value };
};

const handleCancel = () => {
  partnerInfo.value = { ...originalData.value };
  isEditing.value = false;
};

const handleSave = async () => {
  try {
    const response = await updatePartnerInfo(partnerInfo.value);
    if (response.code === 200) {
      ElMessage.success('保存成功');
      isEditing.value = false;
      fetchPartnerInfo();
    } else {
      ElMessage.error(response.msg || '保存失败');
    }
  } catch (error) {
    console.error('保存失败', error);
    ElMessage.error('保存失败');
  }
};

onMounted(() => {
  fetchPartnerInfo();
});
</script>

<style scoped lang="scss">
.basic-info {
  padding: 20px;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;

  h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
  }

  .header-actions {
    display: flex;
    gap: 10px;
  }
}

.loading {
  text-align: center;
  padding: 20px;
  color: #999;
}
</style>