lh_firm_former/src/views/component/fwposition.vue

<template>
    <div class="sample-content">
        <div style="cursor: pointer" @click="clickBtn">
            <!-- <div>点击视图选择位置</div> -->
            <el-input id="valueDom" placeholder="请输入内容" :value="showValue" />
        </div>
        <el-dialog
            title="仓库可视化"
            :visible.sync="ifshow"
            width="100%"
            append-to-body
            fullscreen
            center
        >
            <div v-if="ifshow" slot="footer" class="selectArea">
                <div class="top-content">
                    <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-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-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" /><span>查询</span>
                                </button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="test-quyu">
                    <div class="test-list">
                        <ul class="list-items">
                            <li v-for="item in quyu_arr" :key="item.qu_yu_" class="list-item quyu-item" :style="{background: quyuShow == item.qu_yu_ ? '#FF9900' : '#e5baba', }" @click="qu_yu_Event">
                                <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 v-for="(item, index) in listData" :key="index" class="show-demo">
                                <div>
                                    <div class="goods-level">
                                        <div class="level-dsc">
                                            第{{ index | indexfilter(listData) }}层
                                        </div>
                                        <div class="goods-list">
                                            <div
                                                v-for="(it, index) in listData[index]"
                                                :key="index"
                                                class="goods-dsc"
                                                :style="{ background: !it.wu_liao_bian_ma_ ? '#67c23a' : '', }"
                                                @click="closeView(it)"
                                            >
                                                <div class="top-dsc">
                                                    <div class="position">
                                                        <p>名称：{{ it.wu_pin_ming_chen }}</p>
                                                        <p>编码：{{ it.wu_liao_bian_ma_ || "空" }}</p>
                                                        <p>位置：{{ it.cun_fang_wei_zhi_ || "空" }}</p>
                                                        <p>货号:{{ it.huo_hao_ || "空" }}</p>
                                                    </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="bottom-dsc" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
