pms-app/pages/maintenance/components/work-order-form.vue

<template>
  <scroll-view scroll-y="true" class="work-order-form">
    <view class="form-content">
      <uni-forms
        ref="maintenanceFormRef"
        labelWidth="140px"
        err-show-type="toast"
        :model="formData"
        :rules="formDataRules"

      >
        <!-- 工单名称 -->
        <uni-forms-item
          class="form-item"
          :label="$t('workOrder.workOrderName')"
          name="name"
          :required="formItemRequired"
        >
          <uni-easyinput
            style="text-align: right"
            :inputBorder="false"
            :clearable="true"
            :disabled="formDisabled"
            :placeholder="fillInPlaceholder"
            :styles="{ disableColor: '#fff' }"
            v-model="formData.name"
          />
        </uni-forms-item>
        <!-- 工单编号 -->
        <uni-forms-item
          class="form-item"
          :label="$t('workOrder.workOrderNumber')"
          name="orderNumber"
          :required="false"
          v-if="formData.orderNumber"
        >
          <uni-easyinput
            style="text-align: right"
            :inputBorder="false"
            :clearable="true"
            :disabled="true"
            :placeholder="fillInPlaceholder"
            :styles="{ disableColor: 'transparent' }"
            v-model="formData.orderNumber"
          />
        </uni-forms-item>
        <!-- 保养类型 -->
        <uni-forms-item
          class="form-item"
          :label="$t('maintenanceWorkOrder.maintenanceType')"
          name="outsourcingFlag"
          :required="false"
        >
          <uni-data-select
            :clear="false"
            :disabled="formDisabled"
            :placeholder="selectPlaceholder"
            :localdata="outsourcingFlagRange"
            v-model="formData.outsourcingFlag"
          >
          </uni-data-select>
        </uni-forms-item>

        <!-- 填报人 -->
        <uni-forms-item
          class="form-item"
          :label="$t('maintenanceWorkOrder.applicant')"
          name="applicant"
          :required="formItemRequired"
        >
          <uni-easyinput
            style="text-align: right"
            :inputBorder="false"
            :clearable="true"
            :disabled="formDisabled"
            :placeholder="fillInPlaceholder"
            :styles="{ disableColor: '#fff' }"
            v-model="formData.applicant"
          />
        </uni-forms-item>

        <!-- 实际保养开始时间 -->
        <uni-forms-item
          class="form-item"
          :label="$t('maintenanceWorkOrder.actualMaintenanceStartTime')"
          name="actualStartTime"
          :required="formItemRequired"
        >
          <uni-datetime-picker
            type="datetime"
            returnType="timestamp"
            :end="dateMax"
            :border="false"
            :disabled="formDisabled"
            :placeholder="selectPlaceholder"
            :style="{
              color: formData.actualStartTime ? '#333' : '#999',
              'font-size': formData.actualStartTime
                ? '14px !important'
                : 'inherit !important',
            }"
            v-model="formData.actualStartTime"
          >
          </uni-datetime-picker>
        </uni-forms-item>
        <!-- 实际保养结束时间 -->
        <uni-forms-item
          class="form-item"
          :label="$t('maintenanceWorkOrder.actualEndTime')"
          name="actualEndTime"
          :required="formItemRequired"
        >
          <uni-datetime-picker
            type="datetime"
            returnType="timestamp"
            :end="dateMax"
            :border="false"
            :disabled="formDisabled"
            :placeholder="selectPlaceholder"
            :style="{
              color: formData.actualEndTime ? '#333' : '#999',
              'font-size': formData.actualEndTime
                ? '14px !important'
                : 'inherit !important',
            }"
            v-model="formData.actualEndTime"
          >
          </uni-datetime-picker>
        </uni-forms-item>

        <!-- 保养费用 -->
        <uni-forms-item
          class="form-item"
          :label="$t('maintenanceWorkOrder.maintenanceCost')"
          name="cost"
          :required="false"
        >
          <uni-easyinput
            type="digit"
            style="text-align: right"
            :styles="{ disableColor: 'transparent' }"
            :inputBorder="false"
            :clearable="true"
            :disabled="true"
            v-model="formData.cost"
          />
        </uni-forms-item>
        <!-- 其他费用 -->
        <uni-forms-item
          class="form-item"
          :label="$t('maintenanceWorkOrder.otherCost')"
          :required="false"
          name="otherCost"
        >
          <uni-easyinput
            type="digit"
            style="text-align: right"
            :styles="{ disableColor: '#fff' }"
            :inputBorder="false"
            :clearable="true"
            :disabled="formDisabled"
            :placeholder="fillInPlaceholder"
            v-model="formData.otherCost"
          />
        </uni-forms-item>

        <!-- 备注 -->
        <uni-forms-item
          class="form-item"
          :label="$t('operation.remark')"
          :required="false"
          name="remark"
        >
          <uni-easyinput
            type="textarea"
            :autoHeight="true"
            style="text-align: right"
            :styles="{ disableColor: '#fff' }"
            :inputBorder="false"
            :disabled="formDisabled"
            :placeholder="fillInPlaceholder"
            v-model="formData.remark"
          />
        </uni-forms-item>
      </uni-forms>
    </view>
  </scroll-view>
