yixing_zc_wx/pages/subPackages/visits_task/add.vue

<template>
  <div class="asset_add">
    <div class="form gaisideshurukuang">
      <uni-forms
        ref="baseForm"
        style="font-size: 26rpx"
        :modelValue="form"
        label-width="170rpx"
      >
        <uni-forms-item
          label="走访时间："
          class="mt42rpx pd42rpx border_bottom_ccc"
        >
          <div style="line-height: 73rpx">自动带出</div>
        </uni-forms-item>
        <uni-forms-item
          label="走访人："
          class="mt42rpx pd42rpx border_bottom_ccc"
        >
          <div style="line-height: 73rpx">自动带出</div>
        </uni-forms-item>
        <uni-forms-item
          label="资产名称"
          class="mt42rpx pd42rpx border_bottom_ccc"
        >
          <div style="line-height: 73rpx">自动带出</div>
        </uni-forms-item>
        <uni-forms-item
          label="走访类型："
          class="mt42rpx pd42rpx border_bottom_ccc"
        >
          <uni-data-checkbox
            selectedColor="#1d18bc"
            selectedTextColor="#1d18bc"
            multiple
            v-model="value"
            :localdata="range"
            @change="change"
          ></uni-data-checkbox>
        </uni-forms-item>
        <uni-forms-item
          label="资产名称"
          class="mt42rpx pd42rpx border_bottom_ccc"
        >
          <div style="line-height: 73rpx">
            <uni-data-select
              v-model="value"
              :localdata="range1"
              @change="change"
            ></uni-data-select>
          </div>
        </uni-forms-item>
        <uni-forms-item
          label="当前位置"
          class="mt42rpx pd42rpx border_bottom_ccc"
        >
          <div style="margin: 10rpx 0">
            {{ form.updateAddress ? form.updateAddress : "未知位置" }}
          </div>
        </uni-forms-item>
        <uni-forms-item
          label="任务说明"
          class="mt42rpx pd42rpx border_bottom_ccc"
        >
          <uni-easyinput
            type="textarea"
            autoHeight
            v-model="value"
            placeholder="请输入内容"
          ></uni-easyinput>
        </uni-forms-item>
      </uni-forms>
    </div>

    <div class="form">
      <van-row>
        <van-col :span="24"> 走访记录 </van-col>
        <van-col :span="24">
          <div class="margint16rpx">
            <uni-easyinput type="textarea" inputBorder placeholder="请输入" />
          </div>
        </van-col>
      </van-row>

      <div class="width100 mt24rpx border_bottom_ccc list_date">
        <div>现场照片</div>
        <div style="margin-top: 24rpx">（支持图片上传10M内，最多6张）</div>
        <div
          class="custom-image-box"
          style="margin-top: 20rpx; margin-bottom: 36rpx"
        >
          <van-uploader
            :max-count="6"
            :file-list="form.infoMorePictureUrlList"
            @after-read="uploadRYXXZP"
            :show-upload="true"
          />
        </div>
      </div>
    </div>
    <div class="save_button" @click="save()">提交</div>
    <div class="save_button" @click="getAuth()" style="margin-bottom: 20rpx">
      重新获取当前整改位置
    </div>
    <van-popup :show="show" bind:close="onClose" round position="bottom">
      <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="companyName"
        placeholder="请输入内容"
      ></uni-easyinput>
      <picker-view
        indicator-style="height: 50px;"
        style="width: 100%; height: 300px"
        @change="getRowValue"
        :value="value"
      >
        <picker-view-column>
          <view
            v-for="(item, index) in filtedCompanyAllList()"
            :key="index"
            style="line-height: 50px; text-align: center"
            >{{ item.label }}</view
          >
        </picker-view-column>
      </picker-view>
    </van-popup>
    <!-- <view class="btn-view">
      <div class="btn" @click="getAuth()">重新获取当前整改位置</div>
      <button
        class="btn"
        @click="takeParamsGoBack(1)"
        style="margin-left: 10rpx"
      >
        添加
      </button>
    </view> -->
  </div>
</template>
  
    <script>
var QQMapWX = require("./txmap_sdk/qqmap-wx-jssdk");
var qqmapsdk;
import {
  getByCodes,
  addInterview,
  getBySaveStatus,
  editInterview,
  getCompanyAll,
} from "@/js_sdk/http.js";
import vanRow from "../../../wxcomponents/weapp/dist/row";
import vanCol from "../../../wxcomponents/weapp/dist/col";

