global-web/src/views/inventiry/purInAbnormal/purInAbnormalList.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 ></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="请选择"/>
                </a-form-item>
              </a-col>
              <a-col :lg="8">
                <a-form-item name="customerName">
                  <template #label><span title="供应商(supplier)">供应商(supplier)</span></template>
                  <a-input placeholder="请输入供应商(supplier)" v-model:value="queryParam.supplier" allow-clear ></a-input>
                </a-form-item>
              </a-col>
              <a-col :lg="8">
                <a-form-item name="productionClass" >
                  <template #label><span title="产品分类(production class)">产品分类(production class)</span></template>
                  <JSelectInput   v-model:value="queryParam.productionClass"  placeholder="请选择" :options="classOption" style="width: 100%;"></JSelectInput>
                </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" style="width: 100%;"/>
                </a-form-item>
              </a-col>
              <a-col :lg="8">
                <a-form-item name="maker">
                  <template #label><span title="厂家(maker)">厂家(maker)</span></template>
                  <a-input placeholder="请输入厂家(maker)" v-model:value="queryParam.maker" allow-clear ></a-input>
                </a-form-item>
              </a-col>            
              <a-col :lg="8">
                <a-form-item name="warehouse">
                  <template #label><span title="仓库(warehouse)">仓库(warehouse)</span></template>
                  <a-input placeholder="请输" v-model:value="queryParam.warehouse" allow-clear ></a-input>
                </a-form-item>
              </a-col>
              <a-col :lg="8">
                <a-form-item name="goodsAllocation">
                  <template #label><span title="货位(goods allocation)">货位(goods allocation)</span></template>
                  <a-input placeholder="请输" v-model:value="queryParam.goodsAllocation" allow-clear ></a-input>
                </a-form-item>
              </a-col>
              <a-col :lg="8">
                <a-form-item name="hasDeal">
                  <template #label><span title="处理(deal)">处理(deal)</span></template>
                  <JDictSelectTag v-model:value="queryParam.hasDeal" 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"  preIcon="ant-design:export-outlined" @click="onExportXls"> 导出(export)</a-button>
            <a-button  type="primary"   preIcon="ant-design:export-outlined" @click="onProcessed"> 已处理(Processed)</a-button>
        </template>
         <!--操作栏-->
        <template #action="{ record }">
          <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
        </template>
        <!--字段回显插槽-->
        <template v-slot:bodyCell="{ column, record, index, text }">
        </template>
      </BasicTable>
      <!-- 表单区域 -->
      <purInAbnormalFormModal @register="registerModal" @success="handleSuccess"></purInAbnormalFormModal>
    </div>
  </template>
  
  <script lang="ts" name="saleCode-saleInquiryForm" setup>
    import {ref, reactive,onMounted} from 'vue';
    import {BasicTable, useTable, TableAction} from '/@/components/Table';
    import { useListPage } from '/@/hooks/system/useListPage'
    import {useModal} from '/@/components/Modal';
    import purInAbnormalFormModal from './components/purInAbnormalFormModal.vue'
    import {columns} from './purInAbnormalForm.data';
    import {list, getImportUrl,getExportUrl,ProcessedList} from './purInAbnormalForm.api';
    import { cloneDeep } from "lodash-es";
    import { defHttp } from '/@/utils/http/axios';
    import { JDictSelectTag} from '/@/components/Form';
    import JSelectInput from '/@/components/Form/src/jeecg/components/JSelectInput.vue';
    import { message } from 'ant-design-vue';
    const formRef = ref();
    const queryParam = reactive<any>({
      type:'2'
    });
    //注册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:'2500px'
             },
             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 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,
       });
     }

     function handlTackle(record){
      ProcessedList({ids: record.id},handleSuccess);
     }
     function onProcessed(){
        if(selectedRowKeys.value.length==0){
          message.warning('请选择数据')
        }else{
          var ids=selectedRowKeys.value.join(',')
          ProcessedList({ids: ids},handleSuccess);
        }
     }
  
     /**
        * 操作栏
        */
    function getTableAction(record){
         return [
           {
             label: '详情(detail)',
             onClick: handleDetail.bind(null, record),
           },
           {
             label: '已处理(detail)',
             onClick: handlTackle.bind(null, record),
             ifShow: record.hasDeal=='0'||!record.hasDeal
           },
         ]
     }
       /**
          * 下拉操作栏
          */
    function getDropDownAction(record){
         return [ ]
     }
      /**
      * 成功回调
      */
    function handleSuccess() {
        (selectedRowKeys.value = []) && reload();
     }

    /* ----------------------以下为原生查询需要添加的-------------------------- */
    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 = [];
      queryParam.value.type='2'
      //刷新数据
      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>