rtk-wms-uniapp/pages/workbranch/production/glue/indexPage.vue

<template>
  <gui-page :custom-header="true" :is-header-sized="false" :header-class="['gui-theme-background-color']">
    <template #gHeader>
      <view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
        <!-- 使用组件实现返回按钮及返回首页按钮 -->
        <text
          style="font-size:44rpx;"
          class="gui-header-leader-btns gui-color-white font-icons"
          @tap="goHome"
        >&#xe6c5;</text>
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text
          class="gui-h4 gui-blod gui-flex1 gui-text-center gui-color-white gui-ellipsis gui-primary-text"
        >点胶管理</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width:40px;" />
      </view>
    </template>
    <template #gBody>
      <uni-notice-bar
        v-if="machineObject.code"
        style="margin-top: 85px;padding: 4px 10px;"
        show-icon
        scrollable
        :text="'当前运行设备: '+ machineObject.name +' 机器编码: ' + machineObject.code"
      />
      <view class="glue-manage">
        <view class="bind-button">
          <view v-if="!machineObject.code" class="scan-button" @click="handleBindMachine">
            <text class="font-icons">&#xe6a8;</text>
            绑定机器
          </view>
        </view>
        <view v-if="machineObject.code" class="description">
          <text class="line-text">设备模具</text>
          <view class="tag-operation">
            <view class="tag-skyblue" @click="handleMouldLoad"><text class="font-icons">&#xe6b7;</text>模具上料
            </view>
            <view class="tag-skyblue" @click="handleBindMachine"><text
              class="font-icons"
            >&#xe6a8;</text>更换设备</view>
          </view>
        </view>
        <view class="machine-mould-panel">
          <view v-if="machineObject.code">
            <view v-for="(item, key) in machineMouldList" :key="key">
              <uni-swipe-action>
                <!-- 基础用法 -->
                <uni-swipe-action-item
                  :right-options="options"
                  :left-options="options"
                  @click="onClick(item)"
                >
                  <view class="machine-details">
                    <view>
                      <text
                        class="font-icons-online"
                        :style="computedStateLight(item)"
                      >{{ item.status == "0"?"&#xe6bc;":item.status=="1"?"&#xe6cc;":"&#xe6d0;" }}</text>
                      <view class="text-content">
                        <view class="content-title">{{ item.code }}</view>
                        <view class="content">{{ item.name }}</view>
                      </view>
                    </view>
                    <view class="effective-time">
                      <view>
                        过期还剩
                        <text :style="computedStateLight(item)">{{ item.effectiveTime }}</text>
                        天
                      </view>
                    </view>
                  </view>
                </uni-swipe-action-item>
              </uni-swipe-action>
            </view>
          </view>
        </view>
        <view v-if="machineObject.code" class="bind-button" style="margin: 10px 0;">
          <view class="scan-button" @click="handleScanSNCode">
            <text class="font-icons">&#xe6a8;</text>
            扫描SN码
          </view>
        </view>
        <view class="machine-panel">
          <view v-for="(item, key) in SNCodeList" :key="key" class="card-list-flexbox">
            <view class="card-list-item">
              <text class="text-1 gui-color-gray">{{ item.materialCode }}</text>
            </view>
            <view class="card-list-item">
              <text class="text-1 gui-color-gray">物料名称</text>
              <text class="text-2 gui-color-gray">{{ item.materialName }}</text>
            </view>
          </view>
        </view>
      </view>
    </template>
  </gui-page>
