VUE element-ui实现表格动态展示、动态删减列、动态排序、动态搜索条件配置、表单组件化。

1、实现效果

 

 

1.1、文件目录

1.2、说明

1、本组件支持列表的表头自定义配置，checkbox实现

2、本组件支持列表列排序，vuedraggable是拖拽插件，上图中字段管理里的拖拽效果 ，需要的话请自行npm install

3、本组件支持查询条件动态配置，穿梭框实现

2、table.vue(最父级，入口调用)

<template>
    <div>
        <index ref="tableTemplete" @templete-del="tempDel" @templete-func="tempFunction" :options="options" :transfers="transfers"
            :headerButton="headerButton" :buttons="buttonList" :key="datekey" @templete-list="fetchData" @templete-submit="tempSubmit"
        />
    </div>
</template>
 
<script>
    import index from './index'
    import { listInfo, saveInfo, dels, selectDate } from "@/api/dispatch/useCar/info";
    import { listDeptApi, optionDeptApi, listDeptTreeApi, getDeptList } from "@/api/system/organize/dept";
    export default {
        name: 'tableTemplete',
        components: {
            index
        },
        data() {
            return {
                tableList: [],
                total: 0,
                queryForm: [
 
                ],
                deptOptions: [],
                // 遮罩层
                loading: true,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 20,
                },
                datekey: Date.now(),
                //默认查询条件--需要修改
                transfers: [
                    'orderCarDate'
                ],
                //列表字段--需要修改
                options: [
                    {
                        id: 0,
                        name: 'orderCarDate',
                        label: '要车日期',
                        type: 'date_range',
                        param: '',
                        isShow: true,
                        isAdd: true,
                        isValidate: true,
                        exp: '',
                        extra: {
                            icon: 'file-list-line',
                        },
                    },
                    {
                        id: 1,
                        name: 'telephone',
                        label: '电话',
                        type: 'text',
                        param: '',
                        isShow: true,
                        isAdd: true,
                        isValidate: true,
                        exp: '',
                        extra: {
                            icon: 'file-list-line',
                            columnStyle: 'labelCall',
                        },
                    },
                    {
                        id: 2,
                        name: 'carType',
                        label: '要车种类',
                        type: 'select',
                        param: [
                            {
                                label: '自卸吊',
                                value: '1',
                            },
                            {
                                label: '挂车',
                                value: '2',
                            },
                            {
                                label: '升降车',
                                value: '3',
                            },
                            {
                                label: '吊车',
                                value: '4',
                            },
                            {
                                label: '勾机',
                                value: '5',
                            },
                            {
                                label: '拖车',
                                value: '6',
                            },
                            {
                                label: '翻斗',
                                value: '7',
                            },
                            {
                                label: '水车',
                                value: '8',
                            },
                            {
                                label: '铲车',
                                value: '9',
                            },
                            {
                                label: '板车',
                                value: '10',
                            },
                            {
                                label: '大客车',
                                value: '11',
                            },
                        ],
                        isShow: true,
                        isAdd: true,
                        isValidate: true,
                        exp: '',
                        extra: {
                            icon: 'file-list-line',
                        },
                    },
                    {
                        id: 3,
                        name: 'remark',
                        label: '种类说明',
                        type: 'text',
                        param: '',
                        isShow: true,
                        isAdd: true,
                        isValidate: true,
                        exp: '',
                        extra: {
                            icon: 'file-list-line',
                        },
                    },
                    {
                        id: 4,
                        name: 'carNum',
                        label: '用车数量',
                        type: 'number_range',
                        param: '',
                        isShow: true,
                        isAdd: true,
                        isValidate: true,
                        exp: 'age',
                        extra: {
                            icon: 'file-list-line',
                        },
                    },
                    {
                        id: 5,
                        name: 'carTeam',
                        label: '车辆车队',
                        type: 'select',
                        param: [
                            {
                                label: '一队',
                                value: '1',
                            },
                            {
                                label: '二队',
                                value: '2',
                            },
                            {
                                label: '三队',
                                value: '3',
                            },
                            {
                                label: '四队',
                                value: '4',
                            },
                            {
                                label: '五队',
                                value: '5',
                            },
                            {
                                label: '附企',
                                value: '6',
                            },
                        ],
                        isShow: true,
                        isAdd: true,
                        isValidate: true,
                        exp: '',
                        extra: {
                            icon: 'file-list-line',
                        },
                    },
                    {
                        id: 6,
                        name: 'startDate',
                        label: '开始用车',
                        type: 'date_range',
                        param: '',
                        isShow: true,
                        isAdd: true,
                        isValidate: true,
                        exp: '',
                        extra: {
                            icon: 'file-list-line',
                        },
                    },
                    {
                        id: 7,
                        name: 'endDate',
                        label: '结束用车',
                        type: 'date_range',
                        param: '',
                        isShow: true,
                        isAdd: true,
                        isValidate: true,
                        exp: '',
                        extra: {
                            icon: 'file-list-line',
                        },
                    },
                    {
                        id: 8,
                        name: 'jobDept',
                        label: '作业单位',
                        type: 'street',
                        param: [
                            {
                                ancestors: "0",
                                code: "99",
                                id: "99",
                                name: "厂",
                                parentId: "0",
                                children: [
                                    {
                                        ancestors: "0,99",
                                        code: "test",
                                        id: "1720269456426344449",
                                        name: "测试部门",
                                        parentId: "99"
                                    },
                                    {
                                        ancestors: "0,99",
                                        code: "102",
                                        id: "1560428307109957633",
                                        name: "生产技术室",
                                        parentId: "99"
                                    },
                                    {
                                        ancestors: "0,99",
                                        code: "104",
                                        id: "1560428634399887362",
                                        name: "设备室",
                                        parentId: "99"
                                    },
                                ]
                            }
                        ],
                        isShow: true,
                        isAdd: true,
                        isValidate: true,
                        exp: 'street',
                        extra: {
                            icon: 'file-list-line',
                        },
                    },
                    {
                        id: 9,
                        name: 'jobProject',
                        label: '作业项目',
                        type: 'select',
                        param: [
                            {
                                label: '吊件',
                                value: '1',
                            },
                            {
                                label: '运件',
                                value: '2',
                            },
                            {
                                label: '安装',
                                value: '3',
                            },
                            {
                                label: '清杂物',
                                value: '4',
                            },
                            {
                                label: '拉人',
                                value: '5',
                            },
                            {
                                label: '其他',
                                value: '9',
                            },
                        ],
                        isShow: true,
                        isAdd: true,
                        isValidate: true,
                        exp: '',
                        extra: {
                            icon: 'file-list-line',
                        },
                    },
                    {
                        id: 10,
                        name: 'carUsed',
                        label: '使用人',
                        type: 'text',
                        param: '',
                        isShow: true,
                        isAdd: true,
                        isValidate: true,
                        exp: '',
                        extra: {
                            icon: 'file-list-line',
                        },
                    },
                    {
                        id: 11,
                        name: 'useCarExplain',
                        label: '用车说明',
                        type: 'text',
                        param: '',
                        isShow: true,
                        isAdd: true,
                        isValidate: false,
                        exp: '',
                        extra: {
                            icon: 'file-list-line',
                        },
                    },
                    {
                        id: 13,
                        name: 'createTime',
                        label: '创建时间',
                        type: 'datetime_range',
                        param: '',
                        isShow: false,
                        isAdd: false,
                        isValidate: false,
                        exp: '',
                        extra: {
                            icon: 'file-list-line',
                        },
                    },
                    {
                        id: 14,
                        name: 'updateTime',
                        label: '更新时间',
                        type: 'datetime_range',
                        param: '',
                        isShow: false,
                        isAdd: false,
                        isValidate: false,
                        exp: '',
                        extra: {
                            icon: 'file-list-line',
                        },
                    },
                    {
                        id: 15,
                        name: 'createBy',
                        label: '创建人',
                        type: 'text',
                        param: '',
                        isShow: false,
                        isAdd: false,
                        isValidate: false,
                        exp: '',
                        extra: {
                            icon: 'file-list-line',
                        },
                    },
                    {
                        id: 16,
                        name: 'updateBy',
                        label: '更新人',
                        type: 'text',
                        param: '',
                        isShow: false,
                        isAdd: false,
                        isValidate: false,
                        exp: '',
                        extra: {
                            icon: 'file-list-line',
                        },
                    },
                    {
                        id: 17,
                        name: 'enableFlag',
                        label: '启用状态',
                        type: 'radio',
                        param: [
                            {
                                value: 1,
                                label: '启用',
                            },
                            {
                                value: 0,
                                label: '停用',
                            }
                        ],
                        isShow: false,
                        isAdd: false,
                        isValidate: true,
                        exp: '',
                        extra: {
                            icon: 'file-list-line',
                        },
                    },
                    {
                        id: 18,
                        name: 'testTime',
                        label: '测试时间',
                        type: 'time_range',
                        param: '',
                        isShow: false,
                        isAdd: true,
                        isValidate: false,
                        exp: '',
                        extra: {
                            icon: 'file-list-line',
                        },
                    },
                ],
                //按钮组件--需要修改
                //头部按钮
                headerButton: [
                    {
                        label: '导出',
                        title: '导出信息',
                        value: 'export',
                        options: [],
                        className: 'fun-export',
                        hasPermi: ['dispatch:useCar:export'],
 
                    },
                ],
                //列表按钮
                buttonList: [
                    {
                        label: '删除',
                        title: '删除信息',
                        value: 'del',
                        options: [],
                        hasPermi: ['trends:table:del'],
 
                    },
                    {
                        label: '修改',
                        title: '修改信息',
                        value: 'update',
                        options: [],
                        hasPermi: ['trends:table:update'],
 
                    }, {
                        label: '审批',
                        title: '审批信息',
                        value: 'approve',
                        hasPermi: ['trends:table:update'],
                        options: [{
                            id: 20,
                            name: 'approve-type',
                            label: '审批原因',
                            type: 'select',
                            param: [
                                {
                                    value: 0,
                                    label: '同意',
                                },
                                {
                                    value: 1,
                                    label: '拒绝',
                                },
                            ],
                            isAdd: true,
                            isShow: true,
                            isValidate: true,
                        },
                        {
                            id: 21,
                            name: 'approve-reason',
                            label: '审批意见',
                            type: 'textarea',
                            param: '',
                            isAdd: true,
                            isShow: true,
                            isValidate: false,
                            exp: '',
                        }],
                    }
                ],
            }
        },
        watch: {},
        created() {
            this.$nextTick(() => {
                //获取部门树
                this.optionDeptApi();
                // 在此处执行你要执行的函数
                this.getList()
            });
        },
        mounted() {
            this.$nextTick(() => {
                //获取部门树
                this.optionDeptApi();
                // 在此处执行你要执行的函数
                this.getList()
            });
        },
        methods: {
 
            /** 查询部门列表 */
            optionDeptApi() {
                listDeptTreeApi({}).then(response => {
                    this.deptOptions = response.data
                    this.options[8].param = this.deptOptions
                })
            },
            //其他业务按钮--需要修改
            tempFunction(item, params) {
                if (item.value === 'export') {
                    const ids = params.ids;
                    const word = ids.length > 0 ? '是否确认导出选中的数据?' : '是否按查询条件导出用车记录?';
                    this.queryParams.ids = ids
                    this.$confirm(word, "提示", {
                        confirmButtonText: "导出",
                        cancelButtonText: "取消",
                        closeOnClickModal: false,
                        type: "info"
                    }).then(function () {
 
                    }).then(() => {
                        this.download('dispatch/useCarRecord/export', {
                            ...this.queryParams
                        }, `用车记录.xlsx`)
                        this.queryParams.ids = []
                    }).catch(function () { });
                }
            },
            //删除
            tempDel(data) {
                this.$confirm('是否确认删除选中的数据项?', "系统提示", {
                    closeOnClickModal: false,
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return dels(data);
                }).then(() => {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.getList();
                }).catch(function () { });
            },
            //提交--需要修改
            tempSubmit(data, val) {
                console.log(data)
                if ('approve' === val) {
                    this.$message({
                        message: '审批完成',
                        type: 'success'
                    });
                    // 调用子组件方法
                    this.$refs.tableTemplete.submitClose();
                } else {
                    if (data.id != undefined) {
                        saveInfo(data).then(response => {
                            if (response.code === 200) {
                                this.$modal.msgSuccess("修改成功");
                                this.getList();
                            }
                            // 调用子组件方法
                            this.$refs.tableTemplete.submitClose();
                        });
                    } else {
                        saveInfo(data).then(response => {
                            if (response.code === 200) {
                                this.$modal.msgSuccess("新增成功");
                                this.getList();
                                // 调用子组件方法
                                this.$refs.tableTemplete.submitClose();
                            }
                        });
                    }
                }
 
            },
 
            //组件封装需要修改处--需要修改
            fetchData(arr) {
                if (typeof arr !== 'undefined') {
                    let res = JSON.parse(JSON.stringify(arr));
                    this.queryParams = res
                    if (typeof arr.orderCarDate === 'undefined' || arr.orderCarDate === null) {
                        this.queryParams.beginTime = '';
                        this.queryParams.endTime = '';
                    } else {
                        this.queryParams.beginTime = arr.orderCarDate[0];
                        this.queryParams.endTime = arr.orderCarDate[1];
                    }
                    //orderCarDate复制为空字符串，否则为[]，传入后端会报错
                    this.queryParams.orderCarDate = '';
                    this.queryParams.createTime = '';
                    this.queryParams.updateTime = '';
                }
                this.getList()
            },
            // 请求table数据
            getList() {
                this.loading = true;
                listInfo(this.queryParams).then(response => {
                    if (response.rows.length == 0 && this.queryParams.pageNum > 1) {
                        this.queryParams.pageNum = this.queryParams.pageNum - 1;
                        this.total = response.total;
                        this.getList();
                    } else {
                        this.tableList = response.rows;
                        this.total = response.total;
                        this.loading = false;
 
                        // 调用子组件方法
                        this.$refs.tableTemplete.refreshData(this.tableList, this.total);
                    }
                }
                );
            },
        },
    }
