detection-business/pages/manage/workReport/reportDetals.vue

<template>
  <view class="content">
    <headersVue :titles="titles">
      <u-icon name="arrow-left" color="#fff" size="18"></u-icon>
    </headersVue>
    <view class="container">
      <view class="box_">
        <view class="title_">
          <text style="color: red;">*</text>
          汇报主题
        </view>
        <u--input placeholder="请输入" border="surround" v-model="report.reportTopic"></u--input>
        <view class="x_"></view>
        <view class="" @click="show =! show">
          <text class="h_">汇报时间：</text>
          {{ formatDateTimeToMinute(report.reportTime) }}
        </view>
        <view class="x_"></view>
        <view class="d_s" @click="isShowReportTo = true">
          <text class="h_">汇报给：{{ reportTosStr }}</text>
          <view class="j_">+</view>
        </view>
        <view class="x_"></view>
        <view class="title_">
          <text style="color: red;">*</text>
          汇报内容
        </view>
        <u--textarea v-model="report.reportContent" placeholder="请输入内容"></u--textarea>
        <view class="x_"></view>
        <view class="d_b" @click="handleUpload">
          <view class="">附件</view>
          <view class="lan_">上传附件
            <image src="/static/imgs/add.png" mode=""></image>
          </view>
        </view>
        <u-upload
            ref="uploadRef"
            :fileList="fileList1"
            @afterRead="afterRead"
            @delete="deletePic"
            name="1"
            multiple
            :maxCount="10"
            v-show="fileList1.length > 0"
        >
        </u-upload>
        <view class="hui_box" v-if="fileList1.length == 0">
          <image src="/static/imgs/wod.png" mode=""></image>
          <view class="">
            <view class="big_">附件格式pdf/jpg/png</view>
            <view class="sm_">100KB</view>
          </view>
        </view>
        <view class="anniu" @click="onSubmit">
          {{ buttonTitle}}
        </view>
      </view>
    </view>

    <u-datetime-picker
        :show="show"
        @cancel="show = false"
        @confirm="selectReportTime"
        v-model="report.reportTime"
        mode="datetime"
    ></u-datetime-picker>

    <qianziyu-select
        :show="isShowReportTo"
        type="checkbox"
        name="nickname"
        :dataLists="reportToList"
        :showSearch=false
        @cancel="isShowReportTo = false"
        :checkboxData="report.reportTos"
        @submit="onReportToSubmit"
        popupTitle='汇报对象选择'
        @update:checkboxData="report.reportTos = $event"
    >
    </qianziyu-select>
  </view>
</template>

<script>
import headersVue from '../../../components/header/headers.vue';
import request from "@/utils/request";
import {formatDateTimeToMinute} from "@/utils/utils";
import upload from "@/utils/upload";
import config from "@/config";

