运单详情页新增订单包件明细

src/utils/util.js

@@ -823,7 +823,7 @@ export const handleInputQuery = (value, col, query, isRegExp = false, isStart =
     return;
   }
 
-  const _value = isRegExp ? new RegExp(isStart ? '^' : '' + value) : value;
+  const _value = isRegExp ? new RegExp((isStart ? '^' : '') + value) : value;
   query[col.prop] = _value;
 };
 

src/views/distribution/inventory/BookingNote.vue

@@ -1077,6 +1077,60 @@
           >
           </tablecmt>
         </el-tab-pane>
+
+        <el-tab-pane
+          v-if="Number(details.query.waybillType) === 1"
+          label="订单包件明细"
+          name="tab8"
+        >
+          <!-- 列表模块 -->
+          <tablecmt
+            ref="tableOrderPackgeNodeRef"
+            :columnList="details.orderPackageOption.columnList"
+            :tableData="details.orderPackageOption.renderData"
+            :loading="loadingObj.orderPackageLoading"
+            @inputTxt="
+              (value, col) => {
+                console.log('value :>> ', value);
+                const { data, query } = details.orderPackageOption;
+                handleInputQuery(value, col, query.inputQuery, true);
+                console.log('query.inputQuery :>> ', query.inputQuery);
+                details.orderPackageOption.renderData = handleFilterData(data, [], query);
+              }
+            "
+            @selectCheck="
+              (value, col) => {
+                console.log('value :>> ', value);
+                const { data, query } = details.orderPackageOption;
+                handleSelectQuery(value, col, query.selectQuery);
+                console.log('query.inputQuery :>> ', query.inputQuery);
+                details.orderPackageOption.renderData = handleFilterData(data, [], query);
+              }
+            "
+          >
+            <template #default="slotProps">
+              <template v-if="slotProps.scope.column.label === '是否维护'">
+                <el-tag
+                  :class="{
+                    red: slotProps.scope.row.MaintenanceOrNot === '否',
+                    green: slotProps.scope.row.MaintenanceOrNot === '是',
+                  }"
+                  style="color: #fff"
+                >
+                  {{ slotProps.scope.row.MaintenanceOrNot }}
+                </el-tag>
+              </template>
+
+              <!-- 成本品类 -->
+              <template v-else-if="slotProps.scope.column.label === '成本品类'"> </template>
+
+              <!-- 收入品类 -->
+              <template v-else-if="slotProps.scope.column.label === '收入品类'">
+                <span>{{ slotProps.scope.row.incomeCategoryName }}</span>
+              </template>
+            </template>
+          </tablecmt>
+        </el-tab-pane>
       </el-tabs>
     </div>
   </basic-container>
@@ -1147,6 +1201,8 @@ import {
   handleSelectQuery,
   deepClone,
   ChecksWhetherTheWarehouseIsSelected,
+  handleFilterData,
+  setNodeHeight,
 } from '@/utils/util';
 import { columnList } from '@/option/distribution/VehicleStowage';
 import {
@@ -1160,16 +1216,13 @@ import {
   postFindWaybillDetail,
   postCheckWaybill,
   postCancleCheckWaybill,
+  postFindAdvanceDetailListByWaybillId,
 } from '@/api/distribution/CreateOrder.js';
 import { postPrintBatch } from '@/api/waybill/WaybillOrderList.js';
 import { getLazyTreeAll } from '@/api/base/region';
-import {
-  postWarehouseFindWaybillInfo,
-  postFindWaybillLog,
-  postFindWaybillReturnList,
-  postFindWaybillCarsLoadInfo,
-  postFindWaybillTransferInfo,
-} from '@/api/distribution/BookingNote.js';
+import { postFindWaybillLog, postFindWaybillReturnList } from '@/api/distribution/BookingNote.js';
+import { packageColumnList } from '@/option/waybill/TemporaryStorageList';
+
 import { useStore } from 'vuex';
 import { ElMessageBox, ElMessage } from 'element-plus';
 
@@ -1186,6 +1239,8 @@ const $router = useRouter();
 const $route = useRoute();
 const $store = useStore();
 
+const tableOrderPackgeNodeRef = ref();
+
 const details = reactive<any>({
   /** 表格表头 */
   WaybillTrackingColumnList: deepClone(WaybillTrackingColumnList),
@@ -1263,6 +1318,8 @@ const details = reactive<any>({
     /** 配载信息loading */
     stowageLoading: false,
     pageLoading: false,
+    /** 订单包件明细 */
+    orderPackageLoading: false,
   },
   /** 列表复选框选中的数据 */
   selectionList: [],
@@ -1291,6 +1348,20 @@ const details = reactive<any>({
   /** 打印html */
   html: '',
   regionOptione: [],
+  /** 订单包件信息 */
+  orderPackageOption: {
+    /** 表头 */
+    columnList: deepClone(packageColumnList),
+    /** 原始数据 */
+    data: [],
+    /** 渲染数据 */
+    renderData: [],
+    /** 筛选条件 */
+    query: {
+      inputQuery: {},
+      selectQuery: {},
+    },
+  },
 });
 
 const info = ref<any>({});
@@ -1556,6 +1627,45 @@ const handleFindInfo = async type => {
   }
 };
 
+/** 订单包件明细 */
+const initOrderPackage = async () => {
+  try {
+    details.loadingObj.orderPackageLoading = true;
+
+    const res = await postFindAdvanceDetailListByWaybillId({ waybillId: details.pageInfo.id });
+
+    const { data } = res.data;
+
+    details.orderPackageOption.data = getObjType(data) === 'array' ? data : [];
+
+    for (let i = 0; i < details.orderPackageOption.data.length; i++) {
+      const element = details.orderPackageOption.data[i];
+
+      element.MaintenanceOrNot = element.incomeCategoryName && element.costCategoryId ? '是' : '否';
+
+      // 收入结算
+      element.incomeCategoryName = element.incomeCategoryName || '其它';
+      element.incomeCategory = element.incomeCategoryName || '其它';
+      element.incomeCategoryId = element.incomeCategoryId || '';
+
+      // 成本结算
+      element.costCategoryName = element.costCategoryName || '其它';
+      element.costCategory = element.costCategoryName || '其它';
+      element.costCategoryId = element.costCategoryId || '';
+    }
+
+    details.orderPackageOption.renderData = handleFilterData(
+      details.orderPackageOption.data,
+      [],
+      details.orderPackageOption.query
+    );
+  } catch (error) {
+    console.log('error :>> ', error);
+  } finally {
+    details.loadingObj.orderPackageLoading = false;
+  }
+};
+
 const handleTabClick = e => {
   console.log('e :>> ', e);
   const { name } = e.props;
@@ -1585,6 +1695,13 @@ const handleTabClick = e => {
       details.data = [];
       break;
 
+    case 'tab8':
+      initOrderPackage();
+      nextTick(() => {
+        setNodeHeight(tableOrderPackgeNodeRef.value.$el);
+      });
+      break;
+
     default:
       break;
   }
@@ -1861,6 +1978,7 @@ const handlePrint = async () => {
 watch(
   () => $route.query,
   () => {
+    details.activeTab = 'tab1';
     onLoad();
   },
   { immediate: true }