ha-mes-vue/src/views/modules/taskmanage/chatting.vue

<template>
  <div>
    <el-dialog
      :title="'沟通记录 - 回复'"
      :close-on-click-modal="false"
      width="450px"
      @close="closeDialog()"
      :visible.sync="visible">
      <el-form :model="dataForm" :inline="true" label-position="top"  ref="dataForm"
               label-width="80px">
        <el-row >
          <el-col :span="24">
            <el-form-item label="内容">
              <el-input type="textarea" style="width: 305px" v-model="dataForm.content"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px" >
          <el-col :span="24">
            <el-form-item label="附件" >
              <el-input style="width: 305px; color: red" readonly v-model="dataForm.fileName"></el-input>
            </el-form-item>
            <el-form-item style="margin-top: 24px" >
              <ftp-upload @childByValue="childByValue"></ftp-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="24">
            <span style="font-size: 12px">附件清单</span>
            <el-table
              :data="fileList"
              border
              :height="height"
              highlight-current-row
              style="width: 100%;">
              <el-table-column
                v-for="(item,index) in columnList" :key="index"
                :sortable="item.columnSortable"
                :prop="item.columnProp"
                :header-align="'center'"
                :show-overflow-tooltip="item.showOverflowTooltip"
                :align="item.align"
                :fixed="item.fixed==''?false:item.fixed"
                :width="item.columnWidth"
                :label="item.columnLabel">
                <template slot-scope="scope">
                  <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span>
                  <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                                     style="width: 100px; height: 80px"/></span>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                header-align="center"
                align="center"
                width="80"
                label="操作">
                <template slot-scope="scope">
                  <el-link type="text" size="small" @click="deleteFile(scope.row)">删除</el-link>
                  <el-link type="text" size="small" @click="downFtpFile(scope.row)"> | 下载</el-link>
                </template>
              </el-table-column>
            </el-table>

          </el-col>
        </el-row>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveChatting()">发送</el-button>
        <el-button type="primary" @click="visible = false">关闭</el-button>
    </span>
    </el-dialog>

  </div>

</template>

<script>
  import FtpUpload from '@/views/modules/common/ftp-upload.vue'
  import {saveChatHistory} from '@/api/taskmanage/chatHistory.js'
  import axios from "axios";
  import Vue from "vue";
  export default {
    data() {
      return {
        visible: false,
        height: 200,
        // 展示列集
        columnList: [
          {
            columnProp: "fileName",
            columnLabel: "文件名",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: null,
            format: null,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            columnProp: "fileType",
            columnLabel: "文件类型",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: null,
            format: null,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          }
        ],
        userList: [],
        dataListSelections: [],
        dataForm: {
          site: '',
          userName: '',
          content: '',
          createdBy: '',
          createDate: '',
          ossIds: [],
          fileName: '',
          taskId: 0,
        },
        fileList: []
      }
    },
    components:{
      FtpUpload
    },
    methods: {
      init(id) {
        this.dataForm.taskId = id
        this.visible = true
      },
      childByValue(childValue) {
        // childValue就是子组件传过来的值
        this.dataForm.fileName = childValue.fileName
        this.fileList.push(childValue)
      },
      // 移除附件
      deleteFile(row){
        this.fileList = this.fileList.filter(item => item.fileName != row.fileName)
      },
      // 下载附件
      downFtpFile(row){
          //'/proxyApi/ftp/file/downFtpFile/'
          axios.get( '/api/ftp/file/downFtpFile/' + row.id, {
            responseType: 'blob',
            headers: {
              'Content-Type': 'application/json',
              'token': Vue.cookie.get('token')
            }
          }).then(({data}) => {
            // 不限制文件下载类型
            const blob = new Blob([data], {type: "application/octet-stream"})
            // 下载文件名称
            const fileName = row.fileName
            // a标签下载
            const linkNode = document.createElement('a')
            linkNode.download = fileName // a标签的download属性规定下载文件的名称
            linkNode.style.display = 'none'
            linkNode.href = URL.createObjectURL(blob) // 生成一个Blob URL
            document.body.appendChild(linkNode)
            linkNode.click() // 模拟在按钮上的一次鼠标单击
            URL.revokeObjectURL(linkNode.href) // 释放URL 对象
            document.body.removeChild(linkNode)
            // }
          })
      },
      // 保存记录
      saveChatting(){
        this.dataForm.site = this.$store.state.user.site
        this.dataForm.userName = this.$store.state.user.name
        this.dataForm.ossIds = this.fileList.map(item => item.id)
        this.dataForm.createdBy = this.$store.state.user.name
        this.dataForm.createDate = this.dayjs().format("YYYY-MM-DD HH:mm:ss")
        saveChatHistory(this.dataForm).then(({data}) =>{
          if (data && data.code == 0){
            this.visible = false
            this.$message.success(data.msg)
            this.$emit('refreshDataList')
          }else{
            this.$message.error(data.msg)
          }
        })
      },
      closeDialog(){
        Object.assign(this.$data, this.$options.data())
      }
    },
    created() {

    }
  }
</script>