# ccitu-web-common

Latest version **1.2.14** (published 2025-08-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install ccitu-web-common
pnpm add ccitu-web-common
yarn add ccitu-web-common
bun add ccitu-web-common
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.14 |
| Published | 2025-08-11 |
| First published | 2023-08-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 296 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ccitu |
| Maintainers | ccitu |

## Links

- npm: https://www.npmjs.com/package/ccitu-web-common
- npm.io page: https://npm.io/package/ccitu-web-common

## Recent versions

- 1.2.14 (latest) — 2025-08-11
- 1.2.13 — 2025-07-10
- 1.2.12 — 2025-01-09
- 1.2.11 — 2025-01-06
- 1.2.10 — 2024-08-23
- 1.2.9 — 2024-07-23
- 1.2.8 — 2024-07-01
- 1.2.7 — 2024-06-22
- 1.2.6 — 2024-05-24
- 1.2.5 — 2024-05-09
- 1.2.4 — 2024-04-10
- 1.2.3 — 2024-04-09
- 1.2.2 — 2023-12-07
- 1.2.1 — 2023-12-07
- 1.2.0 — 2023-12-02
- … 18 more at https://npm.io/package/ccitu-web-common/versions

## README

# CCITU.Web.Common 
##  💝常见中大型后台组件库 前端公共组件库💝

#### 📚 参考文档
<!-- - 查看开发文档：<a href="https://www.showdoc.com.cn/CCITU/10214210447546515" target="_blank">zx参考文档</a> -->

#### 🌈 介绍

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

### 1. 安装组件
```
npm i ccitu-web-common
```  
### 2. 注册组件 main.js
```javascript
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 搜索头部组件
``` javascript
<!--搜索头部组件-->
<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";
//上传配置
```javascript
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//分析描述字段结构
		}
	}
}
``` 
``` javascript
 <scUpload v-model="IconUrl" :showFileList="true" :multiple="false" :drag="true"  style="width:150px;height:150px" ></scUpload>
``` 
#### 3.3 上传多张图片组件
``` javascript
  <scUploadMultiple v-model="addForm.ShippingImg" :limit="3">
  </scUploadMultiple>
``` 
#### 3.5 上传文件
``` javascript
  <scFileUpload v-model="addForm.ShippingImg" :limit="3">
  </scFileUpload>
``` 
#### 3.6 表格组件 
``` javascript
   <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 下拉框选择
``` javascript
<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 图表组件
``` javascript
<scEcharts height="300px" width="1200px" :option="options"></scEcharts>
``` 
#### 3.9 富文本组件
⚠️需要在外部配置文件 import config from "@/config/upload";
//上传配置
```javascript
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//分析描述字段结构
		}
	}
}
```
``` javascript

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



#### 3.10 二维码组件
```javascript
	// 后续补充

```
#### 3.11 图片裁剪组件
```javascript
	// 后续补充

```

#### 3.12 下拉树形组件
```javascript
	// 后续补充

```

#### 3.13 scVxeTable 表格组件
```javascript
  <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'//规定排序规格字段
	},
}
```
```

---
_Source: https://npm.io/package/ccitu-web-common · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._