zx_wgj_test v1.1.18

CCITU.Web.Common

💝常见中大型后台组件库 前端公共组件库💝

📚 参考文档

🌈 介绍

基于 vue3.x + ElementPlus二次封装表格表单下拉框富文本等等常见后台管理系统组件,希望减少工作量，帮助大家实现快速开发。

1. 安装组件

npm i zx_wgj_test

2. 注册组件 main.js

import {
    scSearchForm, //搜索框头部
    scUpload, // 上传单张图片组件
    scUploadMultiple, // 上传多张图片组件
    scFileUpload, // 上传文件
    scTable, // 表格组件
    scSelect, // 下拉框组件
    scSelectTree, // 下拉树形组件
    scQrCode, // 二维码组件
    scEcharts, // 图表组件
    scCropper, // 图片裁剪组件
    scEditor // 富文本组件
} from 'zx_wgj_test'

//注册全局组件
app.component('scSearchForm', scSearchForm);
app.component('scUpload', scUpload);
app.component('scUploadMultiple', scUploadMultiple);
app.component('scFileUpload', scFileUpload);
app.component('scTable', scTable);
app.component('scSelect', scSelect);
app.component('scSelectTree', scSelectTree);
app.component('scQrCode', scQrCode);
app.component('scEcharts', scEcharts);
app.component('scCropper', scCropper);
app.component('scEditor', scEditor);

3. 引用组件

搜索头部组件

<!--搜索头部组件-->
<template>
    <el-container>
        <el-header class="searchbox">
            <scSearchForm size="medium" 
            :search-data="searchDatas"
            :search-form="searchForms">
                <el-col :xs="24" :sm="12" :md="8" :lg="4">
                    <el-button type="primary" icon="el-icon-search">
                    搜索</el-button>
                    <el-button>导入</el-button>
                </el-col>
            </scSearchForm>
        </el-header>
    </el-container>
</template>

export default {
    data() {
        return {
            searchDatas: {
               field:'对应prop v-model字段'
            },
            searchForms: [
                {
                    具体看文档
                }
            ],
    },
};

上传单张图片组件

⚠️需要在外部配置文件 import config from "@/config/upload"; //上传配置

import API from "@/api";
export default {
	apiObj: API.file.uploadFile,//上传请求API对象
	imgApiObj: API.file.uploadImage,//上传图片请求API对象
	maxSize: 5,//最大文件大小 默认5MB
	parseData: function (res) {
		return {
			code: res.ResultCode,//分析状态字段结构
			fileId: res.Tag.FileId,//分析远程地址结构
			name: res.Tag.OriginName,//分析远程地址结构
			url: res.Tag.Url,//分析远程地址结构
			msg: res.Message//分析描述字段结构
		}
	}
}

 <scUpload v-model="IconUrl" :showFileList="true" :multiple="false" :drag="true"  style="width:150px;height:150px" ></scUpload>

上传多张图片组件

  <scUploadMultiple v-model="addForm.ShippingImg" :limit="3">
  </scUploadMultiple>

表格组件

   <scTable ref="userTable" :apiObj="" :params="params" :column="column" @loadFinished="loadFinished" stripe style="height:80vh">
          <!-- 各列自定义template -->
          <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
          <template #CreatedTime="scope">
          </template>
        </scTable>


⚠️需要在外部配置文件 import config from "@/config/table";
//数据表格配置
import { ElMessage } from 'element-plus'
import sysConfig from "@/config"
import tool from '@/utils/tool'

export default {
	pageSize: 20,//表格每一页条数
	parseData: function (res) {
        return {
            data: res.Tag,
            rows: res.Tag,//分析行数据字段结构
            total: res.TotalRecord,//分析总数字段结构
            msg: res.Message,//分析描述字段结构
            code: res.ResultCode//分析状态字段结构
        }
	},
	request: {				                
		page: 'pageIndex',//规定当前分页字段
		pageSize: 'pageSize',//规定一页条数字段
		prop: 'prop',//规定排序字段名字段
		order: 'order'//规定排序规格字段
	},
	/**
	 * 自定义列保存处理
	 * @tableName scTable组件的props->tableName
	 * @column 用户配置好的列
	 * @ref 列配置弹窗组件的ref
	 */
	columnSettingSave: function (tableName, column, ref) {
        ref.isSave = true
        setTimeout(()=>{
            ref.isSave = false
            tool.data.set(sysConfig.AuthorizationKey + "_column_" + tableName, column);
            ElMessage.success('配置保存成功')

        },1000)
	}
}

下拉框选择

<scSelect 
:apiObj="apiObj" 
:params="{}" apiMethod="post" 
:props="{ label: 'label', value: 'value' }"
placeholder="" 
multiple
v-model="formdata.AgentTypeIdList">

</scSelect>

⚠️需要在外部配置文件 import config from "@/config/select";
//数据下拉框配置
import { ElMessage } from 'element-plus'
import sysConfig from "@/config"
import tool from '@/utils/tool'

export default {
	dicApiObj: null,//API.system.dic.get,		//获取字典接口对象
	parseData: function (res) {
		return {
			data: res.Tag,				//分析行数据字段结构
			msg: res.Message,			//分析描述字段结构
			code: res.ResultCode		//分析状态字段结构
		}
	},
	request: {
		name: 'name'					//规定搜索字段
	},
	props: {
		labelFormat: '',				//映射label格式
		labelFormatArray: [],           //映射label格式字段
		label: 'label',					//映射label显示字段
		value: 'value',					//映射value值字段
	}
}

图表组件

<scEcharts height="300px" width="1200px" :option="options"></scEcharts>

富文本组件

⚠️需要在外部配置文件 import config from "@/config/upload"; //上传配置

import API from "@/api";
export default {
	apiObj: API.file.uploadFile,//上传请求API对象
	imgApiObj: API.file.uploadImage,//上传图片请求API对象
	maxSize: 5,//最大文件大小 默认5MB
	parseData: function (res) {
		return {
			code: res.ResultCode,//分析状态字段结构
			fileId: res.Tag.FileId,//分析远程地址结构
			name: res.Tag.OriginName,//分析远程地址结构
			url: res.Tag.Url,//分析远程地址结构
			msg: res.Message//分析描述字段结构
		}
	}
}

<scEditor v-model="" placeholder="" :height="370"></scEditor>