2022-08-04 留白代码

    <div class="dialog_BG">

        <el-card class="card-bg">

            <div class="right-bg">

                <div class="search-bg">

                    <div class="item-bg">

                        <p class="label-bg">组织：

                            slot="middle"

                            style="display:block;"

                        >

                                :class="['company-info', 'f-l', 'center']"

                                :list="companyList"

                                :data="companyTree"

                                :node-map="nodeMap"

                                :props="props"

                                :default-title="title"

                                :default-expand="defaultExpand"

                                :current-node-key="orgId"

                                @node-click="handleNodeClick"

                            >


<!--                        <p class="label-bg">类型：-->


<!--                                  placeholder="请选择">-->





<!--                        <el-checkbox v-model="isTunnelType" @change="handleChangeVal()">只显示瓦斯隧道-->



<!--                        <p class="label-bg">状态：-->


<!--                                  placeholder="请选择">-->





<!--                        <p @click="download">导出-->



                <el-table :data="tableData" height="100%" class="form-bg selfTable" :header-cell-style="{

background:'rgba(0, 85, 255, 0.2)',

          color:'rgba(255, 255, 255, 1)',

        }">

                    <el-table-column label="序号" align="center" min-width="80" :show-overflow-tooltip="true">

                        <template slot-scope="scopt">

                            {{ pageSize * currentPage - pageSize + (scopt.$index + 1) }}

                        property="workPointName"

                        label="项目名称"

                        align="center"

                    >

                        property="projectName"

                        label="公司名称"

                        align="center"

                        min-width="100"

                    >

                        label="所属标段"

                        align="center"

                        min-width="100"

                    >

                            align="center"

                            property="bdName"

                            label="作业人数"

                            width="120">

                            align="center"

                            property="bdName"

                            label="管理人数"

                            width="120">

                            align="center"

                            property="bdName"

                            label="总人数"

                            width="120">

                        label="隧道类型"

                        align="center"

                    >

                            align="center"

                            property="tunnelType"

                            label="作业人数"

                            width="120">

                            align="center"

                            property="tunnelType"

                            label="管理人数"

                            width="120">

                            align="center"

                            property="tunnelType"

                            label="总人数"

                            width="120">

                        property="safeStatus"

                        label="出勤率"

                        align="center"

                        min-width="90"

                    >

                        <template slot-scope="scope">

                            <div :class="

                scope.row.safeStatus =='正常' ?'Coregreen' :'Corered'

              ">

                                <span v-if="scope.row.safeStatus" class="backGre">

                                <span class="ColorFon">{{ scope.row.safeStatus }}

                <el-pagination background class="page-bg" layout="prev, pager, next" :current-page.sync="currentPage"

                              :page-size="pageSize" :total="totalCount" :page-sizes="[20]" @size-change="handleSizeChange"

                              @current-change="handleCurrentChange">

        <img class="shadowImg" src="/static/front/crcckl/img/shadow.png" alt="" />

import apifrom "table/api/crcckl/index";

import commonMixinfrom "table/views/mixins";

import { downloadFile }from "utils/file";

import { Cascader }from "element-ui";

import { getStorageItem }from "utils";

import crccklTableSelect from "../components/crccklTableSelect";

import { getNodeMap, initLazyTree }from "@/utils";

import {notClickableNodeRemove }from "../components/util";

import { $get }from "@/utils/request";

