usky-web-mobile/src/pages/business/zhaf/xunJian/plan/components/content.vue

<template>
  <oa-scroll
    customClass="xunjian-plan-content 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="bg-white p15 mb15" v-for="(con, index) in contentList" :key="index">
        <view class="flex mb10">
          <uni-section class="block mb10" :title="con.contentTitle" type="line"></uni-section>

          <view style="margin: auto"> </view>

          <u-button v-if="con.remarksBool == false" type="primary" icon="list-dot" shape="circle" @click="remarksClick(index)" customStyle="width: 18px;height: 18px;padding: 0;margin: 0;"> </u-button>
        </view>
        <view>
          <view class="mt15" v-if="con.submissionMethod == 1">
            <u-checkbox-group
              v-model="con.contentOptionListValue1"
              @change="
                (val) => {
                  checkboxChange(val, index);
                }
              "
              :size="14"
              :disabled="xunJianStore.inspectionStatus == 2"
              :activeColor="proxy.$settingStore.themeColor.color"
            >
              <view class="flex" style="width: 100%; flex-wrap: wrap">
                <view class="mb15" style="width: 50%" v-for="option in con.contentOptionList" :key="option">
                  <u-checkbox :label="option.optionName" :name="option.id" :checked="con.contentOptionListValue1.length > 0 ? con.contentOptionListValue1.indexOf(option.id) >= 0 : false">
                  </u-checkbox>
                </view>
              </view>
            </u-checkbox-group>

            <view v-if="con.remarksBool == true" style="display: flex; height: 32px; line-height: 32px; white-space: nowrap">
              <span>备注：</span>
              <u-input v-model="con.remarks" placeholder="请输入备注" :disabled="xunJianStore.inspectionStatus == 2" customStyle="height:32px;"></u-input>
            </view>
          </view>
          <view class="mt15" v-if="con.submissionMethod == 2">
            <u-radio-group placement="row" v-model="con.contentOptionListValue" :activeColor="proxy.$settingStore.themeColor.color">
              <view class="flex" style="width: 100%; flex-wrap: wrap">
                <view class="mb15" style="width: 50%" v-for="option in con.contentOptionList" :key="option">
                  <u-radio :disabled="xunJianStore.inspectionStatus == 2" :label="option.optionName" :name="option.id"> </u-radio>
                </view>
              </view>
            </u-radio-group>

            <view v-if="con.remarksBool == true" style="display: flex; height: 32px; line-height: 32px; white-space: nowrap">
              <span>备注：</span>
              <u-input v-model="con.remarks" placeholder="请输入备注" :disabled="xunJianStore.inspectionStatus == 2" customStyle="height:32px;"></u-input>
            </view>
          </view>
          <view class="mt15" v-if="con.submissionMethod == 3">
            <view class="mb15">
              <u-textarea v-model="con.contentOptionListValue" placeholder="请输入" maxlength="30" :disabled="xunJianStore.inspectionStatus == 2"></u-textarea>
            </view>

            <view v-if="con.remarksBool == true" style="display: flex; height: 32px; line-height: 32px; white-space: nowrap">
              <span>备注：</span>
              <u-input v-model="con.remarks" placeholder="请输入备注" :disabled="xunJianStore.inspectionStatus == 2" customStyle="height:32px;"></u-input>
            </view>
          </view>
        </view>
      </view>

      <view style="margin-bottom: 125px" v-if="xunJianStore.inspectionStatus == 1"></view>

      <view class="app-button-fixed" v-if="xunJianStore.inspectionStatus == 1">
        <view class="app-flex">
          <u-button class="app-buttom" shape="circle" @click="buttonClick(1)"> 上一步 </u-button>
          <u-button class="app-buttom" type="primary" shape="circle" @click="buttonClick(2)"> 提交 </u-button>
        </view>
      </view>

      <u-modal ref="uModal" :show="show" :title="title" :content="content" @confirm="confirm"></u-modal>

      <!-- 巡检完成提示 -->
      <oa-ttsAudio v-if="audioUrl" :audioUrl="audioUrl" :audioBool="true"></oa-ttsAudio>
    </template>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, onMounted, reactive, computed, getCurrentInstance, toRefs, inject, shallowRef } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { updatePlan } from "@/api/business/zhaf/xunJian/plan.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores, xunJianStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const xunJianStore = xunJianStores(); //全局变量值Store
