yoe-srm-web/src/views/supplier/info/components/ContractDialog.vue

<template>
  <el-dialog
    :model-value="modelValue"
    :title="title"
    width="900px"
    :close-on-click-modal="false"
    @update:model-value="(v) => emit('update:modelValue', v)"
  >
    <el-form
      ref="formRef"
      :model="model"
      :rules="rules"
      label-width="140px"
      :disabled="readonly"
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="合同名称：" prop="contractName">
            <el-input v-model="model.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="model.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="model.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="model.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="model.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="model.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-col :span="12">
          <el-form-item label="合同金额：" prop="contractAmount">
            <el-input v-model="model.contractAmount" placeholder="请输入">
              <template #append>万元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="税率：" prop="taxRate">
            <el-select v-model="model.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-col :span="12">
          <el-form-item label="结算方式：" prop="settlementMethod">
            <el-select v-model="model.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="model.contractAttachment"
              :limit="10"
              :file-size="50"
              :file-type="['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf']"
              :disabled="readonly"
            />
          </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="model.contractDescription" type="textarea" :rows="4" placeholder="请输入合同说明" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="emit('update:modelValue', false)">取消</el-button>
        <el-button v-if="!readonly" type="primary" @click="onSubmit" :loading="submitLoading">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import FileUpload from '@/components/FileUpload/index.vue';

type Props = {
  modelValue: boolean;
  title: string;
  readonly: boolean;
  submitLoading: boolean;
  model: any;
  rules: any;
  contractTypeDict: any[];
  taxRateList: any[];
  settlementMethodList: any[];
  invoiceTypeList: any[];
  onSubmit: () => void;
};

defineProps<Props>();

const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>();

const formRef = ref();

defineExpose({
  formRef
});
</script>