yoe-scm-web/src/views/supplier/contract/add.vue

<template>
  <div class="app-container">
    <!-- 页面头部 -->
    <div class="detail-header">
      <el-icon class="back-icon" @click="goBack"><ArrowLeft /></el-icon>
      <span class="header-title">创建合同</span>
    </div>

    <!-- 表单卡片 -->
    <el-card shadow="never" class="form-card">
      <div class="section-title">基本设置</div>
      
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同名称" prop="contractName">
              <el-input v-model="form.contractName" placeholder="请输入合同名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同类型" prop="contractType">
              <el-select v-model="form.contractType" placeholder="请选择" style="width: 100%;">
                <el-option 
                  v-for="item in contractTypeDict" 
                  :key="item.dictValue" 
                  :label="item.dictLabel" 
                  :value="item.dictValue" 
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提醒时间" prop="demandReminderTime">
              <el-input-number 
                v-model="form.demandReminderTime" 
                :min="1" 
                :max="365"
                style="width: 150px;"
              />
              <span style="margin-left: 10px;">天</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开始时间" prop="contractStartTime">
              <el-date-picker
                v-model="form.contractStartTime"
                type="date"
                placeholder="请选择"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="截止时间" prop="contractEndTime">
              <el-date-picker
                v-model="form.contractEndTime"
                type="date"
                placeholder="请选择"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开票类型" prop="invoiceType">
              <el-select v-model="form.invoiceType" placeholder="请选择" style="width: 100%;">
                <el-option 
                  v-for="item in invoiceTypeList" 
                  :key="item.id" 
                  :label="item.invoiceTypeName" 
                  :value="item.id" 
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同金额" prop="contractAmount">
              <el-input v-model="form.contractAmount" placeholder="">
                <template #append>万元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="税率" prop="taxRate">
              <el-select v-model="form.taxRate" placeholder="请选择" style="width: 100%;">
                <el-option 
                  v-for="item in taxRateList" 
                  :key="item.id" 
                  :label="item.taxrateName" 
                  :value="item.id" 
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="结算方式" prop="settlementMethod">
              <el-select v-model="form.settlementMethod" placeholder="请选择" style="width: 100%;">
                <el-option 
                  v-for="item in settlementMethodList" 
                  :key="item.id" 
                  :label="item.settlementName" 
                  :value="item.id" 
                />
              </el-select>
            </el-form-item>
          </el-col>
          
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="合同附件" prop="contractAttachment">
              <FileUpload 
                v-model="form.contractAttachment" 
                :file-type="['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf']"
                :file-size="50"
                :limit="1"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="合同说明" prop="contractDescription">
              <el-input 
                v-model="form.contractDescription" 
                type="textarea" 
                :rows="4"
                placeholder="请选择"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24" style="text-align: center;">
            <el-button type="primary" @click="handleSubmit">提交</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ArrowLeft } from '@element-plus/icons-vue';
import { getDictData, getTaxRateList, getSettlementMethodList, getInvoiceTypeList } from '@/api/customer/info';
import { addContract } from '@/api/supplier/contract';
import { ElMessage } from 'element-plus';
import FileUpload from '@/components/FileUpload/index.vue';

const route = useRoute();
const router = useRouter();

const formRef = ref();
const contractTypeDict = ref<any[]>([]);
const taxRateList = ref<any[]>([]);
const settlementMethodList = ref<any[]>([]);
const invoiceTypeList = ref<any[]>([]);

const form = ref({
  supplierId: '',
  supplierNo: '',
  supplierName: '',
  contractNo: '',
  contractName: '',
  contractType: '',
  demandReminderTime: 4,
  contractStartTime: '',
  contractEndTime: '',
  contractAmount: '',
  taxRate: '',
  invoiceType: '',
  settlementMethod: '',
  contractAttachment: '',
  contractDescription: ''
});

const rules = {
  contractName: [
    { required: true, message: '请输入合同名称', trigger: 'blur' }
  ],
  contractType: [
    { required: true, message: '请选择合同类型', trigger: 'change' }
  ],
  contractStartTime: [
    { required: true, message: '请选择开始时间', trigger: 'change' }
  ],
  contractEndTime: [
    { required: true, message: '请选择截止时间', trigger: 'change' }
  ]
};

/** 返回上一页 */
const goBack = () => {
  router.back();
};

/** 获取合同类型字典 */
const getContractTypeDict = async () => {
  try {
    const res = await getDictData('contract_type');
    contractTypeDict.value = res.data || [];
  } catch (e) {
    console.error('获取合同类型字典失败:', e);
  }
};

/** 获取税率列表 */
const getTaxRateData = async () => {
  try {
    const res = await getTaxRateList();
    taxRateList.value = res.rows || res.data || [];
  } catch (e) {
    console.error('获取税率列表失败:', e);
  }
};

/** 获取结算方式列表 */
const getSettlementMethodData = async () => {
  try {
    const res = await getSettlementMethodList();
    settlementMethodList.value = res.rows || res.data || [];
  } catch (e) {
    console.error('获取结算方式列表失败:', e);
  }
};

/** 获取发票类型列表 */
const getInvoiceTypeData = async () => {
  try {
    const res = await getInvoiceTypeList();
    invoiceTypeList.value = res.rows || res.data || [];
  } catch (e) {
    console.error('获取发票类型列表失败:', e);
  }
};

/** 提交表单 */
const handleSubmit = async () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      try {
        await addContract(form.value);
        ElMessage.success('创建成功');
        // 返回上一页
        router.back();
      } catch (e) {
        console.error('创建合同失败:', e);
        ElMessage.error('创建失败');
      }
    }
  });
};

onMounted(() => {
  // 从 URL 获取 supplierId
  const urlParams = new URLSearchParams(window.location.search);
  const supplierId = urlParams.get('supplierId');
  if (supplierId) {
    form.value.supplierId = supplierId;
  }
  
  getContractTypeDict();
  getTaxRateData();
  getSettlementMethodData();
  getInvoiceTypeData();
});
</script>

<style scoped>
.app-container {
  background: #f0f2f5;
  min-height: 100vh;
  padding: 0;
}

.detail-header {
  background: #fff;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 16px;
}

.back-icon {
  font-size: 18px;
  cursor: pointer;
  margin-right: 12px;
  color: #666;
}

.back-icon:hover {
  color: #409eff;
}

.header-title {
  font-weight: 500;
  color: #333;
}

.form-card {
  margin: 16px;
  padding: 24px;
}

.section-title {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8e8e8;
}
</style>