spfm-market-front/src/pages/main/departWorkLists/index.vue

<template>
    <div class="container">
        <div class="main-box" :key="simpleSheetKey">
            <div class="inner-left">
                <div class="button-list">
                    <el-button size="mini" type="" @click="addMenu('root')"  :disabled="!authData" >
                        添加根目录</el-button
                    >
                    <el-button size="mini" type="" @click="addMenu('detail')" :disabled="!authData">
                        添加清单目录</el-button
                    >
                    <el-button size="medium" type="" @click="delMenu" :disabled="!authData"> 删除 </el-button>
                </div>
                <el-alert type="warning" :closable="false">
                    <template slot="title">
                        <span style="word-break: break-all">
                            {{
                        checkedNode && checkedNode.length > 0
                        ? "当前选择节点名称：" + checkedNode[0].name
                        : "当前无选择节点"
                        }}
                        </span>
                    </template>
                </el-alert>
                <div style="margin: 10px 0">
                    <el-input
                        size="medium"
                        placeholder="请输入内容"
                        v-model="filterText"
                        class="input-with-select"
                        clearable
                        @change="
                                () => {
                                  if (!filterText) {
                                    searchMenu();
                                  }
                                }
                            "
                    >
                        <el-button
                            slot="append"
                            @click="searchMenu"
                            icon="el-icon-search"
                        ></el-button>
                    </el-input>
                </div>
                <div
                    style="
                          height: calc(100% - 182px);
                          overflow-y: auto;
                          margin-top: 20px;
                        "
                >
                    <el-tree
                        ref="catalogTree"
                        :expand-on-click-node="true"
                        :auto-expand-parent="true"
                        :default-expand-all="true"
                        :props="defaultProps"
                        @node-click="nodeClick"
                        :filter-node-method="filterNode"
                        :data="menuList"
                        node-key="id"
                    >
                        <span class="custom-tree-node" slot-scope="{ node }">
                                <el-tooltip effect="light" :content="node.label" placement="right">
                                    <span class="item-tit">
                                        <span :style="
                                            node.data.parentCode===0
                                            ? 'font-size:14px;padding-left:5px'
                                            : 'font-size:12px;padding-left:5px'
                                        "
                                        >
                                             {{node.data.name}}
                                        </span>
                                    </span>
                                </el-tooltip>
                        </span>
                    </el-tree>
                </div>
            </div>
            <div  class="inner-right" v-if="addOnlineWordFlag">
                <simple-dialog
                    v-if="fullscreen"
                    :fullscreen="fullscreen"
                    :visible="addOnlineWordFlag"
                    width="1200px"
                >
                    <simple-sheet ref="simpleSheet" :type="type"
                                  :fullscreen="fullscreen"
                                  @saveData="handleSaveData"
                                  @handleFullscreen="handleFullscreen"
                                  @save="handleSave"
                                  :workName="workName"
                                  :work-data="workData"
                                  :id="tmpId" :mkdirId="params.mkdirId" :isCreater="isCreater"/>
                </simple-dialog>
                <simple-sheet v-else :type="type"
                              :fullscreen="fullscreen"
                              @saveData="handleSaveData"
                              @handleFullscreen="handleFullscreen"
                              :workName="workName"
                              :work-data="workData"
                              @save="handleSave"
                              :id="tmpId" :mkdirId="params.mkdirId" :isCreater="isCreater"/>
            </div>

            <div class="inner-right" v-if="workListFlag">
                <div class="search">
                    <span>{{ catalogueName }}</span>
                </div>
                <div style="margin-bottom: 10px;margin-top: 10px;">
                    <el-button
                        v-if="checkedNode && checkedNode.length === 2"
                        type="primary"
                        size="mini"
                        @click="addFile('add',{delFlag:'1'})"
                        style="width: 80px"
                    >
                        新建
                    </el-button>
                </div>
                <div class="tabBoxClass">
                    <el-table
                        height="calc(100% )"
                        class="com-table"
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        :key="tableData.id"
                        border
                        size="small"
                        style="width:100%"
                        v-loading="loading"
                    >
                        <el-table-column
                            prop="templateName"
                            show-overflow-tooltip
                            label="名称"
                            min-width="25%"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="createTime"
                            show-overflow-tooltip
                            label="创建时间"
                            min-width="20%"
                            align="center"
                        />
                        <el-table-column
                            prop="createCity"
                            show-overflow-tooltip
                            label="创建科室"
                            min-width="25%"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="createBy"
                            show-overflow-tooltip
                            label="创建人"
                            min-width="10%"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="stateNm"
                            show-overflow-tooltip
                            label="状态"
                            min-width="10%"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="150">
                            <template slot-scope="scope">
                                <el-button
                                    :disabled="scope.row.editFlag=='1'?false:true"
                                    class="font-btn"
                                    size="mini"
                                    type="text"
                                    plain
                                    @click="addFile('edit',scope.row)"
                                >编辑
                                </el-button>
                                <el-button
                                    class="font-btn"
                                    size="mini"
                                    type="text"
                                    plain
                                    @click="addFile('view',scope.row)"
                                >查看
                                </el-button>
                                <el-button
                                    v-show="scope.row.delFlag=='1'?true:false"
                                    class="font-btn"
                                    size="mini"
                                    type="text"
                                    plain
                                    @click="deleteOne(scope.row)"
                                >删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                                            <el-pagination
                                                class="pageBox"
                                                @current-change="currchange"
                                                layout="total, prev, pager, next"
                                                background
                                                :total="total"
                                            >
                                            </el-pagination>
                </div>
            </div>
        </div>
        <el-dialog
            class="p-new-box"
            size="50%"
            title="新增目录"
            :append-to-body="true"
            :visible.sync="addDialogStatus"
            :close-on-click-modal="false"
        >
            <el-form
                :model="formData"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
                style="width: 90%; margin: 30px auto"
            >
                <el-form-item label="目录名称:" prop="name">
                    <el-input
                        v-model="formData.name"
                        placeholder="请输入目录名称"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="父级目录:"
                    prop="parentName"
                >
                    <el-input
                        disabled
                        v-model="formData.parentName"
                        placeholder="请输入父级名称"
                    ></el-input>
                </el-form-item>
                <el-form-item label="操作人:" prop="createName">
                    <el-input
                        v-model="formData.createId"
                        disabled
                    ></el-input>
                </el-form-item>
                <div class="drawer-footer" style="text-align: right">
                    <el-button
                        type="primary"
                        size="medium"
                        @click="submitForm('ruleForm')"
                    >确认</el-button
                    >
                    <el-button
                        style="margin-right: 40px"
                        size="medium"
                        @click="resetForm('ruleForm')"
                    >取消</el-button
                    >
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import Vue from 'vue';
import simpleSheet from "./sheet.vue";
import simpleDialog from "./dialog.vue";
export default {
    components: {
        simpleSheet,
        simpleDialog
    },
    data() {
        return {
            catalogueName:"部门工作清单",
            isCreater:"0",//1：创建者 0：非创建者
            addDialogStatus: false,
            tooltit: "部门工作清单",
            filterText: "", // tree搜索value
            menuList: [], // tree数据源
            checkedNode: [], // 选中节点信息
            authData: false, //是否有权限 false无全权限
            fullscreen: false,
            formData: {
                name: "",
                parentCode: "",
                parentName: "",
                createId: JSON.parse(sessionStorage.userInfo).loginNo,
            },
            defaultProps: {
                children: "children",
                label: "name",
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入目录名称",
                        trigger: "change",
                    },
                ],
            },

            tmpId:'',
            rowData:{},
            type:'add',
            workListFlag:true,
            addOnlineWordFlag:false,
            loading: false,
            tableData: [
                // {
                //     templateName:"测试",
                //     createTime:"2022-6-12",
                //     createCity:"规划开发室",
                //     createBy:"范岩",
                //     state:"开",
                //     delFlag:"1",//1:代表创建人有删除权限 0:不显示
                //     editFlag:"0"//1:不置灰（状态state字段为开时）；0：置灰（状态state字段为关时且不是创建人时）
                // }
            ], // 表格数据源
            infolist: {
                isFile: "1",
                title: "", // 材料名称
                meeting: "", // 会议名称
                titleBg: "", // 材料背景
                auth: "1", // 查看权限
                mkFileShareAttachList: [], // 附件数据
                parentId: "",
            }, // 提交表单数据源
            filerules: {
                title: [
                    {
                        required: true,
                        message: "请输入材料名称",
                        trigger: "change",
                    },
                ],
                meeting: [
                    {
                        required: true,
                        message: "请输入会议名称",
                        trigger: "change",
                    },
                ],
                titleBg: [
                    {
                        required: true,
                        message: "请输入材料背景",
                        trigger: "change",
                    },
                ],
            },
            subType: "",
            total: 0,
            pageSize: 1,
            params: {
                id: "",
                mkdirId:"3"
            },
            paramsSearch: {
                isFile: "1",
                id: "",
            },
            fileInfo: {
                type: "bt1n",
                typename: "上传文件",
                limit: 5,
                url: "/market/cmkFileShareNet/upload",
                fileList: [],
            },
            titname: "新增",
            dialogStatus: false,
            attList: [],
            simpleSheetKey:0,
            workName:'',
            workData:null,
        };
    },
    methods: {
        handleSaveData(workName, workData){
            this.workName = workName;
            this.workData = workData;
        },
        handleFullscreen(fullscreen){
            if (fullscreen){
                Vue.set(this, 'fullscreen', fullscreen)
                /*this.$nextTick(()=>{
                    this.$refs.simpleSheet.handleFullscreenOption()
                })*/
            }else {
                this.$nextTick(()=>{
                    this.$refs.simpleSheet.handleFullscreenOption()
                    Vue.set(this, 'fullscreen', fullscreen)
                })
            }

        },
        saveData(workName, workData){
            this.workName = workName;
            this.workData = workData;
        },
        // 搜索按钮事件
        searchMenu() {
            this.$refs.catalogTree.filter(this.filterText);
        },
        // 新增目录-表单提交
        async submitForm(formName) {
            let valid = await this.$refs[formName].validate().catch((err) => err);
            if (valid) {
                let nm = this.formData.name;
                if(""===nm.trim()){
                    this.$message({
                        type: "error",
                        message: "新建失败!目录名称不能为空",
                    });
                    return;
                }
                this.$http({
                    url:"/market/mkWorkListCatalogue/add",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: this.formData,
                }).then((res) => {
                    if (res.data.result === 0) {
                        this.$message({
                            type: "success",
                            message: res.data.desc,
                        });
                        this.getData();
                        this.$refs[formName].resetFields();
                        this.addDialogStatus = false;
                    }else {
                        this.$message({
                            type: "error",
                            message: res.data.desc,
                        });
                    }
                });
            }
        },
        // 取消新增目录
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.addDialogStatus = false;
        },
        // 新增目录
        addMenu(flag) {
            if (flag === 'detail'){
                if (!this.checkedNode || this.checkedNode.length !== 1){
                    this.$message({
                        type: "warning",
                        message: "请先选择根目录",
                    });
                    return;
                }
                this.formData.parentCode = this.checkedNode[0].id
                this.formData.parentName = this.checkedNode[0].name
            }else if (flag === 'root'){
                this.formData.parentCode = 0;
                this.formData.parentName = ''
            }
            this.addDialogStatus = true
        },
        // 删除目录
        delMenu() {
            if (!this.checkedNode || this.checkedNode.length === 0) {
                this.$message("请先选中要删除的目录");
            } else {
                this.$confirm("即将删除此条数据, 是否删除?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.$http({
                            url: "/market/mkWorkListCatalogue/del",
                            method: "post",
                            headers: {
                                "Content-Type": "application/json",
                            },
                            data: {
                                id: this.checkedNode[0].id,
                                parentCode: this.checkedNode[0].parentCode
                            },
                        }).then((res) => {
                            if (res.data.result === 0) {
                                this.$notify({
                                    title: "成功",
                                    message: res.data.desc,
                                    type: "success",
                                });
                                this.checkedNode = [];
                                //删除成功后渲染右边目录和表格数据
                                this.catalogueName="部门工作清单";
                                this.params.mkdirId='-1';//确保查不到数据
                                this.getList(this.params, this.pageSize);
                                this.getData();
                            }else if(res.data.result === 1) {
                                this.$notify({
                                    title: "失败",
                                    message: res.data.desc,
                                    type: "error",
                                });
                            }
                        });
                    })
                    .catch(() => {});
            }
        },
        // tree过滤方法
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        // 点击树节点事件
        nodeClick(data, node) {
            this.formData.parentCode = data.parentCode;
            let clickNode = []
            this.getParent(node, clickNode)
            this.checkedNode = clickNode
            if (clickNode.length === 2){
                this.catalogueName = clickNode[1].name + '-' + clickNode[0].name
                this.params.mkdirId = clickNode[0].id + ''
                this.getList(this.params, this.pageSize);
            }else if(clickNode.length === 1){
                //父目录，则显示新建按钮只显示表头
                this.catalogueName =data.name
                this.params.mkdirId=data.id;
                this.getList(this.params, this.pageSize);
            }
            //返回列表页面
            this.addOnlineWordFlag=false;
            this.workListFlag=true;
        },
        getParent(node, list){
            if (node.level > 0){
                list.push(node.data)
                this.getParent(node.parent, list);
            }
        },
        // 获取目录
        getData() {
            this.$http({
                url: "/market/mkWorkListCatalogue/queryList",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: { isFile: "0" },
            }).then((res) => {
                if (res.data.result === 0) {
                    this.menuList = res.data.body;
                }else {
                    this.$message({
                        message: res.data.desc,
                        type: "error",
                    });
                }
            });
        },
        // 获取权限
        getAuthData() {
            let menus = JSON.parse(window.sessionStorage.childrenMenus);
            for(let n=0;n<menus.length;n++){
                if (menus[n].jspUrl === "/workListCatalogueAuth") {
                   this.authData = true
                }
            }
        },


        handleSave() {
            // switch (type) {
            //     case "add":
            console.log("************")
            this.addOnlineWordFlag=false;
            this.workListFlag=true;
                //     break;
                // case "edit":
                //     this.handleVisible("edit");
                //     break;
            // }
            //调用list列表接口根据目录ID
            // this.handleInit();
            this.getList(this.params, this.pageSize);
        },
        //搜索数据
        searchInfo(v) {
            this.paramsSearch = {};
            v[0] ? this.paramsSearch.title = v[0] : '';
            this.paramsSearch.isFile = "1";
            // this.paramsSearch.parentId = this.infolist.parentId;
            this.pageSize = 1;//重置分页
            this.getList(this.paramsSearch, this.pageSize);
        },
        // 新增在线文档
        addFile(type,data) {
            // this.titname = "新增";
            this.workName = ""
            this.workData = null
            this.workListFlag = false;
            this.addOnlineWordFlag = true;
            this.type=type;
            this.isCreater = data.delFlag;
            this.tmpId=data.id
            // switch (type) {
            //     case "add":
            //         break;
            //     case "edit":
            //
            //         this.rowData=data;
            //         break;
            //     case "view":
            //         this.rowData=data;
            //         break;
            // }
        },
        // 上传回调
        uploadBack(v) {
            this.attList = v;
        },
        deleteOne(val) {
            this.$confirm("即将删除此条数据, 是否删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.pageSize = 1;
                    this.$http({
                        url: "/market/workLists/del",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        data: {
                            id: val.id,
                        },
                    }).then((res) => {
                        if (res.data.result == 0) {
                            this.$message({
                                message: "删除成功",
                                type: "success",
                            });
                            this.getList(this.params, this.pageSize);
                        }else if(res.data.result == 1) {
                            this.$message({
                                message: res.data.body,
                                type: "error",
                            });
                        }
                    });
                })
                .catch(() => {});
        },
        //功能栏
        iconCli(v) {
            if (v === 1) {
                this.getList(this.params, this.pageSize);
            }
            if (v === 2) {
                this.fullscreen = !this.fullscreen;
            }
        },
        // 分页
        currchange(v) {
            this.pageSize = v;
            this.getList(this.params, this.pageSize);
        },
        //获取列表
        getList(v, n) {
            this.pageSize = n;
            this.loading = true;
            this.tableData = [];
            this.$http({
                url: "/market/workLists/list",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    page: '{"pageNo":"' + n + '","pageSize":"10"}',
                },
                data: v,
            }).then((res) => {
                if(res.data.result==0){
                    this.tableData=res.data.body.data
                    this.tableData.forEach(item=>{
                        item.stateNm=item.state=='1'?'开启':'关闭';
                    });
                }else{
                    this.$message({
                        message: "获取失败",
                        type: "error",
                    });
                }
                this.total = res.data.body.totalRecord;
                this.loading = false;
            });
        },
    },
    mounted() {
        this.getData();
        this.getAuthData();
    },
};
</script>
<style scoped lang="scss">
.radviv div {
    width: 80% !important;
}
.pageBox {
    text-align: right;
    margin-top: 5px;
}

