HSW_WX/pages/subPackages/repairDispatch-app/add.vue

<template>
  <div class="repair-box-add">
    <div class="repair-content fixed-page-content">
      <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="50" placeholder="请输入" v-model="form.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" custom-class="youwill"
                >报事</van-radio
              >
              <van-radio name="2" checked-color="#976CEB" custom-class="youwill"
                >咨询</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 dic_SelectList.QUICK_SELECTION" v-if="item.value !== ''" :key="item.value" :class="{
                active: quickSleced.value && item.value === quickSleced.value,
              }" @click="quickSelect(item)">
                {{ item.label }}
              </li>
            </ul>

            <uni-easyinput type="textarea" autoHeight v-model="form.description" maxlength="800"
              class="bgcF9F9F9 height218rpx" placeholder="请输入" />
          </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" :file-list="fileUrlList" @delete="deletefileUrlList"  :max-count="6" @after-read="afterRead"
              @before-delete="beforeDelete" :show-upload="true">
            </van-uploader>
          </div>
        </div>
        <div class="cell-item">
          <span class="label">联系方式</span>
          <span class="tit" style="position: relative">
            <input type="text" placeholder="请输入联系方式" v-model="form.contact" />
          </span>
        </div>
        <div class="cell-item">
          <p class="label">上报人</p>
          <p class="tit">{{ form.userId }}</p>
        </div>
        <div class="cell-item flex-item" style="width: 100%; min-height: 88rpx; padding: 0" @click="openPicker()">
          <div class="label">处理人</div>
          <div class="tit">
            {{ form.handleUserName != null ? form.handleUserName : "" }}
            <!-- {{ detail.handleUserName == null }} -->
          </div>
        </div>
        <div class="custom-item-tit">
          <!-- <p class="tit">备注</p> -->
          <span class="tit">
            <div > 备注</div>

          </span>
        </div>
        <div class="custom-textarea-box" style="padding-bottom: 15rpx">
          <uni-easyinput type="textarea" class="bgcF9F9F9 height218rpx" v-model="form.remark" autoHeight
                         placeholder="请填写" show-word-limit >
          </uni-easyinput>
        </div>
      </div>

    </div>
    <van-popup :show="showPicker" position="bottom" round :closeable="false" :close-on-click-overlay="false">
      <div style="display: flex; justify-content: space-between">
        <div style="margin: 32rpx" @click="closePopup()">取消</div>
        <div style="margin: 32rpx" @click="getSelectValue()">确认</div>
      </div>
      <uni-easyinput v-model="name" placeholder="请输入内容" @confirm="getName" @iconClick="getName"
        suffixIcon="search"></uni-easyinput>

      <div style="height: 50vh">
        <div class="list-row1" v-for="(item, index) in columns" :key="index" style="justify-content: space-between">
          {{ item.text }}
          <van-checkbox :name="item.value" @change="onChange($event, index)" v-model="item.checked">
          </van-checkbox>
        </div>
      </div>
    </van-popup>
    <div class="repair-bottom bottom-button">
      <button class="btn" @click="submit()">提交</button>
    </div>
  </div>
</template>
<script>
// "van-radio": "/wxcomponents/weapp/dist/radio/index",
// "van-radio-group": "/wxcomponents/weapp/dist/radio-group/index",
import vanRadio from "../../../wxcomponents/weapp/dist/radio/index";
import vanRadioGroup from "../../../wxcomponents/weapp/dist/radio-group/index";

