settle_down_wx/pages/subPackages/modifyReport/add.vue

<template>
  <div class="addcompany">
    <div class="list">
      <div class="list-row" style="padding-top: 0">
        <div style="height: auto" class="width100">
          <div class="width100 mt24rpx padb24rpx border_bottom_ccc list_date">
            <div class="input_title float_left">
              <span style="color: red">*&nbsp;</span>安全检查类型
            </div>
            <div
              class="float_left width60 whitespacenowrap first_title height50rpx font28rpx"
              style="color: #777"
            >
              <picker
                :disabled="id != null"
                style="input_value float_left"
                @change="bindPickerChange"
                :value="form.testTypeIndex"
                :range="dic_SelectList.rectification_management_update_type"
                range-key="label"
              >
                {{
                  !dic_SelectList.rectification_management_update_type[
                    form.testTypeIndex
                  ].label
                    ? "未知类型"
                    : dic_SelectList.rectification_management_update_type[
                        form.testTypeIndex
                      ].label
                }}
              </picker>
            </div>
            <textarea
              :disabled="id != null"
              v-model="form.info"
              :maxlength="2000"
              placeholder="请输入"
              type="textarea"
              style="
                height: 200rpx;
                background: rgba(249, 249, 249, 1);
                padding: 20rpx;
                width: calc(100% - 40rpx);
              "
            />
            <div
              style="
                background: rgba(249, 249, 249, 1);
                text-align: right;
                padding-right: 10px;
                padding-bottom: 10rpx;
              "
            >
              {{ form.info.length ? form.info.length : 0 }}/2000
            </div>
          </div>
          <div
            class="width100 mt24rpx padb24rpx border_bottom_ccc list_date display_flex"
            style="display: flex"
          >
            <div class="input_title float_left">
              <span style="color: red">*&nbsp;</span>
              整改位置
            </div>
            <div
              @click="getAuth()"
              class="float_left width60 first_title font28rpx"
              style="color: #777; height: auto"
            >
              <div
                style="color: #777; height: auto; width: 80%"
                class="float_left input_value"
              >
                {{ form.updateAddress }}
              </div>
            </div>
          </div>

          <div
            class="width100 mt24rpx padb24rpx border_bottom_ccc list_date height40rpx"
          >
            <div class="input_title float_left">
              <span style="color: red">*</span>
              处理人
            </div>

            <view
              style="color: #777; color: #777; min-height: 40rpx; height: auto"
              class="input_value float_left"
            >
              <div @click="openPopup">
                {{ !form.finishUserName ? "请选择" : form.finishUserName }}
              </div>
              <!-- {{ !form.finishUserName ? "请选择" : form.finishUserName }} -->
            </view>
          </div>

          <div
            class="width100 mt24rpx padb24rpx border_bottom_ccc list_date height40rpx"
          >
            <div class="input_title float_left">要求完成日期</div>
            <div
              class="float_left width60 whitespacenowrap first_title height50rpx font28rpx"
              style="color: #777"
            >
              <picker
                :disabled="id != null"
                mode="date"
                @change="selectCarDate"
              >
                {{ form.needFinishTime ? form.needFinishTime : "请选择" }}
              </picker>
            </div>
          </div>

          <div class="width100 mt24rpx border_bottom_ccc list_date">
            <div class="input_title">整改处理前照片</div>
            <div style="margin-top: 24rpx">（支持图片上传10M内，最多6张）</div>
            <div
              class="custom-image-box"
              style="margin-top: 20rpx; margin-bottom: 36rpx"
            >
              <van-uploader
                :disabled="id != null"
                :max-count="6"
                @delete="deleteRYXXZP"
                :file-list="form.infoMorePictureUrlList"
                @after-read="uploadRYXXZP"
                :show-upload="true"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="save_button" @click="save()" v-if="id == null">保存</div>
      <div class="save_button" @click="getAuth()" v-if="id == null">
        重新获取当前整改位置
      </div>
    </div>
    <select-dengjiyuan
      ref="selectDengjiyuan"
      :multiple="false"
      :range="range"
      :selectParent="false"
      :foldAll="true"
      rangeKey="name"
      idKey="id"
      @selectDengjiyuan="selectDengjiyuan"
    />
    <uni-file-picker v-show="false" ref="files" :auto-upload="false" />
    <multiple-select
      v-model="show"
      :data="companyAllList"
      :default-selected="defaultSelected"
      @confirm="confirm"
    ></multiple-select>
    <van-popup
      position="bottom"
      closeable
      :show="finisherPopupStatus"
      @close="onClose"
      custom-style="height:1000rpx;"
    >
      <div style="margin-top: 70rpx">
        <van-tabs id="tabs" :active="active">
          <van-tab title="园区用户">
            <div>
              <input
                type="text"
                v-model="truename"
                @keydown.enter="userList()"
                @confirm="userList()"
                style="margin: 10rpx 15rpx"
                placeholder="请输入园区用户模糊查询"
              />
            </div>
            <div class="tabsbox">
              <div class="tabsbox-item" v-for="item in clrList">
                {{ item.text }}

                <div
                  @click="getFinishUserName(item.value, item.text, 1)"
                  :class="[
                    'people-select',
                    form.finishUser == item.value ? 'ischecked' : '',
                  ]"
                >
                  <div
                    :class="[
                      'select-point',
                      form.finishUser == item.value ? 'ischecked' : '',
                    ]"
                  ></div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="企业用户">
            <input
              type="text"
              v-model="qymc"
              @keydown.enter="findAllSimpleCompanies()"
              @confirm="findAllSimpleCompanies()"
              style="margin: 10rpx 15rpx"
              placeholder="请输入园区用户模糊查询"
            />
            <div class="tabsbox">
              <div class="tabsbox-item" v-for="item in companyUserList">
                <div style="width: 70%; overflow: hidden">{{ item.text }}</div>
                <div
                  @click="getFinishUserName(item.value, item.text, 2)"
                  :class="[
                    'people-select',
                    form.finishUser == item.value ? 'ischecked' : '',
                  ]"
                >
                  <div
                    :class="[
                      'select-point',
                      form.finishUser == item.value ? 'ischecked' : '',
                    ]"
                  ></div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </van-popup>
  </div>
