采购预留-检索、列表组件优化

src/views/purchase/ownership/columns.js

@@ -0,0 +1,73 @@
+export default function useColumns() {
+  const SearchColumns = [
+    {
+      item: { key: "source", title: "来源单据" },
+      attr: {
+        is: "el-input",
+      }
+    },
+    {
+      item: { key: "customerName", title: "客户" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "CUSTOMER_PARAM",
+        valueKey: "name",
+        dataMapping: {
+          customer: 'id',
+        }
+      }
+    },
+    {
+      item: { key: "materialName", title: "物料" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "MATERIAL_PARAM",
+        valueKey: "name",
+        dataMapping: {
+          material: 'id',
+        }
+      }
+    },
+  ];
+
+  const TableColumns = [
+    {
+      item: { key: "source", title: "来源单据" },
+      attr: {}
+    },
+    {
+      item: { key: "puCode", title: "集采编号" },
+      attr: {}
+    },
+    {
+      item: { key: "customerName", title: "客户" },
+      attr: {}
+    },
+    {
+      item: { key: "materialCode", title: "物料编码" },
+      attr: {}
+    },
+    {
+      item: { key: "materialName", title: "物料" },
+      attr: {}
+    },
+    {
+      item: { key: "qty", title: "可用量" },
+      attr: {}
+    },
+    {
+      item: { key: "usedQty", title: "已用量" },
+      attr: {}
+    },
+    {
+      item: { key: "reservedQty", title: "预留数量" },
+      attr: {}
+    },
+    {
+      item: { key: "createTime", title: "创建时间" },
+      attr: {}
+    },
+  ];
+
+  return { SearchColumns, TableColumns }
+}

src/views/purchase/ownership/dicts.js

@@ -0,0 +1,14 @@
+import { initDicts } from "@/utils/init.js";
+const modules = require.context("./", true, /columns.js$/);
+const columns = [];
+modules.keys().forEach((fileName) => {
+  const data = modules(fileName).default();
+  for (const key in data) {
+    if (key === "TabColumns") {
+      columns.push(...data[key].map((item) => item.TableColumns).flat());
+    } else {
+      columns.push(...data[key]);
+    }
+  }
+});
+export const dicts = initDicts(columns);

src/views/purchase/ownership/index copy.vue

