epmet-apartment-work-mp/pagesA/xjPage/xj.vue

<!-- 报事上报 -->
<template>
  <scroll-view class="xj-page" scroll-y="true">
    <image src="/static/img/bsorbxBac.png" class="contentImg"></image>
    <view class="xjTitle">填写信息</view>
    <view class="xjTips">请您填写相关问题</view>
    <view class="conItem">
      <u-form labelPosition="left">
        <u-form-item
          labelAlign="right"
          labelWidth="100px"
          label="乐业社区"
          prop="sex"
          borderBottom
          @click="lysqShow = true"
          required
        >
          <u--input
            v-model="form.apartmentName"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择"
            border="none"
          ></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item
          labelAlign="right"
          labelWidth="100px"
          label="巡检问题类型"
          borderBottom
          @click="wtlxShow = true"
          required
        >
          <u--input
            v-model="form.questionName"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择"
            border="none"
          ></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item
          labelAlign="right"
          labelWidth="100px"
          label="标题内容"
          borderBottom
          required
        >
          <u--textarea
            v-model="form.title"
            placeholder="请输入内容"
            count
            maxlength="500"
          ></u--textarea>
        </u-form-item>

        <u-form-item
          labelAlign="right"
          labelWidth="100px"
          label="问题描述"
          borderBottom
          required
        >
          <u--textarea
            v-model="form.content"
            placeholder="请输入内容"
            count
            maxlength="500"
          ></u--textarea>
        </u-form-item>
        <u-form-item
          labelAlign="right"
          labelWidth="120px"
          label="上传图片/视频"
          borderBottom
        >
          <u-upload
            :max-count="10"
            :multiple="true"
            :preview-full-image="true"
            :deletable="true"
            :show-upload-list="true"
            :fileList="fileList"
            :auto-upload="false"
            accept="all"
            :maxSize="10 * 1024 * 1024"
            @oversize="oversize"
            @delete="onDelete"
            :disabled="true"
          >
            <view class="custom-upload-btn" @click.stop="chooseImage">
              <view class="icon-box">
                <image
                  class="camera-icon"
                  src="/static/img/camera-icon.png"
                  mode="aspectFill"
                ></image>
              </view>
              <view class="upload-tips">点击上传</view>
            </view>
          </u-upload>
        </u-form-item>
      </u-form>
    </view>

    <view class="conItem" style="margin-top: 40rpx">
      <u--form labelPosition="left">
        <u-form-item
          labelAlign="right"
          labelWidth="100px"
          label="巡检人姓名"
          borderBottom
          required
        >
          <u--input v-model="form.inspector" border="none"></u--input>
        </u-form-item>
        <u-form-item
          labelAlign="right"
          labelWidth="100px"
          label="巡检人电话"
          borderBottom
          required
        >
          <u--input v-model="form.inspectorPhone" border="none"></u--input>
        </u-form-item>
      </u--form>
    </view>

    <view class="btn" @click="handleBtn">提交</view>

    <u-action-sheet
      :show="lysqShow"
      :actions="apartmentList"
      title="请选择乐业社区"
      @close="lysqShow = false"
      @select="handleTreeSelect"
    >
    </u-action-sheet>
    <u-action-sheet
      :show="wtlxShow"
      :actions="questionTypeList"
      title="请选择问题类型"
      @close="wtlxShow = false"
      @select="handleQuestionSelect"
    >
    </u-action-sheet>
  </scroll-view>
</template>

<script>
import { queryDeptDropdownList } from "@/common/rec";
import { getdeptList, addInspection } from "@/common/api";
import { uploadImage } from "@/pages/api";
import { getDicts } from "@/common/system/dict/data";