</script>复制

3、index.vue(父级模版)

<template>
    <div class="app-container">
 
        <!-- 给el-row加上mb8 mpc-section 的class-->
        <el-row :gutter="10" class="mb16 mpc-section" v-hasPermi="['trends:table:add','trends:table:del']">
            <el-col :span="1.5">
                <el-button type="primary" size="mini" @click="handleInsert" v-hasPermi="['trends:table:add']">
                    <el-button-context class-name="fun-new" text="新增" />
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['trends:table:del']">
                    <el-button-context class-name="fun-delete" text="批量删除" />
                </el-button>
            </el-col>
            <div v-for="item in headerButton" :key="item.value">
                <el-col :span="1.5">
                    <el-button type="primary" size="mini" @click="handleFunction(item)" v-hasPermi="item.hasPermi">
                        <el-button-context :class-name="item.className" :text="item.label" />
                    </el-button>
                </el-col>
            </div>
        </el-row>
        <zn-query-form :class="cellStyleForm()">
            <zn-query-form-top-panel>
                <!-- 字段管理 -->
                <field-management @setColumns="getColumns" :options="options" :style="requestParams.length>5?'padding: 0px;margin-right: 5px;margin-left: 16px;margin-top:10px;':'padding: 0px;margin-right: 5px;'"
                />
                <!-- 筛选条件 -->
                <el-popover placement="right" width="650" trigger="click">
                    <el-transfer v-model="transfers" :props="{ key: 'name', label: 'label'}" :titles="['待选择', '已选择']" @change="rightcheckchange"
                        :data="options" />
                    <div slot="reference" style="cursor: pointer;height: 28px;width: 80px;background-color: #1773c3;display: flex;justify-content: center;align-items: center;color: #fcfcfc;font-size: 12px;"
                        :style="requestParams.length>5?'margin-top:10px;':'margin-top:0px;'">
                        <i class="el-icon-s-tools icon-class">查询配置</i>
                    </div>
                </el-popover>
                <!-- 搜索 -->
                <search @up-Search="upSearch" :options="requestParams" />
            </zn-query-form-top-panel>
        </zn-query-form>
 
        <div :class="this.hasPermCls(['process:grade:remove','process:grade:update','process:grade:edit'],
        'mpc-table-section','mpc-table-normal','mpc-table-normal-nofuntion')">
            <zn-filter-table ref="filterTable" :multiple="true" :tableData="tableList" :buttons="buttons" :finallyColumns="finallyColumns"
                :deatilsPath="deatilsPath" @selectList="getSelect" @fetch-data="fetchData" :key="datekey" @fetch-edit="fetchEdit"
                @fetch-update="fetchUpdate" @fetch-del="fetchDel" />
 
            <zn-pagination :page.sync="queryForm.pageNum" :key="paginationkey" :limit.sync="queryForm.pageSize" @pagination="fetchData"
                :total="total" :algin="'right'" />
        </div>
 
        <!-- 添加修改对话框 -->
        <el-dialog :title="title" :visible.sync="open" append-to-body :close-on-click-modal="false">
            <zn-form ref="dialofForm" :options="optionList" :resForm="form" :disabled="disabled" :key="diaKey" @dialog-submit="submit"
                @dialog-cancel="cancel" />
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm" v-preventReClick="2000" v-if="!disabled">保 存</el-button>
                <el-button @click="cancelForm">{{buttonName}}</el-button>
            </div>
        </el-dialog>
 
    </div>
</template>
 
