usky-web-mobile/src/pages/business/zhaf/xunJian/error/index.vue

<template>
  <u-navbar :titleStyle="{ color: '#fff' }" :autoBack="true" title="异常上报" :placeholder="true" :safeAreaInsetTop="true" :bgColor="proxy.$settingStore.themeColor.color">
    <template #left>
      <view class="u-navbar__content__left__item">
        <u-icon name="arrow-left" size="20" color="#fff"></u-icon>
      </view>
    </template>
  </u-navbar>

  <oa-scroll
    customClass="error-container scroll-height"
    :customStyle="{ height: `calc(100vh - (44px + ${proxy.$settingStore.StatusBarHeight} + ${proxy.$settingStore.tabBarHeight}))` }"
    :refresherLoad="false"
    :refresherEnabled="false"
    :refresherEnabledTitle="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <u--form ref="uForm" :model="form" :rules="rules" labelWidth="90">
        <view style="padding: 10px 10px 20px 20px; background: #ffffff">
          <u-form-item label="姓名" prop="nickName" required :borderBottom="true">
            <u-input v-model="form.nickName" placeholder="姓名(必填)" border="none" maxlength="50" disabledColor="transparent" disabled />
          </u-form-item>
          <u-form-item label="事件名称" prop="eventName" required :borderBottom="true">
            <u-input v-model="form.eventName" placeholder="事件名称(必填)" border="none" maxlength="50" />
          </u-form-item>
          <u-form-item label="事件分类" prop="eventCategory" required :borderBottom="true" @click="handleAction('事件分类')">
            <u-input v-model="form.eventCategoryName" placeholder="事件分类(必选)" suffixIcon="arrow-right" suffixIconStyle="color: #909399" border="none" disabledColor="transparent" disabled />
          </u-form-item>
          <u-form-item label="事件类型" prop="eventType" required :borderBottom="true" @click="handleAction('事件类型')">
            <u-input v-model="form.eventTypeName" placeholder="事件类型(必选)" suffixIcon="arrow-right" suffixIconStyle="color: #909399" border="none" disabledColor="transparent" disabled />
          </u-form-item>
          <u-form-item label="事件等级" prop="eventLevel" required :borderBottom="true" @click="handleAction('事件等级')">
            <u-input v-model="form.eventLevelName" placeholder="事件类型(必选)" suffixIcon="arrow-right" suffixIconStyle="color: #909399" border="none" disabledColor="transparent" disabled />
          </u-form-item>
          <u-form-item label="现场图片" prop="pictureUrl" :borderBottom="true">
            <oa-upload :uploadCount="5" :uploadList="form.imageList" :uploadListSrc="'url'" @uploadSuccessChange="uploadSuccessChange" @uploadDeleteChange="uploadDeleteChange"></oa-upload>
          </u-form-item>
          <u-form-item label="备注" prop="remark" :borderBottom="true">
            <u--textarea v-model="form.remark" placeholder="备注信息，最多可输入50个字" :count="true" border="none" maxlength="50"></u--textarea>
          </u-form-item>
        </view>
      </u--form>

      <view class="app-button">
        <view class="app-button-padding"></view>
        <view class="app-button-fixed">
          <u-button class="app-buttom" type="primary" @click="handleSubmit()" shape="circle"> 上报异常 </u-button>
        </view>
      </view>

      <u-picker
        :show="actionShow"
        :columns="actionsList"
        :title="'请选择' + actionTitle"
        keyName="label"
        visibleItemCount="6"
        :defaultIndex="[actionDefaultIndex]"
        :closeOnClickOverlay="true"
        @close="actionShow = false"
        @cancel="actionShow = false"
        @confirm="selectAction"
      ></u-picker>
    </template>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onHide, onLaunch, onReady } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, toRefs, getCurrentInstance, computed } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { errorApi } from "@/api/business/zhaf/xunJian/index.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const useStore = useStores();
