1

hutongqing

2024-12-12 2510ff614cd2962d2a91ec1a9eb6668009e9b671

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSClient/src/extension/basic/extend/GetLocationStatus.vue

@@ -1,261 +1,292 @@
<template>
    <div>
        <vol-box v-model="showDetialBox" :lazy="true" width="1500px" :padding="15" title="入库单据明细">
            <div class="box-table" style="margin-top: 1%">
                <el-table ref="singleTable" :data="tableData" style="width: 100%; height: 100%" highlight-current-row
                    @row-click="handleRowClick" height="500px" @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.field" :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-button type="text"
                                        @click="tableButtonClick(scoped.row, item)"><i :class="item.icon"
                                            style="font-size: 22px"></i></el-button></el-tooltip>
                            </div>
                            <div v-else-if="item.type == 'tag'">
                                <el-tag size="small">
                                    {{ getDictionary(scoped.row, item) }}
                                </el-tag>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </vol-box>
    </div>
  <div>
    <vol-box
      v-model="showDetialBox"
      :lazy="true"
      width="1500px"
      :padding="15"
      title="货位状态变动记录"
    >
      <div class="box-table" style="margin-top: 1%">
        <el-table
          ref="singleTable"
          :data="tableData"
          style="width: 100%; height: 100%"
          highlight-current-row
          @row-click="handleRowClick"
          height="500px"
          @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.field"
            :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-button
                    type="text"
                    @click="tableButtonClick(scoped.row, item)"
                    ><i
                      :class="item.icon"
                      style="font-size: 22px"
                    ></i></el-button
                ></el-tooltip>
              </div>
              <div v-else-if="item.type == 'tag'">
                <el-tag size="small">
                  {{ getDictionary(scoped.row, item) }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </vol-box>
  </div>
</template>

<script>
import VolBox from "@/components/basic/VolBox.vue";
export default {
    components: { VolBox },
    data() {
        return {
            showDetialBox: false,
            row: null,
            tableData: [],
            tableColumns: [
                {
                    field: "locationId",
                    title: "货位主键",
                    type: "string",
                    width: 90,
                    align: "left",
                },
                {
                    field: "locationCode",
                    title: "货位编号",
                    type: "string",
                    width: 160,
                    align: "left",
                },
                {
                    field: "beforeStatus",
                    title: "变动前货位状态",
                    type: "tag",
                    width: 150,
                    align: "left",
                    bindKey: "locationStatusEnum"
                },
                {
                    field: "afterStatus",
                    title: "变动后货位状态",
                    type: "tag",
                    width: 150,
                    align: "left",
                    bindKey: "locationStatusEnum"
                },
                {
                    field: "changeType",
                    title: "变动类型",
                    type: "tag",
                    width: 100,
                    align: "left",
                    bindKey: "stockChangeType",
                },
                {
                    field: "orderId",
                    title: "单据主键",
                    type: "string",
                    width: 90,
                    align: "left",
                    hidden: true,
                },
                {
                    field: "orderNo",
                    title: "单据编号",
                    type: "int",
                    width: 160,
                    align: "left",
                },
                {
                    field: "orderDetailId",
                    title: "单据明细主键",
                    type: "string",
                    width: 200,
                    align: "left",
                    hidden: true,
                },
                {
                    field: "taskNum",
                    title: "任务号",
                    type: "string",
                    width: 180,
                    align: "left",
                },
                {
                    field: "creater",
                    title: "创建人",
                    type: "string",
                    width: 90,
                    align: "left",
                },
                {
                    field: "createDate",
                    title: "创建时间",
                    type: "datetime",
                    width: 160,
                    align: "left",
                    sort: true,
                },
                {
                    field: "modifier",
                    title: "修改人",
                    type: "string",
                    width: 100,
                    align: "left",
                    hidden: true,
                },
                {
                    field: "modifyDate",
                    title: "修改时间",
                    type: "datetime",
                    width: 160,
                    align: "left",
                    hidden: true,
                    sort: true,
                },
                {
                    field: "remark",
                    title: "备注",
                    type: "string",
                    width: 100,
                    align: "left",
                    hidden: true,
                },
            ],
            paginations: {
                sort: "CreateDate",
                order: "desc",
                Foots: "",
                total: 0,
                // 2020.08.29增加自定义分页条大小
                sizes: [30, 60, 100, 120],
                size: 30, // é»˜è®¤åˆ†é¡µå¤§å°
                Wheres: [],
                page: 1,
                rows: 30,
            },
            dictionaryList: null,
        };
  components: { VolBox },
  data() {
    return {
      showDetialBox: false,
      row: null,
      tableData: [],
      tableColumns: [
        {
          field: "locationId",
          title: "货位主键",
          type: "string",
          width: 90,
          align: "left",
        },
        {
          field: "locationCode",
          title: "货位编号",
          type: "string",
          align: "left",
        },
        {
          field: "beforeStatus",
          title: "变动前货位状态",
          type: "tag",
          width: 150,
          align: "left",
          bindKey: "locationStatusEnum",
        },
        {
          field: "afterStatus",
          title: "变动后货位状态",
          type: "tag",
          width: 150,
          align: "left",
          bindKey: "locationStatusEnum",
        },
        {
          field: "changeType",
          title: "变动类型",
          type: "tag",
          width: 100,
          align: "left",
          bindKey: "locationChangeType",
        },
        {
          field: "orderId",
          title: "单据主键",
          type: "string",
          width: 90,
          align: "left",
          hidden: true,
        },
        {
          field: "orderNo",
          title: "单据编号",
          type: "int",
          width: 160,
          align: "left",
        },
        {
          field: "orderDetailId",
          title: "单据明细主键",
          type: "string",
          width: 200,
          align: "left",
          hidden: true,
        },
        {
          field: "taskNum",
          title: "任务号",
          type: "string",
          width: 180,
          align: "left",
        },
        {
          field: "creater",
          title: "创建人",
          type: "string",
          width: 90,
          align: "left",
        },
        {
          field: "createDate",
          title: "创建时间",
          type: "datetime",
          width: 160,
          align: "left",
          sort: true,
        },
        {
          field: "modifier",
          title: "修改人",
          type: "string",
          width: 100,
          align: "left",
          hidden: true,
        },
        {
          field: "modifyDate",
          title: "修改时间",
          type: "datetime",
          width: 160,
          align: "left",
          hidden: true,
          sort: true,
        },
        {
          field: "remark",
          title: "备注",
          type: "string",
          width: 100,
          align: "left",
          hidden: true,
        },
      ],
      paginations: {
        sort: "CreateDate",
        order: "desc",
        Foots: "",
        total: 0,
        // 2020.08.29增加自定义分页条大小
        sizes: [30, 60, 100, 120],
        size: 30, // é»˜è®¤åˆ†é¡µå¤§å°
        Wheres: [],
        page: 1,
        rows: 30,
      },
      dictionaryList: null,
    };
  },
  methods: {
    open(row) {
      this.row = row;
      this.showDetialBox = true;
      this.getDetailData();
      this.getDictionaryData();
    },
    methods: {
        open(row) {
            this.row = row;
            this.showDetialBox = true;
            this.getDetailData();
            this.getDictionaryData();
        },
        getDetailData() {
            this.http
                .post(
                    "/api/LocationStatusChangeRecord/GetLocationState?id=" + this.row.id,
                    {},
                    true
                )
                .then((x) => {
                    if (!x.status) return this.$message.error(x.message);
                    this.tableData = x.data;
                });
        },
        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.field]);
                    console.log(dicItem);
                    if (dicItem) {
                        return dicItem.value;
                    }
                    else {
                        return row[column.field];
                    }
                } else {
                    return row[column.field];
                }
            }
        },
    getDetailData() {
      this.http
        .post(
          "/api/LocationStatusChangeRecord/GetLocationState?id=" + this.row.id,
          {},
          true
        )
        .then((x) => {
          if (!x.status) return this.$message.error(x.message);
          this.tableData = x.data;
        });
    },
    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.field]);
          console.log(dicItem);
          if (dicItem) {
            return dicItem.value;
          } else {
            return row[column.field];
          }
        } else {
          return row[column.field];
        }
      }
    },
  },


    created() { },
  created() {},
};
</script>

<style scoped>
.el-col {
    border-radius: 4px;
  border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
  border-radius: 4px;
  min-height: 36px;
}

.content-text {
    display: flex;
    align-items: center;
    justify-content: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-text {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
<style>
.el-table .warning-row {
    background: #e6a23c;
  background: #e6a23c;
}

.el-table .success-row {
    background: #f0f9eb;
  background: #f0f9eb;
}

.el-table .error-row {
    background: #f56c6c;
  background: #f56c6c;
}
</style>