HSW_WX/pages/subPackages/secureselftest/report.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 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 @change="bindPickerChange" :value="form.testTypeIndex"
                :range="dic_SelectList.safety_inspection_type" range-key="label">
                {{
                  !dic_SelectList.safety_inspection_type[form.testTypeIndex]
                    .label
                    ? "未知类型"
                    : dic_SelectList.safety_inspection_type[form.testTypeIndex]
                      .label
                }}
              </picker>
            </div>
          </div>
          <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 padb24rpx border_bottom_ccc list_date height40rpx">
            <div class="input_title float_left">
              <span style="color: red">*&nbsp;</span>
              检查人
            </div>
            <input style="color: #777" class="input_value float_left" placeholder="请输入" v-model="form.checkUser" />
          </div>
          <div class="width100 mt24rpx padb24rpx border_bottom_ccc list_date height40rpx"
            style="display: flex; align-items: center; color: #777">
            <div class="input_title float_left">
              <span style="color: red">*&nbsp;</span>
              检查对象
            </div>
            <div @click="onOpen">
              {{ form.checkCompanyName ? form.checkCompanyName : "请选择" }}
            </div>
          </div>
          <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" @change="selectCarDate">
                {{ form.checkTime ? form.checkTime : "请选择" }}
              </picker>
            </div>
          </div>

          <div class="width100 mt24rpx padb24rpx border_bottom_ccc list_date height300rpx" style="height: 325rpx">
            <div class="input_title mb16rpx">检查详情：</div>
            <textarea v-model="form.checkInfo" :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.checkInfo && form.checkInfo.length
                  ? form.checkInfo.length
                  : 0
              }}/2000
            </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.uploadAddressExcel"
                @after-read="uploadRYXXZP" :show-upload="true" />
            </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 style="margin-top: 20rpx; margin-bottom: 36rpx" class="choosefile">
              <!-- <van-uploader
                accept="all"
                :max-count="6"
                @delete="deleteRYXXZP2()"
                :file-list="form.uploadAddressExcel2"
                @after-read="uploadRYXXZP2"
                :show-upload="true"
              /> -->
              <van-uploader limit="5" @delete="deleteRYXXZP2" @after-read="uploadRYXXZP2"
                :file-list="form.uploadAddressExcel2" accept="file" file-extname="docx,pdf,xls,xlsx,txt"
                title="最多选择5个文件">
                <van-button type="primary" size="small" style="margin-bottom: 15rpx">文件选择</van-button>
              </van-uploader>
              <div @click="openFile(item)" class="file" v-for="(item, index) in form.uploadAddressExcel2" :key="index">
                <div style="width: 90%">{{ item.name }}</div>

                <uni-icons type="closeempty" size="20" @click="deleteRYXXZP2(index)"></uni-icons>
              </div>
            </div>
          </div>
          <div class="width100 mt24rpx padb24rpx border_bottom_ccc list_date height300rpx" style="height: 325rpx">
            <div class="input_title mb16rpx">备注：</div>
            <textarea v-model="form.remark" :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.remark && form.remark.length ? form.remark.length : 0
              }}/2000
            </div>
          </div>
          <div v-if="form.handlingFeedback && form.handlingFeedback.length > 0"
            class="width100 mt24rpx padb24rpx border_bottom_ccc list_date height300rpx" style="height: 325rpx">
            <div class="input_title mb16rpx">反馈记录</div>
            <textarea v-model="form.handlingFeedback" :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.handlingFeedback && form.handlingFeedback.length > 0 ? form.handlingFeedback.length : 0 }}/2000
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="form">
        <div
          class="form_row pdt32 pdb32 border_bottom_ccc width100"
          @click="getSelectUserTwo('selectDengjiyuan')"
        >
          <div class="float_left width30 first_title height50rpx">招商经理</div>
          <div
            class="float_left width60 whitespacenowrap first_title height50rpx font28rpx color292d98"
          >
            {{ form.investmentManagerString }}
          </div>
          <img
            class="height40rpx width40rpx float_right"
            src="../../../static/mine/youjiantou.png"
            alt=""
          />
        </div>
      </div> -->
      <van-popup position="bottom" closeable :show="finisherPopupStatus" @close="onClose"
        custom-style="height:1000rpx;">
        <div style="margin-top: 70rpx">
          <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.checkCompanyName == item.value ? 'ischecked' : '',
              ]">
                <div :class="[
                  'select-point',
                  form.checkCompanyName == item.value ? 'ischecked' : '',
                ]"></div>
              </div>
            </div>
          </div>
        </div>
      </van-popup>
      <div class="save_button" v-if="!saveBtnStatus" @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 = {
  uploadAddressExcel: [],
  uploadAddressExcel2: [],
  testTypeIndex: 0,
  year: "2023",
  carDate: "2023-06-30",
  remark: "",
  checkInfo: "",
};
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,
  addSafetySelfCheckingManage,
  updateSafetySelfCheckingManage,
  findSafetySelfCheckingManagetById,
  findAllSimpleCompanies,
} from "@/js_sdk/http";
export default {
  components: {
    multipleSelect,
    selectDengjiyuan,
  },
  data() {
    return {
      qymc: "",
      id: null,
      finisherPopupStatus: false,
      companyUserList: [],
      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 },
      ],
      testList: ["企业自检", "设备自检"],
      settleInTypeIndex: 0,
      range: [],
      zaitiList: [],
      imageStyles: {},
      listStyles: {},
      fileLists: [],
      activeNames: [],
      StatusBar: 0,
      dic_key: ["safety_inspection_type"],
      dic_SelectList: {},
      search: {
        pageSize: 10,
        pageNum: 1,
      },
      form: { ...form },
      companyAllList: [],
      value: ["0"],
      modeIndex: -1,
      styleIndex: -1,
      current: 0,
      mode: "default",
      dotsStyles: {},
      swiperDotIndex: 0,
      saveBtnStatus: false,
    };
  },
  onLoad(option) {
    this.id = option.id !== "null" ? option.id : null;
    this.saveBtnStatus = option.saveBtnStatus ? option.saveBtnStatus : false;
    console.log(option.saveBtnStatus);
    this.form.createdBy = getUserLocalStorageInfo().user.id;
    this.getByCodes();
    this.findAllSimpleCompanies();
    // this.getByCodes();
    // this.getCompanyAll();
  },
  onShow() { },
  methods: {
    getFinishUserName(id, name, pushType) {
      this.form.checkCompanyId = id;
      this.form.checkCompanyName = name;
      this.finisherPopupStatus = false;
    },
    onClose() {
      this.finisherPopupStatus = false;
    },
    onOpen() {
      this.finisherPopupStatus = true;
    },
    async findAllSimpleCompanies() {
      let { data } = await findAllSimpleCompanies({
        pageSize: 1,
        pageNum: 1,
        qymc: this.qymc,
      });
      console.log(data);
      this.companyUserList = data.rows;
    },
    async findSafetySelfCheckingManagetById() {
      let that = this;
      if (that.id != null) {
        let detail = await findSafetySelfCheckingManagetById(that.id);

        that.form = detail;
        that.form.uploadAddressExcel = JSON.parse(detail.uploadAddressExcel);
        that.form.uploadAddressExcel2 = detail.uploadAddressExcel2
          ? JSON.parse(detail.uploadAddressExcel2)
          : [];
        let index = that.dic_SelectList.safety_inspection_type.findIndex(
          (e) => e.value == detail.type
        );
        if (index != -1) {
          that.form.testTypeIndex = index;
          that.form.type = that.safety_inspection_type[index].value;
        }
      }
    },
    selectYear(event) {
      this.form.attributiveYear = event.detail.value;
      this.$forceUpdate();
    },
    selectCarDate(event) {
      this.form.checkTime = event.detail.value;
      this.$forceUpdate();
    },
    bindPickerChange: function (e) {
      console.log("picker发送选择改变，携带值为", e.detail);
      this.form.testTypeIndex = e.detail.value;
      this.form.type =
        this.dic_SelectList.safety_inspection_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.uploadAddressExcel.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) { },
      });
    },
    uploadRYXXZP2(e) {
      console.log(e);
      console.log(e.detail.file.url);
      let that = this;
      let tempFilePaths = e.detail.file.url;

      uni.uploadFile({
        url: that.$constant.BASE_URI + "/wx/fileController/upload2",
        filePath: tempFilePaths,
        name: "file",
        formData: { user: "test" },
        success(res) {
          // 上传完成需要更新 fileList
          let data = JSON.parse(res.data);
          console.log(data);

          that.form.uploadAddressExcel2 = !that.form.uploadAddressExcel2
            ? []
            : that.form.uploadAddressExcel2;
          console.log(that.form.uploadAddressExcel2);
          that.form.uploadAddressExcel2.push({
            name: JSON.parse(data.data[0]).name,
            size: JSON.parse(data.data[0]).size,
            imgUrl: "/FileController/download/" + data.data[1],
            id: data.data[1],
            url:
              that.$constant.BASE_URI +
              "/FileController/download/" +
              data.data[1],
          });
          console.log(that.form.uploadAddressExcel2);
        },
        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.uploadAddressExcel.splice(event.detail.index, 1);
    },
    deleteRYXXZP2(index) {
      console.log(index);
      this.form.uploadAddressExcel2.splice(index, 1);
    },
    openFile(item) {
      uni.downloadFile({
        url: item.url,
        success: function (res) {
          var filePath = res.tempFilePath;
          console.log("下载文件：", res);
          uni.openDocument({
            filePath: filePath,
            success: function (res) {
              console.log("打开文档成功");
            },
            fail: function (res) {
              console.log("uni.openDocument,fail");
              console.log(res);
            },
            complete: function (res) {
              console.log("uni.openDocument,complete");
              console.log(res);
            },
          });
        },
        fail: function (res) {
          console.log("uni.downloadFile,fail");
          console.log(res);
        },
        complete: function (res) {
          console.log("uni.downloadFile,complete");
          console.log(res);
        },
      });
      console.log(item);
    },
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dic_key));
      this.dic_SelectList = this.$common.handleDicList(data);
      this.form.type = this.dic_SelectList.safety_inspection_type[0].value;
      if (this.form.createdBy) {
        this.findSafetySelfCheckingManagetById();
      }
    },

    // /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.attributiveYear || that.form.attributiveYear.length == 0) {
        that.$showToast("请选择归属年度");
        return;
      }
      if (!that.form.checkUser || that.form.checkUser.length == 0) {
        that.$showToast("请填写检查人");
        return;
      }
      if (!that.form.checkTime || that.form.checkTime.length == 0) {
        that.$showToast("请选择检查日期");
        return;
      }

      if (!that.form.checkCompanyName) {
        that.$showToast("请选择检查对象");
        return;
      }
      console.log(that.form.uploadAddressExcel);
      if (
        !that.form.uploadAddressExcel ||
        that.form.uploadAddressExcel.length == 0
      ) {
        that.$showToast("请填写上传自检表");
        return;
      }
      console.log(that.form.uploadAddressExcel);
      let uploadAddressExcel = JSON.stringify(that.form.uploadAddressExcel);
      let uploadAddressExcel2 = JSON.stringify(that.form.uploadAddressExcel2);
      let form = { ...this.form };
      form.companyName = getUserLocalStorageInfo().user.truename;
      form.uploadAddressExcel = uploadAddressExcel;
      form.uploadAddressExcel2 = uploadAddressExcel2;
      let data;
      if (this.id) data = await updateSafetySelfCheckingManage(form);
      else data = await addSafetySelfCheckingManage(form);
      if (data.code == 200) {
        this.$showToast(this.id ? "编辑成功" : "新增成功");
        uni.navigateBack({});
      }
    },
    chossseFile() {
      this.$refs.files.upload();
    },
    onChange(event) {
      this.activeNames = event.detail;
    },
  },
};
</script>
<style scoped lang="scss" scpoed>
.tabsbox {
  height: 680rpx;
  overflow-y: auto;
  padding: 10rpx;

  .tabsbox-item {
    margin: 5rpx;

    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.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%;
  }
}

.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;
}

.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">
.choosefile {
  .van-uploader__preview {
    display: none;
  }

  .is-text-box {
    display: none !important;
  }

  .file {
    display: flex;
    width: 100%;
    flex: 1;
    font-size: 14px;
    color: #666;
    margin-right: 25px;
    word-break: break-all;
    word-wrap: break-word;
    margin-bottom: 15rpx;
  }
}

::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;
}

.ischecked {
  background: rgb(7, 193, 96);
  border: 5rpx solid rgb(7, 193, 96);
}
</style>