xiaoshi_system/src/views/patentMining/components/dialog/handleTask2.vue

<template>
  <!-- 处理挖掘任务2（文件分配任务弹窗） -->
  <div class="handleTask2"> 
    <el-dialog ref="dialog" :title="title" :visible.sync="dialogVisible" width="900px" :before-close="handleClose" :append-to-body="true"
      :close-on-click-modal="false">

      <el-form :model="form" status-icon :rules="rules" ref="form" label-position="top" label-width="120px"
        class="demo-form" :disabled="!isLook">
        <el-form-item label="附件（已保存）：">
          <el-table class="elTable" :data="tableData" border style="width: 100%"
            header-row-class-name="custom-table-header">
            <el-table-column prop="originalName" label="文件名称" align="center"></el-table-column>
            <el-table-column prop="createTime" label="文件上传时间" align="center"> </el-table-column>
            <el-table-column prop="type" label="文件类型" align="center"> </el-table-column>
            <el-table-column label="操作" align="center" width="140">
              <template slot-scope="scope">
                <div>
                  <el-button @click="deleteFile(scope.row)" size="small" type="text" style="color: red;">删除</el-button>
                </div>
              </template>

            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="附件（未保存）：" prop="systemFileList">
          <myUpload :file-list="form.systemFileList" @on-change="onchangeFile" @on-remove="onRemove"
            style="height: 180px;" :autoUpload="true"></myUpload>
        </el-form-item>
        <el-form-item label="说明：">
          <el-input type="textarea" :rows="2" placeholder="请输入说明内容" v-model="form.description"></el-input>
        </el-form-item>
      </el-form>




      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose" size="small">取 消</el-button>
        <template>
          <div v-if="isLook" style="margin-left: 10px;">
            <el-button @click="handleSave" size="small" type="primary">保 存</el-button>
            <el-button @click="submit" size="small" type="primary">提交审核</el-button>
          </div>
        </template>

      </span>
    </el-dialog>

    <examine ref="examine" @taskForm="handleTaskForm" @isHandleSave="isHandleSave"></examine>
  </div>
</template>

<script>
import examine from '@/views/components/dialog/examine.vue'
export default {
  components: {
    examine,
  },
  props: {},
  data() {
    return {
      title: '',
      tableData: [],
      form: {
        systemFileList: [],
      },
      rules: {
        // systemFileList: [{ required: true, message: '请选择附件', trigger: 'blur' },],
      },
      dialogVisible: false,
      // auditTask: false,
      // 备注
      textarea: '',
      // 是否是处理任务？
      isLook: false,
      row: null,
    };
  },
  watch: {},
  computed: {},
  created() { },
  mounted() { },
  methods: {

    // 上传的文件监听
    onchangeFile(file, fileList) {
      if (file.guid) {
        let index = this.form.systemFileList.findIndex(item => {
          return item.uid == file.uid
        })
        if (index != -1) {
          this.form.systemFileList.splice(index, 1, file)
        }
      } else {
        this.form.systemFileList.push(file.raw)
      }

    },
    // 删除上传的文件
    onRemove(file, fileList) {
      let index = this.form.systemFileList.findIndex(item => {
        return item.uid == file.uid
      })
      if (index != -1) {
        this.form.systemFileList.splice(index, 1)
      }
    },
    //打开弹窗
    open(row, val) {
      // let row = JSON.parse(JSON.stringify(row))
      // if(this.form.id){
      //     this.title = '编辑任务'
      // }else{
      //     this.title = '创建任务'
      // }
      this.row = row
      this.isLook = val
      this.title = '任务名称：' + row.name
      this.getTableList()
      this.dialogVisible = true
    },
    // 查询已保存的项目
    getTableList() {
      let params = {
        taskId: this.row.id
      }
      this.$api.getTaskHandleResult(params).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.systemFileList
        }
      }).catch(error => {
        this.tableData=[]
      })
    },
    // 删除文件
    deleteFile(row) {
      this.deleteFiles([row.id])
    },
    deleteFiles(ids) {
      this.$api.deleteAssoTaskFile(ids).then(res => {
        if (res.code == 200) {
          this.getTableList()
          this.$message.success('删除已保存的文件成功')
        }
      })
    },
    //关闭弹窗
    handleClose() {
      this.form = {
        systemFileList: []
      }
      this.dialogVisible = false
    },
    // 保存
    async handleSave(type) {
       // 判断文件是否都上传完毕
       if (this.form.systemFileList && this.form.systemFileList.length > 0) {
        this.form.fileGuids = []
        for (let i = 0; i < this.form.systemFileList.length; i++) {
          if (this.form.systemFileList[i].guid) {
            this.form.fileGuids.push(this.form.systemFileList[i].guid)
          } else {
            this.$message.error('文件未全部上传，请耐心等待')
            return false
          }
        }
      } 
      this.form.taskId = this.row.id
      await this.$api.addTaskAuditResult(this.form).then(res => {
        if (res.code == 200) {
          this.$message.success('保存文件成功')
          if (!type) {
            this.handleClose()
          }
        }
      })
    },
    // 提交审核时有未保存的文件调用保存接口
    async isHandleSave() {
      if (this.form.systemFileList && this.form.systemFileList.length > 0) { 
        await this.handleSave(1)
      }
    },
    //提交审核
     submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.projectId = this.row.projectId//项目id
          this.form.id = this.row.id//当前文件分配任务的id
          this.$refs.examine.open(this.form, 5)
        }
      })
    },
    // 审核弹窗发送的值
    handleTaskForm(val) {
      this.$emit('isSuccess', '新增成功')
      this.handleClose()
    },
  },

};
</script>
<style lang="scss">
.handleTask2 {
  .el-dialog__body {
    padding: 10px 20px;
  }
}
</style>
<style lang="scss" scoped>
.handleTask2 {
  .handleTask2Dialog {
    background: red;
  }

  .upload-demo {
    float: right;
    margin-bottom: 10px;
  }

  .explain {
    margin-top: 10px;

    span {
      font-size: 16px;
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: end;
  }
}
</style>