hitap-chat/pages/investigation/components/problem-box.vue

<template>
  <view class="problem-box">
    <view class="detail-item" @click="handleClickShowSelect">
      <uni-forms-item label="隐患问题" label-position="top" label-width="100px" style="display: flex;align-items: center" />
      <u-input
          placeholder="请输入"
          border="none"
          readonly
          v-model="text"
          type="textarea"
      />
    </view>
    <view class="detail-item">
      <uni-forms-item label="隐患描述" label-position="top" label-width="200px"/>
      <u-textarea
          placeholder="请输入"
          border="none"
          v-model="formData.hdDesc"
      />
    </view>
    <view class="detail-item">
      <uni-forms-item label="隐患图片" label-position="top" label-width="200px" />
      <u-upload
          :fileList="fileList"
          @afterRead="(e) => afterRead(e, 'fileList')"
          @delete="(e) => deletePic(e, 'fileList')"
          name="1"
          :maxCount="1"
      ></u-upload>
    </view>
    <view class="detail-item">
      <uni-forms-item label="需采集补充信息" label-position="top" label-width="200px"/>
      <u-textarea
          placeholder="请输入"
          border="none"
          v-model="formData.hdInfo"
      />
    </view>
    <u-popup :show="showProblemTreeSelect" @close="showProblemTreeSelect = false">
      <view class="custom-pop-head">
        <view class="left" @click="showProblemTreeSelect = false">取消</view>
        <view class="title">选择隐患</view>
        <view class="right" @click="showProblemTreeSelectHandle">确认</view>
      </view>
      <problem-tree-item @select="handleSelectTree" />
      <view class="blank" />
    </u-popup>
  </view>
</template>

<script>
import ProblemTreeItem from "./problem-tree-item.vue";

export default {
  // 组件
  components: {ProblemTreeItem},
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 公用的js
      text: '',
      $: this.$,
      showProblemTreeSelect: false,
      originList: [],
      problemTreeSelect: null,
      problemTreeSelectList: [],
      problemTreeSelectConfirmList: [],
      fileList: [],
      formData: {
        bigCategory: '',
        smallCategory: '',
        hdTerm: '',
        hdPic: '',
        hdDesc: '',
        hdInfo: '',
      },
      tempList: []
    }
  },
  // 页面加载
  onLoad(e) {
    // this.getData()
  },
  mounted(){
    if (this.props.id) {
      this.getData()
    }
  },
  // 页面显示
  onShow() {
  },
  // 计算属性
  computed: {},
  // 方法
  methods: {
    changeEmit(){
      this.$emit('change', this.formData)
    },
    // 删除图片
    deletePic(event, key) {
      this[key].splice(event.index, 1)
      this.formData.hdPic = this[key].filter(item => item.status === 'success').map(item => item.url).toString()
      this.changeEmit()
    },
    //获取随机id
    uuid(len, binary) {
      len = !len ? 36 : len;
      binary = !binary ? 16 : binary;
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * binary | 0,
            v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(binary);
      }).substring(0, len)
    },
    // 新增图片
    async afterRead(event, key) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      const id = this.uuid()
      this[key].push({
        id,
        ...event.file,
        status: 'uploading',
        message: '上传中'
      })
      const result = await this.uploadFilePromise(this[key][0].url)
      const resultInfo = JSON.parse(result)
      const index = this[key].findIndex(v => v.id === id)
      if (resultInfo.code == 200) {
        this[key].splice(index, 1, Object.assign(this[key][index], {
          status: 'success',
          message: '',
          result: resultInfo,
          url: resultInfo.result
        }))
      } else {
        this.$.toast('上传失败')
        this[key].splice(index, 1, Object.assign(this[key][index], {
          status: 'error',
          message: '失败',
        }))
      }
      this.formData.hdPic = this[key].filter(item => item.status === 'success').map(item => item.url).toString()
      this.changeEmit()
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: this.$.baseUrl + '/hiddenDanger/ftp/uploadFileToFtp', // 仅为示例，非真实的接口地址
          filePath: url,
          name: 'file',
          success: (res) => {
            resolve(res.data)
          }
        });
      })
    },
    getData(){
      this.$request.globalRequest('/hiddenDanger/highDanger/getDangerItems', {}, 'GET').then(res => {
        if(res.code == 200){
          this.originList = res.result
          this.problemTreeSelectList = res.result
        }
      })
    },
    // 跳转页面
    skipPage(even){
      this.$.open(even)
    },
    handleSelectTree(list) {
      this.tempList = list
    },
    showProblemTreeSelectHandle(){
      console.log(this.tempList)
      if (this.tempList.length < 3) {
        this.$.toast('请选择')
        return false
      }
      this.formData.bigCategory = this.tempList[0].id;
      this.formData.smallCategory = this.tempList[1].id;
      this.formData.hdTerm = this.tempList[2].id;
      this.text = this.tempList.map(item => item.itemname).join('/');
      this.showProblemTreeSelect = false
      this.changeEmit()
    },
    handleClickShowSelect() {
      this.showProblemTreeSelect = true
    }
  },
  onReady() {
  },
  // 页面卸载
  onUnload() {

  },
  // 触发下拉刷新
  onPullDownRefresh() {
    // 延迟关闭刷新动画
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1500);
  },
  // 页面上拉触底事件的处理函数
  onReachBottom() {
  },
}
</script>

<style>
page {
  background:#FFFFFF;
}
</style>
<style lang="scss" scoped>
.investigation-item {
  margin:0 auto 20rpx;
  width: 90%;
  border-radius: 8rpx;
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  &.active {
    background: #DFEBF8;
  }
}
.custom-pop-head {
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #E6E6E6;
  margin-bottom: 20rpx;
  .left {
    color: #666666;
  }
  .title {
    font-size: 16px;
  }
  .right {
    color: #2663BF;
  }
}
.breadcrumb {
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  flex-wrap: nowrap;
}
.detail-item {
  width: 100%;
  background: #F0F3F7;
  padding: 20rpx 30rpx;
  border-radius: 8rpx;
  box-sizing: border-box;
  /deep/ .uni-forms-item__content {
    justify-content: flex-end;
    text-align: right;
    display: flex;
  }
  /deep/ .uni-forms-item {
    margin-bottom: 0;
  }
  /deep/ .uni-forms-item__label {
    font-size: 16px;
  }
}
.problem-box {
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  .detail-item {
    margin-bottom: 20rpx;
  }
}
</style>