add CarPayloadDialog

src/components/DialogCarPayload.vue

@@ -9,14 +9,14 @@
     <!-- main content  -->
     <BaseListTable
       v-loading="tableLoading"
-      :table-config="tableConfig.table"
-      :column-config="tableConfig.column"
+      :table-config="configs.tableConfig.table"
+      :column-config="configs.tableConfig.column"
       :table-data="dataList"
-      @operate-event="handleOperate"
       :current-page="page"
       :current-size="size"
       :refresh-layout-key="refreshLayoutKey"
     />
+    <!-- @operate-event="handleOperate" -->
 
     <el-pagination
       class="mt-5 flex justify-end"
@@ -28,22 +28,15 @@
       :total="totalPage"
       layout="total, sizes, prev, pager, next, jumper"
     ></el-pagination>
-
-    <!-- footer  -->
-    <div slot="footer">
-      <!-- <template v-for="(operate, index) in configs.form.operations">
-        <el-button v-if="showButton(operate)" :key="'operation_' + index" :type="operate.type" @click="handleBtnClick(operate)">{{
-          operate.label
-        }}</el-button>
-      </template> -->
-      <el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button>
-    </div></el-dialog
-  >
+  </el-dialog>
 </template>
 
 <script>
+import BaseListTable from "@/components/BaseListTable.vue";
+
 export default {
   name: "DialogCarPayload",
+  components: { BaseListTable },
   props: {
     configs: {
       type: Object,
@@ -52,13 +45,6 @@ export default {
         forms: null,
       }),
     },
-    tableConfigs: {
-      type: Object,
-      default: () => ({
-        table: null,
-        column: null
-      }),
-    },
     dialogVisible: {
       type: Boolean,
       default: false,
@@ -77,12 +63,31 @@ export default {
       totalPage: 0,
       dataList: [],
       tableLoading: false,
-      refreshLayoutKey: "",
+      refreshLayoutKey: null,
     };
   },
   created() {},
   mounted() {},
+  activated() {
+    this.refreshLayoutKey = Math.random();
+  },
   methods: {
+    /** init **/
+    init(id) {
+      if (!id) {
+        this.$message({
+          message: `没有传 id!`,
+          type: "error",
+          duration: 1500,
+        });
+        console.log("[*] 传入car payload对话框的id是", id);
+        return;
+      }
+
+      this.tableLoading = true;
+      this.getList();
+    },
+
     /** 获取 列表数据 */
     getList(queryParams) {
       this.tableLoading = true;
@@ -105,9 +110,6 @@ export default {
         });
       }
 
-      // if (this.urls.pageIsPostApi) {
-      // } else {
-      // 默认是 get 方式请求 page
       this.$http[this.urls.pageIsPostApi ? "post" : "get"](
         this.urls.page,
         this.urls.pageIsPostApi
@@ -124,20 +126,8 @@ export default {
           if (res.code === 0) {
             // page 场景:
             if ("list" in res.data) {
-              /** 破碎记录的特殊需求：数据要结合单位 material + materialUnitDictValue */
-              if ("attachDictValue" in this.tableConfig.column) {
-                this.dataList = res.data.list.map((row) => {
-                  this.tableConfig.column.attachDictValue(row, "unit", "qty", "materialUnitDictValue");
-                  return row;
-                });
-              } else this.dataList = res.data.list;
+              this.dataList = res.data.list;
 
-              this.totalPage = res.data.total;
-            } else if ("records" in res.data) {
-              this.dataList = res.data.records.map((item) => ({
-                ...item,
-                id: item._id ?? item.id,
-              }));
               this.totalPage = res.data.total;
             } else {
               this.dataList.splice(0);

src/mocks/index.js

@@ -19,3 +19,12 @@ m(carManagement.url, carManagement.type, opt => {
     }
   }
 })
+
+// m('/login', 'post', opt => {
+//   return {
+//     code: 0,
+//     data: {
+//       token: '123'
+//     }
+//   }
+// })

src/views/atomViews/ListViewWithHead.vue

@@ -42,6 +42,13 @@
       :configs="dialogConfigs"
       @refreshDataList="getList"
     />
+    <DialogCarPayload
+      ref="car-payload-dialog"
+      v-if="!!dialogConfigs && dialogType === DIALOG_CARPAYLOAD"
+      :dialog-visible.sync="dialogVisible"
+      :configs="dialogConfigs"
+      @refreshDataList="getList"
+    />
   </div>
 </template>
 
@@ -50,14 +57,16 @@ import BaseListTable from "@/components/BaseListTable.vue";
 import BaseSearchForm from "@/components/BaseSearchForm.vue";
 import DialogWithMenu from "@/components/DialogWithMenu.vue";
 import DialogJustForm from "@/components/DialogJustForm.vue";
+import DialogCarPayload from "@/components/DialogCarPayload.vue";
 import moment from "moment";
 
 const DIALOG_WITH_MENU = "DialogWithMenu";
 const DIALOG_JUST_FORM = "DialogJustForm";
+const DIALOG_CARPAYLOAD = "DialogCarPayload";
 
 export default {
   name: "ListViewWithHead",
-  components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm },
+  components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm, DialogCarPayload },
   props: {
     tableConfig: {
       type: Object,
@@ -93,7 +102,7 @@ export default {
   },
   computed: {
     dialogType() {
-      return this.dialogConfigs.menu ? DIALOG_WITH_MENU : DIALOG_JUST_FORM;
+      return this.dialogConfigs.menu ? DIALOG_WITH_MENU : this.dialogConfigs.carPayloadDialog ? DIALOG_CARPAYLOAD : DIALOG_JUST_FORM;
     },
   },
   activated() {
@@ -104,8 +113,8 @@ export default {
     triggerUpdate(val, oldVal) {
       if (val && val !== oldVal) {
         // get list
-        this.page = 1
-        this.size = 20
+        this.page = 1;
+        this.size = 20;
         this.getList();
       }
     },
@@ -114,6 +123,7 @@ export default {
     return {
       DIALOG_WITH_MENU,
       DIALOG_JUST_FORM,
+      DIALOG_CARPAYLOAD,
       dialogVisible: false,
       topBtnConfig: null,
       totalPage: 100,
@@ -261,11 +271,11 @@ export default {
         }
         case "view-blender-batch-details": {
           this.$router.push({
-            name: 'pms-blenderBatchDetails',
+            name: "pms-blenderBatchDetails",
             query: {
-              batchId: data
-            }
-          })
+              batchId: data,
+            },
+          });
           break;
         }
         case "status": {
@@ -301,10 +311,10 @@ export default {
           // console.log('to-bom-detail', data.name)
           // 查看配方详情
           return this.$router.push({
-            name: 'pms-bomDetails',
+            name: "pms-bomDetails",
             query: {
-              name: data.name
-            }
+              name: data.name,
+            },
           });
         }
         case "copy": {
@@ -402,15 +412,26 @@ export default {
         }
         case "to-car-history": {
           return this.$router.push({
-            name: 'pms-carHistory',
+            name: "pms-carHistory",
             query: {
-              code: data.code
+              code: data.code,
+            },
+          });
         }
-          })
+        case "to-car-payload": {
+          // open dialog instead of redirect to a new page
+          this.openCarPayloadDialog(data);
         }
       }
     },
 
+    openCarPayloadDialog(id) {
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["car-payload-dialog"].init(id);
+      });
+    },
+
     handleBtnClick({ btnName, payload }) {
       console.log("[search] form handleBtnClick", btnName, payload);
       switch (btnName) {
@@ -484,7 +505,7 @@ export default {
         });
       }
       this.$nextTick(() => {
-        console.log(`[edit-dialog] extraParams: ${extraParams}`)
+        console.log(`[edit-dialog] extraParams: ${extraParams}`);
         this.$refs["edit-dialog"].init(/** some args... */ row_id, detail_mode, tag_info, extraParams);
       });
     },

