Smart_platform_ui/src/components/collection/main.vue

<template>
    <div>
        <trade-card title="收费信息">
            <avue-crud ref="crud" :data="data" :option="tableOption" @row-del="rowDel" @saveColumn="saveColumn"
                @resetColumn="resetColumn" :cell-style="cellStyle" @selection-change="selectionChange">
                <template slot="menuLeft">
                    <el-button type="primary" icon="el-icon-plus" size="small" @click.stop="addBut">新增
                    </el-button>
                    <el-button type="info" size="small" @click.stop="addJFA">作业费协议
                    </el-button>
                    <el-button type="primary" size="small" @click.stop="feeCon">费用确认单
                    </el-button>
                </template>
            </avue-crud>
        </trade-card>
        <el-dialog title="作业费协议" :visible.sync="dialogVisible" width="70%" :before-close="handleClose" append-to-body>
            <span>
                <avue-crud ref="crud" :data="jfaData" :option="jfaOption" :cell-style="cellStyle"
                    @selection-change="selectionChange2">
                </avue-crud>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" size="small" @click="importData">导 入</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import tableOption from "./config/mainList.json";
export default {
    name: "detailsPageEdit",
    data() {
        return {
            treeStyle: "height:" + (window.innerHeight - 315) + "px",
            tableOption: {},
            dialogVisible: false,
            selectionList: [],
            selectionList2: [],
            jfaData: [],
            jfaOption: {
                selection: true,
                tip: false,
                header: false,
                menu: false,
                index: true,
                column: [
                    {
                        label: '客户名称',
                        prop: 'corpname'
                    },
                    {
                        label: '费用名称',
                        prop: 'name'
                    },
                    {
                        label: '计价单位',
                        prop: 'feeUnitid'
                    },
                    {
                        label: '单价',
                        prop: 'price'
                    },
                    {
                        label: '备注',
                        prop: 'remark'
                    }
                ]
            }
        };
    },
    props: {
        data: {
            type: Array
        }
    },
    async created() {
        this.tableOption = await this.getColumnData(
            this.getColumnName(161.1),
            tableOption
        );
    },
    methods: {
        cellStyle() {
            return "padding:0;height:40px;";
        },
        addBut() {
            this.$emit('addBut')
        },
        addRow(row) {
            this.data.push({ ...row, $cellEdit: true });
        },
        addJFA() {
            this.dialogVisible = true
        },
        importData() {
            if (this.selectionList2.length) {
                console.log('11')
            } else {
                this.$message.error("请选择作业费协议!");
            }
        },
        handleClose() {

        },
        feeCon() {
            if (this.selectionList.length) {
                console.log('11')
            } else {
                this.$message.error("请选择需要打印的明细!");
            }
        },
        selectionChange(list) {
            this.selectionList = list
        },
        selectionChange2(list) {
            this.selectionList2 = list
        },
        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);
            });
        },
        async saveColumn() {
            const inSave = await this.saveColumnData(
                this.getColumnName(161.1),
                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.1),
                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>