Smart_platform_ui/src/components/upload-file/main.vue

<template>
  <div>
    <containerTitle :title="title"></containerTitle>
    <basic-container>
      <avue-crud
        ref="crud"
        :option="option"
        v-model="form"
        :data="fileData"
        @row-save="rowSave"
        @row-update="rowUpdate"
        @row-del="rowDel"
        :upload-after="uploadAfter"
        @saveColumn="saveColumn"
        :cell-style="cellStyle"
      >
        <template slot="menuLeft">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="small"
            @click.stop="$refs.crud.rowAdd()"
            :disabled="disabled"
            >上传</el-button
          >
        </template>
        <template slot="menu" slot-scope="{ row, index }">
          <el-button
            size="small"
            icon="el-icon-edit"
            type="text"
            @click="$refs.crud.rowEdit(row, index)"
            :disabled="disabled"
            >编 辑</el-button
          >
          <el-button
            size="small"
            icon="el-icon-delete"
            type="text"
            @click="rowDel(row, index)"
            :disabled="disabled"
            >删 除</el-button
          >
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import option from "./config/uploadList.json";
import { updateListRemove } from "@/api/uploadFile/upload-file";
export default {
  name: "uploadfile",
  data() {
    return {
      form: {},
      fileData: [],
      option: {}
    };
  },
  props: {
    title: {
      type: String,
      default: "附件上传"
    },
    orderFilesList: {
      type: Array
    },
    disabled: {
      type: Boolean
    },
    delUrl: {
      type: String
    }
  },
  async created() {
    this.option = await this.getColumnData(this.getColumnName(35), option);
  },
  methods: {
    cellStyle() {
      return "padding:0;height:40px;";
    },
    //新增附件上传保存触发
    rowSave(row, done, loading) {
      this.fileData.push(row);
      done();
    },
    //修改附件上传触发
    rowUpdate(row, index, done, loading) {
      done(row);
    },
    //删除附件上传触发
    rowDel(row, index, donerowDel) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (row.id) {
          updateListRemove(row.id, this.delUrl).then(res => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.fileData.splice(index, 1);
          });
        } else {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.fileData.splice(index, 1);
        }
      });
    },
    uploadAfter(res, done) {
      if (res.originalName) {
        this.form.fileName = this.form.fileName
          ? this.form.fileName
          : res.originalName;
      }
      done();
    },
    //提交数据的返回值
    submitData() {
      return this.fileData;
    },
    async saveColumn() {
      const inSave = await this.saveColumnData(
        this.getColumnName(35),
        this.option
      );
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    }
  },
  watch: {
    orderFilesList: function(rows) {
      this.fileData = rows;
    }
  }
};
</script>

<style scoped lang="scss"></style>