yos_web/src/HDrpManagement/workReport/modules/createReport/index.vue

<!--  -->
<template>
  <div>
    <el-dropdown  @command="handleCommand">
      <el-button type="primary" size="mini" @click="createClick">
        开始汇报
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :command="{name:item.reportname,id:item.sys_workreportmodelid}" v-for="(item,index) in modelList" :key="index">{{ item.reportname }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-drawer
      title="创建汇报"
      :visible.sync="drawer"
      direction="rtl"
      :show-close="false"
      append-to-body
      size="800px">
      <div class="drawer__panel" v-if="drawer">
        <template v-for="item in detail">
          <!-- <div :style="{'display':item.editable ? 'block' : 'none','margin-bottom':'40px'}"> -->
          <div :style="{'margin-bottom':'40px'}">
            <p class="normal-title" style="margin-bottom:20px">{{ item.title }}</p>
            <p ref="content" :contenteditable="item.editable ? true : false" class="content" :style="!item.editable ? 'background:#FAFAFA' : ''">
              <template v-for="item2 in item.content">
                {{ item2.content }}<br/>
              </template>
            </p>
          </div>
        </template>
        <upload
          ref="upload"
          :folderid="folderid"
          @onSuccess="onSuccess"
          :bindData="bindData"
          type="button">
        </upload>
      </div>
      <div class="fixed__btn__panel">
        <el-button class="normal-btn-width" :loading="loading" type="primary" size="small" @click="submitForm">创 建</el-button>
        <!-- <el-button class="normal-btn-width" size="small" @click="resetForm">重 置</el-button> -->
      </div>
    </el-drawer>
  </div>
</template>

<script>
import upload from '@/SManagement/orderclue/components/upload'
export default {
  components:{upload},
  data () {
    return {
      modelList:[],
      loading:false,
      drawer:false,
      detail:'',
      currentModel:{},
      bindData:{},
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
      uploadIndex:0,
    }
  },
  methods: {
    async getModelList () {
      let res = await this.$api.requested({
        "id": "20230524091902",
        "content": {
        },
      })
      this.modelList = res.data
    },
    async handleCommand (data) {
      this.currentModel = data
      console.log(this.currentModel);
      this.drawer = true
      let res = await this.$api.requested({
        "id": "20230523131702",
        "content": {
            "sys_workreportmodelid": data.id
        },
      })
      this.detail = res.data
      this.detail.forEach(item => {
        item.content.forEach(item2 => {
          if (item.title == '数据统计') return 
          item2.content = `${item2.rowindex}、${item2.content}`
        })
      })
      console.log(this.detail);
    },
    createClick () {
      if (!this.modelList.length) {
        this.$message('暂无汇报模板',{
          type:'warning'
        })
      }
    },
    async submitForm () {
      let result = this.$refs.content.map((item,index) => {
        return {
          rowindex:index+1,
          content:item.innerText
        }
      })
      let copyDetail = JSON.parse(JSON.stringify(this.detail))
      copyDetail.forEach((item,index) => {
        item.content = [result[index]]
      })
      let res = await this.$api.requested({
          "id": "20230523094702",
          "content": {
              "sys_workreportmodelid": this.currentModel.id,
              "reportname": this.currentModel.reportname, //可以不传，不传时为模板名称
              "items": copyDetail
          },
      })
      this.tool.showMessage(res,() => {
        this.bindData = {
          "ownertable": 'sys_workreport',
          "ownerid": res.data.sys_workreportid,
          "usetype": 'default',
        }
        if (!this.$refs.upload.fileList.length) {
          this.drawer = false
          res.data.name = res.data.createby
          this.$emit('onSuccess',res.data)
        } else {
          this.loading = true
          let index = 0
          this.$refs['upload'].toUpload(() => {
            if (!index) this.uploadIndex = this.$refs.upload.fileList.length
            index++
            if (this.uploadIndex == index) {
              this.loading = false
              this.drawer = false
              res.data.name = res.data.createby
              this.$emit('onSuccess',res.data)
            }
          })
        }
      })
      console.log(res);
    },
    onSuccess () {

    } 
  },
  created () {
    this.getModelList()
  },
}
</script>

<style  scoped>
/deep/.el-textarea__inner {
  border: none !important;
  font-size: 12px !important;
}
.normal-title {
  font-size: 14px;
  font-weight: normal;
}
.content {
  font-size:12px;
  border: 1px solid #dcdfe6;
  border-radius:4px;
  padding: 15px 10px;
}
</style>