global-web/src/views/saleCode/advancePayment/advancePaymentList.vue

<template>
    <div class="p-2">
      <!--查询区域-->
      <div class="jeecg-basic-table-form-container">
        <a-form ref="formRef" @keyup.enter.native="reload" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row :gutter="24">
            <a-col :lg="8">
                <a-form-item name="billDate">
                  <template #label><span title="预收日期(bill date)">预收日期(bill date)</span></template>
                  <a-range-picker value-format="YYYY-MM-DD"  v-model:value="queryParam.billDate" class="query-group-cust"/>
                </a-form-item>
            </a-col> 
            <a-col :lg="8">
                <a-form-item name="billCode">
                  <template #label><span title="预收款编码(bill code)">预收款编码(bill code)</span></template>
                  <a-input placeholder="请输入预收款编码(bill code)" v-model:value="queryParam.billCode" allow-clear AutoComplete="off"></a-input>
                </a-form-item>
            </a-col>          
            <template v-if="toggleSearchStatus">
              <a-col :lg="8">
                <a-form-item name="project">
                  <template #label><span title="项目(project)">项目(project)</span></template>
                  <a-input v-model:value="queryParam.project" placeholder="请输入" AutoComplete="off"/>
                </a-form-item>
              </a-col>
              <a-col :lg="8">
                <a-form-item name="customer">
                  <template #label><span title="客户(customer)">客户(customer)</span></template>
                  <a-input placeholder="请输入" v-model:value="queryParam.customerName" allow-clear AutoComplete="off"></a-input>
                </a-form-item>
              </a-col>
              <a-col :lg="8">
                <a-form-item name="saleOrderCode">
                  <template #label><span title="订单编号(sale order code)">订单编号(sale order code)</span></template>
                  <a-input placeholder="请输入" v-model:value="queryParam.saleOrderCode" allow-clear AutoComplete="off"></a-input>
                </a-form-item>
              </a-col>
              <a-col :lg="8">
                <a-form-item name="fnumber">
                  <template #label><span title="F号(F Number)">F号(F Number)</span></template>
                  <a-input placeholder="请输入" v-model:value="queryParam.fnumber" allow-clear AutoComplete="off"></a-input>
                </a-form-item>
              </a-col>
              <a-col :lg="8">
                <a-form-item name="submit">
                  <template #label><span title="提交(submit)">提交(submit)</span></template>
                  <JDictSelectTag v-model:value="queryParam.submit" placeholder="请选择" dictCode="yes_or_no" style="width: 100%;"/>
                </a-form-item>
              </a-col>
            </template>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-col :lg="6">
                  <a-button type="primary" preIcon="ant-design:search-outlined" @click="reload">查询</a-button>
                  <a-button preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
                  <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">
                    {{ toggleSearchStatus ? '收起' : '展开' }}
                    <Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
                  </a>
                </a-col>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!--引用表格-->
     <BasicTable @register="registerTable" :rowSelection="rowSelection" size="small" >
       <!--插槽:table标题-->
        <template #tableTitle>
            <a-button type="primary" v-auth="'saleCode:sale_order:add'"  @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增(add)</a-button>
            <a-button  type="primary" v-auth="'saleCode:sale_order:exportXls'"  preIcon="ant-design:export-outlined" @click="onExportXls"> 导出(export)</a-button>
            <a-button  type="primary"  @click="submit" > 提交(submit)</a-button>
            <a-button  type="primary"  @click="cancelSubmit"> 取消提交(cancelSubmit)</a-button>
            <a-dropdown v-if="selectedRowKeys.length > 0">
                <template #overlay>
                  <a-menu>
                    <a-menu-item key="1" @click="batchHandleDelete"  v-auth="'saleCode:sale_order_form:deleteBatch'">
                      <Icon icon="ant-design:delete-outlined"></Icon>
                      删除(delete)
                    </a-menu-item>
                  </a-menu>
                </template>
                <a-button v-auth="'saleCode:sale_order:delete'">批量操作
                  <Icon icon="mdi:chevron-down"></Icon>
                </a-button>
          </a-dropdown>
        </template>
         <!--操作栏-->
        <template #action="{ record }">
          <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
        </template>
        <!--字段回显插槽-->
        <template v-slot:bodyCell="{ column, record, index, text }">
        </template>
      </BasicTable>
      <!-- 表单区域 -->
      <advancePaymentFormModal  @register="registerModal" @success="handleSuccess"></advancePaymentFormModal>
    </div>
  </template>
  
  <script lang="ts" name="saleCode-saleInquiryForm" setup>
    import {ref, reactive, computed, unref,onMounted} from 'vue';
    import {BasicTable, useTable, TableAction} from '/@/components/Table';
    import { useListPage } from '/@/hooks/system/useListPage'
    import {useModal} from '/@/components/Modal';
    import {columns,} from './advancePaymentForm.data';
    import {list, deleteOne, batchDelete, getImportUrl,getExportUrl,batchSubmit,cancelBatchSubmit} from './advancePaymentForm.api';
    import { cloneDeep } from "lodash-es";
    import { defHttp } from '/@/utils/http/axios';
    import { JDictSelectTag} from '/@/components/Form';
    import advancePaymentFormModal from './components/advancePaymentFormModal.vue';
    import JSelectInput from '/@/components/Form/src/jeecg/components/JSelectInput.vue';
    import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';
    import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';
    import { message } from 'ant-design-vue';
    const formRef = ref();
    const queryParam = reactive<any>({});
    //注册model
    const [registerModal, {openModal}] = useModal();
    var classOption = ref([]);
     //注册table数据
    const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
        tableProps:{
             title: '预付款',
             api: list,
             columns,
             canResize:false,
             useSearchForm: false,
             actionColumn: {
                 width: 200,
                 fixed:'right'
             },
             scroll:{
              x:'4000px'
             },
             beforeFetch: async (params) => {
               let rangerQuery = await setRangeQuery();
               return Object.assign(params, rangerQuery);
             },
          },
          exportConfig: {
              name:"预付款",
              url: getExportUrl,
              params: queryParam,
          },
          importConfig: {
              url: getImportUrl,
              success: handleSuccess
          },
      })
  
    const [registerTable, {reload},{ rowSelection, selectedRowKeys }] = tableContext

     // 自动请求并暴露内部方法
     onMounted(() => {
      getOptiom()
    });
  
     /**
      * 新增事件
      */
    function handleAdd() {
       openModal(true, {
         isUpdate: false,
         showFooter: true,
         isRevise: false
       });
    }
     /**
      * 编辑事件
      */
    function handleEdit(record: Recordable) {
       openModal(true, {
         record,
         isUpdate: true,
         showFooter: true,
         isRevise: false
       });
     }
    //  产品分类
    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 handleDetail(record: Recordable) {
       openModal(true, {
         record,
         isUpdate: true,
         showFooter: false,
       });
     }
     /**
      * 删除事件
      */
    async function handleDelete(record) {
       await deleteOne({id: record.id}, handleSuccess);
     }
     /**
      * 批量删除事件
      */
    async function batchHandleDelete() {
       await batchDelete({ids: selectedRowKeys.value},handleSuccess);
     }
     /**
      * 成功回调
      */
    function handleSuccess() {
        (selectedRowKeys.value = []) && reload();
     }
     /**
        * 操作栏
        */
    function getTableAction(record){
         return [
           {
             label: '编辑(edit)',
             onClick: handleEdit.bind(null, record),
             auth: 'saleCode:sale_order:edit',
             ifShow: record.submit=='0'||!record.submit
           },
           {
             label: '详情(detail)',
             onClick: handleDetail.bind(null, record),
             ifShow: record.submit=='1'
           }, 
         ]
     }
       /**
          * 下拉操作栏
          */
    function getDropDownAction(record){
         return [
            {
             label: '详情(detail)',
             onClick: handleDetail.bind(null, record),
             ifShow: record.submit=='0'||!record.submit
           },
           {
             label: '删除(delete)',
             popConfirm: {
               title: '是否确认删除',
               confirm: handleDelete.bind(null, record),
               placement: 'topLeft'
             },
             auth: 'saleCode:sale_order:delete',
             ifShow: record.submit=='0'||!record.submit
           }
         ]
     }
    function submit(){
      if(selectedRowKeys.value.length==0){
        message.warning('请选择数据')
      }else{
        var ids=selectedRowKeys.value.join(',')
        batchSubmit({ids: ids},handleSuccess);
      }
    }
    function cancelSubmit(){
      if(selectedRowKeys.value.length==0){
        message.warning('请选择数据')
      }else{
        var ids=selectedRowKeys.value.join(',')
        cancelBatchSubmit({ids: ids},handleSuccess);
      }
    }
  
    /* ----------------------以下为原生查询需要添加的-------------------------- */
    const toggleSearchStatus = ref<boolean>(false);
    const labelCol = reactive({
      xs:24,
      sm:8,
    });
    const wrapperCol = reactive({
      xs: 24,
      sm: 16,
    });
    const labelCol1 = reactive({
      xs:24,
      sm:12,
    });
    const wrapperCol1 = reactive({
      xs: 24,
      sm: 12,
    });
    /**
     * 重置
     */
    function searchReset() {
      formRef.value.resetFields();
      selectedRowKeys.value = [];
      //刷新数据
      reload();
    }
  
    
    let rangeField = 'billDate,'
    
    /**
     * 设置范围查询条件
     */
    async function setRangeQuery(){
      let queryParamClone = cloneDeep(queryParam);
      if (rangeField) {
        let fieldsValue = rangeField.split(',');
        fieldsValue.forEach(item => {
          if (queryParamClone[item]) {
            let range = queryParamClone[item];
            queryParamClone[item+'_begin'] = range[0];
            queryParamClone[item+'_end'] = range[1];
            delete queryParamClone[item];
          } else {
            queryParamClone[item+'_begin'] = '';
            queryParamClone[item+'_end'] = '';
          }
        })
      }
      return queryParamClone;
    }
  </script>
  <style lang="less" scoped>
    .jeecg-basic-table-form-container {
      padding: 0;
      .table-page-search-submitButtons {
        display: block;
        margin-bottom: 8px;
        white-space: nowrap;
      }
      .query-group-cust{
        min-width: 100px !important;
      }
      .query-group-split-cust{
        width: 30px;
        display: inline-block;
        text-align: center
      }
      .ant-form-item:not(.ant-form-item-with-help){
        margin-bottom: 8px;
        height: 32px;
      }
      :deep(.ant-picker),:deep(.ant-input-number){
        width: 100%;
      }
    }
  </style>