.info-line {
    width: 100%;
    display: block;
    // padding-left: 20px;

    div {
        width: 50%;
        display: inline-block;
    }

    span {
        width: 100px;
        display: inline-block;
        text-align: right;
        font-weight: bold;
        font-size: 14px;
        padding-right: 15px;

        i {
            color: red;
            display: inline-block;
            padding-right: 5px;
        }
    }

    .el-select,
    .el-input {
        width: calc(100% - 100px);
    }

    .tree {
        width: calc(100% - 100px);
    }
}

.online {
    width: 100%;

    .el-select {
        width: calc(100% - 100px);
    }

    span {
        vertical-align: top;
    }

    .el-textarea {
        width: calc(100% - 100px);
    }
}
</style>

<style lang="scss" scoped>
.titbox {
    div {
        float: right;

        i {
            font-size: 22px;
            margin-left: 20px;
            cursor: pointer;
        }
    }
}
.container {
    background-color: #f0f2f5;
    .clearStyle {
        cursor: pointer;
        color: #0b82ff;
    }
    .el-col {
        background-color: white;
        padding: 0 20px;
    }

    .container-box {
        padding: 0;
        margin-top: 0;
        height: 100%;
        background-color: white;
        padding: 20px;
    }

    .main-box {
        overflow: hidden;
        display: flex;
        background-color: white;
        padding: 20px 0;

        > div {
            background-color: white;
        }

        .inner-left {
            width: 320px;
            padding: 0 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            height: calc(100vh - 220px);

             .canel-style {
             	color: #1890ff;
             	cursor: pointer;
             	padding-left: 10px;
             }
        }

        .inner-right {
            flex: 1;
            margin: 0 2%;
            //overflow-y: auto;
            //   border-left: 1px solid #ddd;
            height: calc(100vh - 220px);
            width: calc(100% - 320px - 4%);
            .tabBoxClass {
                height: calc(100% - 120px);
            }
        }
    }
}

