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

<template>
  <scroll-view class="scroll-height" :scroll-y="true" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
    <view class="xunjian-plan-content">
      <view class="bg-white padding-15 margin-b-15" v-for="(con, index) in contentList" :key="index">
        <view class="flex margin-bottom-10">
          <uni-section :title="con.contentTitle" type="line"></uni-section>

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

          <u-button v-if="con.remarksBool == false" type="primary" icon="list-dot" style="width: 18px; height: 18px; padding: 0; margin: 0" shape="circle" @click="remarksClick(index)"> </u-button>
        </view>
        <view>
          <view class="margin-t-15" v-if="con.submissionMethod == 1">
            <u-checkbox-group
              v-model="con.contentOptionListValue1"
              @change="
                (val) => {
                  checkboxChange(val, index);
                }
              "
              :disabled="xunJianStore.contentArray.siteList.inspectionStatus == 2"
              :activeColor="proxy.$settingStore.themeColor.color"
            >
              <u-row style="width: 100%; flex-wrap: wrap">
                <u-col class="margin-b-15" v-for="option in con.contentOptionList" :key="option" :span="6">
                  <u-checkbox :label="option.optionName" :name="option.id" :checked="con.contentOptionListValue1.length > 0 ? con.contentOptionListValue1.indexOf(option.id) >= 0 : false">
                  </u-checkbox>
                </u-col>
              </u-row>
            </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.contentArray.siteList.inspectionStatus == 2"></u-input>
            </view>
          </view>
          <view class="margin-t-15" v-if="con.submissionMethod == 2">
            <u-radio-group placement="row" v-model="con.contentOptionListValue" :activeColor="proxy.$settingStore.themeColor.color">
              <u-row style="width: 100%; flex-wrap: wrap">
                <u-col class="margin-b-15" v-for="option in con.contentOptionList" :key="option" :span="6">
                  <u-radio :disabled="xunJianStore.contentArray.siteList.inspectionStatus == 2" :label="option.optionName" :name="option.id"> </u-radio>
                </u-col>
              </u-row>
            </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.contentArray.siteList.inspectionStatus == 2"></u-input>
            </view>
          </view>
          <view class="margin-t-15" v-if="con.submissionMethod == 3">
            <u-textarea
              class="margin-b-15"
              v-model="con.contentOptionListValue"
              placeholder="请输入"
              maxlength="30"
              :disabled="xunJianStore.contentArray.siteList.inspectionStatus == 2"
            ></u-textarea>

            <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.contentArray.siteList.inspectionStatus == 2"></u-input>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="app-button-fixed">
      <u-button class="app-buttom" v-if="xunJianStore.contentArray.siteList.inspectionStatus == 1" type="primary" shape="circle" @click="buttonClick(1)"> 上一步 </u-button>

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

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

<script setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, onMounted, reactive, computed, getCurrentInstance, toRefs, inject, shallowRef } from "vue";
import { publicStores, xunJianStores } from "@/store/modules/index";

import { updatePlan } from "@/api/business/mhxf/xunJian/plan.js";

const BASE_URL = inject("$BASE_URL");
const xunJianStore = xunJianStores(); //全局变量值Store

const { proxy } = getCurrentInstance();

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("");
function confirm() {
  show.value = false;
  uni.$emit("planSelect"); //执行页面中的自定义方法
  uni.navigateBack({
    delta: 3, //返回到需要执行方法的页面
  });
}

/**
 * @按钮点击事件
 * @上一步
 * @提交
 */
async function buttonClick(type) {
  if (type == 1) {
    //上一步
    uni.navigateBack({
      delta: 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 = {
      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,
      recordPictureList: xunJianStore.contentArray.siteList.recordPictureList,
      recordOptionList: recordOptionList,
    };

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

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

  if (xunJianStore.contentArray.siteList.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>

<style lang="scss">
.xunjian-plan-content {
  //#ifdef H5
  padding-bottom: 125px;
  //#endif

  //#ifdef APP-PLUS
  padding-bottom: 130px;
  //#endif
}
</style>