Smart_platform_ui/src/components/annex/main.vue

<template>
    <div>
        <trade-card title="明细附件" :show="false">
            <avue-crud ref="crud" :data="data" :option="tableOption" @row-del="rowDel" @saveColumn="saveColumn"
                @resetColumn="resetColumn" :cell-style="cellStyle">
                <template slot="menuLeft">
                    <el-button type="primary" icon="el-icon-plus" size="small" @click.stop="addRow">新增
                    </el-button>
                </template>
                <template slot="url" slot-scope="{ row }">
                    <div style="display: flex; justify-content: center">
                        <el-upload class="upload-demo" :action="uploadImgUrl" :on-success="
                            (res, file) => {
                                handleSucces(row, res, file);
                            }
                        " :headers="headers" :disabled="disabled" :show-file-list="false" :limit="1">
                            <el-button size="small" type="text" :disabled="browseStatus">点击上传</el-button>
                        </el-upload>
                    </div>
                </template>
                <template slot-scope="{ row,index}" slot="menu">
                    <el-button type="text" icon="el-icon-delete" size="small" @click.stop="rowView(row, index)">查看
                    </el-button>
                    <el-button type="text" icon="el-icon-delete" size="small" @click.stop="rowDel(row, index)">删除
                    </el-button>
                    <el-button type="text" icon="el-icon-delete" size="small" @click.stop="rowDown(row, index)">下载
                    </el-button>
                </template>
            </avue-crud>
        </trade-card>
    </div>
</template>

<script>
import tableOption from "./config/mainList.json";
import { dateFormat } from "@/util/date";
export default {
    name: "detailsPageEdit",
    data() {
        return {
            treeStyle: "height:" + (window.innerHeight - 315) + "px",
            tableOption: {},
            uploadImgUrl: '',
        };
    },
    props: {
        data: {
            type: Array
        },
        disabled: {
            type: Boolean
        }
    },
    async created() {
        this.tableOption = await this.getColumnData(
            this.getColumnName(161.3),
            tableOption
        );
    },
    methods: {
        cellStyle() {
            return "padding:0;height:40px;";
        },
        addRow() {
            this.data.push({createBy:this.$store.getters.userInfo.user_name,createTime:dateFormat(new Date()), $cellEdit: true });
        },
        handleSucces(scope, res, file) {
            console.log(scope, res, file)
        },
        rowCell(row, index) {
            if (row.$cellEdit == true) {
                this.$set(row, "$cellEdit", false);
            } else {
                this.$set(row, "$cellEdit", true);
            }
        },
        rowDel(row) {
            this.$confirm("确定删除数据?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.$message({
                    type: "success",
                    message: "删除成功!"
                });
                this.data.splice(row.$index, 1);
            });
        },
        rowDown(row) {
            if (row.url) {
                window.open(row.url);
            } else {
                this.$message.error("请上传附件");
            }

        },
        async saveColumn() {
            const inSave = await this.saveColumnData(
                this.getColumnName(161.3),
                this.tableOption
            );
            if (inSave) {
                this.$nextTick(() => {
                    this.$refs.crud.doLayout();
                });
                this.$message.success("保存成功");
                //关闭窗口
                this.$refs.crud.$refs.dialogColumn.columnBox = false;
            }
        },
        async resetColumn() {
            this.tableOption = tableOption;
            const inSave = await this.delColumnData(
                this.getColumnName(161.3),
                tableOption
            );
            if (inSave) {
                this.$nextTick(() => {
                    this.$refs.crud.doLayout();
                });
                this.$message.success("重置成功");
                //关闭窗口
                setTimeout(() => {
                    this.$refs.crud.$refs.dialogColumn.columnBox = false;
                }, 1000);
            }
        }
    },
    watch: {
    }
};
</script>

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