const commonStore = commonStores();
const { patrol_event_classify, patrol_event_grade, patrol_event_type } = proxy.useDict("patrol_event_classify", "patrol_event_grade", "patrol_event_type");
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  form: {
    nickName: computed(() => {
      return useStore.nickName;
    }),
    eventCategory: "", //事件分类
    eventCategoryName: "", //事件分类名称
    eventType: "", //事件类型
    eventTypeName: "", //事件类型名称
    eventLevel: "", //事件等级
    eventLevelName: "", //事件等级名称
    remark: "", //备注
    deviceId: computed(() => {
      return proxy.$settingStore.deviceList.deviceId;
    }), //设备Id
    planId: undefined, //计划Id
    imageList: [],
  },

  rules: {
    nickName: [{ required: true, message: "请输入姓名", trigger: ["blur", "change"] }],
    eventCategory: [{ required: true, message: "请选择事件分类", trigger: ["blur", "change"] }],
    eventType: [{ required: true, message: "请选择事件类型", trigger: ["blur", "change"] }],
    eventLevel: [{ required: true, message: "请选择事件等级", trigger: ["blur", "change"] }],
  },

  actionIndex: 0,
  actionTitle: "",
  actionShow: false,
  actionDefaultIndex: 0,
  actionsList: [[]],
});

const { form, rules, actionTitle, actionIndex, actionsList, actionShow, actionDefaultIndex } = toRefs(state);

/**
 * @按钮点击事件
 */
function handleSubmit(value) {
  if (!proxy.$common.isNetwork()) {
    return false;
  }

  proxy.$refs["uForm"]
    .validate()
    .then((res) => {
      var param = {
        eventName: state.form.eventName, //事件名称
        eventType: state.form.eventType, //事件类型
        eventLevel: state.form.eventLevel, //事件等级
        eventCategory: state.form.eventCategory, //事件分类
        deviceId: state.form.deviceId, //设备Id
        planId: state.form.planId, //计划Id
        eventImage: JSON.stringify(state.form.imageList),
        remark: state.form.remark,
      };

      errorApi()
        .Insert(param)
        .then(() => {
          proxy.$modal.msg("提交成功");
          proxy.$tab.navigateBack(1);
        })
        .catch((err) => {
          proxy.$modal.msg(err);
        });
    })
    .catch((errors) => {
      proxy.$modal.msg("校验失败");
    });
}

/**
 * @action弹出框点击事件
 */
function handleAction(value, index, ind) {
  if (value == "事件分类") {
    state.actionTitle = "事件分类";
    state.actionIndex = index;

    state.actionsList[0] = patrol_event_classify.value;
    state.actionDefaultIndex = 0;
  }

  if (value == "事件类型") {
    state.actionTitle = "事件类型";
    state.actionIndex = index;

    state.actionsList[0] = patrol_event_type.value;
    state.actionDefaultIndex = 0;
  }

  if (value == "事件等级") {
    state.actionTitle = "事件等级";
    state.actionIndex = index;

    state.actionsList[0] = patrol_event_grade.value;
    state.actionDefaultIndex = 0;
  }

  state.actionShow = true;
}

/**
 * @action弹出框选择事件
 */
function selectAction(e) {
  if (state.actionTitle == "事件分类") {
    state.form.eventCategory = e.value[0].value;
    state.form.eventCategoryName = e.value[0].label;
  }

  if (state.actionTitle == "事件类型") {
    state.form.eventType = e.value[0].value;
    state.form.eventTypeName = e.value[0].label;
  }

  if (state.actionTitle == "事件等级") {
    state.form.eventLevel = e.value[0].value;
    state.form.eventLevelName = e.value[0].label;
  }

  state.actionShow = false;
}

/**
 * @图片上传成功回调
 */
function uploadSuccessChange(e) {
  state.form.imageList.push({
    name: e.name,
    url: e.url,
  });
}

/**
 * @图片删除回调
 */
function uploadDeleteChange(e) {
  state.form.imageList = e;
}

onLoad((options) => {});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});
</script>

<style lang="scss">
.error-container {
  :deep(.u-picker__view__column__item) {
    font-size: 13px;
  }
}
</style>