采购-预留：货权预留弹窗优化；

src/views/purchase/PurchaseDemandList/reserved.vue

@@ -1,126 +0,0 @@
-<template>
-  <div class="reserved">
-    <el-dialog
-      :visible.sync="visible"
-      :before-close="handleClose"
-      width="70%"
-    >
-      <el-descriptions class="margin-top" title="货权预留单" :column="3" size="small" border>
-        <el-descriptions-item>
-          <template slot="label">
-            预留单据号
-          </template>
-          {{ resData.code }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-          <template slot="label">
-            来源单据号
-          </template>
-          {{ resData.source }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-          <template slot="label">
-            客户名称
-          </template>
-          {{ resData.customerName }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-          <template slot="label">
-            创建人
-          </template>
-          {{ resData.createByName }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-          <template slot="label">
-            创建人编码
-          </template>
-          {{ resData.createBy }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-          <template slot="label">
-            创建时间
-          </template>
-          {{ resData.createTime }}
-        </el-descriptions-item>
-      </el-descriptions>
-      <el-table style="margin-top: 50px" :data="items" @row-click="rowClick" height="300px">
-        <el-table-column show-overflow-tooltip prop="materialCode" label="物料编码" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="materialName" label="物料名称" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="unitName" label="单位" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="warehouseName" label="仓库" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="allocationName" label="货位" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="reservedQty" label="预留数量" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="totalIn" label="累计入库数量" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="qty" label="可用量" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="usedQty" label="已用量" width="150"></el-table-column>
-      </el-table>
-      <el-table style="margin-top: 50px" :data="showHistoryItems" height="300px">
-        <el-table-column show-overflow-tooltip prop="materialCode" label="物料编码" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="materialName" label="物料名称" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="unitName" label="单位" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="warehouseName" label="仓库" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip label="操作单据" align="center" prop="operateBill"  width="150">
-          <template slot-scope="scope">
-            <dict-tag :options="dict.type.ow_operatetype" :value="scope.row.operateBill"/>
-          </template>
-        </el-table-column>
-        <el-table-column show-overflow-tooltip prop="operateBillcode" label="操作单据编码" width="200"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="operateBillitem" label="操作明细行号" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="allotQty" label="操作数量" width="150">
-          <template slot-scope="scope">
-            {{scope.row.allotQty > 0 ? "+" + scope.row.allotQty : scope.row.allotQty}}
-          </template>
-        </el-table-column>
-        <el-table-column show-overflow-tooltip prop="createTime" label="操作时间" width="150"></el-table-column>
-      </el-table>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import {getDetailBySource} from '@/api/purchase/ownership.js'
-
-export default {
-  dicts: ['ow_operatetype'],
-  props: {
-    isVisible: {
-      type: Boolean,
-      default: false
-    },
-    info: {
-      type: Object,
-      default: null
-    }
-  },
-  mounted() {
-    this.getDetails(this.info)
-  },
-  data() {
-    return {
-      visible:this.isVisible,
-      resData: {},
-      items: [],
-      historyItems: [],
-      showHistoryItems: [],
-    }
-  },
-  methods: {
-    getDetails(row) {
-      getDetailBySource(row.code).then(res => {
-        if (res.code === 200) {
-          this.resData = res.data;
-          this.items = res.data.stMaterialOwnershipItemList;
-          this.historyItems = res.data.stMaterialOwnershipHistoryList;
-          this.showHistoryItems = this.historyItems.filter(ele => ele.ownerId == this.items[0].id);
-        }
-      })
-    },
-    handleClose() {
-      this.$emit('updateReserved', false)
-    },
-    rowClick(row){
-      this.showHistoryItems = this.historyItems.filter(ele => ele.ownerId == row.id);
-    }
-  }
-}
-</script>

src/views/purchase/PurchaseDemandList/reserved/columns.js

@@ -69,51 +69,43 @@ export default function useColumns() {
     },
     {
       item: {
-        key: "reservedQty",
-        title: "预留数量",
-      },
-      attr: {}
-    },
-    {
-      item: {
-        key: "totalIn",
-        title: "累计入库数量",
+        key: "warehouseName",
+        title: "仓库",
       },
       attr: {}
     },
     {
       item: {
-        key: "qty",
-        title: "可用量",
+        key: "allocationName",
+        title: "货位",
       },
       attr: {}
     },
     {
       item: {
-        key: "usedQty",
-        title: "已用量",
+        key: "reservedQty",
+        title: "预留数量",
       },
       attr: {}
     },
     {
       item: {
-        key: "warehouseName",
-        title: "仓库名称",
+        key: "totalIn",
+        title: "累计入库数量",
       },
       attr: {}
     },
     {
       item: {
-        key: "allocationName",
-        title: "货位名称",
+        key: "qty",
+        title: "可用量",
       },
       attr: {}
     },
     {
       item: {
-        key: "createTime",
-        title: "创建时间",
-        width: 200,
+        key: "usedQty",
+        title: "已用量",
       },
       attr: {}
     },
@@ -151,6 +143,13 @@ export default function useColumns() {
     },
     {
       item: {
+        key: "warehouseName",
+        title: "仓库",
+      },
+      attr: {}
+    },
+    {
+      item: {
         key: "productBatchNum",
         title: "批号",
         width: 100,

src/views/purchase/transferOrder/add.vue

@@ -1389,7 +1389,7 @@
 </template>
 
 <script>
-import Reserved from './reserved.vue'
+import Reserved from './reserved/index.vue';
 import { toOA } from "@/api/purchase/purchaseDemand.js";
 import {
   addOrder,

src/views/purchase/transferOrder/reserved.vue

@@ -1,125 +0,0 @@
-<template>
-  <div class="reserved">
-    <el-dialog
-      :visible.sync="visible"
-      :before-close="handleClose"
-      width="70%"
-    >
-      <el-descriptions class="margin-top" title="货权预留单" :column="3" size="small" border>
-        <el-descriptions-item>
-          <template slot="label">
-            预留单据号
-          </template>
-          {{ resData.code }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-          <template slot="label">
-            来源单据号
-          </template>
-          {{ resData.source }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-          <template slot="label">
-            客户名称
-          </template>
-          {{ resData.customerName }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-          <template slot="label">
-            创建人
-          </template>
-          {{ resData.createByName }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-          <template slot="label">
-            创建人编码
-          </template>
-          {{ resData.createBy }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-          <template slot="label">
-            创建时间
-          </template>
-          {{ resData.createTime }}
-        </el-descriptions-item>
-      </el-descriptions>
-      <el-table style="margin-top: 50px" :data="items" @row-click="rowClick" height="300px">
-        <el-table-column show-overflow-tooltip prop="materialCode" label="物料编码" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="materialName" label="物料名称" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="unitName" label="单位名称" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="warehouseName" label="仓库" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="allocationName" label="货位" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="reservedQty" label="预留数量" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="totalIn" label="累计入库数量" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="qty" label="可用量" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="usedQty" label="已用量" width="150"></el-table-column>
-      </el-table>
-      <el-table style="margin-top: 50px" :data="showHistoryItems" height="300px">
-        <el-table-column show-overflow-tooltip prop="materialCode" label="物料编码" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="materialName" label="物料名称" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="unitName" label="单位名称" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="warehouseName" label="仓库" width="150"></el-table-column>
-        <el-table-column label="操作单据" align="center" prop="operateBill"  width="150">
-          <template slot-scope="scope">
-            <dict-tag :options="dict.type.ow_operatetype" :value="scope.row.operateBill"/>
-          </template>
-        </el-table-column>
-        <el-table-column show-overflow-tooltip prop="operateBillcode" label="操作单据编码" width="200"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="operateBillitem" label="操作明细行号" width="150"></el-table-column>
-        <el-table-column show-overflow-tooltip prop="allotQty" label="操作数量" width="150">
-          <template slot-scope="scope">
-            {{scope.row.allotQty > 0 ? "+" + scope.row.allotQty : scope.row.allotQty}}
-          </template>
-        </el-table-column>
-        <el-table-column show-overflow-tooltip prop="createTime" label="操作时间" width="150"></el-table-column>
-      </el-table>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import {getDetailBySource} from '@/api/purchase/ownership.js'
-
-export default {
-  props: {
-    isVisible: {
-      type: Boolean,
-      default: false
-    },
-    info: {
-      type: Object,
-      default: null
-    }
-  },
-  mounted() {
-    this.getDetails(this.info)
-  },
-  data() {
-    return {
-      visible:this.isVisible,
-      resData: {},
-      items: [],
-      historyItems: [],
-      showHistoryItems: [],
-    }
-  },
-  methods: {
-    getDetails(row) {
-      getDetailBySource(row.code).then(res => {
-        if (res.code === 200) {
-          this.resData = res.data;
-          this.items = res.data.stMaterialOwnershipItemList;
-          this.historyItems = res.data.stMaterialOwnershipHistoryList;
-          this.showHistoryItems = this.historyItems.filter(ele => ele.ownerId == this.items[0].id);
-        }
-      })
-    },
-    handleClose() {
-      this.$emit('updateReserved', false)
-    },
-    rowClick(row){
-      this.showHistoryItems = this.historyItems.filter(ele => ele.ownerId == row.id);
-    }
-  }
-}
-</script>

src/views/purchase/transferOrder/reserved/columns.js

@@ -0,0 +1,211 @@
+export default function useColumns() {
+
+  const desColumns = [
+    {
+      item: {
+        key: "code",
+        title: "预留单据号",
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "source",
+        title: "来源单据号",
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "customerName",
+        title: "客户名称",
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "createByName",
+        title: "创建人",
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "createBy",
+        title: "创建人编码",
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "createTime",
+        title: "创建时间",
+      },
+      attr: {}
+    },
+  ];
+
+  const itemsColumns = [
+    {
+      item: {
+        key: "materialCode",
+        title: "物料编码",
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "materialName",
+        title: "物料名称",
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "unitName",
+        title: "单位名称",
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "warehouseName",
+        title: "仓库",
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "allocationName",
+        title: "货位",
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "reservedQty",
+        title: "预留数量",
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "totalIn",
+        title: "累计入库数量",
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "qty",
+        title: "可用量",
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "usedQty",
+        title: "已用量",
+      },
+      attr: {}
+    },
+  ].map(({ item, attr }) => ({
+    item: {
+      ...item,
+      width: item.width || 150
+    },
+    attr,
+  }));
+
+  const historyColumns = [
+    {
+      item: {
+        key: "materialCode",
+        title: "物料编码",
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "materialName",
+        title: "物料名称",
+        width: 200,
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "unitName",
+        title: "单位",
+        width: 100,
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "warehouseName",
+        title: "仓库",
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "productBatchNum",
+        title: "批号",
+        width: 100,
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "operateBill",
+        title: "操作单据",
+        width: 100,
+      },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "ow_operatetype",
+      }
+    },
+    {
+      item: {
+        key: "operateBillcode",
+        title: "操作单据编码",
+        width: 200,
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "operateBillitem",
+        title: "操作明细行号",
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "allotQty",
+        title: "操作数量",
+      },
+      attr: {}
+    },
+    {
+      item: {
+        key: "createTime",
+        title: "操作时间",
+        width: 200,
+      },
+      attr: {}
+    },
+
+  ].map(({ item, attr }) => ({
+    item: {
+      ...item,
+      width: item.width || 150
+    },
+    attr,
+  }));
+
+
+  return { desColumns, itemsColumns, historyColumns }
+}

src/views/purchase/transferOrder/reserved/index.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="reserved">
+    <el-dialog :visible.sync="visible" :before-close="handleClose" width="70%">
+      <el-descriptions
+        class="margin-top"
+        title="货权预留单"
+        :column="3"
+        size="small"
+        border
+      >
+        <el-descriptions-item v-for="({ item }, index) in desColumns">
+          <template slot="label"> {{ item.title }} </template>
+          {{ resData[item.key] }}
+        </el-descriptions-item>
+      </el-descriptions>
+
+      <el-super-ux-table
+        v-model="items"
+        :size="size"
+        :columns="itemsColumns"
+        @row-click="rowClick"
+        height="300px"
+        style="margin-top: 20px"
+      ></el-super-ux-table>
+      <el-super-ux-table
+        v-model="showHistoryItems"
+        :size="size"
+        :dict="dict"
+        :columns="historyColumns"
+        height="300px"
+        style="margin-top: 20px"
+      >
+        <template slot="allotQty" slot-scope="scope">
+          {{
+            scope.row.allotQty > 0
+              ? "+" + scope.row.allotQty
+              : scope.row.allotQty
+          }}
+        </template>
+      </el-super-ux-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getDetailBySource } from "@/api/purchase/ownership.js";
+import useColumns from "./columns";
+import { dicts } from "../dicts";
+export default {
+  dicts: [...dicts],
+  components: {
+    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
+  },
+  props: {
+    isVisible: {
+      type: Boolean,
+      default: false,
+    },
+    info: {
+      type: Object,
+      default: null,
+    },
+  },
+  mounted() {
+    this.getDetails(this.info);
+  },
+  data() {
+    const { desColumns, itemsColumns, historyColumns } = useColumns();
+    return {
+      size: "mini",
+      desColumns: desColumns,
+      itemsColumns: itemsColumns,
+      historyColumns: historyColumns,
+      visible: this.isVisible,
+      resData: {},
+      items: [],
+      historyItems: [],
+      showHistoryItems: [],
+    };
+  },
+  methods: {
+    getDetails(row) {
+      getDetailBySource(row.code).then((res) => {
+        if (res.code === 200) {
+          this.resData = res.data || [];
+          this.items = res.data ? res.data.stMaterialOwnershipItemList : [];
+          this.historyItems = res.data
+            ? res.data.stMaterialOwnershipHistoryList
+            : [];
+          this.showHistoryItems = this.historyItems.filter(
+            (ele) => ele.ownerId == this.items[0].id
+          );
+        }
+      });
+    },
+    handleClose() {
+      this.$emit("updateReserved", false);
+    },
+    rowClick(row) {
+      this.showHistoryItems = this.historyItems.filter(
+        (ele) => ele.ownerId == row.id
+      );
+    },
+  },
+};
+</script>
+
+<style scoped>
+>>> .el-dialog__body {
+  padding: 5px 15px;
+}
+</style>