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

<template>
  <scroll-view id="exception" class="scroll-height" :scroll-y="true" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
    <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>
  </scroll-view>
</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) {
  proxy.$refs["uForm"]
    .validate()
    .then((res) => {
      proxy.$modal.msg("校验通过");

      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(() => {
          uni.showToast({
            title: "提交成功",
          });
          uni.navigateBack({
            delta: 1, //返回到需要执行方法的页面
          });
        })
        .catch((err) => {
          proxy.$modal.msg("网络异常，请稍后重试！");
        });
    })
    .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">
#exception {
  :deep(.u-picker__view__column__item) {
    font-size: 13px;
  }
}
</style>