update 配方详情页面

src/views/atomViews/ListView.vue

@@ -2,13 +2,13 @@
 <template>
   <div class="list-view">
     <el-row>
-      <a style="margin: 0 0 16px 0; color: #0b58ff; display: flex; align-items: center; text-decoration: none; cursor: pointer;" title="返回上一页">
+      <a style="margin: 0 0 16px 0; color: #0b58ff; display: flex; align-items: center; text-decoration: none; cursor: pointer" title="返回上一页" @click.prevent="$router.go(-1)">
-        <span style="margin-right: 6px;">
+        <span style="margin-right: 6px">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-						<path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
           </svg>
         </span>
-				<span style="line-height: 20px;">返回</span>
+        <span style="line-height: 24px">返回</span>
       </a>
     </el-row>
 
@@ -298,6 +298,16 @@ export default {
           this.openDialog(data, true, { key: "attr" });
           break;
         }
+        case "to-bom-detail": {
+          // console.log('to-bom-detail', data.name)
+          // 查看配方详情
+          return this.$router.push({
+            name: 'pms-bomDetails',
+            query: {
+              name: data.name
+            }
+          });
+        }
         case "copy": {
           return this.$http
             .post(this.urls.copyUrl, data, {
@@ -391,6 +401,32 @@ export default {
               }
             });
         }
+        case "sync": {
+          // 同步配方详情
+          return this.$http
+            .post(this.urls.syncUrl, data, { headers: { "Content-Type": "application/json" } })
+            .then(({ data: res }) => {
+              if (res.code === 0) {
+                this.$message({
+                  message: "同步成功",
+                  type: "success",
+                  duration: 1500,
+                  onClose: () => {
+                    this.getList();
+                  },
+                });
+              } else {
+                throw new Error(res.msg);
+              }
+            })
+            .catch((errMsg) => {
+              this.$message({
+                message: "同步失败: " + errMsg,
+                type: "error",
+                duration: 1500,
+              });
+            });
+        }
       }
     },
 
@@ -486,9 +522,9 @@ export default {
 }
 
 .w-6 {
-  width: 18px;
+  width: 16px;
 }
 .h-6 {
-  height: 18px;
+  height: 16px;
 }
 </style>

src/views/atomViews/ListViewWithHead.vue

@@ -295,6 +295,16 @@ export default {
           this.openDialog(data, true, { key: "attr" });
           break;
         }
