新增首页详情

src/api/wel/index.js

@@ -13,6 +13,19 @@ export const postAllocationData = data => {
   });
 };
 
+/**
+ * 库位数据 -- 对比数据
+ * @param {Object} data
+ * @returns
+ */
+export const postOpenOrderDataByWarehouseId = data => {
+  return request({
+    url: '/api/logpm-report/warehouseIndex/openOrderDataByWarehouseId',
+    method: 'post',
+    data,
+  });
+};
+
 /**
  * 当前在库数据
  * @param {Object} data

src/components/tablecmt/tablecmt.vue

@@ -381,6 +381,8 @@ const isHaveSelection = ref(false);
 let selectarr = ref([]);
 /** 设置每行颜色 */
 const tableRowClassName = ({ row, rowIndex }: { row: TableDataType; rowIndex: number }) => {
+  if (props.tableData.length === selectarr.value.length) return 'table-SelectedRow-bgcolor';
+
   for (let i = 0; i < selectarr.value.length; i++) {
     if (selectarr.value[i] === row) return 'table-SelectedRow-bgcolor';
   }
@@ -527,10 +529,10 @@ const handleSelectionChange = (param: TableDataType[]) => {
         selectCount.value[i].value = 0;
       }
 
-      if (selectarr.value.length === 0) return;
+      if (param.length === 0) return;
 
-      for (let index = 0; index < selectarr.value.length; index++) {
-        const val = selectarr.value[index];
+      for (let index = 0; index < param.length; index++) {
+        const val = param[index];
 
         for (let j = 0; j < selectCount.value.length; j++) {
           const item = selectCount.value[j];
@@ -714,10 +716,10 @@ const handleWidthChange = (newWidth, oldWidth, column, event) => {
 
   if (props.isSave) return;
 
-  postSaveTableSeting({
-    tableKey: $route.path + props.columnListName,
-    tableSetCongig: JSON.stringify(props.columnList),
-  });
+  // postSaveTableSeting({
+  //   tableKey: $route.path + props.columnListName,
+  //   tableSetCongig: JSON.stringify(props.columnList),
+  // });
 };
 
 let watchTimer;
@@ -725,7 +727,6 @@ watch(
   () => props.columnList,
   () => {
     if (watchTimer) clearTimeout(watchTimer);
-
     watchTimer = setTimeout(() => {
       for (let i = 0; i < props.columnList.length; i++) {
         const val = props.columnList[i];
@@ -830,21 +831,6 @@ defineExpose({ handleCheckSelect, handleClearSelect });
 .el-table .el-input__inner {
   height: 23px !important;
 }
-// .el-checkbox__input.is-checked .el-checkbox__inner{
-//   background-color: #D3832A !important;
-//   border-color: #D3832A !important;
-// }
-// .is .el-checkbox__input.is-checked .el-checkbox__inner{
-//   background-color: #D3832A !important;
-//   border-color: #D3832A !important;
-// }
-// .is-checked .el-checkbox__inner:hover{
-//   border-color: #D3832A !important;
-// }
-// .el-checkbox__input.is-indeterminate .el-checkbox__inner{
-//   background-color: #D3832A !important;
-//   border-color: #D3832A !important;
-// }
 .el-table .el-table__cell {
   padding: 0px !important;
 }
@@ -864,10 +850,8 @@ defineExpose({ handleCheckSelect, handleClearSelect });
   border-color: #d3832a !important;
   font-size: 12px !important;
 }
-.table-SelectedRow-bgcolor {
-  > td {
-    background-color: #f7e8d7 !important;
-  }
+.el-table .table-SelectedRow-bgcolor {
+  background-color: #f7e8d7 !important;
 }
 .colors {
   color: #409eff !important;
@@ -902,9 +886,6 @@ defineExpose({ handleCheckSelect, handleClearSelect });
 .el-table .el-popper {
   max-width: 20% !important;
 }
-.el-input {
-  // width: 200px !important;
-}
 
 .el-table__footer {
   tr {

src/option/distribution/TripartiteTransfer.js

@@ -251,7 +251,7 @@ export const columnList = [
     label: '操作',
     type: 6,
     values: '',
-    width: '200',
+    width: '300',
     checkarr: [],
     fixed: 'right',
     sortable: false,

src/option/wel/index.js

@@ -0,0 +1,94 @@
+/** 开单数据 */
+export const openOrderColumn = [
+  {
+    prop: '',
+    label: '复选框',
+    type: 0,
+    width: 55,
+    fixed: false,
+  },
+  {
+    prop: '',
+    label: '序号',
+    type: 12,
+    values: '',
+    width: 55,
+    fixed: false,
+  },
+  {
+    prop: 'warehouseName',
+    label: '仓库',
+    type: 2,
+    values: '',
+    width: '150',
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'totalNum',
+    label: '总单数',
+    type: 2,
+    values: '',
+    width: '150',
+    fixed: false,
+    sortable: true,
+    head: false,
+    isshowSummary: true,
+  },
+  {
+    prop: 'totalCount',
+    label: '总件数',
+    type: 2,
+    values: '',
+    width: '150',
+    fixed: false,
+    sortable: true,
+    head: false,
+    isshowSummary: true,
+  },
+  {
+    prop: 'monthNum',
+    label: '月单数',
+    type: 2,
+    values: '',
+    width: '150',
+    fixed: false,
+    sortable: true,
+    head: false,
+    isshowSummary: true,
+  },
+  {
+    prop: 'monthCount',
+    label: '月件数',
+    type: 2,
+    values: '',
+    width: '150',
+    fixed: false,
+    sortable: true,
+    head: false,
+    isshowSummary: true,
+  },
+  {
+    prop: 'dayNum',
+    label: '日单数',
+    type: 2,
+    values: '',
+    width: '150',
+    fixed: false,
+    sortable: true,
+    head: false,
+    isshowSummary: true,
+  },
+  {
+    prop: 'dayCount',
+    label: '日件数',
+    type: 2,
+    values: '',
+    width: '150',
+    fixed: false,
+    sortable: true,
+    head: false,
+    isshowSummary: true,
+  },
+];

src/views/wel/Tip.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="tip_container">
+    <slot></slot>
+
+    <div class="mask" v-if="isShow">
+      <tablecmt
+        style="max-height: 500px"
+        :columnList="columnList"
+        :tableData="tableData"
+        :loading="loading"
+        :isInitHeigt="false"
+      ></tablecmt>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue';
+
+const props = defineProps({
+  /** 是否显示 */
+  isShow: {
+    type: Boolean,
+    default: true,
+  },
+
+  /** 是否在消失后保留dom */
+  isDistory: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
+
+  /** 表格表头 */
+  columnList: {
+    type: Array,
+    required: true,
+  },
+
+  /** 表格数据 */
+  tableData: {
+    type: Array,
+    required: true,
+  },
+
+  /** 请求loading */
+  loading: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+
+const details = reactive({});
+</script>
+
+<style lang="scss" scoped>
+.tip_container {
+  position: relative;
+}
+
+.mask {
+  position: absolute;
+  top: calc(100% + 10px);
+  width: 50vw;
+  background-color: #fff;
+  padding: 10px;
+  box-shadow: 5px 5px 5px 5px #172e6080;
+  border-radius: 5px;
+  //   border: 1px solid var(--el-color-primary);
+}
+</style>

src/views/wel/index.vue

@@ -7,12 +7,27 @@
       <!-- 开单数据 && 开单收入 -->
       <div class="flex mb10 row_first">
         <!-- 开单数据 -->
+
         <div class="mr10 box1 view_box" v-loading="details.loadingObj.openOrderData">
           <!-- 标题 -->
           <div class="align_center mb20">
             <img class="mr10 img_13pt" src="@/static/icon_data.png" alt="" />
 
             <div class="title">开单数据</div>
+
+            <!-- 详情 -->
+            <div class="flex-c-c detailsBtn ml20">
+              <el-icon>
+                <DataAnalysis />
+              </el-icon>
+
+              <span
+                style="margin-left: 5px"
+                @click="() => handleDetails('openOrderColumn', '开单数据详情')"
+              >
+                详情
+              </span>
+            </div>
           </div>
 
           <!-- 数据 -->
@@ -263,6 +278,20 @@
             <img class="mr10 img_13pt" src="@/static/icon_data.png" alt="" />
 
             <div class="title">当前在库数据</div>
+
+            <!-- 详情 -->
+            <!-- <div class="flex-c-c detailsBtn ml20">
+              <el-icon>
+                <DataAnalysis />
+              </el-icon>
+
+              <span
+                style="margin-left: 5px"
+                @click="() => handleDetails('openOrderColumn', '开单数据详情')"
+              >
+                详情
+              </span>
+            </div> -->
           </div>
 
           <!-- 数据 -->
@@ -355,6 +384,20 @@
             <img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" />
 
             <div class="title">库位数据</div>
+
+            <!-- 详情 -->
+            <!-- <div class="flex-c-c detailsBtn ml20">
+              <el-icon>
+                <DataAnalysis />
+              </el-icon>
+
+              <span
+                style="margin-left: 5px"
+                @click="() => handleDetails('openOrderColumn', '开单数据详情')"
+              >
+                详情
+              </span>
+            </div> -->
           </div>
 
           <div class="border data_container pd10 flex">
@@ -979,6 +1022,46 @@
           </div>
         </div>
       </div>
+
+      <!-- 开单数据 -->
+      <el-dialog
+        title="开单数据"
+        v-model="details.popUpShow.isShow"
+        width="80%"
+        :append-to-body="false"
+        :destroy-on-close="false"
+        draggable
+      >
+        <!-- 导出 -->
+        <div class="flex-c-sb mb10">
+          <div></div>
+          <el-button icon="Download" type="primary" @click="handleExport"> 导出 </el-button>
+        </div>
+
+        <!-- 表格 -->
+        <tablecmt
+          style="height: 500px"
+          :columnList="details.columnList"
+          :tableData="details.renderData"
+          :loading="details.loadingObj.loading"
+          @inputTxt="
+            (value, col) => {
+              handleInputQuery(value, col, details.query.inputQuery, true);
+              details.renderData = handleFilterData(details.tableData, [], details.query);
+            }
+          "
+          :isInitHeigt="false"
+        ></tablecmt>
+
+        <tablecmt
+          ref="exportColumnListNode"
+          v-show="false"
+          style="height: 500px"
+          :columnList="details.exportColumnList"
+          :tableData="details.tableData"
+          :isInitHeigt="false"
+        ></tablecmt>
+      </el-dialog>
     </div>
   </template>
 
@@ -998,9 +1081,16 @@
   </template>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, computed, reactive } from 'vue';
-import { computeNumber } from '@/utils/util.js';
+import { ref, onMounted, computed, reactive, defineComponent, toRefs, toRef } from 'vue';
+import {
+  computeNumber,
+  deepClone,
+  getObjType,
+  handleFilterData,
+  handleInputQuery,
+} from '@/utils/util.js';
 import { getStore } from '@/utils/store';
+import { dateNow } from '@/utils/date';
 
 import {
   postAllocationData,
@@ -1012,9 +1102,22 @@ import {
   postUnloadAbnormalData,
   postDeliveryData,
   postSignforData,
+  postOpenOrderDataByWarehouseId,
 } from '@/api/wel/index';
+import { exportExcelByDom } from '@/utils/export';
+
+import { openOrderColumn } from '@/option/wel/index';
+
+// 弹窗组件
+import Tip from './Tip.vue';
+
+// 注册组件
+defineComponent([Tip]);
+
+const exportColumnListNode = ref();
 
 const details = reactive({
+  title: '',
   /** 开单数据 */
   openOrderDataInfo: {
     /** 开单 -- 当日 -- 单 */
@@ -1112,11 +1215,31 @@ const details = reactive({
     deliveryData: false,
     /** 签收数据 */
     signforData: false,
+    /** 弹窗loading */
+    loading: false,
   },
   /** 1 -- 公司首页, 2 -- 数据看板 */
   pageType: 1,
+  /** 表头 */
+  detailOption: {
+    // 开单数据
+    openOrderColumn: deepClone(openOrderColumn),
+  },
+  columnList: [],
+  exportColumnList: [],
+  tableData: [],
+  renderData: [],
+  /** 搜索 */
+  query: {
+    inputQuery: {},
+  },
+  popUpShow: {
+    isShow: false,
+  },
 });
 
+const { detailOption } = toRefs(details);
+
 const info = localStorage.getItem('TWMS-userInfo');
 
 const _userInfo = info ? JSON.parse(info) : {};
@@ -1419,6 +1542,49 @@ const billSignforData = computed(() => {
 
   return _obj;
 });
+
+/** 请求详情 */
+const handleDetails = async (type, title) => {
+  details.popUpShow.isShow = true;
+  details.loadingObj.loading = true;
+  details.title = title;
+  details.columnList = details.detailOption[type];
+  const _arr = [];
+  const _whiteArr = ['操作', '序号', '复选框'];
+  for (let i = 0; i < details.columnList.length; i++) {
+    const val = { ...details.columnList[i] };
+    if (_whiteArr.includes(val.label)) continue;
+    val.type = 30;
+    _arr.push(val);
+  }
+  details.exportColumnList = _arr;
+
+  try {
+    let res: any = { data: {} };
+    switch (type) {
+      // 开单数据
+      case 'openOrderColumn':
+        res = await postOpenOrderDataByWarehouseId({});
+        break;
+
+      default:
+        break;
+    }
+    const { code, data } = res.data;
+    if (code !== 200 || getObjType(data) !== 'array') return;
+    details.tableData = data;
+    details.renderData = data;
+  } catch (error) {
+    console.log('error :>> ', error);
+  } finally {
+    details.loadingObj.loading = false;
+  }
+};
+
+/** 导出 */
+const handleExport = () => {
+  exportExcelByDom(exportColumnListNode.value.$el, `${details.title} - ${dateNow()}.xlsx`);
+};
 </script>
 
 <style scoped lang="scss">
@@ -1426,6 +1592,16 @@ const billSignforData = computed(() => {
   font-size: 14px;
   background: #f5f5f6;
   padding: 0 5px;
+  position: relative;
+
+  // 弹窗
+  :deep(.el-overlay) {
+    position: absolute;
+  }
+
+  :deep(.el-overlay-dialog) {
+    position: absolute;
+  }
 }
 
 .view_box {
@@ -1454,6 +1630,18 @@ const billSignforData = computed(() => {
   padding: 0 10px;
 }
 
+.detailsBtn {
+  font-size: 0.9rem;
+  color: var(--el-color-primary);
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  &:hover {
+    color: #2693ff;
+  }
+}
+
 .align_center {
   display: flex;
   align-items: center;