rtk-wms-uniapp/pages/workbranch/ETM/moldPreserve/moldDetails.vue

<template>
  <gui-page :custom-header="true" :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="goBack"
        >&#xe6c5;</text>
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text
          class="gui-h4 gui-blod gui-flex1 gui-text-center gui-ellipsis gui-color-white gui-primary-text"
        >模具明细</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width:40px;" />
        <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
      </view>
    </template>
    <template #gBody>
      <view class="oqc-checkout">
        <view class="card-list-flexbox">
          <text class="card-list-title" :style="[isPad?'font-size: 18px':'font-size: 14px']">模具信息</text>
          <view class="card-list-item">
            <text>模具名称</text>
            <text>{{ moldDetails.toolingName }}</text>
          </view>
          <!-- <view class="card-list-item">
						<text>模具类型</text>
						<text>{{ moldDetails.toolingType }}</text>
					</view> -->
          <view class="card-list-item">
            <text>创建时间</text>
            <text>{{ !['', undefined, null, 0].includes(moldDetails.createTime) ? new Date(moldDetails.createTime).toLocaleString(): '' }}</text>
          </view>
          <view class="card-list-item">
            <text>额定使用次数</text>
            <text>{{ moldDetails.toolingLifeTime }}</text>
          </view>
          <view class="card-list-item">
            <text>实际使用次数</text>
            <text>{{ moldDetails.toolingRealTime }}</text>
          </view>
        </view>
        <view class="table-title">
          <span>保养记录</span>
        </view>
        <view class="custom-table">
          <uni-table border stripe empty-text="暂无更多数据">
            <!-- 表头行 -->
            <uni-tr class="custom-table-head">
              <uni-th align="center" width="55px">序号</uni-th>
              <uni-th align="center" width="110px">保养人</uni-th>
              <uni-th align="center" width="160px">保养日期</uni-th>
              <uni-th align="center" width="80px">寿命</uni-th>
              <uni-th align="center" width="180px">导柱导套无松动</uni-th>
              <uni-th align="center" width="180px">定位销无松动</uni-th>
              <uni-th align="center" width="180px">模板无变形，磨损</uni-th>
              <uni-th align="center" width="100px">刀锋无缺口</uni-th>
              <uni-th align="center" width="100px">刀锋无钝化</uni-th>
              <uni-th align="center" width="180px">模具表面清洁整理</uni-th>
              <uni-th align="center" width="200px">模具无生锈且添加防锈油</uni-th>
              <uni-th align="center" width="100px">备注</uni-th>
            </uni-tr>
            <!-- 表格数据行 -->
            <uni-tr v-for="(item, key) in moldList" :key="key">
              <uni-td align="center" width="120px">{{ ++key }}</uni-td>

              <uni-td align="center">{{ computedUserName(item.maintainUserid) }}</uni-td>
              <uni-td align="center">{{ item.maintainDate }}</uni-td>
              <uni-td align="center">{{ item.addCount }} {{ item.countFormat * 1 === "2"? "%": "" }}</uni-td>
              <uni-td
                align="center"
                style="font-weight: bold;font-size: 18px;"
              >{{ item.guidePillar * 1 === 1? '✓': '✕' }}</uni-td>
              <uni-td
                align="center"
                style="font-weight: bold;font-size: 18px;"
              >{{ item.orientation * 1 === 1? '✓': '✕' }}</uni-td>
              <uni-td
                align="center"
                style="font-weight: bold;font-size: 18px;"
              >{{ item.template * 1 === 1? '✓': '✕' }}</uni-td>
              <uni-td
                align="center"
                style="font-weight: bold;font-size: 18px;"
              >{{ item.gap * 1 === 1? '✓': '✕' }}</uni-td>
              <uni-td
                align="center"
                style="font-weight: bold;font-size: 18px;"
              >{{ item.passivation * 1 === 1? '✓': '✕' }}</uni-td>
              <uni-td
                align="center"
                style="font-weight: bold;font-size: 18px;"
              >{{ item.clean * 1 === 1? '✓': '✕' }}</uni-td>
              <uni-td
                align="center"
                style="font-weight: bold;font-size: 18px;"
              >{{ item.rust * 1 === 1? '✓': '✕' }}</uni-td>
              <uni-td align="center">{{ item.remark }}</uni-td>
            </uni-tr>
          </uni-table>
        </view>
      </view>
      <gui-right-menus>
        <!-- 扩展按钮 -->
        <template #menus-more>
          <view
            hover-class="gui-tap"
            class="menu-items gui-bg-blue gui-flex gui-columns gui-justify-content-center"
            @click="handleAddPreveser"
          >
            <text class="menu-text gui-block gui-text-center gui-color-white">新增保养</text>
          </view>
        </template>
        <!-- 核心按钮 -->
        <template #menus-primary>
          <view class="menu-items gui-bg-primary gui-flex gui-columns gui-justify-content-center">
            <text class="menu-icon gui-color-white gui-block gui-text-center gui-icons">&#xe614;</text>
            <text class="menu-text gui-color-white gui-block gui-text-center">操作</text>
          </view>
        </template>
      </gui-right-menus>
    </template>
  </gui-page>
