global-web/src/views/purchase/purchaseInquiryForm/components/SelectCustomerInquiryModal.vue

<template>
    <a-modal
      title="选择客户询价单(select customer inquiry)"
      width="95%"
      :visible="visible"
      :maskClosable="false"
      switchFullscreen
      @ok = "handleOk"
      @cancel="handleCancel">
        <div>
          <a-card  :body-style="{ padding: '10px' }" :bordered="false" style="margin: 10px;">
            <div class="table-page-search-wrapper">
                <a-form :model="queryParams" :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :md="6" :sm="8">
                        <a-form-item label="询价单号(bill code)">
                            <a-input placeholder="请输入" v-model:value="queryParams.billCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="8">
                        <a-form-item label="单据日期(bill date)">
                            <a-range-picker value-format="YYYY-MM-DD"  v-model:value="queryParams.billDate" class="query-group-cust"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="8">
                        <a-form-item label="询价项目(inquiry project)">
                            <a-input placeholder="请输入" v-model:value="queryParams.inquiryProject" :disabled="fatherProjectName!==''"></a-input>
                        </a-form-item>
                    </a-col>
                    <template v-if="toggleSearchStatus">
                        <a-col :md="6" :sm="8">
                            <a-form-item  label="业务类型(busyness type)">
                                <JDictSelectTag v-model:value="queryParams.busynessType" placeholder="请选择" dictCode="busyness_type"/>
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="8">
                            <a-form-item label="优先级(priority)">
                                <JDictSelectTag v-model:value="queryParams.priority" placeholder="请选择" dictCode="priority"/>
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="8">
                            <a-form-item label="产品分类(production class)" >
                                <JSelectInput   v-model:value="queryParams.productionClass"  placeholder="请选择" :options="classOption" ></JSelectInput>
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="8">
                            <a-form-item label="机型(model)">
                                <JDictSelectTag v-model:value="queryParams.model" placeholder="请选择" dictCode="model_typer"/>
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="8">
                            <a-form-item label="产品编号(product code)">
                                <a-input placeholder="请输入" v-model:value="queryParams.productCode"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="8">
							<a-form-item label="采购询价组(procurement inquiry team)" :label-col="labelCol1" :wrapper-col="wrapperCol1">
                                <JSelectDept v-model:value="queryParams.inquiryTeam" :multiple="false"/>
							</a-form-item>
						</a-col>
                    </template>
                    <a-col :md="6" :sm="8">
                        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="searchQuery" >查询(search)</a-button>
                            <a-button type="primary" @click="searchReset"  style="margin-left: 8px">重置(reset)</a-button>
                            <a @click="handleToggleSearch" style="margin-left: 8px">
                            {{ toggleSearchStatus ? '收起' : '展开' }}
                            <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                            </a>
                        </span>
                    </a-col>
                </a-row>
            </a-form>
           </div>
        </a-card>

        <a-card  :body-style="{ padding: '10px' }" :bordered="false" style="margin: 10px;">
            <a-alert type="info" show-icon class="alert" style="margin-bottom: 8px">
            <template #message>
                <template v-if="selectedRowKeys.length > 0">
                <span>已选中 {{ selectedRowKeys.length }} 条记录</span>
                <a-divider type="vertical" />
                <a @click="selectedRowKeys = []">清空</a>
                </template>
                <template v-else>
                <span>未选中任何数据</span>
                </template>
            </template>
            </a-alert>
            <a-table
                :columns="columns"
                :row-key="record => record.childId"
                :data-source="dataSource"
                bordered
                size="small"
                @change="handleTableChange"
                :pagination="pagination"
                :scroll="{ x: 4500, y: 300 }"
                :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            >
            </a-table>
        </a-card>
      </div>
    </a-modal>
