功能，页面更新优化

helongyang

2025-06-03 166a45a9d44e03e63552c6afa975c9ef0cc902e5

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSClient/src/extension/basic/materielCodeInfo.js

@@ -1,5 +1,9 @@
//此js文件是用来自定义扩展业务代码，可以扩展一些自定义页面或者重新配置生成的代码
import gridBody from './extend/materielcodeprintView.vue'
import modelHeader from './extend/materielcodeSelectView.vue'
import modelBody from './extend/purchaseOrderNoSelectView.vue'
import modelFooter from './extend/GetOrderQuantityView.vue'
import modelSpec from './extend/GetOrderMaterielSpec.vue'
let extension = {
  components: {
    //查询界面扩展组件
@@ -7,9 +11,10 @@
    gridBody: gridBody,
    gridFooter: '',
    //新建、编辑弹出框扩展组件
    modelHeader: '',
    modelBody: '',
    modelFooter: ''
    modelHeader: modelHeader,
    modelBody: modelBody,
    modelFooter: modelFooter,
    modelSpec: modelSpec
  },
  tableAction: '', //指定某张表的权限(这里填写表名,默认不用填写)
  buttons: { view: [], box: [], detail: [] }, //扩展的按钮
@@ -33,72 +38,136 @@
      let day = String(date.getDate()).padStart(2, "0");
      return year + "-" + month + "-" + day;
    },
    // æ–°å¢žæ–¹æ³•ï¼šåŠ è½½ç‰©æ–™ç¼–号数据
    async loadMaterielCodes(option) {
      try {
        option.loading = true;
        const { page, pageSize, keyword } = option.pagination;
        const res = await this.http.post("/api/PurchaseOrderDetail/GetPurchaseOrderDetailMaterielCode", {
          warehouseId: this.editFormFields.warehouseId,
          keyword,
          page,
          pageSize
        }, true);
    
        if (res.status) {
          option.pagination.total = res.total || res.data.length;
          const newData = res.data.map(item => ({ key: item, value: item }));
          option.data = page === 1 ? newData : [...option.data, ...newData];
        }
      } catch (error) {
        this.$error("数据加载失败");
      } finally {
        option.loading = false;
      }
    },
    //下面这些方法可以保留也可以删除
    onInit() {  //框架初始化配置前，
      this.$nextTick(() => {
        let warehouseIdOption = this.getOption("warehouseId");
        let materielCodeOption = this.getOption("materielCode");
        let purchaseOrderNoOption = this.getOption("purchaseOrderNo");
        let materielQueryOption = this.getOption("materielQuery");
        warehouseIdOption.onChange = (val, option) => {
          this.editFormFields.materielCode = "";
          materielCodeOption.data = [];
          this.editFormFields.purchaseOrderNo = "";
          purchaseOrderNoOption.data = [];
          if (val == null || val == 0) {
            return this.$error("请选择仓库！")
          }
          this.http.post("/api/PurchaseOrderDetail/GetPurchaseOrderDetailMaterielCode?warehouseId=" + val, {}, true).then(
            source => {
              if (!source.status) return this.$error(source.message);
              this.$nextTick(() => {
        this.editFormOptions.forEach((option) => {
          option.forEach((item) => {
            if (item.field == 'materielCode') {
              //初始化弹出框选择器配置
              item.extra = {
                icon: 'el-icon-zoom-out', //显示图标
                text: '选择数据', //显示文本
                style: 'color: #3a8ee6;font-size: 13px;cursor: pointer;',
                //触发事件
                click: (item) => {
                  this.$refs.modelHeader.open(this.editFormFields.warehouseId);
                }
              };
            }
          });
        });
        this.editFormOptions.forEach((option) => {
          option.forEach((item) => {
            if (item.field == 'purchaseOrderNo') {
              //初始化弹出框选择器配置
              item.extra = {
                icon: 'el-icon-zoom-out', //显示图标
                text: '选择数据', //显示文本
                style: 'color: #3a8ee6;font-size: 13px;cursor: pointer;',
                //触发事件
                click: (item) => {
                  this.$refs.modelBody.open(this.editFormFields.materielCode);
                }
              };
            }
          });
        });
        this.editFormOptions.forEach((option) => {
          option.forEach((item) => {
            if (item.field == 'quantity') {
              //初始化弹出框选择器配置
              item.extra = {
                icon: 'el-icon-zoom-out', //显示图标
                text: '采购单最大数量', //显示文本
                style: 'color: #3a8ee6;font-size: 13px;cursor: pointer;',
                //触发事件
                click: (item) => {
                  this.$refs.modelFooter.open(this.editFormFields.purchaseOrderNo);
                }
              };
            }
          });
        });
        this.editFormOptions.forEach((option) => {
          option.forEach((item) => {
            if (item.field == 'materielSpec') {
              //初始化弹出框选择器配置
              item.extra = {
                icon: 'el-icon-zoom-out', //显示图标
                text: '选择物料规格', //显示文本
                style: 'color: #3a8ee6;font-size: 13px;cursor: pointer;',
                //触发事件
                click: (item) => {
                  this.$refs.modelSpec.open(this.editFormFields.purchaseOrderNo,this.editFormFields.materielCode);
                }
              };
            }
          });
        });
        // warehouseIdOption.onChange = (val, option) => {
        //   this.editFormFields.materielCode = "";
        //   materielCodeOption.data = [];
        //   this.editFormFields.purchaseOrderNo = "";
        //   purchaseOrderNoOption.data = [];
        //   if (val == null || val == 0) {
        //     return this.$error("请选择仓库！")
        //   }
        //   this.http.post("/api/PurchaseOrderDetail/GetPurchaseOrderDetailMaterielCode?warehouseId=" + val, {}, true).then(
        //     source => {
        //       if (!source.status) return this.$error(source.message);
        //       this.$nextTick(() => {

                for (let i = 0; i < source.data.length; i++) {
                  materielCodeOption.data.push({ key: source.data[i], value: source.data[i] })
                }
              })
            })
        }
        materielCodeOption.onChange = (val, option) => {
          this.editFormFields.purchaseOrderNo = "";
          purchaseOrderNoOption.data = [];
          if (val == null || val == 0) {
            return this.$error("请选择物料编号！")
          }
          this.http.post("/api/PurchaseOrderDetail/GetPurchaseOrderNos?materielCode=" + val, {}, true).then(
            source => {
              if (!source.status) return this.$error(source.message);
              this.$nextTick(() => {
                for (let i = 0; i < source.data.length; i++) {
                  purchaseOrderNoOption.data.push({ key: source.data[i], value: source.data[i] })
                }
              });
            })
        }
        //         for (let i = 0; i < source.data.length; i++) {
        //           materielCodeOption.data.push({ key: source.data[i], value: source.data[i] })
        //         }
        //       })
        //     })
        // }
        // materielCodeOption.onChange = (val, option) => {
        //   this.editFormFields.purchaseOrderNo = "";
        //   purchaseOrderNoOption.data = [];
        //   if (val == null || val == 0) {
        //     return this.$error("请选择物料编号！")
        //   }
        //   this.http.post("/api/PurchaseOrderDetail/GetPurchaseOrderNos?materielCode=" + val, {}, true).then(
        //     source => {
        //       if (!source.status) return this.$error(source.message);
        //       this.$nextTick(() => {
        //         for (let i = 0; i < source.data.length; i++) {
        //           purchaseOrderNoOption.data.push({ key: source.data[i], value: source.data[i] })
        //         }
        //       });
        //     })
        // }
      });

      // é¡µé¢åŠ è½½æ—¶åˆå§‹åŒ–已高亮的行
      const initHighlightedRows = () => {
        try {
          const highlightedRowIds = localStorage.getItem('highlightedRowIds');
          if (highlightedRowIds) {
            this.highlightedRowIds = JSON.parse(highlightedRowIds);
          } else {
            this.highlightedRowIds = [];
          }
        } catch (e) {
          console.error('Failed to load highlighted rows from localStorage:', e);
          this.highlightedRowIds = [];
        }
      };

      // ä¿å­˜é«˜äº®è¡ŒID到本地存储
      const saveHighlightedRows = () => {
        try {
          localStorage.setItem('highlightedRowIds', JSON.stringify(this.highlightedRowIds));
        } catch (e) {
          console.error('Failed to save highlighted rows to localStorage:', e);
        }
      };

      // åœ¨ç»„件初始化时调用
      initHighlightedRows();

      this.columns.push({
        field: '操作',
@@ -108,12 +177,45 @@
        align: 'center',
        formatter: (row) => {
          return (
            '<i style="cursor: pointer;color: #2d8cf0;"class="el-icon-printer">打印</i>'
            '<i style="cursor: pointer;color: #2d8cf0;" class="el-icon-printer">打印</i>'
          );
        },
        click: (row) => {
          // æ‰“开详情
          this.$refs.gridBody.open(row);
          // èŽ·å–行的唯一标识（假设row.id是唯一ID）
          const rowId = row.id;
          // æ·»åŠ åˆ°å·²é«˜äº®åˆ—表
          if (!this.highlightedRowIds.includes(rowId)) {
            this.highlightedRowIds.push(rowId);
            // ä¿å­˜åˆ°æœ¬åœ°å­˜å‚¨
            saveHighlightedRows();
            // åˆ·æ–°è¡¨æ ¼ä»¥åº”用样式
            this.$refs.gridBody.refresh();
          }
        }
      });

      // é…ç½®cellStyle
      this.columns.forEach((column) => {
        // ä¿å­˜åŽŸæœ‰çš„cellStyle函数
        const originalCellStyle = column.cellStyle;
        
        column.cellStyle = (row) => {
          // å…ˆåº”用原有的样式逻辑
          let style = originalCellStyle ? originalCellStyle(row) : {};
          
          // å¦‚果行被标记为高亮，则添加绿色背景
          if (this.highlightedRowIds.includes(row.id)) {
            style = {
              ...style,
              background: '#d4edda', 
              color: '#155724'
            };
          }
          
          return style;
        };
      });
    },
    onInited() {
@@ -155,7 +257,11 @@
        let year = date.getFullYear();
        let month = String(date.getMonth() + 1).padStart(2, "0");
        let day = String(date.getDate()).padStart(2, "0");
        this.editFormFields.lotNo = year + month + day;
        let hour= String(date.getHours()).padStart(2, "0");
        let minute= String(date.getMinutes()).padStart(2, "0");
        let second= String(date.getSeconds()).padStart(2, "0");
        //将year截取后两位
        this.editFormFields.lotNo = (year.toString().substr(-2)) + month+day + hour + minute+second;
        this.editFormFields.productionDate = year + "-" + month + "-" + day;
        this.editFormFields.effectiveDate = year + 2 + "-" + month + "-" + day;
      }