</template>
<script>
import {
  ref,
  computed,
  defineComponent,
  onBeforeMount
} from 'vue'
export default defineComponent({
  onLoad() {
    // // #ifdef APP-PLUS
    // plus.screen.lockOrientation('default');
    // // #endif
  },
  onUnload() {
    // // #ifdef APP-PLUS
    // plus.screen.lockOrientation('portrait-primary');
    // // #endif
  },
  onResize() {
    if ([90, -90].includes(plus.navigator.getOrientation())) {
      this.isLandscapeScreen = true
    } else {
      this.isLandscapeScreen = false
    }
  },
  setup(options) {
    const popup = ref()
    const isLandscapeScreen = ref(false)
    const toolingId = uni.getStorageSync('toolingId') ?? ''
    const moldDetails = ref({
      toolingName: '',
      toolingType: '',
      createTime: '',
      toolingLifeTime: '',
      toolingRealTime: ''
    })
    const userList = ref([])
    const moldList = ref([])
    // 发料人
    const computedUserName = computed(() => {
      return userId => {
        return userList.value.find(item => item.id === userId)?.nickname ?? ''
      }
    })

    onBeforeMount(() => {
      uni.$reqGet('getMesSystemUserList', {
        pageNo: 1,
        pageSize: 100
      })
        .then(({
          code,
          data,
          msg
        }) => {
          if (code === 0) {
            userList.value = data?.list ?? []
          } else {
            uni.showToast({
              title: msg,
              icon: 'none',
              duration: 2000
            })
          }
        })
      uni.$reqGet('moldBaseDetails', {
        id: toolingId
      })
        .then(({
          code,
          data,
          msg
        }) => {
          if (code === 0) {
            moldDetails.value = data ?? {}
          } else {
            uni.showToast({
              title: msg,
              icon: 'none',
              duration: 2000
            })
          }
        })
      uni.$reqGet('moldList', {
        pageNo: 1,
        pageSize: 10,
        toolingId: toolingId
      })
        .then(({
          code,
          data,
          msg
        }) => {
          if (code === 0) {
            moldList.value = data?.list ?? []
          } else {
            uni.showToast({
              title: msg,
              icon: 'none',
              duration: 2000
            })
          }
        })
    })

    const goBack = function() {
      uni.$goBack('/pages/workbranch/ETM/moldPreserve/indexPage')
    }

    const handleAddPreveser = function() {
      uni.navigateTo({
        url: `/pages/workbranch/ETM/moldPreserve/moldAdd`
      })
    }

    return {
      popup,
      goBack,
      moldList,
      moldDetails,
      isLandscapeScreen,
      computedUserName,
      handleAddPreveser
    }
  }
})
</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);
	}

	.gui-relative {
		overflow: visible;
		height: 100vh;

		.oqc-checkout {
			width: 100vw;
			height: calc(100vh - 75px);
			position: absolute;
			top: 95px;
			overflow-y: scroll;
		}
	}

	.card-list-flexbox {
		width: calc(100vw - 24px);
		height: 195px;
		margin: 0 12px;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		overflow-y: scroll;

		.card-list-title {
			width: 100%;
			height: 35px;
			line-height: 35px;
			margin: 0 4px 0 4px;
			border-radius: 4px 4px 0 0;
			text-align: center;
			color: white;
			background-color: rgba(0, 160, 233, 1.0);
		}

		.card-list-item,
		.card-list-item-operation {
			width: 100%;
			height: 35px;
			margin: 0 4px 3rpx 4px;
			border-radius: 4px;
			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 8px;
				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;
			}

		}

	}

	.popup-content {
		width: 100vw;
		height: 55vh;
		overflow-y: scroll;
	}

	.card-list-flexbox-popup {
		width: 100vw;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;

		.card-list-item,
		.card-list-item-input {
			width: 100vw;
			height: 100%;
			min-height: 40px;
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: #fff;

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

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

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

			.text-3 {
				width: calc(100% - 15%);
				min-height: 35px;
				justify-content: flex-end;
				padding: 2px 6px;
			}

			.text-3::before {}

			.btn-mg {
				margin: 0 5px;
			}
		}

		.card-list-item {
			justify-content: center;
		}
	}

	.table-title {
		height: 40px;
		line-height: 40px;
		margin: 4px 0 -3px 0;
		padding: 0 12px;
		font-size: 16px;
		font-weight: bold;
		background-color: white;
	}

	.custom-table {
		height: 30vh;
		min-height: 230px;
		margin: 5px 0;
		// min-height: 600px;
		overflow-y: scroll;
	}

	.custom-table2 {
		height: 100px;
		margin: 5px 0;
		overflow-y: scroll;
	}

	.uni-list-cell {
		width: 100vw;
		height: 35px;
		margin: 4px 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2px solid #eaeff2;
		background-color: #fff;

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

		.uni-list-cell-left {
			flex: 1;
			height: 35px;
			justify-content: flex-start;
		}

		.uni-list-cell-db {
			flex: 3;
			height: 35px;
			justify-content: flex-end;
			margin-right: 4px;
			padding: 2px 6px;

			uni-picker {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: center;
			}
		}
	}

	.modal-btns {
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.line {
		margin-top: 10rpx;
		height: 80rpx;
		width: 1rpx;
		background-color: #dcdcdc;
	}
</style>