/*----------------------------------变量声明-----------------------------------*/
const contentList = ref([]);
function checkboxChange(value, index) {
  contentList.value[index].contentOptionListValue1 = value;
}

/**
 * @按钮点击事件
 * @备注显示事件
 */
function remarksClick(index) {
  xunJianStore.contentArray.contentList[index].remarksBool = true;
}

/**
 * @confirm确定回调事件
 * @模态框
 */
const show = ref(false);
const title = ref("");
const content = ref("");
const audioUrl = ref("");
function confirm() {
  audioUrl.value = "/static/mp3/XJWC.mp3";
  show.value = false;
  uni.$emit("planSelect"); //执行页面中的自定义方法
  proxy.$tab.navigateBack(3); //返回到需要执行方法的页面
}

/**
 * @按钮点击事件
 * @上一步
 * @提交
 */
async function buttonClick(type) {
  if (type == 1) {
    //上一步
    proxy.$tab.navigateBack(1); //返回到需要执行方法的页面
  } else if (type == 2) {
    //提交

    const recordOptionList = [];
    if (contentList.value.length > 0) {
      contentList.value.forEach((e) => {
        if (e.contentOptionListValue && e.contentOptionList.length > 0) {
          recordOptionList.push({
            contentId: e.id,
            contentOptionId: e.contentOptionListValue,
            remarks: e.remarks,
          });
        }

        if (e.contentOptionListValue && e.contentOptionList.length == 0) {
          recordOptionList.push({
            contentId: e.id,
            content: e.contentOptionListValue,
            remarks: e.remarks,
          });
        }

        if (e.contentOptionListValue1.length > 0) {
          e.contentOptionListValue1.forEach((l) => {
            recordOptionList.push({
              contentId: e.id,
              contentOptionId: l,
              remarks: e.remarks,
            });
          });
        }
      });
    }

    const array = {
      deviceId: uni.getSystemInfoSync().deviceId,
      siteType: xunJianStore.contentArray.siteList.siteType,
      siteNubmber: xunJianStore.contentArray.siteList.siteNubmber,
      siteName: xunJianStore.contentArray.siteList.siteName,
      siteStatus: 1, //定位 （0：未定位 1：已定位）
      longitude: xunJianStore.contentArray.siteList.longitude,
      latitude: xunJianStore.contentArray.siteList.latitude,
      planSonId: xunJianStore.contentArray.siteList.planSonId,
      siteId: xunJianStore.contentArray.siteList.id,
      remarks: xunJianStore.contentArray.siteList.remarks,
      recordPictureList: xunJianStore.contentArray.siteList.recordPictureList,
      recordOptionList: recordOptionList,
    };

    if (!proxy.$common.isNetwork()) {
      xunJianStore.planDataList.push(array);
      return false;
    }

    updatePlan(array)
      .then((res) => {
        if (res.status == "SUCCESS") {
          title.value = "消息";
          content.value = "提交成功，确定后返回！";
          show.value = true;
        }
      })
      .catch((err) => {
        proxy.$modal.msg(err);
      });
  }
}

onLoad((options) => {
  contentList.value = xunJianStore.contentArray.contentList;

  if (xunJianStore.inspectionStatus == 2) {
    if (contentList.value.length > 0) {
      contentList.value.forEach((el) => {
        el.contentOptionListValue1 = [];
      });

      contentList.value.filter((e) => {
        if (e.remarks) {
          e.remarksBool = true;
        } else {
          e.remarksBool = false;
        }

        if (e.contentOptionList) {
          e.contentOptionList.forEach((s) => {
            if (e.contentOptionValue.indexOf(s.id) >= 0) {
              //提交方式:1多选 2单选 3输入框
              if (e.submissionMethod == 1) {
                e.contentOptionListValue1.push(s.id);
              } else if (e.submissionMethod == 2) {
                e.contentOptionListValue = s.id;
              }
            }
          });
        } else {
          e.contentOptionListValue = e.content;
        }
      });
    }
  }
});

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

onMounted(() => {});
</script>