yixing_zc_wx/pages/subPackages/repairprocessing-app/add.vue

<template>
  <div class="repair-box">
    <div class="repair-content fixed-page-content">
      <div class="white-box page-1">
        <div class="page-1-head" @click="goNavigator('repairprocessing-app')">
          <i class="iconfont icon-daichulihetong"></i>
          <span>处理记录</span>
        </div>
      </div>
      <div class="white-box page-2">
        <div class="custom-item-tit">
          <p class="tit">当前企业</p>
        </div>
        <div class="custom-white-box-content">
          <div class="custom-input-box">
            <input
              type="text"
              maxlength="50px"
              placeholder="请输入"
              v-model="companyName"
            />
          </div>
        </div>
        <div class="cell-item">
          <p class="label required">您是想</p>
          <div class="tit">
            <van-radio-group v-model="form.type">
              <van-radio name="1" checked-color="#976CEB">报事</van-radio>
              <van-radio name="2" checked-color="#976CEB">咨询</van-radio>
            </van-radio-group>
          </div>
        </div>
        <div class="block-cell-item">
          <p class="label">快捷选择</p>
          <div class="tit">
            <ul class="custom-select-list">
              <li
                v-for="item in quickList"
                v-if="item.value !== ''"
                :key="item.value"
                :class="{
                  active: quickSleced.value && item.value === quickSleced.value,
                }"
                @click="quickSelect(item)"
              >
                {{ item.label }}
              </li>
            </ul>
            <van-field
              v-model="form.description"
              rows="4"
              autosize
              type="textarea"
              maxlength="800"
              placeholder="输入文字进行报事报修描述"
              show-word-limit
            >
            </van-field>
          </div>
        </div>
      </div>
      <div class="white-box page-3">
        <div class="cell-item">
          <p class="label required">位置</p>
          <div class="tit">
            <van-radio-group v-model="form.position">
              <van-radio
                :name="item.val"
                checked-color="#976CEB"
                v-for="item in positionList"
                :key="item.val"
                @change="changePosition(item.val)"
                >{{ item.label }}</van-radio
              >
            </van-radio-group>
          </div>
        </div>
        <div class="block-cell-item">
          <p class="label">
            补充说明<span class="tips"
              >（支持图片/视频上传限20M内，最多6张）</span
            >
          </p>
          <div class="tit">
            <van-uploader
              :multiple="true"
              v-model="fileUrls"
              :max-count="6"
              :after-read="afterRead"
              :before-delete="beforeDelete"
            >
            </van-uploader>
          </div>
        </div>
        <div class="cell-item">
          <p class="label">报事人</p>
          <p class="tit">{{ form.userId }}</p>
        </div>
      </div>
    </div>
    <div class="repair-bottom bottom-button">
      <button class="btn" @click="submit">提交</button>
    </div>
  </div>
</template>
<script>
import Base from "@/pages/base/base";
import axios from "axios";
import { add } from "../../service/api_repair";
import { getCompanyById } from "@/service/api_road_show";
import { Toast } from "vant";
import auth from "@/service/auth";
export default {
  data() {
    return {
      dc_key: ["QUICK_SELECTION"],
      reportTypeSleced: "1",
      quickSleced: {},
      quickList: [
        // {
        //     value: '1',
        //     label: '挂件安装'
        // },
        // {
        //     value: '2',
        //     label: '我要投诉'
        // },
        // {
        //     value: '3',
        //     label: '疏通管道'
        // },
        // {
        //     value: '4',
        //     label: '维修线路'
        // },
        // {
        //     value: '5',
        //     label: '更换灯泡'
        // },
        // {
        //     value: '6',
        //     label: '网络维修'
        // },
        // {
        //     value: '7',
        //     label: '保洁服务'
        // },
        // {
        //     value: '8',
        //     label: '其它维修'
        // }
      ],
      positionSleced: "1",
      positionList: [
        {
          val: "1",
          label: "室内",
        },
        {
          val: "2",
          label: "公区",
        },
      ],
      fileUrlList: [],
      fileUrls: [],
      companyName: "",
      form: {
        groupId: "",
        companyId: "",
        type: "1",
        serviceType: "",
        description: "",
        position: "1",
        userId: auth.currUser().truename + "-" + auth.currUser().phone,
        fileUrl: "",
        status: "unAcceptance",
      },
    };
  },
  mixins: [Base],
  mounted() {
    this.initDict(this.dc_key).then((res) => {
      this.quickList = this.dc_data.QUICK_SELECTION;
    });
    getCompanyById({ id: auth.currUser().id, type: "2,3" }).then((res) => {
      this.form.companyId = res.data.id;
      this.companyName = res.data.businessName;
    });
  },
  methods: {
    /**
     *
     */
    quickSelect(item) {
      if (this.quickSleced.value && this.quickSleced.value === item.value) {
        this.quickSleced = {};
      } else {
        this.quickSleced = item;
      }
    },
    /**
     * 上传文件
     */
    afterRead(file) {
      if (file instanceof Array) {
        file.map((v) => {
          this.uploadImg(v);
        });
      } else {
        this.uploadImg(file);
      }
    },
    beforeDelete(file, detail) {
      // this.handleImagUrlList = []
      const vm = this;
      // name.index代表图片的索引
      vm.fileUrlList.splice(detail.index, 1);
      return (file, name) => {
        const fileIndex = name.index;
        vm.fileUrlList[detail.index].splice(fileIndex, 1);
      };
    },
    /**
     * 上传图片
     */
    uploadImg(file) {
      const _this = this;
      const formParam = new FormData(); // 创建form对象
      formParam.append("file", file.file); // 通过append向form对象添加数据
      console.log(formParam.get("file")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
      // upload(formParam).then((res) => {
      //
      // })
      const config = {
        headers: {
          "Content-Type": "multipart/form-data",
          "MVVM-Key": String(new Date().getTime()),
          xx: "anything",
        }, // 这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
      }; // 添加请求头
      return new Promise((resolve, reject) => {
        axios
          .post(
            "/smartParkH5Server/wx/fileController/upload",
            formParam,
            config
          )
          .then((response) => {
            let files = response.data.data.substring(
              1,
              response.data.data.length
            );
            files = files.substring(0, files.length - 1);
            _this.fileUrlList.push(_this.$common.castEval(files));
          })
          .catch((err, x) => {
            reject(err, x);
          });
      });
    },
    submit() {
      if (this.quickSleced.value == null || this.quickSleced.value === "") {
        Toast("请选择服务类型");
        return;
      }
      this.form.groupId = ""; // 园区
      this.form.fileUrl = JSON.stringify(this.fileUrlList);
      this.form.userId =
        auth.currUser().id +
        "-" +
        auth.currUser().truename +
        "-" +
        auth.currUser().phone;
      this.form.companyName = this.companyName;
      this.form.serviceType = this.quickSleced.value;
      this.form.createdBy = auth.currUser().id;
      add(this.form).then((res) => {
        Toast("填报成功");
        this.$router.push({
          path: "/repairprocessing-app",
        });
      });
    },
    changePosition(val) {},
  },
};
</script>
<style lang="scss" scoped>
.repair-box {
  width: 100%;
  height: 100%;
  .page-1 {
    font-size: 30px;
    color: var(--violetColor2);
    padding: 30px;
    box-sizing: border-box;
    .page-1-head {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      i {
        font-size: 38px;
        margin-right: 10px;
      }
    }
  }
  .page-2 {
    .van-cell {
      padding: 20px;
      border-radius: 10px;
      background: $page-color-base;
      box-sizing: border-box;
      textarea {
        height: 60px;
      }
    }
  }
}
</style>