MeiRuiAn/JiAnLiKu.git

<template>
  <div>
    <vol-box
      v-model="showDetialBox"
      :lazy="true"
      width="75%"
      :padding="15"
      title="单据明细信息"
    >
      <div class="box-head">
        <el-alert :closable="false" style="width: 100%">
          <el-row>
            <el-col :span="16">
              <span>已选中 {{ selection.length }} 项</span>
            </el-col>
            <el-col :span="8">
              <el-link
                type="primary"
                size="small"
                style="float: left; height: 20px;"
                @click="cancelOutFeedbackERP"
                >出库明细取消推送ERP</el-link
              >
              <el-link
                type="primary"
                size="small"
                style="float: right; height: 20px; margin-right: 10px"
                @click="outbound"
                >直接出库</el-link
              >
              <el-link
                type="primary"
                size="small"
                style="float: right; height: 20px; margin-right: 10px"
                @click="getData"
                >刷新</el-link
              ></el-col
            >
          </el-row>
        </el-alert>
      </div>
      <div class="box-table" style="margin-top: 1%">
        <el-table
          ref="singleTable"
          :data="tableData"
          :summary-method="getSummaries"
          show-summary
          style="width: 100%; height: 100%"
          highlight-current-row
          @current-change="handleCurrentChange"
          height="500px"
          @row-click="handleRowClick"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            fixed="left"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            v-for="(item, index) in tableColumns.filter((x) => !x.hidden)"
            :key="index"
            :prop="item.prop"
            :label="item.title"
            :width="item.width"
            align="center"
          >
            <template #default="scoped">
              <!-- 图标列 -->
              <div v-if="item.type == 'icon'">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.title"
                  placement="bottom"
                  ><el-link
                    type="primary"
                    :disabled="getButtonEnable(item.prop, scoped.row)"
                    @click="tableButtonClick(scoped.row, item)"
                    ><i :class="item.icon" style="font-size: 22px"></i></el-link
                ></el-tooltip>
              </div>
 
              <!-- 标签列 -->
              <div v-else-if="item.type == 'tag'">
                <el-tag size="small">
                  {{ getDictionary(scoped.row, item) }}
                </el-tag>
              </div>
 
              <!-- 普通文本列 - 带溢出隐藏和Tooltip -->
              <div v-else>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="formatCellContent(scoped.row[item.prop])"
                  placement="top"
                  :disabled="!shouldShowTooltip(scoped.row[item.prop], item)"
                >
                  <span 
                    class="ellipsis-cell" 
                    :style="{ width: calculateCellWidth(item) }"
                  >
                    {{ formatCellContent(scoped.row[item.prop]) }}
                  </span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </vol-box>
    <stock-select ref="child" @parentCall="parentCall"></stock-select>
    <selected-stock
      ref="selectedStock"
      @parentCall="parentCall"
    ></selected-stock>
  </div>