+        case "to-bom-detail": {
+          // console.log('to-bom-detail', data.name)
+          // 查看配方详情
+          return this.$router.push({
+            name: 'pms-bomDetails',
+            query: {
+              name: data.name
+            }
+          });
+        }
         case "copy": {
           return this.$http
             .post(this.urls.copyUrl, data, {

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

@@ -32,7 +32,7 @@ export default function () {
       width: 90,
       subcomponent: TableOperaionComponent,
       options: [
-        { name: { name: "edit", label: "编辑", icon: "edit-outline"}, enable: injectRow => { return 'task' in injectRow && injectRow.task === 'Manual' } },
+        { name:"edit", label: "编辑", icon: "edit-outline", enable: injectRow => { return 'task' in injectRow && injectRow.task === 'Manual' } },
         { name: 'delete', icon: 'delete', enable: injectRow => { return 'task' in injectRow && injectRow.task === 'Manual' } },
       ] // 只有 injectRow.task 为手动时，才允许编辑
     },

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

@@ -19,14 +19,25 @@ export default function () {
     // { prop: "syncTime", label: "同步时间", fitler: timeFilter },
     // { prop: "remark", label: "备注" },
     // { prop: "description", label: "详情", subcomponent: TableTextComponent, buttonContent: "查看配方详情", actionName: 'view-recipe' },
-    { prop: "description", label: "配方", subcomponent: TableTextComponent, buttonContent: "查看配方", actionName: 'view-recipe' },
+    {
+      prop: "description",
+      label: "配方",
+      subcomponent: TableTextComponent,
+      buttonContent: "查看配方",
+      actionName: "to-bom-detail",
+      emitFullData: true,
+    },
     {
       prop: "operations",
       name: "操作",
       fixed: "right",
       width: 120,
       subcomponent: TableOperaionComponent,
-      options: [{ name: "copy", label: "复制", icon: "copy-document" }, { name: "edit", label: "编辑", icon: "edit-outline" }, { name: "delete", icon: "delete", label: "删除", emitFull: true, permission: "pms:bom:delete" }],
+      options: [
+        { name: "copy", label: "复制", icon: "copy-document" },
+        { name: "edit", label: "编辑", icon: "edit-outline" },
+        { name: "delete", icon: "delete", label: "删除", emitFull: true, permission: "pms:bom:delete" },
+      ],
     },
   ];
 
@@ -121,8 +132,7 @@ export default function () {
             rules: { required: true, message: "必填项不能为空", trigger: "blur" },
             elparams: { placeholder: "请输入版本号" },
           },
-          { input: true, label: "物料销售文本(短)", prop: "shortDesc", elparams: { placeholder: "物料销售文本" } }
+          { input: true, label: "物料销售文本(短)", prop: "shortDesc", elparams: { placeholder: "物料销售文本" } },
-
         ],
         [{ textarea: true, label: "物料销售文本", prop: "description", elparams: { placeholder: "物料销售文本" } }],
         [{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
@@ -132,10 +142,10 @@ export default function () {
             forceDisabled: true,
             label: "同步状态",
             prop: "sync",
-            key: 'sync',
+            key: "sync",
             // rules: { required: true, message: "必填项不能为空", trigger: "blur" },
             // elparams: { placeholder: "请输入同步状态" },
-          }
+          },
         ],
       ],
       operations: [
@@ -152,9 +162,9 @@ export default function () {
         { type: "index", label: "序号" },
         { prop: "createTime", label: "添加时间", filter: timeFilter },
         { prop: "material", label: "物料", isEditField: true },
-        { width: 130, prop: "qty", label: "配方物料重量", filter: val => !!val ? val + ' kg' : '-', isEditField: true },
+        { width: 130, prop: "qty", label: "配方物料重量", filter: (val) => (!!val ? val + " kg" : "-"), isEditField: true },
-        { width: 130, prop: "sumqty", label: "配方总重量", filter: val => !!val ? val + ' kg' : '-', isEditField: true },
+        { width: 130, prop: "sumqty", label: "配方总重量", filter: (val) => (!!val ? val + " kg" : "-"), isEditField: true },
-        { prop: "percent", label: "配比 [%]", filter: val => !!val ? val + ' %' : '-', isEditField: true },
+        { prop: "percent", label: "配比 [%]", filter: (val) => (!!val ? val + " %" : "-"), isEditField: true },
         { prop: "remark", label: "备注", isEditField: true },
         {
           prop: "operations",
@@ -185,7 +195,7 @@ export default function () {
             rules: { required: true, message: "必填项不能为空", trigger: "blur" },
             elparams: { placeholder: "请选择物料", filterable: true },
             options: [],
-            fetchData: () => this.$http.get('/pms/material/page', { params: { limit: 999, page: 1 } })
+            fetchData: () => this.$http.get("/pms/material/page", { params: { limit: 999, page: 1 } }),
             // fetchData: () => new Promise((resolve) => {
             //   setTimeout(() => {
             //     resolve({

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

@@ -8,73 +8,26 @@ export default function () {
   const tableProps = [
     { type: 'index', label: '序号' },
     { prop: "createTime", label: "添加时间", filter: timeFilter },
-    { prop: "name", label: "料仓名称" },
+    { prop: "syncTime", label: "同步时间", filter: timeFilter },
-    { prop: "code", label: "料仓编码" },
+    { prop: "name", label: "名称" },
-    { prop: "typeDictValue", label: "料仓类型", filter: dictFilter('liaocang') },
+    { prop: "code", label: "编码" },
-    // { prop: "enabled", label: "状态", subcomponent: switchBtn }, // subcomponent
+    { prop: "sumqty", label: "	配方总重量" },
-    { prop: "materialTypeDictValue", label: "物料类型", filter: dictFilter('material_category') },
+    { prop: "shortDesc", label: "物料销售文本短描述" },
-    { prop: "density", label: "物料堆积密度" },
+    { prop: "description", label: "物料销售文本描述" },
-    { prop: "dosHigh", label: "加料上限" },
-    { prop: "dosLow", 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:materialStorage:delete" }],
+      // width: 90,
+      // options: [{ name: "edit", label: "编辑", icon: "edit-outline" }, { name: "delete", icon: "delete", label: "删除", emitFull: true, permission: "pms:materialStorage:delete" }],
+      width: 50,
+      options: [{ name: "sync", label: "同步", icon: "refresh" }],
     },
   ];
 
-  /**
+  const dialogJustFormConfigs = null
-   * dialog config 有两个版本，一个适用于 DialogWithMenu 组件，另一个适用于 DialogJustForm 组件
-   * 适用于 DialogWithMenu 组件的配置示例详见 blenderStep/config.js
-   * 此为后者的配置:
-   */
-  const dialogJustFormConfigs = {
-    form: {
-      rows: [
-        [
-          {
-            input: true,
-            label: "料仓名称",
-            prop: "name",
-            rules: { required: true, message: "必填项不能为空", trigger: "blur" },
-            elparams: { placeholder: "请输入料仓名称" },
-          },
-          {
-            input: true,
-            label: "料仓编码",
-            prop: "code",
-            rules: { required: true, message: "必填项不能为空", trigger: "blur" },
-            elparams: { placeholder: "请输入料仓编码" },
-          }, {
-            select: true,
-            label: "料仓类型",
-            prop: "typeDictValue",
-            // fetchData: () => this.$http.get("/pms/factory/page", { params: { limit: 999, page: 1 } }),
-            options: [
-              // TODO: 或许映射可以全权交给数据字典
-              { label: '中间仓', value: '0' },
-              { label: '日料仓', value: '1' },
-            ],
-            rules: { required: true, message: "必填项不能为空", trigger: "change" },
-          },
-        ],
-        [{ textarea: true, label: "描述信息", prop: "description", elparams: { placeholder: "描述信息" } }],
-        [{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
-      ],
-      operations: [
-        { name: "add", label: "保存", type: "primary", permission: "pms:materialStorage:save", showOnEdit: false },
-        { name: "update", label: "更新", type: "primary", permission: "pms:materialStorage:update", showOnEdit: true },
-        { name: "reset", label: "重置", type: "warning", showAlways: true },
-        // { name: 'cancel', label: '取消', showAlways: true },
-      ],
-    },
-  };
-  // 备注：弹窗弹出的时间和网速有关......
 
   return {
     dialogConfigs: dialogJustFormConfigs,
@@ -83,8 +36,9 @@ export default function () {
       column: tableProps, // el-column-item 上的配置项
     },
     urls: {
-      base: "/pms/materialStorageDynamic",
+      // base: "/pms/bom/pageVersion",
-      page: "/pms/materialStorageDynamic/page",
+      page: "/pms/bom/pageVersion",
+      syncUrl: '/pms/bom/sync'
       // subase: '/pms/blenderStepParam',
       // subpage: '/pms/blenderStepParam/page',
       // more...

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

@@ -1,30 +1,52 @@
 <template>
-	<ListView :table-config="tableConfig" :dialog-configs="dialogConfigs" :listQueryExtra="['name']" />
+  <ListView
+    :table-config="tableConfig"
+    :dialog-configs="dialogConfigs"
+    :listQueryExtra="[{ key: name }]"
+    attach-list-query-extra="key"
+    :trigger-update="triggerUpdateKey"
+  />
 </template>
 
 <script>
-import initConfig from './config';
+import initConfig from "./config";
-import ListView from '@/views/atomViews/ListView.vue';
+import ListView from "@/views/atomViews/ListView.vue";
 
 export default {
-	name: 'BomDetailsView',
+  name: "BomDetailsView",
-	components: { ListView },
+  components: { ListView },
-	provide() {
+  provide() {
-		return {
+    return {
-			urls: this.allUrls
+      urls: this.allUrls,
-		}
+    };
-	},
+  },
-	data() {
+  computed: {
-		const { tableConfig, urls, dialogConfigs } = initConfig.call(this);
+    // 配方名称
-		return {
+    name() {
-			tableConfig,
+      return this.$route.query.name || "";
-			allUrls: urls,
+    },
-			dialogConfigs,
+  },
-		};
+  data() {
-	},
+    const { tableConfig, urls, dialogConfigs } = initConfig.call(this);
-	created() {},
+    return {
-	mounted() {},
+      tableConfig,
-	methods: {},
+      allUrls: urls,
+      dialogConfigs,
+			triggerUpdateKey: ''
+    };
+  },
+  watch: {
+    $route: {
+      handler: function (route) {
+        if (route.query.name) {
+          this.triggerUpdateKey = Math.random().toString();
+          console.log("[$oute changed] val.query.name", route.query.name, this.triggerUpdateKey);
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
 };
 </script>