rtk-wms-uniapp/pages/tabbar/workbranch.vue

<template>
  <view>
    <gui-page :custom-header="true" :is-header-sized="false" :header-class="['gui-bg-gray', 'gui-dark-bg-level-1']">
      <template #gHeader>
        <view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
          <!-- 导航文本此处也可以是其他自定义内容 -->
          <text class="gui-h4 gui-blod gui-flex1 gui-text-center gui-ellipsis gui-primary-text">工作台</text>
          <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
          <!-- 实际宽度请根据自己情况设置 -->
          <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
        </view>
      </template>
      <template #gBody>
        <view class="uni-margin-wrap">
          <!-- <swiper class="swiper" circular indicator-dots="indicatorDots" interval="2000" duration="500">
					<swiper-item>
						<image class="adapt-image" src="@/static/material/156017341021.jpg" mode="aspectFill"></image>
					</swiper-item>
					<swiper-item>
						<image class="adapt-image" src="@/static/material/wallhaven-k7v9yq.png" mode="aspectFill">
						</image>
					</swiper-item>
					<swiper-item>
						<image class="adapt-image" src="@/static/material/wallhaven-m9xyg8.jpg" mode="aspectFill">
						</image>
					</swiper-item>
				</swiper> -->
        </view>
        <div class="gridBody">
          <!--  v-show="$permission('home:system:list')" -->
          <div class="grid-box">
            <view class="panel">
              <text class="panel-title">系统管理</text>
            </view>
            <view
              class="grid-list"
              :style="[isPad == true?'grid-template-columns: repeat(5, 1fr)':
                isPhone == true?'grid-template-columns: repeat(4, 1fr)':
                'grid-template-columns: repeat(3, 1fr)']"
            >
              <view v-for="(item, key) in systemList" :key="key" class="gui-grid">
                <view class="gui-grid-item" @click="handleTap(item)">
                  <text
                    :class="['gui-grid-icon', item.iconClass ?? 'font-icons']"
                  >{{ item.iconBase }}</text>
                  <text class="gui-grid-text gui-color-black">{{ item.name }}</text>
                </view>
              </view>
              <!-- <view class="gui-grid">
								<view class="gui-grid-item" @click="takePhoto">
									<text :class="['gui-grid-icon','font-icons']">&#xe6d4;</text>
									<text class="gui-grid-text gui-color-black">测试拍照</text>
								</view>
							</view>
							<image v-for="item in srcs" :src="item" mode="aspectFit" /> -->
            </view>
          </div>
          <div class="grid-box">
            <view class="panel">
              <text class="panel-title">仓库管理</text>
            </view>
            <view
              class="grid-list"
              :style="[isPad == true?'grid-template-columns: repeat(5, 1fr)':
                isPhone == true?'grid-template-columns: repeat(4, 1fr)':
                'grid-template-columns: repeat(3, 1fr)']"
            >
              <view
                v-for="(item, key) in WMSList"
                v-show="$permission(item.permission)"
                :key="key"
                class="gui-grid"
              >
                <view class="gui-grid-item" @click="handleTap(item)">
                  <text
                    :class="['gui-grid-icon', item.iconClass ?? 'font-icons']"
                  >{{ item.iconBase }}</text>
                  <text class="gui-grid-text gui-color-black">{{ item.name }}</text>
                </view>
              </view>
            </view>
          </div>
          <!-- <div class="grid-box">
            <view class="panel">
              <text class="panel-title">生产管理</text>
            </view>
            <view
              class="grid-list"
              :style="[isPad == true?'grid-template-columns: repeat(5, 1fr)':
                isPhone == true?'grid-template-columns: repeat(4, 1fr)':
                'grid-template-columns: repeat(3, 1fr)']"
            >
              <view
                v-for="(item, key) in MESList"
                v-show="$permission(item.permission)"
                :key="key"
                class="gui-grid"
              >
                <view class="gui-grid-item" @click="handleTap(item)">
                  <text
                    :class="['gui-grid-icon', item.iconClass ?? 'font-icons']"
                    style="background-color: #2cb755;"
                  >{{ item.iconBase }}</text>
                  <text class="gui-grid-text gui-color-black">{{ item.name }}</text>
                </view>
              </view>
            </view>
          </div> -->
          <!-- <div class="grid-box">
            <view class="panel">
              <text class="panel-title">设备管理</text>
            </view>
            <view
              class="grid-list"
              :style="[isPad == true?'grid-template-columns: repeat(5, 1fr)':
                isPhone == true?'grid-template-columns: repeat(4, 1fr)':
                'grid-template-columns: repeat(3, 1fr)']"
            >
              <view v-for="(item, key) in ETMList" :key="key" class="gui-grid">
                <view class="gui-grid-item" @click="handleTap(item)">
                  <text
                    :class="['gui-grid-icon', item.iconClass ?? 'font-icons']"
                    style="background-color: #30c6c8;"
                  >{{ item.iconBase }}</text>
                  <text class="gui-grid-text gui-color-black">{{ item.name }}</text>
                </view>
              </view>
            </view>
          </div> -->
          <!-- <div class="grid-box">
            <view class="panel">
              <text class="panel-title">供应商管理</text>
            </view>
            <view
              class="grid-list"
              :style="[isPad == true?'grid-template-columns: repeat(5, 1fr)':
                isPhone == true?'grid-template-columns: repeat(4, 1fr)':
                'grid-template-columns: repeat(3, 1fr)']"
            >
              <view v-for="(item, key) in SRMList" :key="key" class="gui-grid">
                <view class="gui-grid-item" @click="handleTap(item)">
                  <text
                    :class="['gui-grid-icon', item.iconClass ?? 'font-icons']"
                    style="background-color: #ff800e;"
                  >{{ item.iconBase }}</text>
                  <text class="gui-grid-text gui-color-black">{{ item.name }}</text>
                </view>
              </view>
            </view>
          </div> -->
        </div>
        <uni-popup ref="errorTip" type="dialog">
          <uni-popup-dialog
            type="error"
            cancel-text="关闭"
            confirm-text="确认"
            title="提示"
            :content="errorTipMessage"
            @confirm="handleCloseErrorTipsModal"
            @close="handleCloseErrorTipsModal"
          />
        </uni-popup>
      </template>
    </gui-page>
  </view>
