ops-management-platform-frontend/src/views/project/contractManage/addModal.vue

<template>
  <a-modal v-model:open="visible" :title="title" @ok="handleOk" @cancel="closeModal" width="50%">
    <a-form ref="formRef" :model="form" layout="vertical">
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="合同名称" name="contractName">
            <a-input v-model:value="form.contractName" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="父级合同" name="contractParent">
            <a-select
              v-model:value="form.projectName"
              :options="projectNameOptions"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="合同编号" name="contractCode">
            <a-input v-model:value="form.contractCode" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-form-item label="合同类别" name="contractType">
            <a-select
              v-model:value="form.contractType"
              :options="projectNameOptions"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="所属区域" name="district">
            <a-select
              v-model:value="form.district"
              :options="projectNameOptions"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-form-item label="合同金额" name="contractPrice">
            <a-input v-model:value="form.contractPrice" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="签订日期" name="signDate">
            <a-date-picker
              v-model:value="form.signDate"
              placeholder="请选择"
              valueFormat="YYYY-MM-DD"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="合同工期" name="contractDuration">
            <a-range-picker v-model:value="form.contractDuration" valueFormat="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-form-item label="甲方单位" name="partyA">
            <a-select
              v-model:value="form.partyA"
              :options="projectNameOptions"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="甲方代表" name="partyAPerson">
            <a-input v-model:value="form.partyAPerson" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-form-item label="乙方单位" name="partyB">
            <a-select
              v-model:value="form.partyB"
              :options="projectNameOptions"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="乙方代表" name="partyBPerson">
            <a-input v-model:value="form.partyBPerson" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="合同内容" name="contractContent">
            <a-textarea v-model:value="form.contractContent" :rows="4" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="备注" name="remark">
            <a-textarea v-model:value="form.remark" :rows="4" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="附件" name="attachment">
            <a-upload
              v-model:file-list="form.attachment"
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            >
              <a-button type="primary"> 上传 </a-button>
            </a-upload>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
  import { reactive, ref } from 'vue';
  import { getInfo, add, update } from './api';
  import { message } from 'ant-design-vue';

  export default {
    setup() {
      const title = ref('新增');
      const formRef = ref();
      const visible = ref(false);
      let form = reactive({
        contractName: '',
        contractCode: '',
        contractParent: '',
        contractType: '',
        district: '',
        contractPrice: '',
        signDate: '',
        contractDuration: [],
        partyA: '',
        partyAPerson: '',
        partyB: '',
        partyBPerson: '',
        contractContent: '',
        remark: '',
        attachment: [],
        id: null,
      });
      //下拉框
      const projectNameOptions = [
        {
          value: '1',
          label: 'a',
        },
        {
          value: '2',
          label: 'b',
        },
        {
          value: '3',
          label: 'c',
        },
      ];
      const showModal = async (type, id) => {
        visible.value = true;
        if (type == 1) {
          title.value = '新增';
        } else if (type == 2) {
          title.value = '编辑';
          const data = await getInfo(id);
          for (let i in form) {
            form[i] = data[i];
          }
          form.contractDuration = [data.startDate, data.endDate];
          form.attachment = data.attachment ? data.attachment : [];
        }
      };

      const handleOk = () => {
        formRef.value.validate().then((valid) => {
          if (valid) {
            if (title.value == '新增') {
              let params = {};
              for (let i in form) {
                params[i] = form[i];
              }
              params.startDate = params.contractDuration[0];
              params.endDate = params.contractDuration[1];
              add(params).then((_) => {
                message.success('新增成功');
                visible.value = false;
              });
            } else {
              let params = {};
              for (let i in form) {
                params[i] = form[i];
              }
              params.startDate = params.contractDuration[0];
              params.endDate = params.contractDuration[1];
              update(params).then((_) => {
                message.success('编辑成功');
                visible.value = false;
              });
            }
          }
        });
      };
      const closeModal = () => {
        formRef.value.resetFields();
        visible.value = false;
      };
      return {
        visible,
        title,
        form,
        showModal,
        handleOk,
        projectNameOptions,
        formRef,
        closeModal,
      };
    },
  };
</script>

<style scoped>
  /* 可选样式调整 */
  .ant-modal-body {
    max-width: 600px;
    margin: 0 auto;
  }
</style>