yos_web/src/components/normal-basic-layout/details/modules/followUp/editLog.vue

<template>
  <div class="inline-16">
    <el-button icon="el-icon-edit" type="text" size="mini" @click="onShow(dialogFormVisible = true)">编 辑</el-button>
    <el-dialog title="编辑跟进动态" width="600px" append-to-body :visible.sync="dialogFormVisible">
      <el-form :model="form" label-position="top" label-width="80px">
        <el-form-item label="跟进动态">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 18 }" v-model="form.content" placeholder="请输入跟进动态" autocomplete="off"></el-input>
        </el-form-item>
        <div class="flex-align-center flex-between pionter" v-for="file in data.attinfos" :key="file.index">
          <div class="flex-align-center">
            <img width="30" :src="checkFileType(file.postfix) === 'file'?require('@/assets/file_icons/file.svg'):file.url" class="inline-16" alt="">
            <div class="file__link inline-16">
              <a :href="file.url">{{file.document}}</a>
              <p>{{(file.contentlength / 1024).toFixed(2)}}kb</p>
            </div>
          </div>
          <i style="color:red;" class="el-icon-delete" @click="deleteFile(file)"></i>
        </div>
        <upload
          :folderid="folderid"
          btntype="icon"
          @onSuccess="onSuccess"
          :hidemediastock="false"
          :bindData=" {ownertable: 'sys_datafollowup', ownerid: data.sys_datafollowupid,usetype: 'default'}">
        </upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="warning" size="small" @click="submitLog">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import upload from '@/components/upload/hw_obs_upload.vue'
import previewImage from '@/components/previewImage/index.vue'
export default {
  props:['data','ownertable'],
  components:{
    upload,
    previewImage
  },
  data () {
    return {
      dialogFormVisible:false,
      form:{
        content:''
      },
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
      attachmentids:[]
    }
  },
  
  methods:{
    onShow () {
      this.form = Object.assign({},this.form,this.data)
    },
    onSuccess(res) {
      res.attinfos = JSON.parse(res.attinfos)
      this.attachmentids = [...this.attachmentids,...res.attinfos.data]
      this.$emit('onSuccess')
    },

    // 更新接口
    async submitLog () {
      const res = await this.$api.requested({
        "id": 20220930121601,
        "content": {
          "sys_datafollowupid":this.data.sys_datafollowupid,
            "ownertable":this.ownertable,
            "ownerid":this.$route.query.id,
            "type":"",
            "content":this.form.content
        }
      })
      this.tool.showMessage(res,()=>{
        this.form.content = ''
        this.dialogFormVisible = false
        this.$store.dispatch('bindFileToData',{
          "ownertable": 'sys_datafollowup',
          "ownerid": res.data.sys_datafollowupid,
          "usetype": 'default',
          "attachmentids": this.attachmentids
          
        }).then(rs=>{
          this.attachmentids = []
          this.dialogFormVisible = false
          this.$emit('onSuccess')
        })
       
      })
    },
    checkFileType (type) {
      let arr = ['JPG','JPEG','PNG']
      if (arr.includes(type.toUpperCase())) {
        return 'img'
      } else {
        return 'file'
      }
    },
    async deleteFile (row) {
      const res = await this.$api.requested({
        "classname": "system.attachment.Attachment",
        "method": "deleteFileLink",
        "content": {
          "linksids":[row.linksid]
        }
      })
      this.tool.showMessage(res,()=>{
        this.queryLogs()
      })
    }
  }
}

</script>
<style>
</style>
<style scoped>
.file__link,.file__link > a{
  color:#999;
  font-size: 12px;
  display:block;
  width: 100%;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}
.pionter{
  margin:6px 0;
  padding: 10px;
  transition: .2s linear;
  cursor: pointer;
  border-radius: 5px;
}
.pionter:hover{
  box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}
</style>