pms-app/pages/fault/detail.vue

<template>
  <view class="page fault">
    <scroll-view scroll-y="true" class="detail view">
      <view class="form-content">
        <uni-forms
          ref="faultFormRef"
          labelWidth="140px"
          :modelValue="maintain"
          :rules="maintainRules"
        >
          <!-- 设备 -->
          <uni-forms-item
            class="form-item"
            :label="$t('maintenanceWorkOrder.equipment')"
            name="deviceName"
            :required="false"
          >
            <uni-easyinput
              style="text-align: right"
              :inputBorder="false"
              :clearable="false"
              :styles="{ disableColor: '#fff' }"
              :placeholder="' '"
              :disabled="true"
              v-model="maintain.deviceName"
            />
          </uni-forms-item>
          <!-- 是否解决 -->
          <uni-forms-item
            class="form-item"
            :label="$t('workOrder.isSolved')"
            name="ifDeal"
            :required="false"
          >
            <uni-data-select
              :clear="false"
              :placeholder="' '"
              :disabled="true"
              v-model="maintain.ifDeal"
              :localdata="yesOrNoRange"
            >
            </uni-data-select>
          </uni-forms-item>
          <!-- 是否协助 -->
          <uni-forms-item
            class="form-item"
            :label="$t('workOrder.isHelp')"
            name="needHelp"
            :required="false"
          >
            <uni-data-select
              :clear="false"
              :placeholder="' '"
              :disabled="true"
              v-model="maintain.needHelp"
              :localdata="yesOrNoRange"
            >
            </uni-data-select>
          </uni-forms-item>
          <!-- 故障系统 -->
          <uni-forms-item
            class="form-item"
            :label="$t('fault.faultSystem')"
            name="failureSystem"
            :required="false"
          >
            <uni-easyinput
              style="text-align: right"
              :inputBorder="false"
              :clearable="false"
              :styles="{ disableColor: '#fff' }"
              v-model="maintain.failureSystem"
              :placeholder="' '"
              :disabled="true"
            />
          </uni-forms-item>
          <!-- 故障时间 -->
          <uni-forms-item
            class="form-item"
            :label="$t('fault.faultTime')"
            name="failureTime"
            :required="false"
          >
            <uni-datetime-picker
              type="datetime"
              :border="false"
              returnType="timestamp"
              :placeholder="' '"
              :disabled="true"
              :style="{
                color: maintain.failureTime ? '#333' : '#999',
                'font-size': maintain.failureTime
                  ? '14px !important'
                  : 'inherit !important',
              }"
              :end="dateMax"
              v-model="maintain.failureTime"
            >
            </uni-datetime-picker>
          </uni-forms-item>
          <!-- 故障解决时间  是否解决为是，是否协助为否时需要填写-->
          <uni-forms-item
            class="form-item"
            :label="$t('fault.faultResolutionTime')"
            name="dealTime"
            :required="false"
            v-if="maintain.ifDeal"
          >
            <!-- :end="dateMax" -->
            <uni-datetime-picker
              type="datetime"
              :border="false"
              returnType="timestamp"
              :placeholder="' '"
              :disabled="true"
              :style="{
                color: maintain.dealTime ? '#333' : '#999',
                'font-size': maintain.dealTime
                  ? '14px !important'
                  : 'inherit !important',
              }"
              :end="dateMax"
              v-model="maintain.dealTime"
            >
            </uni-datetime-picker>
          </uni-forms-item>
          <!-- 审批人 是否解决为否 时需要选择 -->
          <uni-forms-item
            class="form-item"
            :label="$t('workOrder.approver')"
            name="approvalId"
            :required="false"
            v-if="maintain.ifDeal == 0"
          >
            <uni-data-select
              :clear="false"
              :disabled="true"
              v-model="maintain.approvalId"
              :localdata="approvalList"
							:placeholder="' '"
            >
            </uni-data-select>
          </uni-forms-item>
          <!-- 是否停机 -->
          <uni-forms-item
            class="form-item"
            :label="$t('equipmentMaintenance.isStop')"
            name="ifStop"
            :required="false"
          >
            <uni-data-select
              :clear="false"
              :placeholder="' '"
              :disabled="true"
              v-model="maintain.ifStop"
              :localdata="yesOrNoRange"
            >
            </uni-data-select>
          </uni-forms-item>
          <!-- 图片 -->
          <uni-forms-item
            class="form-item"
            :label="$t('general.picture')"
            name="picList"
            :required="false"
          >
            <uni-file-picker
              file-mediatype="image"
              mode="grid"
              :auto-upload="false"
              :limit="1"
              :readonly="true"
              :imageStyles="{ border: false }"
              :value="maintain.picList"
              @select="upload"
            >
              <template #default>
                <view
                  class="flex-col align-center justify-center"
                  style="width: 60px; height: 60px; background-color: #f4f4f4"
                >
                  <uni-icons type="plusempty" color="#ACACAC" size="12" />
                </view>
              </template>
            </uni-file-picker>
          </uni-forms-item>
          <!-- 故障影响 -->
          <uni-forms-item
            class="form-item"
            :label="$t('fault.faultImpact')"
            name="failureInfluence"
            :required="false"
          >
            <uni-easyinput
              style="text-align: right"
              :inputBorder="false"
              :clearable="false"
              :styles="{ disableColor: '#fff' }"
              v-model="maintain.failureInfluence"
              :placeholder="' '"
              :disabled="true"
            />
          </uni-forms-item>
          <!-- 解决办法 是否解决为是，是否协助为否时需要填写 -->
          <uni-forms-item
            class="form-item"
            :label="$t('fault.solution')"
            :required="false"
            name="solution"
            v-if="maintain.ifDeal"
          >
            <uni-easyinput
              style="text-align: right"
              type="textarea"
              :autoHeight="true"
              :inputBorder="false"
              :clearable="false"
              :styles="{ disableColor: '#fff' }"
              v-model="maintain.solution"
              :placeholder="' '"
              :disabled="true"
            />
          </uni-forms-item>
          <!-- 故障描述 -->
          <uni-forms-item
            class="form-item"
            :label="$t('fault.description')"
            :required="false"
            name="description"
          >
            <uni-easyinput
              style="text-align: right"
              type="textarea"
              :autoHeight="true"
              :inputBorder="false"
              :clearable="false"
              :styles="{ disableColor: '#fff' }"
              v-model="maintain.description"
              :placeholder="' '"
              :disabled="true"
            />
          </uni-forms-item>
          <!-- 备注 -->
          <uni-forms-item
            class="form-item"
            :label="$t('operation.remark')"
            :required="false"
            name="remark"
          >
            <uni-easyinput
              style="text-align: right"
              type="textarea"
              :autoHeight="true"
              :inputBorder="false"
              :clearable="false"
              :styles="{ disableColor: '#fff' }"
              v-model="maintain.remark"
              :placeholder="' '"
              :disabled="true"
            />
          </uni-forms-item>
        </uni-forms>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { onLoad, onReady, onBackPress } from "@dcloudio/uni-app";