</template>

<script>
// import { getCLodop } from "../../unit/CLodopfuncs2.js"
import {
  ref,
  getCurrentInstance
} from 'vue'
export default {
  setup() {
    const {
      proxy
    } = getCurrentInstance()
    console.log(proxy)
    const errorTip = ref('')
    const errorTipMessage = ref('')
    const srcs = ref([])
    const systemList = ref([
      {
      	iconClass: 'font-icons',
      	iconBase: '\ue6aa',
      	name: '打印测试'
      },
      // {
      // 	iconClass: 'font-icons',
      // 	iconBase: '\ue673',
      // 	name: '扫码'
      // },
      // {
      // 	iconClass: "font-icons",
      // 	iconBase: "\ue6d4",
      // 	name: "蓝牙测试"
      // },
      {
        iconClass: 'font-icons',
        iconBase: '\ue6d8',
        name: '蓝牙配置'
      }
    ])
    const SRMList = ref([{
      iconClass: 'font-icons',
      iconBase: '\ue692',
      name: '预收单'
    }])
    const ETMList = ref([{
      iconClass: 'font-icons',
      iconBase: '\ue7f2',
      name: '模具保养'
    }])
    const MESList = ref([{
      iconClass: 'font-icons',
      iconBase: '\ue692',
      permission: 'system:home:glue',
      name: '点胶机'
    }, {
      iconClass: 'font-icons',
      iconBase: '\ue692',
      permission: 'system:home:ipqc',
      name: 'IPQC检验'
    }, {
      iconClass: 'font-icons',
      iconBase: '\ue692',
      permission: 'system:home:oqc',
      name: 'FQC检验'
    }, {
      iconClass: 'font-icons',
      iconBase: '\ue692',
      permission: 'system:home:cutting',
      name: '分切'
    }, {
      iconClass: 'font-icons',
      iconBase: '\ue692',
      permission: '',
      name: '工序执行'
    }, {
      iconClass: 'font-icons',
      iconBase: '\ue692',
      permission: '',
      name: '全检执行'
    }])
    const WMSList = ref([
      // {
      // 	iconClass: "font-icons",
      // 	iconBase: "\ue613",
      // 	name: "基础设置"
      // },
      // {
      // 	iconClass: "font-icons",
      // 	iconBase: "\ue7da",
      // 	name: "报表中心"
      // },
      {
        iconClass: 'font-icons',
        iconBase: '\ue6b7',
        permission: '',
        name: '扫码出入库'
      },
      // {
      //   iconClass: 'font-icons',
      //   iconBase: '\ue6b7',
      //   permission: '',
      //   name: '扫码出库'
      // },
      // {
      //   iconClass: 'font-icons',
      //   iconBase: '\ue6b7',
      //   permission: '',
      //   name: '扫码入库'
      // },
      {
        iconClass: 'font-icons',
        iconBase: '\ue7d4',
        permission: '',
        name: '来料登记'
      },
      {
        iconClass: 'font-icons',
        iconBase: '\ue660',
        permission: '',
        name: '物料上架'
      },
      {
        iconClass: 'font-icons',
        iconBase: '\ue660',
        permission: '',
        name: '入库申请'
      },
      // {
      //   iconClass: 'font-icons',
      //   iconBase: '\ue660',
      //   permission: '',
      //   name: '分切备料'
      // },
      // {
      //   iconClass: 'font-icons',
      //   iconBase: '\ue660',
      //   permission: '',
      //   name: '送货单回签'
      // },
      {
        iconClass: 'font-icons',
        iconBase: '\uebb6',
        permission: '',
        name: '退料申请'
      },
      {
        iconClass: 'font-icons',
        iconBase: '\ue7eb',
        permission: '',
        name: '货位调整'
      },
      // {
      //   iconClass: 'font-icons',
      //   iconBase: '\ue64c',
      //   permission: '',
      //   name: '栈板拆合批'
      // },
      // {
      //   iconClass: 'font-icons',
      //   iconBase: '\ue64a',
      //   permission: '',
      //   name: '成品拆合箱'
      // },
      // {
      //   iconClass: 'font-icons',
      //   iconBase: '\ue64d',
      //   permission: '',
      //   name: '物料拆合批'
      // },
      {
        iconClass: 'font-icons',
        iconBase: '\ue7dd',
        permission: '',
        name: '生产领料'
      },
      {
        iconClass: 'font-icons',
        iconBase: '\ue7dd',
        permission: '',
        name: '委外备料'
      },
      // {
      //   iconClass: 'font-icons',
      //   iconBase: '\uebb6',
      //   permission: '',
      //   name: '生产发料'
      // },
      // {
      //   iconClass: 'font-icons',
      //   iconBase: '\ue697',
      //   permission: '',
      //   name: '条码拆分'
      // },
      // {
      //   iconClass: 'font-icons',
      //   iconBase: '\ue681',
      //   permission: '',
      //   name: '条码合并'
      // },
      // {
      //   iconClass: 'font-icons',
      //   iconBase: '\ue60e',
      //   permission: '',
      //   name: '出货标签'
      // },
      {
        iconClass: 'font-icons',
        iconBase: '\ue641',
        permission: '',
        name: '出货列表'
      },
      {
        iconClass: 'font-icons',
        iconBase: '\ue60e',
        // permission: 'wms:sale-out-order:permission',
        permission: '',
        name: '销售出货'
      },
      // {
      //   iconClass: 'font-icons',
      //   iconBase: '\ue60e',
      //   permission: '',
      //   name: '出入冷库'
      // },
      // {
      //   iconClass: 'font-icons',
      //   iconBase: '\ue60e',
      //   permission: '',
      //   name: '半成品流转'
      // }
    ])

    const handleTap = function(row) {
      uni.$grace.msg(row.name + '模块正在火速开发中')
      // #ifdef APP-PLUS
      const mpaasScanModule = uni.requireNativePlugin('Mpaas-Scan-Module')
      // #endif
      switch (row.name) {
      case '扫码':
        // #ifdef APP-PLUS
        mpaasScanModule.mpaasScan({
          // 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
          'scanType': ['qrCode', 'barCode'],
          // 是否隐藏相册，默认false不隐藏
          'hideAlbum': false
        },
        (ret) => {
          uni.showModal({
            title: '弹窗标题',
            // 返回值中，resp_code 表示返回结果值，10：用户取消，11：其他错误，1000：成功
            // 返回值中，resp_message 表示返回结果信息
            // 返回值中，resp_result 表示扫码结果，只有成功才会有返回
            content: JSON.stringify(ret),
            showCancel: false,
            confirmText: '确定'
          })
        })
        // #endif
        break
      case '打印测试':
        uni.navigateTo({
        	url: "/pages/tabbar/printTest"
        })

        //  // #ifdef APP-PLUS
        //  const Activity = plus.android.runtimeMainActivity()
        //  const Intent = plus.android.importClass('android.content.Intent')
        //  const Uri = plus.android.importClass('android.net.Uri')
        //  const browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(`${uni.$baseUrl}/jmreport/view/828502348750999552?token=32701364ce02496ba2b8a5f17c06dae4`))
        //  Activity.startActivity(browserIntent)
        //  // #endif

        //  // #ifdef H5
        //  const dom = document.createElement('a')
        //  dom.setAttribute('href',
        // `http://192.168.1.101:48080/jmreport/view/828502348750999552?hotPressId=1664178203920498689`
        //  )
        //  dom.setAttribute('target', '_blank')
        //  dom.click()
        //  // #endif
        break
      case '蓝牙测试':
        uni.navigateTo({
          url: '/pages/workbranch/system/bluetooth'
        })
        break
      case '蓝牙配置':
        uni.navigateTo({
          url: '/pages/workbranch/system/bluetoothConfig'
        })
        break
      case '生产领料':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/production/prepareMaterials'
        })
        break
      case '委外备料':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/outSourceMaterial/outSourceList'
        })
        break
      case '来料登记':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/materialRegister/registerType'
        })
        break
      case '物料上架':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/feeding/shelfType'
        })
        break
      case '入库申请':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/warehousing/warehousingType'
        })
        break
      case '退料申请':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/returnMaterial/returnMaterialType'
        })
        break
      case '送货单回签':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/deliveryNote/deliveryNoteList'
        })
        break
      case '分切备料':
        uni.navigateTo({
          url: '/pages/workbranch/production/cutting/cuttingMaterialPreparation'
        })
        break
      case '货位调整':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/location/locationPage'
        })
        break
      case '物料拆合批':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/materialDisass/materialWorkBranch'
        })
        break
      case '栈板拆合批':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/trestle/trestleList'
        })
        break
      case '成品拆合箱':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/box/boxList'
        })
        break
      // case '生产发料':
      //   uni.navigateTo({
      //     url: '/pages/workbranch/warehouse/productionIssue/productionIssue'
      //   })
      //   break
      case '条码拆分':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/codeSplitOrMerge/codeSplit'
        })
        break
      case '条码合并':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/codeSplitOrMerge/codeMerge'
        })
        break
      case '出货标签':
        uni.navigateTo({
          url: '/pages/workbranch/production/shipment/shipmentPage'
        })
        break
      case '出货列表':
        uni.navigateTo({
          url: '/pages/workbranch/production/shipment/shipmentPatchworkPage'
        })
        break
      case '销售出货':
        uni.navigateTo({
          url: '/pages/workbranch/production/shipmentMHT/shipmentPage'
        })
        break
      case '点胶机':
        uni.navigateTo({
          url: '/pages/workbranch/production/glue/indexPage'
        })
        break
      case 'IPQC检验':
        uni.navigateTo({
          url: '/pages/workbranch/production/IPQC/ipqcList'
        })
        break
      case 'FQC检验':
        uni.navigateTo({
          url: '/pages/workbranch/production/FQC/fqcList'
        })
        break
      case '分切':
        uni.navigateTo({
          url: '/pages/workbranch/production/cutting/cuttingList'
        })
        break
      case '工序执行':
        uni.navigateTo({
          url: '/pages/workbranch/production/processExecution/processList'
        })
        break
      case '全检执行':
        uni.navigateTo({
          url: '/pages/workbranch/production/processExecution/processFullInspection'
        })
        break
      case '模具保养':
        uni.navigateTo({
          url: '/pages/workbranch/ETM/moldPreserve/indexPage'
        })
        break
      case '出入冷库':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/coldStorage/indexPage'
        })
        break
      case '半成品流转':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/SemiFinishedProducts/indexPage'
        })
        break
      case '扫码出入库':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/scanInOut/scanInOutType'
        })
        break
      case '扫码入库':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/scanInOut/In/scanInPage'
        })
        break
      case '扫码出库':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/scanInOut/Out/scanOutPage'
        })
        break
      }
    }

    const takePhoto = function() {
      uni.chooseImage({
        count: 6, // count: 6, //默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 从相册选择
        success: function(res) {
          srcs.value = res.tempFilePaths
          console.log(res, JSON.stringify(res.tempFilePaths))
        }
      })
    }

    // 关闭错误信息弹窗
    const handleCloseErrorTipsModal = async function() {
      errorTip.value.close()
    }

    return {
      WMSList,
      systemList,
      MESList,
      SRMList,
      ETMList,
      handleTap,
      srcs,
      takePhoto,
      errorTip,
      errorTipMessage,
      handleCloseErrorTipsModal
    }
  }
}
</script>

