usky-web-mobile/src/pages/business/zhaf/xunJian/error/errorDisposition.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="eventName" required :borderBottom="true">
          <view style="color: #666666">{{ form.eventName }}</view>
        </u-form-item>
        <u-form-item label="处置图片"  :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.handleContent" 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>
  </scroll-view>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow } from "@dcloudio/uni-app";
import {  reactive, toRefs, getCurrentInstance } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { errorApi } from "@/api/business/zhaf/xunJian/index.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  form: {
    eventName: "", //事件名称
    imageList: [],
    handleImage:"",
    handleContent: "",
    id:undefined
  },
});

const { form } = toRefs(state);

/**
 * @按钮点击事件
 */
function handleSubmit() {
  var param = {
    eventName: state.form.id, //事件名称
    handleImage: JSON.stringify(state.form.imageList),
    handleContent: state.form.handleContent,
    id:state.form.id
  };
  errorApi()
    .Update(param)
    .then(() => {
      uni.showToast({
        title: "提交成功",
      });
      uni.navigateTo({
        url: "/pages/business/zhaf/xunJian/error/errorList",
      });
    })
    .catch((err) => {
      proxy.$modal.msg(err);
    });
}

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

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

onLoad((options) => {
  state.form.id = options.id;
  state.form.eventName = options.eventName;
});

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

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