Merge branch 'dev' into pre-production

src/api/waybill/ChangeOrder.js

@@ -0,0 +1,19 @@
+import request from '@/axios';
+
+/**
+ * 获取暂存单列表数据
+ * @param {number} current
+ * @param {number} size
+ * @param {*} params
+ * @returns
+ */
+export const getopenOrderAdvancePageList = (page, params) => {
+  return request({
+    url: '/api/logpm-trunkline/openOrder/advancePageList',
+    method: 'get',
+    params: {
+      ...params,
+      ...page,
+    },
+  });
+};

src/api/waybill/TemporaryStorageList.js

@@ -0,0 +1,19 @@
+import request from '@/axios';
+
+/**
+ * 获取暂存单列表数据
+ * @param {number} current
+ * @param {number} size
+ * @param {*} params
+ * @returns
+ */
+export const getopenOrderAdvancePageList = (page, params) => {
+  return request({
+    url: '/api/logpm-trunkline/openOrder/advancePageList',
+    method: 'get',
+    params: {
+      ...params,
+      ...page,
+    },
+  });
+};

src/components/newTablecmt/newTablecmt.vue

@@ -643,7 +643,7 @@ defineExpose({});
 }
 .el-date-editor.el-input,
 .el-date-editor.el-input__wrapper {
-  height: 23px !important;
+  // height: 23px !important;
 }
 .copys {
   display: inline-block;

src/components/tablecmt/tablecmt.vue

@@ -545,7 +545,7 @@ function copyContent(content: string) {
 
 defineExpose({});
 </script>
-<style lang="scss" scope>
+<style lang="scss">
 // :root{
 //   --el-checkbox-checked-bg-color:'#D3832A';
 //   --el-checkbox-checked-input-border-color:'#D3832A';

src/option/waybill/ChangeOrder.js

@@ -0,0 +1,208 @@
+export const columnList = [
+  {
+    prop: '',
+    label: '复选框',
+    type: 0,
+    width: 55,
+    fixed: true,
+  },
+  {
+    prop: '',
+    label: '序号',
+    type: 12,
+    values: '',
+    width: 55,
+    fixed: true,
+  },
+  {
+    prop: 'billladingCode',
+    label: '运单号',
+    type: 13,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: true,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'carNumber',
+    label: '开单网点',
+    type: 2,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: true,
+    sortable: true,
+  },
+  {
+    prop: 'driverName',
+    label: '状态',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'driverPhone',
+    label: '开单类型',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'warehouseName',
+    label: '制单员',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'lineNameTitle',
+    label: '开单时间',
+    type: 1,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'nodeNub',
+    label: '申请时间',
+    type: 1,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'startTime',
+    label: '申请网点',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'endTime',
+    label: '申请人',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'planVolume',
+    label: '修改原因',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'billladingStatus',
+    label: '修改内容',
+    type: 1,
+    values: '',
+    width: '180',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'chargeType',
+    label: '审核网点',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'totalFee',
+    label: '审核时间',
+    type: 1,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'remark',
+    label: '审核人',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '审核意见',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'createUserName',
+    label: '操作',
+    type: 6,
+    values: '',
+    width: '200',
+    checkarr: [],
+    fixed: 'right',
+    sortable: false,
+  },
+];
+
+export const viewColumnList = [
+  {
+    prop: 'remark',
+    label: '修改项',
+    type: 1,
+    values: '',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '修改前',
+    type: 1,
+    values: '',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'createUserName',
+    label: '修改后',
+    type: 1,
+    values: '',
+    checkarr: [],
+    fixed: 'right',
+    sortable: false,
+  },
+];

src/option/waybill/FreezeOrder.js

@@ -0,0 +1,458 @@
+export const columnList = [
+  {
+    prop: '',
+    label: '复选框',
+    type: 0,
+    width: 55,
+    fixed: true,
+  },
+  {
+    prop: '',
+    label: '序号',
+    type: 12,
+    values: '',
+    width: 55,
+    fixed: true,
+  },
+  {
+    prop: 'billladingCode',
+    label: '订单自编号',
+    type: 2,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: true,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'carNumber',
+    label: '汇通商场',
+    type: 2,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'driverName',
+    label: '商场名称',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'driverPhone',
+    label: '门店名称',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'warehouseName',
+    label: '基地',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'lineNameTitle',
+    label: '干仓配',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'nodeNub',
+    label: '数量',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'startTime',
+    label: '客户车次',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'endTime',
+    label: '遗留',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'planVolume',
+    label: '顾客姓名',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'billladingStatus',
+    label: '顾客电话',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'chargeType',
+    label: '顾客地址',
+    type: 2,
+    values: '',
+    width: '180',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'totalFee',
+    label: '交期',
+    type: 2,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'remark',
+    label: '商场编码',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '门店编码',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'waybillCount',
+    label: '创建人',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'totalNum',
+    label: '订单类型',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'totalWeight',
+    label: '订单来源',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'totalVolume',
+    label: '创建时间',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'createUserName',
+    label: '服务号',
+    type: 2,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'createUserName',
+    label: '操作',
+    type: 6,
+    values: '',
+    width: '200',
+    checkarr: [],
+    fixed: 'right',
+    sortable: false,
+  },
+];
+
+/** 包件明细表头 */
+export const packageListColumnList = [
+  {
+    prop: '',
+    label: '复选框',
+    type: 0,
+    width: 55,
+    fixed: true,
+  },
+  {
+    prop: '',
+    label: '序号',
+    type: 12,
+    values: '',
+    width: 55,
+    fixed: true,
+  },
+  {
+    prop: 'billladingCode',
+    label: '订单自编号',
+    type: 2,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: true,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'carNumber',
+    label: '汇通商场',
+    type: 2,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'driverName',
+    label: '商场名称',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'driverPhone',
+    label: '门店名称',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'warehouseName',
+    label: '基地',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'lineNameTitle',
+    label: '干仓配',
+    type: 1,
+    values: '',
+    width: '180',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'nodeNub',
+    label: '数量',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'startTime',
+    label: '客户车次',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'endTime',
+    label: '遗留',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'planVolume',
+    label: '顾客姓名',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'billladingStatus',
+    label: '顾客电话',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'chargeType',
+    label: '顾客地址',
+    type: 2,
+    values: '',
+    width: '180',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'totalFee',
+    label: '交期',
+    type: 1,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'remark',
+    label: '商场编码',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '门店编码',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'waybillCount',
+    label: '创建人',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'totalNum',
+    label: '订单类型',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'totalWeight',
+    label: '订单来源',
+    type: 4,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'totalVolume',
+    label: '创建时间',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'createUserName',
+    label: '服务号',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'createUserName',
+    label: '操作',
+    type: 6,
+    values: '',
+    width: '350',
+    checkarr: [],
+    fixed: 'right',
+    sortable: false,
+  },
+];

src/option/waybill/TemporaryStorageList.js

@@ -0,0 +1,458 @@
+export const columnList = [
+  {
+    prop: '',
+    label: '复选框',
+    type: 0,
+    width: 55,
+    fixed: true,
+  },
+  {
+    prop: '',
+    label: '序号',
+    type: 12,
+    values: '',
+    width: 55,
+    fixed: true,
+  },
+  {
+    prop: 'billladingCode',
+    label: '订单自编号',
+    type: 2,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: true,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'carNumber',
+    label: '汇通商场',
+    type: 2,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'driverName',
+    label: '商场名称',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'driverPhone',
+    label: '门店名称',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'warehouseName',
+    label: '基地',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'lineNameTitle',
+    label: '干仓配',
+    type: 1,
+    values: '',
+    width: '180',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'nodeNub',
+    label: '数量',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'startTime',
+    label: '客户车次',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'endTime',
+    label: '遗留',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'planVolume',
+    label: '顾客姓名',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'billladingStatus',
+    label: '顾客电话',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'chargeType',
+    label: '顾客地址',
+    type: 2,
+    values: '',
+    width: '180',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'totalFee',
+    label: '交期',
+    type: 1,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'remark',
+    label: '商场编码',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '门店编码',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'waybillCount',
+    label: '创建人',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'totalNum',
+    label: '订单类型',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'totalWeight',
+    label: '订单来源',
+    type: 4,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'totalVolume',
+    label: '创建时间',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'createUserName',
+    label: '服务号',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'createUserName',
+    label: '操作',
+    type: 6,
+    values: '',
+    width: '200',
+    checkarr: [],
+    fixed: 'right',
+    sortable: false,
+  },
+];
+
+/** 包件明细表头 */
+export const packageListColumnList = [
+  {
+    prop: '',
+    label: '复选框',
+    type: 0,
+    width: 55,
+    fixed: true,
+  },
+  {
+    prop: '',
+    label: '序号',
+    type: 12,
+    values: '',
+    width: 55,
+    fixed: true,
+  },
+  {
+    prop: 'billladingCode',
+    label: '订单自编号',
+    type: 2,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: true,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'carNumber',
+    label: '汇通商场',
+    type: 2,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'driverName',
+    label: '商场名称',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'driverPhone',
+    label: '门店名称',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'warehouseName',
+    label: '基地',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'lineNameTitle',
+    label: '干仓配',
+    type: 1,
+    values: '',
+    width: '180',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'nodeNub',
+    label: '数量',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'startTime',
+    label: '客户车次',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'endTime',
+    label: '遗留',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'planVolume',
+    label: '顾客姓名',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'billladingStatus',
+    label: '顾客电话',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'chargeType',
+    label: '顾客地址',
+    type: 2,
+    values: '',
+    width: '180',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'totalFee',
+    label: '交期',
+    type: 1,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'remark',
+    label: '商场编码',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '门店编码',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'waybillCount',
+    label: '创建人',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'totalNum',
+    label: '订单类型',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'totalWeight',
+    label: '订单来源',
+    type: 4,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'totalVolume',
+    label: '创建时间',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'createUserName',
+    label: '服务号',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'createUserName',
+    label: '操作',
+    type: 6,
+    values: '',
+    width: '350',
+    checkarr: [],
+    fixed: 'right',
+    sortable: false,
+  },
+];

src/option/waybill/WaybillOrderList.js

@@ -0,0 +1,789 @@
+export const columnList = [
+  {
+    prop: '',
+    label: '复选框',
+    type: 0,
+    width: 55,
+    fixed: true,
+  },
+  {
+    prop: '',
+    label: '序号',
+    type: 12,
+    values: '',
+    width: 55,
+    fixed: true,
+  },
+  {
+    prop: 'billladingCode',
+    label: '运单号',
+    type: 13,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: true,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'carNumber',
+    label: '订单自编号',
+    type: 2,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: true,
+    sortable: true,
+  },
+  {
+    prop: 'driverName',
+    label: '目的仓',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'driverPhone',
+    label: '发站仓',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'warehouseName',
+    label: '客户车次',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'lineNameTitle',
+    label: '状态',
+    type: 3,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'nodeNub',
+    label: '品牌',
+    type: 2,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'startTime',
+    label: '发货单位',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'endTime',
+    label: '发货人',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'planVolume',
+    label: '发货方手机号',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'billladingStatus',
+    label: '发货方地址',
+    type: 2,
+    values: '',
+    width: '180',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'chargeType',
+    label: '收货单位',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'totalFee',
+    label: '收货人',
+    type: 1,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'remark',
+    label: '收货方手机号',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '收货方地址',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '到站',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '货物名称',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '参考一口价',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '单价',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '件数',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '总数',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '总重量',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '总体积',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '运费',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '送货费',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '提货费',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '仓库管理费',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '仓储费',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'remark',
+    label: '装卸费',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '其它费用',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '报价费',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '总费用',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '申明价值',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'remark',
+    label: '回扣',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '付款方式',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: false,
+  },
+  {
+    prop: 'carrierName',
+    label: '现付',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '到付',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '月付',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'remark',
+    label: '回付',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '送货方式',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: false,
+  },
+  {
+    prop: 'carrierName',
+    label: '紧急度',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '回单数',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '回单要求',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: false,
+    sortable: true,
+  },
+  {
+    prop: 'remark',
+    label: '运输方式',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '运单标识',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '三方操作费',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '经办人',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '制单时间',
+    type: 1,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: false,
+    sortable: true,
+  },
+  {
+    prop: 'remark',
+    label: '创建时间',
+    type: 1,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '审核状态',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '结算状态',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '备注',
+    type: 2,
+    values: '',
+    width: '180',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '批次号',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: false,
+    sortable: true,
+  },
+  {
+    prop: 'remark',
+    label: '送货司机',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '送货时间',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '送货件数',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '签收时间',
+    type: 1,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '文员确认签收时间',
+    type: 1,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '服务类型',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '服务号',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '冻结状态',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '审核人',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '审核时间',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '承运单号',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '中转物流',
+    type: 2,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '运单中转费用',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: false,
+    sortable: true,
+  },
+  {
+    prop: 'createUserName',
+    label: '操作',
+    type: 6,
+    values: '',
+    width: '250',
+    checkarr: [],
+    fixed: 'right',
+    sortable: false,
+  },
+];
+
+export const viewColumnList = [
+  {
+    prop: 'remark',
+    label: '装卸费',
+    type: 1,
+    values: '',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '其它费用',
+    type: 1,
+    values: '',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '报价费',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '总费用',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'carrierName',
+    label: '申明价值',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    isshowSummary: true,
+    sortable: true,
+  },
+  {
+    prop: 'createUserName',
+    label: '修改后',
+    type: 1,
+    values: '',
+    checkarr: [],
+    fixed: 'right',
+    sortable: false,
+  },
+];

src/router/views/index.js

@@ -253,6 +253,31 @@ export default [
         component: () =>
           import(/* webpackChunkName: "views" */ '@/views/distribution/inventory/BookingNote.vue'),
       },
+      {
+        path: '/distribution/inventory/CreateOrder',
+        name: '创建订单',
+        meta: {
+          data: 'data',
+        },
+        component: () =>
+          import(/* webpackChunkName: "views" */ '@/views/distribution/inventory/CreateOrder.vue'),
+      },
+    ],
+  },
+  {
+    path: '/waybill',
+    component: Layout,
+    // key: 'fullPath',
+    redirect: '/waybill/orderPackageList',
+    children: [
+      {
+        path: 'orderPackageList',
+        name: '包明细',
+        meta: {
+          data: 'data',
+        },
+        component: () => import('@/views/waybill/orderPackageList.vue'),
+      },
     ],
   },
   {
@@ -647,8 +672,9 @@ export default [
     children: [
       {
         path: '/warehouse/warehouseRetentionRecord/warehouseRetentionDetails',
-        name: '滞留明细'+'name',
-        component: () => import('@/views/warehouse/warehouseRetentionRecord/warehouseRetentionDetails.vue'),
+        name: '滞留明细' + 'name',
+        component: () =>
+          import('@/views/warehouse/warehouseRetentionRecord/warehouseRetentionDetails.vue'),
       },
     ],
   },

src/utils/util.js

@@ -425,23 +425,65 @@ export const downloadXls = (fileArrayBuffer, filename) => {
   }
 };
 
+/** 获取视口高度 */
+export const getWinHeight = () => {
+  // 使用window.innerHeight作为首选获取窗口高度的方法
+  if (typeof window.innerHeight === 'number') {
+    return window.innerHeight;
+  }
+
+  // 如果window.innerHeight不可用，尝试使用标准模式下的documentElement属性
+  if (document.documentElement && document.documentElement.clientHeight) {
+    return document.documentElement.clientHeight;
+  }
+
+  // 最后作为备选方案，尝试使用怪异模式下的document.body属性
+  if (document.body && document.body.clientHeight) {
+    return document.body.clientHeight;
+  }
+
+  // 如果以上方法均不可行，则返回0
+  return 0;
+};
+
 /**
  * 设置元素节点高度
  * @param {node} node 元素 type: element || array
  * @param {string} height 高度 (非必填) type: string
  */
 export const setNodeHeight = (_node, _height) => {
+  console.log('getWinHeight() :>> ', getWinHeight());
+  const _defaultHeight = getWinHeight();
   // 判断是否传入的是数组
   const _type = Object.prototype.toString.call(_node);
   console.log('_type :>> ', _type);
   // 传入数组时
   if (_type === '[object Array]') {
     console.log('333 :>> ', 333);
+    _type.forEach(val => {
+      const _type = Object.prototype.toString.call(val);
+      if (_type === '[object HTMLDivElement]') {
+        val.style.transition = 'all 0.5s ease-out';
+        if (_height) val.style.height = _height;
+        else {
+          const timer = setTimeout(() => {
+            val.style.height = _defaultHeight - val.getBoundingClientRect().top - 65 + 'px';
+            clearTimeout(timer);
+          }, 10);
+        }
+      }
+    });
   }
   // 传入单一节点时
   else if (_type === '[object HTMLDivElement]') {
-    console.log('222 :>> ', 222);
+    _node.style.transition = 'all 0.5s ease-out';
     if (_height) _node.style.height = _height;
-    console.log('_node :>> ', _node);
+    else {
+      const timer = setTimeout(() => {
+        _node.style.height = _defaultHeight - _node.getBoundingClientRect().top - 65 + 'px';
+        clearTimeout(timer);
+      }, 10);
+    }
+    console.log('_node :>> ', _defaultHeight - _node.getBoundingClientRect().top - 65 + 'px');
   }
 };