</template>
<script>
import VolBox from "@/components/basic/VolBox.vue";
import VolForm from "@/components/basic/VolForm.vue";
import StockSelect from "./StockSelect.vue";
import SelectedStock from "./SelectedStock.vue";
export default {
  components: { VolBox, VolForm, StockSelect, SelectedStock },
  data() {
    return {
      row: null,
      showDetialBox: false,
      flag: false,
      currentRow: null,
      selection: [],
      tableData: [],
      tableColumns: [
        {
          prop: "id",
          title: "Id",
          type: "int",
          width: 90,
          hidden: true,
        },
        {
          prop: "orderId",
          title: "出库单主键",
          type: "string",
          width: 90,
          hidden: true,
        },
        {
          prop: "viewDetail",
          title: "出库详细",
          type: "icon",
          width: 90,
          icon: "el-icon-s-operation",
        },
        {
          prop: "materielCode",
          title: "物料编号",
          type: "string",
          width: 150,
        },
        {
          prop: "batchNo",
          title: "批次号",
          type: "string",
          width: 180,
        },
        {
          prop: "supplierBatch",
          title: "供应商批次号",
          type: "string",
          width: 180,
        },
        {
          prop: "orderQuantity",
          title: "单据数量",
          type: "string",
          width: 90,
        },
        {
          prop: "overOutQuantity",
          title: "已出数量",
          type: "string",
          width: 90,
        },
        {
          prop: "remark",
          title: "备注",
          type: "string",
          width: 180,
        },
        {
          prop: "orderDetailStatus",
          title: "订单明细状态",
          type: "tag",
          width: 180,
          bindKey: "orderDetailStatusEnum",
        },
        {
          prop: "materielName",
          title: "物料名称",
          type: "string",
          width: 150,
        },
        {
          prop: "locationName",
          title: "出库货位",
          type: "string",
          width: 200,
        },
        {
          prop: "creater",
          title: "创建人",
          type: "string",
          width: 90,
        },
        {
          prop: "createDate",
          title: "创建时间",
          type: "datetime",
          width: 160,
        },
        {
          prop: "modifier",
          title: "修改人",
          type: "string",
          width: 100,
        },
        {
          prop: "modifyDate",
          title: "修改时间",
          type: "datetime",
          width: 160,
        },
        {
          prop: "lockQuantity",
          title: "锁定数量",
          type: "int",
          width: 90,
        },
      ],
      paginations: {
        sort: "id",
        order: "desc",
        Foots: "",
        total: 0,
        sizes: [60, 100, 120],
        size: 60,
        Wheres: [],
        page: 1,
        rows: 60,
      },
      searchFormOptions: [
        [
          {
            title: "单据编号",
            field: "allocation_code",
            type: "like",
          },
          {
            title: "单据类型",
            field: "allocation_type",
            type: "select",
            dataKey: "OrderType",
            data: [],
          },
          {
            title: "单据状态",
            field: "allocation_state",
            type: "select",
            dataKey: "OrderState",
            data: [],
          },
        ],
      ],
      searchFormFields: {
        allocation_code: "",
        allocation_type: "",
        allocation_state: "",
      },
      dictionaryList: null,
    };
  },
  methods: {
    open(row) {
      this.row = row;
      this.showDetialBox = true;
      this.getDictionaryData();
      this.getData();
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        
        // 仅对指定数值列求和并保留两位小数
        if (['lockQuantity', 'overOutQuantity', 'orderQuantity'].includes(column.property)) {
          const values = data.map(item => Number(item[column.property]))
          
          if (!values.every(value => isNaN(value))) {
            // 计算总和
            const total = values.reduce((prev, curr) => {
              return prev + (isNaN(curr) ? 0 : curr)
            }, 0)
            
            // 保留两位小数
            sums[index] = total.toFixed(2)
          } else {
            sums[index] = '-'
          }
        } else {
          sums[index] = ''
        }
      })
 
      return sums
    },
    getData() {
      var wheres = [{ name: "orderId", value: this.row.id }];
      var param = {
        page: this.paginations.page,
        rows: this.paginations.rows,
        sort: this.paginations.sort,
        order: this.paginations.order,
        wheres: JSON.stringify(wheres),
      };
      this.http
        .post("api/OutboundOrderDetail/GetPageData", param, "查询中")
        .then((x) => {
          this.tableData = x.rows;
        });
    },
    tableButtonClick(row, column) {
      if (column.prop == "assignStock") {
        this.$refs.child.open(row);
      } else {
        this.$refs.selectedStock.open(row);
      }
    },
    lockstocks() {
      if (this.selection.length === 0) {
        return this.$message.error("请选择单据明细");
      }
      var keys = this.selection.map((item) => item.id);
      this.http
        .post("api/OutboundOrderDetail/LockOutboundStocks", keys, "数据处理中")
        .then((x) => {
          if (!x.status) return this.$message.error(x.message);
          this.$message.success("操作成功");
          this.showDetialBox = false;
          this.$emit("parentCall", ($vue) => {
            $vue.getData();
          });
        });
    },
    outbound() {
      if (this.selection.length === 0) {
        return this.$message.error("请选择单据明细");
      }
      var keys = this.selection.map((item) => item.id);
      this.http
        .post("api/Task/WMSGenerateOutboundTask", keys, "数据处理中")
        .then((x) => {
          if (!x.status) return this.$message.error(x.message);
          this.$message.success("操作成功");
          this.showDetialBox = false;
          this.$emit("parentCall", ($vue) => {
            $vue.getData();
          });
        });
    },
 
    cancelOutFeedbackERP() {
      if (this.selection.length === 0) {
        return this.$message.error("请选择单据明细");
      }
      var keys = this.selection.map((item) => item.id);
      this.$confirm("是否取消该出库单明细","单据取消警告",{
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
        }).then(() => {
          this.http
          .post("api/OutboundOrderDetail/CancelOutFeedbackERP", keys, "数据处理中")
          .then((x) => {
            if (!x.status) return this.$message.error(x.message);
            this.$message.success("操作成功");
            this.showDetialBox = false;
            this.$emit("parentCall", ($vue) => {
              $vue.getData();
            });
          });
        });
    },
 
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    getButtonEnable(propName, row) {
      if (propName == "assignStock") {
        if (
          row.orderDetailStatus !== 0 &&
          row.orderDetailStatus !== 60 &&
          row.orderDetailStatus !== 70 &&
          row.orderDetailStatus !== 80
        ) {
          return true;
        } else {
          return false;
        }
      }
      return false;
    },
    parentCall(fun) {
      if (typeof fun != "function") {
        return console.log("扩展组件需要传入一个回调方法才能获取父级Vue对象");
      }
      fun(this);
    },
    handleRowClick(row) {
      this.$refs.singleTable.toggleRowSelection(row);
    },
    handleSelectionChange(val) {
      this.selection = val;
    },
    getDictionaryData() {
      if (this.dictionaryList) {
        return;
      }
      var param = [];
      this.tableColumns.forEach((x) => {
        if (x.type == "tag" && x.bindKey != "") {
          param.push(x.bindKey);
        }
      });
      this.http
        .post("api/Sys_Dictionary/GetVueDictionary", param, "查询中")
        .then((x) => {
          if (x.length > 0) {
            this.dictionaryList = x;
          }
        });
    },
    getDictionary(row, column) {
      if (this.dictionaryList) {
        var item = this.dictionaryList.find((x) => x.dicNo == column.bindKey);
        if (item) {
          var dicItem = item.data.find((x) => x.key == row[column.prop]);
          if (dicItem) {
            return dicItem.value;
          } else {
            return row[column.prop];
          }
        } else {
          return row[column.prop];
        }
      }
    },
    // 格式化单元格内容，处理null/undefined
    formatCellContent(content) {
      if (content === null || content === undefined) {
        return "无数据";
      }
      // 对日期类型进行特殊处理（如果需要）
      return content.toString();
    },
    // 计算单元格宽度，预留边距
    calculateCellWidth(column) {
      // 如果列定义了宽度，减去20px作为内边距
      if (column.width) {
        return `${column.width - 20}px`;
      }
      // 未定义宽度则使用100%
      return "100%";
    },
    // 判断是否需要显示Tooltip
    shouldShowTooltip(content, column) {
      // 标记为不需要溢出处理的列不显示Tooltip
      if (column.noEllipsis) {
        return false;
      }
      
      // 空内容不显示Tooltip
      const cellContent = this.formatCellContent(content);
      if (cellContent === "无数据") {
        return false;
      }
      
      // 内容较短时也不显示Tooltip（根据实际需求调整长度阈值）
      return cellContent.length > 8;
    }
  },
};
</script>
<style scoped>
.text-button {
  border: 0px;
}
 
/* 文本溢出隐藏样式 */
.ellipsis-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
  display: inline-block;
  max-width: 100%;
}
</style>
 
<style>
.text-button:hover {
  background-color: #f0f9eb !important;
}
 
.el-table .warning-row {
  background: oldlace;
}
 
.box-table .el-table tbody tr:hover > td {
  background-color: #d8e0d4 !important;
}
 
.box-table .el-table tbody tr.current-row > td {
  background-color: #f0f9eb !important;
}
 
.el-table .success-row {
  background: #f0f9eb;
}
 
.box-table .el-table {
  border: 1px solid #ebeef5;
}
 
/* 合计行文本溢出处理 */
.el-table__footer-wrapper .el-table__cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
}
</style>