</template>

<script setup>
import { onLoad, onReady, onBackPress } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance } from "vue";
import dayjs from "dayjs";
// --------------------------引用全局变量$t-------------------------------
const { appContext } = getCurrentInstance();
const t = appContext.config.globalProperties.$t;
// --------------------------引用字典项-----------------------------------
import { useDataDictStore } from "@/store/modules/dataDict";
const { getIntDictOptions } = useDataDictStore();
// 获取保养类型字典项
const outsourcingFlagRange = getIntDictOptions(
  "pms_main_work_order_process_mode"
).map((item) => {
  return {
    ...item,
    text: item.label,
  };
});
console.log("🚀 ~ outsourcingFlagRange:", outsourcingFlagRange);

// -------------------------接收父组件传递的参数---------------------------
const props = defineProps({
  formData: {
    type: Object,
    default: () => {},
  },
  formDisabled: {
    type: Boolean,
    default: false,
  },
});

// -------------------------- 表单需要的数据 --------------------------
// 获取当前时间
const now = dayjs().format("YYYY-MM-DD HH:mm:ss");
// 最大时间为当前时间
const dateMax = ref(now);

// 根据formDisabled动态返回表单placeholder - 填写
const fillInPlaceholder = computed(() => {
  return props.formDisabled ? " " : t("operation.PleaseFillIn");
});
// 根据formDisabled动态返回表单placeholder - 选择
const selectPlaceholder = computed(() => {
  return props.formDisabled ? " " : t("operation.PleaseSelect");
});
// 根据formDisabled动态返回表单required
const formItemRequired = computed(() => {
  return props.formDisabled ? false : true;
});

// 表单实例
const maintenanceFormRef = ref(null);
// 表单校验规则
const formDataRules = ref({
  name: {
    rules: [
      {
        required: true,
        errorMessage:
          t("operation.PleaseFillIn") + t("workOrder.workOrderName"),
      },
    ],
  },
  applicant: {
    rules: [
      {
        required: true,
        errorMessage:
          t("operation.PleaseFillIn") + t("maintenanceWorkOrder.applicant"),
      },
    ],
  },
  actualStartTime: {
    rules: [
      {
        required: true,
        errorMessage:
          t("operation.PleaseSelect") +
          t("maintenanceWorkOrder.actualMaintenanceStartTime"),
      },
    ],
  },
  actualEndTime: {
    rules: [
      {
        required: true,
        errorMessage:
          t("operation.PleaseSelect") + t("maintenanceWorkOrder.actualEndTime"),
      },
    ],
  },
});
// 表单校验方法
const validate = async () => {
  // 调用uni-forms的validate方法进行校验
  return await maintenanceFormRef.value.validate();
};

// -------------------------- 暴露给父组件的外部方法 --------------------------
defineExpose({
  validate,
});
// -------------------------- 事件派发 --------------------------
const emit = defineEmits([""]);
</script>

<style lang="scss" scoped>
@import "@/style/work-order-form.scss";
</style>