<script>
    import FieldManagement from './assembly/FieldManagement'
    import ZnQueryForm from './assembly/ZnQueryForm'
    import ZnQueryFormTopPanel from './assembly/ZnQueryFormTopPanel'
    import Search from './assembly/Search'
    import ZnPagination from './assembly/ZnPagination'
    import ZnFilterTable from './assembly/ZnFilterTable'
    import ZnForm from './assembly/ZnForm'
    export default {
        name: 'allCustomer',
        components: {
            FieldManagement,
            ZnQueryForm,
            ZnQueryFormTopPanel,
            Search,
            ZnPagination,
            ZnFilterTable,
            ZnForm
        },
        props: {
            options: {
                type: Array, // table数据
                default: () => [],
            },
            transfers: {
                type: Array, // 查询数据
                default: () => [],
            },
            buttons: {
                type: Array, // button数据
                default: () => [],
            },
            headerButton: {
                type: Array, // 头部button数据
                default: () => [],
            },
        },
        provide() {
            return {
                mark: 'Member', //特定标识,根据业务模块不同,传输的标识也不同,标识由后端定义(或者字典维护)
            }
        },
        data() {
            return {
                title: '',
                open: false,
                disabled: false,
                diaKey: Date.now(),
                form: {},
                // 选中数组
                ids: [],
                // 非多个禁用
                multiple: true,
                // transfers: [],
                requestParams: [],
                total: 0,
                listLoading: false,
                queryForm: {
                    pageNum: 1,
                    pageSize: 20,
                    keywords: '',
                    _filter: {}, //头部筛选
                },
                queryParams: {
                    pageNum: 1,
                    pageSize: 20,
                    keywords: '',
                    _filter: {}, //头部筛选
                },
                deatilsPath: '/customer/deatils', //表格当前行跳转路径
                conditionList: [], //自定义筛选条件
                columns: [], //筛选条件中的数据
                checkList: [], //筛选条件中选中的数据
                multipleList: [], //表格复选多选中的数据
                datekey: Date.now(),
                paginationkey: Date.now(),
                tableList: [],
                optionList: [],
                rollbackVal: ''
 
            }
        },
        computed: {
            finallyColumns() {
                let list = this.columns.filter((item) => this.checkList.includes(item.label))
                console.log(list)
                //这里更新了datekey ，组件就会刷新
                this.datekey = Date.now()
                this.paginationkey = Date.now()
                return list
            },
        },
        watch: {
            disabled: {
                immediate: true,
                handler(val) {
                    this.setButtonName(val)
                }
            },
        },
        created() {
            this.optionList = Array.from(this.options, obj => ({ ...obj }));
            // this.fetchData()
            this.rightcheckchange()
        },
        mounted() {
        },
        methods: {
            //设置按钮名称
            setButtonName(item) {
                if (item) {
                    this.buttonName = '关 闭'
                } else {
                    this.buttonName = '取 消'
                }
            },
            cellStyleForm() {
                if (this.requestParams.length + 1 > 6) {
                    return 'mpc-section-zkaw'
                } else {
                    return 'mpc-section'
                }
            },
            // 新增弹出
            handleInsert() {
                this.title = '新增信息';
                this.open = true;
                this.disabled = false;
                this.optionList = Array.from(this.options, obj => ({ ...obj }));
                this.form = {};
                //这里更新了diaKey ，组件就会刷新
                this.diaKey = Date.now()
            },
            //详情
            fetchEdit(data, val) {
                this.title = '详情查看';
                this.open = true;
                this.disabled = true;
                this.optionList = Array.from(this.options, obj => ({ ...obj }));
                this.form = data;
                //这里更新了diaKey ，组件就会刷新
                this.diaKey = Date.now()
            },
            //修改
            fetchUpdate(data, val) {
                this.rollbackVal = val;
                for (let i = 0; i < this.buttons.length; i++) {
                    let item = this.buttons[i]
                    if (item.value === val) {
                        this.title = item.title;
                        if (item.options.length > 0) {
                            for (let j = 0; j < item.options.length; j++) {
                                this.optionList.push(item.options[j])
                            }
                        }
                    }
                }
                this.open = true;
                if (val === 'edit') {
                    this.disabled = true
                } else {
                    this.disabled = false;
                }
                this.form = data;
                //这里更新了diaKey ，组件就会刷新
                this.diaKey = Date.now()
            },
            //删除
            fetchDel(data) {
                const ids = data.id
                //调用父组件删除
                this.$emit('templete-del', ids)
                //这里更新了diaKey ，组件就会刷新
                this.diaKey = Date.now()
            },
            handleDelete() {
                //调用父组件删除
                this.$emit('templete-del', this.ids)
            },
            handleFunction(item) {
                let params = {};
                params.ids = this.ids;
                //调用父组件业务按钮
                this.$emit('templete-func', item, params)
            },
            //取消
            cancelForm() {
                //调用子组件的cancel方法
                this.$refs.dialofForm.cancel();
            },
            //取消
            cancel(data) {
                this.open = false
                this.optionList = Array.from(this.options, obj => ({ ...obj }));
            },
            //提交按钮
            submitForm() {
                //调用子组件的submit方法
                this.$refs.dialofForm.submit();
            },
            //提交
            submit(data) {
                //调用父组件删除
                this.$emit('templete-submit', data, this.rollbackVal)
            },
            submitClose() {
                this.open = false
                this.optionList = Array.from(this.options, obj => ({ ...obj }));
                //调用子组件的reset方法
                this.$refs.dialofForm.reset();
            },
            rightcheckchange() {
                this.requestParams = [];
                for (let i = 0; i < this.transfers.length; i++) {
                    for (let j = 0; j < this.options.length; j++) {
                        if (this.transfers[i] === this.options[j].name) {
                            this.requestParams.push(this.options[j])
                        }
                    }
                }
            },
 
            // 自定义检索(popover组件(data为对象)和tag组件(data为数组))发射出来的事件
            tableUpdate(data) {
                this.$refs.filterTable.tableUpdate(data)
            },
            conditionClose(index) {
                this.conditionList.splice(index, 1) // 关闭条件tag-发射给父组件 删除已选中的
            },
            // table数据回调
            refreshData(datas, total) {
                this.listLoading = true
                this.tableList = datas
                // this.total = this.tableList.length
                this.total = total
                this.listLoading = false
                console.log(this.tableList)
            },
            //组件封装需要修改处--start
            // 请求table数据
            fetchData() {
                this.listLoading = true
                //调用子组件查询列表方法
                this.queryParams.pageNum = this.queryForm.pageNum
                this.queryParams.pageSize = this.queryForm.pageSize
                this.queryParams.keywords = this.queryForm.keywords
                this.queryParams._filter = this.queryForm._filter
                this.$emit('templete-list', this.queryParams)
                // this.total = this.tableList.length
                this.listLoading = false
            },
            //组件封装需要修改处----end
 
            //搜索
            upSearch(val) {
                //调用子组件查询列表方法
                this.queryParams = val
                this.queryParams.pageNum = this.queryForm.pageNum
                this.queryParams.pageSize = this.queryForm.pageSize
                this.$emit('templete-list', this.queryParams)
            },
            // 获取多选选中的table数据(需求未出,功能暂留)
            getSelect(list) {
                this.multipleList = list
                this.ids = list.map(item => item.id)
                this.multiple = !list.length
            },
            // 子组件筛选条件返回
            getColumns(columns, checkList) {
                this.columns = columns
                this.checkList = checkList
            },
        },
    }
</script>
 
 
<style lang="scss" scoped>
    .el-button {
        border: none;
        margin-bottom: 0;
    }
 
    ::v-deep.pop-li {
        .el-button {
            color: black !important;
        }
    }
 
    .icon-class:hover {
        opacity: 0.5;
        transition: 1s;
        transform: scale(1.3);
    }
</style>复制

4、FieldManagement组件

<template>
    <el-dropdown class="ml-10 mr-10" trigger="hover">
        <el-tooltip effect="dark" content="字段管理" placement="top">
            <div style="height: 28px;width: 80px;background-color: #1773c3;display: flex;justify-content: center;align-items: center;color: #fcfcfc;font-size: 12px;cursor: pointer;"> 
                <i class="el-icon-tickets icon-class">字段管理</i>
            </div>
        </el-tooltip>
        <el-dropdown-menu slot="dropdown">
            <el-row :gutter="10" type="flex" class="row-flex">
                <el-col :span="6">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
                        勾选您要选择的字段
                    </el-checkbox>
                </el-col>
                <el-divider />
                <el-checkbox-group v-if="options.length > 0" v-model="checkList" @change="handleCheckedChange">
                    <zn-draggable v-bind="dragOptions" :list="options" class="zn-draggable" v-model="options" @sort="dragSort">
                        <el-col :span="24" class="checkbox-group-col" v-for="item in options" :key="item.id">
                            <!-- <zn-icon icon="drag-drop-line" /> -->
                            <el-checkbox :label="item.label">
                                {{ item.label }}
                            </el-checkbox>
                        </el-col>
                    </zn-draggable>
                </el-checkbox-group>
            </el-row>
        </el-dropdown-menu>
    </el-dropdown>
</template>
 
<script>
    import ZnDraggable from 'vuedraggable'
    export default {
        name: 'fieldManagement',
        components: {
            ZnDraggable,
        },
        inject: ['mark'],
        props: {
            options: {
                type: Array, // table数据
                default: () => [],
            },
        },
        data() {
            return {
                checkAll: false,
                checkList: [],
                options: [],
                isIndeterminate: true,
            }
        },
        computed: {
            dragOptions() {
                return {
                    animation: 600,
                    group: 'description',
                }
            },
        },
        watch: {},
        created() {
            this.getHeader()
        },
        mounted() { },
        methods: {
            dragSort(e) {
                // e.newIndex 为draggable插件给的值
                this.options[e.newIndex].sort = e.newIndex + 1;
 
                // 重新排序
                this.options.map((item, index) => {
                    item.sort = index + 1;
                })
                //对checkList进行排序
                let sortCheck = [];
                this.options.map((item) => {
                    if (this.checkList.includes(item.label)) {
                        sortCheck.push(item)
                    }
                })
                let checks = []
                sortCheck.map((item) => {
                    checks.push(item.label)
                })
                this.$emit('setColumns', this.options, checks)
            },
 
            // 字段管理的接口是统一的 , 只有业务模块的mark标识不同 , 所以请求就写在了组件里
            async getHeader() {
 
                this.options.map((item) => {
                    if (item.isShow == true) {
                        this.checkList.push(item.label)
                    }
                })
                this.checkAll = this.checkList.length === this.options.length
                this.isIndeterminate = this.checkList.length > 0 && this.checkList.length < this.options.length
                this.$emit('setColumns', this.options, this.checkList)
            },
            // 操纵全选
            handleCheckAllChange(val) {
                if (val) {
                    this.options.map((item) => {
                        this.checkList.push(item.label)
                    })
                } else {
                    this.checkList = []
                }
                this.isIndeterminate = false
                // 向父组件发送数据
                this.$emit('setColumns', this.options, this.checkList)
            },
            // 单个数据选中
            handleCheckedChange(value) {
                let checkedCount = value.length
                this.checkAll = checkedCount === this.options.length
                this.isIndeterminate =
                    checkedCount > 0 && checkedCount < this.options.length
                // 向父组件发送数据
                this.$emit('setColumns', this.options, this.checkList)
            },
        },
    }
</script>
 