@@ -0,0 +1,369 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :size="size"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-row>
+        <el-col :span="18">
+          <el-form-item label="来源单据">
+            <el-input
+              v-model="queryParams.source"
+              clearable
+              @keyup.enter.native="btnQuery"
+            />
+          </el-form-item>
+          <el-form-item label="客户">
+            <DrPopoverSelectV2
+              :size="size"
+              v-model="queryParams.customerName"
+              valueKey="name"
+              referName="CUSTOMER_PARAM"
+              :dataMapping="{
+                customer: 'id',
+                customerName: 'name',
+              }"
+              :source.sync="queryParams"
+            >
+            </DrPopoverSelectV2>
+          </el-form-item>
+          <el-form-item label="物料">
+            <DrPopoverSelectV2
+              :size="size"
+              v-model="queryParams.materialName"
+              valueKey="name"
+              referName="MATERIAL_PARAM"
+              :dataMapping="{
+                material: 'id',
+                materialName: 'name',
+              }"
+              :source.sync="queryParams"
+            >
+            </DrPopoverSelectV2>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item style="float: right">
+            <el-button
+              type="primary"
+              icon="el-icon-search"
+              :size="size"
+              @click="btnQuery"
+              >搜索</el-button
+            >
+            <el-button
+              icon="el-icon-refresh"
+              :size="size"
+              @click="btnResetQuery"
+              >重置</el-button
+            >
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <el-table :size="size" v-loading="loading" :data="list" height="500px">
+      <el-table-column
+        label="序号"
+        type="index"
+        width="50"
+        align="center"
+        fixed
+      />
+      <el-table-column
+        show-overflow-tooltip
+        width="200"
+        label="来源单据"
+        align="center"
+        prop="source"
+      />
+      <el-table-column
+        show-overflow-tooltip
+        width="150"
+        label="集采编号"
+        align="center"
+        prop="puCode"
+      />
+      <el-table-column
+        show-overflow-tooltip
+        width="200"
+        label="客户"
+        align="center"
+        prop="customerName"
+      />
+      <el-table-column
+        show-overflow-tooltip
+        width="150"
+        label="物料编码"
+        align="center"
+        prop="materialCode"
+      />
+      <el-table-column
+        show-overflow-tooltip
+        width="300"
+        label="物料"
+        align="center"
+        prop="materialName"
+      />
+      <el-table-column
+        show-overflow-tooltip
+        width="150"
+        label="可用量"
+        align="center"
+        prop="qty"
+      />
+      <el-table-column
+        show-overflow-tooltip
+        width="150"
+        label="已用量"
+        align="center"
+        prop="usedQty"
+      />
+      <el-table-column
+        show-overflow-tooltip
+        width="150"
+        label="预留数量"
+        align="center"
+        prop="reservedQty"
+      />
+      <el-table-column
+        show-overflow-tooltip
+        width="150"
+        label="创建时间"
+        align="center"
+        prop="createTime"
+      />
+      <el-table-column
+        width="250"
+        label="操作"
+        fixed="right"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            :size="size"
+            type="text"
+            icon="el-icon-edit"
+            @click="btnUpdate(scope.row)"
+            >修改</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="paginationClass">
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+
+    <!-- 添加或修改任务对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
+      <el-form :size="size" ref="form" :model="form" label-width="80px">
+        <el-descriptions :column="1">
+          <el-descriptions-item label="单据来源">{{
+            form.source
+          }}</el-descriptions-item>
+          <el-descriptions-item label="集采编号">{{
+            form.puCode
+          }}</el-descriptions-item>
+          <el-descriptions-item label="创建时间">{{
+            form.createTime
+          }}</el-descriptions-item>
+          <el-descriptions-item label="客户">{{
+            form.customerName
+          }}</el-descriptions-item>
+          <el-descriptions-item label="物料编码">{{
+            form.materialCode
+          }}</el-descriptions-item>
+          <el-descriptions-item label="物料" span="2">{{
+            form.materialName
+          }}</el-descriptions-item>
+          <el-descriptions-item label="已用量">{{
+            form.usedQty
+          }}</el-descriptions-item>
+          <el-descriptions-item label="预留数量">{{
+            form.reservedQty
+          }}</el-descriptions-item>
+        </el-descriptions>
+        <el-form-item label="可用量">
+          <el-input
+            type="number"
+            min="0"
+            :size="size"
+            v-model="form.qty"
+            @input="useFormQtyChange"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button :size="size" type="primary" @click="submitForm"
+          >确 定</el-button
+        >
+        <el-button :size="size" @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { materialList, getDetail, update } from "@/api/purchase/ownership.js";
+
+export default {
+  data() {
+    return {
+      size: "mini",
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 总条数
+      total: 0,
+      // 列表数据
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        source: null,
+        customer: null,
+        customerName: null,
+        material: null,
+        materialName: null,
+      },
+      // 表单参数
+      form: {},
+      //oldQty
+      oldQty: 0,
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询任务列表 */
+    getList() {
+      this.loading = true;
+      materialList(this.queryParams).then((response) => {
+        this.list = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        id: null,
+        ownerId: null,
+        material: null,
+        materialName: null,
+        unit: null,
+        unitName: null,
+        reservedQty: null,
+        reservedPeriod: null,
+        warehouse: null,
+        warehouseName: null,
+        allocation: null,
+        allocationName: null,
+        qty: null,
+        usedQty: null,
+        revision: null,
+        delFlag: null,
+        demandItemId: null,
+        materialCode: null,
+        source: null,
+        customerName: null,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    btnQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    btnResetQuery() {
+      // this.resetForm("queryForm");
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        source: null,
+        customer: null,
+        customerName: null,
+        material: null,
+        materialName: null,
+      };
+      this.btnQuery();
+    },
+    /** 修改按钮操作 */
+    btnUpdate(row) {
+      this.oldQty = null;
+      this.reset();
+      this.form.source = row.source;
+      this.form.customerName = row.customerName;
+      const id = row.id || this.ids;
+      getDetail(id).then((response) => {
+        this.form = { ...this.form, ...response.data };
+        this.open = true;
+        this.title = "修改预留";
+        this.oldQty = this.form.qty || 0;
+      });
+    },
+    /** 提交表单 */
+    submitForm() {
+      update(this.form).then((response) => {
+        this.$modal.msgSuccess("修改成功");
+        this.open = false;
+        this.getList();
+      });
+    },
+    //值改变后
+    useFormQtyChange(val) {
+      let cha = val - this.oldQty;
+      this.form.usedQty = this.form.usedQty - cha;
+      this.oldQty = val;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.btn_grooup {
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
+.paginationClass {
+  z-index: 500;
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  width: 100%;
+  line-height: var(--footer-height);
+  color: #fff;
+}
+</style>

src/views/purchase/ownership/index.vue

@@ -1,95 +1,47 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" label-width="68px">
-      <el-row >
-        <el-col :span="18">
-          <el-form-item label="来源单据">
-            <el-input
-              v-model="queryParams.source"
-              clearable
-              @keyup.enter.native="btnQuery"
-            />
-          </el-form-item>
-          <el-form-item label="客户">
-            <DrPopoverSelectV2
-              size="mini"
-              v-model="queryParams.customerName"
-              valueKey= "name"
-              referName="CUSTOMER_PARAM"
-              :dataMapping="{
-                customer: 'id',
-                customerName: 'name',
-              }"
-              :source.sync="queryParams"
-            >
-            </DrPopoverSelectV2>
-          </el-form-item>
-          <el-form-item label="物料">
-            <DrPopoverSelectV2
-              size="mini"
-              v-model="queryParams.materialName"
-              valueKey= "name"
-              referName="MATERIAL_PARAM"
-              :dataMapping="{
-                material: 'id',
-                materialName: 'name',
-              }"
-              :source.sync="queryParams"
-            >
-            </DrPopoverSelectV2>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item style="float:right">
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="btnQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="btnResetQuery">重置</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
+  <el-card
+    v-loading="loading"
+    :body-style="{
+      height: '100%',
+      padding: 0,
+      display: 'flex',
+      'flex-direction': 'column',
+    }"
+  >
+    <el-super-search
+      v-model="params"
+      :size="size"
+      :dict="dict"
+      :columns="SearchColumns"
+      @reset="btnResetQuery"
+      @submit="getList(params, page)"
+    ></el-super-search>
 
-    <el-table
-      size="mini"
-      v-loading="loading"
-      :data="list"
-      height="500px"
+    <el-super-ux-table
+      v-model="list"
+      :size="size"
+      :dict="dict"
+      :page="page"
+      :columns="TableColumns"
+      index
+      pagination
+      highlight-current-row
+      storage-key="ownerShipSuperTable"
+      @pagination="getList({ ...page, ...params })"
+      style="margin: 16px 0 0"
     >
-      <el-table-column label="序号" type="index" width="50" align="center" fixed/>
-      <el-table-column show-overflow-tooltip width="200" label="来源单据" align="center" prop="source" />
-      <el-table-column show-overflow-tooltip width="200" label="客户" align="center" prop="customerName" />、
-      <el-table-column show-overflow-tooltip width="150" label="仓库" align="center" prop="warehouseName" />
-      <el-table-column show-overflow-tooltip width="150" label="物料编码" align="center" prop="materialCode" />
-      <el-table-column show-overflow-tooltip width="300" label="物料" align="center" prop="materialName" />
-      <el-table-column show-overflow-tooltip width="150" label="可用量" align="center" prop="qty" />
-      <el-table-column show-overflow-tooltip width="150" label="已用量" align="center" prop="usedQty" />
-      <el-table-column show-overflow-tooltip width="150" label="预留数量" align="center" prop="reservedQty" />
-      <el-table-column show-overflow-tooltip width="150" label="创建时间" align="center" prop="createTime" />
-      <el-table-column
-        width="250"
-        label="操作"
-        fixed="right"
-        align="center"
-        class-name="small-padding fixed-width"
-      >
+      <ux-table-column fixed="right" title="操作" align="center" width="180">
         <template slot-scope="scope">
           <el-button
-            size="mini"
+            :size="size"
             type="text"
             icon="el-icon-edit"
             @click="btnUpdate(scope.row)"
-            >修改</el-button>
+            >修改</el-button
+          >
         </template>
-      </el-table-column>
-    </el-table>
-    <div class="paginationClass">
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-      />
-    </div>
+      </ux-table-column>
+    </el-super-ux-table>
 
     <!-- 添加或修改任务对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
@@ -135,26 +87,36 @@
       </el-super-form> -->
 
       <div slot="footer">
-        <el-button
-          size="mini"
-          type="primary"
-          @click="submitForm"
-          v-loading="dialogLoading"
+        <el-button :size="size" type="primary" @click="submitForm"
           >确 定</el-button
         >
-        <el-button size="mini" @click="cancel" v-loading="dialogLoading">取 消</el-button>
+        <el-button :size="size" @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
-  </div>
+  </el-card>
 </template>
 
-
 <script>
-import {materialList,getDetail,update} from '@/api/purchase/ownership.js'
-
+import { materialList, getDetail, update } from "@/api/purchase/ownership.js";
+import useColumns from "./columns";
+import { dicts } from "./dicts";
 export default {
+  name: "ownerShip",
+  dicts: [...dicts],
+  components: {
+    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
+    ElSuperSearch: () => import("@/components/super-search/index.vue"),
+  },
   data() {
+    const { SearchColumns, TableColumns } = useColumns();
+    const params = this.$init.params(SearchColumns);
+    const page = this.$init.page();
     return {
+      size: "mini",
+      SearchColumns,
+      TableColumns,
+      params,
+      page,
       // 遮罩层
       loading: false,
       // 遮罩层
@@ -167,19 +129,8 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        source: null,
-        customer: null,
-        customerName: null,
-        material: null,
-        materialName: null,
-      },
       // 表单参数
-      form: {
-      },
+      form: {},
       //oldQty
       oldQty: 0,
     };
@@ -189,9 +140,12 @@ export default {
   },
   methods: {
     /** 查询任务列表 */
-    getList() {
+    getList(params, page) {
       this.loading = true;
-      materialList(this.queryParams).then(response => {
+      materialList({
+        ...params,
+        ...page,
+      }).then((response) => {
         this.list = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -232,24 +186,10 @@ export default {
       };
       this.resetForm("form");
     },
-    /** 搜索按钮操作 */
-    btnQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
     /** 重置按钮操作 */
     btnResetQuery() {
-      // this.resetForm("queryForm");
-      this.queryParams = {
-        pageNum: 1,
-        pageSize: 10,
-        source: null,
-        customer: null,
-        customerName: null,
-        material: null,
-        materialName: null,
-      };
-      this.btnQuery();
+      this.params = this.$init.params(this.SearchColumns);
+      this.page = this.$init.page();
     },
     /** 修改按钮操作 */
     btnUpdate(row) {
@@ -257,9 +197,9 @@ export default {
       this.reset();
       this.form.source = row.source;
       this.form.customerName = row.customerName;
-      const id = row.id || this.ids
-      getDetail(id).then(response => {
-        this.form = {...this.form,...response.data};
+      const id = row.id || this.ids;
+      getDetail(id).then((response) => {
+        this.form = { ...this.form, ...response.data };
         this.open = true;
         this.title = "修改预留";
         this.oldQty = this.form.qty || 0;
@@ -276,29 +216,28 @@ export default {
       });
     },
     //值改变后
-    useFormQtyChange(val){
+    useFormQtyChange(val) {
       let cha = val - this.oldQty;
       this.form.usedQty = this.form.usedQty - cha;
       this.oldQty = val;
     },
-  }
+  },
 };
 </script>
 
-<style lang="scss" scoped>
-.btn_grooup {
-  margin-bottom: 10px;
-  display: flex;
-  justify-content: flex-end;
+<style scoped lang="scss">
+.el-card {
+  width: calc(100% - 32px);
+  height: calc(100vh - 32px);
+  margin: 16px;
+  padding: 16px;
+  border-radius: 8px;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
-.paginationClass {
-  z-index: 500;
-  position: fixed;
-  bottom: 10px;
-  right: 10px;
-  width: 100%;
-  line-height: var(--footer-height);
-  color: #fff;
+
+.el-button-group + .el-button-group {
+  margin: 0 0 0 8px;
 }
 
 </style>