src/views/distribution/artery/TripartiteTransfer.vue

@@ -252,23 +252,123 @@
   >
     <el-form :inline="true" label-width="100px" :model="query" class="el-fr-d">
       <div class="fo-fl">
-        <el-form-item label="中转承运商"> <el-input /></el-form-item>
-        <el-form-item label="经办人"> <el-input /></el-form-item>
-        <el-form-item label="送货方式"> <el-input /></el-form-item>
-        <el-form-item label="付款方式"> <el-input /></el-form-item>
-        <el-form-item label="运费分摊方式"> <el-input /></el-form-item>
-        <el-form-item label="送货司机"> <el-input /></el-form-item>
-        <el-form-item label="客户类型"> <el-input /></el-form-item>
-        <el-form-item label="是否结算"> <el-input /></el-form-item>
-        <el-form-item label="代收贷款"> <el-input /></el-form-item>
-        <el-form-item label="承运单号"> <el-input /></el-form-item>
-        <el-form-item label="承运时间"> <el-input /></el-form-item>
-        <el-form-item label="客户收货时间"> <el-input /></el-form-item>
-        <el-form-item label="运费"> <el-input /></el-form-item>
-        <el-form-item label="司机结算费"> <el-input /></el-form-item>
+        <el-form-item label="中转承运商">
+          <el-select
+            teleported="true"
+            v-model="query.value"
+            class="m-2"
+            placeholder="Select"
+            size="default"
+          >
+            <el-option
+              v-for="item in details.options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="经办人">
+          <el-select v-model="query.value" class="m-2" placeholder="Select" size="default">
+            <el-option
+              v-for="item in details.options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="送货方式">
+          <el-select v-model="query.value" class="m-2" placeholder="Select" size="default">
+            <el-option
+              v-for="item in details.options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="付款方式">
+          <el-select v-model="query.value" class="m-2" placeholder="Select" size="default">
+            <el-option
+              v-for="item in details.options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="运费分摊方式">
+          <el-select v-model="query.value" class="m-2" placeholder="Select" size="default">
+            <el-option
+              v-for="item in details.options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="送货司机">
+          <el-select v-model="query.value" class="m-2" placeholder="Select" size="default">
+            <el-option
+              v-for="item in details.options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="客户类型">
+          <el-select v-model="query.value" class="m-2" placeholder="Select" size="default">
+            <el-option
+              v-for="item in details.options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否结算">
+          <el-select v-model="query.value" class="m-2" placeholder="Select" size="default">
+            <el-option
+              v-for="item in details.options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="代收贷款">
+          <el-input-number :precision="2" :step="1" controls-position="right" />
+        </el-form-item>
+        <el-form-item label="承运单号">
+          <el-input />
+        </el-form-item>
+        <el-form-item label="承运时间">
+          <el-date-picker
+            v-model="query.value1"
+            type="date"
+            placeholder="承运时间"
+            size="default"
+          />
+        </el-form-item>
+        <el-form-item label="客户收货时间">
+          <el-date-picker
+            v-model="query.value1"
+            type="date"
+            placeholder="客户收货时间"
+            size="default"
+          />
+        </el-form-item>
+        <el-form-item label="运费">
+          <el-input-number :precision="2" :step="1" controls-position="right" />
+        </el-form-item>
+        <el-form-item label="司机结算费">
+          <el-input-number :precision="2" :step="1" controls-position="right" />
+        </el-form-item>
       </div>
       <div style="width: 100%">
-        <el-form-item label="备注"> <el-input type="textarea" /></el-form-item>
+        <el-form-item label="备注"> <el-input type="textarea" placeholder="备注" /></el-form-item>
       </div>
     </el-form>
 
@@ -426,7 +526,7 @@
         </div>
       </div>
 
-      <el-button></el-button>
+      <!-- <el-button></el-button> -->
     </div>
   </el-dialog>
 
@@ -549,6 +649,8 @@ const details = reactive<any>({
       total: 0,
     },
   },
+  /** 无用 */
+  options: [],
 });
 
 const {

src/views/distribution/checkInventoryTask/createTask.vue

@@ -2502,4 +2502,11 @@ const InventorySubmit = () => {
     }
     }
 }
+:deep(.el-input__wrapper){
+  height: 30px;
+
+}
+:deep(.el-input__inner){
+  height: 100% !important;
+}
 </style>

src/views/distribution/inventory/CreateOrder.vue

