index_template.vue

<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                 label-width="68px">
            <el-form-item label="模板名称" prop="templateName" label-width="100px">
                <el-input
                    v-model="queryParams.templateName"
                    placeholder="请输入模板名称"
                    clearable
                    @keyup.enter.native="handleQuery"
                    maxlength="15"
                />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="请选择状态" clearable @keyup.enter.native="handleQuery">
                    <el-option label="未发布" :value="0"></el-option>
                    <el-option label="已发布" :value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['SuppliesTemplate:SuppliesTemplate:add']"
                >新增
                </el-button>
            </el-col>
<!--            <el-col :span="1.5">
                <el-button
                    type="success"
                    plain
                    icon="el-icon-edit"
                    size="mini"
                    :disabled="single"
                    @click="handleUpdate"
                    v-hasPermi="['SuppliesTemplate:SuppliesTemplate:edit']"
                >修改
                </el-button>
            </el-col>-->
            <el-col :span="1.5">
                <el-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasPermi="['SuppliesTemplate:SuppliesTemplate:remove']"
                >删除
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="success"
                    plain
                    icon="el-icon-edit"
                    size="mini"
                    :disabled="multiple"
                    @click="releaseStatus"
                    v-hasPermi="['SuppliesTemplate:SuppliesTemplate:releaseStatus']"
                >发布
                </el-button>
            </el-col>

            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="SuppliesTemplateList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column type="index" width="80" align="center" label="序号" :index="indexMethod"/>
            <el-table-column label="模板名称" align="center" prop="templateName"/>
<!--            <el-table-column label="状态" align="center" prop="status">
                <template slot-scope="scope">
                    <div>
                        <el-switch
                            @change="toggleEnable(scope.row)"
                            v-model="scope.row.status"
                            :active-value="0"
                            :inactive-value="1"
                            active-color="#13ce66"
                            inactive-color="#cccccc"
                            active-text="已发布"
                            inactive-text="未发布">
                        </el-switch>
                    </div>
                </template>
            </el-table-column>-->
            <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                    <div>
                        <template v-if="scope.row.status === 0">
                            <span style="color: #0cc030;">已发布</span>
                        </template>
                        <template v-else-if="scope.row.status === 1">
                            <span style="color: #0077ff;">未发布</span>
                        </template>
                        <template v-else-if="scope.row.status === 2">
                            <span style="color: #ff0000;">未发布</span>
                        </template>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="releaseStatus(scope.row)"
                        v-hasPermi="['SuppliesTemplate:SuppliesTemplate:status']"
                        :style="{display : scope.row.status>0?'':'none'}"
                    >发布
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="offShelfStatus(scope.row)"
                        v-hasPermi="['SuppliesTemplate:SuppliesTemplate:status']"
                        :style="{display : scope.row.status===0?'':'none'}"
                    >下架
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleSave(scope.row)"
                        v-hasPermi="['SuppliesTemplate:SuppliesTemplate']"
                    >详情
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleCopy(scope.row)"
                        v-hasPermi="['SuppliesTemplate:SuppliesTemplate:edit']"
                    >复制
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleUpdate(scope.row)"
                        v-hasPermi="['SuppliesTemplate:SuppliesTemplate:edit']"
                        :style="{display : scope.row.status===1?'':'none'}"
                    >修改
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                        v-hasPermi="['SuppliesTemplate:SuppliesTemplate:remove']"
                    >删除
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-detailUpdate"
                        @click="detailUpdate(scope.row)"
                        v-hasPermi="['SuppliesTemplate:SuppliesTemplate:detailUpdate']"
                    >修改购入规则
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 添加或修改Excel模板对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<!--                <el-form-item label="状态" prop="status">-->
<!--                    <el-select v-model="form.status" placeholder="请选择状态">-->
<!--                        <el-option label="启用" :value="0"></el-option>-->
<!--                        <el-option label="禁用" :value="1"></el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->

                <el-upload
                    ref="uploadRef"
                    class="upload-demo"
                    drag
                    action=""
                    :before-upload="beforeUpload"
                    :on-change="handleChange"
                    :file-list="fileListName"
                >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传xlsx文件</div>
                </el-upload>

                <el-progress v-if="showProgress" :percentage="uploadProgress"></el-progress>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 添加或修改导入规则对话框 -->
        <el-dialog :title="title" :visible.sync="optionRole" width="500px" append-to-body>
            <el-form ref="forms" :model="forms" :rules="rules" label-width="80px">
                <el-form-item label="所属模板" prop="tempId">
                    <el-select v-model="selectedOption" filterable placeholder="请选择关联项" style="width:380px"  @change="handleOptionChange(selectedOption)" >
                        <el-option
                            v-for="option in options1"
                            :key="option.roleName"
                            :label="option.roleName"
                            :value="option.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="规则名称" prop="roleName">
                    <el-input v-model="forms.roleName" placeholder="请输入规则名称"  maxlength="36"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>


        <div id="luckysheet" :style="{ position: positionValue, top: '0', left: '0', right: '0', bottom: '0' }"></div>
        <!-- 遮罩层组件 -->
        <div v-if="uploading" class="overlay">
            <div class="loader"></div>
        </div>
    </div>