<style lang="scss" scoped>
    .row-flex {
        padding: 15px;
        display: flex;
        flex-direction: column;
    }
 
    .zn-draggable {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
 
    .checkbox-group-col {
        max-height: 100px;
        overflow-y: auto;
 
        .el-checkbox {
            padding: 3px 0;
            width: 100%;
            margin-right: 0;
 
        }
    }
 
    .icon-class:hover {
        opacity: 0.5;
        transition: 1s;
        transform: scale(1.3);
    }
</style>复制

5、ZnQueryForm组件

<template>
    <el-row class="zn-query-form" :gutter="0">
      <slot />
    </el-row>
  </template>
  
  <script>
    export default {
      name: 'ZnQueryForm',
    }
  </script>
  
  <style lang="scss" scoped>
    @mixin panel {
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      align-items: center;
      justify-content: flex-start;
      min-height: 20px;
      margin: 0 0 0 0;
      > .el-button {
        margin: 0 10px 0 0 !important;
      }
    }
  
    .zn-query-form {
      ::v-deep {
        .el-form-item:first-child {
          margin: 0 0 0 0 !important;
        }
  
        .el-form-item + .el-form-item {
          margin: 0 0 0 0 !important;
  
          .el-button {
            margin: 0 0 0 10px !important;
          }
        }
  
        .top-panel {
          @include panel;
        }
  
        .bottom-panel {
          @include panel;
          border-top: 1px solid #dcdfe6;
        }
  
        .left-panel {
          @include panel;
        }
  
        .right-panel {
          @include panel;
          justify-content: flex-end;
        }
      }
    }
  </style>复制

6、ZnQueryFormTopPanel组件

<template>
        <el-col :span="24">
          <div class="top-panel">
            <slot />
          </div>
        </el-col>
      </template>
      
      <script>
        export default {
          name: 'ZnQueryFormTopPanel',
        }
      </script>
      复制

7、Search组件

<template>
  <div class="search-class">
    <el-form :model="queryParams" ref="queryParams" :inline="true">
      <el-form-item v-for="item in options" :key="item.id" :prop="item.name" style="margin-right: 10px !important">
        <el-select v-if="item.type === 'select'" v-model="queryParams[item.name]" :placeholder="'请选择'+item.label" @change="handleQuery"
          clearable filterable>
          <el-option v-for="dict in item.param" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
        <div v-else-if="item.type == 'street'" class="div-street">
          <treeselect v-model="queryParams[item.name]" :placeholder="'请选择'+item.label" :options="item.param" :normalizer="normalizer"
            style="width: 200px;" />
        </div>
        <!-- date 单个日期-->
        <el-date-picker v-else-if="item.type == 'date'" v-model="queryParams[item.name]" type="date" clearable :placeholder="'选择'+item.label"
          value-format="yyyy-MM-dd" @change="handleQuery" />
        <!-- datetime 日期时间-->
        <el-date-picker v-else-if="item.type == 'datetime'" v-model="queryParams[item.name]" type="datetime" :placeholder="'选择'+item.label"
          value-format="yyyy-MM-dd HH:mm:ss" @change="handleQuery"></el-date-picker>
        <!-- date 单个时间-->
        <el-time-picker v-else-if="item.type == 'time'" v-model="queryParams[item.name]" :value-format="'HH:mm'" format="HH:mm" :placeholder="'选择'+item.label"
          @change="handleQuery">
        </el-time-picker>
        <!-- date_range 日期范围-->
        <el-date-picker v-else-if="item.type == 'date_range'" v-model="queryParams[item.name]" type="daterange" range-separator="至"
          :start-placeholder="'开始'+item.label" :end-placeholder="'结束'+item.label" value-format="yyyy-MM-dd" @change="handleQuery"></el-date-picker>
        <!-- datetime_range 日期时分秒范围-->
        <el-date-picker v-else-if="item.type == 'datetime_range'" v-model="queryParams[item.name]" clearable type="datetimerange"
          range-separator="至" :start-placeholder="'开始'+item.label" :end-placeholder="'结束'+item.label" value-format="yyyy-MM-dd HH:mm:ss"
          @change="handleQuery"></el-date-picker>
        <!-- time_range时分秒范围-->
        <el-time-picker is-range v-else-if="item.type == 'time_range'" v-model="queryParams[item.name]" clearable type="datetimerange"
          range-separator="至" :start-placeholder="'开始'+item.label" :end-placeholder="'结束'+item.label" value-format="HH:mm"
          format="HH:mm" @change="handleQuery"></el-time-picker>
        <el-input v-else v-model="queryParams[item.name]" clearable :placeholder="'请输入'+item.label" @clear="handleQuery"></el-input>
 
      </el-form-item>
      <el-form-item class="option-button" :style="options.length>0?'right: 20px;':'right: 20px;top: 0px;'">
        <el-button type="primary" size="mini" @click="handleQuery">
          查询
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
 
<script>
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  export default {
    name: 'Search',
    components: {
      Treeselect,
    },
    props: {
      options: {
        type: Array, // table数据
        default: () => [],
      },
    },
    data() {
      return {
        isActive: false,
        searchText: '',
        queryParams: {},
      }
    },
    computed: {},
    // watch: {
    //   options: {
    //     deep: true,
    //     handler(val) {
    //       this.getOptions(val)
    //     }
    //   },
    // },
    created() {
      this.queryParams = {}
    },
    mounted() { },
    methods: {
      /** 转换树数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children
        }
        return {
          id: node.id,
          label: node.name,
          isDisabled: false,
          children: node.children
        }
      },
      getOptions(item) {
        for (let i = 0; i < item.length; i++) {
          let res = item[i]
          this.queryParams[res.name] = res.value
        }
      },
      handleQuery() {
        this.$emit('up-Search', this.queryParams) //改变搜索字段的value
      },
    },
  }
</script>
 
<style>
  .div-street .vue-treeselect__control {
    padding-left: 5px;
    padding-right: 5px;
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 28px;
    border: 1px solid #ddd;
    border-radius: 0px;
  }
 
  .div-street .vue-treeselect--single .vue-treeselect__input {
    align-items: center;
  }
 
  .search-class .el-form-item__content {
    line-height: 28px;
    height: 28px !important;
    margin-left: 16px;
  }
</style>
<style lang="scss" scoped>
  .public-search {
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid white;
  }
 
  ::v-deep.isActive {
    border: 1px solid red;
    transition: all 0.3s ease-in-out;
  }
 
  .option-button {
    position: absolute;
    right: 10px;
  }
</style>复制

8、ZnPagination组件

<template>
    <div :class="{ hidden: hidden }" class="pagination-container">
      <el-pagination
      :style="{'text-align':algin}"
        :background="background"
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :layout="layout"
        :page-sizes="pageSizes"
        :total="total"
        v-bind="$attrs"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </template>
  
  <script>
  import { scrollTo } from './utils/scroll-to'
  
  export default {
    name: 'ZnPagination',
    props: {
      total: {
        required: true,
        type: Number,
      },
      page: {
        type: Number,
        default: 1,
      },
      limit: {
        type: Number,
        default: 10,
      },
      pageSizes: {
        type: Array,
        default() {
          return [10, 20, 30, 50]
        },
      },
      layout: {
        type: String,
        default: 'total, sizes, prev, pager, next, jumper',
      },
      background: {
        type: Boolean,
        default: true,
      },
      autoScroll: {
        type: Boolean,
        default: true,
      },
      hidden: {
        type: Boolean,
        default: false,
      },
      algin: {
        type: String,
        default: ()=>'center',
      },
    },
    computed: {
      currentPage: {
        get() {
          return this.page
        },
        set(val) {
          this.$emit('update:page', val)
        },
      },
      pageSize: {
        get() {
          return this.limit
        },
        set(val) {
          this.$emit('update:limit', val)
        },
      },
    },
    methods: {
      handleSizeChange(val) {
        this.$emit('pagination', { page: this.currentPage, limit: val })
        if (this.autoScroll) {
          scrollTo(0, 800)
        }
      },
      handleCurrentChange(val) {
        this.$emit('pagination', { page: val, limit: this.pageSize })
        if (this.autoScroll) {
          scrollTo(0, 800)
        }
      },
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .pagination-container {
    background: #fff;
  }
  .pagination-container.hidden {
    display: none;
  }
  </style>
  复制

9、ZnFilterTable组件

<template>
  <div class="zn-filter-table" ref="tableDiv" id="tableBox">
    <!-- 表格  max-height="660px"-->
    <el-table class="table-box" ref="table" :data="tableData" style="width: 100%;" :max-height="tableHeight" border stripe @selection-change="handleSelectionChange"
      :header-cell-style="{'text-align':'center',}">
      <el-table-column type="selection" width="55" align="center" v-if="multiple"></el-table-column>
      <el-table-column v-for="(item, index) in finallyColumns" :key="item.id" :label="item.label" :align="item.type === 'number_range'?'right':(item.type === 'date_range' ||item.type === 'datetime_range' ||item.type === 'select' || item.type === 'radio')?'center':'left'"
        :prop="item.name" min-width="130" show-overflow-tooltip>
        <!-- <template slot="header">
            <type-popover :columnIndex="index" :column="item" :filterOptions="item.param" @tableUpdate="tableUpdate"></type-popover>
          </template> -->
        <template #default="{ row }">
          <!-- 每一列涉及value值判断显示label ,以及状态颜色 -->
          <!-- <span v-if="item.extra.columnStyle == 'labelTags'" :class="item.extra.labelTags[row.type.value]">
              {{ row.type.label }}
            </span> -->
          <span v-if="item.type === 'select' || item.type === 'radio'">
            <el-tag>{{ typeFormat(row[item.name],item.param) }}</el-tag>
          </span>
          <span v-else-if="item.type === 'street'">
            {{ streetFormat(row[item.name],item.param) }}
          </span>
          <span v-else>{{ row[item.name] }}</span>
        </template>
      </el-table-column>
      <!-- 如有操作列 ↓-->
      <el-table-column label="操作" align="center" width="150" class="table-fixed-right" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleSelect(scope.row)">详情</el-button>
          <!-- <el-button size="mini" type="text" @click="handleDelete(scope.row)" class="mpc_del">删除</el-button> -->
          <el-dropdown size="small" type="primary" trigger="hover" style="margin-left: 10px;">
            <span style="color: #1890FF;font-size: 12px;">更多</span>
            <el-dropdown-menu slot="dropdown">
              <div v-for="item in buttons" :key="item.value">
                <el-dropdown-item v-if="item.value === 'del'" @click.native="handleDelete(scope.row)" class="mpc_del" v-hasPermi="item.hasPermi">{{item.label}}</el-dropdown-item>
                <el-dropdown-item v-else @click.native="handleUpdate(scope.row,item.value)" style="font-size: 12px;color: #1890FF;" v-hasPermi="item.hasPermi">{{item.label}}</el-dropdown-item>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import TypePopover from './TypePopover'
  import ZnIcon from './ZnIcon'
 
  export default {
    name: 'ZnFilterTable',
    components: { TypePopover, ZnIcon },
    props: {
      tableData: {
        type: Array, // table数据
        default: () => [],
      },
      finallyColumns: {
        type: Array, // table数据
        default: () => [],
      },
      multiple: {
        type: Boolean, // table数据
        default: () => false,
      },
      deatilsPath: {
        type: String, // table数据
        default: () => '',
      },
      buttons: {
        type: Array, // table数据
        default: () => [],
      },
    },
    data() {
      return {
        conditionList: [],
        multipleSelection: [], //table多选数据
        tableHeight: 0,
        hasHorizontalScroll: false
      }
    },
    computed: {},
    created() {
      this.tableHeight = window.innerHeight - 346
    },
    mounted() {
      //动态更改table高度
      this.handleTableHeight();
    },
    methods: {
      handleTableHeight: function () {
        var _this = this;
        window.onresize = () => {
          _this.tableHeight = window.innerHeight - 346
        };
 
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
        this.$emit('selectList', this.multipleSelection)
      },
      handleSelect(item) {
        this.$emit('fetch-edit', item)
      },
      handleUpdate(item, value) {
        this.$emit('fetch-update', item, value)
      },
      handleDelete(item) {
        this.$emit('fetch-del', item)
      },
      // 自定义检索(popover组件(data为对象)和tag组件(data为数组))发射出来的事件
      tableUpdate(data) {
        console.log(data)
        let flag = true
        // 筛选条件如果已经存在，就更新,注意判别传递过来的数据类型
        // arr.constructor === Array
        if (this.conditionList.length === 0) {
          this.conditionList.push(data) // 如果没有就添加
          flag = false
        } else if (this.conditionList.length > 0) {
          this.conditionList.forEach((item, index) => {
            if (item.fieldName == data.fieldName) {
              item.value = data.value
              flag = false
            }
          })
        }
        if (flag) {
          this.conditionList.push(data.fieldName) // 如果没有就添加
        }
        this.$parent.fetchData(this.conditionList)
      },
      toDeatils(row) {
        if (this.deatilsPath) {
          this.$router.push({ path: this.deatilsPath, query: row.id })
        } else {
          this.$baseMessage(
            '请配置所需要跳转的路径',
            'warning',
            'zn-hey-message-warning'
          )
        }
      },
      // 拨打电话
      makeACall() {
 
      },
      //类型翻译
      typeFormat(item, params) {
        return this.selectType(params, item);
      },
      // 回显
      selectType(datas, value) {
        var actions = [];
        Object.keys(datas).some((key) => {
          if (datas[key].value == ('' + value)) {
            actions.push(datas[key].label);
            return true;
          }
        })
        return actions.join('');
      },
      //树形回显
      streetFormat(item, params) {
        return this.streetType(params, item);
      },
      // 回显
      streetType(datas, value) {
        var actions = [];
        actions.push(this.getTreeName(datas, value))
        return actions.join('');
      },
      //递归
      getTreeName(list, id) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].id === id) {
            return list[i].name
          } else if (list[i].children && list[i].children.length > 0) {
            let res = this.getTreeName(list[i].children, id)
            if (res) {
              return res
            }
          }
        }
      }
    },
  }
</script>
<style>
  .zn-filter-table {
    /* border: 1px solid blue; */
  }
 
 
  .zn-filter-table .el-table-column--selection .cell {
    padding-right: 10px !important;
  }
 
  .zn-filter-table .el-table__fixed-body-wrapper .el-table__body {
    /* 这个得自己调试看多少合适 */
    padding-bottom: 20px;
  }
 
  /* 固定列高度与表格高度不一致 */
 
  .zn-filter-table .el-table__fixed,
  .zn-filter-table .el-table__fixed-right {
    height: calc(100% - 25px) !important;
    /* height: 100% !important; */
    right: 0 !important;
    /* 这个得自己调试看多少合适 */
    bottom: 12px !important;
  }
 
  .zn-filter-table .el-table__fixed::before,
  .zn-filter-table .el-table__fixed-right::before {
    background: transparent !important;
    /* 去掉固定列下方的横线， 样式优化 */
    display: none;
  }
 
  /* 让滚动条区域撑开 */
 
  .zn-filter-table .el-table__body-wrapper::-webkit-scrollbar {
    /* 水平滚动条宽度 */
    height: 10px;
    width: 0px !important;
  }
 
  .zn-filter-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    /* 滚动条颜色 */
  }
 
  .zn-filter-table .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: #f0f0f0;
    /* 滚动条轨道颜色 */
  }
 
  .table-box {
    overflow-x: auto;
 
    /* 防止内部内容换行 */
    white-space: nowrap;
  }
 
  .table-fixed-right {}
