global-web/src/views/saleCode/deliveryNotice/deliveryNoticeList.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="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>
            <a-col :lg="8">
                <a-form-item name="bideliveryDatellDate">
                  <template #label><span title="发货日期(delivery date)">发货日期(delivery date)</span></template>
                  <a-range-picker value-format="YYYY-MM-DD"  v-model:value="queryParam.deliveryDate" class="query-group-cust"/>
                </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>
                  <ApiSelect
                    :api="ProjectOption"
                    showSearch
                    v-model:value="queryParam.project"
                    :filterOption="false"
                    resultField="records"
                    labelField="name"
                    valueField="id"
                    :params='{pageSize:-1}'
                  />
                </a-form-item>
              </a-col>
              <a-col :lg="8">
                <a-form-item name="customer">
                  <template #label><span title="客户(customer)">客户(customer)</span></template>
                    <ApiSelect
                    :api="CustomerOption"
                    showSearch
                    v-model:value="queryParam.customer"
                    :filterOption="false"
                    resultField="records"
                    labelField="abbreviation"
                    valueField="id"
                    :params='{pageSize:-1}'
                  />
                </a-form-item>
              </a-col>
              <a-col :lg="8">
                <a-form-item name="priority">
                  <template #label><span title="优先级(priority)">优先级(priority)</span></template>
                  <JDictSelectTag v-model:value="queryParam.priority" placeholder="请选择" dictCode="priority"/>
                </a-form-item>
              </a-col>
              <a-col :lg="8">
                <a-form-item name="productionClass" >
                  <template #label><span title="产品分类(production class)">产品分类(production class)</span></template>
                      <ApiSelect
                      :api="ClassList"
                      showSearch
                      v-model:value="queryParam.productionClass"
                      :filterOption="false"
                      resultField="records"
                      labelField="name"
                      valueField="id"
                      :params='{pageSize:-1}'
                    />
                </a-form-item>
              </a-col>
              <a-col :lg="8">
                <a-form-item name="model">
                  <template #label><span title="机型(model)">机型(model)</span></template>
                  <JDictSelectTag v-model:value="queryParam.model" placeholder="请选择" dictCode="model_typer"/>
                </a-form-item>
              </a-col>
              <a-col :lg="8">
                <a-form-item name="maker">
                  <template #label><span title="厂家(maker)">厂家(maker)</span></template>
                  <JDictSelectTag v-model:value="queryParam.maker" placeholder="请选择" dictCode="factory"/>
                </a-form-item>
              </a-col>
              <a-col :lg="8">
                <a-form-item name="saleDepartment">
                  <template #label><span title="销售部门(sale department)">销售部门(sale department)</span></template>
                  <a-input placeholder="请输入销售部门(sale department)" v-model:value="queryParam.saleDepartment" allow-clear AutoComplete="off"></a-input>
                </a-form-item>
              </a-col>
              <a-col :lg="8">
                <a-form-item name="salesman">
                  <template #label><span title="业务员(salesman)">业务员(salesman)</span></template>
                  <a-input placeholder="请输入业务员(salesman)" v-model:value="queryParam.salesman" 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"/>
                </a-form-item>
              </a-col>
              <a-col :lg="8">
                <a-form-item name="close">
                  <template #label><span title="关闭(close)">关闭(close)</span></template>
                  <JDictSelectTag v-model:value="queryParam.close" placeholder="请选择"  dictCode="yes_or_no"/>
                </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"  @click="handleAdd" preIcon="ant-design:plus-outlined" v-auth="'saleCode:sale_delivery:add'"> 新增(add)</a-button>
            <a-button  type="primary"   preIcon="ant-design:export-outlined" @click="onExportXls"  v-auth="'saleCode:sale_delivery:exportXls'"> 导出(export)</a-button>
            <a-button  type="primary"  @click="submit" > 提交(submit)</a-button>
            <a-button  type="primary"  @click="cancelSubmit"> 取消提交(cancelSubmit)</a-button>
            <a-button  type="primary"   @click="close" > 关闭(close)</a-button>
            <a-dropdown v-if="selectedRowKeys.length > 0">
                <template #overlay>
                  <a-menu>
                    <a-menu-item key="1" @click="batchHandleDelete"   v-auth="'saleCode:sale_delivery:deleteBatch'">
                      <Icon icon="ant-design:delete-outlined"></Icon>
                      删除(delete)
                    </a-menu-item>
                  </a-menu>
                </template>
                <a-button>批量操作
                  <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>

        <template #viewFile="props">
            <a @click="viewFileDetail(props)">查看(view)</a>
        </template>
      </BasicTable>
      <ViewFileListModal ref="ViewFileListModalRef"></ViewFileListModal>
      <deliveryNoticeFormModal  @register="registerModal" @success="handleSuccess"></deliveryNoticeFormModal>
      <!-- 表单区域 -->
    </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 './delivertNoticeForm.data';
    import {list, deleteOne, batchDelete, getImportUrl,getExportUrl,batchSubmit,cancelBatchSubmit,bacthClose,ProjectOption,CustomerOption,ClassList} from './delivertNoticeForm.api';
    import { JDictSelectTag,ApiSelect} from '/@/components/Form';
    import ViewFileListModal from './components/ViewFileListModal.vue';
    import deliveryNoticeFormModal from './components/deliveryNoticeFormModal.vue';
    import { message } from 'ant-design-vue';
    import { cloneDeep } from "lodash-es";
    const formRef = ref();
    const ViewFileListModalRef = ref();
    const queryParam = reactive<any>({});
    const checkedKeys = ref<Array<string | number>>([]);
    //注册model
    const [registerModal, {openModal}] = useModal();
     //注册table数据
    const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
        tableProps:{
             title: '发货通知单',
             api: list,
             columns,
             canResize:false,
             useSearchForm: false,
             actionColumn: {
                 width: 340,
                 fixed:'right'
             },
             scroll:{
              x:'3500px'
             },
             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

  
     /**
      * 新增事件
      */
    function handleAdd() {
       openModal(true, {
         isUpdate: false,
         showFooter: true,
         isRevise: false
       });
    }
     /**
      * 编辑事件
      */
    function handleEdit(record: Recordable) {
       openModal(true, {
         record,
         isUpdate: true,
         showFooter: true,
         isRevise: false
       });
     }
     

     /**
      * 详情
     */
    function handleDetail(record: Recordable) {
       openModal(true, {
         record,
         isUpdate: true,
         showFooter: false,
         isRevise: 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),
             ifShow: record.submit=='0',
             auth: 'saleCode:sale_delivery:edit',
           },
           {
             label: '详情(detail)',
             onClick: handleDetail.bind(null, record),
             ifShow: record.submit=='1'
           }, 
         ]
     }
       /**
          * 下拉操作栏
          */
    function getDropDownAction(record){
         return [
           {
             label: '删除(delete)',
             popConfirm: {
               title: '是否确认删除',
               confirm: handleDelete.bind(null, record),
               placement: 'topLeft'
             },
             auth: 'saleCode:sale_delivery:delete',
             ifShow: record.submit=='0',
           },
           {
             label: '导出装箱单(export paking list)'
           },
           {
             label: '导出签单(export markt)'
           },
           {
             label: '导出唛头(export mark) '
           },
           {
             label: '导出随货发票(export accompanying invoice) '
           },
         ]
     }
    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);
      }
    }
    function viewFileDetail(props){
        ViewFileListModalRef.value.getTable(props.column.dataIndex,props.record)
    }
    function close(){
    if(selectedRowKeys.value.length==0){
      message.warning('请选择数据')
    }else{
      var ids=selectedRowKeys.value.join(',')
      bacthClose({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 = 'deliveryDate,'
    
    /**
     * 设置范围查询条件
     */
    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>