usky-web-mobile/src/pages/business/mhxf/needMatter/index.vue

<template>
  <u-sticky class="shadow-default" bgColor="#fff" style="top: 0">
    <u-tabs :list="state.tabsList" :current="state.current" @click="tabsClick" lineColor="#333" :activeStyle="{ color: '#333' }" :inactiveStyle="{ color: '#909399' }"></u-tabs>
  </u-sticky>

  <oa-scroll
    customClass="scroll-height"
    :isSticky="true"
    :refresherLoad="false"
    :refresherLoadTitle="false"
    :refresherEnabled="false"
    :refresherEnabledTitle="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <oa-touch class="needMatter" @change="touchChange">
        <template #content>
          <u-empty v-if="classifyData.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>

          <u-collapse v-else>
            <u-collapse-item v-for="(cl, index) in classifyData" :key="index">
              <template #title>
                <view class="collapse-header-area">
                  <u--image class="collapse-header-area-image" src="/static/images/needMatter/icon1.png" width="13px" height="14px"></u--image>

                  <view class="collapse-header-area-lable">
                    <view>待办通知</view>
                    <view>建议完成限期：</view>
                    <view style="color: #666666">{{ cl.reformId }}</view>
                  </view>
                  <view class="collapse-header-area-value">
                    <view
                      :style="{
                        color:
                          cl.reformStatus == 1
                            ? '#0887F8'
                            : cl.reformStatus == 2
                            ? '#23DEDC'
                            : cl.reformStatus == 3
                            ? '#16BF00'
                            : cl.reformStatus == 4
                            ? '#F94343'
                            : cl.reformStatus == 5
                            ? '#9D40F3'
                            : '',
                      }"
                    >
                      {{
                        cl.reformStatus == 1
                          ? "已接收"
                          : cl.reformStatus == 2
                          ? "进行中"
                          : cl.reformStatus == 3
                          ? "待办完成"
                          : cl.reformStatus == 4
                          ? "审核不通过"
                          : cl.reformStatus == 5
                          ? "审核通过"
                          : ""
                      }}
                    </view>
                    <view style="text-align: left">{{ cl.limitTime }}</view>
                    <view style="color: #666666">{{ cl.sendTime }}</view>
                  </view>
                </view>
              </template>
              <view class="collapse-center-area">
                <view class="tableType1 mb10">
                  <u-row>
                    <u-col span="2">
                      <view>序号</view>
                    </u-col>
                    <u-col span="5.5">
                      <view>待办项</view>
                    </u-col>
                    <u-col span="4.5">
                      <view>原因</view>
                    </u-col>
                  </u-row>
                  <u-row v-for="(co, index) in cl.reformPart.data" :key="index">
                    <u-col span="2">
                      <view>{{ index + 1 }}</view>
                    </u-col>
                    <u-col span="5.5">
                      <view>{{ co.item }}</view>
                    </u-col>
                    <u-col span="4.5">
                      <view>{{ co.reason }}</view>
                    </u-col>
                  </u-row>
                </view>

                <view class="collapse-center-area-item" v-if="cl.reformStatus == 1">
                  <u-steps current="0" dot>
                    <u-steps-item style="text-align: center" title="已接收" :desc="cl.sendTime ? cl.sendTime.replace(' ', '\n') : ''"> </u-steps-item>
                    <u-steps-item style="text-align: center" title="进行中" :desc="cl.reformTime ? cl.reformTime.replace(' ', '\n') : ''"></u-steps-item>
                    <u-steps-item style="text-align: center" title="待审核" :desc="cl.reviewTime ? cl.reviewTime.replace(' ', '\n') : ''"></u-steps-item>
                  </u-steps>

                  <view class="collapse-center-area-item-child">
                    <u-button type="primary" text="去整改" shape="circle" @click="handleSubmit(cl, '去整改')" customStyle="width: 60px; height: 23px"></u-button>
                  </view>
                </view>

                <view class="collapse-center-area-item" v-if="cl.reformStatus == 2">
                  <u-steps current="1" dot>
                    <u-steps-item style="text-align: center" title="已接收" :desc="cl.sendTime ? cl.sendTime.replace(' ', '\n') : ''"> </u-steps-item>
                    <u-steps-item style="text-align: center" title="进行中" :desc="cl.reformTime ? cl.reformTime.replace(' ', '\n') : ''"></u-steps-item>
                    <u-steps-item style="text-align: center" title="待审核" :desc="cl.reviewTime ? cl.reviewTime.replace(' ', '\n') : ''"></u-steps-item>
                  </u-steps>

                  <view class="collapse-center-area-item-child">
                    <u-button type="primary" text="填报" shape="circle" @click="handleSubmit(cl, '填报')" customStyle="width: 60px; height: 23px"></u-button>
                  </view>
                </view>

                <view class="collapse-center-area-item" v-if="cl.reformStatus == 3">
                  <u-steps current="1" dot>
                    <u-steps-item style="text-align: center" title="已接收" :desc="cl.sendTime ? cl.sendTime.replace(' ', '\n') : ''"> </u-steps-item>
                    <u-steps-item style="text-align: center" title="待办完成" :desc="cl.reformTime ? cl.reformTime.replace(' ', '\n') : ''"></u-steps-item>
                    <u-steps-item style="text-align: center" title="待审核" :desc="cl.reviewTime ? cl.reviewTime.replace(' ', '\n') : ''"></u-steps-item>
                  </u-steps>
                </view>

                <view class="collapse-center-area-item" v-if="cl.reformStatus == 4">
                  <u-steps current="2" dot>
                    <u-steps-item style="text-align: center" title="已接收" :desc="cl.sendTime ? cl.sendTime.replace(' ', '\n') : ''"> </u-steps-item>
                    <u-steps-item style="text-align: center" title="待办完成" :desc="cl.reformTime ? cl.reformTime.replace(' ', '\n') : ''"></u-steps-item>
                    <u-steps-item style="text-align: center" title="审核不通过" :desc="cl.reviewTime ? cl.reviewTime.replace(' ', '\n') : ''" error></u-steps-item>
                  </u-steps>

                  <view class="collapse-center-area-item-child">
                    <view>备注：{{ cl.reviewRemark ? cl.reviewRemark : "无" }}</view>
                  </view>

                  <view class="collapse-center-area-item-child">
                    <u-button type="primary" text="去整改" shape="circle" @click="handleSubmit(cl, '去整改')" customStyle="width: 60px; height: 23px"></u-button>
                  </view>
                </view>

                <view class="collapse-center-area-item" v-if="cl.reformStatus == 5">
                  <u-steps current="2" dot>
                    <u-steps-item style="text-align: center" title="已接收" :desc="cl.sendTime ? cl.sendTime.replace(' ', '\n') : ''"> </u-steps-item>
                    <u-steps-item style="text-align: center" title="待办完成" :desc="cl.reformTime ? cl.reformTime.replace(' ', '\n') : ''"></u-steps-item>
                    <u-steps-item style="text-align: center" title="审核通过" :desc="cl.reviewTime ? cl.reviewTime.replace(' ', '\n') : ''"></u-steps-item>
                  </u-steps>

                  <view class="collapse-center-area-item-child">
                    <view style="display: flex">
                      <view style="white-space: nowrap">整改资料：</view>
                      <view style="width: 100%">
                        <view style="display: flex" v-for="(i, index) in 5" :key="index">
                          <view>{{ cl["reformPathName" + (index + 1)] }}</view>
                          <!-- <view style="margin: auto 0 auto auto">
                            <u--image src="/static/images/needMatter/icon2.png" width="15px" height="15px"></u--image>
                          </view> -->
                        </view>
                      </view>
                    </view>
                    <u-line style="margin: 5px 0" color="#E5E5E5"></u-line>
                    <view>备注：{{ cl.reviewRemark ? cl.reviewRemark : "无" }}</view>
                  </view>
                </view>
              </view>
            </u-collapse-item>
          </u-collapse>

          <view>
            <u-modal
              :show="state.modalShow"
              title="填报（火灾报警系统）"
              :showCancelButton="true"
              :showConfirmButton="true"
              :closeOnClickOverlay="true"
              @close="state.modalShow = false"
              @cancel="state.modalShow = false"
              @confirm="handleConfirm"
            >
              <view style="width: 100%">
                <uni-section class="block mb20" title="图片上传：" type="line">
                  <u-upload :fileList="state.fileList" name="6" @afterRead="afterRead" multiple :maxCount="5" width="80" height="80"> </u-upload>
                </uni-section>
                <uni-section class="block mb20" title="备注：" type="line">
                  <u-textarea v-model="state.textValue" placeholder="请输入内容"></u-textarea>
                </uni-section>
              </view>
            </u-modal>
          </view>
        </template>
      </oa-touch>
    </template>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, toRefs, onMounted, inject, shallowRef, reactive, watchEffect, getCurrentInstance } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { mobileScheduleList, updateMobileReformStatus, uploadAvatar, addReformMaterial } from "@/api/business/mhxf/needMatter";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const useStore = useStores();