</style>
<style scoped>
  .mpc_del {
    color: red !important;
  }
 
  ::v-deep .el-table__column-filter-trigger {
    /* // 占位，解决点击自己写的自定义筛选 会冒泡到排序 */
    display: none !important;
  }
 
  ::v-deep.filter-table {
    /* // table状态标签颜色定义 */
    [class*='table-status'] {
      display: inline-block;
      border-radius: 2px;
      padding: 0px 12px;
    }
    /* // 蓝色 */
    [class*='table-status-blue'] {
      background: #e6effb;
      color: #005bd9;
    }
    /* // 棕色 */
    [class*='table-status-brown'] {
      background: #fff6ec;
      color: #ffa336;
    }
    /* // 绿色 */
    [class*='table-status-green'] {
      background: #e8fff0;
      color: #00b47e;
    }
    /* // 黄色 */
    [class*='table-status-yellow'] {
      background: #fffae8;
      color: #f9c200;
    }
    /* // 粉色 */
    [class*='table-status-pink'] {
      background: #ffece8;
      color: #f53f3f;
    }
    /* // 白色 */
    [class*='table-status-white'] {
      background: #f2f3f5;
      color: #1d2129;
    }
  }
</style>复制

10、TypePopover组件

<template>
    <!-- 每个table表头的popover -->
    <!-- 注意：逻辑部分尽量不好写到这个组件内，因为这个组件是根据外面table循环创建的，在这里写逻辑会非常影响性能 -->
    <div class="customHeader" style="display: inline-block">
      <el-popover
        placement="bottom"
        trigger="click"
        :ref="`popover-${columnIndex}`"
      >
        <!-- table表头文字显示-->
        <span slot="reference" class="label">
          <zn-icon :icon="column.extra.icon" />
          {{ column.label }} &nbsp;
          <i class="el-icon-arrow-down"></i>
        </span>
        <!-- text 文本 -->
        <div v-if="column.type == 'text'">
          <el-input
            clearable
            v-model.trim="filterForm.value"
            placeholder="请输入查询内容"
            @keyup.native.enter="confirm()"
          ></el-input>
        </div>
        <!-- number 数字框 -->
        <div v-else-if="column.type == 'number'">
          <el-input
            clearable
            oninput="value=value.replace(/[^0-9.]/g,'')"
            v-model.trim="filterForm.value"
            placeholder="请输入数字"
            @keyup.native.enter="confirm()"
          ></el-input>
        </div>
        <!-- number_range 数字范围-->
        <div v-else-if="column.type == 'number_range'">
          <el-input
            style="width: 120px"
            clearable
            oninput="value=value.replace(/[^0-9.]/g,'')"
            v-model.trim="filterForm.value"
            placeholder="请输入数字"
          ></el-input>
          -
          <el-input
            style="width: 120px"
            clearable
            oninput="value=value.replace(/[^0-9.]/g,'')"
            v-model.trim="spareValue"
            placeholder="请输入数字"
          ></el-input>
        </div>
        <!-- date 单个日期-->
        <div v-else-if="column.type == 'date'">
          <el-date-picker
            v-model="filterForm.value"
            type="date"
            clearable
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          />
        </div>
        <!-- datetime 日期时间-->
        <div v-else-if="column.type == 'datetime'">
          <el-date-picker
            v-model="filterForm.value"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </div>
        <!-- date_range 日期范围-->
        <div v-else-if="column.type == 'date_range'">
          <el-date-picker
            v-model="filterForm.value"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </div>
        <!-- datetime_range 日期时分秒范围-->
        <div v-else-if="column.type == 'datetime_range'">
          <el-date-picker
            v-model="filterForm.value"
            clearable
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </div>
        <!-- select 下拉选择-->
        <div v-else-if="column.type == 'select'">
          <el-select
            v-model="filterForm.value"
            placeholder="请选择"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="(item, index) in filterOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <!-- radio 单选-->
        <div v-else-if="column.type == 'radio'">
          <el-radio-group v-model="filterForm.value">
            <el-radio
              v-for="(item, index) in filterOptions"
              :key="index"
              :label="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </div>
        <!-- checkBox 多选-->
        <div v-else-if="column.type == 'checkBox'">
          <el-checkbox-group v-model="checkboxList">
            <el-checkbox
              v-for="(item, index) in filterOptions"
              :key="index"
              :label="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
  
        <!-- confirm 确定框-->
        <div style="text-align: right">
          <el-button
            @click="confirm()"
            type="primary"
            size="mini"
            class="confirm"
          >
            确定
          </el-button>
        </div>
      </el-popover>
    </div>
  </template>
  <script>
      import ZnIcon from './ZnIcon'
  export default {
    name: 'typePopover',
    components: {
      ZnIcon
    },
    // column 当前列数据，filterOptions 多选/单选/下拉/数据
    props: ['column', 'filterOptions', 'columnIndex'],
    data() {
      return {
        filterForm: {
          tagLabel: this.column.label, //筛选tag label(tag用)
          tagValue: '', //筛选tag value(tag用)
          value: '', //所筛选的数据(后端接收用)
          fieldName: this.column.name, //当前表头字段(后端接收用)
        },
        spareValue: '', //备用Value popover里如是两个值的话需要用此来拼接
        checkboxList: [],
      }
    },
    created() {},
    methods: {
      confirm() {
        let minValue = this.filterForm.value //数值双向绑定  做个闭环赋值
        let type = this.column.type
        // 跟后端商定 , 多个值存在时进行判断 , 以filterForm.value一个值为字符串的形式传递
        // 根据需求做了处理
        // checkBox和radio和select由于value值的原因需要处理
        if (type == 'checkBox' || type == 'radio' || type == 'select') {
          if (type == 'checkBox') {
            this.filterForm.value = this.checkboxList.join(',')
          }
          if (this.column.param && this.column.param.length > 0) {
            let str = ''
            this.column.param.forEach((i, t) => {
              if (type == 'checkBox' && i.value == Number(this.checkboxList[t])) {
                str = str + i.label
              }
              if (type == 'radio' && i.value == Number(this.filterForm.value)) {
                str = str + i.label
              }
              if (type == 'select' && i.value == Number(this.filterForm.value)) {
                str = str + i.label
              }
            })
            this.filterForm.tagValue = str
          }
        }
        // 数字范围
        else if (type == 'number_range') {
          this.filterForm.tagValue =
            this.filterForm.value + ' - ' + this.spareValue
          this.filterForm.value = this.filterForm.value + ',' + this.spareValue
        } else if (this.filterForm.value == '' && !this.spareValue) {
          return this.$message.warning('请输入或选择筛选条件')
        } else {
          this.filterForm.tagValue = this.filterForm.value //其他类型的赋值给tag用
        }
        this.$emit('tableUpdate', this.filterForm) //传递的是对象
        this.filterForm.value = minValue //数值双向绑定  做个闭环赋值 ,俗称瞒天过海
        this.$refs['popover-' + this.columnIndex].doClose() // 关闭popover
      },
    },
  }
  </script>
  <style scoped>
  .confirm {
    margin-top: 10px;
  }
  /* 禁止双击选中文字 */
  .label {
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none !important; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
  }
  .labelColor {
    color: #409eff;
  }
  .el-icon-arrow-down {
    cursor: pointer;
  }
  
  .el-checkbox-group {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    max-height: 150px;
    overflow-y: auto;
  }
  </style>复制