</template>
<script lang="ts" setup>
    import {ref, reactive } from 'vue';
    import { defHttp } from '/@/utils/http/axios';
    import { message } from 'ant-design-vue';
    import { filterObj, getFileAccessHttpUrl } from '/@/utils/common/compUtils';
    import { JDictSelectTag} from '/@/components/Form';
    import JSelectInput from '/@/components/Form/src/jeecg/components/JSelectInput.vue';
    import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';
    const emit = defineEmits([ 'selectCustomerInquiry']); //定义emit
    let classOption = ref([])
    var visible = ref(false)
    const columns = [
        {
            title: '询价单号(bill code)',
            dataIndex: 'billCode',
            key: 'billCode',
            align:"center"
        },
        {
            title: '单据日期(bill date)',
            dataIndex: 'billDate',
            key: 'billDate',
            align:"center"
        },
        {
            title: '询价项目(inquiry project)',
            dataIndex: 'inquiryProject_dictText',
            key: 'inquiryProjec',
            align:"center",
            width:200
        },
        {
            title: '询价客户(inquiry customer)',
            key: 'inquiryCustomer',
            dataIndex: 'inquiryCustomer_dictText',
            align:"center"
        },
        {
            title: '询价有效期(inquiry period)',
            align:"center",
            dataIndex: 'time',
            width:250,
            customRender:({text,record}) =>{
            if(record.inquiryPeriodBegin&&record.inquiryPeriodEnd){
                text = record.inquiryPeriodBegin+'~'+record.inquiryPeriodEnd
            }else if(!record.inquiryPeriodBegin){
                text = record.inquiryPeriodEnd
            }else if(!record.inquiryPeriodEnd){
                text = record.inquiryPeriodBegin
            }else{
                text=''
            }
            return text;
            },
        },
        {
            title: '优先级(priority)',
            align:"center",
            dataIndex: 'priority_dictText'
        },
        {
            title: '产品分类(production class)',
            align:"center",
            dataIndex: 'productionClass_dictText'
        },
        {
            title: '机型(model)',
            align:"center",
            dataIndex: 'model'
        },
        {
            title: '采购询价组(procurenment inquiry team)',
            key: 'inquiryTeam',
            dataIndex: 'inquiryTeam',
            align:"center"
        },
        {
            title: '产品编码(product code)',
            key: 'productCode',
            dataIndex: 'productCode',
            align:"center"
        },
        {
            title: '产品英文名(product english name)',
            key: 'englishName',
            dataIndex: 'englishName',
            align:"center",
            width:250
        },
        {
            title: '型号(child model)',
            key: 'childModel;',
            dataIndex: 'childModel;',
            align:"center",
            width:250
        },
        {
            title: '厂家(factory)',
            key: 'factory;',
            dataIndex: 'factory;',
            align:"center",
            width:250
        },
        {
            title: '质量等级(quality grade)',
            key: 'qualityGrade;',
            dataIndex: 'qualityGrade;',
            align:"center",
            width:250
        },
        {
            title: '数量(quality)',
            key: 'quantity;',
            dataIndex: 'quantity;',
            align:"center",
            width:250
        },
        {
            title: '单位(unit)',
            key: 'unit;',
            dataIndex: 'unit;',
            align:"center",
            width:250
        },
        {
            title: '备注(notes)',
            key: 'notes;',
            dataIndex: 'notes;',
            align:"center",
            width:250
        },
        
    ];
    const labelCol = ref({
    xs: { span: 24 },
    sm: { span: 9 },
    });
    const wrapperCol = ref({
        xs: { span: 24 },
        sm: { span: 15 },
    });
    const labelCol1 = ref({
    xs: { span: 24 },
    sm: { span: 11 },
    });
    const wrapperCol1 = ref({
        xs: { span: 24 },
        sm: { span: 13 },
    });
    const dataSource =ref([]);
    let selectedRowKeys = ref([]);
    let selectedRows = ref([]);
    var fatherProjectName = ref('');
    var fatherSourceCode = ref('');
    const toggleSearchStatus = ref(false);
    const queryParams = ref({
        billCode:'',
        billDate:'',
        inquiryProject:'',
        busynessType:'',
        priority:'',
        productionClass:'',
        model:'',
        productCode:'',
        inquiryTeam:'',
        projectName:''
    });
    let pagination = ref({
      current: 1,
      pageSize: 10,
      total: '', // 假设总共有100条数据
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
      },
      size:'small'
    });
    function loadData(){
        let params = getQueryParams();
        defHttp
        .get({ url: '/saleCode/saleInquiryForm/alertSaleInquiryList',params}, { isTransformResponse: false })
        .then((res) => {
            if (res.success) {
                dataSource.value = res.result.records;
                pagination.value.total = res.result.total;
                pagination.value.current = res.result.current;
                pagination.value.pageSize = res.result.size;                
            } else {
                message.error(res.message);
            }
        })
        .finally(() => {
            // loading.value = false;
        });
    }
    function getQueryParams(){
        let params = Object.assign(queryParams.value);
        params.pageNo = pagination.value.current;
        params.pageSize = pagination.value.pageSize;
        if(fatherProjectName.value&&fatherProjectName.value!==''){
            params.projectName = fatherProjectName.value
        }else{
            params.projectName = ''
        }
        return filterObj(params);
    }
    function handleTableChange(paginations, filters, sorter){
        pagination.value.total = paginations.total;
        pagination.value.current = paginations.current;
        pagination.value.pageSize = paginations.pageSize;
        loadData()
    };
    function getOptiom(){
    defHttp
        .get({ url: 'baseCode/baseProductClass/list'}, { isTransformResponse: false })
        .then((res) => {
            if (res.success) {
              classOption.value = []
              res.result.records.forEach(element => {
                  var obj = {
                    label: element.name?element.name:'无名称请维护',
                    value: element.id?element.id:''
                  };
                  classOption.value.push( obj)
              });    
            }
        })
        .finally(() => {
            // loading.value = false;
        });
  }
    function searchQuery(){
        loadData();
    }
    function searchReset(){
        queryParams.value = {
            billCode:'',
            billDate:'',
            inquiryProject:'',
            busynessType:'',
            priority:'',
            productionClass:'',
            model:'',
            productCode:'',
            inquiryTeam:'',
        }
        pagination.value.current =1;
        pagination.value.pageSize = 10; 
        if(fatherProjectName.value&&fatherProjectName.value!==''){
            queryParams.value.projectName = fatherProjectName.value
        }else{
            queryParams.value.projectName = ''
        }
        loadData();
    }
    function handleToggleSearch(){
        toggleSearchStatus.value = !toggleSearchStatus.value;
    }
    function onSelectChange(keys,rows){
        selectedRowKeys.value = keys
        selectedRows.value = rows
    }
    function handleOk(){
      var arr = []
      selectedRows.value.map(item=>arr.push(item.billCode))
      if(fatherSourceCode.value&&fatherSourceCode.value!==''){
        arr.push(fatherSourceCode.value)
      }
      if(selectedRowKeys.value.length==0){
        message.error('请勾选数据');
      }else if(new Set(arr).size!==1){
        message.error('请勾选询价单号相同的数据');
      }else{
        emit('selectCustomerInquiry', selectedRows.value)
        handleCancel()
      }
    }
    function handleCancel(){
      visible.value = false
      selectedRowKeys.value = []
      selectedRows.value=[]
    }
    function getTable(formData){
        visible.value = true
        if(formData.projectName&&formData.projectName!==''){
            fatherProjectName.value = formData.projectName
        }else{
            fatherProjectName.value = ''
        }
        if(formData.sourceCode&&formData.sourceCode!==''){
            fatherSourceCode.value = formData.sourceCode
        }else{
            fatherSourceCode.value = ''
        }
        loadData()
        getOptiom()
    }
    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>