.button-list {
    padding: 30px 0 10px 0;
    display: flex;
    //   justify-content: center;
    justify-content: space-between;
}

.choice-style {
    background: rgb(255, 255, 255);
}

.tree-action {
    bottom: 0;
    width: 100%;
    // border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: left;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
}

.tree-line {
    // .el-tree-node__content {
    //   padding-left: 0 !important;
    // }

    .el-tree-node__expand-icon.is-leaf {
        display: none !important;
    }

    .el-tree-node {
        position: relative;
        padding-left: 16px; // 缩进量
    }

    .el-tree-node__children {
        padding-left: 16px; // 缩进量
    }

    // 竖线
    .el-tree-node::before {
        content: "";
        height: 100%;
        width: 1px;
        position: absolute;
        left: -3px;
        top: -17px;
        border-width: 1px;
        border-left: 1px dashed #52627c;
    }

    // 当前层最后一个节点的竖线高度固定
    .el-tree-node:last-child::before {
        height: 38px; // 可以自己调节到合适数值
    }

    // 横线
    .el-tree-node::after {
        content: "";
        width: 24px;
        height: 20px;
        position: absolute;
        left: -3px;
        top: 20px;
        border-width: 1px;
        border-top: 1px dashed #52627c;
    }

    // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
    & > .el-tree-node::after {
        border-top: none;
    }

    & > .el-tree-node::before {
        border-left: none;
    }

    // 展开关闭的icon
    .el-tree-node__expand-icon {
        font-size: 16px;

        // 叶子节点（无子节点）
        &.is-leaf {
            color: transparent;
            // display: none; // 也可以去掉
        }
    }
}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    // .item-tit{
    //     color: #ffffff;
    // }
}
.el-tree ::v-deep .custom-tree-node,
.el-tree ::v-deep .custom-tree-node .item-tit{
    overflow: hidden!important;
    text-overflow:ellipsis!important;
    white-space: nowrap!important;
}
</style>