export default {
  data() {
    return {
      wtlxShow: false,
      lysqShow: false,
      deptOptions: [],
      questionTypeList: [],
      form: {
        apartmentId: "",
        apartmentName: "",
        questionType: "",
        questionName: "",
        title: "",
        content: "",
        inspector: "",
        inspectorPhone: "",
        inspectionTime: "",
        imageList: [],
      },
      rules: {
        sex: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      radio: "",
      switchVal: false,
      fileList: [],
      apartmentList: [],
    };
  },
  onLoad() {
    this.getTree();
    this.getDictType();
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 10 - this.fileList.length,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: async (res) => {
          uni.showLoading({ title: "上传中...", mask: true });
          try {
            // 兼容微信小程序和H5
            const files =
              res.tempFiles || res.tempFilePaths.map((path) => ({ path }));
            for (let i = 0; i < files.length; i++) {
              const filePath = files[i].path;
              // 走上传接口
              const uploadRes = await uploadImage(filePath);
              // 兼容后端返回结构
              this.fileList.push({
                url: uploadRes.data?.url || uploadRes.url || uploadRes.path, // 兼容不同后端字段
                name: uploadRes.data?.name || uploadRes.name || "",
                type: uploadRes.data?.type || uploadRes.type || "image",
                status: "success",
              });
            }
            // 更新 form.imageList
            this.form.imageList = this.fileList.map((v) => ({
              name: v.name || "",
              format: v.type,
              url: v.url,
            }));
          } catch (e) {
            uni.showToast({ title: "上传失败", icon: "none" });
          } finally {
            uni.hideLoading();
          }
        },
        fail: () => {
          uni.hideLoading();
        },
      });
    },
    //图片超过大小时取消上传
    oversize(e) {
      this.$u.toast("请传10MB以内大小的图片/视频！");
      return false;
    },
    onDelete(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
      var arry = [];
      this.fileList.filter((v, i) => {
        arry.push({
          name: v.name || "",
          format: v.type,
          url: v.url,
        });
      });
      this.form.imageList = arry;
    },
    getDictType() {
      getDicts("inspection_question_type").then((res) => {
        this.questionTypeList = res.data.map((item) => {
          item.name = item.dictLabel;
          return item;
        });
      });
    },
    getTree() {
      getdeptList().then(async (res) => {
        this.deptOptions = this.handleTree(
          res.data,
          "deptId",
          "parentId",
          "children",
          2
        );
        console.log(this.deptOptions, "this.deptOptions");

        const deptInfo = this.deptOptions[0].children[0];
        const newArr = this.deptOptions.map((item) => ({
          name: item.deptName,
        }));
        this.apartmentList = newArr;
        // this.deptOptions = await this.getListByParentId("1", deptInfo.deptId);
        // console.log(this.deptOptions);
      });
    },
    // 三级联动通用接口
    async getListByParentId(type, id) {
      return new Promise((resolve, reject) => {
        queryDeptDropdownList({ type, id }).then((res) => {
          resolve(res.data);
        });
      });
    },
    handleBtn() {
      console.log(this.form);
      if (!this.form.apartmentId) {
        uni.showToast({
          icon: "none",
          title: "请选择乐业社区",
        });
        return;
      } else if (!this.form.questionType) {
        uni.showToast({
          icon: "none",
          title: "巡检问题类型",
        });
        return;
      } else if (!this.form.title) {
        uni.showToast({
          icon: "none",
          title: "请输入标题内容",
        });
        return;
      } else if (!this.form.content) {
        uni.showToast({
          icon: "none",
          title: "请输入问题描述",
        });
        return;
      } else if (!this.form.inspector) {
        uni.showToast({
          icon: "none",
          title: "请输入巡检人姓名",
        });
        return;
      } else if (!this.form.inspectorPhone) {
        uni.showToast({
          icon: "none",
          title: "请输入巡检人电话",
        });
        return;
      }
      // console.log(this.form);
      let parmas = JSON.parse(JSON.stringify(this.form));
      delete parmas.apartmentName;
      delete parmas.questionName;
      addInspection(parmas).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            icon: "success",
            title: "提交成功!",
            success: () => {
              this.fileList = [];
              this.form = {
                apartmentId: "",
                apartmentName: "",
                questionType: "",
                questionName: "",
                title: "",
                content: "",
                inspector: "",
                inspectorPhone: "",
                inspectionTime: "",
                imageList: [],
              };
              setTimeout(() => {
                uni.switchTab({
                  url: "/pages/tabBar/work/index",
                });
              }, 2000);
            },
          });
        } else {
          uni.showToast({
            title: res.msg || "提交失败",
            icon: "none",
          });
        }
      });
    },
    handleTreeSelect(e) {
      console.log(e);
      console.log(this.deptOptions);

      this.form.apartmentName = e.name;
      this.form.apartmentId = this.deptOptions.find(
        (item) => item.deptName === e.name
      ).deptId;
    },
    handleQuestionSelect(e) {
      this.form.questionName = e.dictLabel;
      this.form.questionType = e.dictValue;
    },
  },
};
</script>

<style lang="scss" scoped>
.xj-page {
  width: 100%;
  height: 100vh;
  padding-bottom: 50rpx;
  box-sizing: border-box;
}

.contentImg {
  position: absolute;
  left: 0rpx;
  top: 0rpx;
  width: 100%;
  height: 280rpx;
  z-index: -1;
}

.xjTitle {
  width: 100%;
  color: rgba(16, 16, 16, 1);
  font-size: 38rpx;
  font-weight: bold;
  margin-left: 30rpx;
  margin-top: 40rpx;
}

.xjTips {
  width: 100%;
  color: rgba(102, 102, 102, 1);
  font-size: 26rpx;
  margin-left: 30rpx;
  margin-top: 10rpx;
}

.conItem {
  width: calc(100% - 40rpx);
  border-radius: 10rpx;
  margin-left: 20rpx;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.2);
  margin-top: 20rpx;
  padding: 20rpx;
  box-sizing: border-box;
}

.btn {
  width: 414rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 600rpx;
  background: linear-gradient(
    86.25deg,
    rgba(13, 198, 198, 1) 3.03%,
    rgba(19, 194, 194, 1) 3.03%,
    rgba(70, 219, 213, 1) 96.43%
  );
  color: rgba(255, 255, 255, 1);
  font-size: 34rpx;
  text-align: center;
  margin: auto;
  margin-top: 40rpx;
}

.custom-upload-btn {
  width: 160rpx;
  height: 160rpx;
  background: #fafafa;
  border: 2rpx solid #f0f0f0;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20rpx 16rpx 0 0;
}
.icon-box {
  width: 60rpx;
  height: 60rpx;
  background: #ceeced;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.camera-icon {
  width: 36rpx;
  height: 36rpx;
}
.upload-tips {
  color: #bbb;
  font-size: 24rpx;
  margin-top: 8rpx;
}
.u-upload__wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 20rpx;
}
.u-upload__preview {
  border-radius: 16rpx;
  overflow: hidden;
  margin-right: 16rpx;
  margin-bottom: 16rpx;
}
</style>

<style lang="scss">
.xj-page {
  .u-form-item__body__left__content__required {
    font-size: 24rpx !important;
  }
}
</style>