ccitu-web-common

v1.2.10

Published

3 months ago

Downloads

0High
0Medium
0Low

ccitu

CCITU.Web.Common

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

📚 参考文档

🌈 介绍

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

1. 安装组件

npm i ccitu-web-common

2. 注册组件 main.js

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

} from 'ccitu-web-common'

//注册全局组件
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. 引用组件

3.1 搜索头部组件

<!--搜索头部组件-->
<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: [
                {
                    具体看文档
                }
            ],
    },
};

3.2 上传单张图片组件

⚠️需要在外部配置文件 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>

3.3 上传多张图片组件

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

3.5 上传文件

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

3.6 表格组件

   <scTable ref="userTable" :apiObj="" :params="params" :column="column" @loadFinished="loadFinished" @selectGroupAll-change ='selectAllItems' 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//分析状态字段结构
			column:{
				 {
				label: "",
				prop: "selection",   //显示全选按钮
				width: "40",
				},
			}
        }
	},
	}
	props: {
	    //分组表格显示数据条数 超过则显示 查看更多
	    groupRowCount: { type: Number,  default: 0  },	
	    //分组表格数据名称			
	    groupFields: {  type: String,  default:'' }			
  	},
	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)
	}
}

3.7 下拉框选择

<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值字段
	}
}

3.8 图表组件

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

3.9 富文本组件

⚠️需要在外部配置文件 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>

3.10 二维码组件

	// 后续补充

3.11 图片裁剪组件

	// 后续补充

3.12 下拉树形组件

	// 后续补充

3.13 scVxeTable 表格组件

  <scVxeTable ref="userTable" :apiObj="" :params="params" :column="column" @select-ChangeEvent='selectChangeEvent' @selection-change="selectionChange" :stripe='stripe' stripe style="height:80vh" :groupFields='groupFields'>
    	<!-- 表头插槽 -->
        <template #fieldHeader></template>
		<template #fieldHeader>
          {{column[0].title}}     	<!-- 表头标题 -->
        </template>
		<!-- 表头内容 -->
        <template #Photo="scope">
          <div v-if="scope.row.ItemList">
            <span class="selection_span"> 仓库：{{scope.row.RemovalNo}}</span>
            <span class="selection_span">Sku：{{scope.row.Creator}}</span>
            <span class="selection_span">目的地：{{scope.row.RecordStatus}}</span>
            <span class="selection_span">日期：{{scope.row.CreatedTime }}</span>
            <span class="selection_span">备注：{{scope.row.RemovalCategory}}</span>
          </div>
          <div v-else-if="scope.row.Photo">
            <el-image :src="scope.row.Photo" :preview-src-list="[scope.row.Photo]" :initial-index="0" fit="cover" hide-on-click-modal append-to-body :z-index="9999" style="width:35px; height:35px" lazy :scroll-container="scrollContainer" />
          </div>
        </template>
    </scVxeTable>

⚠️需要在main.js 外部配置文件 
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
app.use(VXETable)
//数据表格配置

export default {
	pageSize: 20,//表格每一页条数
	parseData: function (res) {
        return {
            data: res.Tag,
            rows: res.Tag,//分析行数据字段结构
            msg: res.Message,//分析描述字段结构
            code: res.ResultCode//分析状态字段结构,
			tablePage:{
				total: 0,  //分析总数字段结构
				currentPage: 1,
				pageSize: 10
			}
			column:{
				{	
					title: "",			 //列标题
					field: "",   //列字段名
					align:'',			 //列对齐方式
					width: "",		 //列宽度    列宽度无法撑满表格时 需将宽度设置成自适应 auto
					fieldHeader:'fieldHeader'     //表头自定义插槽
					visible:true        //默认显示  false隐藏
				},
			}
        }
	},
	}
	props: {
	    //分组表格显示数据条数 超过则显示“查看更多”操作，0=默认显示全部
	    groupRowCount: { type: Number,  default: 0  },	
	    //分组表格数据来源字段
	    groupFields: {  type: String,  default:'' }			
  	},
	request: {				                
		page: 'pageIndex',//规定当前分页字段
		pageSize: 'pageSize',//规定一页条数字段
		prop: 'prop',//规定排序字段名字段
		order: 'order'//规定排序规格字段
	},
}