1

huangxiaoqiang

2026-04-02 1e31ba969833df0506be39fa54b4e5fc5930e00c

 Code Management/WMS/WIDESEA_WMSClient/src/extension/basic/extend/GetLocationStatus.vue

@@ -1,292 +1,141 @@
<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>
  <vol-box :lazy="true" v-model="model" title="货位状态变动记录" :width="1820" :padding="5">
    <div class="table-item">
      <div class="table-item-header">
        <div class="table-item-border"></div> <span class="table-item-text">货位状态变动记录</span>
        <div class="table-item-buttons">
          <div>
            <el-button type="primary" @click="reload" color="#95d475" plain>刷新</el-button>
          </div>
        </div>
      </div>
    </vol-box>
  </div>
      <!-- <el-alert type="success" title="" style="line-height: 12px;">
              功能：表尾合计、文件上传、编辑、api加载数据、自动分页、自定义按钮、行点击事件、加载loadBefore自定义等。。。
          </el-alert> -->
      <vol-table @loadBefore="loadBefore" @loadAfter="loadAfter" ref="table" :url="url" index :tableData="tableData"
        :columns="columns" :height="700" :pagination-hide="false" :load-key="true" :column-index="true"></vol-table>
    </div>
    <template #footer>
      <div>
        <el-button type="primary" size="small" @click="model = false">确认</el-button>
        <el-button type="default" size="small" @click="model = false">关闭</el-button>
      </div>
    </template>
  </vol-box>
</template>

<script>
<script lang="jsx">
//如果是自定义vue页面使用的配置，在vue页面的script后一定要加上lang="jsx"
import VolTable from "@/components/basic/VolTable.vue";
import VolBox from "@/components/basic/VolBox.vue";
export default {
  components: { VolBox },
  components: {
    'vol-table': VolTable,
    'vol-box': 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,
    };
      model: false,
      locationCode: '',
      //接口返回数据，可以框架生成的接口getPageData
      //如果是自定义的接口，需要返回的数据格式：{total:100,rows:[]}
      url: "api/LocationStatusChangeRecord/getPageData",
      columns: [{ field: 'Id', title: '主键', type: 'int', width: 110, hidden: true, readonly: true, require: true, align: 'left' },
      { field: 'locationId', title: '货位ID', type: 'int', width: 110, hidden: true, readonly: true, require: true, align: 'left' },
      { field: 'locationCode', title: '货位编号', type: 'string', width: 110, require: true, align: 'left' },
      { field: 'beforeStatus', title: '变动前货位状态', type: 'int', width: 120, align: 'left', bind: { key: "LocationState", data: [] } },
      { field: 'afterStatus', title: '变动后货位状态', type: 'int', width: 110, require: true, align: 'left', sort: true, bind: { key: "LocationState", data: [] } },
      { field: 'changeType', title: '变动类型（出库、入库、手动调整）', type: 'string', width: 70, align: 'left', bind: { key: "StatusChangeType", data: [] } },
      { field: 'orderId', title: '单据主键', type: 'string', width: 70, align: 'left', hidden: true },
      { field: 'orderNo', title: '单据编号', type: 'string', width: 110, align: 'left', hidden: true },
      { field: 'orderDetailId', title: '单据明细主键', type: 'string', width: 110, align: 'left', hidden: true },
      { field: 'taskNum', title: '任务号', type: 'string', width: 110, align: 'left' },
      { field: 'remark', title: '备注', type: 'int', width: 110, align: 'left', hidden: true },
      { field: 'creater', title: '创建人', type: 'string', sort: true, width: 110, align: 'left', hidden: true },
      { field: 'createDate', title: '创建时间', type: 'datetime', sort: true, width: 150, align: 'left', sort: true },
      { field: 'modifier', title: '修改人', type: 'string', sort: true, width: 100, align: 'left', hidden: true },
      { field: 'modifyDate', title: '修改时间', type: 'datetime', sort: true, width: 150, hidden: true, align: 'left', sort: true }
      ]
    }
  },
  methods: {
    open(row) {
      this.row = row;
      this.showDetialBox = true;
      this.getDetailData();
      this.getDictionaryData();
    //自定义按钮
    customOpen(row) {
      this.locationCode = row.locationCode;
      this.locationId = row.id;
      this.model = true;
      this.$nextTick(() => {
        this.$refs.table.load(null, true);
      })
    },
    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() {},
};
    loadBefore(params, callBack) {//调用后台接口前处理
      //设置查询条件参数
      params.wheres.push({
        name: "locationId",
        value: this.locationId,
        displayType: "text"//模糊查询
      }, {
        name: "locationCode",
        value: this.locationCode,
        displayType: "text"//模糊查询
      })

      //也可以给value设置值，后台自己解析
      // params.value=this.OrderNo

      //查询前方法也可以动态设置url参数
      //params.url='api/xxx/xx?参数1='+this.xx参数

      callBack(true)//false不会调用后台接口
    },
    //查询后方法
    loadAfter(rows, callBack, result) {
      //如果有合计：后台返回合计格式
      // var data = new {
      //     rows: [],//返回的行数据
      //     total: 200,//返回的总行数
      //     //合计
      //     summary: { TotalPrice: 100, TotalQty: 200 }
      // }
      // callBack(true)
    },
    reload() {
      this.$refs.table.load(null, true);
      this.$message.success('查询成功')
    }
  }
}
</script>

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

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

.content-text {
<style lang="less" scoped>
.table-item-header {
  display: flex;
  align-items: center;
  justify-content: center;
}
  padding: 6px;

.right-text {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
<style>
.el-table .warning-row {
  background: #e6a23c;
}
  .table-item-border {
    height: 15px;
    background: rgb(33, 150, 243);
    width: 5px;
    border-radius: 10px;
    position: relative;
    margin-right: 5px;
  }

.el-table .success-row {
  background: #f0f9eb;
}
  .table-item-text {
    font-weight: bolder;
  }

.el-table .error-row {
  background: #f56c6c;
  .table-item-buttons {
    flex: 1;
    text-align: right;
  }

  .small-text {
    font-size: 12px;
    color: #2196F3;
    margin-left: 10px;
    position: relative;
    top: 2px;
  }
}
</style>