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

<template>
  <u-sticky bgColor="#fff" style="box-shadow: 1px 1px 4px rgb(26 26 26 / 10%)">
    <u-tabs :list="list" @click="tabsClick" :current="current"></u-tabs>
  </u-sticky>

  <view class="needMatter" @touchstart="fingerstart" @touchend="fingerend">
    <u-empty v-if="classifyData.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>

    <view class="content" v-else>
      <u-collapse>
        <u-collapse-item v-for="(cl, index) in classifyData" :key="index">
          <template #title>
            <view style="display: flex; line-height: 25px">
              <view style="padding-top: 4px">
                <u--image src="/static/images/needMatter/icon1.png" width="14px" height="15px"></u--image>
              </view>
              <view style="padding: 0 10px; white-space: nowrap; font-size: 16px">
                <view>待办通知</view>
                <view>建议完成限期：</view>
                <view style="font-size: 14px; color: #666666">{{ cl.reformId }}</view>
              </view>
              <view style="width: 100%; text-align: center; font-size: 16px">
                <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="font-size: 14px; color: #666666">{{ cl.sendTime }}</view>
              </view>
            </view>
          </template>
          <view class="u-collapse-content">
            <view class="tableType1" style="margin-bottom: 10px">
              <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 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 style="font-size: 14px; line-height: 20px; margin-top: 10px">
                <u-button style="width: 60px; height: 23px" type="primary" text="去整改" shape="circle" @click="handleSubmit(cl, '去整改')"></u-button>
              </view>
            </view>

            <view 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 style="font-size: 14px; line-height: 20px; margin-top: 10px">
                <u-button style="width: 60px; height: 23px" type="primary" text="填报" shape="circle" @click="handleSubmit(cl, '填报')"></u-button>
              </view>
            </view>

            <view 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 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 style="font-size: 14px; line-height: 20px; margin-top: 10px">
                <view>备注：{{ cl.reviewRemark ? cl.reviewRemark : "无" }}</view>
              </view>

              <view style="font-size: 14px; line-height: 20px; margin-top: 10px">
                <u-button style="width: 60px; height: 23px" type="primary" text="去整改" shape="circle" @click="handleSubmit(cl, '去整改')"></u-button>
              </view>
            </view>

            <view 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 style="font-size: 14px; line-height: 20px; margin-top: 10px">
                <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="modalShow"
          title="填报（火灾报警系统）"
          :showCancelButton="true"
          :showConfirmButton="true"
          :closeOnClickOverlay="true"
          @close="modalShow = false"
          @cancel="modalShow = false"
          @confirm="handleConfirm"
        >
          <view style="width: 100%">
            <uni-section title="图片上传：" type="line">
              <u-upload :fileList="fileList" name="6" @afterRead="afterRead" multiple :maxCount="5" width="80" height="80"> </u-upload>
            </uni-section>
            <uni-section title="备注：" type="line">
              <u--textarea v-model="textValue" placeholder="请输入内容"></u--textarea>
            </uni-section>
          </view>
        </u-modal>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, watchEffect, getCurrentInstance } from "vue";
import useStores from "@/store/modules/user.js";
import publicStore from "@/store/modules/public";

import { mobileScheduleList, updateMobileReformStatus, uploadAvatar, addReformMaterial } from "@/api/business/mhxf/needMatter";

const { proxy } = getCurrentInstance();

const useStore = useStores();
const publicStores = publicStore(); //全局公共Store

const current = ref(0);
const classifyData = ref([]);
const modalShow = ref(false);

const arrayList = ref({});
const fileList = ref([]);
const textValue = ref("");

const list = ref([
  {
    id: 0,
    name: "全部",
  },
  {
    id: 1,
    name: "已接收",
  },
  {
    id: 2,
    name: "进行中",
    badge: {
      // isDot: true,
      // value: 5,
    },
  },
  {
    id: 3,
    name: "待办完成",
    badge: {
      // value: 5,
    },
  },
  {
    id: 4,
    name: "审核不通过",
    badge: {
      // value: 5,
    },
  },
  {
    id: 5,
    name: "审核通过",
    badge: {
      // value: 5,
    },
  },
]);

const startData = ref({
  clientX: "",
  clientY: "",
});
const updDistance = ref(100);
const lrDistance = ref(50);
const topMed = ref("");
const bottomMed = ref("");
const leftMed = ref("");
const rightMed = ref("");

/**
 * @填报
 * @去整改
 */
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 === "填报") {
    arrayList.value = el;
    fileList.value = [];
    textValue.value = "";
    modalShow.value = true;
  }
}

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

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

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

  addReformMaterial(params).then((res) => {
    if (res.status === "SUCCESS") {
      proxy.$modal.closeLoading();

      proxy.$modal.msgSuccess("提交成功");

      modalShow.value = 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) => {
    fileList.value.push(res.data);
  });
}

/**
 * @当按下去的时候
 */
function fingerstart(e) {
  // 记录 距离可视区域左上角 左边距 和 上边距
  startData.value.clientX = e.changedTouches[0].clientX;
  startData.value.clientY = e.changedTouches[0].clientY;
}

/**
 * @当抬起来的时候
 */
function fingerend(e) {
  // 当前位置 减去 按下位置 计算 距离
  const subX = e.changedTouches[0].clientX - startData.value.clientX;
  const subY = e.changedTouches[0].clientY - startData.value.clientY;
  if (subY > updDistance.value || subY < -updDistance.value) {
    if (subY > updDistance.value) {
      bottomscroll(subY);
    } else if (subY < -updDistance.value) {
      topscroll(subY);
    }
  } else {
    if (subX > lrDistance.value) {
      rightscroll(subX);
    } else if (subX < -lrDistance.value) {
      leftscroll(subX);
    } else {
      console.log("无效操作");
    }
  }
}
/**
 * @上滑触发
 */
function topscroll(dista) {
  topMed.value ? (topMed.value = dista) : (topMed.value = null);
  console.log("触发了上滑方法!");
}
/**
 * @下滑触发
 */
function bottomscroll(dista) {
  bottomMed.value ? (bottomMed.value = dista) : (bottomMed.value = null);
  console.log("触发了下滑方法!");
}
/**
 * @右滑触发
 */
function rightscroll(dista) {
  rightMed.value ? (rightMed.value = dista) : (rightMed.value = null);
  console.log("触发了右滑方法!");
  if (current.value >= 1) {
    current.value--;
  } else {
    current.value = list.value.length - 1;
  }
}
/**
 * @左滑触发
 */
function leftscroll(dista) {
  leftMed.value ? (leftMed.value = dista) : (leftMed.value = null);
  console.log("触发了左滑方法!");
  if (current.value < list.value.length - 1) {
    current.value++;
  } else {
    current.value = 0;
  }
}

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

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

watchEffect(() => {
  goSearch();
});

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

onLoad((options) => {});

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

onReady(() => {});

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

<style lang="scss">
.uni-swipe {
  overflow: visible;
}
.is-selected {
  color: #1989fa;
}

.needMatter {
  height: calc(100vh - 88px);
  .content {
    // padding: 10px;
    .u-collapse {
      .u-collapse-item {
        background: #ffffff;
        margin-bottom: 10px;
      }
    }
  }

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