global-web/src/views/saleCode/deliveryNotice/components/FileUploadModal.vue

<template>
    <a-modal
      :title="title"
      width="45%"
      :visible="visible"
      :maskClosable="false"
      ref="FileUploadModalRef"
      switchFullscreen
      @ok = "handleOk"
      @cancel="handleCancel">
        <div>
          <a-card >
            <div class="table-page-search-wrapper">
                <a-form :model="queryParams" :label-col="labelCol" :wrapper-col="wrapperCol" ref="formDataRef">
                <a-row :gutter="24">
                    <a-col :xl="24" :lg="24" :md="24">
                        <a-form-item label="产品(product name)" name="productId"> 
                          <a-select v-model:value="queryParams.productId" style="width: 100%;" @change="changeProduct" allowClear>
                            <a-select-option v-for="item in productOption" :key="item.id" :value="item.id">{{ item.label }}</a-select-option>
                          </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :xl="24" :lg="24" :md="24">
                        <a-form-item label="名称(name)" name="name"> 
                          <a-input v-model:value="queryParams.name" AutoComplete='off'></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :xl="24" :lg="24" :md="24">
                        <a-form-item label="附件(attachs)" name="attachs">
                          <JUpload v-model:value="queryParams.attachs"></JUpload>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
           </div>
        </a-card>
      </div>
    </a-modal>
</template>
<script lang="ts" setup>
    import {ref,reactive  } from 'vue';
    import { defHttp } from '/@/utils/http/axios';
    import { message,Modal  } from 'ant-design-vue';
    import {  ApiSelect, } from '/@/components/Form/index';
    import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
    const emit = defineEmits([ 'addList']); //定义emit
    var visible = ref(false)
    var title = ref('')
    var formDataRef=ref();
    var executeMethod =ref('')
    const labelCol = reactive({
        xs:24,
        sm:4,
    });
    const wrapperCol = reactive({
        xs: 24,
        sm: 16,
    });
    var productOption = ref([]);
    const FileUploadModalRef = ref();
    const queryParams = ref({
        name:'',
        attachs:'',
        headId:'',
        type:'',
        productId:"",
        productName:''
    });
    function handleOk(){
        let executeUrl = ''
        if(executeMethod.value=='add'){
            executeUrl = '/saleCode/saleDeliveryFiles/add'
        }else{
            executeUrl = '/saleCode/saleDeliveryFiles/edit'
        }
        defHttp.post({ url: executeUrl, params: queryParams.value }, { isTransformResponse: false }).then((res) => {
          if (res.success) {
            emit('addList');
            message.warning(res.message);
            handleCancel()
          } else {
            message.warning(res.message);
          }
        })
    }
    function handleCancel(){
      visible.value = false
      formDataRef.value.resetFields()
      Modal.destroyAll();
    }
    function getTable(fatherId,fatherTitle,status,id){
        visible.value = true
        queryParams.value.headId = fatherId.value
        title.value = fatherTitle.value=='customsClearanceDocuments'?'清关资料(customs clearance documents)':'证书/报告(certificate/report)'
        queryParams.value.type = fatherTitle.value=='customsClearanceDocuments'?'1':'2'
        executeMethod.value = status
        if(status=='edit'){
            getForm(id)
        }
        productListList()
    }
    function getForm(id){
        defHttp.get({ url: '/saleCode/saleDeliveryFiles/queryById', params: {id:id} }, { isTransformResponse: false }).then((res) => {
          if (res.success) {
            queryParams.value = res.result
          } else {
            message.warning(res.message);
          }
        })
    }
    function productListList(){
        productOption.value = []
        defHttp.get({ url: '/baseCode/baseProductArchive/list', params: {pageSize:-1} }, { isTransformResponse: false }).then((res) => {
          if (res.success) {
            res.result.records.map(item=>{
              productOption.value.push({
                id:item.id,
                label:item.chineseName
              })
            })
           
          } else {
            message.warning(res.message);
          }
        })
    }
    function changeProduct(date){
      productOption.value.map(item=>{
        if(item.id==date){
          queryParams.value.productName = item.label
        }
      })
    }
    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;
// }

</style>