采购预留-修改页面组件优化

src/views/purchase/ownership/columns.js

@@ -44,7 +44,7 @@ export default function useColumns() {
       attr: {}
     },
     {
-      item: { key: "materialCode", title: "物料编码" },
+      item: { key: "materialCode", title: "物料编码", width: 150, },
       attr: {}
     },
     {
@@ -52,15 +52,15 @@ export default function useColumns() {
       attr: {}
     },
     {
-      item: { key: "qty", title: "可用量" },
+      item: { key: "qty", title: "可用量", width: 120, },
       attr: {}
     },
     {
-      item: { key: "usedQty", title: "已用量" },
+      item: { key: "usedQty", title: "已用量", width: 120, },
       attr: {}
     },
     {
-      item: { key: "reservedQty", title: "预留数量" },
+      item: { key: "reservedQty", title: "预留数量", width: 120, },
       attr: {}
     },
     {
@@ -69,5 +69,72 @@ export default function useColumns() {
     },
   ];
 
-  return { SearchColumns, TableColumns }
+  const FormColumns = [
+    {
+      item: { key: "source", title: "单据来源" },
+      attr: {
+        is: "el-input",
+        readonly: true,
+      }
+    },
+    {
+      item: { key: "puCode", title: "集采编号" },
+      attr: {
+        is: "el-input",
+        readonly: true,
+      }
+    },
+    {
+      item: { key: "createTime", title: "创建时间" },
+      attr: {
+        is: "el-input",
+        readonly: true,
+      }
+    },
+    {
+      item: { key: "customerName", title: "客户" },
+      attr: {
+        is: "el-input",
+        readonly: true,
+      }
+    },
+    {
+      item: { key: "materialCode", title: "物料编码" },
+      attr: {
+        is: "el-input",
+        readonly: true,
+      }
+    },
+    {
+      item: { key: "materialName", title: "物料" },
+      attr: {
+        is: "el-input",
+        readonly: true,
+      }
+    },
+    {
+      item: { key: "usedQty", title: "已用量" },
+      attr: {
+        is: "el-input",
+        readonly: true,
+      }
+    },
+    {
+      item: { key: "reservedQty", title: "预留数量" },
+      attr: {
+        is: "el-input",
+        readonly: true,
+      }
+    },
+    {
+      item: { key: "qty", title: "可用量" },
+      attr: {
+        is: "el-input",
+        type: "number",
+        min: "0",
+      }
+    },
+  ]
+
+  return { SearchColumns, TableColumns, FormColumns }
 }

src/views/purchase/ownership/index.vue

@@ -30,7 +30,7 @@
       @pagination="getList({ ...page, ...params })"
       style="margin: 16px 0 0"
     >
-      <ux-table-column fixed="right" title="操作" align="center" width="180">
+      <ux-table-column fixed="right" title="操作" align="center" width="100">
         <template slot-scope="scope">
           <el-button
             :size="size"
@@ -45,7 +45,7 @@
 
     <!-- 添加或修改任务对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
-      <el-form :size="size" ref="form" :model="form" label-width="80px">
+      <!-- <el-form :size="size" ref="form" :model="form" label-width="80px">
         <el-descriptions :column="1">
           <el-descriptions-item label="单据来源">{{
             form.source
@@ -81,7 +81,30 @@
             @input="useFormQtyChange"
           />
         </el-form-item>
-      </el-form>
+      </el-form> -->
+      <el-super-form
+        v-model="form"
+        :dict="dict"
+        :rules="rules"
+        :size="$attrs.size"
+        :columns="FormColumns"
+        ref="superForm"
+        label-width="auto"
+        label-position="right"
+        style="padding: 20px"
+      >
+        <template slot="qty" slot-scope="scope">
+          <component
+            v-bind="scope.attr"
+            v-model="scope.row[scope.item.key]"
+            :size="$attrs.size"
+            :source.sync="scope.row"
+            @input="useFormQtyChange"
+          >
+          </component
+        ></template>
+      </el-super-form>
+
       <div slot="footer">
         <el-button :size="size" type="primary" @click="submitForm"
           >确 定</el-button
@@ -100,19 +123,24 @@ export default {
   name: "ownerShip",
   dicts: [...dicts],
   components: {
+    ElSuperForm: () => import("@/components/super-form/index.vue"),
     ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
     ElSuperSearch: () => import("@/components/super-search/index.vue"),
   },
   data() {
-    const { SearchColumns, TableColumns } = useColumns();
+    const { SearchColumns, TableColumns, FormColumns } = useColumns();
     const params = this.$init.params(SearchColumns);
     const page = this.$init.page();
+    const rules = this.$init.rules(FormColumns);
+    const form = this.$init.params(FormColumns);
     return {
+      page,
+      rules,
+      params,
       size: "mini",
       SearchColumns,
       TableColumns,
-      params,
-      page,
+      FormColumns,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -121,8 +149,6 @@ export default {
       single: true,
       // 非多个禁用
       multiple: true,
-      // 总条数
-      total: 0,
       // 列表数据
       list: [],
       // 弹出层标题
@@ -130,13 +156,13 @@ export default {
       // 是否显示弹出层
       open: false,
       // 表单参数
-      form: {},
+      form: form,
       //oldQty
       oldQty: 0,
     };
   },
   created() {
-    this.getList();
+    this.getList(this.params, this.page);
   },
   methods: {
     /** 查询任务列表 */
@@ -147,7 +173,7 @@ export default {
         ...page,
       }).then((response) => {
         this.list = response.rows;
-        this.total = response.total;
+        this.page.total = response.total;
         this.loading = false;
       });
     },
@@ -210,7 +236,7 @@ export default {
       update(this.form).then((response) => {
         this.$modal.msgSuccess("修改成功");
         this.open = false;
-        this.getList();
+        this.getList(this.params, this.page);
       });
     },
     //值改变后