</template>
          
      <script>
var QQMapWX = require("./txmap_sdk/qqmap-wx-jssdk");
var qqmapsdk;
const form = {
  infoMorePictureUrlList: [],
  testTypeIndex: 0,
  year: "2023",
  carDate: "2023-06-30",
  remark: "",
  checkInfo: "",
  info: "",
  updateAddressY: "",
  updateAddressX: "",
  updateAddress: "",
};
import multipleSelect from "../../subPackages/components/momo-multipleSelect/momo-multipleSelect";
import selectDengjiyuan from "../../subPackages/components/select_dengjiyuan/tkitree.vue";
import tools from "../../subPackages/components/tkitree/tools.js";
import {
  getSelectUserTwo,
  getSelectDeptTwo,
  getByCodes,
  getUserLocalStorageInfo,
  addRectificationManagement,
  findSafetySelfCheckingManagetById,
  findUserListByRoleWuye,
  findAllSimpleCompanies,
  userList,
} from "@/js_sdk/http";
export default {
  components: {
    multipleSelect,
    selectDengjiyuan,
  },
  data() {
    return {
      qymc: "",
      truename: "",
      clrList: [],
      id: null,
      active: 0,
      BASE_URI: this.$constant.BASE_URI,
      companyAllList: [],
      defaultSelected: [],
      companyUserList: [],
      show: false,
      bizhongIndex: 0,
      testList: [
        { label: "类型1", value: 1 },
        { label: "类型2", value: 2 },
        { label: "类型3", value: 3 },
        { label: "类型4", value: 4 },
        { label: "类型5", value: 5 },
        { label: "类型6", value: 6 },
        { label: "类型7", value: 7 },
        { label: "类型8", value: 8 },
      ],
      settleInTypeIndex: 0,
      range: [],
      zaitiList: [],
      imageStyles: {},
      listStyles: {},
      fileLists: [],
      activeNames: [],
      StatusBar: 0,
      dic_key: ["rectification_management_update_type"],
      dic_SelectList: {},
      search: {
        pageSize: 10,
        pageNum: 1,
      },
      form: { ...form },
      companyAllList: [],
      value: ["0"],
      modeIndex: -1,
      styleIndex: -1,
      current: 0,
      mode: "default",
      dotsStyles: {},
      swiperDotIndex: 0,
      finisherPopupStatus: false,
    };
  },
  onLoad(option) {
    this.getByCodes();
    this.id = option.id !== "null" ? option.id : null;

    this.form = null;
    this.isReport = option.isReport == 1 ? true : false;
    this.form = { ...form };
    this.form.infoMorePictureUrlList = [];
    this.form.createdBy = getUserLocalStorageInfo().user.id;
    // findUserListByRoleWuye()
    this.userList();
    qqmapsdk = new QQMapWX({
      key: "OJ7BZ-ULH6V-XBLPV-ULIMK-APS3H-QHFIP",
    });
    this.getCurrentLocal();
    this.findAllSimpleCompanies();
  },
  onShow() {},
  methods: {
    getFinishUserName(id, name, pushType) {
      this.form.finishUser = id;
      this.form.finishUserName = name;
      this.form.pushType = pushType;
      this.finisherPopupStatus = false;
    },
    async findAllSimpleCompanies() {
      let { data } = await findAllSimpleCompanies({
        pageSize: 5000,
        pageNum: 1,
        qymc: this.qymc,
      });
      console.log(data);
      this.companyUserList = data.rows;
    },
    onClose() {
      this.finisherPopupStatus = false;
    },
    openPopup() {
      this.finisherPopupStatus = true;
      setTimeout(() => {
        wx.nextTick(() => {
          this.selectComponent("#tabs").resize();
        });
      }, 300);
    },
    async userList() {
      let clrList = await userList({ truename: this.truename });
      this.clrList = clrList.map((e) => {
        return {
          value: e.id,
          text: e.truename,
        };
      });
      console.log("clrListclrListclrListclrList", clrList);
    },
    getAuth() {
      console.log(123123);
      let that = this;
      wx.getSetting({
        success(res) {
          // 查看所有权限
          let status = res.authSetting["scope.userLocation"]; // 查看位置权限的状态，此处为初次请求，所以值为undefined
          if (!status) {
            wx.openSetting({
              success: (res) => {
                if (res.authSetting["scope.userLocation"]) {
                  // 授权成功，重新定位
                  wx.getLocation({
                    success: (res) => {
                      that.getCurrentLocal();
                    },
                  });
                } else {
                  // 没有允许定位权限
                  wx.showToast({
                    title: "您拒绝了定位权限，将无法使用XX功能",
                    icon: "none",
                  });
                }
              },
            });
          }
        },
      });
    },
    selectDengjiyuan(e) {
      this.form.finishUserName = e[e.length - 1].name;
      this.form.finishUser = e[e.length - 1].id;
      this.$forceUpdate();
    },
    async getSelectUserTwo(key) {
      let that = this;
      let departmentList = await getSelectUserTwo("");
      that.range = tools.transData(
        departmentList.data,
        "id",
        "parentid",
        "children"
      );
      console.log(key);
      that.$refs[key]._show();
    },
    getCurrentLocal() {
      let that = this;
      qqmapsdk.reverseGeocoder({
        success(res) {
          that.form.updateAddressX = res.result.location.lng;
          that.form.updateAddressY = res.result.location.lat;
          that.form.updateAddress =
            res.result.formatted_addresses.standard_address;
        },
        fail(e) {
          console.log(e);
          if (e.status == 1000) {
            that.$showToast(
              "请打开手机定位，并点击下方重新获取当前整改位置按钮"
            );
          }
        },
      });
    },

    async findSafetySelfCheckingManagetById() {
      let that = this;
      if (that.id != null) {
        let detail = await findSafetySelfCheckingManagetById(that.id);

        that.form = detail;
        let index =
          that.dic_SelectList.rectification_management_update_type.findIndex(
            (e) => e.value == detail.type
          );
        if (index != -1) {
          that.form.testTypeIndex = index;
          that.form.updateType =
            that.rectification_management_update_type[index].value;
        }
        console.log(JSON.parse(detail.infoMorePictureUrlList));
        that.form.infoMorePictureUrlList = JSON.parse(
          detail.infoMorePictureUrlList
        );
      }
    },
    selectYear(event) {
      this.form.attributiveYear = event.detail.value;
      this.$forceUpdate();
    },
    selectCarDate(event) {
      this.form.needFinishTime = event.detail.value;
      this.$forceUpdate();
    },
    bindPickerChange: function (e) {
      console.log("picker发送选择改变，携带值为", e.detail);
      this.form.testTypeIndex = e.detail.value;
      this.form.updateType =
        this.dic_SelectList.rectification_management_update_type[
          e.detail.value
        ].value;
    },
    uploadRYXXZP(event) {
      let that = this;
      const { file } = event.detail;
      uni.uploadFile({
        url: that.$constant.BASE_URI + "/wx/fileController/upload",
        filePath: file.url,
        name: "file",
        formData: { user: "test" },
        success(res) {
          // 上传完成需要更新 fileList
          let data = JSON.parse(res.data);
          that.form.infoMorePictureUrlList.push({
            imgUrl: "/FileController/download/" + data.data[0],
            id: data.data[0],
            url:
              that.$constant.BASE_URI +
              "/FileController/download/" +
              data.data[0],
            isImage: true,
          });
        },
        fail(res) {},
      });
    },
    confirm(e) {
      var associationCompanyString = [];
      var associationCompany = [];
      for (var p in e) {
        associationCompanyString.push(e[p].label);
        associationCompany.push(e[p].value);
      }

      this.form.associationCompanyString = associationCompanyString.join(",");
      this.form.associationCompany = associationCompany.join(",");
    },
    deleteRYXXZP(event) {
      this.form.infoMorePictureUrlList.splice(event.detail.index, 1);
      this.$forceUpdate();
    },
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dic_key));
      this.dic_SelectList = this.$common.handleDicList(data);
      this.form.updateType =
        this.dic_SelectList.rectification_management_update_type[0].value;
      this.findSafetySelfCheckingManagetById();
      //   console.log(this.form.updateType);
    },

    // /wx/SaleController/findRoomInfoListByIds
    async findRoomInfoListByIds() {
      let data = await findRoomInfoListByIds(ids);
      return data;
    },

    async getSelectDeptTwo(key) {
      let that = this;
      let departmentList = await getSelectDeptTwo("");
      that.range = tools.transData(
        departmentList.data,
        "id",
        "parentid",
        "children"
      );
      that.$refs[key]._show();
    },
    binddata() {},
    submit() {},
    async save() {
      let that = this;
      if (!that.form.finishUser || that.form.finishUser.length == 0) {
        that.$showToast("请选择处理人");
        return;
      }
      if (!that.form.info || that.form.finishUser.length == 0) {
        that.$showToast("请填写安全检查详情");
        return;
      }
      if (!that.form.updateAddress || that.form.updateAddress.length == 0) {
        that.$showToast(
          "未获取整改位置，请点击下方“重新获取当前整改位置”，确认权限后重试"
        );
        return;
      }
      //   let infoMorePictureUrlList = JSON.stringify(that.form.infoMorePictureUrlList);
      let infoMorePictureUrl;
      if (that.form.infoMorePictureUrlList.length > 0) {
        let infoMorePictureUrlString = that.form.infoMorePictureUrlList.map(
          (e) => {
            return e.id;
          }
        );
        infoMorePictureUrl = infoMorePictureUrlString.toString();
      } else {
        infoMorePictureUrl = "";
      }
      let form = { ...this.form };
      form.finishType = this.isReport == 1 ? "2" : "1";
      form.infoMorePictureUrl = infoMorePictureUrl;
      form.openUser = getUserLocalStorageInfo().user.id;
      let data = await addRectificationManagement(form);
      if (data.code == 200) {
        this.$showToast("新增成功");
        uni.navigateBack({});
      } else {
        this.$showToast(res.msg);
      }
    },
    chossseFile() {
      this.$refs.files.upload();
    },
    onChange(event) {
      this.activeNames = event.detail;
    },
  },
};
</script>   
      <style scoped lang="scss" scpoed>