// import { findYuanQuList } from "@/js_sdk/http.js";
const form = {
  id: null,
  isStatus: null,
  interviewTime: null,
  interviewType: null,
  interviewTypeIndex: null,
  companyId: null,
  companyIndex: null,
  projectType: "",
  interviewRecord: "",
  associationCompanyString: [],
  infoMorePictureUrlList: [],
};
export default {
  components: {
    vanRow,
    vanCol,
  },
  data() {
    return {
      range1: [
        { value: 0, text: "篮球" },
        { value: 1, text: "足球" },
        { value: 2, text: "游泳" },
      ],
      range: [
        { value: 0, text: "数据采集更新" },
        { value: 1, text: "预警排查" },
        { value: 2, text: "常规走访" },
      ],
      companyName: "",
      value: 0,
      isSelectedIndex: null,
      isStatus: 2,

      defaultSelected: [],
      dic_key: ["interviewType"],
      dic_SelectList: {},
      companyIndex: null,
      companyAllList: [],
      show: false,
      active: 0,
      form: { ...form },
      index: 0,
      BASE_URI: this.$constant.BASE_URI,
    };
  },
  computed: {},
  mounted() {
    this.getCompanyAll();
    this.getByCodes();
    qqmapsdk = new QQMapWX({
      key: "OJ7BZ-ULH6V-XBLPV-ULIMK-APS3H-QHFIP",
    });
    this.getCurrentLocal();
  },
  methods: {
    getCurrentLocal() {
      let that = this;
      qqmapsdk.reverseGeocoder({
        success(res) {
          console.log(res.result.formatted_addresses.standard_address);
          that.form.updateAddressX = res.result.location.lng;
          that.form.updateAddressY = res.result.location.lat;
          that.form.updateAddress =
            res.result.formatted_addresses.standard_address;
          that.$forceUpdate();
        },
        fail(e) {
          console.log(e);
          if (e.status == 1000) {
            that.$showToast(
              "请打开手机定位，并点击下方重新获取当前整改位置按钮"
            );
          }
        },
      });
    },
    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",
                  });
                }
              },
            });
          }
        },
      });
    },
    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) {},
      });
    },
    closePopup() {
      this.show = false;
      this.form.companyIndex = null;
      this.form.companyId = null;
    },
    filtedCompanyAllList() {
      let companyAllList;
      if (this.companyName && this.companyName.length > 0) {
        companyAllList = this.companyAllList.filter((e) =>
          e.label.includes(this.companyName)
        );
        if (companyAllList.length > 0 && companyAllList[0].value) {
          let index = this.companyAllList.findIndex(
            (e) => e.value == companyAllList[0].value
          );
          this.form.companyIndex = index;
          this.form.companyId =
            this.companyAllList[this.form.companyIndex].value;
        } else {
          this.form.companyIndex = null;
          this.form.companyId = null;
        }
      } else {
        companyAllList = this.companyAllList;
      }
      console.log(companyAllList);
      return companyAllList;
    },
    getRowValue(e) {
      this.isSelectedIndex = e.detail.value[0];
    },
    getSelectValue() {
      console.log(this.value);
      if (this.isSelectedIndex == null) {
        this.form.companyIndex = 0;
        this.form.companyId = this.companyAllList[0].value;
      } else {
        this.form.companyIndex = this.isSelectedIndex;
        this.form.companyId = this.companyAllList[this.form.companyIndex].value;
      }
      this.$forceUpdate();
      this.show = false;
    },
    changeLog(e) {},
    async getBySaveStatus() {
      const token = uni.getStorageSync("laocui_user_info");
      let data = await getBySaveStatus(JSON.parse(token).user.id);
      this.form.id = data.id ? data.id : null;
      this.form.isStatus = Number(data.isStatus);
      this.form.interviewTime = data.interviewTime ? data.interviewTime : "";
      this.form.interviewRecord = data.interviewRecord
        ? data.interviewRecord
        : "";
      if (
        data.id &&
        data.interviewType != null &&
        data.interviewType != "null"
      ) {
        this.getInterviewLableByApiList(data);
      }
      if (data.id && data.companyId != null) {
        this.getCompanyIdByApiList(data);
      }
    },
    getCompanyIdByApiList(params) {
      this.form.companyId = params.companyId;
      console.log(
        "this.companyAllListthis.companyAllListthis.companyAllList",
        this.companyAllList
      );
      let companyIndex = this.companyAllList.findIndex(
        (e) => e.value == params.companyId
      );
      this.form.companyIndex = companyIndex;
    },
    getInterviewLableByApiList(params) {
      let interviewTypeIndex = this.dic_SelectList.interviewType.findIndex(
        (e) => e.value == params.interviewType
      );
      this.form.interviewType =
        this.dic_SelectList.interviewType[interviewTypeIndex].value;
      this.form.interviewTypeIndex = interviewTypeIndex;
    },
    getInterviewTime(e) {
      this.form.interviewTime = e.detail.value;
    },
    async takeParamsGoBack(e) {
      const token = uni.getStorageSync("laocui_user_info");
      let data;
      if (e == 1) {
        if (this.form.companyId == null) {
          return this.$showToast("请选择走访公司");
        }
        if (this.form.interviewTime == null || this.form.interviewTime == "") {
          return this.$showToast("请选择走访时间");
        }
        if (this.form.interviewType == null) {
          return this.$showToast("请选择走访类型");
        }
        if (this.form.isStatus == null) {
          return this.$showToast("请选择是否需要处理");
        }
      }

      if (e == 0) {
        data = await editInterview({
          ...this.form,
          status: e,
          createdBy: JSON.parse(token).user.id,
          InterviewUserId: JSON.parse(token).user.id,
        });
      } else {
        data = await addInterview({
          ...this.form,
          status: e,
          createdBy: JSON.parse(token).user.id,
          InterviewUserId: JSON.parse(token).user.id,
        });
      }

      if (data.code == 200) {
        if (e == 1) {
          this.$emit("changeActive");
          this.$showToast("提交成功");
          this.form = { ...form };
        }
        if (e == 0) {
          this.$showToast("保存成功");
        }
      }
    },
    getCompany(e) {
      this.form.companyIndex = e.detail.value;
      this.form.companyId = this.companyAllList[e.detail.value].value;
    },
    chosseAboutCompany() {
      this.show = true;
      // this.$refs.popup.open('top')
    },
    async getCompanyAll() {
      let companyAllList = await getCompanyAll();
      this.companyAllList = companyAllList.map((e) => {
        return {
          label: e.qymc,
          value: e.id,
        };
      });
      this.getBySaveStatus();
    },
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dic_key));
      this.dic_SelectList = this.$common.handleDicList(data);
      this.dic_SelectList.interviewType[0].id;
    },
    confirm(e) {
      let associationCompanyString = [];
      let 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(",");
    },
    bindPickerChange(e) {
      this.form.interviewTypeIndex = e.detail.value;
      this.form.interviewType =
        this.dic_SelectList.interviewType[e.detail.value].value;
    },
  },
  // onLoad: function (){
  // 	this.$refs.findYuanQuList()
  // },
};
</script>
  
    <style lang="scss">