</template>
<script>
import {
  computed,
  defineComponent,
  onMounted,
  ref
} from 'vue'
export default defineComponent({
  setup() {
    // 绑定的机器信息
    const machineObject = ref({
      code: '',
      name: ''
    })
    const options = ref([{
      text: '卸料',
      style: {
        backgroundColor: '#dd524d'
      }
    }])
    // 设备模具
    const machineMouldList = ref([{
      code: 'PCL983992100',
      name: '胶水',
      effectiveTime: 45,
      status: '0'
    },
    {
      code: 'PCL983992101',
      name: '模切刀具',
      effectiveTime: 100,
      status: '2'
    }
    ])
    const SNCodeList = ref([])
    const computedStateLight = computed(() => {
      return item => {
        switch (item.status) {
        case '0':
          return 'color: #85ce61;'
        case '1':
          return 'color: rgb(255 172 70);'
        case '2':
          return 'color: #ee0a25;'
        }
      }
    })
    onMounted(() => {
      const machineData = uni.getStorageSync('machineData')
      if (Object.keys(machineData).length !== 0) {
        Object.assign(machineObject.value, machineData)
      }
    })
    const goHome = function() {
      uni.$goHome()
    }
    // 卸料
    const onClick = function(opt) {
      const fdIndex = machineMouldList.value.findIndex(item => item.code === opt.code)
      machineMouldList.value.splice(fdIndex, 1)
    }
    // 模具上料
    const handleMouldLoad = function() {
      machineMouldList.value.push({
        code: 'PCL983992102',
        name: '钻头',
        effectiveTime: 32,
        status: Math.round(Math.random() * 2).toString()
      }, {
        code: 'PCL983992103',
        name: '托盘',
        effectiveTime: 75,
        status: Math.round(Math.random() * 2).toString()
      })
      const mpaasScanModule = uni.requireNativePlugin('Mpaas-Scan-Module')
      mpaasScanModule.mpaasScan({
        // 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
        'scanType': ['qrCode', 'barCode'],
        // 是否隐藏相册，默认false不隐藏
        'hideAlbum': false
      },
      (ret) => {
        if (ret.resp_code === 1000) {
          machineMouldList.value.push({
            code: 'PCL983992102',
            name: '钻头',
            effectiveTime: 32,
            status: Math.round(Math.random() * 2).toString()
          }, {
            code: 'PCL983992103',
            name: '托盘',
            effectiveTime: 75,
            status: Math.round(Math.random() * 2).toString()
          })
        }
      })
    }
    // 绑定设备/更换设备
    const handleBindMachine = function() {
      machineObject.value.code = 'C911029' + Math.round(Math.random() * 10000)
      machineObject.value.name = '点胶机' + Math.round(Math.random() * 10000)
      uni.setStorageSync('machineData', JSON.parse(JSON.stringify(machineObject.value)))
      // const mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")
      // mpaasScanModule.mpaasScan({
      // 		// 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
      // 		'scanType': ['qrCode', 'barCode'],
      // 		// 是否隐藏相册，默认false不隐藏
      // 		'hideAlbum': false
      // 	},
      // 	(ret) => {
      // 		if (ret.resp_code === 1000) {
      // 			machineObject.value.code = "C91102933331";
      // 			machineObject.value.name = "点胶机09111";
      // 		}
      // 	})
    }
    // 扫描SN码
    const handleScanSNCode = function() {
      SNCodeList.value.push({
        materialCode: 'PCL9839921' + Math.round(Math.random() * 100),
        materialName: '胶水' + Math.round(Math.random() * 999)
      })
      const mpaasScanModule = uni.requireNativePlugin('Mpaas-Scan-Module')
      mpaasScanModule.mpaasScan({
        // 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
        'scanType': ['qrCode', 'barCode'],
        // 是否隐藏相册，默认false不隐藏
        'hideAlbum': false
      },
      (ret) => {
        if (ret.resp_code === 1000) {
          SNCodeList.value.push({
            materialCode: 'PCL9839921' + Math.round(Math.random() * 100),
            materialName: '胶水' + Math.round(Math.random() * 999)
          })
          // uni.$reqGet("splitOrMergeScanMaterial", {
          // 		qrCode: ret.resp_result
          // 	})
          // 	.then(({
          // 		data
          // 	}) => {

          // 	})
        }
      })
    }
    return {
      goHome,
      options,
      onClick,
      SNCodeList,
      machineObject,
      machineMouldList,
      handleBindMachine,
      computedStateLight,
      handleMouldLoad,
      handleScanSNCode
    }
  }
})
</script>

