usky-web-mobile/src/pages/business/fireIot/repairManage/repairDetails.vue

<template>
  <oa-scroll
    customClass="repairDetails-container scroll-height"
    :refresherLoad="false"
    :refresherEnabled="false"
    :refresherEnabledTitle="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <view class="flex bg-white p15 mb15">
        <image style="width: 40px; height: 40px; margin: auto 15px auto 0" :src="dataArray.typeImg ? dataArray.typeImg : '/static/images/404.png'" mode="aspectFill"></image>

        <view style="margin: auto auto auto 0">
          <view style="font-size: 15px"> {{ dataArray.projectName }} </view>
        </view>

        <view style="margin: auto 0 auto 0">
          <view style="font-size: 15px" :style="`color:${dataArray.repairStatus == 1 ? '#23dedc' : '#16bf00'}`">
            {{ dataArray.repairStatus == 1 ? "受理中" : "处理完成" }}
          </view>
        </view>
      </view>

      <view class="bg-white p15 mb15">
        <uni-section class="block mb10" title="基本信息" type="line"></uni-section>

        <view class="tableType3 p0">
          <u-row v-for="da in dataList" :key="da">
            <u-col span="4">
              <view style="text-align: right; padding: 0px 5px 0px 5px">{{ da.title }}</view>
            </u-col>
            <u-col span="8">
              <view v-if="da.title !== '评分'" style="text-align: left; padding: 0px 5px 0px 5px">{{ da.value }}</view>
              <u-rate v-else style="padding: 0" v-model="da.value" :minCount="0" :count="5" :allowHalf="true" activeColor="#ff9900" readonly></u-rate>
            </u-col>
          </u-row>
        </view>
      </view>

      <view class="bg-white p15 mb15">
        <uni-section class="block mb10" title="处理内容" type="line"></uni-section>

        <view>
          <u-input placeholder="报修人（必填）" border="surround" v-model="dataArray.handleName" style="margin: 0 0 15px 0" :disabled="dataArray.repairStatus == 2"> </u-input>

          <u--textarea
            v-model="dataArray.handleContent"
            placeholder="填报内容，最多可输入50个字"
            :count="true"
            maxlength="50"
            style="margin: 0 0 15px 0"
            :disabled="dataArray.repairStatus == 2"
          ></u--textarea>
        </view>

        <view class="flex" v-if="dataArray.repairStatus != 2">
          <u-button
            type="info"
            text="取消"
            :plain="true"
            shape="circle"
            :customStyle="{
              width: '80px',
              height: '30px',
              marginRight: '15px',
            }"
            @click="handleSubmit(1)"
          ></u-button>
          <u-button
            type="primary"
            text="处理"
            shape="circle"
            :customStyle="{
              width: '80px',
              height: '30px',
              marginLeft: '15px',
            }"
            @click="handleSubmit(2)"
          ></u-button>
        </view>
      </view>
    </template>
  </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 { page, fill } from "@/api/business/fireIot/repairManage.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const useStore = useStores();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  dataArray: {},
  dataList: [
    { title: "报修日期", value: "" },
    { title: "项目名称", value: "" },
    { title: "报修人", value: "" },
    { title: "报修电话", value: "" },
    { title: "问题描述", value: "" },
    { title: "报修地址", value: "" },
  ],
  repairCode: "",
  pageSize: 20,
  current: 1,
  total: 0,
});

const { dataArray, dataList, repairCode, pageSize, current, total } = toRefs(state);

/**
 * @页面初始化
 */
function init() {
  selectListApi();
}

/**
 * @列表查询
 * @api接口查询
 */
function selectListApi() {
  page({
    repairCode: state.repairCode,
    current: state.current,
    size: state.pageSize,
  }).then((requset) => {
    if (requset.status === "SUCCESS") {
      state.dataArray = requset.data.records[0];
      state.dataArray.handleName = requset.data.records[0].handleName ? requset.data.records[0].handleName : useStore.nickName ? useStore.nickName : "";
      state.dataArray.handleContent = requset.data.records[0].handleContent ? requset.data.records[0].handleContent : "";

      state.dataList[0].value = requset.data.records[0].createTime ? requset.data.records[0].createTime.replace("T", " ") : requset.data[0].createTime;
      state.dataList[1].value = requset.data.records[0].projectName;
      state.dataList[2].value = requset.data.records[0].reflectName;
      state.dataList[3].value = requset.data.records[0].reflectPhone;
      state.dataList[4].value = requset.data.records[0].repairContent;
      state.dataList[5].value = requset.data.records[0].projectAddress;

      if (requset.data.records[0].repairStatus === 2) {
        state.dataList.push({ title: "评分", value: 0 }, { title: "评分内容", value: "" });
        state.dataList[6].value = requset.data.records[0].score ? requset.data.records[0].score : 0;
        state.dataList[7].value = requset.data.records[0].appraiseContent;
      }

      total.value = requset.data.total;
    }
  });
}

/**
 * @提交
 */
function handleSubmit(type) {
  if (type == 1) {
    proxy.$tab.navigateBack(1);
  } else {
    if (!state.dataArray.handleName) {
      proxy.$modal.msg("请输入报修人");
      return;
    }

    fill({
      id: state.dataArray.id,
      handleName: state.dataArray.handleName,
      handleContent: state.dataArray.handleContent,
    }).then((res) => {
      if (requset.status === "SUCCESS") {
        proxy.$tab.navigateTo(`/pages/common/success/index?codeName=提交成功`);
      }
    });
  }
}

onReady(() => {});

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

onLoad((options) => {
  if ("repairCode" in options) {
    state.repairCode = options.repairCode;
  }

  init();
});
</script>

<style lang="scss" scoped>
:deep(.u-input__content__field-wrapper__field) {
  font-size: 13px !important;
}

:deep(.u-textarea__field) {
  font-size: 13px;
}
</style>