.save_button {
  width: calc(100% - 64rpx);
  margin: 32rpx;
  background: #1d18bc;
  border-radius: 50rpx;
  height: 88rpx;
  color: white;
  text-align: center;
  line-height: 88rpx;
}
.btn-view {
  width: 100%;
  height: 100rpx;
  padding: 20rpx 10%;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
}
.btn {
  width: 80%;
  height: 90rpx;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  background: #1d18bc;
  line-height: 90rpx;
  color: white;
  float: left;
}
.gaisideshurukuang {
  font-size: 26rpx !important;
  .is-input-border {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border: none;
    border-radius: 0 !important;
  }
}
.asset_add {
  .uni-select {
    border: none;
  }
  .textarea_info {
    textarea {
      background: #f9f9f9;
    }
  }
  .form {
    width: calc(100% - 128rpx);
    margin: 32rpx;
    background: #ffffff;
    padding: 32rpx;

    .label {
      height: 53rpx;
      line-height: 53rpx;
    }
    .is-input-border {
      border-top: none !important;
      border-left: none !important;
      border-right: none !important;
      border-radius: 0 !important;
    }
    .uni-forms-item {
      margin-bottom: 10rpx !important;
      margin-top: 10rpx !important;
      border-bottom: 2rpx solid #cccccc !important;
      //   margin-top: 42rpx !important;
      //   padding-bottom: 42rpx !important;
    }
  }
}
</style>