update 订单管理的cell-class-name

2023-08-09 14:11:57 +08:00
parent bfd6a42349
commit bc5b6c2868
8 changed files with 161 additions and 56 deletions
--- a/src/views/modules/pms/blenderOrder/config.js
+++ b/src/views/modules/pms/blenderOrder/config.js
@@ -305,7 +305,13 @@ export default function () {
  return {
    dialogConfigs,
    tableConfig: {
-      table: null, // 此处可省略，el-table 上的配置项
+      table: {
+        "cell-class-name": ({ row, column, rowIndex, columnIndex }) => {
+          if ("statusDictValue" in row && row.statusDictValue == "2") {
+            return "cell-in-production";
+          }
+        },
+      },
      column: tableProps, // el-column-item 上的配置项
    },
    headFormConfigs: {
--- a/src/views/modules/pms/blenderOrder/index.vue
+++ b/src/views/modules/pms/blenderOrder/index.vue
@@ -1,5 +1,6 @@
 <template>
  <ListViewWithHead
+    class="highlight-cell"
    key="blender-order"
    :table-config="tableConfig"
    :head-config="headFormConfigs"
@@ -34,4 +35,11 @@ export default {
 };
 </script>

-<style scoped></style>
+<style scoped>
+.highlight-cell >>> .cell-in-production {
+  background: rgba(33, 207, 134, 0.35);
+}
+.highlight-cell >>> .hover-row .cell-in-production {
+  background: rgba(33, 207, 134, 0.7);
+}
+</style>
--- a/src/views/modules/pms/blenderPress/components/ListViewWithHead.vue
+++ b/src/views/modules/pms/blenderPress/components/ListViewWithHead.vue
@@ -220,8 +220,11 @@ export default {
          }).then(() => {
            this.overlayVisible = true;
            return this.$http
-              .post(this.urls.pressDetach, data /* { id: data } */, { headers: { "Content-Type": "application/json" } })
+              .post(this.urls.pressDetach, data /* { id: data } */, {
+                headers: { "Content-Type": "application/json" },
+              })
              .then(({ data: res }) => {
+                this.overlayVisible = false;
                if (res.code === 0) {
                  this.$message({
                    message: `下发成功`,
@@ -238,7 +241,6 @@ export default {
                    duration: 1500,
                  });
                }
-                this.overlayVisible = false;
              });
          });
        }
@@ -329,7 +331,9 @@ export default {
              .then(({ data: res }) => {
                if (res.code === 0) {
                  this.$message({
-                    message: `${type === "detach" ? "下发" : type === "pause-blender" ? "暂停" : "开始"}成功`,
+                    message: `${
+                      type === "detach" ? "下发" : type === "pause-blender" ? "暂停" : "开始"
+                    }成功`,
                    type: "success",
                    duration: 1500,
                    onClose: () => {
--- a/src/views/modules/pms/blenderPress/config.js
+++ b/src/views/modules/pms/blenderPress/config.js
@@ -9,11 +9,19 @@ export default function () {
    { width: 160, prop: "orderCode", label: "主订单号" },
    { width: 60, prop: "orderCate", label: "子号" },
    { width: 160, prop: "code", label: "混料订单号" },
-    { width: 60, prop: "percent", label: "进度", filter: (val) => (val !== null && val !== undefined ? val + " %" : "-") },
+    {
+      width: 60,
+      prop: "percent",
+      label: "进度",
+      filter: (val) => (val !== null && val !== undefined ? val + " %" : "-"),
+    },
    {
      prop: "statusDictValue",
      label: "订单状态",
-      filter: (val) => (val !== null && val !== undefined ? ["等待", "确认", "生产", "暂停", "结束", "接受", "拒绝", "已下发"][val] : "-"),
+      filter: (val) =>
+        val !== null && val !== undefined
+          ? ["等待", "确认", "生产", "暂停", "结束", "接受", "拒绝", "已下发"][val]
+          : "-",
    },
    { prop: "bomCode", label: "配方" },
    { width: 120, prop: "qty", label: "混料总量 [kg]" },
@@ -25,20 +33,30 @@ export default function () {
      prop: "operations",
      name: "操作",
      fixed: "right",
-      width: 180,
+      width: 188,
      subcomponent: TableOperaionComponent,
      options: [
        {
-          name: "edit", label: "编辑", emitFull: true, icon: 'edit-outline', enable: injectData => {
-            const v = injectData.statusDictValue
-            if (v && +v === 1) return true
-            return false
-          }
+          name: "edit",
+          label: "编辑",
+          emitFull: true,
+          icon: "edit-outline",
+          enable: (injectData) => {
+            const v = injectData.statusDictValue;
+            if (v && +v === 1) return true;
+            return false;
+          },
        },
-        { name: "view-batch", label: "查看批次", color: "#ff8000", toRouter: 'pms-blenderBatch', icon: 'document-copy' }, // 路由跳转至 pms-blenderBatch
-        { name: "pause-blender", label: "暂停", color: "#f10000", icon: 'video-pause' },
-        { name: "start-blender", label: "开始", color: "#0b58ff", icon: 'video-play' },
-        { name: "detach", label: "下发", color: "#099", icon: 'bottom-right' },
+        {
+          name: "view-batch",
+          label: "查看批次",
+          color: "#ff8000",
+          toRouter: "pms-blenderBatch",
+          icon: "document-copy",
+        }, // 路由跳转至 pms-blenderBatch
+        { name: "pause-blender", label: "暂停", color: "#f10000", icon: "video-pause" },
+        { name: "start-blender", label: "开始", color: "#0b58ff", icon: "video-play" },
+        { name: "detach", label: "下发", color: "#099", icon: "bottom-right" },
      ],
    },
  ];
@@ -48,8 +66,20 @@ export default function () {
    { width: 160, prop: "orderCode", label: "主订单号" },
    { width: 60, prop: "orderCate", label: "子号" },
    { width: 160, prop: "code", label: "压制订单号" },
-    { width: 60, prop: "percent", label: "进度", filter: (val) => (val !== null && val !== undefined ? val + " %" : "-") },
-    { prop: "statusDictValue", label: "订单状态", filter: (val) => (val !== null && val !== undefined ? ["等待", "确认", "生产", "暂停", "结束", "接受", "拒绝", "已下发"][val] : "-"), },
+    {
+      width: 60,
+      prop: "percent",
+      label: "进度",
+      filter: (val) => (val !== null && val !== undefined ? val + " %" : "-"),
+    },
+    {
+      prop: "statusDictValue",
+      label: "订单状态",
+      filter: (val) =>
+        val !== null && val !== undefined
+          ? ["等待", "确认", "生产", "暂停", "结束", "接受", "拒绝", "已下发"][val]
+          : "-",
+    },
    { prop: "startTime", label: "开始时间" },
    { width: 100, prop: "shapeCode", label: "砖型" },
    { prop: "pressCode", label: "压机" },
@@ -64,11 +94,10 @@ export default function () {
      fixed: "right",
      width: 80,
      subcomponent: TableOperaionComponent,
-      options: [{ name: 'detach', label: '下发', icon: 'bottom-right' }]
+      options: [{ name: "detach", label: "下发", icon: "bottom-right" }],
    },
  ];

-
  const headFormFields = [
    {
      prop: "code",
@@ -109,8 +138,8 @@ export default function () {
        [
          {
            forceDisabled: true,
-            prop: 'code',
-            label: '混料订单号'
+            prop: "code",
+            label: "混料订单号",
          },
        ],
        [
@@ -119,10 +148,11 @@ export default function () {
            label: "配方",
            prop: "bomId",
            options: [],
-            optionLabelProp: 'code',
+            optionLabelProp: "code",
            /** ====== */
-            fetchData: (bomCode) => this.$http.get('/pms/bom/pageVersion', { params: { key: bomCode, limit: 999, page: 1 } }),
-            fetchDataParam: 'bomCode',
+            fetchData: (bomCode) =>
+              this.$http.get("/pms/bom/pageVersion", { params: { key: bomCode, limit: 999, page: 1 } }),
+            fetchDataParam: "bomCode",
            delayRequest: true,
            /** ====== */
            rules: { required: true, message: "必填项不能为空", trigger: "blur" },
@@ -135,8 +165,9 @@ export default function () {
            label: "混料机",
            prop: "blender",
            options: [],
-            optionLabelProp: 'code',
-            fetchData: () => this.$http.get('/pms/equipment/list', { params: { workSequenceName: '混料工序' } }),
+            optionLabelProp: "code",
+            fetchData: () =>
+              this.$http.get("/pms/equipment/list", { params: { workSequenceName: "混料工序" } }),
            rules: { required: true, message: "必填项不能为空", trigger: "blur" },
            elparams: { clearable: true, filterable: true, placeholder: "请选择混料机" },
          },
@@ -146,18 +177,30 @@ export default function () {
        { name: "add", label: "保存", type: "primary", permission: "", showOnEdit: false },
        { name: "update", label: "更新", type: "primary", permission: "", showOnEdit: true },
        // { name: "reset", label: "重置", type: "warning", showAlways: true },
-      ]
+      ],
    },
  };

  return {
    dialogConfigs,
    tableConfig: {
-      table: null,
+      table: {
+        "cell-class-name": ({ row, column, rowIndex, columnIndex }) => {
+          if ("statusDictValue" in row && row.statusDictValue == "2") {
+            return "cell-in-production";
+          }
+        },
+      },
      column: tableProps,
    },
    pressTableConfig: {
-      table: null,
+      table: {
+        "cell-class-name": ({ row, column, rowIndex, columnIndex }) => {
+          if ("statusDictValue" in row && row.statusDictValue == "2") {
+            return "cell-in-production";
+          }
+        },
+      },
      column: pressTableProps,
    },
    headFormConfigs: {
@@ -171,7 +214,7 @@ export default function () {
      pauseBlender: "/pms/trans/blenderPause",
      startBlender: "/pms/trans/blenderStart",
      pageIsPostApi: true, // 使用post接口来获取page数据，极少用，目前基本上只有工艺管理模块里在用
-      changeBlender: '/pms/order/changeBlender',
+      changeBlender: "/pms/order/changeBlender",
      pressPage: "/pms/pressOrder/pageView",
      pressDetach: "/pms/trans/pressDeli",
    },
--- a/src/views/modules/pms/blenderPress/index.vue
+++ b/src/views/modules/pms/blenderPress/index.vue
@@ -1,12 +1,12 @@
 <template>
  <ListViewWithHead
+    class="highlight-cell"
    key="blender-order"
    :table-config="tableConfig"
    :press-table-config="pressTableConfig"
    :head-config="headFormConfigs"
    :dialog-configs="dialogConfigs"
-    :list-query-extra="[]"
-  />
+    :list-query-extra="[]" />
 </template>

 <script>
@@ -37,4 +37,11 @@ export default {
 };
 </script>

-<style scoped></style>
+<style scoped>
+.highlight-cell >>> .cell-in-production {
+  background: rgba(33, 207, 134, 0.35);
+}
+.highlight-cell >>> .hover-row .cell-in-production {
+  background: rgba(33, 207, 134, 0.7);
+}
+</style>
--- a/src/views/modules/pms/order/index.vue
+++ b/src/views/modules/pms/order/index.vue
@@ -6,22 +6,20 @@
        :refresh-key="keys.ongoing"
        :extra-search-conditions="{ code: '' }"
        :page-url="allUrls.confirmedOrder"
-        :table-config="{ table: null, column: tableConfigs.ongoingTable }"
+        :table-config="{ table: { 'cell-class-name': cellClassName }, column: tableConfigs.ongoingTable }"
        :head-config="{ title: '进行中的订单', form: headFormConfigs.ongoingTableSearch }"
        :dialog-config="dialogConfigs"
-        @refresh-tables="handleRefreshTable"
-        />
-        <ListSectionWithHead
+        @refresh-tables="handleRefreshTable" />
+      <ListSectionWithHead
        id="pending"
        :refresh-key="keys.pending"
        :extra-search-conditions="{ code: '' }"
        :page-url="allUrls.unConfirmedOrder"
-        :table-config="{ table: null, column: tableConfigs.pendingTable }"
+        :table-config="{ table: { 'cell-class-name': cellClassName }, column: tableConfigs.pendingTable }"
        :head-config="{ title: '等待中的订单', form: headFormConfigs.pendingTableSearch }"
        :dialog-config="dialogConfigs"
-        @refresh-tables="handleRefreshTable"
-        />
-        <!-- <ListSectionWithHead
+        @refresh-tables="handleRefreshTable" />
+      <!-- <ListSectionWithHead
        id="finished"
        :refresh-key="keys.finished"
        :extra-search-conditions="{ code: '' }"
@@ -73,22 +71,29 @@ export default {
  },
  methods: {
    scrollTo(pos) {
-      const el = document.querySelector(pos)
+      const el = document.querySelector(pos);
      window.scrollTo({
        top: el.offsetTop - 16,
-        behavior: 'smooth'
-      })
+        behavior: "smooth",
+      });
    },

    handleRefreshTable(tableNameList) {
      if (Array.isArray(tableNameList)) {
-        tableNameList.forEach(name => {
-          this.keys[name] = Math.random().toString()
-        })
+        tableNameList.forEach((name) => {
+          this.keys[name] = Math.random().toString();
+        });
      } else {
-        console.log('handleRefreshTable 需要传递数组!')
+        console.log("handleRefreshTable 需要传递数组!");
      }
-    }
+    },
+
+    cellClassName({ row, column, rowIndex, columnIndex }) {
+      if ("statusDictValue" in row && row.statusDictValue == "2") {
+        console.log("setting cell style.....", row);
+        return "cell-in-production";
+      }
+    },
  },
 };
 </script>
@@ -138,4 +143,10 @@ export default {
  /* margin-left: 144px; */
  flex-grow: 1;
 }
+.list-section-with-head >>> .cell-in-production {
+  background: rgba(33, 207, 134, 0.35);
+}
+.list-section-with-head >>> .hover-row .cell-in-production {
+  background: rgba(33, 207, 134, 0.7);
+}
 </style>
--- a/src/views/modules/pms/pressOrder/config.js
+++ b/src/views/modules/pms/pressOrder/config.js
@@ -10,8 +10,20 @@ export default function () {
    { width: 160, prop: "orderCode", label: "主订单号" },
    { width: 60, prop: "orderCate", label: "子号" },
    { width: 160, prop: "code", label: "压制订单号" },
-    { width: 90, prop: "percent", label: "进度", filter: (val) => (val !== null && val !== undefined ? val + " %" : "-") },
-    { prop: "statusDictValue", label: "订单状态", filter: (val) => (val !== null && val !== undefined ? ["等待", "确认", "生产", "暂停", "结束", "接受", "拒绝", "已下发"][val] : "-"), },
+    {
+      width: 90,
+      prop: "percent",
+      label: "进度",
+      filter: (val) => (val !== null && val !== undefined ? val + " %" : "-"),
+    },
+    {
+      prop: "statusDictValue",
+      label: "订单状态",
+      filter: (val) =>
+        val !== null && val !== undefined
+          ? ["等待", "确认", "生产", "暂停", "结束", "接受", "拒绝", "已下发"][val]
+          : "-",
+    },
    { width: 160, prop: "startTime", label: "开始时间", filter: timeFilter },
    { width: 100, prop: "shapeCode", label: "砖型" },
    { prop: "pressCode", label: "压机" },
@@ -30,7 +42,7 @@ export default function () {
      fixed: "right",
      width: 80,
      subcomponent: TableOperaionComponent,
-      options: [{ name: 'detach', label: '下发', icon: 'bottom-right' }] // , url: '/pms/trans/pressDeli' }]
+      options: [{ name: "detach", label: "下发", icon: "bottom-right" }], // , url: '/pms/trans/pressDeli' }]
      // options: ["copy", { name: "edit", label: "编辑", icon: "edit-outline" }, { name: "delete", icon: "delete", label: "删除", emitFull: true, permission: "pms:blenderStep:delete" }],
    },
  ];
@@ -233,7 +245,13 @@ export default function () {
  return {
    // dialogConfigs,
    tableConfig: {
-      table: null, // 此处可省略，el-table 上的配置项
+      table: {
+        "cell-class-name": ({ row, column, rowIndex, columnIndex }) => {
+          if ("statusDictValue" in row && row.statusDictValue == "2") {
+            return "cell-in-production";
+          }
+        },
+      },
      column: tableProps, // el-column-item 上的配置项
    },
    headFormConfigs: {
--- a/src/views/modules/pms/pressOrder/index.vue
+++ b/src/views/modules/pms/pressOrder/index.vue
@@ -1,5 +1,6 @@
 <template>
  <ListViewWithHead
+    class="highlight-cell"
    :table-config="tableConfig"
    :head-config="headFormConfigs"
    :dialog-configs="dialogConfigs"
@@ -30,4 +31,11 @@ export default {
 };
 </script>

-<style scoped></style>
+<style scoped>
+.highlight-cell >>> .cell-in-production {
+  background: rgba(33, 207, 134, 0.35);
+}
+.highlight-cell >>> .hover-row .cell-in-production {
+  background: rgba(33, 207, 134, 0.7);
+}
+</style>