export default {

name:"CustomCrccklProjectSupervisionInformation",

    mixins: [commonMixin],

    components: {

[Cascader.name]: Cascader,

        crccklTableSelect,

    },

    data() {

return {

status:"",

            value:"",

            VAstatus:"",

            VAtype:"",

            tableData: [],

            orgIdValue:"",

            Params: {

label:"name",

                value:"idPath",

                children:"children",

            },

            currentPage:1, //当前页数

            pageSize:20, //每页条数

            totalCount:0, //总条数

            companyList: [],

            defaultExpand: [],

            companyTree: [],

            nodeMap: {},

            props: {

children:"children",

                label:"shortName",

                // 设置 expand arrow 显隐

                isLeaf(data, node) {

return node.data.leaf ===1;

                },

            },

            title:"",

            orgId:"",

            isTunnelType:true,

            typeOption: [],//类型下拉框

            selectOption: [],//状态下拉框

        };

    },

    created() {

this.orgId = getStorageItem("organiz_id");

    },

    mounted() {

this.VAtype =this.deviceType ?this.deviceType :this.VAtype;

        this.init();

    },

    computed: {

deviceType() {

return this.$route.query.deviceType;

        },

    },

    methods: {

init() {

this.getOptionList()

this.getData();

            this.fetchOrgListForProduct();

        },

        getOptionList() {

this.$post(

`${api.getTunnelType}?tenantId=${this.rootId}&companyId=${this.companyId}`

            ).then((res) => {

this.typeOption = res.data

                this.VAtype=res.data[0].code

            })

this.$post(

`${api.getTunnelStatus}?tenantId=${this.rootId}&companyId=${this.companyId}`

            ).then((res) => {

this.selectOption = res.data

                this.VAstatus=res.data[0].code

            })

},

        handleChangeVal() {

this.currentPage =1

            this.getData();

        },

        handleNodeClick(item) {

this.orgIdValue = item.idPath.replace(/\//g, "_");

            this.handleChangeVal();

        },

        fetchOrgListForProduct() {

let tenantId =this.rootId;

            let requests = [

$get(api.fetchListOrgsLite(tenantId, this.companyId), {

groupCode:"EW",

                }),

            ];

            Promise.all(requests).then((res) => {

let orgList = res[0].data;

                if (orgList.length) {

const fullDataMap = getNodeMap(orgList, "parentId");

                    let filterList =notClickableNodeRemove(fullDataMap);

                    const expandLevel =1;

                    let { nodeMap, treeData, allLevelIds } = initLazyTree(

filterList,

                        {

label:"shortName",

                            parent:"parentId",

                            rootId:null,

                            sortFn: (a, b) => a["orderNo"] - b["orderNo"],

                        },

                        expandLevel

);

                    if (treeData.length) {

this.companyList = filterList;

                        this.companyTree = treeData;

                        this.nodeMap = nodeMap;

                        this.title ="请选择";

                        this.defaultExpand = allLevelIds;

                    }

}

});

        },

        // 格式化数据，递归将空的children置为undefined

        formatData(data) {

for (var i =0; i < data.length; i++) {

if (data[i].children.length <1) {

// children若为空数组，则将children设为undefined

                    data[i].children =undefined;

                }else {

// children若不为空数组，则继续 递归调用 本方法

                    this.formatData(data[i].children);

                }

}

return data;

        },

        download() {

downloadFile({

url: api.getTunnelList,

                query: {

tenantId:this.rootId,

                    companyId:this.companyId,

                    exportExcel:true,

                    idPath:this.orgIdValue,

                    status:this.VAstatus,

                    type:this.VAtype,

                    isTunnelType:this.isTunnelType ?'1' :'0',

                },

                data: {},

                filename:this._title,

                type:"excel",

            });

        },

        getData() {

//

            this.$post(

`${api.getTunnelList}?tenantId=${this.rootId}&companyId=${this.companyId}&status=${this.VAstatus}&idPath=${this.orgIdValue}&type=${this.VAtype}&currentPage=${this.currentPage}&pageSize=${this.pageSize}&isTunnelType=${this.isTunnelType ?'1' :'0'}`

            ).then((res) => {

this.tableData = res.data.records;

                this.totalCount = res.data.totalCount;

            });

        },

        handleClick(row) {

this.$get(

`${api.NewJumpLink}?tenantId=${this.rootId}&orgId=${row.orgId

                }&accessToken=${getStorageItem("access_token")}`

            ).then((res) => {

window.open(res.data);

            });

        },

        // 分页=分页大小切换=========================

        handleSizeChange(val) {

this.pageSize = val;

            this.getData();

        },

        // 分页=分页切换=============================

        handleCurrentChange(val) {

this.currentPage = val;

            this.getData();

        },

    },

};

<style lang="less" scoped>

.checkboxSize /deep/ .el-checkbox__label {

font-size:13px;

    padding-left:7px;

}

.Coregreen {

.backGre {

display:inline-block;

        width:8px;

        height:8px;

        background:#31bf78;

        margin-right:1px;

        border-radius:80%;

    }

.ColorFon {

font-size:0.875em;

        color:#31bf78;

    }

}

.Corered {

.backGre {

display:inline-block;

        width:8px;

        height:8px;

        background:#ff0000;

        margin-right:1px;

        border-radius:80%;

    }

.ColorFon {

font-size:0.875em;

        color:#ff0000;

    }

}

.fontC {

color:#31bf78;

    cursor:pointer;

}

// 表格定制化简单法  优化建议函数处理

/deep/ .selfTable  {

border:none;

}

/deep/.el-table__body-wrapper tr td:nth-child(1){

border-right:none;

}

/deep/.el-table__body-wrapper tr td:nth-child(2){

border-right:none;

}

/deep/.el-table__body-wrapper tr td:nth-child(4){

border-right:none;

}

/deep/.el-table__body-wrapper tr td:nth-child(5){

border-right:none;

}

/deep/.el-table__body-wrapper tr td:nth-child(7){

border-right:none;

}

/deep/.el-table__body-wrapper tr td:nth-child(8){

border-right:none;

}

/deep/.el-table__body-wrapper tr td:last-child{

border-right:none;

}

/deep/.el-table td{

border-right:1px solid rgba(0, 85, 255, .2);

}

/deep/.el-table--border th.el-table__cell, .el-table__fixed-right-patch{

border-bottom:1px solid rgba(0, 85, 255, .2);

    border-right:1px solid rgba(0, 85, 255, .2);

}

/deep/.el-table__header tr th:nth-child(1){

border-right:none;

}

/deep/.el-table__header tr th:nth-child(2){

border-right:none;

}

/deep/.el-table__header tr:nth-child(2)th:nth-child(4){

border-right:none;

}

/deep/.el-table__header tr:nth-child(2)th:nth-child(5){

border-right:none;

}

/deep/.el-table--border::after {

width:0px;

}

// 留白关键代码

/deep/.el-table th.gutter{

opacity:0;

}

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,922评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,591评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,546评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,467评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,553评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,580评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,588评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,334评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,780评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,092评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,270评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,925评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,573评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,194评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,437评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,154评论 2赞 366
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2赞 352

推荐阅读更多精彩内容