<style lang="scss" scoped>
	.gridBody {
		margin: 80px 0;
		overflow-y: scroll;
	}

	.grid-box {
		width: calc(100vw - 16px);
		margin: 14px 8px;
		display: flex;
		flex-direction: column;
		border-radius: 4px;
		box-shadow: 0 0 9px 0 rgba(121, 118, 118, 0.34);

		.panel {
			height: 2.2rem;
			width: calc(100vw - 32px);
			padding-left: 16px;
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
			background: linear-gradient(to right, rgb(78, 188, 250), rgb(0, 239, 239));

			.panel-title {
				width: calc(100vw / 4 - 2px);
				height: inherit;
				line-height: 2.2rem;
				text-align: center;
				font-size: 16px;
				color: white;
			}
		}

		.grid-list {
			width: calc(100vw - 16px);
			/* 设置容器布局为grid布局 */
			display: grid;
			/* 指定每一行的宽度 每个宽度中间用空格隔开 */
			grid-template-rows: auto;
			/* 指定每一列的宽度 每个宽度中间用空格隔开 */
			grid-template-columns: 1fr 1fr 1fr;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
			background-color: white;

			.gui-grid {
				display: flex;
				justify-content: center;

				.font-icons {
					width: 40px;
					height: 40px;
					border-radius: 6px;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26px;
					color: #f4f4f4;
					box-shadow: 2px 2px 1px 0 #d5dffd;
					background-color: #539cf8;
				}

				.gui-grid-item {
					width: 85px;
					height: 85px;
					margin-top: 4px;
					display: flex;
					justify-content: center;
					align-items: center;

					uni-text:nth-of-type(2) {
						padding-top: 4px;
						padding-left: 3px;
						font-size: 14px;
					}
				}
			}
		}
	}

	.adapt-image {
		width: 750rpx;
	}
</style>