import {
  getCompanyById,
  addRepair,
  getByCodes,
  getUserLocalStorageInfo, getDispatchToPerson
} from "@/js_sdk/http";
export default {
  components: {
    vanRadio,
    vanRadioGroup,
  },
  data() {
    return {
      name: '',
      dic_SelectList: {},
      dic_key: ["QUICK_SELECTION"],
      reportTypeSleced: "1",
      quickSleced: {},
      quickList: [],
      positionSleced: "1",
      showPicker: false,
      positionList: [
        {
          val: "1",
          label: "室内",
        },
        {
          val: "2",
          label: "公区",
        },
      ],
      fileUrlList: [],
      fileUrls: [],
      form: {
        groupId: "",
        companyId: "",
        companyName: "",
        type: "1",
        serviceType: "",
        description: "",
        position: "1",

        fileUrl: "",
        status: "unAcceptance",
      },
      handleUserNames: "",
      handleUserIds: "",
      columns: [],
    };
  },
  onLoad() {
    this.getByCodes(this.dic_SelectList);
    this.form.userId =
      getUserLocalStorageInfo().user.truename +
      "-" +
      getUserLocalStorageInfo().user.phone;
    getDispatchToPerson({ groupId: "", name: "" }).then((res) => {
      this.columns = res.data;
    });
  },
  methods: {
    closePopup() {
      this.showPicker = false;
    },
    getSelectValue() {
      let handleUserNames = [];
      let handleUserIds = [];
      for (let i = 0; i < this.columns.length; i++) {
        const element = this.columns[i];
        if (element.checked) {
          handleUserNames.push(element.text);
          handleUserIds.push(element.value);
        }
      }
      console.log(this.handleUserNames.split(","));
      let AllHandleUserNames = Array.from(
        new Set(
          handleUserNames.concat(
            this.handleUserNames.length > 0
              ? this.handleUserNames.split(",")
              : []
          )
        )
      );
      console.log(AllHandleUserNames);
      let AllHandleUserIds = Array.from(
        new Set(
          handleUserIds.concat(
            this.handleUserIds.length > 0 ? this.handleUserIds.split(",") : []
          )
        )
      );
      this.form.handleUserName = AllHandleUserNames.toString();
      this.form.handleUserId = AllHandleUserIds.toString();
      console.log(this.columns);
      this.$forceUpdate();
      this.showPicker = false;
    },
    onChange(event, i) {
      console.log(event);
      console.log(i);
      this.columns[i].checked = event.detail;
    },
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dic_key));
      this.dic_SelectList = this.$common.handleDicList(data);
    },
    /**
     *
     */
    quickSelect(item) {
      if (this.quickSleced.value && this.quickSleced.value === item.value) {
        this.quickSleced = {};
        console.log(123);
      } else {
        console.log(item);
        this.quickSleced = item;
        this.form.description = "";
        this.form.description = this.form.description + item.label;
      }
    },
    /**
     * 上传文件
     */
    // 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);
      };
    },
    /**
     * 上传图片
     */
    openPicker() {
      this.showPicker = true;
    },
    deletefileUrlList(event){
    //   fileUrlList
      this.fileUrlList.splice(event.detail.index, 1);

    },
    closePicker() {
      this.showPicker = false;
    },
    getName() {
      console.log(123, this.name);
      let that = this;
      getDispatchToPerson({ name: this.name, groupId: "" }).then((res) => {
        that.columns = res.data;
        that.$forceUpdate();
      });
    },
    afterRead(event) {
      let that = this;
      const { file } = event.detail;
      console.log(file);
      uni.uploadFile({
        url: that.$constant.BASE_URI + "/wx/fileController/upload",
        filePath: file[0].url,
        name: "file",
        formData: { user: "test" },
        success(res) {
          let { data } = JSON.parse(res.data);
          console.log(data[0]);

          that.fileUrlList.push({
            id: data[0],
            url:
              that.$constant.BASE_URI + "/FileController/download/" + data[0],
            isImage: true,
          });
          that.fileUrlList = [...that.fileUrlList];
          that.$forceUpdate();
          console.log(that.fileUrlList);
        },
        fail(res) { },
      });
    },
    submit() {
      let that = this;
      if(!that.form.handleUserName||that.form.handleUserName.length==0){
        this.$showToast("请选择处理人");
        return;
      }
      if (that.quickSleced.value == null || that.quickSleced.value === "") {
        this.$showToast("请选择服务类型");
        return;
      }
      if (!that.form.contact || that.form.contact.length == 0) {
        this.$showToast("请输入联系方式");
        return;
      }
      let localStorageInfo = getUserLocalStorageInfo().user;
      that.form.groupId = "870261874875170816"; // 园区
      //   that.form.fileUrl = JSON.stringify(that.fileUrlList);
      let fileUrlList = "";
      if (that.fileUrlList && that.fileUrlList.length > 0) {
        fileUrlList = that.fileUrlList.map((e) => {
          return e.id;
        });
      }

      that.form.fileUrl = fileUrlList ? fileUrlList.join(",") : [];
      that.form.userId = localStorageInfo.id
      that.form.serviceType = this.quickSleced.value;
      that.form.createdBy = localStorageInfo.id;
      addRepair(that.form).then((res) => {
        that.$showToast("填报成功");
        uni.navigateBack({});
        // this.$router.push({
        //   path: "/repairDispatch-app",
        // });
      });
    },
    changePosition(val) { },
  },
};
</script>
<style lang="scss" scoped>
// .youwill {
//   width: 50%;
//   float: left;
// }
.list-row1 {
  width: calc(100% - 64rpx);
  padding: 16rpx 32rpx 18rpx 32rpx;
  background: #ffffff;
  display: flex;
  //height: 278rpx;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
}

.custom-item-tit {
  height: 13.333vw;
  font-size: 4.267vw;
  color: #333;
  padding: 2.667vw 0;
  position: relative;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  box-sizing: border-box;

  .tit {
    padding-left: 2.667vw;
    position: relative;

    &::after {
      content: "";
      width: 0.8vw;
      height: 90%;
      background-color: #976dec;
      border-radius: 0.4vw;
      position: absolute;
      left: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
    }
  }
}

