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)">
                  <j-input placeholder="请输入" v-model:value="queryParams.billCode" />
                </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="billDate" @change="changeBillDate" class="query-group-cust" />
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-item label="询价项目(inquiry project)">
                  <ApiSelect
                    :api="ProjectOption"
                    showSearch
                    v-model:value="queryParams.inquiryProject"
                    optionFilterProp="label"
                    resultField="records"
                    labelField="code"
                    valueField="id"
                    :disabled="fatherProject !== ''"
                    :params="{ pageSize: -1 }"
                  />
                </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="产品分类(product class)">
                    <ApiSelect
                      :api="ClassList"
                      showSearch
                      v-model:value="queryParams.productionClass"
                      :filterOption="true"
                      resultField="records"
                      labelField="name"
                      valueField="id"
                      :params="{ pageSize: -1 }"
                      optionFilterProp="label"
                    />
                  </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)">
                    <j-input placeholder="请输入" v-model:value="queryParams.productCode" />
                  </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: 400 }"
          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        />
      </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, ApiSelect, JInput } from '/@/components/Form';
  import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';
  import { ProjectOption, ClassList } from '../purchaseInquiryForm.api';
  const emit = defineEmits(['selectCustomerInquiry']); //定义emit
  let classOption = ref([]);
  var visible = ref(false);
  const columns = [
    {
      type: 'selection',
      fixed: 'left',
      width: 0,
    },
    {
      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",
    //     ellipsis: true,
    // },
    {
      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: 'productClass',
    },
    {
      title: '机型(headModel)',
      align: 'center',
      dataIndex: 'headModel',
    },
    {
      title: '采购询价组(procurenment inquiry team)',
      key: 'inquiryTeam',
      dataIndex: 'inquiryTeam_dictText',
      align: 'center',
    },
    {
      title: '产品编码(product code)',
      key: 'productCode',
      dataIndex: 'productCode',
      align: 'center',
    },
    {
      title: '产品英文名(product english name)',
      key: 'englishName',
      dataIndex: 'englishName',
      align: 'center',
      ellipsis: true,
      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: '数量(quantity)',
      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 fatherProject = ref('');
  var fatherSourceCode = ref('');
  const toggleSearchStatus = ref(false);
  var billDate = ref([]);
  const queryParams = ref({
    billCode: '',
    inquiryProject: '',
    busynessType: '',
    priority: '',
    productionClass: '',
    model: '',
    productCode: '',
    inquiryTeam: '',
    projectName: '',
    billDate_begin: '',
    billDate_end: '',
  });
  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 (fatherProject.value && fatherProject.value !== '') {
      params.inquiryProject = fatherProject.value;
    } else {
      params.inquiryProject = params.inquiryProject;
    }
    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() {
    pagination.value.current = 1;
    loadData();
  }
  function searchReset() {
    billDate.value = [];
    queryParams.value = {
      billCode: '',
      inquiryProject: '',
      busynessType: '',
      priority: '',
      productionClass: '',
      model: '',
      productCode: '',
      inquiryTeam: '',
      projectName: '',
      billDate_begin: '',
      billDate_end: '',
    };
    pagination.value.current = 1;
    pagination.value.pageSize = 10;
    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;
    billDate.value = [];
    queryParams.value = {
      billCode: '',
      inquiryProject: '',
      busynessType: '',
      priority: '',
      productionClass: '',
      model: '',
      productCode: '',
      inquiryTeam: '',
      projectName: '',
      billDate_begin: '',
      billDate_end: '',
    };
    selectedRowKeys.value = [];
    selectedRows.value = [];
    pagination.value.current = 1;
    pagination.value.pageSize = 10;
  }
  function getTable(formData) {
    visible.value = true;
    if (formData.projectName && formData.projectName !== '') {
      fatherProject.value = formData.inquiryProject;
    } else {
      fatherProject.value = '';
    }
    if (formData.sourceCode && formData.sourceCode !== '') {
      fatherSourceCode.value = formData.sourceCode;
    } else {
      fatherSourceCode.value = '';
    }
    loadData();
    getOptiom();
  }
  function changeBillDate(prop) {
    if (prop) {
      billDate.value = prop;
      queryParams.value.billDate_begin = prop[0];
      queryParams.value.billDate_end = prop[1];
    } else {
      billDate.value = [];
      queryParams.value.billDate_begin = '';
      queryParams.value.billDate_end = '';
    }
  }
  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>