business_tms_program 0.0.0

package/src/pages/device/materialTowerCode.vue

@@ -0,0 +1,589 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+import { useForm } from '@/hooks/useForm';
+import { queryDeviceDetail, querySiloSupplier, updateDeviceInfo, type TmsDeviceInfoUpdateDTO, type SiloSupplierItem } from '@/api/device'
+import { type ValidationRules } from '@/utils/form';
+import SinglePick from '@/components/SinglePick.vue';
+import RippleBtn from '@/components/RippleBtn.vue';
+import { MaterialTowerCodeRuleEnum, materialTowerCodeRuleMap } from '@/dict/device';
+import { formatDateTime } from '@/utils/index';
+
+defineOptions({
+  name: "materialTowerCode"
+});
+
+// 料塔编码规则选项
+const codeRuleOptions = [
+  { label: materialTowerCodeRuleMap[MaterialTowerCodeRuleEnum.SUPPLIER], value: MaterialTowerCodeRuleEnum.SUPPLIER },
+  { label: materialTowerCodeRuleMap[MaterialTowerCodeRuleEnum.DELIVERY], value: MaterialTowerCodeRuleEnum.DELIVERY }
+];
+
+// 表单数据类型（内部使用枚举值）
+type FormDataType = {
+  siloCodeRules: string;           // 料塔编码规则（枚举值：SUPPLIER 或 DELIVERY）
+  supplierAbbrEn: string;          // 料塔供应商缩写
+  produceTime: string;             // 生产日期
+  shippingTime: string;            // 发货月份
+  produceFlowCode: string;         // 生产流水编码
+}
+
+// 表单初始数据
+const initialData: FormDataType = {
+  siloCodeRules: '',
+  supplierAbbrEn: '',
+  produceTime: '',
+  shippingTime: '',
+  produceFlowCode: '',
+};
+
+// 校验规则
+const validationRules: ValidationRules<Partial<FormDataType>> = {
+  siloCodeRules: {
+    required: true,
+    message: '请选择料塔编码规则',
+  },
+  supplierAbbrEn: {
+    required: true,
+    message: '请选择料塔供应商',
+  },
+  produceTime: {
+    required: false,
+    message: '请选择生产日期',
+  },
+  produceFlowCode: {
+    required: false,
+    pattern: /^(0[1-9]|[1-9][0-9])$/,
+    message: '请输入01-99的整数',
+  },
+  shippingTime: {
+    required: false,
+    message: '请选择发货月份',
+  },
+}
+
+const { formData, errState, setFormItem, validateForm, validateOneField, initialForm } = useForm<FormDataType>(
+  initialData,
+  validationRules as ValidationRules<FormDataType>,
+  false,
+)
+
+const state = reactive({
+  deviceCode: '',
+  loading: false,
+  supplierList: [] as SiloSupplierItem[],
+  deviceInfo: {} as any,
+  lastUpdateInfo: '', // 上一次更新信息
+})
+
+// 供应商选项（用于SinglePick）
+const supplierOptions = computed(() => {
+  return state.supplierList.map(item => ({
+    label: `${item.supplierName}(${item.supplierAbbrEn})`,
+    value: item.supplierAbbrEn
+  }))
+})
+
+// 当前选择的规则类型
+const currentRuleType = computed(() => formData.siloCodeRules)
+
+// 获取今日日期（用于限制日期选择）
+const getTodayDate = () => {
+  const today = new Date();
+  const year = today.getFullYear();
+  const month = String(today.getMonth() + 1).padStart(2, '0');
+  const day = String(today.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+// 获取当月（用于限制月份选择）
+const getCurrentMonth = () => {
+  const today = new Date();
+  const year = today.getFullYear();
+  const month = String(today.getMonth() + 1).padStart(2, '0');
+  return `${year}-${month}`;
+}
+
+const changeValue = (key: keyof FormDataType, detail: any) => {
+  setFormItem(key, detail.value);
+  // 切换规则时，清空相关字段
+  if (key === 'siloCodeRules') {
+    if (detail.value === MaterialTowerCodeRuleEnum.SUPPLIER) {
+      setFormItem('shippingTime', '');
+      // 清空发货月份的错误状态
+      errState.shippingTime = '';
+    } else {
+      setFormItem('produceTime', '');
+      setFormItem('produceFlowCode', '');
+      // 清空生产日期和生产流水编号的错误状态
+      errState.produceTime = '';
+      errState.produceFlowCode = '';
+    }
+  }
+  // 当字段值改变时，清空该字段的错误状态（验证会在提交时进行）
+  if (key === 'produceTime' || key === 'produceFlowCode' || key === 'shippingTime') {
+    errState[key] = '';
+  }
+}
+
+// 将 YYYY-MM-DD 格式转换为 YYYYMMDD
+const formatDateWithoutDash = (dateStr: string): string => {
+  if (!dateStr) return '';
+  return dateStr.replace(/-/g, '');
+}
+
+// 将 YYYYMMDD 格式转换为 YYYY-MM-DD（用于 picker 组件）
+const formatDateWithDash = (dateStr: string): string => {
+  if (!dateStr) return '';
+  if (dateStr.length === 8) {
+    return `${dateStr.substring(0, 4)}-${dateStr.substring(4, 6)}-${dateStr.substring(6, 8)}`;
+  }
+  return dateStr;
+}
+
+// 将 YYYY-MM 格式转换为 YYYYMM
+const formatMonthWithoutDash = (monthStr: string): string => {
+  if (!monthStr) return '';
+  return monthStr.replace(/-/g, '');
+}
+
+// 将 YYYYMM 格式转换为 YYYY-MM（用于 picker 组件）
+const formatMonthWithDash = (monthStr: string): string => {
+  if (!monthStr) return '';
+  if (monthStr.length === 6) {
+    return `${monthStr.substring(0, 4)}-${monthStr.substring(4, 6)}`;
+  }
+  return monthStr;
+}
+
+// 生产日期选择
+const handleProduceTimeChange = (e: any) => {
+  const value = e.detail.value;
+  // 将 YYYY-MM-DD 格式转换为 YYYYMMDD（去掉短横线）
+  if (value) {
+    const dateStr = value.substring(0, 10);
+    const formattedDate = formatDateWithoutDash(dateStr);
+    changeValue('produceTime', { value: formattedDate });
+  }
+}
+
+// 发货月份选择
+const handleShippingTimeChange = (e: any) => {
+  const value = e.detail.value;
+  // 将 YYYY-MM 格式转换为 YYYYMM（去掉短横线）
+  if (value && value.length === 7) {
+    const formattedMonth = formatMonthWithoutDash(value);
+    changeValue('shippingTime', { value: formattedMonth });
+  } else if (value) {
+    // 如果后端返回的是完整日期，只取年月部分并转换
+    const dateStr = value.substring(0, 7);
+    const formattedMonth = formatMonthWithoutDash(dateStr);
+    changeValue('shippingTime', { value: formattedMonth });
+  }
+}
+
+// 获取供应商列表
+const fetchSupplierList = async () => {
+  try {
+    const res = await querySiloSupplier();
+    if (res) {
+      state.supplierList = res;
+    }
+  } catch (error) {
+    console.error('获取供应商列表失败', error);
+  }
+}
+
+// 解析料塔编码并回显数据
+const parseSiloCode = (siloCode: string) => {
+  if (!siloCode) return;
+  
+  // 按短横线分割
+  const parts = siloCode.split('-');
+  
+  if (parts.length === 3) {
+    // 供应商编码：三个部分（供应商缩写-生产日期-生产流水编码）
+    // 例如：BDL-20260109-05
+    const [supplierAbbrEn, produceTimeStr, produceFlowCode] = parts;
+    
+    setFormItem('siloCodeRules', MaterialTowerCodeRuleEnum.SUPPLIER);
+    setFormItem('supplierAbbrEn', supplierAbbrEn);
+    
+    // 生产日期：将 YYYYMMDD 格式转换为 YYYY-MM-DD（用于 picker 显示）
+    if (produceTimeStr && produceTimeStr.length === 8) {
+      setFormItem('produceTime', produceTimeStr); // 存储时保持 YYYYMMDD 格式
+    }
+    
+    // 生产流水编码
+    if (produceFlowCode) {
+      setFormItem('produceFlowCode', produceFlowCode);
+    }
+  } else if (parts.length === 2) {
+    // 发货编码：两个部分（供应商缩写-发货月份）
+    // 例如：BDL-20260109
+    const [supplierAbbrEn, shippingTimeStr] = parts;
+    
+    setFormItem('siloCodeRules', MaterialTowerCodeRuleEnum.DELIVERY);
+    setFormItem('supplierAbbrEn', supplierAbbrEn);
+    
+    // 发货月份：将 YYYYMM 格式转换为 YYYY-MM（用于 picker 显示）
+    if (shippingTimeStr) {
+      // 如果长度是8位，可能是 YYYYMMDD，只取前6位作为月份
+      const monthStr = shippingTimeStr.length === 8 ? shippingTimeStr.substring(0, 6) : shippingTimeStr;
+      if (monthStr.length === 6) {
+        setFormItem('shippingTime', monthStr); // 存储时保持 YYYYMM 格式
+      }
+    }
+  }
+}
+
+// 获取设备详情
+const fetchDeviceDetail = async (code: string) => {
+  state.loading = true;
+  try {
+    const res = await queryDeviceDetail({ deviceCode: code });
+    if (res) {
+      state.deviceInfo = res;
+      // 如果有料塔编码，解析并回显数据
+      if (res.siloCode) {
+        parseSiloCode(res.siloCode);
+      }
+      // 设置上一次更新信息
+      if (res.lastUpdateTime && res.updateBy) {
+        state.lastUpdateInfo = `上一次更新: ${formatDateTime(res.lastUpdateTime)} ${res.updateBy}`;
+      }
+    }
+  } catch (error) {
+    console.error('获取设备详情失败', error);
+  } finally {
+    state.loading = false;
+  }
+}
+
+// 提交表单
+const submitForm = async () => {
+  const isValid = await validateForm();
+  if (!isValid) {
+    return;
+  }
+  
+  // 根据规则类型校验必填字段
+  if (formData.siloCodeRules === MaterialTowerCodeRuleEnum.SUPPLIER) {
+    // 供应商编码规则下，生产日期和生产流水编号必填
+    if (!formData.produceTime) {
+      errState.produceTime = '请选择生产日期';
+      uni.showToast({
+        title: '请选择生产日期',
+        icon: 'none',
+        duration: 2000,
+      });
+      return;
+    }
+    if (!formData.produceFlowCode) {
+      errState.produceFlowCode = '请输入生产流水编号';
+      uni.showToast({
+        title: '请输入生产流水编号',
+        icon: 'none',
+        duration: 2000,
+      });
+      return;
+    }
+    // 验证生产流水编号格式
+    if (!/^(0[1-9]|[1-9][0-9])$/.test(formData.produceFlowCode)) {
+      errState.produceFlowCode = '请输入01-99的整数';
+      uni.showToast({
+        title: '请输入01-99的整数',
+        icon: 'none',
+        duration: 2000,
+      });
+      return;
+    }
+  } else if (formData.siloCodeRules === MaterialTowerCodeRuleEnum.DELIVERY) {
+    // 发货编码规则下，发货月份必填
+    if (!formData.shippingTime) {
+      errState.shippingTime = '请选择发货月份';
+      uni.showToast({
+        title: '请选择发货月份',
+        icon: 'none',
+        duration: 2000,
+      });
+      return;
+    }
+  }
+  
+  // 将枚举值转换为数字：SUPPLIER -> 1, DELIVERY -> 2
+  const siloCodeRulesNumber = formData.siloCodeRules === MaterialTowerCodeRuleEnum.SUPPLIER ? 1 : 2;
+  
+  const params: TmsDeviceInfoUpdateDTO = {
+    deviceCode: state.deviceCode,
+    siloCodeRules: siloCodeRulesNumber,
+    supplierAbbrEn: formData.supplierAbbrEn,
+  };
+  
+  if (formData.siloCodeRules === MaterialTowerCodeRuleEnum.SUPPLIER) {
+    // 供应商编码规则下，生产日期和生产流水编号必填
+    params.produceTime = formData.produceTime;
+    params.produceFlowCode = formData.produceFlowCode;
+  } else {
+    // 发货编码规则下，发货月份必填
+    params.shippingTime = formData.shippingTime;
+  }
+  
+  try {
+    const res = await updateDeviceInfo(params);
+    if (res) {
+      uni.showToast({
+        title: '保存成功',
+        icon: 'success',
+        duration: 2000,
+        success: () => {
+          setTimeout(() => {
+            uni.navigateBack();
+          }, 2000);
+        }
+      });
+    }
+  } catch (error) {
+    console.error('保存失败', error);
+  }
+}
+
+onLoad((event: any) => {
+  const { deviceCode } = event;
+  if (deviceCode) {
+    state.deviceCode = deviceCode;
+    fetchDeviceDetail(deviceCode);
+    fetchSupplierList();
+  }
+});
+</script>
+
+<template>
+  <view class="content">
+    <view class="form-content">
+      <view class="section-title">料塔编码规则</view>
+      <view class="uni-form-item flex-space">
+        <view class="l-label">
+          <view class="flag">*</view>料塔编码规则
+        </view>
+        <SinglePick 
+          class="select-box" 
+          :value="formData.siloCodeRules" 
+          :range="codeRuleOptions" 
+          value-key="value"
+          label-key="label" 
+          showRightIcon 
+          placeholder="请选择" 
+          @change="(v: any) => changeValue('siloCodeRules', { value: v })" 
+        />
+      </view>
+      <view class="err-text" v-if="errState.siloCodeRules">{{ errState.siloCodeRules }}</view>
+    </view>
+    
+    <view class="form-content">
+      <view class="section-title">料塔编码</view>
+      <view class="uni-form-item flex-space">
+        <view class="l-label">
+          <view class="flag">*</view>料塔供应商
+        </view>
+        <SinglePick 
+          class="select-box" 
+          :value="formData.supplierAbbrEn" 
+          :range="supplierOptions" 
+          value-key="value"
+          label-key="label" 
+          showRightIcon 
+          placeholder="请选择" 
+          @change="(v: any) => changeValue('supplierAbbrEn', { value: v })" 
+        />
+      </view>
+      <view class="err-text" v-if="errState.supplierAbbrEn">{{ errState.supplierAbbrEn }}</view>
+      
+      <!-- 供应商编码规则时显示 -->
+      <template v-if="currentRuleType === MaterialTowerCodeRuleEnum.SUPPLIER">
+        <view class="uni-form-item flex-space">
+          <view class="l-label">
+            <view class="flag">*</view>生产日期
+          </view>
+          <view class="dateSelect-box">
+            <image class="right-icon" src="/static/img/turn_right.png" />
+            <picker 
+              mode="date" 
+              fields="day"
+              :value="formatDateWithDash(formData.produceTime)"
+              :end="getTodayDate()"
+              @change="handleProduceTimeChange">
+              <view class="common-picker">{{ formatDateWithDash(formData.produceTime) || '请选择' }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="err-text" v-if="errState.produceTime">{{ errState.produceTime }}</view>
+        
+        <view class="uni-form-item flex-space">
+          <view class="l-label">
+            <view class="flag">*</view>生产流水编码
+          </view>
+          <input 
+            class="input-field" 
+            type="number"
+            placeholder="请输入"
+            :value="formData.produceFlowCode"
+            @input="(e: any) => changeValue('produceFlowCode', e.detail)"
+            maxlength="2"
+          />
+        </view>
+        <view class="err-text" v-if="errState.produceFlowCode">{{ errState.produceFlowCode }}</view>
+      </template>
+      
+      <!-- 发货编码规则时显示 -->
+      <template v-if="currentRuleType === MaterialTowerCodeRuleEnum.DELIVERY">
+        <view class="uni-form-item flex-space">
+          <view class="l-label">
+            <view class="flag">*</view>发货月份
+          </view>
+          <view class="dateSelect-box">
+            <image class="right-icon" src="/static/img/turn_right.png" />
+            <picker 
+              mode="date" 
+              fields="month"
+              :value="formatMonthWithDash(formData.shippingTime)"
+              :end="getCurrentMonth()"
+              @change="handleShippingTimeChange">
+              <view class="common-picker">{{ formatMonthWithDash(formData.shippingTime) || '请选择' }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="err-text" v-if="errState.shippingTime">{{ errState.shippingTime }}</view>
+      </template>
+    </view>
+    
+    <view class="update-info" v-if="state.lastUpdateInfo">
+      {{ state.lastUpdateInfo }}
+    </view>
+    
+    <RippleBtn @click="submitForm" :customStyle="'margin-top: 48rpx;padding-bottom: 10rpx'">
+      <view class="submit-btn">保存</view>
+    </RippleBtn>
+  </view>
+</template>
+
+<style scoped lang="less">
+.content {
+  background-color: #F5F5F5;
+  min-height: 100vh;
+  padding: 32rpx;
+
+  .form-content {
+    margin-bottom: 32rpx;
+    background-color: #fff;
+    border-radius: 16rpx;
+    padding: 0 32rpx;
+    position: relative;
+
+    .section-title {
+      padding: 32rpx 0 24rpx 0;
+      font-size: 32rpx;
+      font-weight: 500;
+      color: #000000;
+      line-height: 48rpx;
+    }
+
+    .uni-form-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: rgba(0, 0, 0, 0.6);
+
+      &:not(:last-child) {
+        border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
+      }
+    }
+
+    .flex-space {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .l-label {
+      display: flex;
+      align-items: center;
+      padding: 32rpx 0;
+      font-size: 32rpx;
+      color: rgba(0, 0, 0, 0.6);
+      line-height: 48rpx;
+
+      .flag {
+        font-size: 32rpx;
+        color: #E34D59;
+        line-height: 38rpx;
+        margin-right: 4rpx;
+      }
+    }
+
+    .select-box {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .dateSelect-box {
+      display: flex;
+      align-items: center;
+      flex-direction: row-reverse;
+      flex: 1;
+      min-width: 0;
+
+      .right-icon {
+        margin-left: 16rpx;
+        width: 32rpx;
+        height: 32rpx;
+        text-align: right;
+      }
+    }
+
+    .common-picker {
+      flex: 1;
+      text-align: right;
+      font-size: 32rpx;
+      color: rgba(0, 0, 0, 0.4);
+      line-height: 48rpx;
+    }
+
+    .input-field {
+      flex: 1;
+      text-align: right;
+      font-size: 32rpx;
+      color: rgba(0, 0, 0, 0.4);
+      line-height: 48rpx;
+      padding: 32rpx 0;
+    }
+
+    .err-text {
+      padding: 8rpx 0 16rpx 0;
+      font-size: 24rpx;
+      color: rgb(245, 140, 140);
+    }
+  }
+
+  .update-info {
+    padding: 0 32rpx 16rpx 32rpx;
+    font-size: 24rpx;
+    color: rgba(0, 0, 0, 0.4);
+    line-height: 34rpx;
+  }
+
+  .submit-btn {
+    box-sizing: border-box;
+    width: 686rpx;
+    padding: 24rpx 0 26rpx 0;
+    line-height: 58rpx;
+    font-family: Source Han Sans SC, Source Han Sans SC;
+    font-weight: 400;
+    font-size: 40rpx;
+    color: rgba(255, 255, 255, 0.9);
+    background: linear-gradient(270deg, #1D9DE9 0%, #1D6FE9 100%);
+    box-shadow: 0px 16rpx 16rpx 2rpx rgba(29, 157, 233, 0.1);
+    border-radius: 52rpx;
+  }
+}
+</style>
+