export default {
  data() {
    return {
      titles: "汇报",
      List: [],
      show: false,
      status: 'loading',
      value: '',
      value1: Number(new Date()),
      value2: '',
      show1: false,
      report: {
        reportTopic: '',
        reportContent: '',
        reportTime: formatDateTimeToMinute(new Date()),
        reportTos: [],
        servicePackageId: "jiance",
      },
      isShowReportTo: false,
      reportToList: [],
      reportTosStr:null,
      fileList1: [],
      buttonTitle:"保存",
      baseImageUrl: config.baseImageUrl,
    }
  },
  components: {
    headersVue
  },
  async onLoad(data) {
    await this.getReportTo();  // 等待 getReportTo 执行完成
    if (data.id) {
      this.buttonTitle = "修改"
      console.log(data.id)
      this.getWorkReport(data.id)
    }
  },
  methods: {
    formatDateTimeToMinute,
    cancelShow() {
      this.show = !this.show
    },
    async getReportTo() {
      await request({
        url: '/work/report/queryReportTo',
        method: 'get',
        params: {
          dictType: "ins_report_role"
        }
      }).then(res => {
        this.reportToList = res.data
      })
    },
    onReportToSubmit(selectedData) {
      this.isShowReportTo = false
      this.report.reportTos = selectedData
      this.reportTosStr = selectedData.map(item => item.nickname).join(',')
    },
    selectReportTime(e) {
      this.report.reportTime = formatDateTimeToMinute(e.value)
      this.show = false
    },

    // 上传相关方法
    handleUpload() {
      // 通过 ref 获取 u-upload 组件实例，并调用其上传方法
      this.$refs.uploadRef.chooseFile();
    },
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
            fileListLen,
            1,
            Object.assign(item, {
              status: "success",
              message: "",
              url: result,
            })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        upload({
          url: '/common/upload',
          filePath: url,
        }).then((res) => {
          resolve(res.data.url);
          this.forceRefreshFiles(); // 强制刷新文件列表
        })
      });
    },
    /** 表单提交 */
    onSubmit() {
      //校验
      const isValid = this.checkForm()
      if (!isValid) {
        return
      }
      //将文件转为字符串
      this.report.filePath = this.fileList1
          .map(item => item.url.replace(/^https?:\/\/[^/]+\/minio\//, '')) // 去除域名和 minio/
          .join(',');

      this.report.reportTos = this.report.reportTos.map(item => item.id)
      let url = '/work/report/create'
      let method = 'post'
      if (this.report.id) {
        url = '/work/report/update'
        method = 'put'
      }
      request({
        url: url,
        method: method,
        data: this.report
      }).then(res => {
        if (res.code === 200) {
          uni.showToast({
            title: '操作成功',
            icon: 'none',
            duration: 2000
          });
          setTimeout(() => {
            // 在跳回之前刷新页面
            uni.navigateBack({
              delta: 1, // 跳回前一个页面
              success: () => {
                // 刷新当前页面数据
                uni.reLaunch({
                  url: '/pages/manage/workReport/workReport'  // 替换为你要刷新页面的路径
                });
              }
            });
          }, 2000);
        }
      })
    },
    /** 校验 */
    checkForm() {
      if (this.report.reportTos.length === 0) {
        if (!this.report.reportTopic) {
          uni.showToast({
            title: '请输入汇报主题',
            icon: 'none',
            duration: 2000
          });
          return false
        }

        uni.showToast({
          title: '请选择汇报对象',
          icon: 'none',
          duration: 2000
        });
        return false
      }

      if (!this.report.reportContent) {
        uni.showToast({
          title: '请输入汇报内容',
          icon: 'none',
          duration: 2000
        });
        return false
      }
      return true
    },
    /** 获取汇报对象 */
    async getWorkReport(id) {
      await request({
        url: '/work/report/get?id=' + id,
        method: 'get'
      }).then(res => {
        this.report = res.data
        // 根据 ID 数组查找对应的数据，并赋值给 report.reportTos
        this.report.reportTos = this.reportToList.filter(item => res.data.reportTos.includes(item.id));
        this.reportTosStr = this.report.reportTos.map(item => item.nickname).join(',')
        console.log('当前选择的汇报对象',this.reportTosStr)
        if (res.data.filePath) {
          this.fileList1 = res.data.filePath.split(',').map(item => {
            return {
              url: this.baseImageUrl + "/" + item
            }
          })
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  box-sizing: border-box;
  padding-top: 200rpx;
  background: #f4f5f6;
  height: 100vh;
}

.container {
  background: #f4f5f6;
  box-sizing: border-box;
  padding: 30rpx;
}

.box_ {
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 30rpx;
}

.title_ {
  font-size: 28rpx;
  color: #101A3E;
  margin-bottom: 10px;
}

.x_ {
  width: 100%;
  height: 2rpx;
  background: #f4f5f6;
  margin: 30rpx 0rpx;
}

.h_ {
  font-size: 28rpx;
  color: #8D90A6;
}

.d_s {
  display: flex;
  align-items: center;
}

.j_ {
  width: 40rpx;
  height: 40rpx;
  background: #D9E0EC;
  display: flex;
  align-items: center;
  color: #fff;
  line-height: 40rpx;
  justify-content: center;
}

.d_b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 30rpx 0rpx;
  border-top: 2rpx solid #F5F6F9;
  font-size: 28rpx;
  color: #8D90A6;

}

.telnum {
  font-size: 24rpx;
  color: #366FFF;
}

.lan_ {
  font-size: 28rpx;
  color: #327DFB;
  display: flex;
  align-items: center;

  image {
    width: 36rpx;
    height: 36rpx;
    margin-left: 15rpx;
  }
}

.hui_box {
  width: 100%;
  background: #F5F6F9;
  border-radius: 16rpx;
  box-sizing: border-box;
  padding: 30rpx;
  display: flex;
  align-items: center;

  image {
    width: 90rpx;
    height: 90rpx;
    margin-right: 15rpx;
  }
}

.big_ {
  font-size: 28rpx;
  color: #101A3E;
}

.sm_ {
  font-size: 22rpx;
  color: #8D90A6;
}

.anniu {
  width: 622rpx;
  height: 78rpx;
  background: #427FFE;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-top: 200rpx;
}
</style>