11、ZnIcon组件

<template>
  <div
    v-if="isExternal"
    :style="styleExternalIcon"
    class="svg-external-icon zn-icon"
    v-on="$listeners"
  />
  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconClass" />
  </svg>
</template>
 
<script>
import { isExternal } from '@/utils/validate'
 
export default {
  name: 'ZnSvgIcon',
  props: {
    iconName: {
      type: String,
      default: '',
      required: true,
    },
    className: {
      type: String,
      default: '',
    },
  },
  computed: {
    isExternal() {
      return isExternal(this.iconName)
    },
    iconClass() {
      return `#icon-${this.iconName}`
    },
    svgClass() {
      if (this.className) {
        return 'zn-icon ' + this.className
      } else {
        return 'zn-icon'
      }
    },
    styleExternalIcon() {
      return {
        mask: `url(${this.iconName}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.iconName}) no-repeat 50% 50%`,
      }
    },
  },
}
</script>
 
<style scoped>
.zn-icon {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  overflow: hidden;
  font-size: 16px;
  text-align: center;
  vertical-align: -3px;
  cursor: pointer;
  margin-right: 5px;
}
/* .el-button .zn-icon {
  width: 1rem;
  height: 1rem;
  vertical-align: -2.5px;
  color: inherit;
} */
.zn-icon:hover path {
  fill: var(--mainTone);
}
 
.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
</style>复制

12、ZnForm组件

<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="medium" style="margin-bottom: 20px" :validate-on-rule-change="false">
      <el-row class="form-treeselect">
        <div v-for="item in options" :key="item.id">
          <div v-if="item.isAdd">
            <el-col :span="12" v-if="item.type === 'select'">
              <el-form-item :label="item.label" :prop="item.name">
                <el-select v-model="form[item.name]" :placeholder="'请选择'+item.label" clearable filterable style="width: 100%" :disabled="disabled">
                  <el-option v-for="dict in item.param" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-else-if="item.type === 'radio'">
              <el-form-item :label="item.label" :prop="item.name">
                <el-radio-group v-model="form[item.name]" :disabled="disabled">
                  <el-radio v-for="dict in item.param" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <!-- date 单个日期-->
            <el-col :span="12" v-else-if="item.type == 'date' || item.type == 'date_range'">
              <el-form-item :label="item.label" :prop="item.name">
                <el-date-picker v-model="form[item.name]" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 100%" :disabled="disabled"
                />
              </el-form-item>
            </el-col>
            <!-- date 单个时间-->
            <el-col :span="12" v-else-if="item.type == 'time' || item.type == 'time_range'">
              <el-form-item :label="item.label" :prop="item.name">
                <el-time-picker v-model="form[item.name]" :disabled="disabled" :value-format="'HH:mm'" format="HH:mm" style="width: 100%"
                  placeholder="请选择时间">
                </el-time-picker>
              </el-form-item>
            </el-col>
            <!-- datetime 日期时间-->
            <el-col :span="12" v-else-if="item.type == 'datetime' || item.type == 'datetime_range'">
              <el-form-item :label="item.label" :prop="item.name">
                <el-date-picker v-model="form[item.name]" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%"
                  :disabled="disabled"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-else-if="item.type == 'number_range'">
              <el-form-item :label="item.label" :prop="item.name">
                <el-input v-model.number="form[item.name]" clearable :placeholder="'请输入'+item.label" :disabled="disabled"></el-input>
              </el-form-item>
            </el-col>
            <div class="vue-treeselect" v-else-if="item.type === 'street'">
              <el-col :span="12">
                <el-form-item :label="item.label" :prop="item.name">
                  <treeselect v-model="form[item.name]" :options="item.param" :normalizer="normalizer" :props="{ checkStrictly: true,emitPath:false }"
                    :disabled="disabled" :placeholder="'请选择'+item.label" />
                </el-form-item>
              </el-col>
            </div>
            <el-col :span="12" v-else>
              <el-form-item :label="item.label" :prop="item.name">
                <el-input v-model="form[item.name]" clearable :placeholder="'请输入'+item.label" :disabled="disabled"></el-input>
              </el-form-item>
            </el-col>
          </div>
        </div>
      </el-row>
    </el-form>
  </div>
</template>
 
<script>
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  export default {
    name: 'ZnForm',
    components: {
      Treeselect,
    },
    props: {
      options: {
        type: Array, // table数据
        default: () => [],
      },
      disabled: {
        type: Boolean,
        default: () => false
      },
      resForm: {
        type: Object,
        default: () => { }
      }
    },
    watch: {
      options: {
        immediate: true,
        handler(val) {
          this.getOptions(val)
        }
      },
      resForm: {
        immediate: true,
        handler(val) {
          this.setValue(val)
        }
      },
      disabled: {
        immediate: true,
        handler(val) {
          this.setButtonName(val)
        }
      },
    },
    data() {
      return {
        buttonName: '取 消',
        rules: {},
        form: {},
        //主键暂存
        id: undefined,
        ruleParam: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
      }
    },
    created() {
    },
    mounted() {
    },
    methods: {
 
      /** 转换树数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children
        }
        return {
          id: node.id,
          label: node.name,
          isDisabled: false,
          children: node.children
        }
      },
      //设置按钮名称
      setButtonName(item) {
        if (item) {
          this.buttonName = '关 闭'
        } else {
          this.buttonName = '取 消'
        }
      },
      //form赋值
      setValue(item) {
        this.form = item
        if (item.id !== undefined) {
          this.id = item.id
        }
      },
      //表单校验
      getOptions(item) {
        let ruleMap = new Map()
        for (var i in item) {
          if (item[i].isValidate === true) {
            this.ruleParam[0].message = item[i].label + "不能为空"
            ruleMap.set(item[i].name, this.ruleParam)
            this.ruleParam = [
              { required: true, message: "不能为空", trigger: "blur" },
            ]
          }
        }
        //map转对象
        this.rules = Object.fromEntries(ruleMap.entries())
      },
      // 取消按钮
      cancel() {
        this.$emit('dialog-cancel', this.form)
        this.form = {};
      },
      reset(){
        this.form = {};
      },
      /** 提交按钮 */
      submit: function () {
        this.form.id = this.id;
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.$emit('dialog-submit', this.form)
          }
        });
      },
    }
  }
</script>
 
