rtk-wms-uniapp/pages/workbranch/ETM/moldPreserve/moldAdd.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="list-content">
        <view class="card-list-flexbox">
          <!-- <view class="card-list-item">
						<text class="text-1">保养日期</text>
						<view class="text-2">
							<picker mode="date"
								style="width: 100%;min-width: 85px;height: 40px;display: flex;justify-content: flex-end;align-items: center;"
								:value="form.maintainDate" @change="bindTimeChange($event)">
								{{ form.maintainDate }}
							</picker>
						</view>
					</view> -->
          <view class="card-list-item">
            <text class="text-1">保养人</text>
            <view class="text-2">
              {{ form.username }}
              <!-- <uni-data-select v-model="form.maintainUserid" :localdata="selectList" @change="search">
							</uni-data-select> -->
            </view>
          </view>
          <view class="card-list-item-checkbox">
            <text class="checkbox-label">导柱导套无松动</text>
            <view class="checkbox-check">
              <checkbox
                value="true"
                :checked="form.guidePillar"
                color="#FFCC33"
                style="transform:scale(0.7)"
                @click="handleChecked('guidePillar')"
              />
            </view>
          </view>
          <view class="card-list-item-checkbox">
            <text class="checkbox-label">定位销无松动</text>
            <view class="checkbox-check">
              <checkbox
                value="true"
                :checked="form.orientation"
                color="#FFCC33"
                style="transform:scale(0.7)"
                @click="handleChecked('orientation')"
              />
            </view>
          </view>
          <view class="card-list-item-checkbox">
            <text class="checkbox-label">模板无变形，磨损</text>
            <view class="checkbox-check">
              <checkbox
                value="true"
                :checked="form.template"
                color="#FFCC33"
                style="transform:scale(0.7)"
                @click="handleChecked('template')"
              />
            </view>
          </view>
          <view class="card-list-item-checkbox">
            <text class="checkbox-label">刀锋无缺口</text>
            <view class="checkbox-check">
              <checkbox
                value="true"
                :checked="form.gap"
                color="#FFCC33"
                style="transform:scale(0.7)"
                @click="handleChecked('gap')"
              />
            </view>
          </view>
          <view class="card-list-item-checkbox">
            <text class="checkbox-label">刀锋无钝化</text>
            <view class="checkbox-check">
              <checkbox
                value="true"
                :checked="form.passivation"
                color="#FFCC33"
                style="transform:scale(0.7)"
                @click="handleChecked('passivation')"
              />
            </view>
          </view>
          <view class="card-list-item-checkbox">
            <text class="checkbox-label">模具表面清洁整理</text>
            <view class="checkbox-check">
              <checkbox
                value="true"
                :checked="form.clean"
                color="#FFCC33"
                style="transform:scale(0.7)"
                @click="handleChecked('clean')"
              />
            </view>
          </view>
          <view class="card-list-item-checkbox">
            <text class="checkbox-label">模具无生锈且添加防锈油</text>
            <view class="checkbox-check">
              <checkbox
                value="true"
                :checked="form.rust"
                color="#FFCC33"
                style="transform:scale(0.7)"
                @click="handleChecked('rust')"
              />
            </view>
          </view>
          <view class="card-list-item-checkbox">
            <text class="checkbox-label">寿命类型</text>
            <view class="custom-select">
              <uni-data-select v-model="form.countFormat" :localdata="selectList" />
            </view>
          </view>
          <view class="card-list-item-checkbox">
            <text class="checkbox-label">寿命</text>
            <view class="custom-select">
              <uni-easyinput
                v-model="form.addCount"
                :clearable="false"
                type="number"
                min="0"
                focus
				@focus="handleInputFocus"
                placeholder="请填写寿命"
              />
            </view>
          </view>
          <view class="card-list-item-checkbox">
            <text class="checkbox-label">备注</text>
          </view>
          <view class="card-list-item-remark">
            <textarea
              v-model="form.remark"
              maxlength="-1"
              confirm-type="done"
              placeholder="请填写备注"
            />
          </view>
        </view>
      </view>
      <gui-right-menus>
        <!-- 扩展按钮 -->
        <template #menus-more>
          <view
            hover-class="gui-tap"
            class="menu-items gui-bg-green gui-flex gui-columns gui-justify-content-center"
            @click="handleSavePreveser"
          >
            <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,
  onMounted,
  defineComponent
} from 'vue'
export default defineComponent({
  setup() {
    const form = ref({
      toolingId: uni.getStorageSync('toolingId') ?? '', // 模具ID
      maintainUserid: '',
      maintainDate: '',
      username: '',
      guidePillar: false,
      orientation: false,
      template: false,
      gap: false,
      passivation: false,
      clean: false,
      rust: false,
      countFormat: '',
      addCount: 0,
      remark: ''
    })

    onMounted(() => {
      const userInfo = JSON.parse(uni.getStorageSync('user') ?? {})
      form.value.maintainUserid = userInfo?.id
      form.value.username = userInfo?.nickname
    })

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

    const bindTimeChange = function(ev) {
      form.value.maintainDate = ev.detail.value
    }

    const handleChecked = function(key) {
      form.value[key] = !form.value[key]
    }

    // 保存
    const handleSavePreveser = function() {
      const datetime = new Date()
      const year = datetime.getFullYear()
      const month = datetime.getMonth() + 1
      const day = datetime.getDate() < 10 ? '0' + datetime.getDate() : datetime.getDate()
      const params = {
        ...form.value,
        maintainUserid: form.value.maintainUserid + '',
        maintainDate: year + '-' + month + '-' + day,
        clean: form.value.clean ? '1' : '0',
        gap: form.value.gap ? '1' : '0',
        guidePillar: form.value.guidePillar ? '1' : '0',
        orientation: form.value.orientation ? '1' : '0',
        passivation: form.value.passivation ? '1' : '0',
        rust: form.value.rust ? '1' : '0',
        template: form.value.template ? '1' : '0',
        addCount: form.value.addCount ?? 0,
        countFormat: form.value.countFormat ?? '1'
      }
      uni.$reqPost('moldCreate', params)
        .then(({
          code,
          data,
          msg
        }) => {
          if (code === 0) {
            uni.showToast({
              title: '保存成功',
              icon: 'none',
              duration: 1000
            })
            setTimeout(() => {
              goBack()
            }, 1000)
          } else {
            uni.showToast({
              title: msg,
              icon: 'none',
              duration: 2000
            })
          }
        })
    }
	
	// 禁用软键盘
	const handleInputFocus = function() {
		setTimeout(() => {
			uni.hideKeyboard()
		}, 100)
	}
	
    return {
      selectList: [{ text: '数值', value: '1' }, { text: '百分比', value: '2' }],
      form,
      goBack,
	  handleInputFocus,
      handleChecked,
      bindTimeChange,
      handleSavePreveser
    }
  }
})
</script>

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

	.list-content {
		margin-top: 80px;
		background-color: #edeeee;
	}

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

		.card-list-item {
			width: 750rpx;
			height: 45px;
			margin: 2rpx 0;
			display: grid;
			grid-template-rows: 1fr;
			grid-template-columns: 1fr 3fr;
			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;
				color: #191919;
			}

			.text-1 {
				width: calc(100% - 24px);
				height: 40px;
				padding: 2px 12px;
			}

			.text-2 {
				width: calc(100% - 24px);
				min-width: 120px;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-right: 4px;
				padding: 2px 12px;
			}
		}

		.card-list-item-checkbox {
			width: 750rpx;
			height: 40px;
			margin: 2rpx 0;
			display: grid;
			grid-template-rows: 1fr;
			grid-template-columns: 3fr 1fr;
			align-items: center;
			background-color: #fff;

			.checkbox-label {
				width: calc(100% - 24px);
				min-width: 120px;
				height: 40px;
				line-height: 40px;
				font-size: 14px;
				margin-right: 4px;
				padding: 2px 12px;
			}

			.checkbox-check {
				height: 40px;
				line-height: 40px;
				width: calc(100% - 24px);
				padding: 2px 12px;
				text-align: right;
			}
		}

		.card-list-item-remark {
			width: 750rpx;
			padding: 2px 12px;
			background-color: #fff;

			textarea {
				width: 100%;
				min-height: 80px;
				height: 25vh;
			}
		}

	}

	.font-icons {
		width: 40px;
		font-size: 20px;
	}

	.scan {
		height: 45px;
		width: calc(100% - 48px);
		margin: 12px;
		padding: 0 12px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 6px;
		background-color: white;

		.scan-card {
			width: 100%;
			display: grid;
			grid-template-rows: 1fr;
			grid-template-columns: 7fr 2fr;
			align-items: center;

			input {
				height: 35px;
				line-height: 35px;
			}

			text {
				width: 100%;
				text-align: right;
			}
		}
	}

	.search {
		height: 45px;
		width: calc(100% - 48px);
		margin: 12px;
		padding: 0 12px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 6px;
		background-color: white;

		.search-card {
			width: 100%;
			display: grid;
			grid-template-rows: 1fr;
			grid-template-columns: 3fr 7fr;
			align-items: center;
		}
	}

	.custom-select {
		width: 100%;
		height: 100%;
		padding: 0;
	}
</style>