product_wx/pages/subPackages/secureselfplan/addplan.vue

<template>
  <div class="addplan">
    <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 height40rpx"
          >
            <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 mode="date" fields="year" @change="selectYear">
                {{ form.attributiveYear ? form.attributiveYear : "请选择" }}
              </picker>
            </div>
          </div>

          <div class="width100 mt24rpx border_bottom_ccc list_date">
            <div class="input_title">
              <span style="color: red">*&nbsp;</span>
              年度计划
            </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"
                @delete="deleteRYXXZP"
                :file-list="form.uploadAddressPlan"
                @after-read="uploadRYXXZP"
                :show-upload="true"
              />
            </div>
          </div>

          <div class="width100 mt24rpx padb24rpx border_bottom_ccc list_date">
            <div class="input_title mb16rpx float_left">年度计划表：</div>
            <div
              class="float_left width60 whitespacenowrap first_title height50rpx"
            >
              <img
                @click="choosePDf()"
                src="./yearsplanbac.png"
                style="width: 238rpx; height: 50rpx"
              />
            </div>
            <div class="pdflist">
              <div
                class="pdflist-row"
                v-for="(item, index) in uploadAddressExcel"
                :key="item.url"
              >
                <div class="pdfname">{{ item.name }}</div>
                <van-icon
                  name="clear"
                  class="delete_icon"
                  @click="uploadAddressExcelSplice(index)"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="save_button" @click="save()">保存</div>
    </div>

    <select-dengjiyuan
      ref="selectDengjiyuan"
      :multiple="true"
      :range="range"
      :selectParent="true"
      :foldAll="true"
      rangeKey="name"
      idKey="id"
      @selectDengjiyuan="selectDengjiyuan"
    >
    </select-dengjiyuan>
    <multiple-select
      v-model="show"
      :data="companyAllList"
      :default-selected="defaultSelected"
      @confirm="confirm"
    ></multiple-select>
  </div>
</template>
        
<script>
const form = {
  uploadAddressPlan: [],
  testTypeIndex: 0,
  attributiveYear: "2023",
  carDate: "2023-06-30",
};
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,
  uploadPDF,
  addSafetySelfCheckingPlan,
  getUserLocalStorageInfo,
  findSafetySelfCheckingPlanById,
} from "@/js_sdk/http";
export default {
  components: {
    multipleSelect,
    selectDengjiyuan,
  },
  data() {
    return {
      uploadAddressExcel: [],
      BASE_URI: this.$constant.BASE_URI,
      companyAllList: [],
      defaultSelected: [],
      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: {},
      uploadAddressExcels: [],
      activeNames: [],
      StatusBar: 0,
      dic_key: [
        "PROPERTY_NATURE",
        "HOUSE_USAGE",
        "CURRENCY",
        "MNP_BUILDING_TYPE",
      ],
      dic_SelectList: {},
      search: {
        pageSize: 10,
        pageNum: 1,
      },
      form: { ...form },
      companyAllList: [],
      value: ["0"],
      modeIndex: -1,
      styleIndex: -1,
      current: 0,
      mode: "default",
      dotsStyles: {},
      swiperDotIndex: 0,
    };
  },
  onLoad(option) {
    if (option.id != "null") {
      this.form = { ...form };
      findSafetySelfCheckingPlanById(option.id).then((res) => {
        this.form.uploadAddressPlan = JSON.parse(res.uploadAddressPlan);
        this.uploadAddressExcel = JSON.parse(res.uploadAddressExcel);
        this.form.attributiveYear = res.attributiveYear;
        this.form.id = res.id;
      });
    } else {
      this.form = { ...form };
      this.uploadAddressExcel = [];
    }
    this.$forceUpdate();
  },
  onShow() {},
  methods: {
    uploadAddressExcelSplice(index) {
      this.uploadAddressExcel.splice(index, 1);
    },
    async choosePDf() {
      let that = this;
      uploadPDF().then((data) => {
        that.uploadAddressExcel.push({
          imgUrl: "/FileController/download/" + data.url,
          id: data.url,
          url: that.$constant.BASE_URI + "/FileController/download/" + data.url,
          isImage: true,

          name: data.name,
        });
        this.$forceUpdate();
      });
    },
    selectYear(event) {
      this.form.attributiveYear = event.detail.value;
    },
    selectCarDate(event) {
      this.form.carDate = event.detail.value;
    },
    bindPickerChange: function (e) {
      console.log("picker发送选择改变，携带值为", e.detail);
      this.form.testTypeIndex = e.detail.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) {
          // 上传完成需要更新 uploadAddressExcel
          let data = JSON.parse(res.data);
          that.form.uploadAddressPlan.push({
            imgUrl: "/FileController/download/" + data.data[0],
            id: data.data[0],
            name: "年度计划" + that.form.uploadAddressPlan.length + 1,
            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.uploadAddressPlan.splice(event.detail.index, 1);
    },
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dic_key));
      this.dic_SelectList = this.$common.handleDicList(data);
      this.form.settleInType = data.MNP_BUILDING_TYPE[0].value;
      this.form.currency = this.dic_SelectList.CURRENCY[0].value;
      this.bizhongIndex = 0;
    },

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

    async getSelectUserTwo(key) {
      let that = this;
      let departmentList = await getSelectUserTwo("");
      that.range = tools.transData(
        departmentList.data,
        "id",
        "parentid",
        "children"
      );
      that.$refs[key]._show();
    },
    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.uploadAddressPlan.length == 0) {
        that.$showToast("请上传年度计划");
        return;
      }
      let form = {
        uploadAddressExcel: JSON.stringify(that.uploadAddressExcel),
        uploadAddressPlan: JSON.stringify(that.form.uploadAddressPlan),
        companyName: getUserLocalStorageInfo().user.truename,
        createdBy: getUserLocalStorageInfo().user.id,
        attributiveYear: that.form.attributiveYear,
        id: !this.form.id ? "" : this.form.id,
      };
      let data = await addSafetySelfCheckingPlan(form);
      if (data.code == 200) {
        uni.navigateBack({});
      }
      //   form.companyName = getUserLocalStorageInfo().user.truename;
    },
    chossseFile() {
      this.$refs.files.upload();
    },
    onChange(event) {
      this.activeNames = event.detail;
    },
  },
};
</script>   
    <style scoped lang="scss" scpoed>
.pdflist-row {
  margin: 15rpx 0 15rpx 0;
}
.delete_icon {
  font-size: 30rpx;
  float: left;
}
.pdfname {
  color: #777777;
  font-size: 28rpx;
  width: 300rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 16rpx;
  float: left;
}
.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;
}
.pdflist {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 28rpx;
}
.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;
}
.addplan {
  margin-bottom: 200rpx;
}
.addplan {
  .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;
}
.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>