Преглед изворни кода

Merge branch 'master' of http://119.23.210.103:3000/wy/mj_firm_former

liujiayin пре 2 година
родитељ
комит
c5a36fd946
3 измењених фајлова са 562 додато и 435 уклоњено
  1. 1 1
      src/plugins/ibps/index.js
  2. 403 377
      src/views/component/weiZhiChangGui.vue
  3. 158 57
      src/views/component/wuliaoPosition.vue

+ 1 - 1
src/plugins/ibps/index.js

@@ -55,7 +55,7 @@ export default {
         Vue.prototype.$buildTime = env.VUE_APP_BUILD_TIME
 
         Vue.prototype.$ibpsUrl = env.VUE_APP_BASE_API_0_0_TEST
-        const reportPath = '中汇瑞德检测中心'
+        const reportPath = '明鉴细胞检测实验室'
         // 格式化参数
         const getParams = (params) => {
             const parts = params.split('&')

+ 403 - 377
src/views/component/weiZhiChangGui.vue

@@ -1,131 +1,113 @@
 <template>
   <div class="sample-content">
-    <div @click="clickBtn" style="cursor: pointer;" >
-      <div >点击视图选择位置</div>
+    <div @click="clickBtn" style="cursor: pointer;">
+      <div>点击视图选择位置</div>
     </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>
+    <el-dialog title="仓库可视化" :visible.sync="ifshow" width="100%" append-to-body fullscreen center>
+      <div class="selectArea">
+        <div @click="close" class="close-content">
+          <i class="el-icon-close"></i>
+          <el-button class="closeBtn">关闭视图</el-button>
         </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-show="item.qu_yu_.includes('冰箱')">
-                {{ item.qu_yu_ | freezerFilters }}({{ item.cun_chu_tiao_jian }})
-              </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-show="item.qu_yu_.includes('冰箱')">
+                  {{ item.qu_yu_ | freezerFilters }}({{ item.cun_chu_tiao_jian }})
+                </div>
 
-              <div v-show="!item.qu_yu_.includes('冰箱')">
-                {{ item.qu_yu_ | freezerFilters }}
-              </div>
-            </li>
-          </ul>
+                <div v-show="!item.qu_yu_.includes('冰箱')">
+                  {{ item.qu_yu_ | freezerFilters }}
+                </div>
+              </li>
+            </ul>
+          </div>
         </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 }}层
-                  </div>
-                  <div class="goods-list">
-                    <div
-                      v-for="(it, index) in listData[index]"
-                      :key="index"
-                      class="goods-dsc"
-                      :style="{ background:(it.wu_liao_ming_chen) ? '#67c23a':'#e6a23c'}"
-                      @click="closeView(it)"
-                    >
-                      <div class="top-dsc">
-                        <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 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 }}层
+                    </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>
-                        <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>
                     </div>
                   </div>
                 </div>
               </div>
-              <!-- <div class="goodshelf-name" v-if="index == 1">
-                {{ desString }}
-              </div> -->
             </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>
+  </el-dialog>
   </div>
 </template>
 