<style>
  .form-treeselect .vue-treeselect .vue-treeselect__control {
    height: 28px !important;
    border-radius: 0;
  }
 
  .form-treeselect .vue-treeselect .el-form-item--medium .el-form-item__content {
    line-height: 28px !important;
  }
 
  .form-treeselect .vue-treeselect--disabled .vue-treeselect__control {
    background-color: #F5F7FA;
    border-color: #dfe4ed;
  }
 
  .form-treeselect .vue-treeselect--disabled .vue-treeselect__single-value {
    position: static;
    color: #C0C4CC !important;
  }
 
  .form-treeselect .el-form-item.is-error .vue-treeselect__control,
  .form-treeselect .el-form-item.is-error .vue-treeselect__control:focus {
    border-color: #ff4949;
  }
 
  .form-treeselect .el-col-12 {
    height: 54px !important;
  }
</style>
<style scoped>
  .dialog-footer {
    border-top: 1px solid #D7D7D7;
    padding: 24px 24px 24px 24px !important;
    background-color: #FFFFFF;
    text-align: right;
    
  }
 
  
 
 
</style>复制

13、utils

13.1、encrypt.js

import JSEncrypt from 'jsencrypt'
import { getPublicKey } from '@/api/publicKey'
 
const privateKey =
  'MIICdwIBADANBgkqhkiG9w0BAQEFAASCAmEwggJdAgEAAoGBAMFPa+v52FkSUXvcUnrGI/XzW3EpZRI0s9BCWJ3oNQmEYA5luWW5p8h0uadTIoTyYweFPdH4hveyxlwmS7oefvbIdiP+o+QIYW/R4Wjsb4Yl8MhR4PJqUE3RCy6IT9fM8ckG4kN9ECs6Ja8fQFc6/mSl5dJczzJO3k1rWMBhKJD/AgMBAAECgYEAucMakH9dWeryhrYoRHcXo4giPVJsH9ypVt4KzmOQY/7jV7KFQK3x//27UoHfUCak51sxFw9ek7UmTPM4HjikA9LkYeE7S381b4QRvFuf3L6IbMP3ywJnJ8pPr2l5SqQ00W+oKv+w/VmEsyUHr+k4Z+4ik+FheTkVWp566WbqFsECQQDjYaMcaKw3j2Zecl8T6eUe7fdaRMIzp/gcpPMfT/9rDzIQk+7ORvm1NI9AUmFv/FAlfpuAMrdL2n7p9uznWb7RAkEA2aP934kbXg5bdV0R313MrL+7WTK/qdcYxATUbMsMuWWQBoS5irrt80WCZbG48hpocJavLNjbtrjmUX3CuJBmzwJAOJg8uP10n/+ZQzjEYXh+BszEHDuw+pp8LuT/fnOy5zrJA0dO0RjpXijO3vuiNPVgHXT9z1LQPJkNrb5ACPVVgQJBALPeb4uV0bNrJDUb5RB4ghZnIxv18CcaqNIft7vuGCcFBAIPIRTBprR+RuVq+xHDt3sNXdsvom4h49+Hky1b0ksCQBBwUtVaqH6ztCtwUF1j2c/Zcrt5P/uN7IHAd44K0gIJc1+Csr3qPG+G2yoqRM8KVqLI8Z2ZYn9c+AvEE+L9OQY='
 
/**
 * 最长加密长度
 * @type {number}
 */
const MAX_ENCRYPT_BLOCK = 117
/**
 * 最长解码长度
 * @type {number}
 */
const MAX_DECRYPT_BLOCK = 128
 
/**
 * @description RSA加密(支持长字符加密)
 * @param data
 * @returns {Promise<{param: PromiseLike<ArrayBuffer>}|*>}
 */
export async function encryptedData(data) {
  let publicKey
  const res = await getPublicKey()
  publicKey = res.data.publicKey
  if (res.data.mockServer) {
    publicKey = ''
  }
  if (publicKey === '') {
    return data
  }
  const encrypt = new JSEncrypt()
  encrypt.setPublicKey(
    `-----BEGIN PUBLIC KEY-----${publicKey}-----END PUBLIC KEY-----`
  )
  let bufTmp = ''
  let hexTmp = ''
  let result = ''
  const buffer = Buffer.from(JSON.stringify(data))
  let offSet = 0
  const inputLen = buffer.length
  while (inputLen - offSet > 0) {
    if (inputLen - offSet > MAX_ENCRYPT_BLOCK) {
      bufTmp = buffer.slice(offSet, offSet + MAX_ENCRYPT_BLOCK)
    } else {
      bufTmp = buffer.slice(offSet, inputLen)
    }
    hexTmp = encrypt.encrypt(bufTmp.toString())
    result += atob(hexTmp)
    offSet += MAX_ENCRYPT_BLOCK
  }
  return btoa(result)
}
 
/**
 * @description RSA解密(支持长字符解密)
 * @param data
 * @returns {PromiseLike<ArrayBuffer>}
 */
export function decryptedData(data) {
  const decrypt = new JSEncrypt()
  decrypt.setPrivateKey(
    `-----BEGIN RSA PRIVATE KEY-----${privateKey}-----END RSA PRIVATE KEY-----`
  )
  let bufTmp = ''
  let hexTmp = ''
  let result = ''
  const buffer = atob(data)
  let offSet = 0
  const inputLen = buffer.length
  while (inputLen - offSet > 0) {
    if (inputLen - offSet > MAX_DECRYPT_BLOCK) {
      bufTmp = buffer.slice(offSet, offSet + MAX_DECRYPT_BLOCK)
    } else {
      bufTmp = buffer.slice(offSet, inputLen)
    }
    hexTmp = decrypt.decrypt(btoa(bufTmp))
    result += hexTmp
    offSet += MAX_DECRYPT_BLOCK
  }
  return JSON.parse(result)
}复制

13.2、index.js

/**
 * @description 格式化时间
 * @param time
 * @param cFormat
 * @returns {string|null}
 */
