385 lines
		
	
	
		
			8.9 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			385 lines
		
	
	
		
			8.9 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
<template>
 | 
						|
  <div class="approvalopinion">
 | 
						|
    <div class="nobtn">
 | 
						|
      <div class="approvalopinion_text">
 | 
						|
        <!-- 拒绝时写固定的意见 -->
 | 
						|
        <div class="list" v-if="type == 0">
 | 
						|
          <div class="textarea_msgfont">
 | 
						|
            <span class="msgfont">
 | 
						|
              <span class="icon">*</span>
 | 
						|
              <span> 审批意见:</span>
 | 
						|
            </span>
 | 
						|
            <textarea :maxlength="150" placeholder="请输入审批意见" v-model="opinion" class="textarea" clearable="false"> </textarea>
 | 
						|
            <div class="clearns" @click="clearn">清空内容</div>
 | 
						|
            <div class="msg_length">
 | 
						|
              <span class="font">{{ opinion.length }}</span>
 | 
						|
              <span>/150</span>
 | 
						|
            </div>
 | 
						|
          </div>
 | 
						|
        </div>
 | 
						|
 | 
						|
        <!-- 同意意见 -->
 | 
						|
        <div v-if="type == 1">
 | 
						|
          <div class="list" v-for="(item, index) in list" :key="index">
 | 
						|
            <div class="textarea_msgfont" v-if="item.fieldDataType == 1">
 | 
						|
              <span class="msgfont">
 | 
						|
                <span class="icon" v-if="item.mustFill == 1">*</span>
 | 
						|
                <span> {{ item.fieldName }}:</span>
 | 
						|
              </span>
 | 
						|
              <textarea :maxlength="150" placeholder="请输入审批意见" v-model="item.fieldValue" class="textarea" clearable="false"> </textarea>
 | 
						|
              <div class="clearns" @click="clearn">清空内容</div>
 | 
						|
              <div class="msg_length">
 | 
						|
                <span class="font">{{ item.fieldValue.length }}</span>
 | 
						|
                <span>/{{ item.fieldLength }}</span>
 | 
						|
              </div>
 | 
						|
            </div>
 | 
						|
 | 
						|
            <!-- 入户调查时间 -->
 | 
						|
            <!-- v-if="item.fieldType == 3 && item.fieldDataType == 8" .-->
 | 
						|
            <div class="calendar" v-if="item.fieldDataType == 8">
 | 
						|
              <div class="left">
 | 
						|
                <span class="icon" v-if="item.mustFill == 1">*</span>
 | 
						|
                <span> {{ item.fieldName }}:</span>
 | 
						|
              </div>
 | 
						|
              <div class="left">
 | 
						|
                <u-input type="text" @click="timeSelect(index)" class="right" placeholder="请选择" disabled v-model="item.fieldValue"></u-input>
 | 
						|
              </div>
 | 
						|
            </div>
 | 
						|
          </div>
 | 
						|
        </div>
 | 
						|
      </div>
 | 
						|
 | 
						|
      <!-- 附件资料 -->
 | 
						|
      <div class="reply_files">
 | 
						|
        <text class="img">附件资料</text>
 | 
						|
        <text class="img_text">(最多支持9个附件)</text>
 | 
						|
        <!-- 单个文件最大10MB.zip、.rar、.doc、.docx、.xls、.xlsx、.ppt、.pptx、.pdf、.txt、.jpg、.png格式 -->
 | 
						|
        <div class="upload">
 | 
						|
          <div class="info">
 | 
						|
            <AiUploader multiple @list="(v) => (annex = v)" :limit="9" action="/admin/file/add2" type="file" placeholder="添加文件" preview />
 | 
						|
          </div>
 | 
						|
        </div>
 | 
						|
      </div>
 | 
						|
 | 
						|
      <!-- 图片资料 -->
 | 
						|
      <div class="reply_img">
 | 
						|
        <text class="img">图片资料</text>
 | 
						|
        <text class="img_text">(最多9张)</text>
 | 
						|
        <div class="upload">
 | 
						|
          <div class="info">
 | 
						|
            <AiUploader multiple @list="(v) => (picture = v)" :limit="9" action="/admin/file/add2" :size="2097152" preview />
 | 
						|
          </div>
 | 
						|
        </div>
 | 
						|
      </div>
 | 
						|
    </div>
 | 
						|
 | 
						|
    <div class="btn" @click="btn">确定</div>
 | 
						|
 | 
						|
    <!-- 日期选择器 -->
 | 
						|
    <u-calendar v-model="show" :mode="mode" @change="calendar" />
 | 
						|
  </div>
 | 
						|
</template>
 | 
						|
 | 
						|
<script>
 | 
						|