const commonStore = commonStores(); //全局公共Store
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  current: 0,
  classifyData: [],
  modalShow: false,

  arrList: {},
  fileList: [],
  textValue: "",

  tabsList: [
    { id: 0, name: "全部" },
    { id: 1, name: "已接收" },
    { id: 2, name: "进行中" },
    { id: 3, name: "待办完成" },
    { id: 4, name: "审核不通过" },
    { id: 5, name: "审核通过" },
  ],
});

const { classifyData } = toRefs(state);

/**
 * @填报
 * @去整改
 */
function handleSubmit(el, type) {
  if (type === "去整改") {
    proxy.$modal.loading("加载中");
    updateMobileReformStatus({ reformId: el.reformId }).then((res) => {
      if (res.status === "SUCCESS") {
        goSearch();
        proxy.$modal.closeLoading();
      }
    });
  } else if (type === "填报") {
    state.arrList = el;
    state.fileList = [];
    state.textValue = "";
    state.modalShow = true;
  }
}

/**
 * @填报
 * @提交按钮点击事件
 */
function handleConfirm() {
  proxy.$modal.loading("加载中");

  let params = {
    reformId: state.arrList.reformId, //整改单编号
    reformPerson: useStore.nickName, //整改提交人
    reformRemark: state.textValue, //整改备注
    reformPath1: "", //整改相关图片或文件路径1
    reformPath2: "", //整改相关图片或文件路径2
    reformPath3: "", //整改相关图片或文件路径3
    reformPath4: "", //整改相关图片或文件路径4
    reformPath5: "", //整改相关图片或文件路径5
  };

  state.fileList.forEach((el, index) => {
    params[`reformPath${index + 1}`] = el.url;
  });

  addReformMaterial(params).then((res) => {
    if (res.status === "SUCCESS") {
      proxy.$modal.closeLoading();
      proxy.$modal.msgSuccess("提交成功");
      state.modalShow = false;
      goSearch();
    }
  });
}

