global-web/src/views/saleCode/saleInquiryForm/components/AddProjectModal.vue

<template>
    <div ref="addProjectModalRef">
        <a-modal
            title="新增项目(add project)"
            width="800px"
            :visible="visible"
            :maskClosable="false"
            switchFullscreen
            @ok = "handleOk"
            @cancel="handleCancel"
            :getContainer ='()=>$refs.addProjectModalRef'
        >
            <div>
                <a-form ref="form" :model="model" :rules="validatorRules">
                    <a-row :gutter="24">
                        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                            <a-form-item  prop="customer" label="客户(customer)" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                <ApiSelect
                                    :api="CustomerOption"
                                    showSearch
                                    v-model:value="model.customer"
                                    :filterOption="false"
                                    resultField="records"
                                    labelField="name"
                                    valueField="id"
                                />
                                <!-- <a-input v-model:value="model.customer" placeholder="请输入客户(customer)" ></a-input> -->
                            </a-form-item>
                        </a-col>
                        <a-col >
                            <a-form-item  prop="code" label="编码(code)" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                <a-input v-model:value="model.code" placeholder="自动生成" disabled></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col >
                            <a-form-item  prop="name" label="名称(name)" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                <a-input v-model:value="model.name" placeholder="名称(name)" ></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col >
                            <a-form-item  prop="notes" label="备注(notes)" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                <a-input v-model:value="model.notes" placeholder="请输入备注(notes)" ></a-input>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
        </a-modal>
    </div>
</template>
<script lang="ts" setup>
    import {ref, } from 'vue';
    import { defHttp } from '/@/utils/http/axios';
    import { message } from 'ant-design-vue';
    import {ApiSelect} from '/@/components/Form/index';
    import{CustomerOption} from '../SaleInquiryForm.api';
    import JSelectInput from '/@/components/Form/src/jeecg/components/JSelectInput.vue';
    var visible = ref(false);
    var form = ref();
    var addProjectModalRef = ref()
    const emit = defineEmits([ 'success']);
    var model = ref({
        customer:'',
        code:'',
        name:'',
        notes:'',
    });
    const labelCol = ref({
        xs: { span: 24 },
        sm: { span: 5 },
    });
    const wrapperCol = ref({
        xs: { span: 24 },
        sm: { span: 19 },
    });
    const validatorRules = {
        customer: [{ required: true, message: '客户(customer)不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '名称(name)不能为空', trigger: 'blur' }],
    };
    function getTable(){
        visible.value = true
    }
    function handleOk(){
      form.value.validate().then(async () => {
        let url = '/baseCode/baseProjectArchive/add'
        let params = model.value
        defHttp.post({url,params}, { isTransformResponse: false })
            .then((res) => {
                if (res.success) {
                    message.success(res.message);
                } else {
                    message.error(res.message);
                }
            }).finally(() => {
                      handleCancel()
            });
       }).catch(error => {
           console.log('error', error);
       });
    }
    function handleCancel(){
      emit('success')
      visible.value = false
      model.value = {
            customer:'',
            code:'',
            name:'',
            notes:'',
      }
      form.value.resetFields()
    }
    defineExpose({
      getTable
    });
</script>
<style scoped lang="less">
/deep/.ant-form-item{
    margin-bottom: 8px !important;
}
// /deep/.ant-table-wrapper .ant-table-thead > tr > th, .ant-table-wrapper .ant-table-thead > tr > td{
//     padding: 8px !important;
// }

/deep/.ant-modal-body{
    padding: 24px;
}
</style>