export default {
 | 
						|
  name: 'Opinion',
 | 
						|
  components: {},
 | 
						|
  props: {},
 | 
						|
  data() {
 | 
						|
    return {
 | 
						|
      mode: 'date',
 | 
						|
      show: false,
 | 
						|
      list: [],
 | 
						|
      type: '',
 | 
						|
      picture: [],
 | 
						|
      pass: false,
 | 
						|
      annex: [],
 | 
						|
      stepList: '',
 | 
						|
      filedIndex: 0,
 | 
						|
      fileNameList: [],
 | 
						|
      opinion: '',
 | 
						|
    }
 | 
						|
  },
 | 
						|
  onLoad(options) {
 | 
						|
    this.objid = options.id
 | 
						|
    this.type = options.type
 | 
						|
 | 
						|
    this.getList()
 | 
						|
  },
 | 
						|
  onShow() {
 | 
						|
    document.title = '审批详情'
 | 
						|
  },
 | 
						|
  computed: {},
 | 
						|
  watch: {},
 | 
						|
  onShow() {},
 | 
						|
  mounted() {},
 | 
						|
  methods: {
 | 
						|
    getList() {
 | 
						|
      this.$http
 | 
						|
        .post(`/app/approv-alapply-info/approval-popup?type=${this.type}&id=${this.objid}`)
 | 
						|
        .then((res) => {
 | 
						|
          if (res.code == 0) {
 | 
						|
            res.data.fieldInfos.map((item) => {
 | 
						|
              if (item.fieldDataType == 1) {
 | 
						|
                item.fieldValue = ''
 | 
						|
              }
 | 
						|
 | 
						|
              if (item.fieldType == 3) {
 | 
						|
                this.list.push(item)
 | 
						|
              }
 | 
						|
            })
 | 
						|
          }
 | 
						|
        })
 | 
						|
        .catch(() => {
 | 
						|
          // this.$u.toast(err)
 | 
						|
        })
 | 
						|
    },
 | 
						|
 | 
						|
    timeSelect(index) {
 | 
						|
      this.filedIndex = index
 | 
						|
      this.show = true
 | 
						|
    },
 | 
						|
 | 
						|
    clearn() {
 | 
						|
      this.opinion = ''
 | 
						|
      this.list.map((item) => {
 | 
						|
        if (item.mustFill == 1 && item.fieldValue) {
 | 
						|
          item.fieldValue = ''
 | 
						|
        }
 | 
						|
      })
 | 
						|
    },
 | 
						|
 | 
						|
    btn() {
 | 
						|
      if (this.type == 0 && this.opinion == '') {
 | 
						|
        return uni.showToast({
 | 
						|
          title: '请输入审批意见',
 | 
						|
          icon: 'none',
 | 
						|
        })
 | 
						|
      }
 | 
						|
 | 
						|
      if (
 | 
						|
        this.list.some((item) => {
 | 
						|
          if (item.mustFill == 1 && !item.fieldValue) {
 | 
						|
            uni.showToast({
 | 
						|
              title: item.fieldName + '为必填',
 | 
						|
              icon: 'none',
 | 
						|
            })
 | 
						|
            return true
 | 
						|
          }
 | 
						|
        })
 | 
						|
      )
 | 
						|
        return
 | 
						|
 | 
						|
      var file = []
 | 
						|
      this.annex.map((item) => {
 | 
						|
        file.push(item.id)
 | 
						|
      })
 | 
						|
 | 
						|
      var img = []
 | 
						|
      this.picture.map((item) => {
 | 
						|
        img.push(item.id)
 | 
						|
      })
 | 
						|
      var params = {
 | 
						|
        id: this.objid,
 | 
						|
        picture: img.join(','),
 | 
						|
        pass: this.type == 1,
 | 
						|
        annex: file.join(','),
 | 
						|
        fieldInfos: this.list,
 | 
						|
        opinion: this.opinion,
 | 
						|
      }
 | 
						|
      uni.showLoading({
 | 
						|
        title: '加载中',
 | 
						|
      })
 | 
						|
 | 
						|
      this.$http
 | 
						|
        .post(`/app/approv-alapply-info/approval`, params)
 | 
						|
        .then((res) => {
 | 
						|
          if (res.code == 0) {
 | 
						|
            uni.navigateTo({
 | 
						|
              url: `./Msg?flag=1`,
 | 
						|
            })
 | 
						|
            // this.getList()
 | 
						|
          }
 | 
						|
        })
 | 
						|
        .catch((e) => {
 | 
						|
          uni.navigateTo({
 | 
						|
            url: `./Msg?flag=0`,
 | 
						|
          })
 | 
						|
          uni.showToast({
 | 
						|
            title: e,
 | 
						|
            icon: 'none',
 | 
						|
          })
 | 
						|
          // this.getList()
 | 
						|
        })
 | 
						|
    },
 | 
						|
 | 
						|
    data(e) {
 | 
						|
      this.files.push(e)
 | 
						|
    },
 | 
						|
 | 
						|
    change(e) {
 | 
						|
      this.files = e
 | 
						|
    },
 | 
						|
 | 
						|
    calendar(e) {
 | 
						|
      this.list[this.filedIndex].fieldValue = e.result
 | 
						|
    },
 | 
						|
  },
 | 
						|
}
 | 
						|
</script>
 | 
						|
 | 
						|
<style scoped lang="scss">
 | 
						|