/**
 * @图片上传成功回调
 */
function afterRead(event) {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = [`fileList${event.name}`].length;
  lists.map((item) => {
    [`fileList${event.name}`].push({
      ...item,
      status: "uploading",
      message: "上传中",
    });
  });
  for (let i = 0; i < lists.length; i++) {
    const result = uploadFilePromise(lists[i]);
    let item = [`fileList${event.name}`][fileListLen];
    [`fileList${event.name}`].splice(
      fileListLen,
      1,
      Object.assign(item, {
        status: "success",
        message: "",
        url: result,
      })
    );
    fileListLen++;
  }
}

/**
 * @调用上传图片接口
 */
function uploadFilePromise(el) {
  let data = { name: "file", filePath: el.url };
  uploadAvatar(data).then((res) => {
    state.fileList.push(res.data);
  });
}

/**
 * @滑动change事件
 */
function touchChange(e) {
  if (e == "右滑") {
    if (state.current >= 1) {
      state.current--;
    } else {
      state.current = state.tabsList.length - 1;
    }
    goSearch();
  } else if (e == "左滑") {
    if (state.current < state.tabsList.length - 1) {
      state.current++;
    } else {
      state.current = 0;
    }
    goSearch();
  }
}

/**
 * @tabs点击事件
 */
function tabsClick(e) {
  state.current = e.index;
  goSearch();
}

/**
 * @列表查询
 */
function goSearch() {
  classifySearch({
    companyId: "", //	单位Id
    reformId: "", //整改单编号
    reformStatus: state.current, //整改状态（1 已接收、2 整改中、3 整改完成、4 审核不通过、5 审核通过）
    pageNum: 1, //当前页
    pageSize: 20, //每页条数
  });
}

/**
 * @列表查询
 */
async function classifySearch(params) {
  proxy.$modal.loading("加载中");
  classifyData.value = [];

  mobileScheduleList(params).then((res) => {
    if (res.status === "SUCCESS") {
      res.data.records.forEach((el) => {
        el.reformPart = JSON.parse(el.reformPart);
        el.limitTime = el.limitTime ? el.limitTime.split("T")[0] : "";
        el.reviewTime = el.reviewTime ? el.reviewTime.replace("T", " ") : "";
        el.reformTime = el.reformTime ? el.reformTime.replace("T", " ") : "";

        for (let i = 1; i <= 5; i++) {
          el["reformPathName" + i] =
            el["reformPath" + i] && el["reformPath" + i].indexOf("/") != -1 ? el["reformPath" + i].split("/")[el["reformPath" + i].split("/").length - 1] : el["reformPath" + i];
        }

        classifyData.value.push(el);
      });

      proxy.$modal.closeLoading();
    }
  });
}

// 自定义导航事件
onNavigationBarButtonTap((e) => {
  if (e.float == "right") {
    uni.navigateTo({
      url: "/pages/business/zhaf/xunJian/collect/components/collectRecord",
    });
  } else {
  }
});

onLoad((options) => {
  goSearch();
});

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

onReady(() => {});

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

<style lang="scss">
.needMatter {
  height: calc(100vh - 88px);

  .u-collapse {
    .u-collapse-item {
      background: #ffffff;
      margin-bottom: 10px;

      .collapse-header-area {
        display: flex;
        line-height: 25px;
        font-size: 14px;

        &-image {
          padding-top: 2px;
        }

        &-lable {
          padding: 0 10px;
          white-space: nowrap;
        }

        &-value {
          width: 100%;
          text-align: center;
        }
      }

      .collapse-center-area {
        &-item {
          &-child {
            font-size: 14px;
            line-height: 20px;
            margin-top: 10px;
          }
        }
      }
    }
  }

  .uni-section {
    :deep(.uni-section-header) {
      padding: 12px 0px;
    }
  }
}
</style>