.fixed-page-content {
  width: 100%;
  height: 100%;
  padding-bottom: 190px;
  box-sizing: border-box;
  overflow-y: auto;
}

.icon-daichulihetong:before {
  content: "\e639";
}

.repair-box-add {
  width: 100%;
  height: 100%;

  .page-1 {
    font-size: 30rpx;
    color: #6600ff;
    padding: 30rpx;
    box-sizing: border-box;

    .page-1-head {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      i {
        font-size: 38rpx;
        margin-right: 10rpx;
      }
    }
  }

  .page-2 {
    .van-cell {
      padding: 20rpx;
      border-radius: 10rpx;
      background: $page-color-base;
      box-sizing: border-box;

      textarea {
        height: 60rpx;
      }
    }
  }
}

.custom-input-box {
  height: 80rpx;
  color: $text3;
  font-size: 30rpx;
  background: $home-bg-color;
  border-radius: 10rpx;

  .txt {
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 0 20rpx;
    line-height: 80rpx;
    box-sizing: border-box;
  }

  input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: transparent;
    padding: 0 20rpx;
    color: $text3;
    box-sizing: border-box;
  }
}

.cell-item {
  color: #333;
  padding: 30rpx 0;
  display: flex;
  justify-content: space-between;
  position: relative;

  &::after {
    position: absolute;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
    right: 0;
    bottom: 0;
    left: 0;
    border-bottom: 1rpx solid #ebedf0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  .label {
    flex: 1;
    width: 30%;

    .tips {
      font-size: 22rpx;
      color: #dddddd;
    }

    &.required {
      position: relative;

      &::after {
        content: "*";
        color: #fd4e4e;
        position: absolute;
        font-size: 30rpx;
        top: -15rpx;
        left: -15rpx;
      }
    }
  }

  .tit {
    color: #333;
    flex: 1;
    width: 70%;
    text-align: right;
  }
}

.white-box {
  width: 100%;
  font-size: 28rpx;
  padding: 0 40rpx;
  background-color: #ffffff;
  box-sizing: border-box;

  &:not(:last-child) {
    margin-bottom: 30rpx;
  }

  .flex-item {
    align-items: center;

    .tel-box {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .custom-tel-component {
        margin-left: 20rpx;
      }
    }
  }

  .cell-item {
    color: #333;
    padding: 30rpx 0;
    display: flex;
    justify-content: space-between;
    position: relative;

    &::after {
      position: absolute;
      box-sizing: border-box;
      content: " ";
      pointer-events: none;
      right: 0;
      bottom: 0;
      left: 0;
      border-bottom: 1rpx solid #ebedf0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }

    .label {
      flex: 1;
      width: 30%;

      .tips {
        font-size: 22rpx;
        color: #dddddd;
      }

      &.required {
        position: relative;

        &::after {
          content: "*";
          color: var#fd4e4e;
          position: absolute;
          font-size: 30rpx;
          top: -15rpx;
          left: -15rpx;
        }
      }
    }

    .tit {
      color: #333;
      flex: 1;
      width: 70%;
      text-align: right;
    }
  }

  .block-cell-item {
    color: #333;
    padding: 30rpx 0;
    position: relative;

    &::after {
      position: absolute;
      box-sizing: border-box;
      content: " ";
      pointer-events: none;
      right: 16rpx;
      bottom: 0;
      left: 16rpx;
      border-bottom: 1rpx solid #ebedf0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }

    .label {
      width: 100%;
      padding-bottom: 30rpx;

      &.required {
        position: relative;

        &::after {
          content: "*";
          color: #fd4e4e;
          position: absolute;
          font-size: 30rpx;
          top: -15rpx;
          left: -15rpx;
        }
      }

      .tips {
        font-size: 22rpx;
        color: #dddddd;
      }
    }

    .tit {
      width: 100%;
      color: #333;

      .textarea {
        background-color: #f8f8f8;
        font-size: 30rpx;
        color: #b7b7b7;
        border-radius: 10rpx;
        padding: 30rpx;
        word-break: break-all;
      }
    }
  }

  .custom-white-box-content {
    padding-bottom: 30rpx;
  }
}

.custom-select-list {
  color: $color4;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  li {
    font-size: 22rpx;
    margin-bottom: 25rpx;
    padding: 20rpx 0;
    width: 22%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 10rpx;
    border: 2rpx solid $text4;

    &.active {
      color: $text6;
      border-color: $text6;
    }
  }
}

.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 160rpx;
  padding: 35rpx 30rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  .btn {
    height: 100%;
    line-height: 80rpx;
    width: 100%;
    color: #fff;
    background-color: #6600ff;
    font-size: 34rpx;
    border-radius: 10rpx;
  }
}
</style>


<style lang="scss">
.repair-box-add {
  .van-radio-group {
    display: flex;

    .van-radio {
      width: 100%;
      padding-left: 30rpx;
    }

    .van-radio__label {}
  }
}
</style>