<style lang="scss" scoped>
	.gui-header-leader-btns {
		color: black;
		font-size: 24px !important;
		margin-left: 24rpx;
	}

	.gui-sbody {
		background-color: rgba(234, 239, 242, 1);
	}

	.glue-manage {
		width: 100vw;
		height: 100vh;
		top: 120px;
		position: fixed;

		.description {
			height: 40px;
			line-height: 40px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: bold;
			background-color: white;

			.tag-operation {
				height: 40px;
				display: flex;
				align-items: center;
			}

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

			.line-text::before {
				content: "";
				display: inline-block;
				width: 4px;
				height: 20px;
				border-radius: 4px;
				margin: 0 4px;
				background-color: skyblue;
			}
		}

		.bind-button {
			display: flex;
			justify-content: center;

			.scan-button {
				width: 40vw;
				min-width: 50px;
				height: 35px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: white;
				background-color: rgba(0, 160, 233, 1);
				border-radius: 6px;
				box-shadow: 2px 2px 3px 1px rgba(0, 156, 223, 1.0);
			}
		}

		.machine-panel,
		.machine-mould-panel {
			width: 100%;
			display: flex;
			flex-direction: column;
			overflow-y: scroll;

			.machine-details {
				width: calc(100vw - 20px);
				height: 25px;
				padding: 10px;
				margin-top: 2px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: white;

				>uni-view:nth-of-type(1) {
					flex: 3;
					display: flex;
					font-size: 12px;

					.font-icons,
					.font-icons-online {
						font-size: 26px;
						margin-right: 8px;
					}

					.text-content {
						.content-title {
							font-weight: bold;
						}
					}
				}

				.effective-time {
					flex: 2;
					font-size: 12px;
					text-align: right;
				}
			}

			.machine-details:nth-of-type(1) {
				margin-top: 0;
			}
		}

		.machine-mould-panel {
			height: 90px;
			min-height: 90px;
		}

		.machine-panel {
			height: calc((100vh - 45px) * 0.6);
		}
	}

	/* 针对适配的设备重新写一套样式 */
	/* height >= 520px */
	@media screen and (min-height: 520px) {
		.glue-manage {
			.machine-panel {
				height: calc((100vh - 45px) * 0.65);
			}
		}
	}

	/* height <= 520px */
	@media screen and (max-height: 530px) {
		.glue-manage {
			.machine-panel {
				height: 200px;
			}
		}
	}

	.card-list-flexbox {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		margin: 0 2px 3px 2px;

		.card-list-item,
		.card-list-item-operation {
			width: 750rpx;
			height: 35px;
			margin-bottom: 3rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;

			uni-text {
				font-size: 14px;
				height: 50rpx;
				text-align: left;
				padding: 0 4px;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.text-1 {
				flex: 1;
				height: 35px;
				justify-content: flex-start;
			}

			.text-2 {
				flex: 3;
				height: 35px;
				justify-content: flex-end;
				margin-right: 4px;
				padding: 2px 6px;
			}
		}

		.card-list-item:nth-of-type(1) {

			.text-1 {
				font-weight: bold;
				color: black !important;
			}

			.text-1::before {
				content: "";
				width: 4px;
				height: 20px;
				border-radius: 4px;
				margin-right: 4px;
				background-color: skyblue;
			}
		}

	}

	.tag-skyblue {
		padding: 0 4px;
		margin: 0 4px;
		border-radius: 5px;
	}

	.tag-skyblue {
		border: 1px solid skyblue;
		color: skyblue;
		height: 24px;
		line-height: 24px;
		font-size: 12px;
	}
</style>