import {
  reactive,
  ref,
  watch,
  computed,
  watchEffect,
  onMounted,
  onBeforeUnmount,
  nextTick,
  getCurrentInstance,
} from "vue";
import { getFaultDetail, getFailureApprovalList } from "@/api/fault.js";
import dayjs from "dayjs";
import { uploadFile } from "@/api";

import { useDataDictStore } from "@/store/modules/dataDict";
const { getDataDictList } = useDataDictStore();

// 引用全局变量$t
const { appContext } = getCurrentInstance();
const t = appContext.config.globalProperties.$t;
// 维修类型
const typeRange = ref([
  {
    value: "in",
    text: t("maintenanceWorkOrder.maintenanceTypeIn"),
  },
  {
    value: "out",
    text: t("maintenanceWorkOrder.maintenanceTypeOut"),
  },
]);
//
const yesOrNoRange = ref([
  {
    value: 1,
    text: t("operation.yes"),
  },
  {
    value: 0,
    text: t("operation.no"),
  },
]);
// 获取当前时间
const now = dayjs().format("YYYY-MM-DD HH:mm:ss");
const dateMax = ref(now);

//故障详情
const maintain = ref({
  deviceId: "",
  deviceName: "",
  picList: [], //用于上传照片 提交时删除
});
// 获取故障详情
const getFaultDetailData = async (id) => {
  await getFaultDetail({
    id: id,
  })
    .then((res) => {
      console.log("getFaultDetailData", res.data);
      maintain.value = res.data;
      // ifDeal,needHelp, isStop从true/false转换为1/0
      maintain.value.ifDeal = maintain.value.ifDeal ? 1 : 0;
      maintain.value.needHelp = maintain.value.needHelp ? 1 : 0;
      maintain.value.isStop = maintain.value.isStop ? 1 : 0;
      maintain.value.picList = res.data.pic
        ? [
            {
              url: res.data.pic,
            },
          ]
        : [];
      // 如果存在审批人,则获取审批人信息
      if (data.approvalId) {
        getApprovalList();
      }
    })
    .catch((err) => {});
};
// 审批人列表
const approvalList = ref([]);
const getApprovalList = async () => {
  const res = await getFailureApprovalList();
  approvalList.value = res.data.map((item) => ({
    value: item.id,
    text: item.nickname,
  }));
};

// 上传图片
const upload = async (event) => {
  for (const path of event.tempFilePaths) {
    maintain.value.pic = (await uploadFile(path)).data;
  }
};

onMounted(() => {
  // 监听子页面提交的事件
  console.log("onMounted");
  // uni.$on('multiple-devide-submit', (data) => {
  // 	console.log('接收到子页面数据:', data);
  // 	selectedDevices.value = data
  // 	onDeviceBomList()
  // });
});
onBeforeUnmount(() => {
  // 移除监听
  console.log("onBeforeUnmount");
  // uni.$off('multiple-devide-submit');
});

onLoad((option) => {
  console.log("onLoad", option);
  getFaultDetailData(option.id);
});
onReady(() => {
  // 设置自定义表单校验规则，必须在节点渲染完毕后执行
  // this.$refs.customForm.setRules(this.customRules)
});
onBackPress((options) => {
  // options.from 值为 'navigateBack' 时，表示返回是由 uni.navigateBack() 方法调用触发的
  // options.from 值为 'navigator' 时，表示返回是由导航栏返回按钮或物理返回键触发的
  console.log("返回触发来源:", options.from);
});
</script>

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

:deep(.is-disabled) {
  color: #333;
}
</style>