export default {
    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 if (value.includes('液氮罐')) {
                return 'YDG' + num
            } 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
            }
        }
    },
    data () {
        return {
            ifshow: false,
            showValue: '点击选择位置',
            cangkuOption: [],
            formInline: {
                cang_ku_ming_chen_value: '次级仓库',
                qu_yu_value: '6号冰箱',
                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
        }
    },
    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
        }
    },
    methods: {
        clickBtn () {
            this.ifshow = !this.ifshow
            this.loadQueryData()
            this.firstLoadViewData()
            this.firstLoadQuyu('次级仓库')
        },
        closeView (value) {
            const name = 'cunFangWeiZhi' // 其他字段属性
            this.$emit('change-data', name, value.cun_fang_wei_zhi_)
            const name2 = 'cangKuMingCheng' // 其他字段属性
            const value2 = this.formInline.cang_ku_ming_chen_value // 字段的值
            // this.showValue = value2;
            this.$emit('change-data', name2, value2)
            this.ifshow = !this.ifshow
        },
        firstLoadQuyu (cang_ku) {
            const sqlString = `select DISTINCT subStr(wei_zhi_,1,4) as wei_zhi_,cun_chu_tiao_jian,qu_yu_ from t_ck where cang_ku_ming_chen = '${cang_ku}' order by wei_zhi_ asc`
            var this_ = this
            curdPost('sql', sqlString).then((response) => {
                this_.quyu_arr = response.variables.data
                this_.quyu_arr.forEach((it) => {
                    it.wei_zhi_.includes('-') ? '' : (it.qu_yu_ = it.qu_yu_ + it.wei_zhi_.slice(3, 4))
                })
                if (!this.firstLoadActive) {
                    this_.formInline.qu_yu_value = ''
                }
            })
        },
        firstLoadViewData () {
            // 首次加载视图数据 默认中心仓库 耗材区
            this.formInline.cang_ku_ming_chen_value = '次级仓库'
            this.formInline.qu_yu_value = '6号冰箱'
            this.selectActive = 1
            this.firstLoadActive = true
            this.quyuShow = '6号冰箱'
            var sqlString = 'select * from t_mjwlgl where cun_fang_wei_zhi_ like' + "'%" + 'BX6' + "%'"
            this.queryLoad(sqlString, 'BX6')
        },
        sqlSlice (value, num) {
            if (value.includes('冰箱')) {
                if (value.includes('T') || value.includes('B') || value.includes('L') || value.includes('R')) {
                    return 'BX' + num + value.slice(4, 5)
                } else {
                    return 'BX' + num
                }
            } else if (value.includes('货架')) {
                return 'HJ' + num
            } else if (value.includes('试剂柜')) {
                return 'SJG' + num
            }
        },
        loadQueryData () {
            // 查询选择仓库数据查询
            var sqlString = 'select distinct cang_ku_ming_chen from t_ck '
            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)
                    }
                })
            })
        },
        onSubmits () { // 头部按钮查询事
            this.desShow = false
            const value = this.formInline.qu_yu_value
            const num = value.split('号')[0]
            const type = this.sqlSlice(value, num)
            var sqlString = `select * from t_mjwlgl where cun_fang_wei_zhi_ like ` + "'%" + type + "%'"
            this.queryLoad(sqlString, type)
            this.formInline.qu_yu_value = value
            this.quyuShow = value
        },
        queryLoad (sql, py) {
            // console.log(122)
            const this_ = this
            this_.listData = {}
            var datas = []
            this.cenghao = []
            const labelsMap = {} // map存储
            let typeData = []
            var sqltype = ''
            if (py.includes('YDG')) {
                sqltype = `select DISTINCT SUBSTR(wei_zhi_,1,9) as wei_zhi_ from t_ck where wei_zhi_ like ` + "'%" + py + "%'" + 'ORDER BY wei_zhi_ ASC ' //
            } else {
                sqltype = `select  wei_zhi_ from t_ck where wei_zhi_ like ` + "'%" + py + "%'" + 'ORDER BY wei_zhi_ ASC ' //
            }
            curdPost('sql', sqltype).then((res) => {
                typeData = res.variables.data // 查询该位置具有多少层
                curdPost('sql', sql).then((res) => {
                    // sql 查询该位置在物料管理库存信息的物料
                    datas = res.variables.data // 该位置的库存信息
                    typeData.forEach((item) => {
                        // 组件以货架分层的数据: {1:[],2:[],3:[],4:[],5:[],6}
                        const num = item.wei_zhi_.split('-')[1]
                        labelsMap[num] = []
                    })
                    // if (datas.length == 0) {
                    // 没有物料存在该位置
                    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_ })
                            }
                        })
                    }
                    this_.listData = labelsMap
                    for (var prop in labelsMap) {
                        console.log(this_.listData[prop[0]][0].cun_fang_wei_zhi_, '123')
                        var sqlString = `select * from t_mjwlgl where cun_fang_wei_zhi_ = '${this_.listData[prop[0]][0].cun_fang_wei_zhi_}'`
                        curdPost('sql', sqlString).then((res) => {
                            const wuliao = res.variables.data
                            if (wuliao.length > 0) {
                                this_.listData[prop[0]] = wuliao
                                console.log(wuliao)
                            }
                        })
                    }
                    // console.log(this_.listData);
                    //                     this_.listData.forEach(item => {
                    //                         console.log(item)
                    //                     })
                    // return
                    // }
                    // datas.forEach((item) => {
                    //     // 有物料存在该区域
                    //     const props1 = item.cun_fang_wei_zhi_.split('-')[1]
                    //     for (var prop in labelsMap) {
                    //         if (labelsMap.hasOwnProperty(prop)) {
                    //             if (prop == props1) {
                    //                 labelsMap[prop].push(item)
                    //             }
                    //             if (prop != props1 && labelsMap[prop].length == 0) {
                    //                 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_ })
                    //                         labelsMap[prop].push({ zhuangtai: '空' })
                    //                     }
                    //                 })
                    //             }
                    //         }
                    //     }
                    // })
                    // const newarr = []
                    // for (var prop in labelsMap) {
                    //     if (labelsMap.hasOwnProperty(prop)) {
                    //         if (labelsMap[prop].length > 1) {
                    //             var item = []
                    //             console.log(labelsMap[prop])
                    //             item.push(labelsMap[prop][0])
                    //             newarr.push(item)
                    //         } else {
                    //             newarr.push(labelsMap[prop])
                    //         }
                    //     }
                    // }
                    // this_.listData = newarr
                    // console.log(this_.listData)
                })
            })
        },
        qu_yu_Event (e) {
            // 点击区域事件，加载可视化视图
            const value = e.target.innerText
            const num = value.split('号')[0]
            const type = this.sqlSlice(value, num)
            var sqlString = `select * from t_mjwlgl where cun_fang_wei_zhi_ like ` + "'%" + type + "%'"
            this.queryLoad(sqlString, type)
            this.formInline.qu_yu_value = value
            this.quyuShow = value
        },
        blackEvent () {
            this.desShow = true
            this_.listData = []
        }
    }
}
</script>

  <style lang="scss" scoped>
ul {
  margin: 0;
}
p {
  padding: 0;
  margin: 0;
}
.selectArea {
  width: 100%;
  height: 100%;
  background: white;
  z-index: 2147483647 !important;
}
.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;
  }
}
.el-dialog__footer {
  width: 100%;
  .top-content {
    width: 100%;
    .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 14px;
        height: 30px;
        background-color: #cec6a4;
        text-align: center;
        line-height: 30px;
        margin-left: 20px;
        margin-bottom: 6px;
        /* margin-top: 6px; */
        border-radius: 10px;
        position: relative;
        .tiaojian {
          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:50vh;
    .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%;
        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;
            flex-wrap: wrap-reverse;
            align-content: flex-start;
            margin-left: 50px;
            margin-right: 15px;
            .goods-dsc {
              cursor: pointer;
              padding: 6px 12px;
              border-radius: 5px;
              background: #e6a23c;
              margin-left: 12px;
              margin-top: 6px;
              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;
                }
                .right-content > p {
                  margin-left: 15px;
                  text-align: left;
                }
              }
              .bottom-dsc {
                width: 100%;
                font-size: 18px;
                height: 42px;
                line-height: 60px;
                margin-top: 20px;
              }
              .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; /*隐藏滚动条*/
  }
}

::v-deep .el-tooltip__popper {
  display: none;
}
</style>