usky-web-mobile/src/pages/business/fireIot/repairReport/index.vue

<template>
  <oa-scroll
    customClass="scroll-height"
    :customStyle="{}"
    :refresherLoad="false"
    :refresherEnabled="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <view class="menu-list m0">
      <view class="list-cell">
        <view class="menu-item font14">
          <view style="margin-right: auto; color: #666666"></view>
          <view style="color: #149eff" @click="proxy.$tab.navigateTo(`/pages/business/fireIot/repairReport/record`)">报修历史</view>
        </view>

        <u--form :model="form" ref="uForm" :rules="rules" labelWidth="80">
          <view style="padding: 10px 0 10px 0; background: #ffffff">
            <view style="padding-left: 9px">
              <u-form-item label="项目名称" prop="projectName" required :borderBottom="true">
                <u-input v-model="form.projectName" placeholder="请填写项目名称" border="none">
                  <template #suffix>
                    <u-icon name="search" color="#999999" size="22" @click="projectSubmit(form.projectName)"></u-icon>
                  </template>
                </u-input>
              </u-form-item>
              <u-form-item label="项目地址" prop="projectAddress" :borderBottom="true" required>
                <u-input v-model="form.projectAddress" placeholder="请填写项目地址" border="none" />
              </u-form-item>
              <u-form-item label="报修人" prop="reflectName" :borderBottom="true" required>
                <u-input v-model="form.reflectName" placeholder="请填写报修人" border="none" maxlength="10" />
              </u-form-item>
              <u-form-item label="手机号" prop="reflectPhone" :borderBottom="true" required>
                <u-input v-model="form.reflectPhone" placeholder="请填写手机号" border="none" maxlength="11" />
              </u-form-item>
              <u-form-item label="问题描述" prop="repairContent" :borderBottom="true" required>
                <u--textarea v-model="form.repairContent" border="none" placeholder="请填写问题描述" maxlength="100" style="padding: 0"></u--textarea>
              </u-form-item>
              <u-form-item label="上传图片" prop="repairPicture" :borderBottom="true">
                <oa-upload :uploadCount="1" :uploadImage="form.repairPicture" @uploadSuccessChange="uploadSuccessChange" @uploadDeleteChange="uploadDeleteChange"></oa-upload>
                <view style="color: #666666">图片支持png、jpg</view>
              </u-form-item>
            </view>
          </view>
        </u--form>
      </view>
    </view>

    <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="name"
      visibleItemCount="6"
      :defaultIndex="[actionDefaultIndex]"
      :closeOnClickOverlay="true"
      @close="actionShow = false"
      @cancel="actionShow = false"
      @confirm="selectAction"
    ></u-picker>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { add, getAddHistoryInfo } from "@/api/business/fireIot/repairReport.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const commonStore = commonStores();
/*----------------------------------变量声明-----------------------------------*/
const uForm = ref(null);
const state = reactive({
  form: {
    projectName: "", //项目名称
    projectAddress: "", //项目地址
    reflectName: "", //报修人
    reflectPhone: "", //报修手机号码
    repairContent: "", //报修内容
    repairPicture: "", //报修图片
  },

  rules: {
    projectName: [{ required: true, message: "请填写项目名称", trigger: ["blur", "change"] }],
    projectName: [{ required: true, message: "请填写项目地址", trigger: ["blur", "change"] }],
    reflectName: [{ required: true, message: "请填写报修人", trigger: ["blur", "change"] }],
    reflectPhone: [
      { required: true, message: "请填写手机号", trigger: ["blur", "change"] },
      { type: "string", min: 11, required: true, message: "请填写正确11位手机号", pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, trigger: ["blur", "change"] },
    ],
    repairContent: [{ required: true, message: "请填写问题描述", trigger: ["blur", "change"] }],
  },

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

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

/**
 * @项目名称
 * @icon图标按钮点击事件
 */
function projectSubmit(e) {
  actionsList.value = [[]];

  getAddHistoryInfo({
    projectName: e,
  }).then((res) => {
    if (res.status == "SUCCESS") {
      if (res.data.length > 0) {
        actionShow.value = true;
        res.data.forEach((el) => {
          el.name = el.projectName;
          actionsList.value[0].push(el);
        });
        actionTitle.value = "项目名称";
      } else {
        proxy.$modal.msg("未匹配到您所输入的项目！");
      }
    }
  });
}

/**
 * @提交
 */
function handleSubmit(value) {
  uForm.value
    .validate()
    .then((res) => {
      uni.$u.toast("校验通过");
      proxy.$modal.loading("加载中");
      add(form.value).then((requset) => {
        if (requset.status === "SUCCESS") {
          proxy.$modal.closeLoading();
          proxy.$tab.navigateTo(`/pages/common/success/index?codeName=提交成功`);
          form.value = {
            projectName: "", //项目名称
            projectAddress: "", //项目地址
            reflectName: "", //报修人
            reflectPhone: "", //报修手机号码
            repairContent: "", //报修内容
            repairPicture: "", //报修图片
          };
        }
      });
    })
    .catch((errors) => {
      uni.$u.toast("校验失败");
    });
}

/**
 * @action弹出框选择事件
 */
function selectAction(e) {
  if (actionTitle.value == "项目名称") {
    form.value.projectName = e.value[0].projectName; //项目名称
    form.value.projectAddress = e.value[0].projectAddress; //项目地址
    form.value.reflectName = e.value[0].reflectName; //报修人
  }

  actionShow.value = false;
}

/**
 * @图片上传成功回调
 */
function uploadSuccessChange(e) {
  form.value.repairPicture = e.url;
}

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

onLoad((options) => {
  if ("statusBool" in options) {
    document.getElementsByClassName("uni-page-head-hd")[0].style.cssText = "display: none;";
  }
});

onReady(() => {});

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

<style lang="scss" scoped></style>