update 配方详情页面

2023-03-21 10:21:56 +08:00 · 2023-03-21 10:21:56 +08:00 · 1904b5352c
commit 1904b5352c
parent f6066eaccf
6 changed files with 130 additions and 98 deletions
--- a/src/views/atomViews/ListView.vue
+++ b/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="返回上一页">
-        <span style="margin-right: 6px;">
+      <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">
          <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>
--- a/src/views/atomViews/ListViewWithHead.vue
+++ b/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, {
--- a/src/views/modules/pms/blenderBatch/config.js
+++ b/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 为手动时，才允许编辑
    },
--- a/src/views/modules/pms/bom/config.js
+++ b/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: "sumqty", label: "配方总重量", filter: val => !!val ? val + ' kg' : '-', isEditField: true },
-        { prop: "percent", label: "配比 [%]", filter: val => !!val ? val + ' %' : '-', 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 },
+        { 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({
--- a/src/views/modules/pms/bomDetails/config.js
+++ b/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: "code", label: "料仓编码" },
-    { prop: "typeDictValue", label: "料仓类型", filter: dictFilter('liaocang') },
-    // { prop: "enabled", label: "状态", subcomponent: switchBtn }, // subcomponent
-    { prop: "materialTypeDictValue", label: "物料类型", filter: dictFilter('material_category') },
-    { prop: "density", label: "物料堆积密度" },
-    { prop: "dosHigh", label: "加料上限" },
-    { prop: "dosLow", label: "加料下限" },
-    { prop: "description", label: "描述" },
+    { prop: "syncTime", label: "同步时间", filter: timeFilter },
+    { prop: "name", label: "名称" },
+    { prop: "code", label: "编码" },
+    { prop: "sumqty", label: "	配方总重量" },
+    { prop: "shortDesc", 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" }],
    },
  ];

-  /**
-   * 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 },
-      ],
-    },
-  };
-  // 备注：弹窗弹出的时间和网速有关......
+  const dialogJustFormConfigs = null

  return {
    dialogConfigs: dialogJustFormConfigs,
@ -83,8 +36,9 @@ export default function () {
      column: tableProps, // el-column-item 上的配置项
    },
    urls: {
-      base: "/pms/materialStorageDynamic",
-      page: "/pms/materialStorageDynamic/page",
+      // base: "/pms/bom/pageVersion",
+      page: "/pms/bom/pageVersion",
+      syncUrl: '/pms/bom/sync'
      // subase: '/pms/blenderStepParam',
      // subpage: '/pms/blenderStepParam/page',
      // more...
--- a/src/views/modules/pms/bomDetails/index.vue
+++ b/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 ListView from '@/views/atomViews/ListView.vue';
+import initConfig from "./config";
+import ListView from "@/views/atomViews/ListView.vue";

 export default {
-	name: 'BomDetailsView',
-	components: { ListView },
-	provide() {
-		return {
-			urls: this.allUrls
-		}
-	},
-	data() {
-		const { tableConfig, urls, dialogConfigs } = initConfig.call(this);
-		return {
-			tableConfig,
-			allUrls: urls,
-			dialogConfigs,
-		};
-	},
-	created() {},
-	mounted() {},
-	methods: {},
+  name: "BomDetailsView",
+  components: { ListView },
+  provide() {
+    return {
+      urls: this.allUrls,
+    };
+  },
+  computed: {
+    // 配方名称
+    name() {
+      return this.$route.query.name || "";
+    },
+  },
+  data() {
+    const { tableConfig, urls, dialogConfigs } = initConfig.call(this);
+    return {
+      tableConfig,
+      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>