.people-select {
  height: 30rpx;
  width: 30rpx;
  border-radius: 50%;
  border: 5rpx solid #cccc;
  text-align: center;
  line-height: 50rpx;
  align-items: center;
  display: flex;
  justify-content: center;
  .select-point {
    height: 15rpx;
    width: 15rpx;
    background: #cccc;
    border-radius: 50%;
  }
}
.ischecked {
  background: rgb(7, 193, 96);
  border: 5rpx solid rgb(7, 193, 96);
}
.save_button {
  width: calc(100% - 64rpx);
  margin: 64rpx 32rpx 0 32rpx;
  background: #1d18bc;
  border-radius: 50rpx;
  height: 88rpx;
  color: white;
  text-align: center;
  line-height: 88rpx;
}
.tabsbox {
  height: 680rpx;
  overflow-y: auto;
  padding: 10rpx;
  .tabsbox-item {
    margin: 5rpx;

    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.form {
  width: calc(100% - 64rpx);
  background: #ffffff;
  padding: 32rpx;
  margin-top: 64rpx;
  .label {
    height: 53rpx;
    line-height: 53rpx;
  }
}
.form_row {
  height: 40rpx;
  font-weight: 400;
  font-size: 24rpx;
}
.zaiti_list {
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
}
.idclass {
  width: 147rpx;
  height: 100rpx;
}
.dengjibutton {
  margin-top: 24rpx;
  margin-left: 60rpx;
  margin-right: 60rpx;
  width: calc(100% - 120rpx);
  height: 60rpx;
  text-align: center;
  background: #1d18bc;
  color: white;
  line-height: 60rpx;
}
.addcompany {
  margin-bottom: 200rpx;
}
.addcompany {
  .detailstitle {
    height: 42rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #333333;
    padding-bottom: 16rpx;
  }
  .typestitle {
    height: 42rpx;
    font-size: 24rpx;
    font-weight: 500;
    padding-bottom: 16rpx;
    margin-bottom: 16rpx;
  }
}
</style>
       <style lang="scss">
::v-deep .is-open + .uni-collapse-item__wrap {
  height: auto !important;
}
::v-deep .uni-collapse-item__wrap-content {
  height: auto !important;
}
.addcompany {
  .uni-select {
    border: none !important;
    height: 40rpx !important;
  }
}
.pageconfig {
  background: #ffffff;
  padding: 32rpx;
}
.input_title {
  width: 40%;
  font-size: 28rpx;
  height: 40rpx;
  line-height: 40rpx;
  color: #333333;
}
.input_value {
  width: 60%;
  font-size: 28rpx;
  height: 40rpx;
  line-height: 40rpx;
  color: #777777;
}
.uni-collapse-item__title-box {
  padding: 0 !important;
}
.uni-collapse-item__title-text {
  color: #1d18bc !important;
  font-size: 32rpx !important;
}
</style>
    <style lang="scss">
.example-body {
  padding: 10px;
  padding-top: 0;
}

.custom-image-box {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
  color: #333;
}
.uni-file-picker__item {
  display: none;
}
.uploadbutton {
  width: 162rpx;
  height: 44rpx;
}
</style>