src/views/modules/pms/carPayload/config.js

@@ -0,0 +1,117 @@
+import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
+// import switchBtn from "@/components/noTemplateComponents/switchBtn";
+import QuillRichInput from "@/components/noTemplateComponents/richInput";
+import request from "@/utils/request";
+import { timeFilter } from '@/utils/filters'
+
+export default function () {
+  const tableProps = [
+    { type: 'index', label: '序号' },
+    { prop: "createTime", label: "添加时间", filter: timeFilter },
+    { prop: "code", label: "窑车号" },
+    // { prop: "code", label: "编码" },
+    // { prop: "typeDictValue", label: "过渡车", filter: val => ['否', '是'][val] },
+    // { prop: "enabled", label: "状态", subcomponent: switchBtn }, // subcomponent
+    // { prop: "currentQty", label: "载量" },
+    // { prop: "currentPos", label: "当前位置" },
+    // { prop: "description", label: "描述" },
+    { prop: "remark", label: "备注" },
+    {
+      prop: "operations",
+      name: "操作",
+      fixed: "right",
+      width: 90,
+      subcomponent: TableOperaionComponent,
+      options: [{ name: "edit", label: "编辑", icon: "edit-outline" }, { name: "delete", icon: "delete", label: "删除", emitFull: true, permission: "pms:car:delete" }],
+    },
+  ];
+
+  const headFormFields = [
+    {
+      prop: 'code',
+      label: "窑车号",
+      input: true,
+      default: { value: "" },
+      bind: {
+        // placeholder: '请输入产线名称或编码'
+        placeholder: '请输入窑车号'
+      }
+    },
+    {
+      button: {
+        type: "primary",
+        name: "查询",
+      },
+    },
+    {
+      button: {
+        type: "primary",
+        name: "新增",
+        permission: "pms:materialStorage:save"
+      },
+      bind: {
+        plain: true,
+      }
+    },
+  ];
+
+  /**
+   * dialog config 有两个版本，一个适用于 DialogWithMenu 组件，另一个适用于 DialogJustForm 组件
+   * 适用于 DialogWithMenu 组件的配置示例详见 blenderStep/config.js
+   * 此为后者的配置:
+   */
+  const dialogJustFormConfigs = {
+    clickModalToClose: true,
+    form: {
+      rows: [
+        [
+          {
+            input: true,
+            label: "窑车号",
+            prop: "code",
+            rules: { required: true, message: "必填项不能为空", trigger: "blur" },
+            elparams: { placeholder: "请输入窑车号" },
+          },
+          // {
+          //   input: true,
+          //   label: "编码",
+          //   prop: "code",
+          //   rules: { required: true, message: "必填项不能为空", trigger: "blur" },
+          //   elparams: { placeholder: "请输入料仓编码" },
+          // },
+        ],
+        // [{ component: QuillRichInput, label: "描述信息", prop: "description" }],
+        [{
+          richInput: true, label: "描述信息", prop: "description"
+        }],
+        [{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
+      ],
+      operations: [
+        { name: "add", label: "保存", type: "primary", permission: "pms:car:save", showOnEdit: false },
+        { name: "update", label: "更新", type: "primary", permission: "pms:car:update", showOnEdit: true },
+        { name: "reset", label: "重置", type: "warning", showAlways: true },
+        // { name: 'cancel', label: '取消', showAlways: true },
+      ],
+    },
+  };
+  // 备注：弹窗弹出的时间和网速有关......
+
+  return {
+    dialogConfigs: dialogJustFormConfigs,
+    tableConfig: {
+      table: null, // 此处可省略，el-table 上的配置项
+      column: tableProps, // el-column-item 上的配置项
+    },
+    headFormConfigs: {
+      rules: null, // 名称是由 BaseSearchForm.vue 组件固定的
+      fields: headFormFields, // 名称是由 BaseSearchForm.vue 组件固定的
+    },
+    urls: {
+      base: "/pms/car",
+      page: "/pms/car/page",
+      // subase: '/pms/blenderStepParam',
+      // subpage: '/pms/blenderStepParam/page',
+      // more...
+    },
+  };
+}

src/views/modules/pms/carPayload/index.vue

@@ -0,0 +1,32 @@
+<template>
+	<ListViewWithHead :table-config="tableConfig" :head-config="headFormConfigs" :dialog-configs="dialogConfigs" :listQueryExtra="['name']" />
+</template>
+
+<script>
+import initConfig from './config';
+import ListViewWithHead from '@/views/atomViews/ListViewWithHead.vue';
+
+export default {
+	name: 'CarView',
+	components: { ListViewWithHead },
+	provide() {
+		return {
+			urls: this.allUrls
+		}
+	},
+	data() {
+		const { tableConfig, headFormConfigs, urls, dialogConfigs } = initConfig.call(this);
+		return {
+			tableConfig,
+			headFormConfigs,
+			allUrls: urls,
+			dialogConfigs,
+		};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped></style>

src/views/modules/pms/currentCarLocation/carPayload.vue

@@ -0,0 +1,28 @@
+<template>
+  <div v-if="showCarPayload" class="car-payload-dialog">
+    <div class="backdrop"></div>
+    <div class="card">
+      <!-- table -->
+      <!-- pagination -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CarPayloadView",
+  props: {},
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped>
+.car-payload-dialog {
+  position: fixed;
+}
+</style>

src/views/modules/pms/currentCarLocation/config.js

@@ -62,38 +62,20 @@ export default function () {
    * 此为后者的配置:
    */
   const dialogJustFormConfigs = {
+    carPayloadDialog: true,
     clickModalToClose: true,
-    form: {
-      rows: [
-        [
-          {
-            input: true,
-            label: "窑车号",
-            prop: "code",
-            rules: { required: true, message: "必填项不能为空", trigger: "blur" },
-            elparams: { placeholder: "请输入窑车号" },
-          },
-          // {
-          //   input: true,
-          //   label: "编码",
-          //   prop: "code",
-          //   rules: { required: true, message: "必填项不能为空", trigger: "blur" },
-          //   elparams: { placeholder: "请输入料仓编码" },
-          // },
-        ],
-        // [{ component: QuillRichInput, label: "描述信息", prop: "description" }],
-        [{
-          richInput: true, label: "描述信息", prop: "description"
-        }],
-        [{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
-      ],
-      operations: [
-        { name: "add", label: "保存", type: "primary", permission: "pms:car:save", showOnEdit: false },
-        { name: "update", label: "更新", type: "primary", permission: "pms:car:update", showOnEdit: true },
-        { name: "reset", label: "重置", type: "warning", showAlways: true },
-        // { name: 'cancel', label: '取消', showAlways: true },
-      ],
-    },
+    tableConfig: {
+      table: null,
+      column: [
+        // tableProps
+        { prop: "name", label: "名称" },
+        { prop: "code", label: "编码" },
+        { prop: "sumqty", label: "	配方总重量" },
+        { prop: "shortDesc", label: "物料销售文本短描述" },
+        { prop: "description", label: "物料销售文本描述" },
+        { prop: "remark", label: "备注" },
+      ]
+    }
   };
   // 备注：弹窗弹出的时间和网速有关......