export function parseTime(time, cFormat) {
  if (arguments.length === 0) {
    return null
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
      time = parseInt(time)
    }
    if (typeof time === 'number' && time.toString().length === 10) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay(),
  }
  return format.replace(/{([ymdhisa])+}/g, (result, key) => {
    let value = formatObj[key]
    if (key === 'a') {
      return ['日', '一', '二', '三', '四', '五', '六'][value]
    }
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
}
 
/**
 * @description 格式化时间
 * @param time
 * @param option
 * @returns {string}
 */
export function formatTime(time, option) {
  if (('' + time).length === 10) {
    time = parseInt(time) * 1000
  } else {
    time = +time
  }
  const d = new Date(time)
  const now = Date.now()
 
  const diff = (now - d) / 1000
 
  if (diff < 30) {
    return '刚刚'
  } else if (diff < 3600) {
    // less 1 hour
    return Math.ceil(diff / 60) + '分钟前'
  } else if (diff < 3600 * 24) {
    return Math.ceil(diff / 3600) + '小时前'
  } else if (diff < 3600 * 24 * 2) {
    return '1天前'
  }
  if (option) {
    return parseTime(time, option)
  } else {
    return (
      d.getMonth() +
      1 +
      '月' +
      d.getDate() +
      '日' +
      d.getHours() +
      '时' +
      d.getMinutes() +
      '分'
    )
  }
}
 
/**
 * @description 将url请求参数转为json格式
 * @param url
 * @returns {{}|any}
 */
export function paramObj(url) {
  const search = url.split('?')[1]
  if (!search) {
    return {}
  }
  return JSON.parse(
    '{"' +
    decodeURIComponent(search)
    .replace(/"/g, '\\"')
    .replace(/&/g, '","')
    .replace(/=/g, '":"')
    .replace(/\+/g, ' ') +
    '"}'
  )
}
 
/**
 * @description 父子关系的数组转换成树形结构数据
 * @param data
 * @returns {*}
 */
export function translateDataToTree(data) {
  const parent = data.filter(
    (value) => value.parentId === 'undefined' || value.parentId === null
  )
  const children = data.filter(
    (value) => value.parentId !== 'undefined' && value.parentId !== null
  )
  const translator = (parent, children) => {
    parent.forEach((parent) => {
      children.forEach((current, index) => {
        if (current.parentId === parent.id) {
          const temp = JSON.parse(JSON.stringify(children))
          temp.splice(index, 1)
          translator([current], temp)
          typeof parent.children !== 'undefined' ?
            parent.children.push(current) :
            (parent.children = [current])
        }
      })
    })
  }
  translator(parent, children)
  return parent
}
 
/**
 * @description 树形结构数据转换成父子关系的数组
 * @param data
 * @returns {[]}
 */
export function translateTreeToData(data) {
  const result = []
  data.forEach((item) => {
    const loop = (data) => {
      result.push({
        id: data.id,
        name: data.name,
        parentId: data.parentId,
      })
      const child = data.children
      if (child) {
        for (let i = 0; i < child.length; i++) {
          loop(child[i])
        }
      }
    }
    loop(item)
  })
  return result
}
 
/**
 * @description 10位时间戳转换年月日时分秒
 * @param time
 * @returns {string}
 */
export function tenBitTimestamp(time) {
  const date = new Date(time * 1000)
  const y = date.getFullYear()
  let m = date.getMonth() + 1
  m = m < 10 ? '' + m : m
  let d = date.getDate()
  d = d < 10 ? '' + d : d
  let h = date.getHours()
  h = h < 10 ? '0' + h : h
  let minute = date.getMinutes()
  let second = date.getSeconds()
  minute = minute < 10 ? '0' + minute : minute
  second = second < 10 ? '0' + second : second
  return y + '年' + m + '月' + d + '日 ' + h + ':' + minute + ':' + second //组合
}
/**
 * @description 10位时间戳转换时分秒
 * @param time
 * @returns {string}
 */
export function tenBitTimestampHms(time) {
  const date = new Date(time * 1000)
  let h = date.getHours()
  h = h < 10 ? '0' + h : h
  let minute = date.getMinutes()
  let second = date.getSeconds()
  minute = minute < 10 ? '0' + minute : minute
  second = second < 10 ? '0' + second : second
  return h + ':' + minute + ':' + second //组合
}
 
/**
 * @description 13位时间戳转换
 * @param time
 * @returns {string}
 */
export function thirteenBitTimestamp(time) {
  const date = new Date(time / 1)
  const y = date.getFullYear()
  let m = date.getMonth() + 1
  m = m < 10 ? '' + m : m
  let d = date.getDate()
  d = d < 10 ? '' + d : d
  let h = date.getHours()
  h = h < 10 ? '0' + h : h
  let minute = date.getMinutes()
  let second = date.getSeconds()
  minute = minute < 10 ? '0' + minute : minute
  second = second < 10 ? '0' + second : second
  return y + '年' + m + '月' + d + '日 ' + h + ':' + minute + ':' + second //组合
}
 
/**
 * @description 获取随机id
 * @param length
 * @returns {string}
 */
export function uuid(length = 32) {
  const num = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'
  let str = ''
  for (let i = 0; i < length; i++) {
    str += num.charAt(Math.floor(Math.random() * num.length))
  }
  return str
}
 
/**
 * @description m到n的随机数
 * @param m
 * @param n
 * @returns {number}
 */
export function random(m, n) {
  return Math.floor(Math.random() * (m - n) + n)
}
 
/**
 * @description addEventListener
 * @type {function(...[*]=)}
 */
export const on = (function () {
  return function (element, event, handler, useCapture = false) {
    if (element && event && handler) {
      element.addEventListener(event, handler, useCapture)
    }
  }
})()
 
/**
 * @description removeEventListener
 * @type {function(...[*]=)}
 */
export const off = (function () {
  return function (element, event, handler, useCapture = false) {
    if (element && event) {
      element.removeEventListener(event, handler, useCapture)
    }
  }
})()
 
/**
 * @description 数组打乱
 * @param array
 * @returns {*}
 */
export function shuffle(array) {
  let m = array.length,
    t,
    i
  while (m) {
    i = Math.floor(Math.random() * m--)
    t = array[m]
    array[m] = array[i]
    array[i] = t
  }
  return array
}
/**
 * @description ele表格序号
 * @param number
 * @returns {string}
 */
export function indexMethod(index) {
  return index + 1;
}
/**
 * @description 获取当前时间并打印
 * @param null
 * @returns {string}
 */
export function getCurrentTime() {
  var _this = this
  let yy = new Date().getFullYear()
  let mm = new Date().getMonth() + 1
  let dd = new Date().getDate()
  let hh = new Date().getHours()
  let mf =
    new Date().getMinutes() < 10 ?
    '0' + new Date().getMinutes() :
    new Date().getMinutes()
  let ss =
    new Date().getSeconds() < 10 ?
    '0' + new Date().getSeconds() :
    new Date().getSeconds()
  return (_this.gettime =
    yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss)
}
/**
 * @description 数组里对象根据某个值(包含姓名、字母、数字)排序
 * @param null
 * @returns {array}
 */
export function compare(data) {
  let chineseChars = [],
    chars = [],
    list = [];
  data.forEach(item => {
    // 判断是否为中文
    if (/^[\u4e00-\u9fa5]*$/.test(item.nickname.charAt(0))) {
      chineseChars.push(item); // 姓名首字符为中文的
    } else {
      chars.push(item); // 姓名首字符非中文的（字母，数字）
    }
  });
  chars.sort((a, b) => a.nickname.charCodeAt(0) - b.nickname.charCodeAt(0));
  chineseChars.sort((a, b) => a.nickname.localeCompare(b.nickname));
  list = chars.concat(chineseChars); // list为最终想要的数组
  return list
}复制

13.3、preventReClick.js

 
// 防止多次点击，重复请求
import Vue from 'vue'
 
const preventReClick = Vue.directive('preventReClick', {
    inserted: function (el, binding) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabled = true
                setTimeout(() => {
                    el.disabled = false
                }, binding.value || 3000)
            }
        })
    }
});
 
export default{ preventReClick }复制

13.4、scroll-to.js

Math.easeInOutQuad = function(t, b, c, d) {
  t /= d / 2
  if (t < 1) {
    return c / 2 * t * t + b
  }
  t--
  return -c / 2 * (t * (t - 2) - 1) + b
}
 
// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
var requestAnimFrame = (function() {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
})()
 
/**
 * Because it's so fucking difficult to detect the scrolling element, just move them all
 * @param {number} amount
 */
function move(amount) {
  document.documentElement.scrollTop = amount
  document.body.parentNode.scrollTop = amount
  document.body.scrollTop = amount
}
 
function position() {
  return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
}
 
/**
 * @param {number} to
 * @param {number} duration
 * @param {Function} callback
 */
export function scrollTo(to, duration, callback) {
  const start = position()
  const change = to - start
  const increment = 20
  let currentTime = 0
  duration = (typeof (duration) === 'undefined') ? 500 : duration
  var animateScroll = function() {
    // increment the time
    currentTime += increment
    // find the value with the quadratic in-out easing function
    var val = Math.easeInOutQuad(currentTime, start, change, duration)
    // move the document.body
    move(val)
    // do the animation unless its over
    if (currentTime < duration) {
      requestAnimFrame(animateScroll)
    } else {
      if (callback && typeof (callback) === 'function') {
        // the animation is done so lets callback
        callback()
      }
    }
  }
  animateScroll()
}复制

13.5、validate.js

/**
 * @description 判读是否为外链
 * @param path
 * @returns {boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:|\/\/)/.test(path)
}
 
/**
 * @description 校验密码是否小于6位
 * @param value
 * @returns {boolean}
 */
export function isPassword(value) {
  return value.length >= 6
}
 
/**
 * @description 判断是否为数字
 * @param value
 * @returns {boolean}
 */
export function isNumber(value) {
  const reg = /^[0-9]*$/
  return reg.test(value)
}
 
/**
 * @description 判断是否是名称
 * @param value
 * @returns {boolean}
 */
export function isName(value) {
  const reg = /^[\u4e00-\u9fa5]+$/
  return reg.test(value)
}
 
/**
 * @description 判断是否为IP
 * @param ip
 * @returns {boolean}
 */
export function isIP(ip) {
  const reg =
    /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
  return reg.test(ip)
}
 
/**
 * @description 判断是否是传统网站
 * @param url
 * @returns {boolean}
 */
export function isUrl(url) {
  const reg =
    /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return reg.test(url)
}
 
/**
 * @description 判断是否是小写字母
 * @param value
 * @returns {boolean}
 */
export function isLowerCase(value) {
  const reg = /^[a-z]+$/
  return reg.test(value)
}
 
/**
 * @description 判断是否是大写字母
 * @param value
 * @returns {boolean}
 */
export function isUpperCase(value) {
  const reg = /^[A-Z]+$/
  return reg.test(value)
}
 
/**
 * @description 判断是否是大写字母开头
 * @param value
 * @returns {boolean}
 */
export function isAlphabets(value) {
  const reg = /^[A-Za-z]+$/
  return reg.test(value)
}
 
/**
 * @description 判断是否是字符串
 * @param value
 * @returns {boolean}
 */
export function isString(value) {
  return typeof value === 'string' || value instanceof String
}
 
/**
 * @description 判断是否是数组
 * @param arg
 */
export function isArray(arg) {
  if (typeof Array.isArray === 'undefined') {
    return Object.prototype.toString.call(arg) === '[object Array]'
  }
  return Array.isArray(arg)
}
 
/**
 * @description 判断是否是端口号
 * @param value
 * @returns {boolean}
 */
export function isPort(value) {
  const reg =
    /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
  return reg.test(value)
}
 
/**
 * @description 判断是否是手机号
 * @param value
 * @returns {boolean}
 */
export function isPhone(value) {
  const reg = /^1\d{10}$/
  return reg.test(value)
}
 
/**
 * @description 判断是否是身份证号(第二代)
 * @param value
 * @returns {boolean}
 */
export function isIdCard(value) {
  const reg =
    /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
  return reg.test(value)
}
 
/**
 * @description 判断是否是邮箱
 * @param value
 * @returns {boolean}
 */
export function isEmail(value) {
  const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
  return reg.test(value)
}
 
/**
 * @description 判断是否中文
 * @param value
 * @returns {boolean}
 */
export function isChina(value) {
  const reg = /^[\u4E00-\u9FA5]{0,30}$/
  return reg.test(value)
}
 
/**
 * @description 判断是否为空
 * @param value
 * @returns {boolean}
 */
export function isBlank(value) {
  return (
    value === null ||
    false ||
    value === '' ||
    value.trim() === '' ||
    value.toLocaleLowerCase().trim() === 'null'
  )
}
 
/**
 * @description 判断是否为固话
 * @param value
 * @returns {boolean}
 */
export function isTel(value) {
  const reg =
    /^(400|800)([0-9\\-]{7,10})|(([0-9]{4}|[0-9]{3})([- ])?)?([0-9]{7,8})(([- 转])*([0-9]{1,4}))?$/
  return reg.test(value)
}
 
/**
 * @description 判断是否为数字且最多两位小数
 * @param value
 * @returns {boolean}
 */
export function isNum(value) {
  const reg = /^\d+(\.\d{1,2})?$/
  return reg.test(value)
}
 
/**
 * @description 判断是否为json
 * @param value
 * @returns {boolean}
 */
export function isJson(value) {
  if (typeof value === 'string') {
    const obj = JSON.parse(value)
    return !!(typeof obj === 'object' && obj)
  }
  return false
}复制

14、资源地址

https://download.csdn.net/download/askuld/88216937