@@ -134,6 +116,7 @@ import curdPost from "@/business/platform/form/utils/custom/joinCURD.js";
 export default {
   data() {
     return {
+      innerVisible: false,
       cangkuOption: [],
       formInline: {
         cang_ku_ming_chen_value: "耗材库",
@@ -161,7 +144,9 @@ export default {
       secondshow: false,
       ifshow: false,
       showValue: "",
-      value:"",
+      value: "",
+      tableData: [],
+      innertitle:''
     };
   },
   props: {
@@ -172,9 +157,9 @@ export default {
         return {};
       },
     },
-    readonly:{
-      type:Boolean,
-      default: false
+    readonly: {
+      type: Boolean,
+      default: false,
     },
   },
   filters: {
@@ -212,42 +197,7 @@ export default {
       }
     },
   },
-  // mounted() {
-  //   this.loadQueryData();
-  //   this.firstLoadViewData();
-  //   this.firstLoadQuyu("试剂库1");
-  // },
-  // beforeDestroy() {
-  //   let id = this.formData.id;
-  //   let Status = this.formData.anNiugTai;
-  //   let ming_chen = this.formInline.cang_ku_ming_chen_value;
-  //   let weizhi = this.showValue;
-  //   // return
-  //   // if (weizhi !="" &&Status =="已入库") {
-  //   //   // 数据库更新
-  //   //   curdPost(
-  //   //     "update",
-  //   //     '{"tableName":"t_mjwlgl","paramWhere":{"wai_jian_":"' +
-  //   //       id +
-  //   //       '",},"paramCond":{"cang_ku_ming_chen":"' +
-  //   //       ming_chen +
-  //   //       '","cun_fang_wei_zhi_":"' +
-  //   //       weizhi +
-  //   //       '"}}'
-  //   //   )
-  //   //     .then((res) => {
-  //   //       this.$message({
-  //   //         message: "当前物料位置更新状态更新成功",
-  //   //         type: "success",
-  //   //       });
-  //   //     })
-  //   //     .catch((err) => {
-  //   //       console.log(err);
-  //   //     });
-  //   // }
-  // },
   methods: {
-
     closeView(value1) {
       if (value1.wei_zhi_) {
         this.showValue = value1.wei_zhi_;
@@ -255,10 +205,10 @@ export default {
         this.showValue = value1.cun_fang_wei_zhi_;
       }
       const name = "cunFangWeiZhi"; //其他字段属性
-      const value= this.showValue; //字段的值
+      const value = this.showValue; //字段的值
       this.$emit("change-data", name, value);
       const name2 = "biaoZhunZhi"; //其他字段属性
-      const value2= this.formInline.cang_ku_ming_chen_value; //字段的值
+      const value2 = this.formInline.cang_ku_ming_chen_value; //字段的值
       this.$emit("change-data", name2, value2);
       this.ifshow = false;
     },
@@ -282,7 +232,7 @@ export default {
       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" +"%'";
+      var sqlString = `select cun_fang_wei_zhi_,cun_chu_yao_qiu_ 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) {
@@ -294,14 +244,15 @@ export default {
         case "冰箱":
           return "BX";
         case "危化品柜":
-           return "WHPG";
+          return "WHPG";
         default:
           "";
       }
     },
     async loadQueryData() {
       //查询选择仓库数据查询
-      var sqlString = "select distinct cang_ku_ming_chen from t_ck ORDER BY cang_ku_ming_chen DESC";
+      var sqlString =
+        "select distinct cang_ku_ming_chen from t_ck ORDER BY cang_ku_ming_chen DESC";
       var this_ = this;
       await curdPost("sql", sqlString).then((response) => {
         this_.cangkuOption = response.variables.data;
@@ -310,23 +261,33 @@ export default {
             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];
+        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;
       //头部按钮查询事
       // var sqlString = `select * from t_mjwlgl where cang_ku_ming_chen = '${this.formInline.cang_ku_ming_chen_value}' and qu_yu_ = '${this.formInline.qu_yu_value}'`;
-      let qu_yu_value = this.formInline.qu_yu_value
+      let qu_yu_value = this.formInline.qu_yu_value;
+      let cang_ku_ming_chen_value =  this.formInline.cang_ku_ming_chen_value
       let py = qu_yu_value.split("号")[1].replace(/^\s*/g, "");
       let num = qu_yu_value.split("号")[0];
       let quyu = this.sqlSlice(py);
       let type = (quyu + num).replace(/^\s*/g, "");
-      var sqlString ="select * from t_mjwlgl where cang_ku_ming_chen = '" +this.formInline.cang_ku_ming_chen_value +"' and cun_fang_wei_zhi_ like " +"'%" +type +"%'";
+      var sqlString =`select cun_fang_wei_zhi_,cun_chu_yao_qiu_ from t_mjwlgl where cang_ku_ming_chen = '${cang_ku_ming_chen_value}'and cun_fang_wei_zhi_ like '%${type}%' ku_cun_liang_ !='0'`
       this.queryLoad(sqlString, type);
     },
-    async queryLoad(sql, py) {//数据加载   
+    async queryLoad(sql, py) {
+      //数据加载
       let this_ = this;
       var datas = [];
       this.cenghao = [];
@@ -334,48 +295,116 @@ export default {
       let typeData = [];
       let typeArr = [];
       this_.listData = [];
-      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 ";
-      await  curdPost("sql", sqltype).then((res) => {
-        typeData = res.variables.data; //查询具体仓库某个货架的所有位置
-      });
+      let cang_ku_ming_chen_ = this.formInline.cang_ku_ming_chen_value
+      var sqltype =`select DISTINCT wei_zhi_ from t_ck where wei_zhi_ like '%${py}%' and cang_ku_ming_chen ='${cang_ku_ming_chen_}' 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 ='${cang_ku_ming_chen_}' ORDER BY wei_zhi_ ASC`
+      let wuliaos = [];
       await 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);
-                }
-              });
-            }
-          });
+        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,
         });
-      await 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)) {
-                  if (prop.includes(item.wei_zhi_)) {
-                    labelsMap[layer].push(...typeArr[prop]);
-                  }
-                }
-              }
+      });
+      await 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;
-            console.log(this_.listData)
-          });
+          }
+        });
+      }
+      this_.listData = labelsMap;
+      // await curdPost("sql", sql).then((res) => {
+      //     datas = res.variables.data; //具体仓库某个货架的所有物料数据
+      //     typeData.forEach((item) => {
+      //       typeArr[item.wei_zhi_] = [];
+      //       typeArr[item.wei_zhi_].push(item);
+      //       // if (datas.length == 0) {
+      //       //   typeArr[item.wei_zhi_].push(item);
+      //       // } else {
+      //       //   datas.forEach((it, index) => {
+      //       //     if (item.wei_zhi_ == it.cun_fang_wei_zhi_) {
+      //       //       if (typeArr[item.wei_zhi_].length < 10){
+      //       //         typeArr[item.wei_zhi_].push(it);
+      //       //       }
+      //       //     } else if (item.wei_zhi_ != it.cun_fang_wei_zhi_ &&index == datas.length - 1) {
+      //       //       if (typeArr[item.wei_zhi_].length < 10){
+      //       //         typeArr[item.wei_zhi_].push(item);
+      //       //       }
+
+      //       //     }
+      //       //   });
+      //       // }
+      //     });
+      //   });
+      //   this_.listData = typeArr;
+      // await 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)) {
+      //             if (prop.includes(item.wei_zhi_)) {
+      //               labelsMap[layer].push(...typeArr[prop]);
+      //             }
+      //           }
+      //         }
+      //       });
+      //       console.log(labelsMap,1111111)
+      //       this_.listData = labelsMap;
+      //     });
+    },
+    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
     },
     qu_yu_Event(e) {
       //点击区域事件,加载可视化视
@@ -388,7 +417,8 @@ export default {
       let py = value.split("号")[1].replace(/^\s*/g, "");
       let quyu = this.sqlSlice(py);
       let type = (quyu + num).replace(/^\s*/g, "");
-      var sqlString =`select * from t_mjwlgl where cun_fang_wei_zhi_ like  ` +"'%" +type +"%'" + "  and cang_ku_ming_chen = '" + this.formInline.cang_ku_ming_chen_value +"'";
+      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;
@@ -432,206 +462,202 @@ p {
   //
   background: #f56c6c;
   font-size: 16px;
-  padding:0px 4px;
+  padding: 4px 4px;
   border-radius: 5px;
- color: #ffffff;
+  color: #ffffff;
   .closeBtn {
     background: #f56c6c;
-     border: none;
-     padding: 2px;
-      color: #ffffff;
+    border: none;
+    padding: 4px;
+    color: #ffffff;
   }
 }
-.sample-content {
-  cursor: pointer;
-
-  .selectArea {
+.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%;
-    height: 100%;
-    overflow: scroll;
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    background: white;
-    z-index: 2147483647  !important;
+    font-size: 18px;
+    line-height: 40px;
   }
-  .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;
-    }
+  .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;
-        border-radius: 10px;
-        font-size: 14px;
-        position: relative;
-        .tiaojian {
-          font-size: 12px;
-        }
-      }
+}
+.test-quyu,
+.huojia {
+  width: 100%;
+  .list-items {
+    display: flex;
+    cursor: pointer;
+    .wDTianjian::after {
+      content: "2-6";
     }
-    .cangku-mingchen {
-      width: 100%;
-      text-align: left;
-      margin-left: 50px;
+    .quyu-item {
+      border: 1px solid #a172ab;
+      background: #0099cc;
     }
-  }
-  .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;
+    .huojia-item {
+      background: #99ccff;
     }
-    .left-table {
-      // width: 40%;
-      ::v-deep .el-table {
-        width: 40%;
+    .list-item {
+      padding: 4px 6px;
+      height: 20px;
+      background-color: #cec6a4;
+      text-align: center;
+      line-height: 20px;
+      margin-left: 20px;
+      margin-bottom: 6px;
+      border-radius: 10px;
+      font-size: 14px;
+      position: relative;
+      .tiaojian {
+        font-size: 12px;
       }
     }
-    .right-view {
-      z-index: 99;
+  }
+  .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%;
-      .goods-items {
+      overflow: hidden;
+      border: solid 2px rgb(202, 236, 247);
+      display: flex;
+      flex-direction: column-reverse;
+      .show-demo {
         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;
-          .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 12px;
-              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: 15px;
-                  // color: #fbe8ff;
-                  text-align: left;
-                }
-                // .condition {
-                //   // color: #fbe8ff;
-                // }
-              }
-              .bottom-dsc {
-                width: 100%;
-                font-size: 18px;
-                height: 42px;
-                line-height: 60px;
-                margin-top: 20px;
+        border-bottom: 1px solid bisque;
+        margin: 0 auto;
+        text-align: center;
+        .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 12px;
+            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;
               }
-              .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;
+              .right-content > p {
+                // margin-left: 15px;
+                // 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;
-          }
+        }
+        .goodshelf-name {
+          margin-bottom: 49px;
+        }
+        .shelf {
+          width: 100%;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
         }
       }
     }
   }
-  .body-content::-webkit-scrollbar {
-    display: none; /*隐藏滚动条*/
-  }
+}
+.body-content::-webkit-scrollbar {
+  display: none; /*隐藏滚动条*/
 }
 </style>

+ 158 - 57
src/views/component/wuliaoPosition.vue

@@ -97,11 +97,19 @@
                       v-for="(it, index) in listData[index]"
                       :key="index"
                       class="goods-dsc"
-                      :style="{ background:(it.wu_liao_ming_chen) ? '#67c23a':'#e6a23c'}"
+                      :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>
@@ -116,13 +124,13 @@
                             <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">
+                        </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> -->
                         <!-- <div class="condition">{{ it.cun_chu_tiao_jian }}</div> -->
                       </div>
                       <div class="bottom-dsc">
@@ -139,6 +147,37 @@
           </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>
@@ -177,6 +216,9 @@ export default {
       ifshow: false,
       showValue: "",
       value: "111",
+      tableData: [],
+      innertitle:'',
+      innerVisible: false,
     };
   },
   props: {
@@ -264,7 +306,7 @@ export default {
       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" +"%'";
+      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) {
@@ -301,10 +343,11 @@ export default {
       let num = this.formInline.qu_yu_value.split("号")[0];
       let quyu = this.sqlSlice(py);
       let type = (quyu + num).replace(/^\s*/g, "");
-      var sqlString = "select * from t_mjwlgl where cang_ku_ming_chen = '" + this.formInline.cang_ku_ming_chen_value + "' and cun_fang_wei_zhi_ like " + "'%" +type + "%'";
+      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);
     },
-    queryLoad(sql, py) {
+    async queryLoad(sql, py) {
       //数据加载
       let this_ = this;
       var datas = [];
@@ -314,52 +357,99 @@ export default {
       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; //查询具体仓库某个货架的所有位置
-        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)
-                  }
-                }
-              }
+        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 || "",
             });
-            // console.log(labelsMap, "数据");
-            this_.listData = labelsMap;
-          });
+          }
         });
+      }
+      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) {
       //点击区域事件,加载可视化视\
-      console.log(this.formData, "formData");
       let value = e.target.innerText;
       if (value.includes("(")) {
         let index = value.indexOf("(");
@@ -369,15 +459,8 @@ export default {
       let py = value.split("号")[1].replace(/^\s*/g, "");
       let quyu = this.sqlSlice(py);
       let type = (quyu + num).replace(/^\s*/g, "");
-      var sqlString =
-        `select * from t_mjwlgl where cun_fang_wei_zhi_ like  ` +
-        "'%" +
-        type +
-        "%'" +
-        "  and cang_ku_ming_chen = '" +
-        this.formInline.cang_ku_ming_chen_value +
-        "'";
-      // console.log(sqlString, type);
+      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;
@@ -391,6 +474,26 @@ export default {
       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: {
     //监控仓库名称变化 触发第一次加载数据
@@ -406,10 +509,8 @@ export default {
     formData: {
       handler(val) {
         //根据实际逻辑处理
-
         if (!this.showValue) {
           this.showValue = val.cunFangWeiZhi;
-          console.log("自定义组件formData", val);
         }
       },
       deep: true,
@@ -488,7 +589,7 @@ p {
         background: #99ccff;
       }
       .list-item {
-        padding: 4px 6;
+        padding: 4px 6px;
         height: 20px;
         background-color: #cec6a4;
         text-align: center;