</template>

<style>
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader {
    border: 16px solid #f3f3f3; /* 转圈圈的颜色 */
    border-top: 16px solid #3498db; /* 转圈圈的主题颜色 */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

</style>

<style>
#luckysheet_info_detail_title {
    display: none;
}

#luckysheet_info_detail_update {
    display: none;
}

#luckysheet_info_detail_save {
    display: none;
}

.luckysheet-share-logo {
    display: none;
}
</style>


<script>
import {
    listSuppliesTemplate,
    listSuppliesrole,
    getSuppliesrole,
    updateSuppliesrole,
    getSuppliesTemplate,
    delSuppliesTemplate,
    addSuppliesTemplate,
    updateSuppliesTemplate,
    toggleEnable, toggleDisable,
    listSuppliesTemplateId, findName, releaseTemplateStatus, offShelfTemplateStatus, CopyTemplate
} from "@/api/ruoyi-myLuckyexcel/myluckyexcel";
import $ from 'jquery';
import XLSX from 'xlsx';
import LuckyExcel from 'luckyexcel';
import { Loading } from 'element-ui';

export default {
    name: "SuppliesTemplate",
    data() {
        return {
            selectedOption:'',
            positionValue: 'static',
            fileList: [{
                name: 'food.jpeg',
                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            }, {
                name: 'food2.jpeg',
                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            }],

            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            name: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 状态数据字典
            statusOptions: [],
            // Excel模板表格数据
            SuppliesTemplateList: [],
            //模板详情
            TemplateId: [],
            fileListName: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            open1: false,
            showProgress: false,
            uploadProgress: 0,
            optionRole:false,

            options1:[],

            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                detId: null,
                templateName: null,
                templateContent: null,
                status: null,
            },
            form: {},
            forms: {},
            rules: {},
        }
    },
    created() {

        this.getList();
        this.positionValue = "static";

    },
    mounted() {
        window.handleReturnButtonClick = this.handleReturnButtonClick;
    },

    methods: {
        /**启用 */
        toggleEnable(SuppliesTemplate) {
            console.log('你点击了【' + SuppliesTemplate.s + '】的开关控件，当前开关值:' + SuppliesTemplate.status);
            let enableText = ['已发布', '未发布'];
            if (SuppliesTemplate.status === 0) {
                toggleEnable(SuppliesTemplate.id).then((response) => {
                    if (response.code === 200) {
                        let message = '操作成功，已经将【' + SuppliesTemplate.templateName + '】的状态改为【' + enableText[SuppliesTemplate.status] + '】 !';
                        this.$message({
                            message: message,
                            type: 'success'
                        });
                    } else {
                        this.$message.error(response.message);
                    }
                });
            } else {
                toggleDisable(SuppliesTemplate.id).then((response) => {
                    if (response.msg === "200") {
                        let message = '操作成功，已经将【' + SuppliesTemplate.templateName + '】的状态改为【' + enableText[SuppliesTemplate.status] + '】 !';
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    } else {
                        this.getList();
                        this.$message.error(response.msg);
                    }

                });
            }
        },

        /**显示序号*/
        indexMethod(index) {
            return index + 1;
        },

        /**清空上传文件列表*/
        handleChange(file) {
            // 清空 fileList 中的旧文件
            this.fileListName = [];
            // 添加文件到 fileList 中
            this.fileListName.push(file);
        },

        /**上传事件 */
        async beforeUpload(file) {
            //存在重复
            findName(file.name).then(result => {
                console.log(result.data)
                if (result.data === "存在重复") {

                    this.fileListName = [];
                    this.$message.error('上传文件名重复，请修改后上传！')

                }
            })

            const isJpgOrPng = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';

            if (!isJpgOrPng) {
                this.$message.error('只能上传xlsx文件');
            }
            this.uploading = true;
            await LuckyExcel.transformExcelToLucky(file, (exportJson, lucksheetfile) => {
                this.form.templateName = file.name;
                this.form.templateContent = JSON.stringify(exportJson.sheets);
            });
            this.uploading = false;
            return isJpgOrPng;
        },

        // handleFileChange(event){
        //   var file = event.target.files[0];
        //   var fileName = file.name;
        //   fileName = fileName + "";
        //   LuckyExcel.transformExcelToLucky(file ,(exportJson,lucksheetfile)=>{
        //     this.form.templateName = fileName;
        //     this.form.templateContent = JSON.stringify(exportJson.sheets);
        //   });
        // },

        /** 查询Excel模板列表 */
        getList() {
            this.indexMethod(0);
            this.loading = true;
            listSuppliesTemplate(this.queryParams).then(response => {
                this.SuppliesTemplateList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.optionRole = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                detId: null,
                name: null,
                templateContent: null,
                status: 0,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.name = selection.map(item => item.templateName)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.fileListName = [];
            this.reset();
            this.open = true;
            this.title = "添加Excel模板";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            if (row.status===1) {
                this.fileListName = [];
                this.reset();
                const id = row.id || this.ids
                getSuppliesTemplate(id).then(response => {
                    console.log(response.rows[0])
                    this.form = response.rows[0];
                    this.open = true;
                    this.title = "修改Excel模板";
                });
            }else {
                this.msgError("文件文件已发布无法修改！！！")
            }
        },

        detailUpdate(row) {
            this.title="修改导入规则";
            this.selectedOption='';
            this.forms='';
            this.instea='';
            const id = row.id || this.ids
            listSuppliesrole(id).then(response =>{
                this.options1 = response.rows;
            });
            this.optionRole = true;
        },

        handleOptionChange(selectedOption) {

            getSuppliesrole(selectedOption).then(response => {
                this.forms = response.data;
                this.optionRole = true;
            });

        },
        /** 提交按钮 */
        submitForm() {
            if (!this.form.templateName) {
                this.msgError("上传的文件不能为空！")
            } else {
                this.fileListName = [];
                if (!this.form.templateName) {
                    this.msgError("上传文件为空！！！")
                } else {
                    this.$refs["form"].validate(valid => {
                        if (valid) {
                            if (this.form.id != null) {
                                updateSuppliesTemplate(this.form).then(response => {
                                    this.msgSuccess("修改成功");
                                    this.open = false;
                                    this.getList();
                                });
                            } else {
                                this.form.status = 1;
                                addSuppliesTemplate(this.form).then(response => {
                                    this.msgSuccess("新增成功");
                                    this.open = false;
                                    this.getList();
                                });
                            }
                        }
                    });
                }
            }
        },


        /** 详情按钮操作 */
        handleSave(row) {

            listSuppliesTemplateId(row.id).then(response => {

                this.TemplateId = response.rows;

                this.luckyLook();

            })

        },
        /**展示详情luckysheet */
        luckyLook() {

            this.positionValue = 'absolute';
            luckysheet.destroy();
            luckysheet.create({
                container: "luckysheet", // Luckysheet 的容器元素 ID
                title: this.TemplateId[0].templateName, // Excel 文件名
                data: JSON.parse(this.TemplateId[0].templateContent), // Excel 数据
                showtoolbar: false, //是否第二列显示工具栏
                showinfobar: true, //是否显示顶部名称栏
                showsheetbar: false, //是否显示底部表格名称区域
                pointEdit: false, //是否是编辑器插入表格模式
                pointEditUpdate: null, //编辑器表格更新函数
                allowEdit: false,//作用：是否允许前台编辑
                functionButton: '<button id="exportButton" class="btn btn-primary" style=" padding:3px 6px; font-size: 16px;width: 100px;height: 27px; margin-right: 85px;" onclick="handleReturnButtonClick()">返回</button>',

            });

        },
        /**详情返回按钮 */
        handleReturnButtonClick() {

            this.positionValue = 'static';
            luckysheet.destroy();

        },

        /** 删除按钮操作*/
        handleDelete(row) {
            const ids = row.id || this.ids;
            const name = row.templateName || this.name;
            this.$confirm('是否确认删除模板名称为"' + name + '"的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return delSuppliesTemplate(ids);
            }).then((result) => {
                if (result.msg === "312") {
                    this.getList();
                    this.$confirm('模板名称为"' + result.data + '"的数据项下存在关联规则，请先删除关联规则在删除模板', "警告", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }).then(() =>{this.getList();})
                } else {
                    this.getList();
                    this.msgSuccess("删除成功");
                }
            }).catch(() => {
            })

        },
        releaseStatus(row) {

            const ids = row.id || this.ids;
            const name = row.templateName || this.name;
            this.$confirm('是否确认发布模板名称为"' + name + '"的数据项?（发布之后无法修改！）', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return releaseTemplateStatus(ids);
            }).then((result) => {
                if (result.data === "发布失败") {
                    this.getList();
                    this.msgError("模板已发布");
                } else {
                    this.getList();
                    this.msgSuccess("发布成功");
                }
            }).catch(() => {
            })

        },

        offShelfStatus(row) {

            const ids = row.id || this.ids;
            const name = row.templateName || this.name;
            this.$confirm('是否确认下架模板名称为"' + name + '"的数据项?（下架之后转换规则中将无法使用该模板！）', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return offShelfTemplateStatus(ids);
            }).then((result) => {
                if (result.data === "下架失败") {
                    this.getList();
                    this.msgError("下架失败");
                } else {
                    this.getList();
                    this.msgSuccess("下架成功");
                }
            }).catch(() => {
            })

        },

        handleCopy(row){

            this.$confirm('是否确认复制名称为"' + name + '"的模板?（复制后名称会改变）', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return CopyTemplate(row.id);
            }).then((result) => {

                if (result.data === "复制失败") {
                    this.getList();
                    this.msgError("复制失败");
                } else {
                    this.getList();
                    this.msgSuccess("复制成功,新模板名称为：“"+result.data+"”");
                }
            }).catch(() => {
            })

        },

        // /** 导出按钮操作 */
        // handleExport() {
        //   const queryParams = this.queryParams;
        //   this.$confirm('是否确认导出所有导入规则数据项?', "警告", {
        //     confirmButtonText: "确定",
        //     cancelButtonText: "取消",
        //     type: "warning"
        //   }).then(function() {
        //     return exportMyluckyexcel(queryParams);
        //   }).then(response => {
        //     this.download(response.msg);
        //   })
        // }
    }
}
</script>