cma_search/client/src/views/supervision/recorddo.vue

<template>
  <div class="app-container">
    <div class="ma">上报记录</div>
    <div class="ma">
      <span class="term">清单内容</span>
      <span class="desc">{{ record.content_.name }}</span>
    </div>
    <div class="ma">
      <span class="term">上报状态</span>
      <span class="desc">{{ record.state }}</span>
      <el-tag v-if="record.is_self" style="margin-left:2px">主动上报</el-tag>
    </div>
    <div class="ma" v-if="record.task_">
      <span class="term">所属任务</span>
      <span class="desc">{{ record.task_.name }}</span>
    </div>
    <div class="ma" v-if="record.task_">
      <span class="term">任务过期</span>
      <span class="desc">{{ record.task_.end_date }}</span>
    </div>
    <div class="ma" v-if="record.task_">
      <span class="term">上报备注</span>
      <el-input
        v-model="record.note"
        placeholder=""
        type="textarea"
        :readonly="data.action != 'update' && data.action != 'reject'"
      >
      </el-input>
    </div>
    <div class="ma">
      <span class="term">执行部门</span>
      <span class="desc">{{ record.belong_dept_.name }}</span>
    </div>
    <div class="ma" v-if="record.up_user_">
      <span class="term">上报人</span>
      <span class="desc">{{ record.up_user_.name }}/{{ record.up_date }}</span>
    </div>
    <div class="ma">
      <span class="term">上报说明</span>
      <el-input
        v-model="record.noteb"
        placeholder=""
        type="textarea"
        :readonly="data.action != 'up'"
      >
      </el-input>
    </div>
    <div class="ma">
      <span class="term">是否适用</span>
      <el-switch
        v-model="record.is_yes"
        :disabled="data.action == 'view'"
      ></el-switch>
    </div>
    <div class="ma">
      <span class="term">已上传文件</span>
    </div>
    <div v-for="(item, index) in fileList" v-bind:key="item.id">
      <i class="el-icon-delete" @click="deleteFile(index)" style="color:red" v-if="data.action=='up'"></i>
      <el-link :href="item.path" target="_blank" type="primary">{{ item.name }}</el-link>
    </div>
    <div class="ma" v-if="data.action == 'up'" style="margin-top: 2px">
      <el-upload
        ref="upload"
        :action="upUrl"
        :before-upload="beforeUpload"
        :on-success="handleUpSuccess"
        :headers="upHeaders"
        multiple
        accept="image/*,.ppt,.pdf,.doc,.docx,.xls,.xlsx"
      >
        <el-button size="small" type="primary">上传文件</el-button>
        <template #tip>
          <div class="el-upload__tip">
            可上传pdf,word,ppt,excel,图片文件,大小不超过20M
          </div>
        </template>
      </el-upload>
    </div>
    <el-divider></el-divider>
    <div style="text-align: right">
      <el-button
        type="primary"
        @click="confirm()"
        v-if="this.data.action == 'reject'"
        >驳回</el-button
      >
      <el-button type="primary" @click="confirm()" v-else>确认</el-button>
    </div>
  </div>
</template>
<style>
.ma {
  margin-bottom: 10px;
}
.term {
  color: rgba(0, 0, 0, 0.85);
  font-weight: bold;
  font-size: 16px;
}
.desc {
  color: rgba(0, 0, 0, 0.65);
  font-weight: bold;
  font-size: 16px;
}
.litem {
  margin-left: 2px;
  cursor: pointer;
  color: #409eff;
}
</style>
<script>
import { upUrl, upHeaders } from "@/api/file";
import {
  updateRecord,
  upRecord,
  rejectRecord,
  confirmRecord,
} from "@/api/record";
export default {
  name: "recorddo",
  props: ["data"],
  data() {
    return {
      upHeaders: upHeaders(),
      upUrl: upUrl(),
      record: this.data.record,
      fileList: [],
    };
  },
  created() {},
  mounted() {
    this.initList();
  },
  methods: {
    initList() {
      for (var i = 0; i < this.record.files_.length; i++) {
        this.fileList.push({
          id: this.record.files_[i].id,
          name: this.record.files_[i].name,
          path: this.record.files_[i].path,
        });
      }
    },
    handleUpSuccess(res, file, filelist) {
      this.fileList.push({
        id: res.data.id,
        name: res.data.name,
        path: res.data.path,
      });
      this.handleRemove(file)
    },
    handleRemove(file) {
      // 实现删除文件
      let fileList = this.$refs.upload.uploadFiles;
      let index = fileList.findIndex((fileItem) => {
        return fileItem.uid === file.uid;
      });
      fileList.splice(index, 1);
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isLt2M) {
        this.$message.error("单文件不能超过20MB!");
      }
      return isLt2M;
    },
    deleteFile(index){
      this.$confirm('确定删除该文件, 是否继续?', {type:'error'}).then(() => {
        console.log(index)
          this.fileList.splice(index)
        }).catch(e=>{})
    },
    confirm() {
      if (this.data.action == "update") {
        updateRecord(this.record.id, this.record).then((res) => {
          this.$message.success("成功");
          this.$emit("handleDo");
        });
      } else if (this.data.action == "up") {
        var files = [];
        for (var i = 0; i < this.fileList.length; i++) {
          files.push(this.fileList[i].id);
        }
        this.record.files = files;
        upRecord(this.record.id, this.record).then((res) => {
          this.$message.success("成功");
          this.$emit("handleDo");
        });
      } else if (this.data.action == "reject") {
        rejectRecord(this.record.id, this.record).then((res) => {
          this.$message.success("成功");
          this.$emit("handleDo");
        });
      } else if (this.data.action == "confirm") {
        confirmRecord(this.record.id).then((res) => {
          this.$message.success("成功");
          this.$emit("handleDo");
        });
      } else if (this.data.action == "confirm") {
        confirmRecord(this.record.id).then((res) => {
          this.$message.success("成功");
          this.$emit("handleDo");
        });
      } else if (this.data.action == "view") {
        this.$emit("handleDo");
      }
    },
  },
};
</script>