mj_firm_former/src/views/component/wuliaoPosition.vue

<template>
  <div class="sample-content">
    <div @click="clickBtn" style="cursor: pointer">
      <el-input
        placeholder="请输入内容"
        :value="showValue"
        id="valueDom"
      ></el-input>
    </div>
    <div class="selectArea" v-if="ifshow">
      <div @click="close" class="close-content">
        <i class="el-icon-close"></i><el-button class="closeBtn">关闭视图</el-button>
      </div>
      <div class="top-content">
        <div class="top-title">库存可视化</div>
        <div class="query-content">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="仓库区域：">
              <el-select
                v-model="formInline.cang_ku_ming_chen_value"
                placeholder="请选择样品"
              >
                <el-option
                  v-for="(item, index) in cangkuOption"
                  :key="index"
                  placeholder="区域"
                  :label="item.cang_ku_ming_chen"
                  :value="item.cang_ku_ming_chen"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="margin-left: 50px" label="货架名称： ">
              <el-select
                v-model="formInline.qu_yu_value"
                placeholder="请选择区域名称"
              >
                <el-option
                  v-for="(item, index) in quyu_arr"
                  :key="index"
                  placeholder="区域"
                  :label="item.qu_yu_"
                  :value="item.qu_yu_"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <button
                type="button"
                class="el-button el-button--primary el-button--mini"
                @click="onSubmits"
              >
                <i class="ibps-icon-search"></i><span>查询</span>
              </button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="test-quyu">
        <div class="test-list">
          <ul class="list-items">
            <li
              class="list-item quyu-item"
              :style="{
                background: quyuShow == item.qu_yu_ ? '#FF9900' : '#e5baba',
              }"
              @click="qu_yu_Event"
              v-for="item in quyu_arr"
              :key="item.qu_yu_"
            >
              <div v-if="item.qu_yu_.includes('冰箱')">
                {{ item.qu_yu_ | freezerFilters }}({{ item.cun_chu_tiao_jian }})
              </div>

              <div v-if="!item.qu_yu_.includes('冰箱')">
                {{ item.qu_yu_ | freezerFilters }}
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="body-content">
        <div class="right-view">
          <div class="goods-items">
            <div
              class="show-demo"
              v-for="(item, index) in listData"
              :key="index"
            >
              <div>
                <div class="goods-level">
                  <div class="level-dsc">
                    <!-- 第{{ index | indexfilter(listData) }}层 -->
                    第{{ index }}层
                  </div>
                  <div class="goods-list">
                    <div
                      v-for="(it, index) in listData[index]"
                      :key="index"
                      class="goods-dsc"
                      :style="{ background:(it.num) ? '#67c23a':'#e6a23c'}"
                      @click="closeView(it)"
                    >
                      <div class="top-dsc">
                        <div class="position">
                            <p>存放数量：{{ it.num || '/'}}</p>
                            <p>存放位置：{{ it.wei_zhi_ || it.cun_fang_wei_zhi_ }}</p>
                            <div style="text-align: left;">
                              <div slot="footer" class="dialog-footer" style="width:100px;display: inline-block;vertical-align: top;" @click="chakan($event,it)">详细信息查看</div>
                              <!-- <span style="width: 115px; display: inline-block; white-space: break-spaces;text-align: left;">{{ it.huo_hao_ || "空" }} </span> -->
                            </div>
                          </div>
                        <!-- <div class="position">
                          <div style="text-align: left;">
                            <div style="width:38px;display: inline-block;vertical-align: top;">名称：</div>
                            <span style="width: 115px; display: inline-block; white-space: break-spaces;text-align: left;">{{ it.wu_liao_ming_chen || '空' }} </span>
                          </div>
                          <p>
                            编码：{{
                              it.wu_liao_bian_ma_ || it.wu_liao_bian_ma_
                            }}
                          </p>
                          <p>位置：{{ it.wei_zhi_ || it.cun_fang_wei_zhi_ }}</p>
                          <div style="text-align: left;">
                            <div style="width:38px;display: inline-block;vertical-align: top;">货号:</div>
                            <span style="width: 115px; display: inline-block; white-space: break-spaces;text-align: left;">{{ it.huo_hao_ || "空" }} </span>
                          </div>
                        </div> -->
                        <!-- <div class="right-content">
                          <p>入库批号:{{ it.ru_ku_pi_hao_ || "空" }}</p>
                          <p>存储条件:{{ it.cun_chu_yao_qiu_ || "空" }}</p>
                          <p>有效期:{{ it.you_xiao_qi_ || "空" }}</p>
                          <p>库存量：{{ it.ku_cun_liang_ || "空" }}</p>
                        </div> -->
                        <!-- <div class="condition">{{ it.cun_chu_tiao_jian }}</div> -->
                      </div>
                      <div class="bottom-dsc">
                        <!-- {{ it.wu_pin_ming_cheng | specimenFilters }} -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="goodshelf-name" v-if="index == 1">
                {{ desString }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog width="70%" :title="innertitle" :visible.sync="innerVisible" append-to-body>
        <div style="height: 70vh;padding: 20px;">
          <template>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="wu_liao_ming_chen" label="名称">
              </el-table-column>
              <el-table-column prop="wu_liao_bian_ma_" label="编码" width="180">
              </el-table-column>
              <el-table-column prop="huo_hao_" label="货号" width="150">
                <template slot-scope="scope">
                  {{ scope.row.huo_hao_ || '/' }}
                </template>
              </el-table-column>
              <el-table-column prop="ru_ku_pi_hao_" label="入库批号" width="150">
              </el-table-column>
              <el-table-column prop="cun_chu_yao_qiu_" label="存储条件" width="150">
                <template slot-scope="scope">
                  {{ scope.row.cun_chu_yao_qiu_ || '/' }}
                </template>
              </el-table-column>
              <el-table-column prop="you_xiao_qi_" label="有效期" width="120">
                <template slot-scope="scope">
                  {{ scope.row.you_xiao_qi || '/' }}
                </template>
              </el-table-column>
              <el-table-column prop="ku_cun_liang_" label="库存" width="120">
              </el-table-column>
            </el-table>
          </template>
        </div>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import curdPost from "@/business/platform/form/utils/custom/joinCURD.js";
export default {
  data() {
    return {
      cangkuOption: [],
      formInline: {
        cang_ku_ming_chen_value: "耗材库",
        qu_yu_value: "1号 货架",
        huo_jia_value: "",
      },
      huojiaInfo: {
        empty: "",
        al: "",
      },
      listData: [],
      desString: "",
      warehouseOptions: [],
      quyu_arr: [],
      huo_jia_arr: [],
      // qu_yu_value: "",
      desShow: true,
      quyuShow: "",
      huojiashow: "",
      firstLoadActive: "false",
      selectActive: "",
      cenghao: [],
      warehouse: [],
      loading: false,
      pagination: {},
      secondshow: false,
      ifshow: false,
      showValue: "",
      value: "111",
      tableData: [],
      innertitle:'',
      innerVisible: false,
    };
  },
  props: {
    field: Object,
    formData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  filters: {
    indexfilter: function (value, data) {
      if (data[0]) {
        return value + 1;
      } else {
        return value;
      }
    },
    laySlice: function (value) {
      return value.split("-")[2];
    },
    freezerFilters: function (value) {
      if (value.includes("冷藏柜")) {
        return value.replace("冷藏柜", "冰箱");
      } else if (value.includes("冷冻柜")) {
        return value.replace("冷冻柜", "冰箱");
      } else {
        return value;
      }
    },
    specimenFilters: function (value) {
      if (value == "" || value == undefined) {
        return "未占用";
      } else {
        return value;
      }
    },
    bian_hao_Filters: function (value) {
      if (!value || value == undefined || value == "") {
        return "无";
      } else {
        return value;
      }
    },
  },
  // mounted() {
  //   this.loadQueryData();
  //   this.firstLoadViewData();
  //   this.firstLoadQuyu("试剂库1");
  // },
   methods: {
    closeView(value) {
      if (value.wei_zhi_) {
        this.showValue = value.wei_zhi_;
      } else if (value.cun_fang_wei_zhi_) {
        this.showValue = value.cun_fang_wei_zhi_;
      }
      //  values.cun_fang_wei_zhi_;
      const name2 = "cunFangWeiZhi"; //位置
      const value2 = this.showValue; //字段的值
      this.$emit("change-data", name2, value2);
      const name1 = "cangKuMingCheng"; //仓库名
      const value1 = this.formInline.cang_ku_ming_chen_value; //字段的值
      this.$emit("change-data", name1, value1);
      this.ifshow = !this.ifshow;
    },
    close() {
      this.ifshow = !this.ifshow;
    },
    firstLoadQuyu(cang_ku) {
      let sqlString = `select distinct qu_yu_,cun_chu_tiao_jian from t_ck where cang_ku_ming_chen = '${cang_ku}' order by qu_yu_ asc`;
      var this_ = this;
      curdPost("sql", sqlString).then((response) => {
        this_.quyu_arr = response.variables.data;
        if (!this.firstLoadActive) {
          this_.formInline.qu_yu_value = "";
        }
      });
    },
    firstLoadViewData() {
      //首次加载视图数据 默认中心仓库 耗材区
      this.formInline.cang_ku_ming_chen_value = "试剂库1";
      this.formInline.qu_yu_value = "1号试剂柜";
      this.selectActive = 1;
      this.firstLoadActive = true;
      this.quyuShow = "1号试剂柜";
      var sqlString = `select * from t_mjwlgl where cang_ku_ming_chen = '试剂库1' and cun_fang_wei_zhi_ like '%SJG1%' and ku_cun_liang_ !='0'`
      this.queryLoad(sqlString, "SJG1");
    },
    sqlSlice(value) {
      switch (value) {
        case "货架":
          return "HJ";
        case "试剂柜":
          return "SJG";
        case "冰箱":
          return "BX";
        default:
          "";
      }
    },
    loadQueryData() {
      //查询选择仓库数据查询
      var sqlString = "select distinct cang_ku_ming_chen from t_ck ORDER BY cang_ku_ming_chen DESC";
      var this_ = this;
      curdPost("sql", sqlString).then((response) => {
        this_.cangkuOption = response.variables.data;
        this_.cangkuOption.forEach((item, index) => {
          if (!item) {
            this_.cangkuOption.splice(index, 1);
          }
        });
        this_.cangkuOption[0] = this_.cangkuOption.splice(1,1,this_.cangkuOption[0])[0];
        this_.cangkuOption[3] = this_.cangkuOption.splice(4,1,this_.cangkuOption[3])[0];
      });
    },
    onSubmits() {
      this.desShow = false;
      //头部按钮查询事
      let py = this.formInline.qu_yu_value.split("号")[1].replace(/^\s*/g, "");
      let num = this.formInline.qu_yu_value.split("号")[0];
      let quyu = this.sqlSlice(py);
      let type = (quyu + num).replace(/^\s*/g, "");
      let cang_ku_ming_chen_ = this.formInline.cang_ku_ming_chen_value
      var sqlString =`select * from t_mjwlgl where cang_ku_ming_chen = '${cang_ku_ming_chen_}' and ku_cun_liang_ !='0'and cun_fang_wei_zhi_ like '%type'`
      this.queryLoad(sqlString, type);
    },
    async queryLoad(sql, py) {
      //数据加载
      let this_ = this;
      var datas = [];
      this.cenghao = [];
      const labelsMap = {}; // map存储
      let typeData = [];
      let typeArr = [];
      var sqltype = `select DISTINCT wei_zhi_ from t_ck where wei_zhi_ like ` + "'%" + py +"%'" + " and cang_ku_ming_chen ='" +this.formInline.cang_ku_ming_chen_value +"' ORDER BY wei_zhi_ ASC ";
      let classSql =`select DISTINCT SUBSTR(wei_zhi_,1,6) AS wei_zhi_  from t_ck where wei_zhi_ like ` +"'%" + py +"%'" +" and cang_ku_ming_chen ='" +this.formInline.cang_ku_ming_chen_value + "' ORDER BY wei_zhi_ ASC ";
      let wuliaos =[]
      await curdPost("sql", sql).then((res) => {
        wuliaos = res.variables.data;
      });
      var newArr = [...new Set(wuliaos.map((i) => i.cun_fang_wei_zhi_))]; // 去重的时候需要注意和普通数组不同
      var list = [];
      newArr.forEach((i) => {
        list.push(wuliaos.filter((t) => t.cun_fang_wei_zhi_ === i));
      });
      var mlist = [];
      list.forEach((i, index) => {
        mlist.push({
          cun_fang_wei_zhi_: newArr[index],
          num: i.length,
        });
      });
      
      curdPost("sql", sqltype).then((res) => {
        typeData = res.variables.data; //查询具体仓库某个货架的所有位置
        typeData.forEach((item) => {
          // 组件以货架分层的数据: {1:[],2:[],3:[],4:[],5:[],6}
          const num = item.wei_zhi_.split("-")[1];
          labelsMap[num] = [];
        });
        for (let item of mlist) {
        for (let it of typeData) {
          if (item.cun_fang_wei_zhi_ == it.wei_zhi_) {
            it.num = item.num;
          }
        }
      }
      // 初始化位置
      for (var prop in labelsMap) {
        typeData.forEach((item) => {
          // 组件以货架分层的数据: {1:[],2:[],3:[],4:[],5:[],6}
          const num = item.wei_zhi_.split("-")[1];
          if (num === prop) {
            labelsMap[prop].push({
              cun_fang_wei_zhi_: item.wei_zhi_,
              wu_liao_ming_chen: "",
              num: item.num || "",
            });
          }
        });
      }
      this_.listData = labelsMap;
        // curdPost("sql", sql).then((res) => {
        //   datas = res.variables.data; //具体仓库某个货架的所有物料数据
        //   typeData.forEach((item) => {
        //     typeArr[item.wei_zhi_] = [];
        //     if (datas.length == 0) {
        //       typeArr[item.wei_zhi_].push(item);
        //     } else {
        //       datas.forEach((it, index) => {
        //         if (item.wei_zhi_ == it.cun_fang_wei_zhi_) {
        //           typeArr[item.wei_zhi_].push(it);
        //         } else if (
        //           item.wei_zhi_ != it.cun_fang_wei_zhi_ &&
        //           index == datas.length - 1
        //         ) {
        //           typeArr[item.wei_zhi_].push(item);
        //         }
        //       });
        //     }
        //   });
          // curdPost("sql", classSql).then((res2) => {
          //   let resData = res2.variables.data;
          //   resData.forEach((item) => {
          //     let layer = item.wei_zhi_;
          //     layer = layer.split("-")[1];
          //     labelsMap[layer] = [];
          //     for (var prop in typeArr) {
          //       if (typeArr.hasOwnProperty(prop)) {
          //         // console.log(prop,item.wei_zhi_);
          //         if (prop.includes(item.wei_zhi_)) {
          //           labelsMap[layer].push(...typeArr[prop]);
          //           //  console.log(labelsMap)
          //         }
          //       }
          //     }
          //   });
          //   // console.log(labelsMap, "数据");
          //   this_.listData = labelsMap;
          // });

        // });

      });

      
    },
    qu_yu_Event(e) {
      //点击区域事件，加载可视化视\
      let value = e.target.innerText;
      if (value.includes("(")) {
        let index = value.indexOf("(");
        value = value.slice(0, index);
      }
      let num = value.slice(0, 1);
      let py = value.split("号")[1].replace(/^\s*/g, "");
      let quyu = this.sqlSlice(py);
      let type = (quyu + num).replace(/^\s*/g, "");
      let cang_ku_ming_chen_ = this.formInline.cang_ku_ming_chen_value
      var sqlString =`select * from t_mjwlgl where cun_fang_wei_zhi_ like '%${type}%' and cang_ku_ming_chen = '${cang_ku_ming_chen_}' and ku_cun_liang_ !='0'`
      this.queryLoad(sqlString, type);
      this.formInline.qu_yu_value = value;
      this.quyuShow = value;
    },
    blackEvent() {
      this.desShow = true;
    },
    clickBtn() {
      this.loadQueryData();
      this.firstLoadViewData();
      this.firstLoadQuyu("试剂库1");
      this.ifshow = !this.ifshow;
    },
    async chakan(event, value) {
      // event.preventDefault();
      event.stopPropagation();
      if(value.num == 0 || !value.num){
        this.$message({
          message: '该位置暂无物料',
          type: 'warning'
        });
        return
      }
      this.innerVisible = true;
      let cang_ku_ming_chen = this.formInline.cang_ku_ming_chen_value;
      this.innertitle = `${cang_ku_ming_chen} ${value.cun_fang_wei_zhi_}明细`
      let sql = `select * from t_mjwlgl where cang_ku_ming_chen = '${cang_ku_ming_chen}'and cun_fang_wei_zhi_ = '${value.cun_fang_wei_zhi_}' and ku_cun_liang_ != '0'`;
      let data = [];
      await curdPost("sql", sql).then((res) => {
        data = res.variables.data;
      });
      this.tableData = data
    },
  },
  watch: {
    //监控仓库名称变化 触发第一次加载数据
    "formInline.cang_ku_ming_chen_value": async function (newdata) {
      this.firstLoadQuyu(newdata);
    },
    "formInline.qu_yu_value": function (newdata) {
      this.qu_yu_value = newdata;
      this.quyuShow = newdata;
      this.firstLoadActive = false;
    },
    //。。。。。省略部分代码
    formData: {
      handler(val) {
        //根据实际逻辑处理
        if (!this.showValue) {
          this.showValue = val.cunFangWeiZhi;
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
ul {
  margin: 0;
}
p {
  padding: 0;
  margin: 0;
}
.close-content {
  position: absolute;
  right: 100px;
  top: 50px;
  //
   background: #f56c6c;
  font-size: 16px;
  padding:0px 4px;
  border-radius: 5px;
 color: #ffffff;
  .closeBtn {
    background: #f56c6c;
     border: none;
     padding: 2px;
      color: #ffffff;
  }
}
.sample-content {
  cursor: pointer;

  .selectArea {
    width: 100%;
    height: 100%;
    overflow: scroll;
    position: fixed;
    top: 0px;
    left: 0px;
    background: white;
    z-index: 2147483647!important;
  }
  .top-content {
    width: 100%;
    .top-title {
      text-align: center;
      font-weight: bold;
      width: 100%;
      font-size: 18px;
      line-height: 40px;
    }
    .query-content {
      display: flex;
      margin-left: 25px;
    }
  }
  .test-quyu,
  .huojia {
    width: 100%;
    .list-items {
      display: flex;
      cursor: pointer;
      .wDTianjian::after {
        content: "2-6";
      }
      .quyu-item {
        border: 1px solid #a172ab;
        background: #0099cc;
      }
      .huojia-item {
        background: #99ccff;
      }
      .list-item {
        padding: 4px 6px;
        height: 20px;
        background-color: #cec6a4;
        text-align: center;
        line-height: 20px;
        margin-left: 20px;
        margin-bottom: 6px;
        /* margin-top: 6px; */
        border-radius: 10px;
        font-size: 14px;
        position: relative;
        .tiaojian {
          // position: absolute;
          // right: 0px;
          // top: 0px;
          // background-color: #f56c6c;
          // border-radius: 10px;
          // color: #fff;
          // display: inline-block;
          // font-size: 12px;
          // height: 18px;
          // line-height: 18px;
          // padding: 0 6px;
          // text-align: center;
          // white-space: nowrap;
          // border: 1px solid #fff;
          font-size: 12px;
        }
      }
    }
    .cangku-mingchen {
      width: 100%;
      text-align: left;
      margin-left: 50px;
    }
  }
  .body-content {
    margin-bottom: 70px;
    display: flex;
    box-sizing: border-box;
    height: calc(100vh - 240px);
    // overflow-x: hidden;
    // overflow-y: scroll;
    .black {
      position: fixed;
      top: 300px;
      right: 100px;
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #e6a23c;
      z-index: 99;
    }
    .left-table {
      // width: 40%;
      ::v-deep .el-table {
        width: 40%;
      }
    }
    .right-view {
      z-index: 99;
      width: 100%;
      .goods-items {
        width: 100%;
        overflow: hidden;
        border: solid 2px rgb(202, 236, 247);
        display: flex;
        flex-direction: column-reverse;
        .show-demo {
          width: 100%;
          border-bottom: 1px solid bisque;
          margin: 0 auto;
          text-align: center;
          // overflow-y: scroll;
          .goods-level {
            display: flex;
            position: relative;
            margin-bottom: 6px;
          }
          .level-dsc {
            margin-top: 12px;
            position: absolute;
            bottom: 0;
            left: 10px;
          }
          .goods-list {
            display: flex;
            // justify-content: flex-start;
            flex-wrap: wrap-reverse;
            align-content: flex-start;
            margin-left: 50px;
            margin-right: 15px;
            .goods-dsc {
              cursor: pointer;
              // width: 170px;
              // height: 80px;
              padding: 6px 6px;
              border-radius: 5px;
              // background: #e6a23c;
              margin-left: 12px;
              margin-top: 6px;
              //   background-color: aliceblue;
              box-sizing: border-box;
              .top-dsc {
                display: flex;
                justify-content: space-between;
                font-size: 12px;
                height: 18px;
                line-height: 18px;
                .position > p {
                  text-align: left;
                  // color: #fbe8ff;
                }
                .right-content > p {
                  margin-left: 1px;
                  // color: #fbe8ff;
                  text-align: left;
                }
                // .condition {
                //   // color: #fbe8ff;
                // }
              }
              .bottom-dsc {
                width: 100%;
                font-size: 18px;
                height: 42px;
                line-height: 60px;
                margin-top: 20px;
                // color: #fbe8ff;
              }
              .goods-demo {
                display: block;
                width: 70px;
                height: 90px;
                border: 1px solid rgb(10, 9, 8);
                text-align: center;
                margin: 0;
              }
              .goods-code {
                text-align: center;
                width: 100%;
                height: 20px;
                line-height: 20px;
              }
            }
          }
          .goodshelf-name {
            margin-bottom: 49px;
          }
          .shelf {
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
          }
        }
      }
    }
  }
  .body-content::-webkit-scrollbar {
    display: none; /*隐藏滚动条*/
  }
}
</style>