.approvalopinion {
 | 
						|
  height: 100%;
 | 
						|
 | 
						|
  .nobtn {
 | 
						|
    padding: 0 0 112px 0;
 | 
						|
 | 
						|
    .approvalopinion_text {
 | 
						|
      .list {
 | 
						|
        .textarea_msgfont {
 | 
						|
          position: relative;
 | 
						|
          height: 400px;
 | 
						|
          padding: 32px;
 | 
						|
          background-color: #fff;
 | 
						|
 | 
						|
          .msgfont {
 | 
						|
            font-size: 32px;
 | 
						|
 | 
						|
            .icon {
 | 
						|
              margin-right: 8px;
 | 
						|
              color: #ff4466;
 | 
						|
            }
 | 
						|
          }
 | 
						|
 | 
						|
          .textarea {
 | 
						|
            margin-top: 10px;
 | 
						|
          }
 | 
						|
 | 
						|
          .clearns {
 | 
						|
            color: #1365dd;
 | 
						|
          }
 | 
						|
 | 
						|
          .msg_length {
 | 
						|
            position: absolute;
 | 
						|
            bottom: 42px;
 | 
						|
            right: 32px;
 | 
						|
 | 
						|
            .font {
 | 
						|
              color: #999;
 | 
						|
            }
 | 
						|
          }
 | 
						|
        }
 | 
						|
 | 
						|
        .calendar {
 | 
						|
          display: flex;
 | 
						|
          justify-content: space-between;
 | 
						|
          align-items: center;
 | 
						|
          margin-top: 20px;
 | 
						|
          background-color: #fff;
 | 
						|
          padding: 0 32px;
 | 
						|
 | 
						|
          .left {
 | 
						|
            .icon {
 | 
						|
              color: #ff4466;
 | 
						|
              margin-right: 8px;
 | 
						|
            }
 | 
						|
          }
 | 
						|
 | 
						|
          .right {
 | 
						|
            width: 160px;
 | 
						|
          }
 | 
						|
        }
 | 
						|
      }
 | 
						|
    }
 | 
						|
 | 
						|
    .reply_files {
 | 
						|
      margin-top: 20px;
 | 
						|
      background-color: #fff;
 | 
						|
      padding: 0 20px 0;
 | 
						|
 | 
						|
      .img {
 | 
						|
        display: inline-block;
 | 
						|
        margin-top: 20px;
 | 
						|
        font-size: 32px;
 | 
						|
      }
 | 
						|
 | 
						|
      .img_text {
 | 
						|
        font-size: 32px;
 | 
						|
        color: #999;
 | 
						|
        margin-left: 10px;
 | 
						|
      }
 | 
						|
 | 
						|
      .upload {
 | 
						|
        width: 100%;
 | 
						|
        margin-top: 10px;
 | 
						|
        padding: 12px 12px 12px 0;
 | 
						|
        box-sizing: border-box;
 | 
						|
 | 
						|
        .info {
 | 
						|
          width: 100%;
 | 
						|
          text-align: center;
 | 
						|
        }
 | 
						|
 | 
						|
        ::v-deep .info > span {
 | 
						|
          width: 380px;
 | 
						|
          text-align: left;
 | 
						|
          //  word-break: break-all;
 | 
						|
        }
 | 
						|
 | 
						|
        ::v-deep .ai-uploader .fileList .default {
 | 
						|
          max-width: 160px;
 | 
						|
          max-height: 160px;
 | 
						|
        }
 | 
						|
      }
 | 
						|
    }
 | 
						|
 | 
						|
    .reply_img {
 | 
						|
      margin-top: 20px;
 | 
						|
      background-color: #fff;
 | 
						|
      padding: 0 20px;
 | 
						|
      box-sizing: border-box;
 | 
						|
 | 
						|
      .img {
 | 
						|
        display: inline-block;
 | 
						|
        margin-top: 20px;
 | 
						|
        font-size: 32px;
 | 
						|
      }
 | 
						|
 | 
						|
      .img_text {
 | 
						|
        font-size: 32px;
 | 
						|
        color: #999;
 | 
						|
        margin-left: 10px;
 | 
						|
      }
 | 
						|
 | 
						|
      .upload {
 | 
						|
        width: 100%;
 | 
						|
        margin-top: 10px;
 | 
						|
        padding: 12px 12px 12px 0;
 | 
						|
        box-sizing: border-box;
 | 
						|
 | 
						|
        .info {
 | 
						|
          width: 100%;
 | 
						|
          text-align: center;
 | 
						|
        }
 | 
						|
 | 
						|
        ::v-deep .ai-uploader .fileList .default {
 | 
						|
          width: 160px;
 | 
						|
          height: 160px;
 | 
						|
        }
 | 
						|
      }
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  .btn {
 | 
						|
    position: fixed;
 | 
						|
    bottom: 0;
 | 
						|
    line-height: 112px;
 | 
						|
    width: 100%;
 | 
						|
    background-color: #1355dd;
 | 
						|
    color: #fff;
 | 
						|
    text-align: center;
 | 
						|
  }
 | 
						|
}
 | 
						|
</style>
 |