@@ -0,0 +1,746 @@
+<template>
+  <div>
+    <basic-container>
+      <el-divider style="font-size: 28px">货物托运单</el-divider>
+
+      <el-form :inline="true" :model="query" class="el-fr-d" label-width="100px">
+        <!-- 顶部 -->
+        <div class="flex-c-sb">
+          <div>
+            <div>品牌: 欧派 车次号:</div>
+            <el-form-item label="运单号: " label-width="80px"><el-input /> </el-form-item>
+          </div>
+
+          <div class="flex-c-c">
+            <div>admin</div>
+            <el-date-picker
+              v-model="value1"
+              type="datetime"
+              size="big"
+              placeholder="Select date and time"
+            />
+          </div>
+        </div>
+
+        <!-- 第一排 -->
+        <div class="table-row">
+          <el-form-item label="发站仓:" class="el-times">
+            <el-select v-model="query.serviceNumber" class="m-2" placeholder="Select">
+              <el-option
+                v-for="item in details.options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="到站:">
+            <el-input v-model="query.serviceNumber" placeholder="请输入服务号"></el-input>
+          </el-form-item>
+
+          <el-form-item label="目的仓:" class="el-times">
+            <el-select v-model="query.serviceNumber" class="m-2" placeholder="Select">
+              <el-option
+                v-for="item in details.options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="货号:">
+            <el-input v-model="query.serviceNumber" disabled placeholder="货号"></el-input>
+          </el-form-item>
+        </div>
+
+        <!-- 订单自编号 -->
+        <div class="table-row">
+          <el-form-item label="订单自编号:" class="el-times">
+            <el-input
+              v-model="query.serviceNumber"
+              type="textarea"
+              placeholder="订单自编号"
+            ></el-input>
+            <el-button type="primary" icon="Plus">选取订单</el-button>
+          </el-form-item>
+        </div>
+
+        <!-- 发货方 && 收货方 -->
+        <div class="table-row">
+          <div style="margin-right: 10px">
+            <div class="flex-c table-row-title">发货方</div>
+            <div>
+              <el-row>
+                <el-form-item label="发货单位:">
+                  <el-input v-model="query.serviceNumber" placeholder="发货单位"></el-input>
+                </el-form-item>
+
+                <el-form-item label="发货人:">
+                  <el-input v-model="query.serviceNumber" placeholder="发货人"></el-input>
+                </el-form-item>
+              </el-row>
+
+              <el-row>
+                <el-form-item label="手机号码:">
+                  <el-input v-model="query.serviceNumber" placeholder="手机号码"></el-input>
+                </el-form-item>
+              </el-row>
+
+              <el-row>
+                <el-form-item label="发货地址:">
+                  <el-input v-model="query.serviceNumber" placeholder="发货地址"></el-input>
+                </el-form-item>
+              </el-row>
+            </div>
+          </div>
+          <div>
+            <div class="flex-c table-row-title">收货方</div>
+            <div>
+              <el-row>
+                <el-form-item label="收货单位:">
+                  <el-input v-model="query.serviceNumber" placeholder="收货单位"></el-input>
+                </el-form-item>
+
+                <el-form-item label="收货人:">
+                  <el-input v-model="query.serviceNumber" placeholder="收货人"></el-input>
+                </el-form-item>
+              </el-row>
+
+              <el-row>
+                <el-form-item label="手机号码:">
+                  <el-input v-model="query.serviceNumber" placeholder="手机号码"></el-input>
+                </el-form-item>
+              </el-row>
+
+              <el-row>
+                <el-form-item label="收货地址:">
+                  <el-input v-model="query.serviceNumber" placeholder="收货地址"></el-input>
+                </el-form-item>
+              </el-row>
+            </div>
+          </div>
+        </div>
+
+        <!-- 订单自编号 -->
+        <div class="table-row">
+          <el-form-item label="订单自编号:" class="el-times">
+            <el-input
+              v-model="query.serviceNumber"
+              type="textarea"
+              placeholder="订单自编号"
+            ></el-input>
+          </el-form-item>
+        </div>
+
+        <!-- 计价方式行 -->
+        <div class="table-row table_row_number">
+          <div style="width: 230px; flex: none">
+            <el-form-item label="计价方式:" label-width="fit-content" class="el-times">
+              <el-radio-group v-model="query.serviceNumber" style="display: flex">
+                <el-radio :label="3">方</el-radio>
+                <el-radio :label="6">件</el-radio>
+                <el-radio :label="9">公斤</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </div>
+
+          <el-form-item label="货物名称:" label-width="fit-content" class="el-times">
+            <el-select v-model="query.serviceNumber" class="m-2" placeholder="Select">
+              <el-option
+                v-for="item in details.options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="件数:" label-width="fit-content" class="el-times">
+            <el-input-number
+              v-model="query.serviceNumber"
+              controls-position="right"
+              :precision="0"
+              :step="0.1"
+            />
+          </el-form-item>
+
+          <el-form-item label="重量(kg):" label-width="fit-content" class="el-times">
+            <el-input-number
+              v-model="query.serviceNumber"
+              controls-position="right"
+              :precision="3"
+              :step="0.1"
+            />
+          </el-form-item>
+
+          <el-form-item label="体积(方):" label-width="fit-content" class="el-times">
+            <el-input-number
+              v-model="query.serviceNumber"
+              controls-position="right"
+              :precision="4"
+              :step="0.1"
+            />
+          </el-form-item>
+
+          <el-form-item label="单价:" label-width="fit-content" class="el-times">
+            <el-input-number
+              v-model="query.serviceNumber"
+              controls-position="right"
+              :precision="2"
+              :step="0.1"
+            />
+          </el-form-item>
+
+          <el-form-item label="运费小计:" label-width="fit-content" class="el-times">
+            <el-input-number
+              v-model="query.serviceNumber"
+              controls-position="right"
+              :precision="2"
+              :step="0.1"
+            />
+          </el-form-item>
+        </div>
+
+        <!-- 合计行 -->
+        <div class="table-row table_row_number table_row_total">
+          <div style="width: 230px; flex: none">合计</div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+
+        <!-- 合计运费 && 支付方式 -->
+        <div class="table-row">
+          <!-- 合计运费 -->
+          <div style="margin-right: 10px; width: 60%; flex: none">
+            <div style="flex: 1">
+              <div class="table-row-title" style="margin-bottom: 10px">合计费用</div>
+              <div>
+                <el-form label-width="fit-content">
+                  <el-row>
+                    <el-form-item label="发货单位:">
+                      <el-input v-model="query.serviceNumber"></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="发货人:">
+                      <el-input v-model="query.serviceNumber"></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="发货人:">
+                      <el-input v-model="query.serviceNumber"></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="发货人:">
+                      <el-input v-model="query.serviceNumber"></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="发货人:">
+                      <el-input v-model="query.serviceNumber"></el-input>
+                    </el-form-item>
+                  </el-row>
+
+                  <el-row>
+                    <el-form-item label="装卸费:">
+                      <el-input v-model="query.serviceNumber"></el-input>
+                    </el-form-item>
+                    <el-form-item label="其它费用:">
+                      <el-input v-model="query.serviceNumber"></el-input>
+                    </el-form-item>
+                    <el-form-item label="保价费:">
+                      <el-input v-model="query.serviceNumber"></el-input>
+                    </el-form-item>
+                    <el-form-item label="申明价值:">
+                      <el-input v-model="query.serviceNumber"></el-input>
+                    </el-form-item>
+                  </el-row>
+                </el-form>
+              </div>
+            </div>
+          </div>
+
+          <!-- 付款方式 -->
+          <div>
+            <div style="flex: 1">
+              <div class="table-row-title" style="margin-bottom: 10px">合计费用</div>
+              <div>
+                <el-form label-width="fit-content">
+                  <el-row>
+                    <el-form-item label="支付方式:">
+                      <el-input v-model="query.serviceNumber"></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="付款方式:">
+                      <el-input v-model="query.serviceNumber"></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="现付:">
+                      <el-input v-model="query.serviceNumber"></el-input>
+                    </el-form-item>
+                  </el-row>
+
+                  <el-row>
+                    <el-form-item label="到付:">
+                      <el-input v-model="query.serviceNumber"></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="月结:">
+                      <el-input v-model="query.serviceNumber"></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="回付:">
+                      <el-input v-model="query.serviceNumber"></el-input>
+                    </el-form-item>
+                  </el-row>
+                </el-form>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 计价方式行 -->
+        <div class="table-row table_row_number">
+          <div>
+            <el-form-item label="开单人:" label-width="fit-content" class="el-times">
+              <el-input disabled />
+            </el-form-item>
+          </div>
+
+          <el-form-item label="三方操作费:" label-width="fit-content" class="el-times">
+            <el-input-number
+              v-model="query.serviceNumber"
+              controls-position="right"
+              :precision="0"
+              :step="0.1"
+            />
+          </el-form-item>
+
+          <el-form-item label="送货方式:" label-width="fit-content" class="el-times">
+            <el-select v-model="query.serviceNumber" class="m-2" placeholder="Select">
+              <el-option
+                v-for="item in details.options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="紧急度:" label-width="fit-content" class="el-times">
+            <el-select v-model="query.serviceNumber" class="m-2" placeholder="Select">
+              <el-option
+                v-for="item in details.options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="回单" label-width="fit-content" class="el-times">
+            <el-input-number
+              v-model="query.serviceNumber"
+              controls-position="right"
+              :precision="0"
+              :step="1"
+            />
+          </el-form-item>
+
+          <el-form-item label="回单要求:" label-width="fit-content" class="el-times">
+            <el-select v-model="query.serviceNumber" class="m-2" placeholder="Select">
+              <el-option
+                v-for="item in details.options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="运输方式:" label-width="fit-content" class="el-times">
+            <el-select v-model="query.serviceNumber" class="m-2" placeholder="Select">
+              <el-option
+                v-for="item in details.options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </div>
+
+        <!-- 订单自编号 -->
+        <div class="table-row">
+          <el-form-item label="备注:" class="el-times">
+            <el-input v-model="query.serviceNumber" type="textarea" placeholder="备注"></el-input>
+          </el-form-item>
+
+          <div class="flex-c-c">
+            <el-button type="primary" icon="Position">提交</el-button>
+            <el-button type="primary" icon="Refresh">重置</el-button>
+            <el-button type="primary" icon="Close">关闭</el-button>
+          </div>
+        </div>
+      </el-form>
+    </basic-container>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
+import functions from '@/utils/functions';
+import dayjs from 'dayjs';
+import { mapGetters } from 'vuex';
+/** 获取字典 */
+import { getDictionaryBiz } from '@/api/system/dict';
+import { downloadXls } from '@/utils/util';
+import { columnList, detailsColumnList } from '@/option/distribution/VehicleStowage';
+import { useRouter } from 'vue-router';
+
+// 获取路由实例
+const $router = useRouter();
+
+const details = reactive<any>({
+  /** 是否开启搜索 */
+  search: true,
+  /** 表格搜索条件 */
+  query: {},
+  options: [],
+  /** 时间快捷选择设置 */
+  shortcuts: [
+    {
+      text: '最近一周',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+        return [start, end];
+      },
+    },
+    {
+      text: '最近一个月',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+        return [start, end];
+      },
+    },
+    {
+      text: '最近三个月',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+        return [start, end];
+      },
+    },
+  ],
+  /** 时间选择器数据 */
+  stockupDate: [],
+  /** 列表 */
+  columnList,
+  detailsColumnList,
+  /** 列表数据 */
+  data: [{}],
+  /** 页面loading */
+  loadingObj: {
+    /** 配载信息loading */
+    stowageLoading: false,
+  },
+  /** 列表复选框选中的数据 */
+  selectionList: [],
+  /** 是否显示设置表格 */
+  drawerShow: false,
+  /** 分页参数 */
+  page: {
+    currentPage: 1,
+    pageSize: 30,
+    total: 0,
+  },
+  /** 配载信息分页数据 */
+  stowagePage: {
+    currentPage: 1,
+    pageSize: 30,
+    total: 0,
+  },
+  /** 弹出层显示 */
+  popUpShow: {
+    /** 装车详情 */
+    truckLoadingDetailVisited: false,
+  },
+  /** 列表Dom节点 */
+  listNode: '',
+  form: {},
+  activeTab: 'tab1',
+  activeTabItem: 'tabItem1',
+});
+
+const {
+  search,
+  query,
+  shortcuts,
+  stockupDate,
+  data,
+  drawerShow,
+  page,
+  activeTab,
+  activeTabItem,
+  loadingObj,
+} = toRefs(details);
+
+/** vuex */
+const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));
+console.log('permission :>> ', permission);
+
+onMounted(() => {
+  /*   const timer = setTimeout(() => {
+    details.listNode = document.querySelector('.maboxhi');
+    details.listNode.style.transition = 'all .5s ease-out';
+    console.log('details.listNode :>> ', details.listNode);
+    clearTimeout(timer);
+  }, 100); */
+});
+
+/** 请求页面数据 */
+const onLoad = (page: any) => {};
+
+/** 搜索 */
+const searchChange = () => {
+  onLoad(details.page);
+};
+
+/** 清空表单 */
+const searchReset = () => {
+  details.query = {};
+  details.stockupDate = [];
+  details.page.currentPage = 1;
+  onLoad(details.page);
+};
+
+/** 展开列表控件 */
+const showdrawer = (_flag?: boolean) => {
+  details.drawerShow = _flag;
+};
+
+/** 是否开启搜索区 */
+const searchHide = () => {
+  function getWinHight() {
+    var windowHight = 0;
+    if (document.body.clientHeight && document.documentElement.clientHeight) {
+      windowHight =
+        document.body.clientHeight < document.documentElement.clientHeight
+          ? document.body.clientHeight
+          : document.documentElement.clientHeight;
+    } else {
+    }
+    return document.documentElement.clientHeight;
+  }
+  details.search = !details.search;
+  const timer = setTimeout(() => {
+    details.listNode.style.height =
+      getWinHight() - details.listNode.getBoundingClientRect().top - 70 + 'px';
+    clearTimeout(timer);
+  }, 10);
+};
+
+/** 表格表头输入框搜索 */
+const inputsc = (index, row) => {
+  details.query[row.prop] = index;
+  onLoad(details.page);
+};
+
+/** 表格表头时间选择 */
+const timesc = (index, row) => {
+  console.log(index, row);
+  if (!!index) {
+    index = dayjs(index).format('YYYY-MM-DD');
+  }
+  details.query[row.prop] = index;
+  if (!index) {
+    delete details.query[row.prop];
+  }
+  onLoad(details.page);
+};
+
+/** 表格表头输入框搜索 */
+const btnsc = () => {};
+
+/** 表格表头下拉框选择 */
+const selectsc = (index, row) => {
+  details.query[row.prop] = index;
+  if (!index) delete details.query[row.prop];
+  if (row.prop === 'certificateTypeName') {
+    details.query['certificateType'] = index;
+    if (!index) delete details.query['certificateType'];
+  }
+  onLoad(details.page);
+};
+
+/** 表格表头复选框选择 */
+const selectionChange = (list: any) => {
+  details.selectionList = list;
+};
+
+/** 每页数量改变执行的回调 */
+const sizeChange = (pageSize: number) => {
+  details.page.pageSize = pageSize;
+  onLoad(details.page);
+};
+
+/** 页码改变执行的回调 */
+const currentChange = () => {};
+
+/**
+ * 设置列表 -- 固定函数
+ * 弹窗的勾选回调，用于更改头部数组
+ * 固定搭配，只需要更换   columnList
+ *  */
+const setnewcolum = (newarr, headarr, type) => {
+  if (type == 1) {
+    details.columnList = newarr;
+    functions.setStorage(window.location.pathname + 'checkList', headarr);
+  } else if (type == 2) {
+    details.columnList = newarr;
+    functions.setStorage(window.location.pathname + 'flexList', headarr);
+  } else if (type == 3) {
+    details.columnList = newarr;
+    functions.setStorage(window.location.pathname + 'sortlist', headarr);
+  }
+};
+
+/** 切换tabber -- 支出费用 */
+const getIncurExpenseInfo = () => {};
+/** 切换tabber -- 配载信息 */
+const getStowageInfo = () => {
+  const _node = document.querySelector('.StowageInfo');
+  _node.style.height = '400px';
+  console.log('_node :>> ', _node);
+};
+/** 切换tabber -- 中转信息 */
+const getTransferInfo = () => {};
+
+/** 详情信息页面tabber切换时执行的回调 */
+const handleTabItemClick = tab => {
+  console.log('tab :>> ', tab);
+  const { name } = tab.props;
+  console.log('name :>> ', name);
+  switch (name) {
+    // 费用支出
+    case 'tabItem1':
+      getIncurExpenseInfo();
+      break;
+    // 配载信息
+    case 'tabItem2':
+      getStowageInfo();
+      break;
+    // 中转信息
+    case 'tabItem3':
+      getTransferInfo();
+      break;
+  }
+};
+</script>
+
+<style scoped lang="scss">
+// 页面字体大小
+.avue-crud {
+  font-size: 12px !important;
+}
+
+.table-row {
+  width: 100%;
+  display: flex;
+  // border: 1px solid #ddd;
+  border-bottom: none;
+
+  &:last-child {
+    display: block;
+    border: 1px solid #ddd;
+    > div {
+      width: 100%;
+      border: none;
+    }
+  }
+
+  > div {
+    flex: 1;
+    padding: 5px;
+    border: 1px solid #ddd;
+    display: inline-flex;
+    box-sizing: border-box;
+  }
+}
+
+.table-row-title {
+  background: #f5f7fa;
+  margin-right: 10px;
+  padding: 10px;
+
+  & + div {
+    flex: 1;
+
+    :deep(.el-form-item) {
+      flex: 1;
+      margin-right: 10px;
+    }
+
+    :deep(.el-row) {
+      margin-bottom: 10px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.table_row_number {
+  > div {
+    flex-grow: 1;
+    justify-content: center;
+  }
+}
+
+.table_row_total {
+  line-height: 32px;
+  text-align: center;
+  background: #efefef;
+}
+
+.flex-c {
+  display: flex;
+  align-items: center;
+}
+
+:deep(.el-select.m-2) {
+  width: 100%;
+}
+
+:deep(.el-form-item) {
+  flex: 1;
+  margin: 0;
+}
+
+:deep(.el-radio) {
+  margin: 0;
+}
+
+// 底部
+.footer {
+  height: 80px;
+}
+
+// 提交按钮容器
+.submitDataContainer {
+  width: 80%;
+  position: fixed;
+  bottom: 20px;
+  z-index: 999;
+  text-align: center;
+}
+</style>

src/views/distribution/inventory/arteryDistrilbutionBillLadingList.vue

@@ -177,6 +177,7 @@
               type="primary"
               @click="
                 () => {
+                  this.box = false;
                   this.$router.push('/basicdata/vehicle/basicdataVehicle');
                 }
               "
@@ -211,6 +212,7 @@
               v-if="addInfo.isNew"
               @click="
                 () => {
+                  this.box = false;
                   this.$router.push('/basicdata/driverArtery/basicdataDriverArtery');
                 }
               "

src/views/distribution/inventory/distributionStockArticleDetails.vue

@@ -1262,18 +1262,19 @@ export default {
       // this.view = true;
       // this.box = true;
       this.materialQRCode = row;
+      console.log('11213 :>> ', 11213);
 
       let qr = {
         ids: row.id,
       };
       showOrderPackgeCode(qr).then(res => {
         // this.orderPackageCode = res.data
-        console.log(res.data);
+        // console.log(res.data);
+        console.log('res :>> ', res);
         this.html = '';
         this.html = this.getHtmls(res.data.data.dataList, res.data.data.templateHtml);
+        this.dialogVisible = true;
       });
-
-      this.dialogVisible = true;
     },
     handleTrajectory(row) {
       console.log('>>>>', row);

src/views/distribution/inventory/distributionStockListDiscuss.vue

@@ -1091,6 +1091,9 @@ export default {
         path: '/distribution/inventory/distributionStockListDetails',
         query: {
           id: row.row.id,
+          marketId: row.row.marketId,
+          materialId: row.row.materialId,
+          incomingBatch: row.row.incomingBatch,
           name: row.row.descriptionGoods + ' — 明细',
         },
       });

src/views/distribution/inventory/distributionStockListMarket.vue

@@ -1082,6 +1082,9 @@ export default {
         path: '/distribution/inventory/distributionStockListDetails',
         query: {
           id: row.row.id,
+          marketId: row.row.marketId,
+          materialId: row.row.materialId,
+          incomingBatch: row.row.incomingBatch,
           name: row.row.descriptionGoods + ' — 明细',
         },
       });

src/views/distribution/inventory/distributionStockListSelf.vue

@@ -1084,6 +1084,9 @@ export default {
         path: '/distribution/inventory/distributionStockListDetails',
         query: {
           id: row.row.id,
+          marketId: row.row.marketId,
+          materialId: row.row.materialId,
+          incomingBatch: row.row.incomingBatch,
           name: row.row.descriptionGoods + ' — 明细',
         },
       });

src/views/waybill/ChangeOrder.vue

@@ -0,0 +1,495 @@
+<template>
+  <basic-container>
+    <div class="avue-crud">
+      <!-- 搜索模块 -->
+      <el-row v-if="!search">
+        <!-- 查询模块 -->
+        <el-form :inline="true" :model="query" class="el-fr-d">
+          <el-form-item label="开单时间:" class="el-times">
+            <!--            <el-input v-model="query.stockupArea" placeholder="请输入备货区"></el-input>-->
+            <el-date-picker
+              v-model="stockupDate"
+              type="daterange"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              :shortcuts="shortcuts"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="申请时间:" class="el-times">
+            <!--            <el-input v-model="query.stockupArea" placeholder="请输入备货区"></el-input>-->
+            <el-date-picker
+              v-model="stockupDate"
+              type="daterange"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              :shortcuts="shortcuts"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="审核时间:" class="el-times">
+            <!--            <el-input v-model="query.stockupArea" placeholder="请输入备货区"></el-input>-->
+            <el-date-picker
+              v-model="stockupDate"
+              type="daterange"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              :shortcuts="shortcuts"
+              clearable
+            />
+          </el-form-item>
+          <!-- 查询按钮 -->
+          <el-form-item class="el-btn">
+            <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
+            <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+
+      <!-- 控件模块 -->
+      <el-row>
+        <div class="avue-crud__header">
+          <!-- 头部左侧按钮模块 -->
+          <div class="avue-crud__left"></div>
+          <!-- 头部右侧按钮模块 -->
+          <div class="avue-crud__right">
+            <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
+            <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
+            <el-button icon="Search" @click="searchHide" circle></el-button>
+          </div>
+        </div>
+      </el-row>
+
+      <!-- 表格 -->
+      <el-row>
+        <!-- 列表模块 -->
+        <tablecmt
+          :columnList="details.columnList"
+          :tableData="data"
+          :loading="loadingObj.list"
+          @inputTxt="inputsc"
+          @timeCheck="timesc"
+          @btnCheck="btnsc"
+          @selectCheck="selectsc"
+          @selection="selectionChange"
+        >
+          <template #default="slotProps">
+            <template v-if="slotProps.scope.column.label === '运单号'">
+              <el-button type="text" @click="handleShowPackageOrderList(slotProps.scope)">
+                查看
+              </el-button>
+            </template>
+
+            <template v-else-if="slotProps.scope.column.label === '操作'">
+              <el-button type="text" @click="handleShowPackageOrderList(slotProps.scope)">
+                查看
+              </el-button>
+            </template>
+          </template>
+        </tablecmt>
+      </el-row>
+
+      <!-- 分页模块 -->
+      <el-row class="el-fy">
+        <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
+          <div style="font-size: 14px">勾选数量: {{ selectionList.length }}</div>
+          <!-- 分页模块 -->
+          <el-pagination
+            align="right"
+            background
+            @size-change="sizeChange"
+            @current-change="currentChange"
+            :current-page="page.currentPage"
+            :page-sizes="[30, 50, 80, 120]"
+            :page-size="page.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="page.total"
+          >
+          </el-pagination>
+        </div>
+      </el-row>
+    </div>
+  </basic-container>
+
+  <!-- 修改客户信息 -->
+  <el-dialog
+    class="el-dialog-view"
+    title="查看改单"
+    :visible.sync="details.popUpShow.view"
+    width="780px"
+    :show-close="false"
+    :fullscreen="details.fullscreenObj.view"
+    v-model="details.popUpShow.view"
+  >
+    <!-- 头部 -->
+    <template #header="{ close, titleId, titleClass }">
+      <div class="my-header flex-c-sb">
+        <div :id="titleId" :class="titleClass">查看改单</div>
+        <div class="flex-c-c">
+          <!-- 全屏显示按钮 -->
+          <el-button type="text" v-if="!details.fullscreenObj.view">
+            <el-icon class="" @click="handleFullScrean('open', 'el-dialog-view')"
+              ><FullScreen
+            /></el-icon>
+          </el-button>
+          <el-button type="text" v-else>
+            <el-icon class="" @click="handleFullScrean('close', 'el-dialog-view')"
+              ><CopyDocument
+            /></el-icon>
+          </el-button>
+
+          <!-- 弹窗关闭按钮 -->
+          <el-button type="text">
+            <el-icon class="" @click="close"><Close /></el-icon>
+          </el-button>
+        </div>
+      </div>
+    </template>
+
+    <el-divider style="font-size: 28px">基本信息</el-divider>
+    <div class="view_row">
+      <div class="view_row_item">运单号：</div>
+      <div class="view_row_item">
+        <span>运单类型：</span>
+      </div>
+      <div class="view_row_item">
+        <span>状态：</span>
+      </div>
+      <div class="view_row_item">申请网点：</div>
+      <div class="view_row_item">申请人：</div>
+      <div class="view_row_item">申请时间：</div>
+      <div class="view_row_item">审核网点：</div>
+      <div class="view_row_item">审核人：</div>
+      <div class="view_row_item">审核时间：</div>
+      <div class="view_row_item">审核意见：</div>
+      <div class="view_row_item">修改原因：</div>
+      <div class="view_row_item"></div>
+    </div>
+
+    <el-divider style="font-size: 28px">修改信息</el-divider>
+    <!-- <el-table class="maboxhi" :data="data" border style="width: 100%">
+      <el-table-column v-for="item in details.viewColumnList" prop="address" :label="item.label" />
+    </el-table> -->
+
+    <tablecmt :columnList="details.viewColumnList" :tableData="data" :loading="loadingObj.list">
+    </tablecmt>
+  </el-dialog>
+
+  <!-- 列表配置显示 -->
+  <edittablehead
+    @setcolum="setnewcolum"
+    @closce="showdrawer"
+    :drawerShow="drawerShow"
+    :columnList="details.columnList"
+  ></edittablehead>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
+import functions from '@/utils/functions.js';
+import dayjs from 'dayjs';
+import { mapGetters } from 'vuex';
+/** 获取字典 */
+import { getDictionaryBiz } from '@/api/system/dict';
+import { getopenOrderAdvancePageList } from '@/api/waybill/ChangeOrder';
+import { showOrderPackgeCode } from '@/api/distribution/distributionStockArticle';
+import { downloadXls, setNodeHeight, getHtmls } from '@/utils/util';
+import { columnList, viewColumnList } from '@/option/waybill/ChangeOrder';
+import { useRouter } from 'vue-router';
+import print from '@/utils/print';
+import { ElMessage } from 'element-plus';
+
+// 获取路由实例
+const $router = useRouter();
+
+const details = reactive<any>({
+  /** 是否开启搜索 */
+  search: true,
+  /** 表格搜索条件 */
+  query: {},
+  /** 时间快捷选择设置 */
+  shortcuts: [
+    {
+      text: '最近一周',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+        return [start, end];
+      },
+    },
+    {
+      text: '最近一个月',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+        return [start, end];
+      },
+    },
+    {
+      text: '最近三个月',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+        return [start, end];
+      },
+    },
+  ],
+  /** 时间选择器数据 */
+  stockupDate: [],
+  /** 列表 */
+  columnList,
+  /** 列表数据 */
+  data: [{}],
+  /** 查看列表表头 */
+  viewColumnList,
+  /** 页面loading */
+  loadingObj: {
+    /** 列表加载loading */
+    list: false,
+    packageListLoading: false,
+  },
+  /** 列表复选框选中的数据 */
+  selectionList: [],
+  /** 是否显示设置表格 */
+  drawerShow: false,
+  /** 分页参数 */
+  page: {
+    currentPage: 1,
+    pageSize: 30,
+    total: 0,
+  },
+  /** 弹出层显示 */
+  popUpShow: {
+    /** 包件明细 */
+    packageOrderListlVisited: false,
+    /** 查看 */
+    view: false,
+  },
+  /** 列表Dom节点 */
+  listNode: '',
+  form: {},
+  /** 全屏 */
+  fullscreenObj: {
+    /** 查看 */
+    view: false,
+  },
+});
+
+const {
+  search,
+  query,
+  shortcuts,
+  stockupDate,
+  data,
+  loadingObj,
+  selectionList,
+  drawerShow,
+  page,
+  popUpShow,
+} = toRefs(details);
+
+/** vuex */
+const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));
+console.log('permission :>> ', permission);
+
+onMounted(() => {
+  const timer = setTimeout(() => {
+    details.listNode = document.querySelector('.maboxhi');
+    details.listNode.style.transition = 'all .5s ease-out';
+    clearTimeout(timer);
+  }, 100);
+});
+
+/** 请求页面数据 */
+const onLoad = async (page: any, params = {}) => {
+  // 获取暂存单列表
+  //   details.data = await getopenOrderAdvancePageList(page, { ...details.query, ...params });
+};
+
+onLoad(details.page);
+
+/** 搜索 */
+const searchChange = () => {
+  onLoad(details.page);
+};
+
+/** 清空表单 */
+const searchReset = () => {
+  details.query = {};
+  details.stockupDate = [];
+  details.page.currentPage = 1;
+  onLoad(details.page);
+};
+
+/** 展开列表控件 */
+const showdrawer = (_flag?: boolean) => {
+  details.drawerShow = _flag;
+};
+
+/** 是否开启搜索区 */
+const searchHide = () => {
+  function getWinHight() {
+    var windowHight = 0;
+    if (document.body.clientHeight && document.documentElement.clientHeight) {
+      windowHight =
+        document.body.clientHeight < document.documentElement.clientHeight
+          ? document.body.clientHeight
+          : document.documentElement.clientHeight;
+    } else {
+    }
+    return document.documentElement.clientHeight;
+  }
+  details.search = !details.search;
+  const timer = setTimeout(() => {
+    details.listNode.style.height =
+      getWinHight() - details.listNode.getBoundingClientRect().top - 70 + 'px';
+    clearTimeout(timer);
+  }, 10);
+};
+
+/** 表格表头输入框搜索 */
+const inputsc = (index, row) => {
+  details.query[row.prop] = index;
+  onLoad(details.page);
+};
+
+/** 表格表头时间选择 */
+const timesc = (index, row) => {
+  console.log(index, row);
+  if (!!index) {
+    index = dayjs(index).format('YYYY-MM-DD');
+  }
+  details.query[row.prop] = index;
+  if (!index) {
+    delete details.query[row.prop];
+  }
+  onLoad(details.page);
+};
+
+/** 表格表头输入框搜索 */
+const btnsc = () => {};
+
+/** 表格表头下拉框选择 */
+const selectsc = (index, row) => {
+  details.query[row.prop] = index;
+  if (!index) delete details.query[row.prop];
+  if (row.prop === 'certificateTypeName') {
+    details.query['certificateType'] = index;
+    if (!index) delete details.query['certificateType'];
+  }
+  onLoad(details.page);
+};
+
+/** 表格表头复选框选择 */
+const selectionChange = (list: any) => {
+  details.selectionList = list;
+};
+
+/** 每页数量改变执行的回调 */
+const sizeChange = (pageSize: number) => {
+  details.page.pageSize = pageSize;
+  onLoad(details.page);
+};
+
+/** 页码改变执行的回调 */
+const currentChange = () => {};
+
+/**
+ * 设置列表 -- 固定函数
+ * 弹窗的勾选回调，用于更改头部数组
+ * 固定搭配，只需要更换   columnList
+ *  */
+const setnewcolum = (newarr, headarr, type) => {
+  if (type == 1) {
+    details.columnList = newarr;
+    functions.setStorage(window.location.pathname + 'checkList', headarr);
+  } else if (type == 2) {
+    details.columnList = newarr;
+    functions.setStorage(window.location.pathname + 'flexList', headarr);
+  } else if (type == 3) {
+    details.columnList = newarr;
+    functions.setStorage(window.location.pathname + 'sortlist', headarr);
+  }
+};
+
+/** 弹出层开启前清除数据 */
+const beforeClose = done => {
+  done();
+  details.form = {};
+  details.selectionList = [];
+  details.view = false;
+};
+
+/** 查看包明细 */
+const handleShowPackageOrderList = ({ row }) => {
+  details.popUpShow.view = true;
+  nextTick(() => {
+    const _node = document.querySelector(`.el-dialog-view .maboxhi`);
+    setNodeHeight(_node);
+  });
+};
+
+/**
+ * 是否开启全屏
+ * @params(_type) 开启或关闭
+ */
+const handleFullScrean = (_type: 'open' | 'close', _name: string) => {
+  let _node = '';
+  if (_name) _node = document.querySelector(`.${_name} .maboxhi`);
+
+  switch (_name) {
+    case 'el-dialog-view':
+      details.fullscreenObj.view = !details.fullscreenObj.view;
+      if (_type === 'close') {
+        if (_node) setNodeHeight(_node);
+      } else {
+        if (_node) setNodeHeight(_node);
+      }
+      break;
+
+    default:
+      break;
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.fo-fl {
+  display: flex;
+  flex-wrap: wrap;
+  zoom: 0.9;
+}
+
+// 日期选择器
+:deep(.el-date-editor.el-input) {
+  height: 100% !important;
+  width: 100% !important;
+}
+
+:deep(.el-range-editor.el-input__wrapper) {
+  height: 100% !important;
+}
+
+.view_row {
+  display: flex;
+  flex-wrap: wrap;
+  border: 1px solid #e6e6e6;
+
+  > div {
+    width: 33.33%;
+    flex: none;
+    border: 1px solid #e6e6e6;
+    box-sizing: border-box;
+    padding: 5px 10px;
+  }
+}
+</style>

src/views/waybill/FreezeOrder.vue

@@ -0,0 +1,721 @@
+<template>
+  <basic-container>
+    <div class="avue-crud">
+      <!-- 搜索模块 -->
+      <el-row v-if="!search">
+        <!-- 查询模块 -->
+        <el-form :inline="true" :model="query" class="el-fr-d">
+          <el-form-item label="交期:" class="el-times">
+            <!--            <el-input v-model="query.stockupArea" placeholder="请输入备货区"></el-input>-->
+            <el-date-picker
+              v-model="stockupDate"
+              type="daterange"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              :shortcuts="shortcuts"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="创建时间:" class="el-times">
+            <!--            <el-input v-model="query.stockupArea" placeholder="请输入备货区"></el-input>-->
+            <el-date-picker
+              v-model="stockupDate"
+              type="daterange"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              :shortcuts="shortcuts"
+              clearable
+            />
+          </el-form-item>
+          <!-- 查询按钮 -->
+          <el-form-item class="el-btn">
+            <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
+            <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+
+      <!-- 控件模块 -->
+      <el-row>
+        <div class="avue-crud__header">
+          <!-- 头部左侧按钮模块 -->
+          <div class="avue-crud__left">
+            <el-button type="primary" icon="Edit" @click="editClientInfo">修改客户信息</el-button>
+            <el-button type="primary" icon="Delete" @click="handleDelete">删除</el-button>
+            <el-button type="primary" icon="Refresh" @click="searchReset">恢复</el-button>
+          </div>
+          <!-- 头部右侧按钮模块 -->
+          <div class="avue-crud__right">
+            <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
+            <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
+            <el-button icon="Search" @click="searchHide" circle></el-button>
+          </div>
+        </div>
+      </el-row>
+
+      <!-- 表格 -->
+      <el-row>
+        <!-- 列表模块 -->
+        <tablecmt
+          :columnList="details.columnList"
+          :tableData="data"
+          :loading="loadingObj.list"
+          @inputTxt="inputsc"
+          @timeCheck="timesc"
+          @btnCheck="btnsc"
+          @selectCheck="selectsc"
+          @selection="selectionChange"
+        >
+          <template #default="slotProps">
+            <template v-if="slotProps.scope.column.label === '操作'">
+              <el-button type="text" @click="handleShowPackageOrderList(slotProps.scope)">
+                包明细
+              </el-button>
+            </template>
+          </template>
+        </tablecmt>
+      </el-row>
+
+      <!-- 统计 -->
+      <el-row>
+        <div>选择数: , 运单数: , 件数: , 重量: , 体积: , 提货费: ,</div>
+        <div>总计: 总数: , 运单数: , 件数: , 重量: , 体积: , 提货费: ,</div>
+      </el-row>
+
+      <!-- 分页模块 -->
+      <el-row class="el-fy">
+        <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
+          <div style="font-size: 14px">勾选数量: {{ selectionList.length }}</div>
+          <!-- 分页模块 -->
+          <el-pagination
+            align="right"
+            background
+            @size-change="sizeChange"
+            @current-change="currentChange"
+            :current-page="page.currentPage"
+            :page-sizes="[30, 50, 80, 120]"
+            :page-size="page.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="page.total"
+          >
+          </el-pagination>
+        </div>
+      </el-row>
+    </div>
+  </basic-container>
+
+  <!-- 修改客户信息 -->
+  <el-dialog
+    class="el-dialog-QRCode"
+    title="修改客户信息"
+    :visible.sync="details.popUpShow.editClientInfoVisible"
+    width="780px"
+    v-model="details.popUpShow.editClientInfoVisible"
+  >
+    <div>
+      <el-divider style="font-size: 28px">修改订单自编号（）客户信息</el-divider>
+    </div>
+
+    <el-form>
+      <el-form-item label="客户姓名">
+        <el-input />
+      </el-form-item>
+
+      <el-form-item label="联系电话">
+        <el-input />
+      </el-form-item>
+
+      <el-form-item label="用户地址">
+        <el-input />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="flex-c-c dialog-footer">
+        <el-button icon="Position" type="primary" @click="printTemplate">提 交</el-button>
+        <el-button icon="Refresh" type="primary" @click="printTemplate">重 置</el-button>
+        <el-button icon="Close" @click="details.popUpShow.editClientInfoVisible = false">
+          取 消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  <!-- 包明细 -->
+  <el-dialog
+    title="包明细"
+    v-model="details.popUpShow.packageOrderListlVisited"
+    width="80%"
+    :before-close="beforeClose"
+    append-to-body
+    :fullscreen="details.fullscreenObj.packageOrderListlVisited"
+    :show-close="false"
+    class="packageOrderListlVisited"
+  >
+    <template #header="{ close, titleId, titleClass }">
+      <div class="my-header flex-c-sb">
+        <h4 :id="titleId" :class="titleClass">包明细</h4>
+        <div class="flex-c-c">
+          <!-- 全屏显示按钮 -->
+          <el-button type="text" v-if="!details.fullscreenObj.packageOrderListlVisited">
+            <el-icon class="" @click="handleFullScrean('open', 'packageOrderListlVisited')"
+              ><FullScreen
+            /></el-icon>
+          </el-button>
+          <el-button type="text" v-else>
+            <el-icon class="" @click="handleFullScrean('close', 'packageOrderListlVisited')"
+              ><CopyDocument
+            /></el-icon>
+          </el-button>
+
+          <!-- 弹窗关闭按钮 -->
+          <el-button type="text">
+            <el-icon class="" @click="close"><Close /></el-icon>
+          </el-button>
+        </div>
+      </div>
+    </template>
+    <el-form :inline="true" :model="query" class="el-fr-d">
+      <div class="fo-fl">
+        <!-- <el-form-item label="预计发车:" class="el-times">
+          <el-date-picker
+            v-model="stockupDate"
+            type="daterange"
+            unlink-panels
+            range-separator="-"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            :shortcuts="shortcuts"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="实际发车:" class="el-times">
+          <el-date-picker
+            v-model="stockupDate"
+            type="daterange"
+            unlink-panels
+            range-separator="-"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            :shortcuts="shortcuts"
+            clearable
+          />
+        </el-form-item> -->
+        <el-form-item>
+          <!-- <el-button type="primary" icon="el-icon-van" @click="searchChange">批量卸车</el-button>
+          <el-button type="primary" icon="el-icon-search" @click="searchReset()">搜 索</el-button> -->
+          <el-button icon="el-icon-printer" type="primary" @click="batchPrintOrder">
+            二维码
+          </el-button>
+        </el-form-item>
+      </div>
+    </el-form>
+    <tablecmt
+      :columnList="details.packageListColumnList"
+      :tableData="details.packageListData"
+      :loading="loadingObj.packageListLoading"
+      @inputTxt="inputsc"
+      @timeCheck="timesc"
+      @btnCheck="btnsc"
+      @selectCheck="selectsc"
+      @selection="selectionChange"
+    >
+      <template #default="slotProps">
+        <template v-if="slotProps.scope.column.label === '操作'">
+          <el-button type="text" @click="printOrder(slotProps.scope)"> 包内产品 </el-button>
+          <el-button type="text" @click="printOrder(slotProps.scope)"> 流转节点 </el-button>
+          <el-button type="text" @click="printOrder(slotProps.scope)"> 直接入库 </el-button>
+          <el-button type="text" @click="printOrder(slotProps.scope)"> 查看二维码 </el-button>
+        </template>
+      </template>
+    </tablecmt>
+
+    <!-- 分页模块 -->
+    <el-pagination
+      align="right"
+      background
+      @size-change="sizeChange"
+      @current-change="currentChange"
+      :current-page="details.packageListPage.currentPage"
+      :page-sizes="[30, 50, 80, 120]"
+      :page-size="details.packageListPage.pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="details.packageListPage.total"
+    >
+    </el-pagination>
+  </el-dialog>
+
+  <!-- 打印二维码 -->
+  <el-dialog
+    class="el-dialog-QRCode"
+    title="二维码"
+    :visible.sync="details.popUpShow.QRCodeVisible"
+    width="780px"
+    v-model="details.popUpShow.QRCodeVisible"
+  >
+    <div>
+      <div v-html="html"></div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <!--    <el-button type="primary" @click="ddd">导 出</el-button>-->
+      <el-button type="primary" @click="printTemplate">打 印</el-button>
+      <el-button @click="details.popUpShow.QRCodeVisible = false">取 消</el-button>
+    </span>
+  </el-dialog>
+
+  <!-- 列表配置显示 -->
+  <edittablehead
+    @setcolum="setnewcolum"
+    @closce="showdrawer"
+    :drawerShow="drawerShow"
+    :columnList="details.columnList"
+  ></edittablehead>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
+import functions from '@/utils/functions.js';
+import dayjs from 'dayjs';
+import { mapGetters } from 'vuex';
+/** 获取字典 */
+import { getDictionaryBiz } from '@/api/system/dict';
+import { getopenOrderAdvancePageList } from '@/api/waybill/TemporaryStorageList';
+import { showOrderPackgeCode } from '@/api/distribution/distributionStockArticle';
+import { downloadXls, setNodeHeight, getHtmls } from '@/utils/util';
+import { columnList, packageListColumnList } from '@/option/waybill/FreezeOrder';
+import { useRouter } from 'vue-router';
+import print from '@/utils/print';
+import { ElMessage } from 'element-plus';
+
+// 获取路由实例
+const $router = useRouter();
+
+const details = reactive<any>({
+  /** 是否开启搜索 */
+  search: true,
+  /** 表格搜索条件 */
+  query: {},
+  /** 时间快捷选择设置 */
+  shortcuts: [
+    {
+      text: '最近一周',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+        return [start, end];
+      },
+    },
+    {
+      text: '最近一个月',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+        return [start, end];
+      },
+    },
+    {
+      text: '最近三个月',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+        return [start, end];
+      },
+    },
+  ],
+  /** 时间选择器数据 */
+  stockupDate: [],
+  /** 列表 */
+  columnList,
+  /** 列表数据 */
+  data: [{}],
+  /** 包明细表头 */
+  packageListColumnList,
+  /** 包明细数据 */
+  packageListData: [{}],
+  /** 页面loading */
+  loadingObj: {
+    /** 列表加载loading */
+    list: false,
+    packageListLoading: false,
+  },
+  /** 列表复选框选中的数据 */
+  selectionList: [],
+  /** 是否显示设置表格 */
+  drawerShow: false,
+  /** 分页参数 */
+  page: {
+    currentPage: 1,
+    pageSize: 30,
+    total: 0,
+  },
+  /** 包明细分页参数 */
+  packageListPage: {
+    currentPage: 1,
+    pageSize: 30,
+    total: 0,
+  },
+  /** 弹出层显示 */
+  popUpShow: {
+    /** 包件明细 */
+    packageOrderListlVisited: false,
+    /** 二维码 */
+    QRCodeVisible: false,
+    /** 修改客户信息 */
+    editClientInfoVisible: false,
+  },
+  /** 列表Dom节点 */
+  listNode: '',
+  form: {},
+  /** 全屏 */
+  fullscreenObj: {
+    /** 包明细 */
+    packageOrderListlVisited: false,
+  },
+});
+
+const {
+  search,
+  query,
+  shortcuts,
+  stockupDate,
+  data,
+  loadingObj,
+  selectionList,
+  drawerShow,
+  page,
+  trickleLoadingPage,
+  zeroAdditionalRecordingInfo,
+  popUpShow,
+} = toRefs(details);
+
+/** vuex */
+const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));
+console.log('permission :>> ', permission);
+
+onMounted(() => {
+  const timer = setTimeout(() => {
+    details.listNode = document.querySelector('.maboxhi');
+    console.log('details.listNode :>> ', details.listNode);
+    details.listNode.style.transition = 'all .5s ease-out';
+    console.log('details.listNode :>> ', details.listNode);
+    clearTimeout(timer);
+  }, 100);
+});
+
+/** 请求页面数据 */
+const onLoad = async (page: any, params = {}) => {
+  // 获取暂存单列表
+  details.data = await getopenOrderAdvancePageList(page, { ...details.query, ...params });
+};
+
+onLoad(details.page);
+
+/** 搜索 */
+const searchChange = () => {
+  onLoad(details.page);
+};
+
+/** 清空表单 */
+const searchReset = () => {
+  details.query = {};
+  details.stockupDate = [];
+  details.page.currentPage = 1;
+  onLoad(details.page);
+};
+
+/** 展开列表控件 */
+const showdrawer = (_flag?: boolean) => {
+  details.drawerShow = _flag;
+};
+
+/** 是否开启搜索区 */
+const searchHide = () => {
+  function getWinHight() {
+    var windowHight = 0;
+    if (document.body.clientHeight && document.documentElement.clientHeight) {
+      windowHight =
+        document.body.clientHeight < document.documentElement.clientHeight
+          ? document.body.clientHeight
+          : document.documentElement.clientHeight;
+    } else {
+    }
+    return document.documentElement.clientHeight;
+  }
+  details.search = !details.search;
+  const timer = setTimeout(() => {
+    details.listNode.style.height =
+      getWinHight() - details.listNode.getBoundingClientRect().top - 70 + 'px';
+    clearTimeout(timer);
+  }, 10);
+};
+
+/** 表格表头输入框搜索 */
+const inputsc = (index, row) => {
+  details.query[row.prop] = index;
+  onLoad(details.page);
+};
+
+/** 表格表头时间选择 */
+const timesc = (index, row) => {
+  console.log(index, row);
+  if (!!index) {
+    index = dayjs(index).format('YYYY-MM-DD');
+  }
+  details.query[row.prop] = index;
+  if (!index) {
+    delete details.query[row.prop];
+  }
+  onLoad(details.page);
+};
+
+/** 表格表头输入框搜索 */
+const btnsc = () => {};
+
+/** 表格表头下拉框选择 */
+const selectsc = (index, row) => {
+  details.query[row.prop] = index;
+  if (!index) delete details.query[row.prop];
+  if (row.prop === 'certificateTypeName') {
+    details.query['certificateType'] = index;
+    if (!index) delete details.query['certificateType'];
+  }
+  onLoad(details.page);
+};
+
+/** 表格表头复选框选择 */
+const selectionChange = (list: any) => {
+  details.selectionList = list;
+};
+
+/** 每页数量改变执行的回调 */
+const sizeChange = (pageSize: number) => {
+  details.page.pageSize = pageSize;
+  onLoad(details.page);
+};
+
+/** 页码改变执行的回调 */
+const currentChange = () => {};
+
+/**
+ * 设置列表 -- 固定函数
+ * 弹窗的勾选回调，用于更改头部数组
+ * 固定搭配，只需要更换   columnList
+ *  */
+const setnewcolum = (newarr, headarr, type) => {
+  if (type == 1) {
+    details.columnList = newarr;
+    functions.setStorage(window.location.pathname + 'checkList', headarr);
+  } else if (type == 2) {
+    details.columnList = newarr;
+    functions.setStorage(window.location.pathname + 'flexList', headarr);
+  } else if (type == 3) {
+    details.columnList = newarr;
+    functions.setStorage(window.location.pathname + 'sortlist', headarr);
+  }
+};
+
+/** 弹出层开启前清除数据 */
+const beforeClose = done => {
+  done();
+  details.form = {};
+  details.selectionList = [];
+  details.view = false;
+};
+
+/** 查看包明细 */
+const handleShowPackageOrderList = ({ row }) => {
+  details.popUpShow.packageOrderListlVisited = true;
+
+  nextTick(() => {
+    // 获取弹窗内表格元素节点, 并设置高度
+    const _node: any = document.querySelector('.packageOrderListlVisited .maboxhi');
+    if (!_node) return;
+    _node.style.height = '550px';
+    console.log('_node :>> ', _node);
+  });
+};
+
+/** 订单转运单 */
+const handleCreateOrder = () => {
+  $router.push('/distribution/inventory/CreateOrder');
+};
+
+/** 修改客户信息 */
+const editClientInfo = () => {
+  if (details.selectionList.length !== 0) {
+    return ElMessage({
+      type: 'warning',
+      message: '最少选择一条数据',
+    });
+  }
+  //   editClientInfoVisible;
+  details.popUpShow.editClientInfoVisible = true;
+};
+
+/** 批量删除 */
+const handleDelete = () => {
+  if (details.selectionList.length === 0) {
+    return ElMessage({
+      type: 'warning',
+      message: '最少选择一条数据',
+    });
+  }
+};
+
+/** 批量发车 */
+const handleDepart = () => {
+  if (details.selectionList.length === 0) {
+    return ElMessage({
+      type: 'warning',
+      message: '最少选择一条数据',
+    });
+  }
+};
+
+/** 批量冻结 */
+const handleFreeze = () => {
+  if (details.selectionList.length === 0) {
+    return ElMessage({
+      type: 'warning',
+      message: '最少选择一条数据',
+    });
+  }
+};
+
+/**
+ * 是否开启全屏
+ * @params(_type) 开启或关闭
+ */
+const handleFullScrean = (_type: 'open' | 'close', _name: string) => {
+  let _node = '';
+  if (_name) _node = document.querySelector(`.${_name} .maboxhi`);
+
+  switch (_name) {
+    case 'packageOrderListlVisited':
+      details.fullscreenObj.packageOrderListlVisited =
+        !details.fullscreenObj.packageOrderListlVisited;
+
+      if (_type === 'close') {
+        if (_node) setNodeHeight(_node, '500px');
+      } else {
+        if (_node) setNodeHeight(_node);
+      }
+      break;
+
+    default:
+      break;
+  }
+};
+
+/** 单列查看包条码 */
+const printOrder = ({ row }) => {
+  let qr = {
+    ids: row.id,
+  };
+  showOrderPackgeCode(qr).then(res => {
+    // this.orderPackageCode = res.data
+    if (res.data.code !== 200) return;
+    console.log(res.data);
+    this.html = '';
+    this.html = getHtmls(res.data.data.dataList, res.data.data.templateHtml);
+  });
+};
+
+/** 单列查看包条码 */
+const batchPrintOrder = ({ row }) => {
+  let qr = {
+    ids: row.id,
+  };
+  showOrderPackgeCode(qr).then(res => {
+    // this.orderPackageCode = res.data
+    if (res.data.code !== 200) return;
+    console.log(res.data);
+    this.html = '';
+    this.html = getHtmls(res.data.data.dataList, res.data.data.templateHtml);
+  });
+};
+
+/** 打印包条码 */
+const printTemplate = () => {
+  const orderNodeList = document.querySelectorAll('.el-dialog-QRCode .el-dialog__body>div>div>div');
+  print(orderNodeList);
+};
+</script>
+
+<style scoped lang="scss">
+.fo-fl {
+  display: flex;
+  flex-wrap: wrap;
+  zoom: 0.9;
+}
+
+// 日期选择器
+:deep(.el-date-editor.el-input) {
+  height: 100% !important;
+  width: 100% !important;
+}
+
+:deep(.el-range-editor.el-input__wrapper) {
+  height: 100% !important;
+}
+
+// 新增行
+.add_row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.add_row_title {
+  text-align: center;
+  margin-bottom: 10px;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+// 统计行
+.statistics_row {
+  margin: 10px 0;
+  font-size: 14px;
+  zoom: 0.9;
+  display: flex;
+
+  > div {
+    margin-right: 20px;
+  }
+}
+
+// 卡片容器
+.crad_container {
+  display: flex;
+
+  .card_container_item {
+    flex: 1;
+    // padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 0 5px #ccc;
+
+    &:first-child {
+      margin-right: 20px;
+    }
+
+    .card_container_item_title {
+      padding: 10px;
+      border-bottom: 1px solid #ccc;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .card_container_item_box {
+      padding: 10px;
+    }
+  }
+}
+</style>

src/views/waybill/TemporaryStorageList.vue

@@ -0,0 +1,730 @@
+<template>
+  <basic-container>
+    <div class="avue-crud">
+      <!-- 搜索模块 -->
+      <el-row v-if="!search">
+        <!-- 查询模块 -->
+        <el-form :inline="true" :model="query" class="el-fr-d">
+          <el-form-item label="交期:" class="el-times">
+            <!--            <el-input v-model="query.stockupArea" placeholder="请输入备货区"></el-input>-->
+            <el-date-picker
+              v-model="stockupDate"
+              type="daterange"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              :shortcuts="shortcuts"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="创建时间:" class="el-times">
+            <!--            <el-input v-model="query.stockupArea" placeholder="请输入备货区"></el-input>-->
+            <el-date-picker
+              v-model="stockupDate"
+              type="daterange"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              :shortcuts="shortcuts"
+              clearable
+            />
+          </el-form-item>
+          <!-- 查询按钮 -->
+          <el-form-item class="el-btn">
+            <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
+            <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+
+      <!-- 控件模块 -->
+      <el-row>
+        <div class="avue-crud__header">
+          <!-- 头部左侧按钮模块 -->
+          <div class="avue-crud__left">
+            <el-button type="primary" icon="el-icon-plus" @click="handleCreateOrder"
+              >订单转运单
+            </el-button>
+            <el-button type="primary" icon="Edit" @click="editClientInfo">修改客户信息</el-button>
+            <el-button type="primary" icon="Delete" @click="handleDelete">删除</el-button>
+            <el-button type="primary" icon="Upload" @click="searchReset">家配导入</el-button>
+            <el-button type="primary" icon="Van" @click="handleDepart">发 车</el-button>
+            <el-button type="primary" icon="Plus" @click="searchReset">开标签</el-button>
+            <el-button type="primary" icon="Upload" @click="searchReset">批量开标签导入</el-button>
+            <el-button type="primary" icon="Upload" @click="searchReset">定制品导入</el-button>
+            <el-button type="primary" icon="Upload" @click="searchReset">标准品导入</el-button>
+            <el-button type="primary" icon="Rank" @click="handleFreeze">冻结</el-button>
+          </div>
+          <!-- 头部右侧按钮模块 -->
+          <div class="avue-crud__right">
+            <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
+            <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
+            <el-button icon="Search" @click="searchHide" circle></el-button>
+          </div>
+        </div>
+      </el-row>
+
+      <!-- 表格 -->
+      <el-row>
+        <!-- 列表模块 -->
+        <tablecmt
+          :columnList="details.columnList"
+          :tableData="data"
+          :loading="loadingObj.list"
+          @inputTxt="inputsc"
+          @timeCheck="timesc"
+          @btnCheck="btnsc"
+          @selectCheck="selectsc"
+          @selection="selectionChange"
+        >
+          <template #default="slotProps">
+            <template v-if="slotProps.scope.column.label === '操作'">
+              <el-button type="text" @click="handleShowPackageOrderList(slotProps.scope)">
+                包明细
+              </el-button>
+            </template>
+          </template>
+        </tablecmt>
+      </el-row>
+
+      <!-- 统计 -->
+      <el-row>
+        <div>选择数: , 运单数: , 件数: , 重量: , 体积: , 提货费: ,</div>
+        <div>总计: 总数: , 运单数: , 件数: , 重量: , 体积: , 提货费: ,</div>
+      </el-row>
+
+      <!-- 分页模块 -->
+      <el-row class="el-fy">
+        <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
+          <div style="font-size: 14px">勾选数量: {{ selectionList.length }}</div>
+          <!-- 分页模块 -->
+          <el-pagination
+            align="right"
+            background
+            @size-change="sizeChange"
+            @current-change="currentChange"
+            :current-page="page.currentPage"
+            :page-sizes="[30, 50, 80, 120]"
+            :page-size="page.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="page.total"
+          >
+          </el-pagination>
+        </div>
+      </el-row>
+    </div>
+  </basic-container>
+
+  <!-- 修改客户信息 -->
+  <el-dialog
+    class="el-dialog-QRCode"
+    title="修改客户信息"
+    :visible.sync="details.popUpShow.editClientInfoVisible"
+    width="780px"
+    v-model="details.popUpShow.editClientInfoVisible"
+  >
+    <div>
+      <el-divider style="font-size: 28px">修改订单自编号（）客户信息</el-divider>
+    </div>
+
+    <el-form>
+      <el-form-item label="客户姓名">
+        <el-input />
+      </el-form-item>
+
+      <el-form-item label="联系电话">
+        <el-input />
+      </el-form-item>
+
+      <el-form-item label="用户地址">
+        <el-input />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="flex-c-c dialog-footer">
+        <el-button icon="Position" type="primary" @click="printTemplate">提 交</el-button>
+        <el-button icon="Refresh" type="primary" @click="printTemplate">重 置</el-button>
+        <el-button icon="Close" @click="details.popUpShow.editClientInfoVisible = false">
+          取 消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  <!-- 包明细 -->
+  <el-dialog
+    title="包明细"
+    v-model="details.popUpShow.packageOrderListlVisited"
+    width="80%"
+    :before-close="beforeClose"
+    append-to-body
+    :fullscreen="details.fullscreenObj.packageOrderListlVisited"
+    :show-close="false"
+    class="packageOrderListlVisited"
+  >
+    <template #header="{ close, titleId, titleClass }">
+      <div class="my-header flex-c-sb">
+        <h4 :id="titleId" :class="titleClass">包明细</h4>
+        <div class="flex-c-c">
+          <!-- 全屏显示按钮 -->
+          <el-button type="text" v-if="!details.fullscreenObj.packageOrderListlVisited">
+            <el-icon class="" @click="handleFullScrean('open', 'packageOrderListlVisited')"
+              ><FullScreen
+            /></el-icon>
+          </el-button>
+          <el-button type="text" v-else>
+            <el-icon class="" @click="handleFullScrean('close', 'packageOrderListlVisited')"
+              ><CopyDocument
+            /></el-icon>
+          </el-button>
+
+          <!-- 弹窗关闭按钮 -->
+          <el-button type="text">
+            <el-icon class="" @click="close"><Close /></el-icon>
+          </el-button>
+        </div>
+      </div>
+    </template>
+    <el-form :inline="true" :model="query" class="el-fr-d">
+      <div class="fo-fl">
+        <!-- <el-form-item label="预计发车:" class="el-times">
+          <el-date-picker
+            v-model="stockupDate"
+            type="daterange"
+            unlink-panels
+            range-separator="-"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            :shortcuts="shortcuts"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="实际发车:" class="el-times">
+          <el-date-picker
+            v-model="stockupDate"
+            type="daterange"
+            unlink-panels
+            range-separator="-"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            :shortcuts="shortcuts"
+            clearable
+          />
+        </el-form-item> -->
+        <el-form-item>
+          <!-- <el-button type="primary" icon="el-icon-van" @click="searchChange">批量卸车</el-button>
+          <el-button type="primary" icon="el-icon-search" @click="searchReset()">搜 索</el-button> -->
+          <el-button icon="el-icon-printer" type="primary" @click="batchPrintOrder">
+            二维码
+          </el-button>
+        </el-form-item>
+      </div>
+    </el-form>
+    <tablecmt
+      :columnList="details.packageListColumnList"
+      :tableData="details.packageListData"
+      :loading="loadingObj.packageListLoading"
+      @inputTxt="inputsc"
+      @timeCheck="timesc"
+      @btnCheck="btnsc"
+      @selectCheck="selectsc"
+      @selection="selectionChange"
+    >
+      <template #default="slotProps">
+        <template v-if="slotProps.scope.column.label === '操作'">
+          <el-button type="text" @click="printOrder(slotProps.scope)"> 包内产品 </el-button>
+          <el-button type="text" @click="printOrder(slotProps.scope)"> 流转节点 </el-button>
+          <el-button type="text" @click="printOrder(slotProps.scope)"> 直接入库 </el-button>
+          <el-button type="text" @click="printOrder(slotProps.scope)"> 查看二维码 </el-button>
+        </template>
+      </template>
+    </tablecmt>
+
+    <!-- 分页模块 -->
+    <el-pagination
+      align="right"
+      background
+      @size-change="sizeChange"
+      @current-change="currentChange"
+      :current-page="details.packageListPage.currentPage"
+      :page-sizes="[30, 50, 80, 120]"
+      :page-size="details.packageListPage.pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="details.packageListPage.total"
+    >
+    </el-pagination>
+  </el-dialog>
+
+  <!-- 打印二维码 -->
+  <el-dialog
+    class="el-dialog-QRCode"
+    title="二维码"
+    :visible.sync="details.popUpShow.QRCodeVisible"
+    width="780px"
+    v-model="details.popUpShow.QRCodeVisible"
+  >
+    <div>
+      <div v-html="html"></div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <!--    <el-button type="primary" @click="ddd">导 出</el-button>-->
+      <el-button type="primary" @click="printTemplate">打 印</el-button>
+      <el-button @click="details.popUpShow.QRCodeVisible = false">取 消</el-button>
+    </span>
+  </el-dialog>
+
+  <!-- 列表配置显示 -->
+  <edittablehead
+    @setcolum="setnewcolum"
+    @closce="showdrawer"
+    :drawerShow="drawerShow"
+    :columnList="details.columnList"
+  ></edittablehead>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
+import functions from '@/utils/functions.js';
+import dayjs from 'dayjs';
+import { mapGetters } from 'vuex';
+/** 获取字典 */
+import { getDictionaryBiz } from '@/api/system/dict';
+import { getopenOrderAdvancePageList } from '@/api/waybill/TemporaryStorageList';
+import { showOrderPackgeCode } from '@/api/distribution/distributionStockArticle';
+import { downloadXls, setNodeHeight, getHtmls } from '@/utils/util';
+import { columnList, packageListColumnList } from '@/option/waybill/TemporaryStorageList';
+import { useRouter } from 'vue-router';
+import print from '@/utils/print';
+import { ElMessage } from 'element-plus';
+
+// 获取路由实例
+const $router = useRouter();
+
+const details = reactive<any>({
+  /** 是否开启搜索 */
+  search: true,
+  /** 表格搜索条件 */
+  query: {},
+  /** 时间快捷选择设置 */
+  shortcuts: [
+    {
+      text: '最近一周',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+        return [start, end];
+      },
+    },
+    {
+      text: '最近一个月',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+        return [start, end];
+      },
+    },
+    {
+      text: '最近三个月',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+        return [start, end];
+      },
+    },
+  ],
+  /** 时间选择器数据 */
+  stockupDate: [],
+  /** 列表 */
+  columnList,
+  /** 列表数据 */
+  data: [{}],
+  /** 包明细表头 */
+  packageListColumnList,
+  /** 包明细数据 */
+  packageListData: [{}],
+  /** 页面loading */
+  loadingObj: {
+    /** 列表加载loading */
+    list: false,
+    packageListLoading: false,
+  },
+  /** 列表复选框选中的数据 */
+  selectionList: [],
+  /** 是否显示设置表格 */
+  drawerShow: false,
+  /** 分页参数 */
+  page: {
+    currentPage: 1,
+    pageSize: 30,
+    total: 0,
+  },
+  /** 包明细分页参数 */
+  packageListPage: {
+    currentPage: 1,
+    pageSize: 30,
+    total: 0,
+  },
+  /** 弹出层显示 */
+  popUpShow: {
+    /** 包件明细 */
+    packageOrderListlVisited: false,
+    /** 二维码 */
+    QRCodeVisible: false,
+    /** 修改客户信息 */
+    editClientInfoVisible: false,
+  },
+  /** 列表Dom节点 */
+  listNode: '',
+  form: {},
+  /** 全屏 */
+  fullscreenObj: {
+    /** 包明细 */
+    packageOrderListlVisited: false,
+  },
+});
+
+const {
+  search,
+  query,
+  shortcuts,
+  stockupDate,
+  data,
+  loadingObj,
+  selectionList,
+  drawerShow,
+  page,
+  trickleLoadingPage,
+  zeroAdditionalRecordingInfo,
+  popUpShow,
+} = toRefs(details);
+
+/** vuex */
+const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));
+console.log('permission :>> ', permission);
+
+onMounted(() => {
+  const timer = setTimeout(() => {
+    details.listNode = document.querySelector('.maboxhi');
+    console.log('details.listNode :>> ', details.listNode);
+    details.listNode.style.transition = 'all .5s ease-out';
+    console.log('details.listNode :>> ', details.listNode);
+    clearTimeout(timer);
+  }, 100);
+});
+
+/** 请求页面数据 */
+const onLoad = async (page: any, params = {}) => {
+  // 获取暂存单列表
+  details.data = await getopenOrderAdvancePageList(page, { ...details.query, ...params });
+};
+
+onLoad(details.page);
+
+/** 搜索 */
+const searchChange = () => {
+  onLoad(details.page);
+};
+
+/** 清空表单 */
+const searchReset = () => {
+  details.query = {};
+  details.stockupDate = [];
+  details.page.currentPage = 1;
+  onLoad(details.page);
+};
+
+/** 展开列表控件 */
+const showdrawer = (_flag?: boolean) => {
+  details.drawerShow = _flag;
+};
+
+/** 是否开启搜索区 */
+const searchHide = () => {
+  function getWinHight() {
+    var windowHight = 0;
+    if (document.body.clientHeight && document.documentElement.clientHeight) {
+      windowHight =
+        document.body.clientHeight < document.documentElement.clientHeight
+          ? document.body.clientHeight
+          : document.documentElement.clientHeight;
+    } else {
+    }
+    return document.documentElement.clientHeight;
+  }
+  details.search = !details.search;
+  const timer = setTimeout(() => {
+    details.listNode.style.height =
+      getWinHight() - details.listNode.getBoundingClientRect().top - 70 + 'px';
+    clearTimeout(timer);
+  }, 10);
+};
+
+/** 表格表头输入框搜索 */
+const inputsc = (index, row) => {
+  details.query[row.prop] = index;
+  onLoad(details.page);
+};
+
+/** 表格表头时间选择 */
+const timesc = (index, row) => {
+  console.log(index, row);
+  if (!!index) {
+    index = dayjs(index).format('YYYY-MM-DD');
+  }
+  details.query[row.prop] = index;
+  if (!index) {
+    delete details.query[row.prop];
+  }
+  onLoad(details.page);
+};
+
+/** 表格表头输入框搜索 */
+const btnsc = () => {};
+
+/** 表格表头下拉框选择 */
+const selectsc = (index, row) => {
+  details.query[row.prop] = index;
+  if (!index) delete details.query[row.prop];
+  if (row.prop === 'certificateTypeName') {
+    details.query['certificateType'] = index;
+    if (!index) delete details.query['certificateType'];
+  }
+  onLoad(details.page);
+};
+
+/** 表格表头复选框选择 */
+const selectionChange = (list: any) => {
+  details.selectionList = list;
+};
+
+/** 每页数量改变执行的回调 */
+const sizeChange = (pageSize: number) => {
+  details.page.pageSize = pageSize;
+  onLoad(details.page);
+};
+
+/** 页码改变执行的回调 */
+const currentChange = () => {};
+
+/**
+ * 设置列表 -- 固定函数
+ * 弹窗的勾选回调，用于更改头部数组
+ * 固定搭配，只需要更换   columnList
+ *  */
+const setnewcolum = (newarr, headarr, type) => {
+  if (type == 1) {
+    details.columnList = newarr;
+    functions.setStorage(window.location.pathname + 'checkList', headarr);
+  } else if (type == 2) {
+    details.columnList = newarr;
+    functions.setStorage(window.location.pathname + 'flexList', headarr);
+  } else if (type == 3) {
+    details.columnList = newarr;
+    functions.setStorage(window.location.pathname + 'sortlist', headarr);
+  }
+};
+
+/** 弹出层开启前清除数据 */
+const beforeClose = done => {
+  done();
+  details.form = {};
+  details.selectionList = [];
+  details.view = false;
+};
+
+/** 查看包明细 */
+const handleShowPackageOrderList = ({ row }) => {
+  details.popUpShow.packageOrderListlVisited = true;
+
+  nextTick(() => {
+    // 获取弹窗内表格元素节点, 并设置高度
+    const _node: any = document.querySelector('.packageOrderListlVisited .maboxhi');
+    if (!_node) return;
+    _node.style.height = '550px';
+    console.log('_node :>> ', _node);
+  });
+};
+
+/** 订单转运单 */
+const handleCreateOrder = () => {
+  $router.push('/distribution/inventory/CreateOrder');
+};
+
+/** 修改客户信息 */
+const editClientInfo = () => {
+  if (details.selectionList.length !== 0) {
+    return ElMessage({
+      type: 'warning',
+      message: '最少选择一条数据',
+    });
+  }
+  //   editClientInfoVisible;
+  details.popUpShow.editClientInfoVisible = true;
+};
+
+/** 批量删除 */
+const handleDelete = () => {
+  if (details.selectionList.length === 0) {
+    return ElMessage({
+      type: 'warning',
+      message: '最少选择一条数据',
+    });
+  }
+};
+
+/** 批量发车 */
+const handleDepart = () => {
+  if (details.selectionList.length === 0) {
+    return ElMessage({
+      type: 'warning',
+      message: '最少选择一条数据',
+    });
+  }
+};
+
+/** 批量冻结 */
+const handleFreeze = () => {
+  if (details.selectionList.length === 0) {
+    return ElMessage({
+      type: 'warning',
+      message: '最少选择一条数据',
+    });
+  }
+};
+
+/**
+ * 是否开启全屏
+ * @params(_type) 开启或关闭
+ */
+const handleFullScrean = (_type: 'open' | 'close', _name: string) => {
+  let _node = '';
+  if (_name) _node = document.querySelector(`.${_name} .maboxhi`);
+
+  switch (_name) {
+    case 'packageOrderListlVisited':
+      details.fullscreenObj.packageOrderListlVisited =
+        !details.fullscreenObj.packageOrderListlVisited;
+
+      if (_type === 'close') {
+        if (_node) setNodeHeight(_node, '500px');
+      } else {
+        if (_node) setNodeHeight(_node, '800px');
+      }
+      break;
+
+    default:
+      break;
+  }
+};
+
+/** 单列查看包条码 */
+const printOrder = ({ row }) => {
+  let qr = {
+    ids: row.id,
+  };
+  showOrderPackgeCode(qr).then(res => {
+    // this.orderPackageCode = res.data
+    if (res.data.code !== 200) return;
+    console.log(res.data);
+    this.html = '';
+    this.html = getHtmls(res.data.data.dataList, res.data.data.templateHtml);
+  });
+};
+
+/** 单列查看包条码 */
+const batchPrintOrder = ({ row }) => {
+  let qr = {
+    ids: row.id,
+  };
+  showOrderPackgeCode(qr).then(res => {
+    // this.orderPackageCode = res.data
+    if (res.data.code !== 200) return;
+    console.log(res.data);
+    this.html = '';
+    this.html = getHtmls(res.data.data.dataList, res.data.data.templateHtml);
+  });
+};
+
+/** 打印包条码 */
+const printTemplate = () => {
+  const orderNodeList = document.querySelectorAll('.el-dialog-QRCode .el-dialog__body>div>div>div');
+  print(orderNodeList);
+};
+</script>
+
+<style scoped lang="scss">
+.fo-fl {
+  display: flex;
+  flex-wrap: wrap;
+  zoom: 0.9;
+}
+
+// 日期选择器
+:deep(.el-date-editor.el-input) {
+  height: 100% !important;
+  width: 100% !important;
+}
+
+:deep(.el-range-editor.el-input__wrapper) {
+  height: 100% !important;
+}
+
+// 新增行
+.add_row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.add_row_title {
+  text-align: center;
+  margin-bottom: 10px;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+// 统计行
+.statistics_row {
+  margin: 10px 0;
+  font-size: 14px;
+  zoom: 0.9;
+  display: flex;
+
+  > div {
+    margin-right: 20px;
+  }
+}
+
+// 卡片容器
+.crad_container {
+  display: flex;
+
+  .card_container_item {
+    flex: 1;
+    // padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 0 5px #ccc;
+
+    &:first-child {
+      margin-right: 20px;
+    }
+
+    .card_container_item_title {
+      padding: 10px;
+      border-bottom: 1px solid #ccc;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .card_container_item_box {
+      padding: 10px;
+    }
+  }
+}
+</style>

src/views/waybill/WaybillOrderList.vue

@@ -0,0 +1,553 @@
+<template>
+  <basic-container>
+    <div class="avue-crud">
+      <!-- 搜索模块 -->
+      <el-row v-if="!search">
+        <!-- 查询模块 -->
+        <el-form :inline="true" :model="query" class="el-fr-d">
+          <el-form-item label="有效状态">
+            <el-select v-model="query.value" clearable placeholder="有效状态">
+              <el-option label="有效" value="item.value" />
+              <el-option label="作废" value="item.value" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="运单号:" class="el-times">
+            <el-input v-model="query.stockupArea" clearable placeholder="请输入运单号"></el-input>
+          </el-form-item>
+          <el-form-item label="制单时间:" class="el-times">
+            <el-date-picker
+              v-model="stockupDate"
+              type="daterange"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              :shortcuts="shortcuts"
+              clearable
+            />
+          </el-form-item>
+
+          <el-form-item label="创建时间:" class="el-times">
+            <el-date-picker
+              v-model="stockupDate"
+              type="daterange"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              :shortcuts="shortcuts"
+              clearable
+            />
+          </el-form-item>
+
+          <el-form-item label="送货时间:" class="el-times">
+            <el-date-picker
+              v-model="stockupDate"
+              type="daterange"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              :shortcuts="shortcuts"
+              clearable
+            />
+          </el-form-item>
+
+          <el-form-item label="签收时间:" class="el-times">
+            <el-date-picker
+              v-model="stockupDate"
+              type="daterange"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              :shortcuts="shortcuts"
+              clearable
+            />
+          </el-form-item>
+          <!-- 查询按钮 -->
+          <el-form-item class="el-btn">
+            <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
+            <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+
+      <!-- 控件模块 -->
+      <el-row>
+        <div class="avue-crud__header">
+          <!-- 头部左侧按钮模块 -->
+          <div class="avue-crud__left">
+            <el-button type="primary" icon="Printer" @click="batchPrint">打 印</el-button>
+            <el-button type="primary" icon="Edit" @click="editOrder">改 单</el-button>
+            <el-button type="primary" icon="Plus" @click="searchChange">加入挑单夹</el-button>
+            <el-button type="primary" icon="Location" @click="searchChange">运单跟踪</el-button>
+            <el-button type="primary" icon="Delete" @click="handleBatchDelete">批量作废</el-button>
+            <el-button type="primary" icon="Rank" @click="handleBatchFreeze">冻 结</el-button>
+            <el-button type="primary" icon="Refresh" @click="handleBatchRecover">恢 复</el-button>
+          </div>
+          <!-- 头部右侧按钮模块 -->
+          <div class="avue-crud__right">
+            <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
+            <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
+            <el-button icon="Search" @click="searchHide" circle></el-button>
+          </div>
+        </div>
+      </el-row>
+
+      <!-- 表格 -->
+      <el-row>
+        <!-- 列表模块 -->
+        <tablecmt
+          :columnList="details.columnList"
+          :tableData="data"
+          :loading="loadingObj.list"
+          @inputTxt="inputsc"
+          @timeCheck="timesc"
+          @btnCheck="btnsc"
+          @selectCheck="selectsc"
+          @selection="selectionChange"
+        >
+          <template #default="slotProps">
+            <template v-if="slotProps.scope.column.label === '运单号'">
+              <el-button type="text" @click="handleShowPackageOrderList(slotProps.scope)">
+                查看
+              </el-button>
+            </template>
+
+            <template v-else-if="slotProps.scope.column.label === '操作'">
+              <el-button type="text" @click="handleShowPackageOrderList(slotProps.scope)">
+                上传回单
+              </el-button>
+              <el-button type="text" @click="handleShowPackageOrderList(slotProps.scope)">
+                查看订单
+              </el-button>
+              <el-button type="text" @click="handleShowPackageOrderList(slotProps.scope)">
+                零担标签
+              </el-button>
+            </template>
+          </template>
+        </tablecmt>
+      </el-row>
+
+      <!-- 分页模块 -->
+      <el-row class="el-fy">
+        <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
+          <div style="font-size: 14px">勾选数量: {{ selectionList.length }}</div>
+          <!-- 分页模块 -->
+          <el-pagination
+            align="right"
+            background
+            @size-change="sizeChange"
+            @current-change="currentChange"
+            :current-page="page.currentPage"
+            :page-sizes="[30, 50, 80, 120]"
+            :page-size="page.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="page.total"
+          >
+          </el-pagination>
+        </div>
+      </el-row>
+    </div>
+  </basic-container>
+
+  <!-- 修改客户信息 -->
+  <el-dialog
+    class="el-dialog-view"
+    title="查看改单"
+    :visible.sync="details.popUpShow.view"
+    width="780px"
+    :show-close="false"
+    :fullscreen="details.fullscreenObj.view"
+    v-model="details.popUpShow.view"
+  >
+    <!-- 头部 -->
+    <template #header="{ close, titleId, titleClass }">
+      <div class="my-header flex-c-sb">
+        <div :id="titleId" :class="titleClass">查看改单</div>
+        <div class="flex-c-c">
+          <!-- 全屏显示按钮 -->
+          <el-button type="text" v-if="!details.fullscreenObj.view">
+            <el-icon class="" @click="handleFullScrean('open', 'el-dialog-view')"
+              ><FullScreen
+            /></el-icon>
+          </el-button>
+          <el-button type="text" v-else>
+            <el-icon class="" @click="handleFullScrean('close', 'el-dialog-view')"
+              ><CopyDocument
+            /></el-icon>
+          </el-button>
+
+          <!-- 弹窗关闭按钮 -->
+          <el-button type="text">
+            <el-icon class="" @click="close"><Close /></el-icon>
+          </el-button>
+        </div>
+      </div>
+    </template>
+  </el-dialog>
+
+  <!-- 列表配置显示 -->
+  <edittablehead
+    @setcolum="setnewcolum"
+    @closce="showdrawer"
+    :drawerShow="drawerShow"
+    :columnList="details.columnList"
+  ></edittablehead>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
+import functions from '@/utils/functions.js';
+import dayjs from 'dayjs';
+import { mapGetters } from 'vuex';
+/** 获取字典 */
+import { getDictionaryBiz } from '@/api/system/dict';
+import { getopenOrderAdvancePageList } from '@/api/waybill/ChangeOrder';
+import { showOrderPackgeCode } from '@/api/distribution/distributionStockArticle';
+import { downloadXls, setNodeHeight, getHtmls } from '@/utils/util';
+import { columnList, viewColumnList } from '@/option/waybill/WaybillOrderList';
+import { useRouter } from 'vue-router';
+import print from '@/utils/print';
+import { ElMessage } from 'element-plus';
+
+// 获取路由实例
+const $router = useRouter();
+
+const details = reactive<any>({
+  /** 是否开启搜索 */
+  search: true,
+  /** 表格搜索条件 */
+  query: {},
+  /** 时间快捷选择设置 */
+  shortcuts: [
+    {
+      text: '最近一周',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+        return [start, end];
+      },
+    },
+    {
+      text: '最近一个月',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+        return [start, end];
+      },
+    },
+    {
+      text: '最近三个月',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+        return [start, end];
+      },
+    },
+  ],
+  /** 时间选择器数据 */
+  stockupDate: [],
+  /** 列表 */
+  columnList,
+  /** 列表数据 */
+  data: [{}],
+  /** 查看列表表头 */
+  viewColumnList,
+  /** 页面loading */
+  loadingObj: {
+    /** 列表加载loading */
+    list: false,
+    packageListLoading: false,
+  },
+  /** 列表复选框选中的数据 */
+  selectionList: [],
+  /** 是否显示设置表格 */
+  drawerShow: false,
+  /** 分页参数 */
+  page: {
+    currentPage: 1,
+    pageSize: 30,
+    total: 0,
+  },
+  /** 弹出层显示 */
+  popUpShow: {
+    /** 包件明细 */
+    packageOrderListlVisited: false,
+    /** 查看 */
+    view: false,
+  },
+  /** 列表Dom节点 */
+  listNode: '',
+  form: {},
+  /** 全屏 */
+  fullscreenObj: {
+    /** 查看 */
+    view: false,
+  },
+});
+
+const {
+  search,
+  query,
+  shortcuts,
+  stockupDate,
+  data,
+  loadingObj,
+  selectionList,
+  drawerShow,
+  page,
+  popUpShow,
+} = toRefs(details);
+
+/** vuex */
+const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));
+console.log('permission :>> ', permission);
+
+onMounted(() => {
+  const timer = setTimeout(() => {
+    details.listNode = document.querySelector('.maboxhi');
+    details.listNode.style.transition = 'all .5s ease-out';
+    clearTimeout(timer);
+  }, 100);
+});
+
+/** 请求页面数据 */
+const onLoad = async (page: any, params = {}) => {
+  // 获取暂存单列表
+  //   details.data = await getopenOrderAdvancePageList(page, { ...details.query, ...params });
+};
+
+onLoad(details.page);
+
+/** 搜索 */
+const searchChange = () => {
+  onLoad(details.page);
+};
+
+/** 清空表单 */
+const searchReset = () => {
+  details.query = {};
+  details.stockupDate = [];
+  details.page.currentPage = 1;
+  onLoad(details.page);
+};
+
+/** 展开列表控件 */
+const showdrawer = (_flag?: boolean) => {
+  details.drawerShow = _flag;
+};
+
+/** 是否开启搜索区 */
+const searchHide = () => {
+  function getWinHight() {
+    var windowHight = 0;
+    if (document.body.clientHeight && document.documentElement.clientHeight) {
+      windowHight =
+        document.body.clientHeight < document.documentElement.clientHeight
+          ? document.body.clientHeight
+          : document.documentElement.clientHeight;
+    } else {
+    }
+    return document.documentElement.clientHeight;
+  }
+  details.search = !details.search;
+  const timer = setTimeout(() => {
+    details.listNode.style.height =
+      getWinHight() - details.listNode.getBoundingClientRect().top - 70 + 'px';
+    clearTimeout(timer);
+  }, 10);
+};
+
+/** 表格表头输入框搜索 */
+const inputsc = (index, row) => {
+  details.query[row.prop] = index;
+  onLoad(details.page);
+};
+
+/** 表格表头时间选择 */
+const timesc = (index, row) => {
+  console.log(index, row);
+  if (!!index) {
+    index = dayjs(index).format('YYYY-MM-DD');
+  }
+  details.query[row.prop] = index;
+  if (!index) {
+    delete details.query[row.prop];
+  }
+  onLoad(details.page);
+};
+
+/** 表格表头输入框搜索 */
+const btnsc = () => {};
+
+/** 表格表头下拉框选择 */
+const selectsc = (index, row) => {
+  details.query[row.prop] = index;
+  if (!index) delete details.query[row.prop];
+  if (row.prop === 'certificateTypeName') {
+    details.query['certificateType'] = index;
+    if (!index) delete details.query['certificateType'];
+  }
+  onLoad(details.page);
+};
+
+/** 表格表头复选框选择 */
+const selectionChange = (list: any) => {
+  details.selectionList = list;
+};
+
+/** 每页数量改变执行的回调 */
+const sizeChange = (pageSize: number) => {
+  details.page.pageSize = pageSize;
+  onLoad(details.page);
+};
+
+/** 页码改变执行的回调 */
+const currentChange = () => {};
+
+/**
+ * 设置列表 -- 固定函数
+ * 弹窗的勾选回调，用于更改头部数组
+ * 固定搭配，只需要更换   columnList
+ *  */
+const setnewcolum = (newarr, headarr, type) => {
+  if (type == 1) {
+    details.columnList = newarr;
+    functions.setStorage(window.location.pathname + 'checkList', headarr);
+  } else if (type == 2) {
+    details.columnList = newarr;
+    functions.setStorage(window.location.pathname + 'flexList', headarr);
+  } else if (type == 3) {
+    details.columnList = newarr;
+    functions.setStorage(window.location.pathname + 'sortlist', headarr);
+  }
+};
+
+/** 弹出层开启前清除数据 */
+const beforeClose = done => {
+  done();
+  details.form = {};
+  details.selectionList = [];
+  details.view = false;
+};
+
+/** 查看包明细 */
+const handleShowPackageOrderList = ({ row }) => {
+  details.popUpShow.view = true;
+  nextTick(() => {
+    const _node = document.querySelector(`.el-dialog-view .maboxhi`);
+    setNodeHeight(_node);
+  });
+};
+
+/**
+ * 是否开启全屏
+ * @params(_type) 开启或关闭
+ */
+const handleFullScrean = (_type: 'open' | 'close', _name: string) => {
+  let _node = '';
+  if (_name) _node = document.querySelector(`.${_name} .maboxhi`);
+
+  switch (_name) {
+    case 'el-dialog-view':
+      details.fullscreenObj.view = !details.fullscreenObj.view;
+      if (_type === 'close') {
+        if (_node) setNodeHeight(_node);
+      } else {
+        if (_node) setNodeHeight(_node);
+      }
+      break;
+
+    default:
+      break;
+  }
+};
+
+/** 批量打印 */
+const batchPrint = () => {
+  if (details.selectionList.length === 0) {
+    return ElMessage({
+      type: 'warning',
+      message: '最少选择一条数据',
+    });
+  }
+};
+
+/** 改单 */
+const editOrder = () => {
+  if (details.selectionList.length === 0) {
+    return ElMessage({
+      type: 'warning',
+      message: '最少选择一条数据',
+    });
+  }
+};
+
+/** 批量作废 */
+const handleBatchDelete = () => {
+  if (details.selectionList.length === 0) {
+    return ElMessage({
+      type: 'warning',
+      message: '最少选择一条数据',
+    });
+  }
+};
+
+/** 批量冻结 */
+const handleBatchFreeze = () => {
+  if (details.selectionList.length === 0) {
+    return ElMessage({
+      type: 'warning',
+      message: '最少选择一条数据',
+    });
+  }
+};
+
+/** 批量恢复 */
+const handleBatchRecover = () => {
+  if (details.selectionList.length === 0) {
+    return ElMessage({
+      type: 'warning',
+      message: '最少选择一条数据',
+    });
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.fo-fl {
+  display: flex;
+  flex-wrap: wrap;
+  zoom: 0.9;
+}
+
+// 日期选择器
+:deep(.el-date-editor.el-input) {
+  height: 100% !important;
+  width: 100% !important;
+}
+
+:deep(.el-range-editor.el-input__wrapper) {
+  height: 100% !important;
+}
+
+.view_row {
+  display: flex;
+  flex-wrap: wrap;
+  border: 1px solid #e6e6e6;
+
+  > div {
+    width: 33.33%;
+    flex: none;
+    border: 1px solid #e6e6e6;
+    box-sizing: border-box;
+    padding: 5px 10px;
+  }
+}
+</style>

src/views/waybill/orderPackageList.vue

@@ -0,0 +1,664 @@
+<template>
+  <basic-container>
+    <div class="avue-crud">
+      <!-- 搜索模块 -->
+      <el-row v-if="!search">
+        <!-- 查询模块 -->
+        <el-form :inline="true" :model="query" class="el-fr-d">
+          <!-- 查询按钮 -->
+          <el-form-item class="el-btn">
+            <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
+            <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+
+      <!-- 控件模块 -->
+      <el-row>
+        <div class="avue-crud__header">
+          <!-- 头部左侧按钮模块 -->
+          <div class="avue-crud__left">
+            <el-button type="primary" icon="Printer" @click="editClientInfo">批量打印</el-button>
+          </div>
+          <!-- 头部右侧按钮模块 -->
+          <div class="avue-crud__right">
+            <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
+            <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
+            <el-button icon="Search" @click="searchHide" circle></el-button>
+          </div>
+        </div>
+      </el-row>
+
+      <!-- 表格 -->
+      <el-row>
+        <!-- 列表模块 -->
+        <tablecmt
+          :columnList="details.packageListColumnList"
+          :tableData="details.packageListData" 
+          :loading="loadingObj.packageListLoading"
+          @inputTxt="inputsc"
+          @timeCheck="timesc"
+          @btnCheck="btnsc"
+          @selectCheck="selectsc"
+          @selection="selectionChange"
+        >
+          <template #default="slotProps">
+            <template v-if="slotProps.scope.column.label === '操作'">
+              <el-button type="text" @click="printOrder(slotProps.scope)"> 包内产品 </el-button>
+              <el-button type="text" @click="printOrder(slotProps.scope)"> 流转节点 </el-button>
+              <el-button type="text" @click="handlePutInStorage(slotProps.scope)">
+                直接入库
+              </el-button>
+              <el-button type="text" @click="printOrder(slotProps.scope)"> 查看二维码 </el-button>
+            </template>
+          </template>
+        </tablecmt>
+      </el-row>
+
+      <!-- 分页模块 -->
+      <el-row class="el-fy">
+        <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
+          <div style="font-size: 14px">勾选数量: {{ selectionList.length }}</div>
+          <!-- 分页模块 -->
+          <el-pagination
+            align="right"
+            background
+            @size-change="sizeChange"
+            @current-change="currentChange"
+            :current-page="page.currentPage"
+            :page-sizes="[30, 50, 80, 120]"
+            :page-size="page.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="page.total"
+          >
+          </el-pagination>
+        </div>
+      </el-row>
+    </div>
+  </basic-container>
+
+  <!-- 修改客户信息 -->
+  <el-dialog
+    class="el-dialog-QRCode"
+    title="修改客户信息"
+    :visible.sync="details.popUpShow.editClientInfoVisible"
+    width="780px"
+    v-model="details.popUpShow.editClientInfoVisible"
+  >
+    <div>
+      <el-divider style="font-size: 28px">修改订单自编号（）客户信息</el-divider>
+    </div>
+
+    <el-form>
+      <el-form-item label="客户姓名">
+        <el-input />
+      </el-form-item>
+
+      <el-form-item label="联系电话">
+        <el-input />
+      </el-form-item>
+
+      <el-form-item label="用户地址">
+        <el-input />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="flex-c-c dialog-footer">
+        <el-button icon="Position" type="primary" @click="printTemplate">提 交</el-button>
+        <el-button icon="Refresh" type="primary" @click="printTemplate">重 置</el-button>
+        <el-button icon="Close" @click="details.popUpShow.editClientInfoVisible = false">
+          取 消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  <!-- 包明细 -->
+  <el-dialog
+    title="包内产品"
+    v-model="details.popUpShow.packageOrderListlVisited"
+    width="80%"
+    :before-close="beforeClose"
+    append-to-body
+    :fullscreen="details.fullscreenObj.packageOrderListlVisited"
+    :show-close="false"
+    class="packageOrderListlVisited"
+  >
+    <template #header="{ close, titleId, titleClass }">
+      <div class="my-header flex-c-sb">
+        <h4 :id="titleId" :class="titleClass">包内产品</h4>
+        <div class="flex-c-c">
+          <!-- 全屏显示按钮 -->
+          <el-button type="text" v-if="!details.fullscreenObj.packageOrderListlVisited">
+            <el-icon class="" @click="handleFullScrean('open', 'packageOrderListlVisited')"
+              ><FullScreen
+            /></el-icon>
+          </el-button>
+          <el-button type="text" v-else>
+            <el-icon class="" @click="handleFullScrean('close', 'packageOrderListlVisited')"
+              ><CopyDocument
+            /></el-icon>
+          </el-button>
+
+          <!-- 弹窗关闭按钮 -->
+          <el-button type="text">
+            <el-icon class="" @click="close"><Close /></el-icon>
+          </el-button>
+        </div>
+      </div>
+    </template>
+    <tablecmt
+      :columnList="details.packageListColumnList"
+      :tableData="details.packageListData"
+      :loading="loadingObj.packageListLoading"
+      @inputTxt="inputsc"
+      @timeCheck="timesc"
+      @btnCheck="btnsc"
+      @selectCheck="selectsc"
+      @selection="selectionChange"
+    >
+      <template #default="slotProps"> </template>
+    </tablecmt>
+
+    <!-- 分页模块 -->
+    <el-pagination
+      align="right"
+      background
+      @size-change="sizeChange"
+      @current-change="currentChange"
+      :current-page="details.packageListPage.currentPage"
+      :page-sizes="[30, 50, 80, 120]"
+      :page-size="details.packageListPage.pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="details.packageListPage.total"
+    >
+    </el-pagination>
+  </el-dialog>
+
+  <!-- 打印二维码 -->
+  <el-dialog
+    class="el-dialog-QRCode"
+    title="二维码"
+    :visible.sync="details.popUpShow.QRCodeVisible"
+    width="780px"
+    v-model="details.popUpShow.QRCodeVisible"
+  >
+    <div>
+      <div v-html="html"></div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <!--    <el-button type="primary" @click="ddd">导 出</el-button>-->
+      <el-button type="primary" @click="printTemplate">打 印</el-button>
+      <el-button @click="details.popUpShow.QRCodeVisible = false">取 消</el-button>
+    </span>
+  </el-dialog>
+
+  <!-- 列表配置显示 -->
+  <edittablehead
+    @setcolum="setnewcolum"
+    @closce="showdrawer"
+    :drawerShow="drawerShow"
+    :columnList="details.packageListColumnList"
+  ></edittablehead>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
+import functions from '@/utils/functions.js';
+import dayjs from 'dayjs';
+import { mapGetters } from 'vuex';
+/** 获取字典 */
+import { getDictionaryBiz } from '@/api/system/dict';
+import { getopenOrderAdvancePageList } from '@/api/waybill/TemporaryStorageList';
+import { showOrderPackgeCode } from '@/api/distribution/distributionStockArticle';
+import { downloadXls, setNodeHeight, getHtmls } from '@/utils/util';
+import { columnList, packageListColumnList } from '@/option/waybill/FreezeOrder';
+import { useRouter } from 'vue-router';
+import print from '@/utils/print';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+// 获取路由实例
+const $router = useRouter();
+
+const details = reactive<any>({
+  /** 是否开启搜索 */
+  search: true,
+  /** 表格搜索条件 */
+  query: {},
+  /** 时间快捷选择设置 */
+  shortcuts: [
+    {
+      text: '最近一周',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+        return [start, end];
+      },
+    },
+    {
+      text: '最近一个月',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+        return [start, end];
+      },
+    },
+    {
+      text: '最近三个月',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+        return [start, end];
+      },
+    },
+  ],
+  /** 时间选择器数据 */
+  stockupDate: [],
+  /** 列表 */
+  columnList,
+  /** 列表数据 */
+  data: [{}],
+  /** 包明细表头 */
+  packageListColumnList,
+  /** 包明细数据 */
+  packageListData: [{}],
+  /** 页面loading */
+  loadingObj: {
+    /** 列表加载loading */
+    list: false,
+    packageListLoading: false,
+  },
+  /** 列表复选框选中的数据 */
+  selectionList: [],
+  /** 是否显示设置表格 */
+  drawerShow: false,
+  /** 分页参数 */
+  page: {
+    currentPage: 1,
+    pageSize: 30,
+    total: 0,
+  },
+  /** 包明细分页参数 */
+  packageListPage: {
+    currentPage: 1,
+    pageSize: 30,
+    total: 0,
+  },
+  /** 弹出层显示 */
+  popUpShow: {
+    /** 包件明细 */
+    packageOrderListlVisited: false,
+    /** 二维码 */
+    QRCodeVisible: false,
+    /** 修改客户信息 */
+    editClientInfoVisible: false,
+  },
+  /** 列表Dom节点 */
+  listNode: '',
+  form: {},
+  /** 全屏 */
+  fullscreenObj: {
+    /** 包明细 */
+    packageOrderListlVisited: false,
+  },
+});
+
+const {
+  search,
+  query,
+  shortcuts,
+  stockupDate,
+  data,
+  loadingObj,
+  selectionList,
+  drawerShow,
+  page,
+  trickleLoadingPage,
+  zeroAdditionalRecordingInfo,
+  popUpShow,
+} = toRefs(details);
+
+/** vuex */
+const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));
+console.log('permission :>> ', permission);
+
+onMounted(() => {
+  const timer = setTimeout(() => {
+    details.listNode = document.querySelector('.maboxhi');
+    console.log('details.listNode :>> ', details.listNode);
+    details.listNode.style.transition = 'all .5s ease-out';
+    console.log('details.listNode :>> ', details.listNode);
+    clearTimeout(timer);
+  }, 100);
+});
+
+/** 请求页面数据 */
+const onLoad = async (page: any, params = {}) => {
+  // 获取暂存单列表
+  details.data = await getopenOrderAdvancePageList(page, { ...details.query, ...params });
+};
+
+onLoad(details.page);
+
+/** 搜索 */
+const searchChange = () => {
+  onLoad(details.page);
+};
+
+/** 清空表单 */
+const searchReset = () => {
+  details.query = {};
+  details.stockupDate = [];
+  details.page.currentPage = 1;
+  onLoad(details.page);
+};
+
+/** 展开列表控件 */
+const showdrawer = (_flag?: boolean) => {
+  details.drawerShow = _flag;
+};
+
+/** 是否开启搜索区 */
+const searchHide = () => {
+  function getWinHight() {
+    var windowHight = 0;
+    if (document.body.clientHeight && document.documentElement.clientHeight) {
+      windowHight =
+        document.body.clientHeight < document.documentElement.clientHeight
+          ? document.body.clientHeight
+          : document.documentElement.clientHeight;
+    } else {
+    }
+    return document.documentElement.clientHeight;
+  }
+  details.search = !details.search;
+  const timer = setTimeout(() => {
+    details.listNode.style.height =
+      getWinHight() - details.listNode.getBoundingClientRect().top - 70 + 'px';
+    clearTimeout(timer);
+  }, 10);
+};
+
+/** 表格表头输入框搜索 */
+const inputsc = (index, row) => {
+  details.query[row.prop] = index;
+  onLoad(details.page);
+};
+
+/** 表格表头时间选择 */
+const timesc = (index, row) => {
+  console.log(index, row);
+  if (!!index) {
+    index = dayjs(index).format('YYYY-MM-DD');
+  }
+  details.query[row.prop] = index;
+  if (!index) {
+    delete details.query[row.prop];
+  }
+  onLoad(details.page);
+};
+
+/** 表格表头输入框搜索 */
+const btnsc = () => {};
+
+/** 表格表头下拉框选择 */
+const selectsc = (index, row) => {
+  details.query[row.prop] = index;
+  if (!index) delete details.query[row.prop];
+  if (row.prop === 'certificateTypeName') {
+    details.query['certificateType'] = index;
+    if (!index) delete details.query['certificateType'];
+  }
+  onLoad(details.page);
+};
+
+/** 表格表头复选框选择 */
+const selectionChange = (list: any) => {
+  details.selectionList = list;
+};
+
+/** 每页数量改变执行的回调 */
+const sizeChange = (pageSize: number) => {
+  details.page.pageSize = pageSize;
+  onLoad(details.page);
+};
+
+/** 页码改变执行的回调 */
+const currentChange = () => {};
+
+/**
+ * 设置列表 -- 固定函数
+ * 弹窗的勾选回调，用于更改头部数组
+ * 固定搭配，只需要更换   columnList
+ *  */
+const setnewcolum = (newarr, headarr, type) => {
+  if (type == 1) {
+    details.columnList = newarr;
+    functions.setStorage(window.location.pathname + 'checkList', headarr);
+  } else if (type == 2) {
+    details.columnList = newarr;
+    functions.setStorage(window.location.pathname + 'flexList', headarr);
+  } else if (type == 3) {
+    details.columnList = newarr;
+    functions.setStorage(window.location.pathname + 'sortlist', headarr);
+  }
+};
+
+/** 弹出层开启前清除数据 */
+const beforeClose = done => {
+  done();
+  details.form = {};
+  details.selectionList = [];
+  details.view = false;
+};
+
+/** 查看包明细 */
+const handleShowPackageOrderList = ({ row }) => {
+  details.popUpShow.packageOrderListlVisited = true;
+
+  nextTick(() => {
+    // 获取弹窗内表格元素节点, 并设置高度
+    const _node: any = document.querySelector('.packageOrderListlVisited .maboxhi');
+    if (!_node) return;
+    _node.style.height = '550px';
+    console.log('_node :>> ', _node);
+  });
+};
+
+/** 订单转运单 */
+const handleCreateOrder = () => {
+  $router.push('/distribution/inventory/CreateOrder');
+};
+
+/** 修改客户信息 */
+const editClientInfo = () => {
+  if (details.selectionList.length !== 0) {
+    return ElMessage({
+      type: 'warning',
+      message: '最少选择一条数据',
+    });
+  }
+  //   editClientInfoVisible;
+  details.popUpShow.editClientInfoVisible = true;
+};
+
+/** 批量删除 */
+const handleDelete = () => {
+  if (details.selectionList.length === 0) {
+    return ElMessage({
+      type: 'warning',
+      message: '最少选择一条数据',
+    });
+  }
+};
+
+/** 批量发车 */
+const handleDepart = () => {
+  if (details.selectionList.length === 0) {
+    return ElMessage({
+      type: 'warning',
+      message: '最少选择一条数据',
+    });
+  }
+};
+
+/** 批量冻结 */
+const handleFreeze = () => {
+  if (details.selectionList.length === 0) {
+    return ElMessage({
+      type: 'warning',
+      message: '最少选择一条数据',
+    });
+  }
+};
+
+/**
+ * 是否开启全屏
+ * @params(_type) 开启或关闭
+ */
+const handleFullScrean = (_type: 'open' | 'close', _name: string) => {
+  let _node = '';
+  if (_name) _node = document.querySelector(`.${_name} .maboxhi`);
+
+  switch (_name) {
+    case 'packageOrderListlVisited':
+      details.fullscreenObj.packageOrderListlVisited =
+        !details.fullscreenObj.packageOrderListlVisited;
+
+      if (_type === 'close') {
+        if (_node) setNodeHeight(_node, '500px');
+      } else {
+        if (_node) setNodeHeight(_node);
+      }
+      break;
+
+    default:
+      break;
+  }
+};
+
+/** 单列查看包条码 */
+const printOrder = ({ row }) => {
+  let qr = {
+    ids: row.id,
+  };
+  showOrderPackgeCode(qr).then(res => {
+    // this.orderPackageCode = res.data
+    if (res.data.code !== 200) return;
+    console.log(res.data);
+    this.html = '';
+    this.html = getHtmls(res.data.data.dataList, res.data.data.templateHtml);
+  });
+};
+
+/** 单列查看包条码 */
+const batchPrintOrder = ({ row }) => {
+  let qr = {
+    ids: row.id,
+  };
+  showOrderPackgeCode(qr).then(res => {
+    // this.orderPackageCode = res.data
+    if (res.data.code !== 200) return;
+    console.log(res.data);
+    this.html = '';
+    this.html = getHtmls(res.data.data.dataList, res.data.data.templateHtml);
+  });
+};
+
+/** 打印包条码 */
+const printTemplate = () => {
+  const orderNodeList = document.querySelectorAll('.el-dialog-QRCode .el-dialog__body>div>div>div');
+  print(orderNodeList);
+};
+
+/** 入库 */
+const handlePutInStorage = row => {
+  ElMessageBox.confirm('确认直接入库吗?', '警告', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+    .then(() => {
+      ElMessage({
+        type: 'success',
+        message: '入库成功',
+      });
+    })
+    .catch(() => {});
+};
+</script>
+
+<style scoped lang="scss">
+.fo-fl {
+  display: flex;
+  flex-wrap: wrap;
+  zoom: 0.9;
+}
+
+// 日期选择器
+:deep(.el-date-editor.el-input) {
+  height: 100% !important;
+  width: 100% !important;
+}
+
+:deep(.el-range-editor.el-input__wrapper) {
+  height: 100% !important;
+}
+
+// 新增行
+.add_row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.add_row_title {
+  text-align: center;
+  margin-bottom: 10px;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+// 统计行
+.statistics_row {
+  margin: 10px 0;
+  font-size: 14px;
+  zoom: 0.9;
+  display: flex;
+
+  > div {
+    margin-right: 20px;
+  }
+}
+
+// 卡片容器
+.crad_container {
+  display: flex;
+
+  .card_container_item {
+    flex: 1;
+    // padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 0 5px #ccc;
+
+    &:first-child {
+      margin-right: 20px;
+    }
+
+    .card_container_item_title {
+      padding: 10px;
+      border-bottom: 1px solid #ccc;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .card_container_item_box {
+      padding: 10px;
+    }
+  }
+}
+</style>