构建框架
This commit is contained in:
龙运模
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-alert title="感谢百度Echarts组件, SCUI经过封装后在VUE里使用更方便而且暴露Echarts所有方法,具体请查看本文件" type="success" style="margin-bottom:20px;"></el-alert>
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never">
|
||||
<scEcharts height="300px" :option="option"></scEcharts>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never">
|
||||
<scEcharts height="300px" :option="option2"></scEcharts>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never">
|
||||
<scEcharts height="300px" :option="option3"></scEcharts>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never">
|
||||
<scEcharts height="300px" :option="option4"></scEcharts>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never">
|
||||
<scEcharts height="300px" :option="option5"></scEcharts>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never">
|
||||
<scEcharts height="300px" :option="option6"></scEcharts>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scEcharts from '@/components/scEcharts';
|
||||
|
||||
/**
|
||||
* 引入组件 @/components/scEcharts
|
||||
* 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
|
||||
* 支持props包括 height，width，option
|
||||
* 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'chart',
|
||||
components: {
|
||||
scEcharts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
title: {
|
||||
text: 'Bar Demo',
|
||||
subtext: '基础柱状图',
|
||||
},
|
||||
grid: {
|
||||
top: '80px'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: [120, 200, 150, 80, 70, 110, 130],
|
||||
type: 'bar',
|
||||
barWidth: '15px',
|
||||
},
|
||||
{
|
||||
data: [110, 180, 120, 120, 60, 90, 110],
|
||||
type: 'bar',
|
||||
barWidth: '15px',
|
||||
}]
|
||||
},
|
||||
option2: {
|
||||
title: {
|
||||
text: 'Line Demo',
|
||||
subtext: '基础折线图',
|
||||
},
|
||||
grid: {
|
||||
top: '80px'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: [120, 200, 150, 80, 70, 110, 130],
|
||||
type: 'line',
|
||||
},
|
||||
{
|
||||
data: [110, 180, 120, 120, 60, 90, 110],
|
||||
type: 'line',
|
||||
}]
|
||||
},
|
||||
option3: {
|
||||
title: {
|
||||
text: 'Pie Demo',
|
||||
subtext: '基础饼图',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['50%', '60%'],
|
||||
label: false,
|
||||
data: [
|
||||
{value: 1048, name: '搜索引擎'},
|
||||
{value: 735, name: '直接访问'},
|
||||
{value: 580, name: '邮件营销'},
|
||||
{value: 484, name: '联盟广告'},
|
||||
{value: 300, name: '视频广告'}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
option4: {
|
||||
title: {
|
||||
text: 'Radar Demo',
|
||||
subtext: '基础雷达(属性)图',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
radar: {
|
||||
radius: 100,
|
||||
center: ['50%', '55%'],
|
||||
indicator: [
|
||||
{ name: '销售', max: 100},
|
||||
{ name: '管理', max: 100},
|
||||
{ name: '信息技术', max: 100},
|
||||
{ name: '客服', max: 100},
|
||||
{ name: '研发', max: 100},
|
||||
{ name: '市场', max: 100}
|
||||
]
|
||||
},
|
||||
series: [{
|
||||
name: "SCUI",
|
||||
type: 'radar',
|
||||
areaStyle: {},
|
||||
data: [
|
||||
{
|
||||
value: [74, 90, 95, 65, 80, 31],
|
||||
}
|
||||
]
|
||||
}]
|
||||
},
|
||||
option5: {
|
||||
title: {
|
||||
text: 'Kline Demo',
|
||||
subtext: '基础K线图',
|
||||
},
|
||||
grid: {
|
||||
top: '80px'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
data: ['2017-10-23', '2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27', '2017-10-28', '2017-10-29', '2017-10-30'],
|
||||
},
|
||||
yAxis: {
|
||||
scale: true,
|
||||
},
|
||||
series: [{
|
||||
type: 'k',
|
||||
data: [
|
||||
[2213.19,2199.31,2191.85,2224.63],
|
||||
[2203.89,2177.91,2173.86,2210.58],
|
||||
[2170.78,2174.12,2161.14,2179.65],
|
||||
[2179.05,2205.5,2179.05,2222.81],
|
||||
[2212.5,2231.17,2212.5,2236.07],
|
||||
[2227.86,2235.57,2219.44,2240.26],
|
||||
[2242.39,2246.3,2235.42,2255.21],
|
||||
[2246.96,2232.97,2221.38,2247.86]
|
||||
]
|
||||
}]
|
||||
},
|
||||
option6: {
|
||||
title: {
|
||||
text: 'Gauge Demo',
|
||||
subtext: '基础仪表盘',
|
||||
},
|
||||
series: [{
|
||||
center: ['50%', '60%'],
|
||||
type: 'gauge',
|
||||
anchor: {
|
||||
show: true,
|
||||
showAbove: true,
|
||||
size: 20,
|
||||
itemStyle: {
|
||||
borderWidth: 5
|
||||
}
|
||||
},
|
||||
progress: {
|
||||
show: true
|
||||
},
|
||||
data: [{
|
||||
value: 70
|
||||
}]
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-alert title="感谢codeMirror组件" type="success" style="margin-bottom:20px;"></el-alert>
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="24">
|
||||
<el-card shadow="never" header="JSON">
|
||||
<sc-code-editor ref="editor" v-model="json" mode="javascript" :height="200"></sc-code-editor>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-button type="primary" @click="getCode">获取v-model</el-button>
|
||||
<el-button type="primary" @click="getValue">getValue()</el-button>
|
||||
<el-button type="primary" @click="setValue">setValue()</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never" header="javascript Darcula主题">
|
||||
<sc-code-editor v-model="js" mode="javascript" theme="darcula"></sc-code-editor>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never" header="SQL">
|
||||
<sc-code-editor v-model="sql" mode="sql"></sc-code-editor>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineAsyncComponent } from 'vue';
|
||||
const scCodeEditor = defineAsyncComponent(() => import('@/components/scCodeEditor'));
|
||||
|
||||
export default {
|
||||
name: "codeeditor",
|
||||
components: {
|
||||
scCodeEditor
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
json:
|
||||
`{
|
||||
"name": "SCUI",
|
||||
"menu": [
|
||||
{
|
||||
"title": "VUE 3",
|
||||
"type": true,
|
||||
"link": "https://v3.cn.vuejs.org"
|
||||
},
|
||||
{
|
||||
"title": "elementplus",
|
||||
"type": false,
|
||||
"link": "https://element-plus.gitee.io"
|
||||
}
|
||||
]
|
||||
}`,
|
||||
js:
|
||||
`// Demo code (the actual new parser character stream implementation)
|
||||
function StringStream(string) {
|
||||
this.pos = 0;
|
||||
this.string = string;
|
||||
}`,
|
||||
sql:
|
||||
`SELECT \`author\`, \`title\` FROM \`posts\`
|
||||
WHERE \`status\` = 'draft' AND \`author\` IN('author1','author2')
|
||||
ORDER BY \`created_at\` DESC, \`id\` DESC LIMIT 0, 10;`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCode(){
|
||||
this.$message("请查看控制台")
|
||||
console.log(this.json)
|
||||
},
|
||||
getValue(){
|
||||
this.$message("请查看控制台")
|
||||
var v = this.$refs.editor.coder.getValue()
|
||||
console.log(v)
|
||||
},
|
||||
setValue(){
|
||||
var v = `{"key":"newValue"}`
|
||||
this.$refs.editor.coder.setValue(v)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,120 @@
|
||||
<!--
|
||||
* @Descripttion: 右键简单组件演示文件
|
||||
* @version: 1.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年7月22日16:31:14
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<el-main>
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never">
|
||||
<el-alert title="试试右键表格行看看. 支持多级菜单, 动态菜单等等等..." type="success" style="margin-bottom:20px;"></el-alert>
|
||||
<el-table ref="table" :data="tableData" highlight-current-row @row-contextmenu="rowContextmenu">
|
||||
<el-table-column type="expand">
|
||||
<template #default="props">
|
||||
<el-empty :description="props.row.id + ' 自定义扩展行'" :image-size="60"></el-empty>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="id" label="ID" width="50"></el-table-column>
|
||||
<el-table-column prop="name" label="NAME" width="220"></el-table-column>
|
||||
<el-table-column prop="date" label="DATE"></el-table-column>
|
||||
<el-table-column prop="state" label="STATE"></el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never" @contextmenu.prevent="openMenu">
|
||||
<div style="height:500px;display: flex;flex-direction: column;align-items: center;justify-content: center;color: #999;">
|
||||
试试看在上下左右四个角落右键，看看边缘位置修正效果
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
|
||||
<sc-contextmenu ref="contextmenu" @command="handleCommand" @visible-change="visibleChange">
|
||||
<sc-contextmenu-item command="a" title="返回(B)" suffix="Alt+←"></sc-contextmenu-item>
|
||||
<sc-contextmenu-item command="b" title="重新加载(R)" suffix="Ctrl+R" icon="el-icon-refresh"></sc-contextmenu-item>
|
||||
<sc-contextmenu-item title="切换兼容性模式" divided>
|
||||
<sc-contextmenu-item command="c1" title="二级菜单1"></sc-contextmenu-item>
|
||||
<sc-contextmenu-item title="二级菜单2">
|
||||
<sc-contextmenu-item command="c2-1" title="三级菜单1"></sc-contextmenu-item>
|
||||
<sc-contextmenu-item command="c2-2" title="三级菜单2"></sc-contextmenu-item>
|
||||
<sc-contextmenu-item command="c2-3" title="三级菜单3"></sc-contextmenu-item>
|
||||
</sc-contextmenu-item>
|
||||
<sc-contextmenu-item command="c3" title="二级菜单3"></sc-contextmenu-item>
|
||||
</sc-contextmenu-item>
|
||||
<sc-contextmenu-item command="d" title="属性(P)" divided :disabled="row&&row.state==0"></sc-contextmenu-item>
|
||||
<sc-contextmenu-item command="e" title="设置state=1" v-if="row&&row.state==0"></sc-contextmenu-item>
|
||||
</sc-contextmenu>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scContextmenu from '@/components/scContextmenu'
|
||||
import scContextmenuItem from '@/components/scContextmenu/item'
|
||||
export default {
|
||||
name: 'contextmenu',
|
||||
components: {
|
||||
scContextmenu,
|
||||
scContextmenuItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
row: null,
|
||||
tableData: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Sakuya',
|
||||
date: '2021-10-10',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Lolowan(此行右键属性禁用)',
|
||||
date: '2021-10-09',
|
||||
state: 0
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Ali',
|
||||
date: '2021-10-08',
|
||||
state: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
rowContextmenu(row, column, event){
|
||||
this.row = row
|
||||
this.$refs.table.setCurrentRow(row);
|
||||
this.$refs.contextmenu.openMenu(event)
|
||||
},
|
||||
openMenu(e){
|
||||
this.row = null
|
||||
this.$refs.contextmenu.openMenu(e)
|
||||
},
|
||||
handleCommand(command){
|
||||
this.$message('click on item ' + command)
|
||||
if(command == 'e'){
|
||||
this.row.state = 1
|
||||
}
|
||||
},
|
||||
visibleChange(visible){
|
||||
if(!visible){
|
||||
this.$refs.table.setCurrentRow();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-alert title="SCUI独创, 区别于市面上的规则生成器, 对不是很理解Cron的操作员也可以选择设置的快捷录入" type="success" style="margin-bottom:20px;"></el-alert>
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never" header="默认">
|
||||
<sc-cron v-model="v1" placeholder="请输入Cron定时规则" clearable></sc-cron>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never" header="快捷扩展">
|
||||
<sc-cron v-model="v2" placeholder="请输入Cron定时规则" clearable :shortcuts="shortcuts"></sc-cron>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scCron from '@/components/scCron'
|
||||
|
||||
export default {
|
||||
name: 'cron',
|
||||
components: {
|
||||
scCron
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
v1: "",
|
||||
v2: "",
|
||||
shortcuts: [
|
||||
{
|
||||
text: "每天8点和12点 (自定义追加)",
|
||||
value: "0 0 8,12 * * ?"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,98 @@
|
||||
<!--
|
||||
* @Descripttion: 图像剪裁组件演示文件
|
||||
* @version: 1.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年7月24日20:58:51
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<el-main>
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="14">
|
||||
<el-card shadow="never">
|
||||
<sc-cropper :src="cropperImg" :compress="compress" :aspectRatio="aspectRatio" ref="cropper"></sc-cropper>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="参数和方法">
|
||||
<el-form label-width="100px">
|
||||
<el-form-item label="aspectRatio">
|
||||
<el-select v-model="aspectRatio" placeholder="请选择">
|
||||
<el-option label="自由" :value="0"></el-option>
|
||||
<el-option label="1:1" :value="1/1"></el-option>
|
||||
<el-option label="4:3" :value="4/3"></el-option>
|
||||
<el-option label="16:9" :value="16/9"></el-option>
|
||||
</el-select>
|
||||
<div class="el-form-item-msg">固定选区或者不固定</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="compress">
|
||||
<el-select v-model="compress" placeholder="请选择">
|
||||
<el-option label="0.1" :value="0.1"></el-option>
|
||||
<el-option label="0.5" :value="0.5"></el-option>
|
||||
<el-option label="1" :value="1"></el-option>
|
||||
</el-select>
|
||||
<div class="el-form-item-msg">图像压缩率，值为：0.1-1</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button type="primary" plain @click="getBase64">Base64</el-button>
|
||||
<el-button type="primary" plain @click="getBlob">Blob</el-button>
|
||||
<el-button type="primary" plain @click="getFile">File</el-button>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="方法结果">
|
||||
<img :src="imgData" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="10">
|
||||
<el-card shadow="never" header="已内置剪裁的上传组件">
|
||||
<el-alert title="设置cropper就可以开启上传前剪裁, 并已封装compress和aspectRatio, 打开F12查看网络请求" type="success" style="margin-bottom:20px;"></el-alert>
|
||||
<sc-upload v-model="uploadImg" title="开启剪裁" :cropper="true" :compress="1" :aspectRatio="1/1"></sc-upload>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scCropper from '@/components/scCropper'
|
||||
|
||||
export default {
|
||||
name: 'cropper',
|
||||
components: {
|
||||
scCropper
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cropperImg: 'img/avatar.jpg',
|
||||
compress: 0.5,
|
||||
aspectRatio: 0,
|
||||
uploadImg: '',
|
||||
imgData: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getBase64(){
|
||||
this.$refs.cropper.getCropData(data=>{
|
||||
this.imgData = data
|
||||
})
|
||||
},
|
||||
getBlob(){
|
||||
this.$refs.cropper.getCropBlob(blob=>{
|
||||
this.imgData = URL.createObjectURL(blob)
|
||||
})
|
||||
},
|
||||
getFile(){
|
||||
this.$refs.cropper.getCropFile(file=>{
|
||||
let aTag = document.createElement('a')
|
||||
aTag.download = file.name;
|
||||
aTag.href = URL.createObjectURL(file)
|
||||
aTag.click()
|
||||
}, 'fileName.jpg', 'image/jpeg')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<sc-dialog v-model="visible" title="提示" @closed="$emit('closed')">
|
||||
内容1
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="visible = false">确 定</el-button>
|
||||
</template>
|
||||
</sc-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log("加载./dialog1组件完成")
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<sc-dialog v-model="visible" title="提示" @closed="$emit('closed')">
|
||||
内容2
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="visible = false">确 定</el-button>
|
||||
</template>
|
||||
</sc-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log("加载./dialog2组件完成")
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,101 @@
|
||||
<!--
|
||||
* @Descripttion: scDialog 弹窗扩展演示文件
|
||||
* @version: 1.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年8月27日08:56:30
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<el-main>
|
||||
<el-alert title="二次封装el-dialog,加入加载中/最大化." type="success" style="margin:0 0 20px 0;"></el-alert>
|
||||
<el-card shadow="never" header="内置">
|
||||
<el-button type="primary" @click="open1">默认</el-button>
|
||||
<el-button type="primary" @click="open2">加载</el-button>
|
||||
<el-button type="primary" @click="open3">禁止拖拽最大化和关闭</el-button>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="异步" style="margin-top: 15px;">
|
||||
<el-button type="primary" @click="asyn1">异步加载1</el-button>
|
||||
<el-button type="primary" @click="asyn2">异步加载2</el-button>
|
||||
<el-alert title="适用于页面有很多弹窗操作,利用异步组件按需加载,加快首屏的加载速度和打包体积" style="margin-top: 20px;"></el-alert>
|
||||
</el-card>
|
||||
</el-main>
|
||||
|
||||
<sc-dialog v-model="dialog1" draggable title="提示">
|
||||
内容
|
||||
<template #footer>
|
||||
<el-button @click="dialog1 = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialog1 = false">确 定</el-button>
|
||||
</template>
|
||||
</sc-dialog>
|
||||
|
||||
<sc-dialog v-model="dialog2" draggable title="模拟加载" :width="400" :loading="dialog2Loading">
|
||||
<el-empty description="NO Data" :image-size="80"></el-empty>
|
||||
<template #footer>
|
||||
<el-button @click="dialog2 = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialog2 = false" :loading="dialog2Loading">确 定</el-button>
|
||||
</template>
|
||||
</sc-dialog>
|
||||
|
||||
<sc-dialog v-model="dialog3" title="禁用拖拽" :show-fullscreen="false" :show-close="false">
|
||||
内容
|
||||
<template #footer>
|
||||
<el-button @click="dialog3 = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialog3 = false">确 定</el-button>
|
||||
</template>
|
||||
</sc-dialog>
|
||||
|
||||
<dialog1 v-if="asynDialog1" draggable @closed="asynDialog1 = false"></dialog1>
|
||||
<dialog2 v-if="asynDialog2" draggable @closed="asynDialog2 = false"></dialog2>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'dialogExtend',
|
||||
components: {
|
||||
dialog1: defineAsyncComponent(() => import("./dialog1")),
|
||||
dialog2: defineAsyncComponent(() => import("./dialog2"))
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog1: false,
|
||||
dialog2: false,
|
||||
dialog3: false,
|
||||
dialog2Loading: false,
|
||||
asynDialog1: false,
|
||||
asynDialog2: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
open1(){
|
||||
this.dialog1 = true
|
||||
},
|
||||
open2(){
|
||||
this.dialog2 = true
|
||||
this.dialog2Loading = true
|
||||
setTimeout(()=>{
|
||||
this.dialog2Loading = false
|
||||
}, 1000)
|
||||
},
|
||||
open3(){
|
||||
this.dialog3 = true
|
||||
},
|
||||
asyn1(){
|
||||
this.asynDialog1 = true
|
||||
},
|
||||
asyn2(){
|
||||
this.asynDialog2 = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-alert title="感谢Vue3.0版本的vue.draggable.next拖拽组件 https://github.com/SortableJS/vue.draggable.next" type="success" style="margin-bottom:20px;"></el-alert>
|
||||
<div class="dragList">
|
||||
<draggable v-model="listA" animation="200" item-key="id" group="people">
|
||||
<template #item="{ element }">
|
||||
<div class="item">{{element.text}}</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
<div class="dragList">
|
||||
<draggable v-model="listB" animation="200" item-key="id" group="people">
|
||||
<template #item="{ element }">
|
||||
<div class="item">{{element.text}}</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
export default {
|
||||
name: 'drag',
|
||||
components: {
|
||||
draggable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
listA: [
|
||||
{
|
||||
id: 1,
|
||||
text: 'A1'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: 'A2'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: 'A3'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
text: 'A4'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
text: 'A5'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
text: 'A6'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
text: 'A7'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
text: 'A8'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
text: 'A9'
|
||||
}
|
||||
],
|
||||
listB: [
|
||||
{
|
||||
id: 1,
|
||||
text: 'B1'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: 'B2'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: 'B3'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
text: 'B4'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
text: 'B5'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
text: 'B6'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
text: 'B7'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
text: 'B8'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
text: 'B9'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dragList {overflow: auto;}
|
||||
.item {cursor: move;float: left;background: #fff;width:100px;height: 100px;line-height: 100px;text-align: center;margin:0 15px 15px 0;border: 1px solid #e6e6e6;}
|
||||
.dragList .sortable-ghost {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-card shadow="never">
|
||||
<sc-editor v-model="html" placeholder="请输入" :templates="templates" :height="400"></sc-editor>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="配置" style="margin-top: 20px;">
|
||||
<el-descriptions border :column="1">
|
||||
<el-descriptions-item label="v-model">绑定的内容</el-descriptions-item>
|
||||
<el-descriptions-item label="placeholder">占位符</el-descriptions-item>
|
||||
<el-descriptions-item label="height">编辑器高度，默认300</el-descriptions-item>
|
||||
<el-descriptions-item label="disabled">禁用编辑器 Boolean</el-descriptions-item>
|
||||
<el-descriptions-item label="templates">插入自定义模板 Array</el-descriptions-item>
|
||||
<el-descriptions-item label="toolbar">自定义工具栏，使用"|"竖杠分割，使用"\"斜杠分组，默认：'undo redo | forecolor backcolor bold italic underline strikethrough link | blocks fontfamily fontsize | \
|
||||
alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | pagebreak | \
|
||||
image media table template preview | code selectall'</el-descriptions-item>
|
||||
<el-descriptions-item label="options">支持tinymce的其他配置项</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineAsyncComponent } from 'vue';
|
||||
const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));
|
||||
|
||||
export default {
|
||||
name: "editor",
|
||||
components: {
|
||||
scEditor
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
html: '',
|
||||
templates: [
|
||||
{
|
||||
title: '自定义HTML模板',
|
||||
description: '',
|
||||
content: '<strong>演示模板</strong>'
|
||||
},
|
||||
{
|
||||
title: '列表',
|
||||
description: '',
|
||||
content: '<ol><li>演示列表1</li><li>演示列表2</li></ol>'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="18">
|
||||
<el-card shadow="never">
|
||||
<el-alert title="资源库选择器即将弃用,将不会维护更新,与1.7版本之后将移除此组件" type="error" style="margin-bottom:20px;"></el-alert>
|
||||
<sc-file-select v-model="file" :multiple="multiple" :hideUpload="hideUpload" :max="99" @submit="submit">
|
||||
<template #do>
|
||||
<el-button>自定义插槽</el-button>
|
||||
</template>
|
||||
</sc-file-select>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="6">
|
||||
<el-card shadow="never" header="参数和方法">
|
||||
<el-button type="primary" @click="multiple = !multiple">切换multiple</el-button>
|
||||
<el-button type="primary" @click="hideUpload = !hideUpload">切换hideUpload</el-button>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scFileSelect from '@/components/scFileSelect'
|
||||
|
||||
export default {
|
||||
name: 'fileselect',
|
||||
components: {
|
||||
scFileSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
file: '',
|
||||
multiple: false,
|
||||
hideUpload: false,
|
||||
upload: '',
|
||||
upload2: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
submit(value){
|
||||
console.log(value)
|
||||
this.$message("返回值请查看F12控制台console.log()")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-card shadow="never" header="过滤器">
|
||||
<scFilterBar filterName="filterName" :options="options" @filterChange="change">
|
||||
<template #default="{filterLength, openFilter}">
|
||||
<el-badge :value="filterLength" type="danger" :hidden="filterLength<=0">
|
||||
<el-button icon="el-icon-filter" @click="openFilter"></el-button>
|
||||
</el-badge>
|
||||
</template>
|
||||
</scFilterBar>
|
||||
</el-card>
|
||||
<el-alert title="SCUI 独创的过滤条Filterbar,可配置不同类型的过滤字段,以及异步获取数据,在@/config/filterBar.js中可以更改运算符以及其他配置,操作上方过滤条查看下方change事件的回调,在表格查询的场景下非常合适" type="success" style="margin:20px 0;"></el-alert>
|
||||
<el-card shadow="never" header="返回值">
|
||||
<pre>{{ filterData }}</pre>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scFilterBar from '@/components/scFilterBar';
|
||||
|
||||
export default {
|
||||
name: 'filterBar',
|
||||
components: {
|
||||
scFilterBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filterData : {},
|
||||
defaultFilter : [],
|
||||
options: [
|
||||
{
|
||||
label: '订单号',
|
||||
value: 'id',
|
||||
type: 'text',
|
||||
selected: true,
|
||||
placeholder: '请输入订单号'
|
||||
},
|
||||
{
|
||||
label: '类型',
|
||||
value: 'type',
|
||||
type: 'select',
|
||||
operator: '=',
|
||||
selected: true,
|
||||
placeholder: '请选择类型',
|
||||
extend: {
|
||||
data:[
|
||||
{
|
||||
label: "选项1",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "选项2",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '类型(多选)',
|
||||
value: 'type2',
|
||||
type: 'select',
|
||||
operator: '=',
|
||||
placeholder: '请选择类型',
|
||||
extend: {
|
||||
multiple: true,
|
||||
data:[
|
||||
{
|
||||
label: "选项1",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "选项2",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '通知(异步)',
|
||||
value: 'noticeType',
|
||||
type: 'select',
|
||||
operator: '=',
|
||||
placeholder: '请选择通知类型',
|
||||
extend: {
|
||||
request: async () => {
|
||||
var list = await this.$API.system.dic.get.get()
|
||||
return list.data.map(item => {
|
||||
return {
|
||||
label: item.label,
|
||||
value: item.value
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '通知(远程搜索)',
|
||||
value: 'noticeType2',
|
||||
type: 'select',
|
||||
operator: '=',
|
||||
placeholder: '请输入关键词后检索',
|
||||
extend: {
|
||||
remote: true,
|
||||
request: async (query) => {
|
||||
var data = {
|
||||
keyword: query,
|
||||
}
|
||||
var list = await this.$API.system.dic.get.get(data)
|
||||
return list.data.map(item => {
|
||||
return {
|
||||
label: item.label,
|
||||
value: item.value
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '关键词(标签)',
|
||||
value: 'tags',
|
||||
type: 'tags',
|
||||
operator: 'include',
|
||||
operators: [
|
||||
{
|
||||
label: '包含',
|
||||
value: 'include',
|
||||
},
|
||||
{
|
||||
label: '不包含',
|
||||
value: 'notinclude',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '开关(可重复)',
|
||||
value: 'switch',
|
||||
type: 'switch',
|
||||
repeat: true,
|
||||
operator: '='
|
||||
},
|
||||
{
|
||||
label: '日期单选',
|
||||
value: 'date',
|
||||
type: 'date',
|
||||
operator: '=',
|
||||
operators: [
|
||||
{
|
||||
label: '等于',
|
||||
value: '=',
|
||||
},
|
||||
{
|
||||
label: '不等于',
|
||||
value: '!=',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '日期范围',
|
||||
value: 'date2',
|
||||
type: 'daterange'
|
||||
},
|
||||
{
|
||||
label: '自定义日期',
|
||||
value: 'date3',
|
||||
type: 'customDate',
|
||||
placeholder: '请选择月份',
|
||||
extend: {
|
||||
dateType: 'month',
|
||||
valueFormat: 'YYYY-MM'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(data){
|
||||
this.filterData = data;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,410 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="6">
|
||||
<el-card shadow="never" header="处理逻辑说明">
|
||||
<el-timeline>
|
||||
<el-timeline-item timestamp="两者数据并无顺序要求,只是获取表单值时需要自行设置loading">1.远程获取表单配置参数和表单的值</el-timeline-item>
|
||||
<el-timeline-item timestamp="构建form对象, 循环渲染对应组件, 获取远程选项数据. 完成前组件将由骨架代替">2.根据配置构建表单组件</el-timeline-item>
|
||||
<el-timeline-item timestamp="合并form对象和表单值">3.给表单赋值</el-timeline-item>
|
||||
</el-timeline>
|
||||
<el-alert title="当前版本为预览版本,并未在正式项目中实施,请谨慎使用. 更多配置以及图形化编辑器正在路上." type="warning" show-icon></el-alert>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="双向绑定">
|
||||
<el-button type="primary" @click="setName">改变输入框的值</el-button>
|
||||
<el-button type="primary" @click="setConfig">改变指定栅格配置</el-button>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never" header="动态表单渲染器">
|
||||
<sc-form ref="formref" :config="config" v-model="form" :loading="loading">
|
||||
<el-button type="primary" @click="save">保 存</el-button>
|
||||
<el-button @click="reset">重 置</el-button>
|
||||
</sc-form>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="6">
|
||||
<el-card shadow="never" header="表单输出">
|
||||
<pre>{{form}}</pre>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'formRender',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
config: {},
|
||||
form: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//模拟请求延迟, 配置参数和form值并无顺序要求，可同时请求
|
||||
const config = {
|
||||
labelWidth: '130px',
|
||||
labelPosition: 'right',
|
||||
size: 'medium',
|
||||
formItems: [
|
||||
{
|
||||
label: "ElementPlus",
|
||||
component: "title",
|
||||
},
|
||||
{
|
||||
label: "输入框",
|
||||
name: "name",
|
||||
value: "",
|
||||
component: "input",
|
||||
options: {
|
||||
maxlength: "20",
|
||||
placeholder: "Activity name",
|
||||
},
|
||||
rules: [
|
||||
{required: true, message: "Please input Activity name", trigger: "blur"}
|
||||
],
|
||||
requiredHandle: "$.required==true",
|
||||
},
|
||||
{
|
||||
label: "栅格(12/24)",
|
||||
name: "name2",
|
||||
value: "",
|
||||
component: "input",
|
||||
span: 12,
|
||||
options: {
|
||||
placeholder: "span: 12",
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "栅格(12/24)",
|
||||
name: "name3",
|
||||
value: "",
|
||||
component: "input",
|
||||
span: 12,
|
||||
options: {
|
||||
placeholder: "span: 12",
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "选择器(多选)",
|
||||
name: "select",
|
||||
value: "",
|
||||
component: "select",
|
||||
span: 24,
|
||||
options: {
|
||||
remote: {
|
||||
api: `${this.$CONFIG.API_URL}/system/dic/get`,
|
||||
data: {name: 'a'}
|
||||
},
|
||||
multiple: true,
|
||||
items:[
|
||||
{
|
||||
label: "选项1",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "选项2",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
},
|
||||
rules: [
|
||||
{required: true, message: "Please input Activity name", trigger: "change"}
|
||||
],
|
||||
requiredHandle: "$.required==true",
|
||||
},
|
||||
{
|
||||
label: "选择器(单选)",
|
||||
name: "select2",
|
||||
value: "",
|
||||
component: "select",
|
||||
span: 24,
|
||||
options: {
|
||||
remote: {
|
||||
api: `${this.$CONFIG.API_URL}/system/dic/get`,
|
||||
data: {name: 'b'}
|
||||
},
|
||||
items:[
|
||||
{
|
||||
label: "选项1",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "选项2",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "级联选择器",
|
||||
name: "cascader",
|
||||
value: "",
|
||||
component: "cascader",
|
||||
span: 24,
|
||||
options: {
|
||||
items:[
|
||||
{
|
||||
label: "Guide",
|
||||
value: "guide",
|
||||
children: [
|
||||
{
|
||||
label: "Disciplines",
|
||||
value: "disciplines"
|
||||
},
|
||||
{
|
||||
label: "Consistency",
|
||||
value: "consistency"
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "Resource",
|
||||
value: "resource",
|
||||
children: [
|
||||
{
|
||||
label: "Axure Components",
|
||||
value: "axure"
|
||||
},
|
||||
{
|
||||
label: "Sketch Templates",
|
||||
value: "sketch"
|
||||
},
|
||||
{
|
||||
label: "Design Documentation",
|
||||
value: "docs"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "Component",
|
||||
value: "component"
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "多选框",
|
||||
name: "checkbox",
|
||||
component: "checkbox",
|
||||
span: 24,
|
||||
tips: "多选框配置加上 name 表示拥有嵌套关系。否则将值“平铺”在form对象",
|
||||
options: {
|
||||
items:[
|
||||
{
|
||||
label: "选项1",
|
||||
name: "option1",
|
||||
value: false
|
||||
},
|
||||
{
|
||||
label: "选项2",
|
||||
name: "option2",
|
||||
value: false
|
||||
}
|
||||
]
|
||||
},
|
||||
hideHandle: "$.required==true"
|
||||
},
|
||||
{
|
||||
label: "多选框组",
|
||||
name: "checkboxGroup",
|
||||
value: [],
|
||||
component: "checkboxGroup",
|
||||
span: 24,
|
||||
options: {
|
||||
items:[
|
||||
{
|
||||
label: "选项1",
|
||||
value: "option1"
|
||||
},
|
||||
{
|
||||
label: "选项2",
|
||||
value: "option2"
|
||||
}
|
||||
]
|
||||
},
|
||||
hideHandle: "$.required==true"
|
||||
},
|
||||
{
|
||||
label: "单选",
|
||||
name: "radio",
|
||||
value: "1",
|
||||
component: "radio",
|
||||
options: {
|
||||
items:[
|
||||
{
|
||||
label: "选项1",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "选项2",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
},
|
||||
hideHandle: "$.required==true"
|
||||
},
|
||||
{
|
||||
label: "开关",
|
||||
name: "required",
|
||||
message: "演示如何使用表达式动态显隐和必填，试试打开和关闭开关",
|
||||
value: false,
|
||||
component: "switch",
|
||||
},
|
||||
{
|
||||
label: "日期/时间",
|
||||
name: "date",
|
||||
value: "",
|
||||
component: "date",
|
||||
options: {
|
||||
type: "datetime",
|
||||
valueFormat: "YYYY-MM-DD HH:mm:ss",
|
||||
},
|
||||
rules: [
|
||||
{required: true, message: "Please input Data", trigger: "change"}
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "滑块",
|
||||
name: "slider",
|
||||
value: 0,
|
||||
component: "slider",
|
||||
options: {
|
||||
marks: {
|
||||
0: '0°C',
|
||||
8: '8°C',
|
||||
37: '37°C'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "数值",
|
||||
name: "number",
|
||||
value: 0,
|
||||
component: "number",
|
||||
},
|
||||
{
|
||||
label: "颜色",
|
||||
name: "color",
|
||||
value: "",
|
||||
component: "color",
|
||||
},
|
||||
{
|
||||
label: "评分",
|
||||
name: "rate",
|
||||
value: 0,
|
||||
component: "rate",
|
||||
},
|
||||
{
|
||||
label: "SCUI扩展",
|
||||
component: "title",
|
||||
},
|
||||
{
|
||||
label: "表格选择器",
|
||||
name: "tableselect",
|
||||
value: {},
|
||||
component: "tableselect",
|
||||
span: 24,
|
||||
options: {
|
||||
apiObj: '$API.demo.page',
|
||||
column: [
|
||||
{
|
||||
label: "ID",
|
||||
prop: "id",
|
||||
width:150
|
||||
},
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "user"
|
||||
}
|
||||
],
|
||||
props: {
|
||||
label: 'user',
|
||||
value: 'id',
|
||||
keyword: "keyword"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "上传",
|
||||
component: "upload",
|
||||
options: {
|
||||
items:[
|
||||
{
|
||||
label: "图像1",
|
||||
name: "img1",
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
label: "图像2",
|
||||
name: "img2",
|
||||
value: ""
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "富文本",
|
||||
name: "text",
|
||||
value: "",
|
||||
component: "editor",
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
const form = {
|
||||
name: "Activity name",
|
||||
checkbox: {
|
||||
option1: true
|
||||
},
|
||||
checkboxGroup: ["option1"],
|
||||
select: ["1"],
|
||||
select2: "1",
|
||||
cascader: ['resource','docs'],
|
||||
tableselect: {
|
||||
user: "何敏",
|
||||
id: "360000197302144442"
|
||||
},
|
||||
text: "<p><span style=\"font-size: 28px;\">Editor</span></p>\n<table style=\"border-collapse: collapse; width: 100%;\" border=\"1\">\n<tbody>\n<tr>\n<td style=\"width: 47.4544%; background-color: #ecf0f1;\">Name</td>\n<td style=\"width: 47.4544%;\">SCUI</td>\n</tr>\n<tr>\n<td style=\"width: 47.4544%; background-color: #ecf0f1;\">Describe</td>\n<td style=\"width: 47.4544%;\">Super color UI Admin</td>\n</tr>\n</tbody>\n</table>"
|
||||
}
|
||||
|
||||
setTimeout(()=>{
|
||||
this.config = config
|
||||
},500)
|
||||
|
||||
this.loading = true
|
||||
setTimeout(()=>{
|
||||
this.form = form
|
||||
this.loading = false
|
||||
},100)
|
||||
},
|
||||
methods: {
|
||||
setName(){
|
||||
this.form.name = "New Title"
|
||||
},
|
||||
setConfig(){
|
||||
this.config.formItems[2].span = this.config.formItems[2].span==24?12:24
|
||||
this.config.formItems[3].span = this.config.formItems[3].span==24?12:24
|
||||
},
|
||||
save(){
|
||||
this.$refs.formref.validate((valid, obj) => {
|
||||
if (valid) {
|
||||
console.log(this.form)
|
||||
alert('submit!')
|
||||
}else{
|
||||
this.$refs.formref.scrollToField(Object.keys(obj)[0])
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
reset(){
|
||||
this.$refs.formref.resetFields()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-alert title="来自AVUE的灵感, 业务会有表单里含有对象数组的可能, 进行封装后进行增删改操作, 并且支持联动form表单的禁用属性" type="success" style="margin-bottom:20px;"></el-alert>
|
||||
|
||||
<el-card shadow="never">
|
||||
<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="form.title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="表格" prop="list">
|
||||
<sc-form-table ref="table" v-model="form.list" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
|
||||
<el-table-column prop="time" label="时间" width="180">
|
||||
<template #default="scope">
|
||||
<el-time-select v-model="scope.row.time"></el-time-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="类型" width="180">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.type" placeholder="请选择">
|
||||
<el-option v-for="item in typeDic" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="val" label="数量" min-width="180">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.val" placeholder="请输入内容"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="open" label="checked" width="85" align="center">
|
||||
<template #default="scope">
|
||||
<el-checkbox v-model="scope.row.checked"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="open" label="开关" width="80" align="center">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.open"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</sc-form-table>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm">保存</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="方法" style="margin-top: 15px;">
|
||||
<el-button type="primary" @click="pushRow">外部插入行</el-button>
|
||||
<el-button type="primary" @click="deleteRow">外部删除第一行</el-button>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'formtable',
|
||||
data(){
|
||||
return {
|
||||
addTemplate: {
|
||||
time: '',
|
||||
type: '',
|
||||
val: '',
|
||||
open: true,
|
||||
checked: false
|
||||
},
|
||||
form: {
|
||||
title: "标题",
|
||||
list: [
|
||||
{
|
||||
time: '09:00',
|
||||
type: '1',
|
||||
val: '100',
|
||||
open: true,
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
time: '10:00',
|
||||
type: '0',
|
||||
val: '50',
|
||||
open: false,
|
||||
checked: true
|
||||
}
|
||||
]
|
||||
},
|
||||
typeDic: [
|
||||
{
|
||||
label: "全局",
|
||||
value: "0"
|
||||
},
|
||||
{
|
||||
label: "局部",
|
||||
value: "1"
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
title: [
|
||||
{required: true, message: '请上传', trigger: 'blur'}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitForm(){
|
||||
this.$refs.ruleForm.validate((valid) => {
|
||||
if (valid) {
|
||||
alert('请看控制台输出');
|
||||
console.log(this.form);
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm(){
|
||||
this.$refs.ruleForm.resetFields();
|
||||
},
|
||||
pushRow(){
|
||||
const data = {
|
||||
time: '18:00',
|
||||
type: '1',
|
||||
val: '0',
|
||||
open: true,
|
||||
checked: true
|
||||
}
|
||||
this.$refs.table.pushRow(data)
|
||||
},
|
||||
deleteRow(){
|
||||
this.$refs.table.deleteRow(0)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-alert title="扩展了Element Plus图标库,可以在@/assets/icons中新增自己的SVG图标组件,记得在@/assets/icons/index.js中引入. 建议前往阿里iconfont复制SVG代码 https://www.iconfont.cn/collections/detail?spm=a313x.7781069.0.da5a778a4&cid=25353" type="success" style="margin-bottom:20px;"></el-alert>
|
||||
<el-row :gutter="0" class="box">
|
||||
<el-col :span="4" v-for="(icon, index) in icons" :key="index" >
|
||||
<div class="icon-box">
|
||||
<el-icon><component :is="icon" /></el-icon>
|
||||
<p>{{ icon }}</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as scIcons from '@/assets/icons'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
icons: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
for(let icon in scIcons){
|
||||
this.icons.push('sc-icon'+icon.replace(/[A-Z]/g,(match)=>'-'+match.toLowerCase()))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box {border-top: 1px solid #eee;border-left: 1px solid #eee;}
|
||||
.icon-box {height:120px;text-align: center;background: #fff;border-bottom: 1px solid #eee;border-right: 1px solid #eee;color: #666;padding:30px 10px;}
|
||||
.icon-box i {font-size: 26px;transition: color .15s linear;}
|
||||
.icon-box p {color: #999;margin-top: 15px;transition: color .15s linear;}
|
||||
.icon-box:hover i, .icon-box:hover p {color: #5cb6ff;}
|
||||
|
||||
.dark .box {border-color: var(--el-border-color-light);}
|
||||
.dark .icon-box {background: var(--el-bg-color-overlay);border-color: var(--el-border-color-light);}
|
||||
</style>
|
||||
@@ -0,0 +1,71 @@
|
||||
<!--
|
||||
* @Descripttion: 图标选择器组件演示文件
|
||||
* @version: 1.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年7月27日09:33:06
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<el-main>
|
||||
<el-alert title="支持扩展的图标选择器,除了默认的图标组还可以在 @/config/iconSelect 中定义更多的图标组" type="success" style="margin-bottom:20px;"></el-alert>
|
||||
<el-card shadow="never">
|
||||
<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<sc-icon-select v-model="form.icon" :disabled="disabled"></sc-icon-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm">保存</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
<el-button @click="setdisabled">{{disabled?'移除禁用':'设为禁用'}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scIconSelect from '@/components/scIconSelect'
|
||||
|
||||
export default {
|
||||
name: 'iconSelect',
|
||||
components: {
|
||||
scIconSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
icon: 'el-icon-apple'
|
||||
},
|
||||
rules: {
|
||||
icon: [
|
||||
{required: true, message: '请选择图标', trigger: 'change'}
|
||||
]
|
||||
},
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitForm(){
|
||||
this.$refs.ruleForm.validate((valid) => {
|
||||
if (valid) {
|
||||
alert('请看控制台输出');
|
||||
console.log(this.form);
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm(){
|
||||
this.$refs.ruleForm.resetFields();
|
||||
},
|
||||
setdisabled(){
|
||||
this.disabled = !this.disabled
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never" header="导入(使用mock,有50%几率导入失败)">
|
||||
<sc-file-import :apiObj="$API.common.importFile" templateUrl="http://www.scuiadmin/file.xlsx" @success="success"></sc-file-import>
|
||||
<sc-file-import :apiObj="$API.common.importFile" :data="{otherData:'demo'}" templateUrl="http://www.scuiadmin/file.xlsx" accept=".xls, .xlsx" :maxSize="30" tip="请上传小于或等于 30M 的 .xls, .xlsx 格式文件(自定义TIP)" @success="success">
|
||||
<template #default="{open}">
|
||||
<el-button type="primary" icon="sc-icon-upload" @click="open">导入(全配置)</el-button>
|
||||
</template>
|
||||
<template #uploader>
|
||||
<el-icon class="el-icon--upload"><sc-icon-file-excel /></el-icon>
|
||||
<div class="el-upload__text">
|
||||
将文件拖到此处或 <em>点击选择文件上传</em>
|
||||
</div>
|
||||
</template>
|
||||
<template #form="{formData}">
|
||||
<el-form-item label="覆盖已有数据">
|
||||
<el-switch v-model="formData.coverage" />
|
||||
</el-form-item>
|
||||
<el-form-item label="跳过错误数据">
|
||||
<el-switch v-model="formData.skipError" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</sc-file-import>
|
||||
<el-descriptions :column="1" border size="small" style="margin-top: 15px;">
|
||||
<el-descriptions-item label="apiObj" :width="200">Object 文件上传接口对象</el-descriptions-item>
|
||||
<el-descriptions-item label="data">Object 上传时附带的额外参数</el-descriptions-item>
|
||||
<el-descriptions-item label="accept">String 可选择文件类型，默认为".xls, .xlsx"</el-descriptions-item>
|
||||
<el-descriptions-item label="maxSize">Number 可选择文件大小，单位为M，默认为10</el-descriptions-item>
|
||||
<el-descriptions-item label="tip">String 上传框底下的提示语句，默认为"请上传小于或等于 {maxSize}M 的 {accept} 格式文件"</el-descriptions-item>
|
||||
<el-descriptions-item label="templateUrl">String 模板的下载URL</el-descriptions-item>
|
||||
<el-descriptions-item label="@success">事件 上传接口返回的事件，返回function(res, close)，执行close()将关闭窗口</el-descriptions-item>
|
||||
<el-descriptions-item label='#default="{open}"'>插糟 默认触发按钮插糟，返回open()打开窗口函数，可以绑定元素@click事件</el-descriptions-item>
|
||||
<el-descriptions-item label='#uploader'>插糟 自定义上传框插槽</el-descriptions-item>
|
||||
<el-descriptions-item label='#form="{formData}"'>插糟 自定义表单组件，插槽formData都将作为上传时附带的额外参数</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never" header="导出">
|
||||
<sc-file-export :apiObj="$API.common.exportFile"></sc-file-export>
|
||||
<sc-file-export :apiObj="$API.common.exportFile" fileName="人员列表(异步)" async>
|
||||
<template #default="{open}">
|
||||
<el-button type="primary" icon="sc-icon-download" @click="open">导出(异步)</el-button>
|
||||
</template>
|
||||
</sc-file-export>
|
||||
<sc-file-export :apiObj="$API.common.exportFile" blob fileName="人员列表" :data="{otherData:'demo'}" showData :column="column" :fileTypes="['xlsx','docx','pdf']">
|
||||
<template #default="{open}">
|
||||
<el-button type="primary" icon="sc-icon-download" @click="open">导出(blob文件流)</el-button>
|
||||
</template>
|
||||
<template #form="{formData}">
|
||||
<el-form-item label="导出条数">
|
||||
<el-select v-model="formData.limit" placeholder="Select">
|
||||
<el-option label="100条" value="100" />
|
||||
<el-option label="500条" value="500" />
|
||||
<el-option label="1000条" value="1000" />
|
||||
<el-option label="5000条" value="5000" />
|
||||
<el-option label="10000条" value="10000" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</sc-file-export>
|
||||
<el-descriptions :column="1" border size="small" style="margin-top: 15px;">
|
||||
<el-descriptions-item label="apiObj" :width="200">Object 文件导出接口对象，通过apiObj.url请求文件</el-descriptions-item>
|
||||
<el-descriptions-item label="data">Object 上传时附带的额外参数(可为数据表格的过滤项)</el-descriptions-item>
|
||||
<el-descriptions-item label="showData">Boolean 是否显示附带的额外参数</el-descriptions-item>
|
||||
<el-descriptions-item label="async">Boolean 是否异步导出文件</el-descriptions-item>
|
||||
<el-descriptions-item label="fileName">String 下载文件名称，默认为当前时间戳</el-descriptions-item>
|
||||
<el-descriptions-item label="fileTypes">Array 可选择文件类型，默认为['xlsx']，组件将数组第一项当做已选项</el-descriptions-item>
|
||||
<el-descriptions-item label="column">Array 列配置，请求文件时将添加column为key的参数，值为prop逗号","分割的字符串</el-descriptions-item>
|
||||
<el-descriptions-item label="blob">Boolean 是否由游览器请求文件返回blob后提供下载</el-descriptions-item>
|
||||
<el-descriptions-item label="progress">Boolean blob开启后是否显示下载文件进度条，当服务器启用Gzip时，建议关闭，因为获取到的文件总数和下载总数不匹配。</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label='#default="{open}"'>插糟 默认触发按钮插糟，返回open()打开窗口函数，可以绑定元素@click事件</el-descriptions-item>
|
||||
<el-descriptions-item label='#form="{formData}"'>插糟 自定义表单组件，插槽formData都将作为请求时附带的额外参数</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
|
||||
<el-dialog v-model="importErrDialogVisible" title="导入失败" :width="680" destroy-on-close @closed="()=>{importErrData={}}">
|
||||
<el-alert :title="`总条目数 ${importErrData.ok} ,其中有 ${importErrData.fail} 条格式不满足导入要求，请修改后再次操作。`" type="error" show-icon :closable="false"/>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-table :data="importErrData.failList" border stripe max-height="270" style="width: 100%">
|
||||
<el-table-column prop="keyName" label="主键名" width="180" />
|
||||
<el-table-column prop="" label="状态" width="100" >
|
||||
<el-tag type="danger"><el-icon><el-icon-circle-close-filled/></el-icon> 失败</el-tag>
|
||||
</el-table-column>
|
||||
<el-table-column prop="reason" label="原因" />
|
||||
</el-table>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button type="primary" @click="importErrDialogVisible=false">我知道了</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scFileImport from '@/components/scFileImport'
|
||||
import scFileExport from '@/components/scFileExport'
|
||||
|
||||
export default {
|
||||
name: 'importexport',
|
||||
components: {
|
||||
scFileImport,
|
||||
scFileExport
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
importErrDialogVisible: false,
|
||||
importErrData: {},
|
||||
column: [
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "name"
|
||||
},
|
||||
{
|
||||
label: "性别",
|
||||
prop: "sex"
|
||||
},
|
||||
{
|
||||
label: "评分",
|
||||
prop: "num"
|
||||
},
|
||||
{
|
||||
label: "邮箱",
|
||||
prop: "email",
|
||||
hide: true
|
||||
},
|
||||
{
|
||||
label: "进度",
|
||||
prop: "progress"
|
||||
},
|
||||
{
|
||||
label: "注册时间",
|
||||
prop: "datetime"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
success(res, close){
|
||||
if(res.code==200){
|
||||
this.$alert("导入返回成功后，可后续操作，比如刷新表格等。执行回调函数close()可关闭上传窗口。", "导入成功", {
|
||||
type: "success",
|
||||
showClose: false,
|
||||
center: true
|
||||
})
|
||||
close()
|
||||
}else{
|
||||
//返回失败后的自定义操作，这里演示显示错误的条目
|
||||
this.importErrDialogVisible = true
|
||||
this.importErrData = res.data
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
|
||||
<template>
|
||||
<el-main>
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never" header="脉冲圆点">
|
||||
<el-space wrap :size="15">
|
||||
<sc-status-indicator pulse type="primary"></sc-status-indicator>
|
||||
<sc-status-indicator pulse type="success"></sc-status-indicator>
|
||||
<sc-status-indicator pulse type="warning"></sc-status-indicator>
|
||||
<sc-status-indicator pulse type="danger"></sc-status-indicator>
|
||||
<sc-status-indicator type="info"></sc-status-indicator>
|
||||
</el-space>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never" header="趋势">
|
||||
<el-space wrap :size="15">
|
||||
<sc-trend v-model="trendValue" prefix="¥"></sc-trend>
|
||||
<sc-trend v-model="trendValue2"></sc-trend>
|
||||
<sc-trend v-model="trendValue3" suffix="%"></sc-trend>
|
||||
</el-space>
|
||||
|
||||
<p style="margin-top: 15px;color: #999;">设置reverse可反转颜色。</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never">
|
||||
<div class="up">
|
||||
<h2>持续更新中...</h2>
|
||||
<p>非常欢迎提交Issue/PR完善和补充更多好玩的原子组件</p>
|
||||
<p>原子组件库位置：@/components/scMini/*</p>
|
||||
<el-button type="primary" text @click="goIssue">提交想法</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'minivab',
|
||||
data() {
|
||||
return {
|
||||
trendValue: 4.6,
|
||||
trendValue2: 0,
|
||||
trendValue3: -32
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
goIssue(){
|
||||
window.open("https://gitee.com/lolicode/scui/issues")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.up {text-align: center;}
|
||||
.up h2 {margin-bottom: 10px;}
|
||||
.up p {color: #999;line-height: 1.5;}
|
||||
.el-card {height:150px;}
|
||||
</style>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-card shadow="never">
|
||||
<el-tabs tab-position="top">
|
||||
<el-tab-pane label="普通打印">
|
||||
<el-alert title="打印当前页面已存在的元素,如包含.no-print样式就忽略,分页打印就需要{page-break-after: always}控制" type="success" style="margin-bottom:20px;"></el-alert>
|
||||
<el-button type="primary" @click="print">普通打印</el-button>
|
||||
<div style="height:20px"></div>
|
||||
<div class="printMain" ref="printMain">
|
||||
<div class="item">打印内容1 <el-icon><el-icon-eleme-filled /></el-icon> <p class="no-print">忽略打印</p></div>
|
||||
<div style="page-break-after: always;"></div>
|
||||
<div class="item">打印内容2</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="动态打印">
|
||||
<el-alert title="打印创建的DOM结构,适用于远程获取模板后打印" type="success" style="margin-bottom:20px;"></el-alert>
|
||||
<el-button type="primary" @click="print2">动态打印</el-button>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import print from '@/utils/print'
|
||||
|
||||
export default {
|
||||
name: 'print',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
print(){
|
||||
//直接传入REF或者querySelector
|
||||
print(this.$refs.printMain)
|
||||
},
|
||||
print2(){
|
||||
//创建虚拟DOM结构后再传入
|
||||
var dom = "<h2>TITLE</h2><p>后创建的DOM结构</p>"
|
||||
print(dom)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.printMain .item{padding:20px;border: 1px solid #409eff;margin-bottom: 20px;background: #ecf5ff;border-radius: 4px;}
|
||||
.printMain p {margin-top: 20px;color: #999;}
|
||||
</style>
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never" header="常用">
|
||||
<sc-qr-code text="scui"></sc-qr-code>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never" header="带Logo">
|
||||
<sc-qr-code text="scui" logo="img/logo.png"></sc-qr-code>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never" header="自定义颜色大小">
|
||||
<sc-qr-code text="scui" :size="100" colorDark="#088200" colorLight="#fff"></sc-qr-code>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never" header="动态">
|
||||
<sc-qr-code :text="qrcode"></sc-qr-code>
|
||||
<el-input v-model="qrcode" placeholder="Please input" style="margin-top: 20px;"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'qrcode',
|
||||
data() {
|
||||
return {
|
||||
qrcode: "scui"
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<!--
|
||||
* @Descripttion: 字典选择器组件演示
|
||||
* @version: 1.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年8月3日15:51:20
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<el-main>
|
||||
<el-alert title="封装el-select支持异步获取数据,以及根据字典名获取数据,继承el-select全部的属性和事件" type="success" style="margin-bottom:20px;"></el-alert>
|
||||
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never" header="异步单选">
|
||||
<sc-select v-model="value" :apiObj="$API.system.dic.get" clearable filterable style="width: 100%;"></sc-select>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never" header="异步多选">
|
||||
<sc-select v-model="value2" :apiObj="$API.system.dic.get" clearable filterable multiple style="width: 100%;"></sc-select>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never" header="字典选择器">
|
||||
<sc-select v-model="value3" dic="notice" clearable filterable style="width: 100%;"></sc-select>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never" header="自定义模板">
|
||||
<sc-select v-model="value4" dic="notice" clearable filterable placeholder="自定义placeholder" style="width: 100%;">
|
||||
<template #option="{data}">
|
||||
<span style="float: left">{{ data.label }}</span>
|
||||
<span style="float: right; color: #999; font-size: 13px">{{ data.value }}</span>
|
||||
</template>
|
||||
</sc-select>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'scselect',
|
||||
data() {
|
||||
return {
|
||||
value: '3',
|
||||
value2: ['1', '3'],
|
||||
value3: '',
|
||||
value4: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-card shadow="never" header="分类筛选器">
|
||||
<sc-select-filter :data="data" :selected-values="selectedValues" :label-width="80" @on-change="change"></sc-select-filter>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="返回值" style="margin-top: 15px;">
|
||||
<pre>{{ filterData }}</pre>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scSelectFilter from '@/components/scSelectFilter'
|
||||
|
||||
export default {
|
||||
name: 'selectFilter',
|
||||
components: {
|
||||
scSelectFilter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
title: "状态(单)",
|
||||
key: "state",
|
||||
options: [
|
||||
{
|
||||
label: "全部",
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
label: "待审核",
|
||||
value: "1",
|
||||
icon: "el-icon-flag"
|
||||
},
|
||||
{
|
||||
label: "已退回",
|
||||
value: "2",
|
||||
icon: "el-icon-bottom-left"
|
||||
},
|
||||
{
|
||||
label: "已关闭",
|
||||
value: "3",
|
||||
icon: "el-icon-circle-close"
|
||||
},
|
||||
{
|
||||
label: "已完成",
|
||||
value: "4",
|
||||
icon: "el-icon-checked"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "类型(多)",
|
||||
key: "type",
|
||||
multiple: true,
|
||||
options: [
|
||||
{
|
||||
label: "全部",
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
label: "请假申请",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "加班申请",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
selectedValues: {
|
||||
state: [""],
|
||||
type: [""]
|
||||
},
|
||||
filterData: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
change(selected){
|
||||
this.filterData = selected
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<!--
|
||||
* @Descripttion: 统计数值组件演示
|
||||
* @version: 1.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年6月23日10:28:17
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<el-main>
|
||||
<el-alert title="一个非常简单的组件, 目的就是省去重复写样式, 支持千分符/前后缀等." type="success" style="margin-bottom:20px;"></el-alert>
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never">
|
||||
<sc-statistic title="Title" value="112893" description="Description" tips="Tips" groupSeparator></sc-statistic>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never">
|
||||
<sc-statistic title="今日净利润" value="112893.00" prefix="¥" groupSeparator>
|
||||
<sc-trend v-model="trendValue1"></sc-trend>
|
||||
</sc-statistic>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never">
|
||||
<sc-statistic title="留言" value="112893" suffix="条" groupSeparator>
|
||||
<sc-trend v-model="trendValue2"></sc-trend>
|
||||
</sc-statistic>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scStatistic from '@/components/scStatistic';
|
||||
|
||||
export default {
|
||||
name: 'statistic',
|
||||
components: {
|
||||
scStatistic
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
trendValue1: 7.7,
|
||||
trendValue2: -18.9
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-card {margin-bottom: 15px;}
|
||||
.up {color: #F56C6C;margin-left: 5px;}
|
||||
.down {color: #67C23A;margin-left: 5px;}
|
||||
</style>
|
||||
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="姓名" prop="name" width="150"></el-table-column>
|
||||
<el-table-column label="性别" prop="sex" width="150" :filters="sexFilters" :filter-method="filterHandler">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.sex=='男'">{{scope.row.sex}}</el-tag>
|
||||
<el-tag v-if="scope.row.sex=='女'" type="success">{{scope.row.sex}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="邮箱" prop="email" width="250"></el-table-column>
|
||||
<el-table-column label="评分" prop="num" width="150" sortable></el-table-column>
|
||||
<el-table-column label="进度" prop="progress" width="250" sortable>
|
||||
<template #default="scope">
|
||||
<el-progress :percentage="scope.row.progress" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="注册时间" prop="datetime" width="150" sortable></el-table-column>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tableBase',
|
||||
data() {
|
||||
return {
|
||||
sexFilters: [
|
||||
{text: '男', value: '男'},
|
||||
{text: '女', value: '女'}
|
||||
],
|
||||
list: {
|
||||
apiObj: this.$API.demo.list
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterHandler(value, row, column){
|
||||
const property = column['property']
|
||||
return row[property] === value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<el-alert title="请在右下角第二个按钮体验自定义列" type="warning" :closable="false"/>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" tableName="listCustomColumn" :apiObj="list.apiObj" :column="list.column" row-key="id" stripe>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<template #progress="scope">
|
||||
<el-progress :percentage="scope.row.progress" />
|
||||
</template>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tableCustomColumn',
|
||||
data() {
|
||||
return {
|
||||
list: {
|
||||
apiObj: this.$API.demo.list,
|
||||
column: [
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "name",
|
||||
width: "150"
|
||||
},
|
||||
{
|
||||
label: "性别",
|
||||
prop: "sex",
|
||||
width: "150",
|
||||
filters: [{text: '男', value: '男'}, {text: '女', value: '女'}]
|
||||
},
|
||||
{
|
||||
label: "邮箱",
|
||||
prop: "email",
|
||||
width: "250",
|
||||
hide: true
|
||||
},
|
||||
{
|
||||
label: "评分",
|
||||
prop: "num",
|
||||
width: "150",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: "进度",
|
||||
prop: "progress",
|
||||
width: "250",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: "注册时间",
|
||||
prop: "datetime",
|
||||
width: "150",
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<el-alert title="因演示使用mock数据,所以视图上看不出效果,可以查看控制台的网络请求" type="warning" :closable="false"/>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe show-summary remoteSort remoteFilter remoteSummary>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="姓名" prop="name" width="150"></el-table-column>
|
||||
<el-table-column label="性别" prop="sex" width="150" column-key="sex" :filters="sexFilters"></el-table-column>
|
||||
<el-table-column label="邮箱" prop="email" width="250"></el-table-column>
|
||||
<el-table-column label="评分" prop="num" width="150" sortable='custom'></el-table-column>
|
||||
<el-table-column label="进度" prop="progress" width="250" sortable></el-table-column>
|
||||
<el-table-column label="注册时间" prop="datetime" width="150" sortable='custom'></el-table-column>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tableRemote',
|
||||
data() {
|
||||
return {
|
||||
sexFilters: [
|
||||
{text: '男', value: '男'},
|
||||
{text: '女', value: '女'}
|
||||
],
|
||||
list: {
|
||||
apiObj: this.$API.demo.list
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="个人信息">
|
||||
<el-table-column label="姓名" prop="name" width="150"></el-table-column>
|
||||
<el-table-column label="性别" prop="sex" width="150"></el-table-column>
|
||||
<el-table-column label="邮箱" prop="email" width="250"></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="评分" prop="num" width="150"></el-table-column>
|
||||
<el-table-column label="注册时间" prop="datetime" width="150"></el-table-column>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tableThead',
|
||||
data() {
|
||||
return {
|
||||
list: {
|
||||
apiObj: this.$API.demo.list
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,95 @@
|
||||
<!--
|
||||
* @Descripttion: 表格选择器组件演示
|
||||
* @version: 1.0
|
||||
* @Author: sakya
|
||||
* @Date: 2021年6月8日09:29:14
|
||||
* @LastEditors: sakya
|
||||
* @LastEditTime: 2021年6月8日09:29:14
|
||||
-->
|
||||
|
||||
<template>
|
||||
<el-main>
|
||||
<el-alert title="select深度改造的表格选择器, 非常适用于大量数据选择的场景" type="success" style="margin-bottom:20px;"></el-alert>
|
||||
<el-card shadow="never" header="单选">
|
||||
<sc-table-select v-model="value2" :apiObj="apiObj" :params="params" :table-width="600" :props="props" @change="change">
|
||||
<el-table-column prop="id" label="ID" width="180"></el-table-column>
|
||||
<el-table-column prop="user" label="姓名"></el-table-column>
|
||||
</sc-table-select>
|
||||
</el-card>
|
||||
<div style="height:15px"></div>
|
||||
<el-card shadow="never" header="多选">
|
||||
<sc-table-select v-model="value" :apiObj="apiObj" :table-width="700" multiple clearable collapse-tags collapse-tags-tooltip :props="props" @change="change">
|
||||
<template #header="{form, submit}">
|
||||
<el-form :inline="true" :model="form">
|
||||
<el-form-item>
|
||||
<el-select v-model="form.sex" placeholder="性别" clearable :teleported="false">
|
||||
<el-option label="男" value="1"></el-option>
|
||||
<el-option label="女" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-date-picker v-model="form.date" value-format="YYYY-MM-DD" type="date" placeholder="注册时间" :teleported="false"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submit">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-alert title="自定义FORM插糟 传递了form对象和提交方法" type="info" />
|
||||
</template>
|
||||
<el-table-column prop="id" label="ID" width="180"></el-table-column>
|
||||
<el-table-column prop="user" label="姓名" width="100"></el-table-column>
|
||||
<el-table-column prop="cip" label="最后请求IP" width="150"></el-table-column>
|
||||
<el-table-column prop="time" label="注册时间"></el-table-column>
|
||||
</sc-table-select>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tableselect',
|
||||
data() {
|
||||
return {
|
||||
apiObj: this.$API.demo.page,
|
||||
params: {
|
||||
name: 'demoName'
|
||||
},
|
||||
value: [
|
||||
{
|
||||
id: "410000199512025445",
|
||||
user: "魏磊"
|
||||
},
|
||||
{
|
||||
id: "520000198407304275",
|
||||
user: "史平"
|
||||
}
|
||||
],
|
||||
value2: {
|
||||
id: "520000198407304275",
|
||||
user: "史平"
|
||||
},
|
||||
props: {
|
||||
label: 'user',
|
||||
value: 'id',
|
||||
keyword: "keyword"
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
//值变化
|
||||
change(val){
|
||||
this.$message('change事件，返回详情查看控制台')
|
||||
console.log(val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-card shadow="never" header="文件示例">
|
||||
<sc-upload-file v-model="fileurl" :limit="3" :data="{otherData:'demo'}" tip="最多上传3个文件,单个文件不要超过10M,请上传xlsx/docx格式文件">
|
||||
<el-button type="primary" icon="el-icon-upload">上传附件</el-button>
|
||||
</sc-upload-file>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" header="文件示例(值为对象数组,适合保存原始文件名)">
|
||||
<sc-upload-file v-model="fileurlArr" :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传xlsx/docx格式文件">
|
||||
<el-button type="primary" icon="el-icon-upload">上传附件</el-button>
|
||||
</sc-upload-file>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" header="图片卡片示例(已开启拖拽排序)">
|
||||
<sc-upload-multiple v-model="fileurl2" draggable :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传图像格式文件"></sc-upload-multiple>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" header="单图像示例">
|
||||
<el-space wrap :size="8">
|
||||
<sc-upload v-model="fileurl3"></sc-upload>
|
||||
<sc-upload v-model="fileurl4" title="自定义标题" icon="el-icon-picture"></sc-upload>
|
||||
<sc-upload v-model="fileurl5" :apiObj="uploadApi" accept="image/jpg,image/png" :on-success="success" :width="220">
|
||||
<div class="custom-empty">
|
||||
<el-icon><el-icon-upload /></el-icon>
|
||||
<p>自定义插槽</p>
|
||||
</div>
|
||||
</sc-upload>
|
||||
<sc-upload v-model="fileurl6" round icon="el-icon-avatar" title="开启圆形"></sc-upload>
|
||||
<sc-upload v-model="fileurl7" title="开启剪裁" :cropper="true" :compress="1" :aspectRatio="1/1"></sc-upload>
|
||||
</el-space>
|
||||
</el-card>
|
||||
|
||||
|
||||
|
||||
<el-card shadow="never" header="在验证表单中使用">
|
||||
<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="身份证" required>
|
||||
<el-space wrap :size="8">
|
||||
<el-form-item prop="file1">
|
||||
<sc-upload v-model="form.file1" title="人像面"></sc-upload>
|
||||
</el-form-item>
|
||||
<el-form-item prop="file2">
|
||||
<sc-upload v-model="form.file2" title="国徽面"></sc-upload>
|
||||
</el-form-item>
|
||||
</el-space>
|
||||
</el-form-item>
|
||||
<el-form-item label="其他凭证" prop="file3">
|
||||
<sc-upload-multiple v-model="form.file3"></sc-upload-multiple>
|
||||
</el-form-item>
|
||||
<el-form-item label="附件" prop="file4">
|
||||
<sc-upload-file v-model="form.file4" :limit="1" drag>
|
||||
<el-icon class="el-icon--upload"><el-icon-upload-filled /></el-icon>
|
||||
<div class="el-upload__text">
|
||||
Drop file here or <em>click to upload</em>
|
||||
</div>
|
||||
</sc-upload-file>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期" prop="date">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="form.date"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm">保存</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'upload',
|
||||
data() {
|
||||
return {
|
||||
uploadApi: this.$API.common.upload,
|
||||
fileurlArr: [
|
||||
{
|
||||
name: '销售合同模板.xlsx',
|
||||
url: 'http://www.scuiadmin.com/files/220000198611262243.xlsx'
|
||||
},
|
||||
{
|
||||
name: '企业员工联系方式.xlsx',
|
||||
url: 'http://www.scuiadmin.com/files/350000201004261875.xlsx',
|
||||
}
|
||||
],
|
||||
fileurl: "http://www.scuiadmin.com/files/220000198611262243.xlsx,http://www.scuiadmin.com/files/350000201004261875.xlsx",
|
||||
fileurl2: "img/auth_banner.jpg,img/avatar3.gif",
|
||||
fileurl3: "img/auth_banner.jpg",
|
||||
fileurl4: "",
|
||||
fileurl5: "",
|
||||
fileurl6: "",
|
||||
fileurl7: "",
|
||||
form: {
|
||||
file1: "",
|
||||
file2: "",
|
||||
file3: "",
|
||||
file4: "",
|
||||
date: ""
|
||||
},
|
||||
rules: {
|
||||
file1: [
|
||||
{required: true, message: '请上传', trigger: 'change'}
|
||||
],
|
||||
file2: [
|
||||
{required: true, message: '请上传', trigger: 'change'}
|
||||
],
|
||||
file3: [
|
||||
{required: true, message: '请上传', trigger: 'change'}
|
||||
],
|
||||
file4: [
|
||||
{required: true, message: '请上传附件', trigger: 'change'}
|
||||
],
|
||||
date: [
|
||||
{required: true, message: '请选择日期', trigger: 'change'}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
success(response){
|
||||
this.$alert(`success函数钩子，可用于类似OCR返回信息，return false后阻止后续执行，回调参数打开控制台查看`, {
|
||||
title: "提示",
|
||||
type: "success"
|
||||
})
|
||||
console.log(response);
|
||||
return false;
|
||||
},
|
||||
submitForm(){
|
||||
this.$refs.ruleForm.validate((valid) => {
|
||||
if (valid) {
|
||||
alert('请看控制台输出');
|
||||
console.log(this.form);
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm(){
|
||||
this.$refs.ruleForm.resetFields();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-card+.el-card {margin-top: 15px;}
|
||||
.imglist .el-col+.el-col {margin-left: 8px;}
|
||||
|
||||
.custom-empty {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;background: #8c939d;border-radius:5px;}
|
||||
.custom-empty i {font-size: 30px;color: #fff;}
|
||||
.custom-empty p {font-size: 12px;font-weight: normal;color: #fff;margin-top: 10px;}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-alert title="播放器使用来自西瓜视频的西瓜播放器xgplayer" type="success" style="margin-bottom:20px;"></el-alert>
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never" header="MP4点播">
|
||||
<sc-video :src="playUrl" :options="options"></sc-video>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never" header="HlS(m3u8)直播">
|
||||
<el-row :gutter="1">
|
||||
<el-col :span="12">
|
||||
<sc-video :src="liveUrl" isLive :options="{volume: 0}"></sc-video>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<sc-video :src="liveUrl_2" isLive :options="{volume: 0}"></sc-video>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="1" style="margin-top: 1px;">
|
||||
<el-col :span="12">
|
||||
<sc-video :src="liveUrl_3" isLive :options="{volume: 0}"></sc-video>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<sc-video :src="liveUrl_4" isLive :options="{volume: 0}"></sc-video>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scVideo from '@/components/scVideo'
|
||||
|
||||
export default {
|
||||
name: 'scvideo',
|
||||
components: {
|
||||
scVideo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
playUrl: "https://fastly.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-720.mp4",
|
||||
options: {
|
||||
poster: "https://fastly.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-1080_Moment.jpg",
|
||||
pip: true
|
||||
},
|
||||
liveUrl: "http://local.live.jxtvcn.com.cn/live-jxtv/tv_jxtv1.m3u8",
|
||||
liveUrl_2: "http://local.live.jxtvcn.com.cn/live-jxtv/tv_jxtv6.m3u8",
|
||||
liveUrl_3: "http://local.live.jxtvcn.com.cn/live-jxtv/tv_jxtv7.m3u8",
|
||||
liveUrl_4: "http://local.live.jxtvcn.com.cn/live-jxtv/tv_jxtv8.m3u8",
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-card shadow="never">
|
||||
<sc-water-mark ref="wm" text="欢迎体验SCUI" subtext="admin@scui.com">
|
||||
<el-table :data="tableData" border stripe style="width: 100%">
|
||||
<el-table-column prop="date" label="Date" width="180" />
|
||||
<el-table-column prop="name" label="Name" width="180" />
|
||||
<el-table-column prop="address" label="Address" />
|
||||
</el-table>
|
||||
</sc-water-mark>
|
||||
</el-card>
|
||||
<el-card shadow="never" style="margin-top: 15px;">
|
||||
<el-button type="primary" @click="create">创建水印</el-button>
|
||||
<el-button type="primary" @click="clear">移除水印</el-button>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'watermark',
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
create(){
|
||||
this.$refs.wm.create()
|
||||
},
|
||||
clear(){
|
||||
this.$refs.wm.clear()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-page-header :content="data.name"></el-page-header>
|
||||
<div class="do">
|
||||
<el-button type="primary" @click="exportJson">export JSON</el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<sc-workflow v-model="data.nodeConfig"></sc-workflow>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scWorkflow from '@/components/scWorkflow'
|
||||
|
||||
export default {
|
||||
name: 'workflow',
|
||||
components: {
|
||||
scWorkflow
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: {
|
||||
"id": 1,
|
||||
"name": "请假审批",
|
||||
"nodeConfig": {
|
||||
"nodeName": "发起人",
|
||||
"type": 0,
|
||||
"nodeRoleList": [],
|
||||
"childNode": {
|
||||
"nodeName": "条件路由",
|
||||
"type": 4,
|
||||
"conditionNodes": [{
|
||||
"nodeName": "长期",
|
||||
"type": 3,
|
||||
"priorityLevel": 1,
|
||||
"conditionMode": 1,
|
||||
"conditionList": [{
|
||||
"label": "请假天数",
|
||||
"field": "day",
|
||||
"operator": ">",
|
||||
"value": "7"
|
||||
}],
|
||||
"childNode": {
|
||||
"nodeName": "领导审批",
|
||||
"type": 1,
|
||||
"setType": 1,
|
||||
"nodeUserList": [{
|
||||
"id": "360000197302144442",
|
||||
"name": "何敏"
|
||||
}],
|
||||
"nodeRoleList": [],
|
||||
"examineLevel": 1,
|
||||
"directorLevel": 1,
|
||||
"selectMode": 1,
|
||||
"termAuto": false,
|
||||
"term": 0,
|
||||
"termMode": 1,
|
||||
"examineMode": 1,
|
||||
"directorMode": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"nodeName": "短期",
|
||||
"type": 3,
|
||||
"priorityLevel": 2,
|
||||
"conditionMode": 1,
|
||||
"conditionList": [],
|
||||
"childNode": {
|
||||
"nodeName": "直接主管审批",
|
||||
"type": 1,
|
||||
"setType": 2,
|
||||
"nodeUserList": [],
|
||||
"nodeRoleList": [],
|
||||
"examineLevel": 1,
|
||||
"directorLevel": 1,
|
||||
"selectMode": 1,
|
||||
"termAuto": false,
|
||||
"term": 0,
|
||||
"termMode": 1,
|
||||
"examineMode": 1,
|
||||
"directorMode": 0
|
||||
}
|
||||
}
|
||||
],
|
||||
"childNode": {
|
||||
"nodeName": "抄送人",
|
||||
"type": 2,
|
||||
"userSelectFlag": true,
|
||||
"nodeUserList": [{
|
||||
"id": "220000200908305857",
|
||||
"name": "何秀英"
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
exportJson() {
|
||||
this.$message("返回值请查看F12控制台console.log()")
|
||||
console.log(this.data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user