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

<template>
  <scroll-view scroll-y class="grayBackgroundColor">
    <view>
      <view
        class="whiteBackgroundColor"
        style="padding: 15px; margin-bottom: 15px"
        v-for="(con, index) in contentList"
        :key="index"
      >
        <view class="siteHeader">
          <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 v-if="con.submissionMethod == 1" style="margin-top: 15px">
            <u-checkbox-group
              v-model="con.contentOptionListValue1"
              @change="
                (val) => {
                  checkboxChange(val, index);
                }
              "
              :disabled="
                settingsStore.contentArray.siteList.inspectionStatus == 2
              "
            >
              <u-row style="width: 100%; flex-wrap: wrap">
                <u-col
                  v-for="option in con.contentOptionList"
                  :key="option"
                  span="6"
                  style="margin-bottom: 15px"
                >
                  <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 style="">备注：</span>
              <u-input
                v-model="con.remarks"
                placeholder="请输入备注"
                :disabled="
                  settingsStore.contentArray.siteList.inspectionStatus == 2
                "
              ></u-input>
            </view>
          </view>
          <view v-if="con.submissionMethod == 2" style="margin-top: 15px">
            <u-radio-group placement="row" v-model="con.contentOptionListValue">
              <u-row style="width: 100%; flex-wrap: wrap">
                <u-col
                  v-for="option in con.contentOptionList"
                  :key="option"
                  :span="6"
                  style="margin-bottom: 15px"
                >
                  <u-radio
                    :disabled="
                      settingsStore.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 style="">备注：</span>
              <u-input
                v-model="con.remarks"
                placeholder="请输入备注"
                :disabled="
                  settingsStore.contentArray.siteList.inspectionStatus == 2
                "
              ></u-input>
            </view>
          </view>
          <view v-if="con.submissionMethod == 3" style="margin-top: 15px">
            <u-textarea
              v-model="con.contentOptionListValue"
              placeholder="请输入"
              maxlength="30"
              :disabled="
                settingsStore.contentArray.siteList.inspectionStatus == 2
              "
            ></u-textarea>

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

      <view style="margin-bottom: 125px"></view>
    </view>
    <view style="position: fixed; left: 0; right: 0; bottom: 0; padding: 15px">
      <view>
        <u-button
          v-if="settingsStore.contentArray.siteList.inspectionStatus == 1"
          type="primary"
          style="
            width: 100%;
            height: 40px;
            font-size: 14px;
            margin-bottom: 15px;
          "
          shape="circle"
          @click="buttonClick(1)"
        >
          上一步
        </u-button>
      </view>
      <view>
        <u-button
          v-if="settingsStore.contentArray.siteList.inspectionStatus == 1"
          type="primary"
          style="width: 100%; height: 40px; font-size: 14px"
          shape="circle"
          @click="buttonClick(2)"
        >
          提交
        </u-button>
      </view>
    </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, inject, shallowRef } from "vue";
const myRequest = inject("$myRequest");
const BASE_URL = inject("$BASE_URL");

import useXunJianStore from "@/store/modules/xunJian";
const settingsStore = useXunJianStore(); //全局变量值Store

const contentList = ref([]);
function checkboxChange(value, index) {
  contentList.value[index].contentOptionListValue1 = value;
}

/**
 * @按钮点击事件
 * @备注显示事件
 */
function remarksClick(index) {
  settingsStore.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: settingsStore.contentArray.siteList.siteType,
      siteNubmber: settingsStore.contentArray.siteList.siteNubmber,
      siteName: settingsStore.contentArray.siteList.siteName,
      siteStatus: 1, //定位 （0：未定位 1：已定位）
      longitude: settingsStore.contentArray.siteList.longitude,
      latitude: settingsStore.contentArray.siteList.latitude,
      planSonId: settingsStore.contentArray.siteList.planSonId,
      siteId: settingsStore.contentArray.siteList.id,
      recordPictureList: settingsStore.contentArray.siteList.recordPictureList,
      recordOptionList: recordOptionList,
    };

    let res = await myRequest({
      url: "/service-fire/appPatrolInspection/updatePlan",
      header: {
        "Content-Type": "application/json;charset=utf-8",
      },
      method: "POST",
      data: array,
    });

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

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

  if (settingsStore.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;
        }
      });
    }
  }
});

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

<style scoped>
uni-page-body,
uni-page-refresh,
.grayBackgroundColor {
  background: rgb(241, 241, 241);
}

.whiteBackgroundColor {
  background-color: #ffffff;
}
</style>

<style lang="scss">
.siteHeader {
  display: flex;
  height: 18px;
  line-height: 18px;
  margin-bottom: 10px;
}
</style>