no message
This commit is contained in:
parent
3bc05b0317
commit
51a2ed2743
@ -12,13 +12,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import XMenuItem from './XMenuItem'
|
||||
import xMenuItem from './item'
|
||||
|
||||
export default {
|
||||
// 菜单
|
||||
name: 'XMenu',
|
||||
name: 'xMenu',
|
||||
components: {
|
||||
XMenuItem
|
||||
xMenuItem
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
|
||||
@ -1,22 +1,15 @@
|
||||
<template>
|
||||
<div
|
||||
:class="{'is-select':select}"
|
||||
class="x-menu-item">
|
||||
<i
|
||||
:style="{backgroundColor: select ? iconColor || '#2362FB' : '#edf2f6'}"
|
||||
:class="['x-menu-item__icon', iconClass]" />
|
||||
<div :class="{'is-select':select}" class="x-menu-item">
|
||||
<i :style="{backgroundColor: select ? iconColor || '#2362FB' : '#edf2f6'}" :class="['x-menu-item__icon', iconClass]" />
|
||||
<span class="x-menu-item__label">{{ label }}</span>
|
||||
<el-badge
|
||||
v-if="num > 0"
|
||||
:max="99"
|
||||
:value="num"/>
|
||||
<el-badge v-if="num > 0" :max="99" :value="num"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
// 菜单
|
||||
name: 'XMenuItem',
|
||||
name: 'xMenuItem',
|
||||
components: {},
|
||||
props: {
|
||||
iconClass: String,
|
||||
@ -2,13 +2,7 @@
|
||||
<div class="sc-file-select">
|
||||
<div class="sc-file-select__side" v-loading="menuLoading">
|
||||
<div class="sc-file-select__side-menu">
|
||||
<el-tree ref="group" class="menu" :data="menu" :node-key="treeProps.key" :props="treeProps" :current-node-key="menu.length>0?menu[0][treeProps.key]:''" highlight-current @node-click="groupClick">
|
||||
<template #default="{ node }">
|
||||
<span class="el-tree-node__label">
|
||||
<el-icon class="icon"><el-icon-folder /></el-icon>{{node.label}}
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
|
||||
</div>
|
||||
<div class="sc-file-select__side-msg" v-if="multiple">
|
||||
已选择 <b>{{value.length}}</b> / <b>{{max}}</b> 项
|
||||
|
||||
@ -1,45 +0,0 @@
|
||||
<!--
|
||||
* @Descripttion: 状态指示器
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<span class="sc-state" :class="[{'sc-status-processing':pulse}, 'sc-state-bg--'+type]"></span>
|
||||
<span v-if="label" class="hidden-sm-and-down" style="padding:0 6px;color: #8a8888; font-size: 12px; }">{{ label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
type: { type: String, default: "primary" },
|
||||
label: { type: String, default: "" },
|
||||
pulse: { type: Boolean, default: false }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-state {display: inline-block;background: #000;width: 8px;height: 8px;border-radius: 50%;vertical-align: middle;}
|
||||
.sc-status-processing {position: relative;}
|
||||
.sc-status-processing:after {position: absolute;top:0px;left:0px;width: 100%;height: 100%;border-radius: 50%;background: inherit;content: '';animation: warn 1.2s ease-in-out infinite;}
|
||||
|
||||
.sc-state-bg--primary {background: var(--el-color-primary);}
|
||||
.sc-state-bg--success {background: var(--el-color-success);}
|
||||
.sc-state-bg--warning {background: var(--el-color-warning);}
|
||||
.sc-state-bg--danger {background: var(--el-color-danger);}
|
||||
.sc-state-bg--info {background: var(--el-color-info);}
|
||||
|
||||
@keyframes warn {
|
||||
0% {
|
||||
transform: scale(0.5);
|
||||
opacity: 1;
|
||||
}
|
||||
30% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: scale(2.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,66 +0,0 @@
|
||||
<!--
|
||||
* @Descripttion: 趋势标记
|
||||
* @version: 1.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年11月11日11:07:10
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<span class="sc-trend" :class="'sc-trend--'+type">
|
||||
<el-icon v-if="iconType=='P'" class="sc-trend-icon"><el-icon-top /></el-icon>
|
||||
<el-icon v-if="iconType=='N'" class="sc-trend-icon"><el-icon-bottom /></el-icon>
|
||||
<el-icon v-if="iconType=='Z'" class="sc-trend-icon"><el-icon-right /></el-icon>
|
||||
<em class="sc-trend-prefix">{{prefix}}</em>
|
||||
<em class="sc-trend-value">{{modelValue}}</em>
|
||||
<em class="sc-trend-suffix">{{suffix}}</em>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
modelValue: { type: Number, default: 0 },
|
||||
prefix: { type: String, default: "" },
|
||||
suffix: { type: String, default: "" },
|
||||
reverse: { type: Boolean, default: false }
|
||||
},
|
||||
computed: {
|
||||
absValue(){
|
||||
return Math.abs(this.modelValue);
|
||||
},
|
||||
iconType(v){
|
||||
if(this.modelValue == 0){
|
||||
v = 'Z'
|
||||
}else if(this.modelValue < 0){
|
||||
v = 'N'
|
||||
}else if(this.modelValue > 0){
|
||||
v = 'P'
|
||||
}
|
||||
return v
|
||||
},
|
||||
type(v){
|
||||
if(this.modelValue == 0){
|
||||
v = 'Z'
|
||||
}else if(this.modelValue < 0){
|
||||
v = this.reverse?'P':'N'
|
||||
}else if(this.modelValue > 0){
|
||||
v = this.reverse?'N':'P'
|
||||
}
|
||||
return v
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-trend {display: flex;align-items: center;}
|
||||
.sc-trend-icon {margin-right: 2px;}
|
||||
.sc-trend em {font-style: normal;}
|
||||
.sc-trend-prefix {margin-right: 2px;}
|
||||
.sc-trend-suffix {margin-left: 2px;}
|
||||
.sc-trend--P {color: #f56c6c;}
|
||||
.sc-trend--N {color: #67c23a;}
|
||||
.sc-trend--Z {color: #555;}
|
||||
</style>
|
||||
@ -1,10 +1,5 @@
|
||||
<!--
|
||||
* @Descripttion: 异步选择器
|
||||
* @version: 1.1
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年8月3日15:53:37
|
||||
* @LastEditors: sakuya
|
||||
* @LastEditTime: 2023年2月23日15:17:24
|
||||
-->
|
||||
|
||||
<template>
|
||||
|
||||
@ -1,70 +0,0 @@
|
||||
<!--
|
||||
* @Descripttion: 统计数值组件
|
||||
* @version: 1.1
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年6月23日13:11:32
|
||||
* @LastEditors: sakuya
|
||||
* @LastEditTime: 2022年5月14日19:55:09
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="sc-statistic">
|
||||
<div class="sc-statistic-title">
|
||||
{{ title }}
|
||||
<el-tooltip v-if="tips" effect="light">
|
||||
<template #content>
|
||||
<div style="width: 200px;line-height: 2;">
|
||||
{{ tips }}
|
||||
</div>
|
||||
</template>
|
||||
<el-icon class="sc-statistic-tips"><el-icon-question-filled/></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="sc-statistic-content">
|
||||
<span v-if="prefix" class="sc-statistic-content-prefix">{{ prefix }}</span>
|
||||
<span class="sc-statistic-content-value">{{ cmtValue }}</span>
|
||||
<span v-if="suffix" class="sc-statistic-content-suffix">{{ suffix }}</span>
|
||||
</div>
|
||||
<div v-if="description || $slots.default" class="sc-statistic-description">
|
||||
<slot>
|
||||
{{ description }}
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: { type: String, required: true, default: "" },
|
||||
value: { type: String, required: true, default: "" },
|
||||
prefix: { type: String, default: "" },
|
||||
suffix: { type: String, default: "" },
|
||||
description: { type: String, default: "" },
|
||||
tips: { type: String, default: "" },
|
||||
groupSeparator: { type: Boolean, default: false }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cmtValue(){
|
||||
return this.groupSeparator ? this.$tool.groupSeparator(this.value) : this.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-statistic-title {font-size: 12px;color: #999;margin-bottom: 10px;display: flex;align-items: center;}
|
||||
.sc-statistic-tips {margin-left: 5px;}
|
||||
.sc-statistic-content {font-size: 20px;color: #333;}
|
||||
.sc-statistic-content-value {font-weight: bold;}
|
||||
.sc-statistic-content-prefix {margin-right: 5px;}
|
||||
.sc-statistic-content-suffix {margin-left: 5px;font-size: 12px;}
|
||||
.sc-statistic-description {margin-top: 10px;color: #999;}
|
||||
|
||||
.dark .sc-statistic-content {color: #d0d0d0;}
|
||||
</style>
|
||||
@ -58,15 +58,16 @@
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.xavatar{
|
||||
display: flex;align-items: center;cursor: pointer;
|
||||
}
|
||||
|
||||
.userdrawerclose {
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
top: 148px;
|
||||
left: -36px;
|
||||
z-index: 10000;
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
padding: 6px;
|
||||
|
||||
@ -1,10 +1,5 @@
|
||||
<!--
|
||||
* @Descripttion: cron规则生成器
|
||||
* @version: 1.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年12月29日15:23:54
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
-->
|
||||
|
||||
<template>
|
||||
@ -29,11 +24,11 @@
|
||||
</el-input>
|
||||
|
||||
<el-dialog title="cron规则生成器" v-model="dialogVisible" :width="580" destroy-on-close append-to-body>
|
||||
<div class="sc-cron">
|
||||
<div class="x-cron">
|
||||
<el-tabs>
|
||||
<!-- <el-tab-pane>
|
||||
<template #label>
|
||||
<div class="sc-cron-num">
|
||||
<div class="x-cron-num">
|
||||
<h2>秒</h2>
|
||||
<h4>{{value_second}}</h4>
|
||||
</div>
|
||||
@ -67,7 +62,7 @@
|
||||
</el-tab-pane> -->
|
||||
<el-tab-pane>
|
||||
<template #label>
|
||||
<div class="sc-cron-num">
|
||||
<div class="x-cron-num">
|
||||
<h2>分钟</h2>
|
||||
<h4>{{value_minute}}</h4>
|
||||
</div>
|
||||
@ -101,7 +96,7 @@
|
||||
</el-tab-pane>
|
||||
<el-tab-pane>
|
||||
<template #label>
|
||||
<div class="sc-cron-num">
|
||||
<div class="x-cron-num">
|
||||
<h2>小时</h2>
|
||||
<h4>{{value_hour}}</h4>
|
||||
</div>
|
||||
@ -135,7 +130,7 @@
|
||||
</el-tab-pane>
|
||||
<el-tab-pane>
|
||||
<template #label>
|
||||
<div class="sc-cron-num">
|
||||
<div class="x-cron-num">
|
||||
<h2>日</h2>
|
||||
<h4>{{value_day}}</h4>
|
||||
</div>
|
||||
@ -171,7 +166,7 @@
|
||||
</el-tab-pane>
|
||||
<el-tab-pane>
|
||||
<template #label>
|
||||
<div class="sc-cron-num">
|
||||
<div class="x-cron-num">
|
||||
<h2>月</h2>
|
||||
<h4>{{value_month}}</h4>
|
||||
</div>
|
||||
@ -205,7 +200,7 @@
|
||||
</el-tab-pane>
|
||||
<el-tab-pane>
|
||||
<template #label>
|
||||
<div class="sc-cron-num">
|
||||
<div class="x-cron-num">
|
||||
<h2>周</h2>
|
||||
<h4>{{value_week}}</h4>
|
||||
</div>
|
||||
@ -255,7 +250,7 @@
|
||||
</el-tab-pane>
|
||||
<el-tab-pane>
|
||||
<template #label>
|
||||
<div class="sc-cron-num">
|
||||
<div class="x-cron-num">
|
||||
<h2>年</h2>
|
||||
<h4>{{value_year}}</h4>
|
||||
</div>
|
||||
@ -723,11 +718,11 @@
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-cron:deep(.el-tabs__item) {height: auto;line-height: 1;padding:0 7px;vertical-align: bottom;}
|
||||
.sc-cron-num {text-align: center;margin-bottom: 15px;width: 100%;}
|
||||
.sc-cron-num h2 {font-size: 12px;margin-bottom: 15px;font-weight: normal;}
|
||||
.sc-cron-num h4 {display: block;height: 32px;line-height: 30px;width: 100%;font-size: 12px;padding:0 15px;background: var(--el-color-primary-light-9);border-radius:4px;}
|
||||
.sc-cron:deep(.el-tabs__item.is-active) .sc-cron-num h4 {background: var(--el-color-primary);color: #fff;}
|
||||
.x-cron:deep(.el-tabs__item) {height: auto;line-height: 1;padding:0 7px;vertical-align: bottom;}
|
||||
.x-cron-num {text-align: center;margin-bottom: 15px;width: 100%;}
|
||||
.x-cron-num h2 {font-size: 12px;margin-bottom: 15px;font-weight: normal;}
|
||||
.x-cron-num h4 {display: block;height: 32px;line-height: 30px;width: 100%;font-size: 12px;padding:0 15px;background: var(--el-color-primary-light-9);border-radius:4px;}
|
||||
.x-cron:deep(.el-tabs__item.is-active) .x-cron-num h4 {background: var(--el-color-primary);color: #fff;}
|
||||
|
||||
[data-theme='dark'] .sc-cron-num h4 {background: var(--el-color-white);}
|
||||
[data-theme='dark'] .x-cron-num h4 {background: var(--el-color-white);}
|
||||
</style>
|
||||
@ -1,21 +1,15 @@
|
||||
<!--
|
||||
* @Descripttion: 图像裁剪组件
|
||||
* @version: 1.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年7月24日17:05:43
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
* @other: 代码完全开源，欢迎参考，也欢迎PR
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="sc-cropper">
|
||||
<div class="sc-cropper__img">
|
||||
<div class="x-cropper">
|
||||
<div class="x-cropper__img">
|
||||
<img :src="src" ref="img">
|
||||
</div>
|
||||
<div class="sc-cropper__preview">
|
||||
<div class="x-cropper__preview">
|
||||
<h4>图像预览</h4>
|
||||
<div class="sc-cropper__preview__img" ref="preview"></div>
|
||||
<div class="x-cropper__preview__img" ref="preview"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -75,10 +69,10 @@
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-cropper {height:300px;}
|
||||
.sc-cropper__img {height:100%;width:400px;float: left;background: #EBEEF5;}
|
||||
.sc-cropper__img img {display: none;}
|
||||
.sc-cropper__preview {width: 120px;margin-left: 20px;float: left;}
|
||||
.sc-cropper__preview h4 {font-weight: normal;font-size: 12px;color: #999;margin-bottom: 20px;}
|
||||
.sc-cropper__preview__img {overflow: hidden;width: 120px;height: 120px;border: 1px solid #ebeef5;}
|
||||
.x-cropper {height:300px;}
|
||||
.x-cropper__img {height:100%;width:400px;float: left;background: #EBEEF5;}
|
||||
.x-cropper__img img {display: none;}
|
||||
.x-cropper__preview {width: 120px;margin-left: 20px;float: left;}
|
||||
.x-cropper__preview h4 {font-weight: normal;font-size: 12px;color: #999;margin-bottom: 20px;}
|
||||
.x-cropper__preview__img {overflow: hidden;width: 120px;height: 120px;border: 1px solid #ebeef5;}
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div ref="scEcharts" :style="{height:height, width:width}"></div>
|
||||
<div ref="xEcharts" :style="{height:height, width:width}"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
export default {
|
||||
...echarts,
|
||||
name: "scEcharts",
|
||||
name: "xEcharts",
|
||||
props: {
|
||||
height: { type: String, default: "100%" },
|
||||
width: { type: String, default: "100%" },
|
||||
@ -54,7 +54,7 @@
|
||||
},
|
||||
methods: {
|
||||
draw(){
|
||||
var myChart = echarts.init(this.$refs.scEcharts, 'T');
|
||||
var myChart = echarts.init(this.$refs.xEcharts, 'T');
|
||||
myChart.setOption(this.myOptions);
|
||||
this.myChart = myChart;
|
||||
window.addEventListener('resize', () => myChart.resize());
|
||||
@ -19,7 +19,7 @@
|
||||
</slot>
|
||||
<el-dialog title="过滤器" v-model="dialog" :size="680" append-to-body class="dialogClass">
|
||||
<el-scrollbar>
|
||||
<div class="sc-filter-main">
|
||||
<div class="x-filter-main">
|
||||
<h2>设置过滤条件</h2>
|
||||
<div v-if="filter.length<=0" class="nodata">
|
||||
没有默认过滤条件，请点击增加过滤项
|
||||
@ -258,16 +258,16 @@
|
||||
text-align: right;
|
||||
}
|
||||
.nodata {height:46px;line-height: 46px;margin:15px 0;border: 1px dashed #e6e6e6;color: #999;text-align: center;border-radius: 3px;}
|
||||
.sc-filter-main {background: #fff; padding-top: 0px}
|
||||
.sc-filter-main h2 {font-size: 12px;color: #999;font-weight: normal;}
|
||||
.sc-filter-main table {width: 100%;margin: 10px 0;}
|
||||
.sc-filter-main table tr {}
|
||||
.sc-filter-main table td {padding:5px 10px 5px 0;}
|
||||
.sc-filter-main table td:deep(.el-input .el-input__inner) {vertical-align: top;}
|
||||
.sc-filter-main table td .el-select {display: block;}
|
||||
.sc-filter-main table td .el-date-editor.el-input {display: block;width: 100%;}
|
||||
.sc-filter-main table td .del {background: #fff;color: #999;width: 32px;height: 32px;line-height: 32px;text-align: center;border-radius:50%;font-size: 12px;cursor: pointer;}
|
||||
.sc-filter-main table td .del:hover {background: #F56C6C;color: #fff;}
|
||||
.x-filter-main {background: #fff; padding-top: 0px}
|
||||
.x-filter-main h2 {font-size: 12px;color: #999;font-weight: normal;}
|
||||
.x-filter-main table {width: 100%;margin: 10px 0;}
|
||||
.x-filter-main table tr {}
|
||||
.x-filter-main table td {padding:5px 10px 5px 0;}
|
||||
.x-filter-main table td:deep(.el-input .el-input__inner) {vertical-align: top;}
|
||||
.x-filter-main table td .el-select {display: block;}
|
||||
.x-filter-main table td .el-date-editor.el-input {display: block;width: 100%;}
|
||||
.x-filter-main table td .del {background: #fff;color: #999;width: 32px;height: 32px;line-height: 32px;text-align: center;border-radius:50%;font-size: 12px;cursor: pointer;}
|
||||
.x-filter-main table td .del:hover {background: #F56C6C;color: #fff;}
|
||||
|
||||
.root {display: flex;height: 100%;flex-direction: column}
|
||||
.root:deep(.el-tabs__header) {margin: 0;}
|
||||
@ -277,8 +277,8 @@
|
||||
|
||||
|
||||
.dark .root:deep(.el-tabs__content) {background: var(--el-bg-color-overlay);}
|
||||
.dark .sc-filter-main {background: var(--el-bg-color);border-color:var(--el-border-color-light);}
|
||||
.dark .sc-filter-main table td .del {background: none;}
|
||||
.dark .sc-filter-main table td .del:hover {background: #F56C6C;}
|
||||
.dark .x-filter-main {background: var(--el-bg-color);border-color:var(--el-border-color-light);}
|
||||
.dark .x-filter-main table td .del {background: none;}
|
||||
.dark .x-filter-main table td .del:hover {background: #F56C6C;}
|
||||
.dark .nodata {border-color:var(--el-border-color-light);}
|
||||
</style>
|
||||
@ -3,7 +3,7 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="sc-filter-my">
|
||||
<div class="x-filter-my">
|
||||
<el-tag v-for="(item, index) in myFilter" @close="closeMyfilter(item, index)" @click="selectMyfilter(item)" :key="index" class="mx-1" style="margin-right: 10px;" closable :type="item.type">
|
||||
{{ item.title }}
|
||||
</el-tag>
|
||||
@ -78,19 +78,19 @@
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-filter-my {}
|
||||
.sc-filter-my-loading {padding:15px;}
|
||||
.sc-filter-my-list {list-style-type: none;background: #fff;border-bottom: 1px solid #e6e6e6;}
|
||||
.sc-filter-my-list h2 {font-size: 12px;color: #999;font-weight: normal;padding:20px;}
|
||||
.sc-filter-my-list li {padding:12px 20px;cursor: pointer;position: relative;color: #3c4a54;padding-right:80px;}
|
||||
.sc-filter-my-list li:hover {background: #ecf5ff;color: #409EFF;}
|
||||
.sc-filter-my-list li label {cursor: pointer;font-size: 14px;line-height: 1.8;}
|
||||
.sc-filter-my-list li label span {color: #999;margin-right: 10px;}
|
||||
.sc-filter-my-list li .del {position: absolute;right:20px;top:8px;border-radius:50%;width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;color: #999;}
|
||||
.sc-filter-my-list li .del:hover {background: #F56C6C;color: #fff;}
|
||||
.x-filter-my {}
|
||||
.x-filter-my-loading {padding:15px;}
|
||||
.x-filter-my-list {list-style-type: none;background: #fff;border-bottom: 1px solid #e6e6e6;}
|
||||
.x-filter-my-list h2 {font-size: 12px;color: #999;font-weight: normal;padding:20px;}
|
||||
.x-filter-my-list li {padding:12px 20px;cursor: pointer;position: relative;color: #3c4a54;padding-right:80px;}
|
||||
.x-filter-my-list li:hover {background: #ecf5ff;color: #409EFF;}
|
||||
.x-filter-my-list li label {cursor: pointer;font-size: 14px;line-height: 1.8;}
|
||||
.x-filter-my-list li label span {color: #999;margin-right: 10px;}
|
||||
.x-filter-my-list li .del {position: absolute;right:20px;top:8px;border-radius:50%;width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;color: #999;}
|
||||
.x-filter-my-list li .del:hover {background: #F56C6C;color: #fff;}
|
||||
|
||||
[data-theme='dark'] .sc-filter-my .el-empty h2 {color: #fff;}
|
||||
[data-theme='dark'] .sc-filter-my-list {background: none;border-color:var(--el-border-color-base);}
|
||||
[data-theme='dark'] .sc-filter-my-list li {color: #d0d0d0;}
|
||||
[data-theme='dark'] .sc-filter-my-list li:hover {background: var(--el-color-white);}
|
||||
[data-theme='dark'] .x-filter-my .el-empty h2 {color: #fff;}
|
||||
[data-theme='dark'] .x-filter-my-list {background: none;border-color:var(--el-border-color-base);}
|
||||
[data-theme='dark'] .x-filter-my-list li {color: #d0d0d0;}
|
||||
[data-theme='dark'] .x-filter-my-list li:hover {background: var(--el-color-white);}
|
||||
</style>
|
||||
@ -7,7 +7,7 @@
|
||||
<el-row :gutter="15">
|
||||
<template v-for="(item, index) in config.column" :key="index">
|
||||
<el-col :span="item.span || 24" v-if="!hideHandle(item)">
|
||||
<sc-title v-if="item.component=='title'" :title="item.label"></sc-title>
|
||||
<x-title v-if="item.component=='title'" :title="item.label"></x-title>
|
||||
<el-form-item v-else-if="item.component" :prop="item.name" :rules="rulesHandle(item)">
|
||||
<template #label>
|
||||
{{item.label}}
|
||||
@ -25,10 +25,6 @@
|
||||
|
||||
<script>
|
||||
import http from "@/utils/request"
|
||||
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
const XItem = defineAsyncComponent(() => import('./item'))
|
||||
|
||||
export default {
|
||||
props: {
|
||||
modelValue: { type: Object, default: () => {} },
|
||||
@ -36,7 +32,6 @@
|
||||
loading: { type: Boolean, default: false },
|
||||
},
|
||||
components: {
|
||||
XItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -43,11 +43,11 @@
|
||||
</template>
|
||||
<!-- upload -->
|
||||
<template v-else-if="item.component=='upload'">
|
||||
<sc-upload v-model="data[item.name]" v-bind="item.options"></sc-upload>
|
||||
<x-upload v-model="data[item.name]" v-bind="item.options"></x-upload>
|
||||
</template>
|
||||
<!-- updatemultiple -->
|
||||
<template v-else-if="item.component=='updatemultiple'">
|
||||
<sc-upload-multiple v-model="data[item.name]" draggable v-bind="item.options"></sc-upload-multiple>
|
||||
<x-upload-multiple v-model="data[item.name]" draggable v-bind="item.options"></x-upload-multiple>
|
||||
</template>
|
||||
<!-- switch -->
|
||||
<template v-else-if="item.component=='switch'">
|
||||
@ -93,7 +93,7 @@
|
||||
<x-avatar v-model="data" :options="item.options" size="small"></x-avatar>
|
||||
</template>
|
||||
<template v-else-if="item.component=='formtable'">
|
||||
<sc-form-table ref="videostable" v-model="data[item.name]" v-bind="item.options"> </sc-form-table>
|
||||
<x-form-table ref="videostable" v-model="data[item.name]" v-bind="item.options"> </x-form-table>
|
||||
</template>
|
||||
<!-- noComponent -->
|
||||
<template v-else>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<sc-table-select v-model="value" v-bind="item.options" style="width: 100%;">
|
||||
<x-table-select v-model="value" v-bind="item.options" style="width: 100%;">
|
||||
<template #header="{data, form, submit}">
|
||||
<el-form :inline="true" :model="data" v-if="form && form.length>0">
|
||||
<el-form-item style="margin-bottom:0px;" v-for="(i,index) in form" :key="index">
|
||||
@ -11,12 +11,12 @@
|
||||
</el-form>
|
||||
</template>
|
||||
<el-table-column v-for="(_item, _index) in item.options.column" :key="_index" v-bind="_item"></el-table-column>
|
||||
</sc-table-select>
|
||||
</x-table-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'uploadRender',
|
||||
name: 'tableselectRender',
|
||||
props: {
|
||||
modelValue: [String, Number, Boolean, Date, Object, Array],
|
||||
item: { type: Object, default: () => {} }
|
||||
@ -2,14 +2,14 @@
|
||||
* @Descripttion: 表单表格
|
||||
-->
|
||||
<template>
|
||||
<div class="sc-form-table" ref="scFormTable">
|
||||
<div class="x-form-table" ref="xFormTable">
|
||||
<el-table :data="data" ref="table" border stripe>
|
||||
<el-table-column type="index" width="50" fixed="left">
|
||||
<template #header>
|
||||
<el-button v-if="!hideAdd" type="primary" icon="el-icon-plus" size="small" circle @click="rowAdd"></el-button>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<div :class="['sc-form-table-handle', {'sc-form-table-handle-delete':!hideDelete}]">
|
||||
<div :class="['x-form-table-handle', {'x-form-table-handle-delete':!hideDelete}]">
|
||||
<span>{{scope.$index + 1}}</span>
|
||||
<el-button v-if="!hideDelete" type="danger" icon="el-icon-delete" size="small" plain circle @click="rowDel(scope.row, scope.$index)"></el-button>
|
||||
</div>
|
||||
@ -88,13 +88,13 @@
|
||||
onEnd({ newIndex, oldIndex }) {
|
||||
_this.data.splice(newIndex, 0, _this.data.splice(oldIndex, 1)[0])
|
||||
const newArray = _this.data.slice(0)
|
||||
const tmpHeight = _this.$refs.scFormTable.offsetHeight
|
||||
_this.$refs.scFormTable.style.setProperty('height', tmpHeight + 'px')
|
||||
const tmpHeight = _this.$refs.xFormTable.offsetHeight
|
||||
_this.$refs.xFormTable.style.setProperty('height', tmpHeight + 'px')
|
||||
_this.data = []
|
||||
_this.$nextTick(() => {
|
||||
_this.data = newArray
|
||||
_this.$nextTick(() => {
|
||||
_this.$refs.scFormTable.style.removeProperty('height')
|
||||
_this.$refs.xFormTable.style.removeProperty('height')
|
||||
})
|
||||
|
||||
})
|
||||
@ -122,11 +122,11 @@
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-form-table {width: 100%;}
|
||||
.sc-form-table .sc-form-table-handle {text-align: center;}
|
||||
.sc-form-table .sc-form-table-handle span {display: inline-block;}
|
||||
.sc-form-table .sc-form-table-handle button {display: none;}
|
||||
.sc-form-table .hover-row .sc-form-table-handle-delete span {display: none;}
|
||||
.sc-form-table .hover-row .sc-form-table-handle-delete button {display: inline-block;}
|
||||
.sc-form-table .move {text-align: center;font-size: 14px;margin-top: 3px;}
|
||||
.x-form-table {width: 100%;}
|
||||
.x-form-table .x-form-table-handle {text-align: center;}
|
||||
.x-form-table .x-form-table-handle span {display: inline-block;}
|
||||
.x-form-table .x-form-table-handle button {display: none;}
|
||||
.x-form-table .hover-row .x-form-table-handle-delete span {display: none;}
|
||||
.x-form-table .hover-row .x-form-table-handle-delete button {display: inline-block;}
|
||||
.x-form-table .move {text-align: center;font-size: 14px;margin-top: 3px;}
|
||||
</style>
|
||||
45
src/components/xMini/StatusIndicator.vue
Normal file
45
src/components/xMini/StatusIndicator.vue
Normal file
@ -0,0 +1,45 @@
|
||||
<!--
|
||||
* @Descripttion: 状态指示器
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<span class="x-state" :class="[{'x-status-processing':pulse}, 'x-state-bg--'+type]"></span>
|
||||
<span v-if="label" class="hidden-sm-and-down" style="padding:0 6px;color: #8a8888; font-size: 12px; }">{{ label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
type: { type: String, default: "primary" },
|
||||
label: { type: String, default: "" },
|
||||
pulse: { type: Boolean, default: false }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.x-state {display: inline-block;background: #000;width: 8px;height: 8px;border-radius: 50%;vertical-align: middle;}
|
||||
.x-status-processing {position: relative;}
|
||||
.x-status-processing:after {position: absolute;top:0px;left:0px;width: 100%;height: 100%;border-radius: 50%;background: inherit;content: '';animation: warn 1.2s ease-in-out infinite;}
|
||||
|
||||
.x-state-bg--primary {background: var(--el-color-primary);}
|
||||
.x-state-bg--success {background: var(--el-color-success);}
|
||||
.x-state-bg--warning {background: var(--el-color-warning);}
|
||||
.x-state-bg--danger {background: var(--el-color-danger);}
|
||||
.x-state-bg--info {background: var(--el-color-info);}
|
||||
|
||||
@keyframes warn {
|
||||
0% {
|
||||
transform: scale(0.5);
|
||||
opacity: 1;
|
||||
}
|
||||
30% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: scale(2.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
61
src/components/xMini/Trend.vue
Normal file
61
src/components/xMini/Trend.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<!--
|
||||
* @Descripttion: 趋势标记
|
||||
-->
|
||||
|
||||
<template>
|
||||
<span class="x-trend" :class="'x-trend--'+type">
|
||||
<el-icon v-if="iconType=='P'" class="x-trend-icon"><el-icon-top /></el-icon>
|
||||
<el-icon v-if="iconType=='N'" class="x-trend-icon"><el-icon-bottom /></el-icon>
|
||||
<el-icon v-if="iconType=='Z'" class="x-trend-icon"><el-icon-right /></el-icon>
|
||||
<em class="x-trend-prefix">{{prefix}}</em>
|
||||
<em class="x-trend-value">{{modelValue}}</em>
|
||||
<em class="x-trend-suffix">{{suffix}}</em>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
modelValue: { type: Number, default: 0 },
|
||||
prefix: { type: String, default: "" },
|
||||
suffix: { type: String, default: "" },
|
||||
reverse: { type: Boolean, default: false }
|
||||
},
|
||||
computed: {
|
||||
absValue(){
|
||||
return Math.abs(this.modelValue);
|
||||
},
|
||||
iconType(v){
|
||||
if(this.modelValue == 0){
|
||||
v = 'Z'
|
||||
}else if(this.modelValue < 0){
|
||||
v = 'N'
|
||||
}else if(this.modelValue > 0){
|
||||
v = 'P'
|
||||
}
|
||||
return v
|
||||
},
|
||||
type(v){
|
||||
if(this.modelValue == 0){
|
||||
v = 'Z'
|
||||
}else if(this.modelValue < 0){
|
||||
v = this.reverse?'P':'N'
|
||||
}else if(this.modelValue > 0){
|
||||
v = this.reverse?'N':'P'
|
||||
}
|
||||
return v
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.x-trend {display: flex;align-items: center;}
|
||||
.x-trend-icon {margin-right: 2px;}
|
||||
.x-trend em {font-style: normal;}
|
||||
.x-trend-prefix {margin-right: 2px;}
|
||||
.x-trend-suffix {margin-left: 2px;}
|
||||
.x-trend--P {color: #f56c6c;}
|
||||
.x-trend--N {color: #67c23a;}
|
||||
.x-trend--Z {color: #555;}
|
||||
</style>
|
||||
65
src/components/xStatistic/index.vue
Normal file
65
src/components/xStatistic/index.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<!--
|
||||
* @Descripttion: 统计数值组件
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="x-statistic">
|
||||
<div class="x-statistic-title">
|
||||
{{ title }}
|
||||
<el-tooltip v-if="tips" effect="light">
|
||||
<template #content>
|
||||
<div style="width: 200px;line-height: 2;">
|
||||
{{ tips }}
|
||||
</div>
|
||||
</template>
|
||||
<el-icon class="x-statistic-tips"><el-icon-question-filled/></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="x-statistic-content">
|
||||
<span v-if="prefix" class="x-statistic-content-prefix">{{ prefix }}</span>
|
||||
<span class="x-statistic-content-value">{{ cmtValue }}</span>
|
||||
<span v-if="suffix" class="x-statistic-content-suffix">{{ suffix }}</span>
|
||||
</div>
|
||||
<div v-if="description || $slots.default" class="x-statistic-description">
|
||||
<slot>
|
||||
{{ description }}
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: { type: String, required: true, default: "" },
|
||||
value: { type: String, required: true, default: "" },
|
||||
prefix: { type: String, default: "" },
|
||||
suffix: { type: String, default: "" },
|
||||
description: { type: String, default: "" },
|
||||
tips: { type: String, default: "" },
|
||||
groupSeparator: { type: Boolean, default: false }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cmtValue(){
|
||||
return this.groupSeparator ? this.$tool.groupSeparator(this.value) : this.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.x-statistic-title {font-size: 12px;color: #999;margin-bottom: 10px;display: flex;align-items: center;}
|
||||
.x-statistic-tips {margin-left: 5px;}
|
||||
.x-statistic-content {font-size: 20px;color: #333;}
|
||||
.x-statistic-content-value {font-weight: bold;}
|
||||
.x-statistic-content-prefix {margin-right: 5px;}
|
||||
.x-statistic-content-suffix {margin-left: 5px;font-size: 12px;}
|
||||
.x-statistic-description {margin-top: 10px;color: #999;}
|
||||
|
||||
.dark .x-statistic-content {color: #d0d0d0;}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="scTable" :style="{'height':_height}" ref="scTableMain" v-loading="loading">
|
||||
<div class="scTable-table" :style="{'height':_table_height}">
|
||||
<el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="height=='auto'?null:'100%'" :size="config.size" :border="config.border" :stripe="config.stripe" :summary-method="remoteSummary?remoteSummaryMethod:summaryMethod" @sort-change="sortChange" @filter-change="filterChange">
|
||||
<div class="xTable" :style="{'height':_height}" ref="xTableMain" v-loading="loading">
|
||||
<div class="xTable-table" :style="{'height':_table_height}">
|
||||
<el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="xTable" :height="height=='auto'?null:'100%'" :size="config.size" :border="config.border" :stripe="config.stripe" :summary-method="remoteSummary?remoteSummaryMethod:summaryMethod" @sort-change="sortChange" @filter-change="filterChange">
|
||||
<slot></slot>
|
||||
<template v-for="(item, index) in column" :key="index">
|
||||
<el-table-column v-if="!item.hide && item.name" :column-key="item.name" :label="item.label" :prop="item.name" :width="item.width || 'auto'" :min-width="item.minWidth || 'auto'" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter||!item.filters?null:filterHandler" :show-overflow-tooltip="item.showOverflowTooltip">
|
||||
@ -19,8 +19,8 @@
|
||||
</template>
|
||||
</el-image>
|
||||
<p v-else-if="item.columntype=='status'">
|
||||
<sc-status-indicator v-for="op in item.options.items" :key="op.value" pulse :type="op.type || 'success'" :label="op.label" v-show="op.value==scope.row[item.name]">
|
||||
</sc-status-indicator>
|
||||
<x-status-indicator v-for="op in item.options.items" :key="op.value" pulse :type="op.type || 'success'" :label="op.label" v-show="op.value==scope.row[item.name]">
|
||||
</x-status-indicator>
|
||||
</p>
|
||||
<p v-else-if="item.columntype=='input'">
|
||||
<input class="el-input__inner" type="text" readonly :value="scope.row[item.name]">
|
||||
@ -42,11 +42,11 @@
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="scTable-page" v-if="!hidePagination || !hideDo">
|
||||
<div class="scTable-pagination">
|
||||
<div class="xTable-page" v-if="!hidePagination || !hideDo">
|
||||
<div class="xTable-pagination">
|
||||
<el-pagination v-if="!hidePagination" background :small="true" :layout="paginationLayout" :total="total" :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
|
||||
</div>
|
||||
<div class="scTable-do" v-if="!hideDo">
|
||||
<div class="xTable-do" v-if="!hideDo">
|
||||
<el-button v-if="!hideRefresh" @click="refresh" icon="el-icon-refresh" circle style="margin-left:15px"></el-button>
|
||||
<el-popover v-if="columnSetting" placement="top" title="列设置" :width="500" trigger="click" :hide-after="0" @show="customColumnShow=true" @after-leave="customColumnShow=false">
|
||||
<template #reference>
|
||||
@ -79,13 +79,13 @@
|
||||
|
||||
|
||||
<style scoped>
|
||||
.scTable {}
|
||||
.scTable-table {height: calc(100% - 50px);}
|
||||
.scTable-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;}
|
||||
.scTable-do {white-space: nowrap;}
|
||||
.scTable:deep(.el-table__footer) .cell {font-weight: bold;}
|
||||
.scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-horizontal {height: 12px;border-radius: 12px;}
|
||||
.scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-vertical {width: 12px;border-radius: 12px;}
|
||||
.xTable {}
|
||||
.xTable-table {height: calc(100% - 50px);}
|
||||
.xTable-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;}
|
||||
.xTable-do {white-space: nowrap;}
|
||||
.xTable:deep(.el-table__footer) .cell {font-weight: bold;}
|
||||
.xTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-horizontal {height: 12px;border-radius: 12px;}
|
||||
.xTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-vertical {width: 12px;border-radius: 12px;}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@ -93,7 +93,7 @@
|
||||
import columnSetting from './columnSetting'
|
||||
|
||||
export default {
|
||||
name: 'scTable',
|
||||
name: 'xTable',
|
||||
components: {
|
||||
columnSetting
|
||||
},
|
||||
@ -187,7 +187,7 @@
|
||||
},
|
||||
activated(){
|
||||
if(!this.isActivat){
|
||||
this.$refs.scTable.doLayout()
|
||||
this.$refs.xTable.doLayout()
|
||||
}
|
||||
},
|
||||
deactivated(){
|
||||
@ -241,7 +241,7 @@
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
// this.$refs.scTable.setScrollTop(0)
|
||||
// this.$refs.xTable.setScrollTop(0)
|
||||
// 回调
|
||||
this.$emit('dataChange', res, this.tableData)
|
||||
});
|
||||
@ -264,13 +264,13 @@
|
||||
},
|
||||
//刷新数据
|
||||
refresh(){
|
||||
this.$refs.scTable.clearSelection();
|
||||
this.$refs.xTable.clearSelection();
|
||||
this.getData();
|
||||
},
|
||||
//更新数据 合并上一次params
|
||||
upData(params, page=1){
|
||||
this.currentPage = page;
|
||||
this.$refs.scTable.clearSelection();
|
||||
this.$refs.xTable.clearSelection();
|
||||
Object.assign(this.tableParams, params || {})
|
||||
this.getData()
|
||||
},
|
||||
@ -278,9 +278,9 @@
|
||||
reload(params, page=1){
|
||||
this.currentPage = page;
|
||||
this.tableParams = params || {}
|
||||
this.$refs.scTable.clearSelection();
|
||||
this.$refs.scTable.clearSort()
|
||||
this.$refs.scTable.clearFilter()
|
||||
this.$refs.xTable.clearSelection();
|
||||
this.$refs.xTable.clearSort()
|
||||
this.$refs.xTable.clearFilter()
|
||||
this.getData()
|
||||
},
|
||||
//自定义变化事件
|
||||
@ -361,7 +361,7 @@
|
||||
return sums
|
||||
},
|
||||
configSizeChange(){
|
||||
this.$refs.scTable.doLayout()
|
||||
this.$refs.xTable.doLayout()
|
||||
},
|
||||
//插入行 unshiftRow
|
||||
unshiftRow(row){
|
||||
@ -403,31 +403,31 @@
|
||||
},
|
||||
//原生方法转发
|
||||
clearSelection(){
|
||||
this.$refs.scTable.clearSelection()
|
||||
this.$refs.xTable.clearSelection()
|
||||
},
|
||||
toggleRowSelection(row, selected){
|
||||
this.$refs.scTable.toggleRowSelection(row, selected)
|
||||
this.$refs.xTable.toggleRowSelection(row, selected)
|
||||
},
|
||||
toggleAllSelection(){
|
||||
this.$refs.scTable.toggleAllSelection()
|
||||
this.$refs.xTable.toggleAllSelection()
|
||||
},
|
||||
toggleRowExpansion(row, expanded){
|
||||
this.$refs.scTable.toggleRowExpansion(row, expanded)
|
||||
this.$refs.xTable.toggleRowExpansion(row, expanded)
|
||||
},
|
||||
setCurrentRow(row){
|
||||
this.$refs.scTable.setCurrentRow(row)
|
||||
this.$refs.xTable.setCurrentRow(row)
|
||||
},
|
||||
clearSort(){
|
||||
this.$refs.scTable.clearSort()
|
||||
this.$refs.xTable.clearSort()
|
||||
},
|
||||
clearFilter(columnKey){
|
||||
this.$refs.scTable.clearFilter(columnKey)
|
||||
this.$refs.xTable.clearFilter(columnKey)
|
||||
},
|
||||
doLayout(){
|
||||
this.$refs.scTable.doLayout()
|
||||
this.$refs.xTable.doLayout()
|
||||
},
|
||||
sort(prop, order){
|
||||
this.$refs.scTable.sort(prop, order)
|
||||
this.$refs.xTable.sort(prop, order)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -4,8 +4,8 @@
|
||||
<template>
|
||||
<el-select ref="select" v-model="defaultValue" :size="size" :clearable="clearable" :multiple="multiple" :collapse-tags="collapseTags" :collapse-tags-tooltip="collapseTagsTooltip" :filterable="filterable" :placeholder="placeholder" :disabled="disabled" :filter-method="filterMethod" @remove-tag="removeTag" @visible-change="visibleChange" @clear="clear">
|
||||
<template #empty>
|
||||
<div class="sc-table-select__table" v-loading="loading">
|
||||
<div class="sc-table-select__header">
|
||||
<div class="x-table-select__table" v-loading="loading">
|
||||
<div class="x-table-select__header">
|
||||
<slot name="header" :data="formData" :form="form" :submit="formSubmit"></slot>
|
||||
</div>
|
||||
<el-table ref="table" :data="tableData" :height="245" :highlight-current-row="!multiple" @row-click="click" @select="select" @select-all="selectAll">
|
||||
@ -15,7 +15,7 @@
|
||||
</el-table-column>
|
||||
<slot></slot>
|
||||
</el-table>
|
||||
<div class="sc-table-select__page">
|
||||
<div class="x-table-select__page">
|
||||
<el-pagination small background layout="prev, pager, next" :total="total" :page-size="limit" v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
@ -244,6 +244,6 @@
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-table-select__table {padding:12px;}
|
||||
.sc-table-select__page {padding-top: 12px;}
|
||||
.x-table-select__table {padding:12px;}
|
||||
.x-table-select__page {padding-top: 12px;}
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="sc-title" v-html="title"> </div>
|
||||
<div class="x-title" v-html="title"> </div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -19,7 +19,7 @@
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-title {
|
||||
.x-title {
|
||||
margin: 20px 0;
|
||||
font-size: 17px;
|
||||
/*border-bottom: 1px solid #eee;*/
|
||||
@ -4,7 +4,7 @@
|
||||
<template>
|
||||
<x-dialog :title="(config.name || titleMap[mode]) || '编辑'" v-model="visible" :size="960" destroy-on-close @closed="$emit('closed')">
|
||||
<el-skeleton v-if="loading" :rows="4" />
|
||||
<sc-form ref="formref" :config="config" v-model="data" v-if="!loading" :loading="loading"> </sc-form>
|
||||
<x-form ref="formref" :config="config" v-model="data" v-if="!loading" :loading="loading"> </x-form>
|
||||
<template #footer>
|
||||
<el-button type="primary" :loading="isSaveing" @click="submit">{{ config.submitname || '保存' }}</el-button>
|
||||
<el-button @click="visible=false">取消</el-button>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="sc-upload-file">
|
||||
<div class="x-upload-file">
|
||||
<el-upload
|
||||
:disabled="disabled"
|
||||
:auto-upload="autoUpload"
|
||||
@ -185,7 +185,7 @@
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-form-item.is-error .sc-upload-file:deep(.el-upload-dragger) {border-color: var(--el-color-danger);}
|
||||
.sc-upload-file {width: 100%;}
|
||||
.sc-upload-file:deep(.el-upload-list__item) {transition: none !important;}
|
||||
.el-form-item.is-error .x-upload-file:deep(.el-upload-dragger) {border-color: var(--el-color-danger);}
|
||||
.x-upload-file {width: 100%;}
|
||||
.x-upload-file:deep(.el-upload-list__item) {transition: none !important;}
|
||||
</style>
|
||||
@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<div class="sc-upload" :class="{'sc-upload-round':round}" :style="style">
|
||||
<div v-if="file && file.status != 'success'" class="sc-upload__uploading">
|
||||
<div class="sc-upload__progress">
|
||||
<div class="x-upload" :class="{'x-upload-round':round}" :style="style">
|
||||
<div v-if="file && file.status != 'success'" class="x-upload__uploading">
|
||||
<div class="x-upload__progress">
|
||||
<el-progress :percentage="file.percentage" :text-inside="true" :stroke-width="16"/>
|
||||
</div>
|
||||
<el-image class="image" :src="file.tempFile" fit="cover"></el-image>
|
||||
</div>
|
||||
<div v-if="file && file.status=='success'" class="sc-upload__img">
|
||||
<div v-if="file && file.status=='success'" class="x-upload__img">
|
||||
<el-image class="image" :src="file.url" :preview-src-list="[file.url]" fit="cover" hide-on-click-modal append-to-body :z-index="9999">
|
||||
<template #placeholder>
|
||||
<div class="sc-upload__img-slot">
|
||||
<div class="x-upload__img-slot">
|
||||
Loading...
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<div class="sc-upload__img-actions" v-if="!disabled">
|
||||
<div class="x-upload__img-actions" v-if="!disabled">
|
||||
<span class="del" @click="handleRemove()"><el-icon><el-icon-delete /></el-icon></span>
|
||||
</div>
|
||||
</div>
|
||||
@ -43,7 +43,7 @@
|
||||
</slot>
|
||||
</el-upload>
|
||||
<el-dialog title="剪裁" draggable v-model="cropperDialogVisible" :width="580" @closed="cropperClosed" destroy-on-close>
|
||||
<sc-cropper :src="cropperFile.tempCropperFile" :compress="compress" :aspectRatio="aspectRatio" ref="cropper"></sc-cropper>
|
||||
<x-cropper :src="cropperFile.tempCropperFile" :compress="compress" :aspectRatio="aspectRatio" ref="cropper"></x-cropper>
|
||||
<template #footer>
|
||||
<el-button @click="cropperDialogVisible=false" >取 消</el-button>
|
||||
<el-button type="primary" @click="cropperSave">确 定</el-button>
|
||||
@ -55,7 +55,7 @@
|
||||
<script>
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import { genFileId } from 'element-plus'
|
||||
const scCropper = defineAsyncComponent(() => import('@/components/scCropper'))
|
||||
const xCropper = defineAsyncComponent(() => import('@/components/xCropper'))
|
||||
import config from "@/config/upload"
|
||||
|
||||
export default {
|
||||
@ -82,7 +82,7 @@
|
||||
aspectRatio: {type: Number, default: NaN}
|
||||
},
|
||||
components: {
|
||||
scCropper
|
||||
xCropper
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -260,31 +260,31 @@
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-form-item.is-error .sc-upload .el-upload--picture-card {border-color: var(--el-color-danger);}
|
||||
.sc-upload .el-upload--picture-card {border-radius: 0;}
|
||||
.el-form-item.is-error .x-upload .el-upload--picture-card {border-color: var(--el-color-danger);}
|
||||
.x-upload .el-upload--picture-card {border-radius: 0;}
|
||||
|
||||
.sc-upload .uploader,.sc-upload:deep(.el-upload) {width: 100%;height: 100%;}
|
||||
.x-upload .uploader,.x-upload:deep(.el-upload) {width: 100%;height: 100%;}
|
||||
|
||||
.sc-upload__img {width: 100%;height: 100%;position: relative;}
|
||||
.sc-upload__img .image {width: 100%;height: 100%;}
|
||||
.sc-upload__img-actions {position: absolute;top:0;right: 0;display: none;}
|
||||
.sc-upload__img-actions span {display: flex;justify-content: center;align-items: center;width: 25px;height:25px;cursor: pointer;color: #fff;}
|
||||
.sc-upload__img-actions span i {font-size: 12px;}
|
||||
.sc-upload__img-actions .del {background: #F56C6C;}
|
||||
.sc-upload__img:hover .sc-upload__img-actions {display: block;}
|
||||
.sc-upload__img-slot {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;font-size: 12px;background-color: var(--el-fill-color-lighter);}
|
||||
.x-upload__img {width: 100%;height: 100%;position: relative;}
|
||||
.x-upload__img .image {width: 100%;height: 100%;}
|
||||
.x-upload__img-actions {position: absolute;top:0;right: 0;display: none;}
|
||||
.x-upload__img-actions span {display: flex;justify-content: center;align-items: center;width: 25px;height:25px;cursor: pointer;color: #fff;}
|
||||
.x-upload__img-actions span i {font-size: 12px;}
|
||||
.x-upload__img-actions .del {background: #F56C6C;}
|
||||
.x-upload__img:hover .x-upload__img-actions {display: block;}
|
||||
.x-upload__img-slot {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;font-size: 12px;background-color: var(--el-fill-color-lighter);}
|
||||
|
||||
.sc-upload__uploading {width: 100%;height: 100%;position: relative;}
|
||||
.sc-upload__progress {position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background-color: var(--el-overlay-color-lighter);z-index: 1;padding:10px;}
|
||||
.sc-upload__progress .el-progress {width: 100%;}
|
||||
.sc-upload__uploading .image {width: 100%;height: 100%;}
|
||||
.x-upload__uploading {width: 100%;height: 100%;position: relative;}
|
||||
.x-upload__progress {position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background-color: var(--el-overlay-color-lighter);z-index: 1;padding:10px;}
|
||||
.x-upload__progress .el-progress {width: 100%;}
|
||||
.x-upload__uploading .image {width: 100%;height: 100%;}
|
||||
|
||||
.sc-upload .file-empty {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;}
|
||||
.sc-upload .file-empty i {font-size: 28px;}
|
||||
.sc-upload .file-empty h4 {font-size: 12px;font-weight: normal;color: #8c939d;margin-top: 8px;}
|
||||
.x-upload .file-empty {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;}
|
||||
.x-upload .file-empty i {font-size: 28px;}
|
||||
.x-upload .file-empty h4 {font-size: 12px;font-weight: normal;color: #8c939d;margin-top: 8px;}
|
||||
|
||||
.sc-upload.sc-upload-round {border-radius: 50%;overflow: hidden;}
|
||||
.sc-upload.sc-upload-round .el-upload--picture-card {border-radius: 50%;}
|
||||
.sc-upload.sc-upload-round .sc-upload__img-actions {top: auto;left: 0;right: 0;bottom: 0;}
|
||||
.sc-upload.sc-upload-round .sc-upload__img-actions span {width: 100%;}
|
||||
.x-upload.x-upload-round {border-radius: 50%;overflow: hidden;}
|
||||
.x-upload.x-upload-round .el-upload--picture-card {border-radius: 50%;}
|
||||
.x-upload.x-upload-round .x-upload__img-actions {top: auto;left: 0;right: 0;bottom: 0;}
|
||||
.x-upload.x-upload-round .x-upload__img-actions span {width: 100%;}
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="sc-upload-multiple">
|
||||
<div class="x-upload-multiple">
|
||||
<el-upload ref="uploader" list-type="picture-card"
|
||||
:auto-upload="autoUpload"
|
||||
:disabled="disabled"
|
||||
@ -25,18 +25,18 @@
|
||||
<div v-if="tip" class="el-upload__tip">{{tip}}</div>
|
||||
</template>
|
||||
<template #file="{ file }">
|
||||
<div class="sc-upload-list-item">
|
||||
<div class="x-upload-list-item">
|
||||
<el-image class="el-upload-list__item-thumbnail" :src="file.url" fit="cover" :preview-src-list="preview" :initial-index="preview.findIndex(n=>n==file.url)" hide-on-click-modal append-to-body :z-index="9999">
|
||||
<template #placeholder>
|
||||
<div class="sc-upload-multiple-image-slot">
|
||||
<div class="x-upload-multiple-image-slot">
|
||||
Loading...
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<div v-if="!disabled && file.status=='success'" class="sc-upload__item-actions">
|
||||
<div v-if="!disabled && file.status=='success'" class="x-upload__item-actions">
|
||||
<span class="del" @click="handleRemove(file)"><el-icon><el-icon-delete /></el-icon></span>
|
||||
</div>
|
||||
<div v-if="file.status=='ready' || file.status=='uploading'" class="sc-upload__item-progress">
|
||||
<div v-if="file.status=='ready' || file.status=='uploading'" class="x-upload__item-progress">
|
||||
<el-progress :percentage="file.percentage" :text-inside="true" :stroke-width="16"/>
|
||||
</div>
|
||||
</div>
|
||||
@ -229,18 +229,18 @@
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-form-item.is-error .sc-upload-multiple:deep(.el-upload--picture-card) {border-color: var(--el-color-danger);}
|
||||
.el-form-item.is-error .x-upload-multiple:deep(.el-upload--picture-card) {border-color: var(--el-color-danger);}
|
||||
:deep(.el-upload-list__item) {transition:none;border-radius: 0;}
|
||||
.sc-upload-multiple:deep(.el-upload-list__item.el-list-leave-active) {position: static!important;}
|
||||
.sc-upload-multiple:deep(.el-upload--picture-card) {border-radius: 0;}
|
||||
.sc-upload-list-item {width: 100%;height: 100%;position: relative;}
|
||||
.sc-upload-multiple .el-image {display: block;}
|
||||
.sc-upload-multiple .el-image:deep(img) {-webkit-user-drag: none;}
|
||||
.sc-upload-multiple-image-slot {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;font-size: 12px;}
|
||||
.sc-upload-multiple .el-upload-list__item:hover .sc-upload__item-actions{display: block;}
|
||||
.sc-upload__item-actions {position: absolute;top:0;right: 0;display: none;}
|
||||
.sc-upload__item-actions span {display: flex;justify-content: center;align-items: center;;width: 25px;height:25px;cursor: pointer;color: #fff;}
|
||||
.sc-upload__item-actions span i {font-size: 12px;}
|
||||
.sc-upload__item-actions .del {background: #F56C6C;}
|
||||
.sc-upload__item-progress {position: absolute;width: 100%;height: 100%;top: 0;left: 0;background-color: var(--el-overlay-color-lighter);}
|
||||
.x-upload-multiple:deep(.el-upload-list__item.el-list-leave-active) {position: static!important;}
|
||||
.x-upload-multiple:deep(.el-upload--picture-card) {border-radius: 0;}
|
||||
.x-upload-list-item {width: 100%;height: 100%;position: relative;}
|
||||
.x-upload-multiple .el-image {display: block;}
|
||||
.x-upload-multiple .el-image:deep(img) {-webkit-user-drag: none;}
|
||||
.x-upload-multiple-image-slot {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;font-size: 12px;}
|
||||
.x-upload-multiple .el-upload-list__item:hover .x-upload__item-actions{display: block;}
|
||||
.x-upload__item-actions {position: absolute;top:0;right: 0;display: none;}
|
||||
.x-upload__item-actions span {display: flex;justify-content: center;align-items: center;;width: 25px;height:25px;cursor: pointer;color: #fff;}
|
||||
.x-upload__item-actions span i {font-size: 12px;}
|
||||
.x-upload__item-actions .del {background: #F56C6C;}
|
||||
.x-upload__item-progress {position: absolute;width: 100%;height: 100%;top: 0;left: 0;background-color: var(--el-overlay-color-lighter);}
|
||||
</style>
|
||||
@ -5,6 +5,9 @@
|
||||
<el-input v-model="user.username" disabled></el-input>
|
||||
<div class="el-form-item-msg">账号信息用于登录，系统不允许修改</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="头像">
|
||||
<x-upload v-model="user.avatar" icon="el-icon-avatar" :cropper="true" :compress="1" :aspectRatio="1/1"></x-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="user.nickname"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<el-card shadow="never" header="近7天操作记录">
|
||||
<scTable ref="table" :data="data" height="auto" paginationLayout="total, prev, pager, next" hideDo>
|
||||
<sc-table-column label="序号" type="index"></sc-table-column>
|
||||
<sc-table-column label="业务名称" prop="title" min-width="240"></sc-table-column>
|
||||
<sc-table-column label="IP" prop="ip" width="150"></sc-table-column>
|
||||
<sc-table-column label="结果" prop="code" width="150">
|
||||
<xTable ref="table" :data="data" height="auto" paginationLayout="total, prev, pager, next" hideDo>
|
||||
<x-table-column label="序号" type="index"></x-table-column>
|
||||
<x-table-column label="业务名称" prop="title" min-width="240"></x-table-column>
|
||||
<x-table-column label="IP" prop="ip" width="150"></x-table-column>
|
||||
<x-table-column label="结果" prop="code" width="150">
|
||||
<el-tag type="success">成功</el-tag>
|
||||
</sc-table-column>
|
||||
<sc-table-column label="操作时间" prop="time" width="150"></sc-table-column>
|
||||
</x-table-column>
|
||||
<x-table-column label="操作时间" prop="time" width="150"></x-table-column>
|
||||
|
||||
</scTable>
|
||||
</xTable>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
|
||||
@ -4,22 +4,22 @@
|
||||
<el-row :gutter="15" style="margin-top: 20px;">
|
||||
<el-col :lg="6">
|
||||
<el-card shadow="never">
|
||||
<sc-statistic title="文档" value="7.41" suffix="GB" groupSeparator></sc-statistic>
|
||||
<x-statistic title="文档" value="7.41" suffix="GB" groupSeparator></x-statistic>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="6">
|
||||
<el-card shadow="never">
|
||||
<sc-statistic title="图片" value="12.90" suffix="GB" groupSeparator></sc-statistic>
|
||||
<x-statistic title="图片" value="12.90" suffix="GB" groupSeparator></x-statistic>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="6">
|
||||
<el-card shadow="never">
|
||||
<sc-statistic title="视音频" value="68.79" suffix="MB" groupSeparator></sc-statistic>
|
||||
<x-statistic title="视音频" value="68.79" suffix="MB" groupSeparator></x-statistic>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="6">
|
||||
<el-card shadow="never">
|
||||
<sc-statistic title="其他" value="17.58" suffix="GB" groupSeparator></sc-statistic>
|
||||
<x-statistic title="其他" value="17.58" suffix="GB" groupSeparator></x-statistic>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -27,11 +27,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scStatistic from '@/components/scStatistic';
|
||||
import xStatistic from '@/components/xStatistic';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
scStatistic
|
||||
xStatistic
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -7,6 +7,13 @@
|
||||
<el-avatar :size="70" :src="user.avatar"></el-avatar>
|
||||
<h2>{{ user.nickname || user.username }}</h2>
|
||||
<p><el-tag effect="dark" round size="large" disable-transitions>{{ user.role }}</el-tag></p>
|
||||
|
||||
<p>
|
||||
<el-button-group>
|
||||
<el-button type="danger" size="small" style="padding:5px" :icon="Edit">发送消息</el-button>
|
||||
<el-button type="warning" size="small" style="padding:5px" :icon="Share">行为轨迹</el-button>
|
||||
</el-button-group>
|
||||
</p>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import API from "@/api";
|
||||
// import API from "@/api";
|
||||
|
||||
//文件选择器配置
|
||||
|
||||
export default {
|
||||
apiObj: API.common.upload,
|
||||
menuApiObj: API.common.file.menu,
|
||||
listApiObj: API.common.file.list,
|
||||
// apiObj: API.common.upload,
|
||||
// menuApiObj: API.common.file.menu,
|
||||
// listApiObj: API.common.file.list,
|
||||
successCode: 200,
|
||||
maxSize: 30,
|
||||
max: 99,
|
||||
@ -18,8 +18,8 @@ export default {
|
||||
},
|
||||
listParseData: function (res) {
|
||||
return {
|
||||
rows: res.data.rows,
|
||||
total: res.data.total,
|
||||
rows: res.data.data,
|
||||
total: res.data.count,
|
||||
msg: res.message,
|
||||
code: res.code
|
||||
}
|
||||
|
||||
@ -48,7 +48,7 @@ export default {
|
||||
},
|
||||
/**
|
||||
* 常用保存处理 返回resolve后继续操作
|
||||
* @name scFilterBar组件的props->filterName
|
||||
* @name xFilterBar组件的props->filterName
|
||||
* @obj 过滤项整理好的对象
|
||||
*/
|
||||
saveMy: function (name, obj) {
|
||||
@ -61,7 +61,7 @@ export default {
|
||||
},
|
||||
/**
|
||||
* 常用删除处理 返回resolve后继续操作
|
||||
* @name scFilterBar组件的props->filterName
|
||||
* @name xFilterBar组件的props->filterName
|
||||
*/
|
||||
delMy: function (name) {
|
||||
return new Promise((resolve) => {
|
||||
|
||||
@ -23,7 +23,7 @@ export default {
|
||||
},
|
||||
/**
|
||||
* 自定义列保存处理
|
||||
* @tablename scTable组件的props->tablename
|
||||
* @tablename xTable组件的props->tablename
|
||||
* @column 用户配置好的列
|
||||
*/
|
||||
columnSettingSave: function(tablename, column) {
|
||||
@ -37,7 +37,7 @@ export default {
|
||||
},
|
||||
/**
|
||||
* 重置自定义列
|
||||
* @tablename scTable组件的props->tablename
|
||||
* @tablename xTable组件的props->tablename
|
||||
* @column 组件接受到的props->column
|
||||
*/
|
||||
columnSettingReset: function(tablename, column) {
|
||||
|
||||
@ -69,12 +69,12 @@
|
||||
.el-table .el-table__body-wrapper {background: #f6f8f9;}
|
||||
.el-col .el-card {margin-bottom: 15px;}
|
||||
.el-main {flex-basis: 100%;}
|
||||
.el-main > .scTable .el-table--border::before {display: none;}
|
||||
.el-main > .scTable .el-table--border::after {display: none;}
|
||||
.el-main > .scTable .el-table--border .el-table__inner-wrapper::after {display: none;}
|
||||
.el-main > .scTable .el-table__border-left-patch {display: none;}
|
||||
.el-main > .scTable .el-table--border .el-table__inner-wrapper tr:first-child td:first-child {border-left: 0;}
|
||||
.el-main > .scTable .el-table--border .el-table__inner-wrapper tr:first-child th:first-child {border-left: 0;}
|
||||
.el-main > .xTable .el-table--border::before {display: none;}
|
||||
.el-main > .xTable .el-table--border::after {display: none;}
|
||||
.el-main > .xTable .el-table--border .el-table__inner-wrapper::after {display: none;}
|
||||
.el-main > .xTable .el-table__border-left-patch {display: none;}
|
||||
.el-main > .xTable .el-table--border .el-table__inner-wrapper tr:first-child td:first-child {border-left: 0;}
|
||||
.el-main > .xTable .el-table--border .el-table__inner-wrapper tr:first-child th:first-child {border-left: 0;}
|
||||
.el-table.el-table--large {font-size: 14px;}
|
||||
.el-table.el-table--small {font-size: 12px;}
|
||||
.el-table {font-size: 12px;}
|
||||
|
||||
@ -15,11 +15,11 @@
|
||||
>.el-container {display: block;height:auto;}
|
||||
>.el-container > .el-aside {width: 100%!important;border: 0}
|
||||
}
|
||||
.scTable {
|
||||
.xTable {
|
||||
.el-table,
|
||||
.el-table__body-wrapper {display: block!important;height:auto!important;}
|
||||
.el-scrollbar__wrap {height:auto!important;}
|
||||
.scTable-page {padding: 0 5px!important;}
|
||||
.xTable-page {padding: 0 5px!important;}
|
||||
.el-pagination__total,
|
||||
.el-pagination__jump,
|
||||
.el-pagination__sizes {display: none!important;}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<el-drawer title="图片组(支持拖拽排序)" :size="670" v-model="visible" :close-on-press-escape="false" :close-on-click-modal="false" destroy-on-close @closed="$emit('closed')">
|
||||
<el-container>
|
||||
<el-main style="padding:0 20px 20px 20px">
|
||||
<sc-upload-multiple v-model="data.images" draggable :width="120" :height="90" :limit="20" tip="最多上传20个文件,单个文件不要超过10M,请上传图像格式文件"></sc-upload-multiple>
|
||||
<x-upload-multiple v-model="data.images" draggable :width="120" :height="90" :limit="20" tip="最多上传20个文件,单个文件不要超过10M,请上传图像格式文件"></x-upload-multiple>
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<el-button type="primary" @click="submit">提交</el-button>
|
||||
|
||||
@ -20,13 +20,13 @@
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" :hideSetting="true" remoteSort remoteFilter stripe>
|
||||
<xTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" :hideSetting="true" remoteSort remoteFilter stripe>
|
||||
<el-table-column type="selection" width="30"></el-table-column>
|
||||
<el-table-column label="ID" prop="id" width="50"></el-table-column>
|
||||
<el-table-column label="" prop="status" width="38">
|
||||
<template #default="scope">
|
||||
<sc-status-indicator v-if="scope.row.status==1" pulse type="success"></sc-status-indicator>
|
||||
<sc-status-indicator v-if="scope.row.status==0" pulse type="info"></sc-status-indicator>
|
||||
<x-status-indicator v-if="scope.row.status==1" pulse type="success"></x-status-indicator>
|
||||
<x-status-indicator v-if="scope.row.status==0" pulse type="info"></x-status-indicator>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="公寓名称" prop="title" minWidth="300">
|
||||
@ -76,7 +76,7 @@
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</xTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<el-drawer :size="800" @closed="$emit('closed', data)" :close-on-press-escape="false" :close-on-click-modal="false" destroy-on-close title="直播列表" v-model="visible">
|
||||
<el-container v-loading="loading">
|
||||
<el-main style="padding:0 6px 6px 6px">
|
||||
<sc-form-table :addtemplate="filtersAddTemplate" :hideAdd="true" class="lives" drag-sort="" placeholder="暂无数据" ref="livestable" v-model="data.lives">
|
||||
<x-form-table :addtemplate="filtersAddTemplate" :hideAdd="true" class="lives" drag-sort="" placeholder="暂无数据" ref="livestable" v-model="data.lives">
|
||||
<el-table-column label="视频ID" prop="text" width="100">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="视频ID" v-model="scope.row.videoid">
|
||||
@ -19,15 +19,15 @@
|
||||
<template #default="scope">
|
||||
<el-input class="input-with-select" placeholder="视频图片" v-model="scope.row.imageid">
|
||||
<template v-slot:append="">
|
||||
<sc-upload :height="30" :multiple="false" :on-success="function(res){ scope.row.imageid = res.aid; scope.row.imageurl = res.url }" :showfilelist="0" :width="30" v-model="scope.row.imageurl">
|
||||
<x-upload :height="30" :multiple="false" :on-success="function(res){ scope.row.imageid = res.aid; scope.row.imageurl = res.url }" :showfilelist="0" :width="30" v-model="scope.row.imageurl">
|
||||
<el-button icon="el-icon-upload" type="danger">
|
||||
</el-button>
|
||||
</sc-upload>
|
||||
</x-upload>
|
||||
</template>
|
||||
</el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</sc-form-table>
|
||||
</x-form-table>
|
||||
<div style="padding:10px 0px 0 0px">
|
||||
<el-upload :action="fileConfig.api" :file-list="fileList" :on-success="pushRow" name="files">
|
||||
<slot>
|
||||
|
||||
@ -16,9 +16,9 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<sc-title title="房间类型"></sc-title>
|
||||
<x-title title="房间类型"></x-title>
|
||||
|
||||
<sc-form-table v-model="form.room" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
|
||||
<x-form-table v-model="form.room" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
|
||||
<el-table-column prop="name" label="名称">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.name" placeholder="请输入名称"></el-input>
|
||||
@ -79,7 +79,7 @@
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</sc-form-table>
|
||||
</x-form-table>
|
||||
|
||||
</el-form>
|
||||
</el-main>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<el-drawer :title="titleMap[mode]" v-model="visible" :size="1000" :close-on-press-escape="false" :close-on-click-modal="false" destroy-on-close @closed="$emit('closed')">
|
||||
<el-container v-loading="loading">
|
||||
<el-main style="padding:0 20px 20px 20px">
|
||||
<sc-form ref="formref" :config="config" v-model="info" :loading="loading"> </sc-form>
|
||||
<x-form ref="formref" :config="config" v-model="info" :loading="loading"> </x-form>
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<el-drawer :size="800" @closed="$emit('closed', data)" :close-on-press-escape="false" :close-on-click-modal="false" destroy-on-close title="视频组" v-model="visible">
|
||||
<el-container v-loading="loading">
|
||||
<el-main style="padding:0 6px 6px 6px">
|
||||
<sc-form-table :addtemplate="filtersAddTemplate" :hideAdd="true" class="videos" drag-sort="" placeholder="暂无数据" ref="videostable" v-model="data.videos">
|
||||
<x-form-table :addtemplate="filtersAddTemplate" :hideAdd="true" class="videos" drag-sort="" placeholder="暂无数据" ref="videostable" v-model="data.videos">
|
||||
<el-table-column label="视频ID" prop="text" width="100">
|
||||
<template #default="scope">
|
||||
<el-input placeholder="视频ID" v-model="scope.row.videoid">
|
||||
@ -19,15 +19,15 @@
|
||||
<template #default="scope">
|
||||
<el-input class="input-with-select" placeholder="视频图片" v-model="scope.row.imageid">
|
||||
<template v-slot:append="">
|
||||
<sc-upload :height="30" :multiple="false" :on-success="function(res){ scope.row.imageid = res.aid; scope.row.imageurl = res.url }" :showfilelist="0" :width="30" v-model="scope.row.imageurl">
|
||||
<x-upload :height="30" :multiple="false" :on-success="function(res){ scope.row.imageid = res.aid; scope.row.imageurl = res.url }" :showfilelist="0" :width="30" v-model="scope.row.imageurl">
|
||||
<el-button icon="el-icon-upload" type="danger">
|
||||
</el-button>
|
||||
</sc-upload>
|
||||
</x-upload>
|
||||
</template>
|
||||
</el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</sc-form-table>
|
||||
</x-form-table>
|
||||
<div style="padding:10px 0px 0 0px">
|
||||
<el-upload :action="fileConfig.api" :file-list="fileList" :on-success="pushRow" name="files">
|
||||
<slot>
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<el-card shadow="hover" header="实时收入" v-loading="loading">
|
||||
<scEcharts ref="c1" height="300px" :option="option"></scEcharts>
|
||||
<xEcharts ref="c1" height="300px" :option="option"></xEcharts>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scEcharts from '@/components/scEcharts';
|
||||
import xEcharts from '@/components/xEcharts';
|
||||
|
||||
export default {
|
||||
title: "实时收入",
|
||||
icon: "el-icon-data-line",
|
||||
description: "Echarts组件演示",
|
||||
components: {
|
||||
scEcharts
|
||||
xEcharts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
|
||||
<div class="number-data">
|
||||
<div class="item" v-for="(s, index) in briefList" :key="index">
|
||||
<sc-statistic :title="s.label" :value="s.num" :description="s.status" :tips="s.rate" groupSeparator>
|
||||
<sc-trend v-model="s.rate" v-if="s.rate"></sc-trend>
|
||||
</sc-statistic>
|
||||
<x-statistic :title="s.label" :value="s.num" :description="s.status" :tips="s.rate" groupSeparator>
|
||||
<x-trend v-model="s.rate" v-if="s.rate"></x-trend>
|
||||
</x-statistic>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import scStatistic from '@/components/scStatistic';
|
||||
import xStatistic from '@/components/xStatistic';
|
||||
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
icon: "el-icon-data-line",
|
||||
description: "实时统计",
|
||||
components: {
|
||||
scStatistic
|
||||
xStatistic
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe>
|
||||
<xTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="应用ID" prop="appId" width="150"></el-table-column>
|
||||
<el-table-column label="应用名称" prop="appName" width="250"></el-table-column>
|
||||
@ -30,7 +30,7 @@
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</xTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-main style="padding:0 20px;">
|
||||
<scTable ref="table" :data="data" :api="api" stripe>
|
||||
<xTable ref="table" :data="data" :api="api" stripe>
|
||||
<el-table-column label="ID" prop="id" width="80"></el-table-column>
|
||||
<el-table-column label="执行时间" prop="createtime" width="180"></el-table-column>
|
||||
<el-table-column label="耗时" prop="consumingtime" width="100"></el-table-column>
|
||||
@ -16,7 +16,7 @@
|
||||
<el-button size="small" @click="show(scope.row)" type="text">日志</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</xTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
<el-input v-model="form.content" placeholder="计划任务执行内容" clearable type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="定时规则" prop="schedule">
|
||||
<sc-cron v-model="form.schedule" placeholder="请输入Cron定时规则" clearable :shortcuts="shortcuts"></sc-cron>
|
||||
<x-cron v-model="form.schedule" placeholder="请输入Cron定时规则" clearable :shortcuts="shortcuts"></x-cron>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
@ -31,11 +31,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scCron from '@/components/scCron';
|
||||
import xCron from '@/components/xCron';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
scCron
|
||||
xCron
|
||||
},
|
||||
emits: ['success', 'closed'],
|
||||
data() {
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" hidePagination>
|
||||
<xTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" hidePagination>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="部门名称" prop="label" width="250"></el-table-column>
|
||||
<el-table-column label="排序" prop="sort" width="150"></el-table-column>
|
||||
@ -39,7 +39,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</scTable>
|
||||
</xTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="listApi" row-key="id" :params="listApiParams" @selection-change="selectionChange" stripe :paginationLayout="'prev, pager, next'">
|
||||
<xTable ref="table" :apiObj="listApi" row-key="id" :params="listApiParams" @selection-change="selectionChange" stripe :paginationLayout="'prev, pager, next'">
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="" width="60">
|
||||
<template #default>
|
||||
@ -60,7 +60,7 @@
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</xTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
@ -16,10 +16,10 @@
|
||||
</div>
|
||||
</el-header>
|
||||
<el-header style="height:150px;">
|
||||
<scEcharts height="100%" :option="logsChartOption"></scEcharts>
|
||||
<xEcharts height="100%" :option="logsChartOption"></xEcharts>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :data="data" stripe highlightCurrentRow @row-click="rowClick">
|
||||
<xTable ref="table" :data="data" stripe highlightCurrentRow @row-click="rowClick">
|
||||
<el-table-column label="级别" prop="level" width="60">
|
||||
<template #default="scope">
|
||||
<el-icon v-if="scope.row.level=='error'" style="color: #F56C6C;"><el-icon-circle-close-filled /></el-icon>
|
||||
@ -34,7 +34,7 @@
|
||||
<el-table-column label="用户" prop="user" width="150"></el-table-column>
|
||||
<el-table-column label="客户端IP" prop="cip" width="150"></el-table-column>
|
||||
<el-table-column label="日志时间" prop="time" width="170"></el-table-column>
|
||||
</scTable>
|
||||
</xTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-main>
|
||||
@ -48,13 +48,13 @@
|
||||
|
||||
<script>
|
||||
import info from './info'
|
||||
import scEcharts from '@/components/scEcharts'
|
||||
import xEcharts from '@/components/xEcharts'
|
||||
|
||||
export default {
|
||||
name: 'log',
|
||||
components: {
|
||||
info,
|
||||
scEcharts
|
||||
xEcharts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -75,7 +75,7 @@
|
||||
</el-col>
|
||||
<el-col :lg="12" class="apilist">
|
||||
<h2>接口权限</h2>
|
||||
<sc-form-table v-model="form.apilist" :addTemplate="apilistAddTemplate" placeholder="暂无匹配接口权限">
|
||||
<x-form-table v-model="form.apilist" :addTemplate="apilistAddTemplate" placeholder="暂无匹配接口权限">
|
||||
<el-table-column prop="code" label="标识" width="150">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.code" placeholder="请输入内容"></el-input>
|
||||
@ -86,7 +86,7 @@
|
||||
<el-input v-model="scope.row.url" placeholder="请输入内容"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</sc-form-table>
|
||||
</x-form-table>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe>
|
||||
<xTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="#" type="index" width="50"></el-table-column>
|
||||
<el-table-column label="角色名称" prop="label" width="150"></el-table-column>
|
||||
@ -41,7 +41,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</scTable>
|
||||
</xTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
|
||||
@ -4,11 +4,11 @@
|
||||
<el-card shadow="never">
|
||||
<el-tabs tab-position="top" v-model="activename">
|
||||
<el-tab-pane v-for="item in settingList" :key="item.key" :label="item.name" :name="item.key">
|
||||
<sc-form ref="formref" :config="formList[item.key]" v-model="info" :loading="loading"> </sc-form>
|
||||
<x-form ref="formref" :config="formList[item.key]" v-model="info" :loading="loading"> </x-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="扩展配置">
|
||||
<el-alert title="扩展配置为系统业务所有的配置" type="warning" style="margin-bottom: 15px;"></el-alert>
|
||||
<sc-form-table v-model="extend" :hideAdd="true" drag-sort placeholder="暂无数据">
|
||||
<x-form-table v-model="extend" :hideAdd="true" drag-sort placeholder="暂无数据">
|
||||
<el-table-column label="KEY" prop="key" width="150">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.key" placeholder="请输入内容"></el-input>
|
||||
@ -24,7 +24,7 @@
|
||||
<el-input v-model="scope.row.title" placeholder="请输入内容"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</sc-form-table>
|
||||
</x-form-table>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="table_add" style="margin-top: 20px;"></el-button>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
@ -12,35 +12,35 @@
|
||||
<el-card shadow="never" v-if="statistic.length>0">
|
||||
<div class="number-data">
|
||||
<div class="item" v-for="(s, index) in statistic" :key="index">
|
||||
<sc-statistic :title="s.title" :value="s.value" :description="s.description" :tips="s.tips" groupSeparator>
|
||||
<sc-trend v-model="s.trend" v-if="s.trend"></sc-trend>
|
||||
</sc-statistic>
|
||||
<x-statistic :title="s.title" :value="s.value" :description="s.description" :tips="s.tips" groupSeparator>
|
||||
<x-trend v-model="s.trend" v-if="s.trend"></x-trend>
|
||||
</x-statistic>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart" v-if="chartList.length>0">
|
||||
<el-row>
|
||||
<el-col :span="c.span || 12" v-for="(c,index) in chartList" :key="index">
|
||||
<scEcharts :height=" c.height ? Number(c.height)?Number(c.height)+'px':c.height : '250px'" :option="c.option"></scEcharts>
|
||||
<xEcharts :height=" c.height ? Number(c.height)?Number(c.height)+'px':c.height : '250px'" :option="c.option"></xEcharts>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="never" v-if="table && table.column.length>0">
|
||||
<scTable ref="table" :data="table.data" :api="table.api" :tableColumn="table.column" :hideDo="table.hideDo || true" :hidePagination="table.hidePagination || true" show-summary :height="table.height || 'auto'">
|
||||
</scTable>
|
||||
<xTable ref="table" :data="table.data" :api="table.api" :tableColumn="table.column" :hideDo="table.hideDo || true" :hidePagination="table.hidePagination || true" show-summary :height="table.height || 'auto'">
|
||||
</xTable>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scEcharts from '@/components/scEcharts';
|
||||
import scStatistic from '@/components/scStatistic';
|
||||
import xEcharts from '@/components/xEcharts';
|
||||
import xStatistic from '@/components/xStatistic';
|
||||
export default {
|
||||
name: 'chartlist',
|
||||
components: {
|
||||
scEcharts,
|
||||
scStatistic,
|
||||
xEcharts,
|
||||
xStatistic,
|
||||
},
|
||||
props: {
|
||||
name: { type: String, default: "" },
|
||||
|
||||
@ -21,17 +21,17 @@
|
||||
</div>
|
||||
<div class="right-panel" v-if="filter.length>0">
|
||||
<el-button v-for="(s,index) in statList" :key="index" @click="openStat(s)" v-bind="s">{{ s.label }}</el-button>
|
||||
<scFilterBar v-if="filter.length>0" v-model="search" :filterName="$route.meta.tablename" :options="filter" @filterChange="filterChange">
|
||||
</scFilterBar>
|
||||
<xFilterBar v-if="filter.length>0" v-model="search" :filterName="$route.meta.tablename" :options="filter" @filterChange="filterChange">
|
||||
</xFilterBar>
|
||||
</div>
|
||||
</el-header>
|
||||
|
||||
<el-header style="height:120px;" v-if="typeof chartoption === 'object' && Object.keys(chartoption).length > 0">
|
||||
<scEcharts height="100%" :option="chartoption"></scEcharts>
|
||||
<xEcharts height="100%" :option="chartoption"></xEcharts>
|
||||
</el-header>
|
||||
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :tableColumn="column" :params="search" :columnSetting="columnSetting" :api="api" :row-key="key" @selection-change="selectionChange" :remoteSort="true" :remoteFilter="true" stripe>
|
||||
<xTable ref="table" :tableColumn="column" :params="search" :columnSetting="columnSetting" :api="api" :row-key="key" @selection-change="selectionChange" :remoteSort="true" :remoteFilter="true" stripe>
|
||||
<el-table-column v-if="isselection" type="selection" width="50"></el-table-column>
|
||||
<el-table-column :label="operation.label || '操作'" :width="operation.width || 124" :fixed="operation.fixed || 'right'" :align="operation.align || 'left'" v-if="operation.edit || operation.delete">
|
||||
<template #default="scope">
|
||||
@ -45,7 +45,7 @@
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</xTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
@ -55,14 +55,14 @@
|
||||
|
||||
<script>
|
||||
import xStat from './stat'
|
||||
import scFilterBar from '@/components/scFilterBar';
|
||||
import scEcharts from '@/components/scEcharts'
|
||||
import xFilterBar from '@/components/xFilterBar';
|
||||
import xEcharts from '@/components/xEcharts'
|
||||
export default {
|
||||
name: 'propertyAuth',
|
||||
components: {
|
||||
xStat,
|
||||
scEcharts,
|
||||
scFilterBar
|
||||
xEcharts,
|
||||
xFilterBar
|
||||
},
|
||||
props: {
|
||||
name: { type: String, default: "" },
|
||||
|
||||
@ -162,8 +162,8 @@
|
||||
|
||||
|
||||
|
||||
<sc-title title="统计标签"></sc-title>
|
||||
<sc-form-table v-model="form.stat" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
|
||||
<x-title title="统计标签"></x-title>
|
||||
<x-form-table v-model="form.stat" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
|
||||
<el-table-column prop="label" label="名称">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.label" placeholder="名称"></el-input>
|
||||
@ -174,10 +174,10 @@
|
||||
<el-input v-model="scope.row.value" :disabled="scope.row.component=='title'" placeholder="选中值"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</sc-form-table>
|
||||
</x-form-table>
|
||||
|
||||
<sc-title title="页头tabs"></sc-title>
|
||||
<sc-form-table v-model="form.tabs" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
|
||||
<x-title title="页头tabs"></x-title>
|
||||
<x-form-table v-model="form.tabs" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
|
||||
<el-table-column prop="label" label="名称">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.label" placeholder="名称"></el-input>
|
||||
@ -188,10 +188,10 @@
|
||||
<el-input v-model="scope.row.value" :disabled="scope.row.component=='title'" placeholder="选中值"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</sc-form-table>
|
||||
</x-form-table>
|
||||
|
||||
<sc-title title="筛选条件"></sc-title>
|
||||
<sc-form-table v-model="form.filter" :addTemplate="addfilterTemplate" drag-sort placeholder="暂无数据">
|
||||
<x-title title="筛选条件"></x-title>
|
||||
<x-form-table v-model="form.filter" :addTemplate="addfilterTemplate" drag-sort placeholder="暂无数据">
|
||||
<el-table-column prop="label" label="名称">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.label" placeholder="名称"></el-input>
|
||||
@ -249,11 +249,11 @@
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</sc-form-table>
|
||||
</x-form-table>
|
||||
|
||||
|
||||
<sc-title title="Column表格"></sc-title>
|
||||
<sc-form-table v-model="form.column" :addTemplate="addcolumnTemplate" drag-sort placeholder="暂无数据">
|
||||
<x-title title="Column表格"></x-title>
|
||||
<x-form-table v-model="form.column" :addTemplate="addcolumnTemplate" drag-sort placeholder="暂无数据">
|
||||
<el-table-column prop="label" label="名称">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.label" placeholder="名称"></el-input>
|
||||
@ -328,7 +328,7 @@
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</sc-form-table>
|
||||
</x-form-table>
|
||||
</el-form>
|
||||
</el-main>
|
||||
<el-footer>
|
||||
|
||||
@ -12,13 +12,13 @@
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :api="api" row-key="id" @selection-change="selectionChange" :hideSetting="true" remoteSort remoteFilter stripe>
|
||||
<xTable ref="table" :api="api" row-key="id" @selection-change="selectionChange" :hideSetting="true" remoteSort remoteFilter stripe>
|
||||
<el-table-column type="selection" width="30"></el-table-column>
|
||||
<el-table-column label="ID" prop="id" width="50"></el-table-column>
|
||||
<el-table-column label="" prop="status" width="38">
|
||||
<template #default="scope">
|
||||
<sc-status-indicator v-if="scope.row.status==1" pulse type="success"></sc-status-indicator>
|
||||
<sc-status-indicator v-if="scope.row.status==0" pulse type="info"></sc-status-indicator>
|
||||
<x-status-indicator v-if="scope.row.status==1" pulse type="success"></x-status-indicator>
|
||||
<x-status-indicator v-if="scope.row.status==0" pulse type="info"></x-status-indicator>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="名称" prop="title" minWidth="100">
|
||||
@ -83,7 +83,7 @@
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</xTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" @selection-change="selectionChange" stripe remoteSort remoteFilter>
|
||||
<xTable ref="table" @selection-change="selectionChange" stripe remoteSort remoteFilter>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="UID" prop="uid" width="80" sortable='custom'></el-table-column>
|
||||
<el-table-column label="头像" width="80" column-key="filterAvatar" :filters="[{text: '已上传', value: '1'}, {text: '未上传', value: '0'}]">
|
||||
@ -59,7 +59,7 @@
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</xTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
@ -68,12 +68,12 @@
|
||||
|
||||
<script>
|
||||
import saveDialog from './save'
|
||||
import XMenuItem from '@/components/XMenu/XMenuItem'
|
||||
import xMenuItem from '@/components/xMenu/item'
|
||||
|
||||
export default {
|
||||
name: 'user',
|
||||
components: {
|
||||
XMenuItem,
|
||||
xMenuItem,
|
||||
saveDialog
|
||||
},
|
||||
data() {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<x-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
|
||||
<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
|
||||
<el-form-item label="头像" prop="avatar">
|
||||
<sc-upload v-model="form.avatar" title="上传头像"></sc-upload>
|
||||
<x-upload v-model="form.avatar" title="上传头像"></x-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录账号" prop="userName">
|
||||
<el-input v-model="form.userName" placeholder="用于登录系统" clearable></el-input>
|
||||
|
||||
@ -83,16 +83,16 @@
|
||||
<div class="chart">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<scEcharts height="250px" :option="pie"></scEcharts>
|
||||
<xEcharts height="250px" :option="pie"></xEcharts>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<scEcharts height="250px" :option="option"></scEcharts>
|
||||
<xEcharts height="250px" :option="option"></xEcharts>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="never">
|
||||
<scTable ref="table" :data="data" show-summary height="auto">
|
||||
<xTable ref="table" :data="data" show-summary height="auto">
|
||||
<el-table-column label="来源类型" prop="type"></el-table-column>
|
||||
<el-table-column label="网站基础指标" align="center">
|
||||
<el-table-column label="访客数(UV)" prop="uv" width="150"></el-table-column>
|
||||
@ -102,19 +102,19 @@
|
||||
<el-table-column label="跳出率" prop="out" width="150"></el-table-column>
|
||||
<el-table-column label="平均访问时长" prop="time" width="150"></el-table-column>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</xTable>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scEcharts from '@/components/scEcharts';
|
||||
import xEcharts from '@/components/xEcharts';
|
||||
|
||||
export default {
|
||||
name: 'chartlist',
|
||||
components: {
|
||||
scEcharts
|
||||
xEcharts
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
||||
@ -8,15 +8,15 @@
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="list.apiObj" row-key="id" @selection-change="selectionChange" stripe>
|
||||
<xTable ref="table" :apiObj="list.apiObj" row-key="id" @selection-change="selectionChange" stripe>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="姓名" prop="name" width="180"></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 label="状态" prop="boolean" width="60">
|
||||
<template #default="scope">
|
||||
<sc-status-indicator v-if="scope.row.boolean" type="success"></sc-status-indicator>
|
||||
<sc-status-indicator v-if="!scope.row.boolean" pulse type="danger"></sc-status-indicator>
|
||||
<x-status-indicator v-if="scope.row.boolean" type="success"></x-status-indicator>
|
||||
<x-status-indicator v-if="!scope.row.boolean" pulse type="danger"></x-status-indicator>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="评分" prop="num" width="150"></el-table-column>
|
||||
@ -32,7 +32,7 @@
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</xTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe highlightCurrentRow @row-click="rowClick">
|
||||
<xTable ref="table" :apiObj="list.apiObj" row-key="id" stripe highlightCurrentRow @row-click="rowClick">
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="ID" prop="id" width="200"></el-table-column>
|
||||
<el-table-column label="评分" prop="num" width="80"></el-table-column>
|
||||
@ -19,7 +19,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建日期" prop="datetime" width="150" sortable></el-table-column>
|
||||
</scTable>
|
||||
</xTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
@ -31,19 +31,19 @@
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="sontable" :apiObj="list.apiObj" row-key="id" stripe>
|
||||
<xTable ref="sontable" :apiObj="list.apiObj" row-key="id" stripe>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="姓名" prop="name" width="180"></el-table-column>
|
||||
<el-table-column label="状态" prop="type" width="60">
|
||||
<template #default="scope">
|
||||
<sc-status-indicator v-if="scope.row.type==0" type="success"></sc-status-indicator>
|
||||
<sc-status-indicator v-if="scope.row.type==1" pulse type="danger"></sc-status-indicator>
|
||||
<x-status-indicator v-if="scope.row.type==0" type="success"></x-status-indicator>
|
||||
<x-status-indicator v-if="scope.row.type==1" pulse type="danger"></x-status-indicator>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="邮箱" prop="email" width="250"></el-table-column>
|
||||
<el-table-column label="评分" prop="num" width="150"></el-table-column>
|
||||
<el-table-column label="注册时间" prop="datetime" width="150" sortable></el-table-column>
|
||||
</scTable>
|
||||
</xTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe>
|
||||
<xTable 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"></el-table-column>
|
||||
@ -41,7 +41,7 @@
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</xTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe>
|
||||
<xTable 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"></el-table-column>
|
||||
@ -40,7 +40,7 @@
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</xTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<el-button type="primary" text>管理秘钥</el-button>
|
||||
<el-button type="primary" text>黑名单</el-button>
|
||||
</div>
|
||||
<scTable ref="table" :data="data" height="auto" paginationLayout="total, prev, pager, next" hideDo>
|
||||
<xTable ref="table" :data="data" height="auto" paginationLayout="total, prev, pager, next" hideDo>
|
||||
<el-table-column label="主机名称" prop="name" min-width="240"></el-table-column>
|
||||
<el-table-column label="外网ip" prop="ip" width="200"></el-table-column>
|
||||
<el-table-column label="系统盘" prop="c" width="150"></el-table-column>
|
||||
@ -29,7 +29,7 @@
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</xTable>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<el-card shadow="never">
|
||||
<el-tabs tab-position="top" >
|
||||
<el-tab-pane label="列配置">
|
||||
<sc-form-table v-model="column" :addTemplate="addTemplate" placeholder="请添加列数据">
|
||||
<x-form-table v-model="column" :addTemplate="addTemplate" placeholder="请添加列数据">
|
||||
<el-table-column prop="label" label="显示名称" width="180">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.label" placeholder="请输入内容"></el-input>
|
||||
@ -30,7 +30,7 @@
|
||||
<el-checkbox v-model="scope.row.isSearch"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</sc-form-table>
|
||||
</x-form-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="基础配置">
|
||||
<el-row>
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import XMenuItem from '@/components/XMenu/XMenuItem'
|
||||
import xMenuItem from '@/components/xMenu/item'
|
||||
import xTable from '@/views/system/table'
|
||||
|
||||
|
||||
@ -38,7 +38,7 @@ export default {
|
||||
|
||||
components: {
|
||||
xTable,
|
||||
XMenuItem,
|
||||
xMenuItem,
|
||||
},
|
||||
|
||||
data() {
|
||||
@ -167,8 +167,8 @@ export default {
|
||||
this.requestNumCount()
|
||||
/** 控制table的高度 */
|
||||
window.onresize = () => {
|
||||
var offsetHei = document.documentElement.clientHeight
|
||||
this.$bus.emit('message-scroll', offsetHei - 300)
|
||||
// var offsetHei = document.documentElement.clientHeight
|
||||
// this.$bus.emit('message-scroll', offsetHei - 300)
|
||||
}
|
||||
},
|
||||
|
||||
@ -258,7 +258,7 @@ export default {
|
||||
}
|
||||
|
||||
.message-body-side {
|
||||
padding: 20px 0;
|
||||
padding: 0px 0;
|
||||
width: 180px;
|
||||
font-size: 14px;
|
||||
background-color: white;
|
||||
|
||||
@ -4,32 +4,32 @@
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never">
|
||||
<scEcharts height="300px" :option="option"></scEcharts>
|
||||
<xEcharts height="300px" :option="option"></xEcharts>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never">
|
||||
<scEcharts height="300px" :option="option2"></scEcharts>
|
||||
<xEcharts height="300px" :option="option2"></xEcharts>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never">
|
||||
<scEcharts height="300px" :option="option3"></scEcharts>
|
||||
<xEcharts height="300px" :option="option3"></xEcharts>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never">
|
||||
<scEcharts height="300px" :option="option4"></scEcharts>
|
||||
<xEcharts height="300px" :option="option4"></xEcharts>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never">
|
||||
<scEcharts height="300px" :option="option5"></scEcharts>
|
||||
<xEcharts height="300px" :option="option5"></xEcharts>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never">
|
||||
<scEcharts height="300px" :option="option6"></scEcharts>
|
||||
<xEcharts height="300px" :option="option6"></xEcharts>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -37,19 +37,19 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scEcharts from '@/components/scEcharts';
|
||||
import xEcharts from '@/components/xEcharts';
|
||||
|
||||
/**
|
||||
* 引入组件 @/components/scEcharts
|
||||
* 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
|
||||
* 引入组件 @/components/xEcharts
|
||||
* 组件内部会自动加载主题 @/components/xEcharts/echarts-theme-T.js
|
||||
* 支持props包括 height，width，option
|
||||
* 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
|
||||
* 组件export百度Echarts所有方法，使用方式: new xEcharts[fun]
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'chart',
|
||||
components: {
|
||||
scEcharts
|
||||
xEcharts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -4,12 +4,12 @@
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never" header="默认">
|
||||
<sc-cron v-model="v1" placeholder="请输入Cron定时规则" clearable></sc-cron>
|
||||
<x-cron v-model="v1" placeholder="请输入Cron定时规则" clearable></x-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>
|
||||
<x-cron v-model="v2" placeholder="请输入Cron定时规则" clearable :shortcuts="shortcuts"></x-cron>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -17,12 +17,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scCron from '@/components/scCron'
|
||||
import xCron from '@/components/xCron'
|
||||
|
||||
export default {
|
||||
name: 'cron',
|
||||
components: {
|
||||
scCron
|
||||
xCron
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -1,10 +1,5 @@
|
||||
<!--
|
||||
* @Descripttion: 图像剪裁组件演示文件
|
||||
* @version: 1.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年7月24日20:58:51
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
-->
|
||||
|
||||
<template>
|
||||
@ -12,7 +7,7 @@
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="14">
|
||||
<el-card shadow="never">
|
||||
<sc-cropper :src="cropperImg" :compress="compress" :aspectRatio="aspectRatio" ref="cropper"></sc-cropper>
|
||||
<x-cropper :src="cropperImg" :compress="compress" :aspectRatio="aspectRatio" ref="cropper"></x-cropper>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="参数和方法">
|
||||
<el-form label-width="100px">
|
||||
@ -45,7 +40,7 @@
|
||||
<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>
|
||||
<x-upload v-model="uploadImg" title="开启剪裁" :cropper="true" :compress="1" :aspectRatio="1/1"></x-upload>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -55,12 +50,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scCropper from '@/components/scCropper'
|
||||
import xCropper from '@/components/xCropper'
|
||||
|
||||
export default {
|
||||
name: 'cropper',
|
||||
components: {
|
||||
scCropper
|
||||
xCropper
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-card shadow="never" header="过滤器">
|
||||
<scFilterBar filterName="filterName" :options="options" @filterChange="change">
|
||||
<xFilterBar 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>
|
||||
</xFilterBar>
|
||||
</el-card>
|
||||
<el-alert title="SCUI 独创的过滤条Filterbar,可配置不同类型的过滤字段,以及异步获取数据,在@/config/filterBar.js中可以更改运算符以及其他配置,操作上方过滤条查看下方change事件的回调,在表格查询的场景下非常合适" type="success" style="margin:20px 0;"></el-alert>
|
||||
<el-card shadow="never" header="返回值">
|
||||
@ -17,12 +17,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scFilterBar from '@/components/scFilterBar';
|
||||
import xFilterBar from '@/components/xFilterBar';
|
||||
|
||||
export default {
|
||||
name: 'filterBar',
|
||||
components: {
|
||||
scFilterBar
|
||||
xFilterBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -17,10 +17,10 @@
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never" header="动态表单渲染器">
|
||||
<sc-form ref="formref" :config="config" v-model="form" :loading="loading">
|
||||
<x-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>
|
||||
</x-form>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="6">
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<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="暂无数据">
|
||||
<x-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>
|
||||
@ -36,7 +36,7 @@
|
||||
<el-switch v-model="scope.row.open"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</sc-form-table>
|
||||
</x-form-table>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm">保存</el-button>
|
||||
|
||||
@ -5,20 +5,20 @@
|
||||
<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>
|
||||
<x-status-indicator pulse type="primary"></x-status-indicator>
|
||||
<x-status-indicator pulse type="success"></x-status-indicator>
|
||||
<x-status-indicator pulse type="warning"></x-status-indicator>
|
||||
<x-status-indicator pulse type="danger"></x-status-indicator>
|
||||
<x-status-indicator type="info"></x-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>
|
||||
<x-trend v-model="trendValue" prefix="¥"></x-trend>
|
||||
<x-trend v-model="trendValue2"></x-trend>
|
||||
<x-trend v-model="trendValue3" suffix="%"></x-trend>
|
||||
</el-space>
|
||||
|
||||
<p style="margin-top: 15px;color: #999;">设置reverse可反转颜色。</p>
|
||||
@ -29,7 +29,7 @@
|
||||
<div class="up">
|
||||
<h2>持续更新中...</h2>
|
||||
<p>非常欢迎提交Issue/PR完善和补充更多好玩的原子组件</p>
|
||||
<p>原子组件库位置：@/components/scMini/*</p>
|
||||
<p>原子组件库位置：@/components/xMini/*</p>
|
||||
<el-button type="primary" text @click="goIssue">提交想法</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
@ -1,10 +1,5 @@
|
||||
<!--
|
||||
* @Descripttion: 统计数值组件演示
|
||||
* @version: 1.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年6月23日10:28:17
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
-->
|
||||
|
||||
<template>
|
||||
@ -13,21 +8,21 @@
|
||||
<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>
|
||||
<x-statistic title="Title" value="112893" description="Description" tips="Tips" groupSeparator></x-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>
|
||||
<x-statistic title="今日净利润" value="112893.00" prefix="¥" groupSeparator>
|
||||
<x-trend v-model="trendValue1"></x-trend>
|
||||
</x-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>
|
||||
<x-statistic title="留言" value="112893" suffix="条" groupSeparator>
|
||||
<x-trend v-model="trendValue2"></x-trend>
|
||||
</x-statistic>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -35,12 +30,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scStatistic from '@/components/scStatistic';
|
||||
import xStatistic from '@/components/xStatistic';
|
||||
|
||||
export default {
|
||||
name: 'statistic',
|
||||
components: {
|
||||
scStatistic
|
||||
xStatistic
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe>
|
||||
<xTable 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">
|
||||
@ -24,7 +24,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="注册时间" prop="datetime" width="150" sortable></el-table-column>
|
||||
</scTable>
|
||||
</xTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
@ -10,12 +10,12 @@
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" tableName="listCustomColumn" :apiObj="list.apiObj" :column="list.column" row-key="id" stripe>
|
||||
<xTable 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>
|
||||
</xTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe show-summary remoteSort remoteFilter remoteSummary>
|
||||
<xTable 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>
|
||||
@ -18,7 +18,7 @@
|
||||
<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>
|
||||
</xTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe>
|
||||
<xTable 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>
|
||||
@ -16,7 +16,7 @@
|
||||
</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>
|
||||
</xTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
@ -1,24 +1,19 @@
|
||||
<!--
|
||||
* @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">
|
||||
<x-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>
|
||||
</x-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">
|
||||
<x-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>
|
||||
@ -40,7 +35,7 @@
|
||||
<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>
|
||||
</x-table-select>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
@ -1,33 +1,33 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-card shadow="never" header="文件示例">
|
||||
<sc-upload-file v-model="fileurl" :limit="3" :data="{otherData:'demo'}" tip="最多上传3个文件,单个文件不要超过10M,请上传xlsx/docx格式文件">
|
||||
<x-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>
|
||||
</x-upload-file>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" header="文件示例(值为对象数组,适合保存原始文件名)">
|
||||
<sc-upload-file v-model="fileurlArr" :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传xlsx/docx格式文件">
|
||||
<x-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>
|
||||
</x-upload-file>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" header="图片卡片示例(已开启拖拽排序)">
|
||||
<sc-upload-multiple v-model="fileurl2" draggable :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传图像格式文件"></sc-upload-multiple>
|
||||
<x-upload-multiple v-model="fileurl2" draggable :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传图像格式文件"></x-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">
|
||||
<x-upload v-model="fileurl3"></x-upload>
|
||||
<x-upload v-model="fileurl4" title="自定义标题" icon="el-icon-picture"></x-upload>
|
||||
<x-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>
|
||||
</x-upload>
|
||||
<x-upload v-model="fileurl6" round icon="el-icon-avatar" title="开启圆形"></x-upload>
|
||||
<x-upload v-model="fileurl7" title="开启剪裁" :cropper="true" :compress="1" :aspectRatio="1/1"></x-upload>
|
||||
</el-space>
|
||||
</el-card>
|
||||
|
||||
@ -38,23 +38,23 @@
|
||||
<el-form-item label="身份证" required>
|
||||
<el-space wrap :size="8">
|
||||
<el-form-item prop="file1">
|
||||
<sc-upload v-model="form.file1" title="人像面"></sc-upload>
|
||||
<x-upload v-model="form.file1" title="人像面"></x-upload>
|
||||
</el-form-item>
|
||||
<el-form-item prop="file2">
|
||||
<sc-upload v-model="form.file2" title="国徽面"></sc-upload>
|
||||
<x-upload v-model="form.file2" title="国徽面"></x-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>
|
||||
<x-upload-multiple v-model="form.file3"></x-upload-multiple>
|
||||
</el-form-item>
|
||||
<el-form-item label="附件" prop="file4">
|
||||
<sc-upload-file v-model="form.file4" :limit="1" drag>
|
||||
<x-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>
|
||||
</x-upload-file>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期" prop="date">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="form.date"></el-date-picker>
|
||||
|
||||
56
src/x.js
56
src/x.js
@ -6,27 +6,27 @@ import {
|
||||
permission,
|
||||
rolePermission
|
||||
} from './utils/permission'
|
||||
import scTable from './components/scTable'
|
||||
import scTableColumn from './components/scTable/column.js'
|
||||
import scFilterBar from './components/scFilterBar'
|
||||
import scUpload from './components/scUpload'
|
||||
import scUploadMultiple from './components/scUpload/multiple'
|
||||
import scUploadFile from './components/scUpload/file'
|
||||
import scFormTable from './components/scFormTable'
|
||||
import scTableSelect from './components/scTableSelect'
|
||||
import scPageHeader from './components/scPageHeader'
|
||||
import scSelect from './components/scSelect'
|
||||
import xTable from './components/xTable'
|
||||
import xTableColumn from './components/xTable/column.js'
|
||||
import xTableSelect from './components/xTableSelect'
|
||||
import xUpload from './components/xUpload'
|
||||
import xUploadMultiple from './components/xUpload/multiple'
|
||||
import xUploadFile from './components/xUpload/file'
|
||||
import xDialog from './components/xDialog'
|
||||
import scForm from './components/scForm'
|
||||
import XItem from './components/scForm/item'
|
||||
import xItem from './components/xForm/item'
|
||||
import xUser from './components/xUser'
|
||||
import xAvatar from './components/xAvatar'
|
||||
import xUpdate from './components/xUpdate'
|
||||
import scTitle from './components/scTitle'
|
||||
import xTitle from './components/xTitle'
|
||||
import xForm from './components/xForm'
|
||||
import xFormTable from './components/xFormTable'
|
||||
import xFilterBar from './components/xFilterBar'
|
||||
import xStatusIndicator from './components/xMini/StatusIndicator'
|
||||
import xTrend from './components/xMini/Trend'
|
||||
import scPageHeader from './components/scPageHeader'
|
||||
import scSelect from './components/scSelect'
|
||||
import scWaterMark from './components/scWaterMark'
|
||||
import scQrCode from './components/scQrCode'
|
||||
import scStatusIndicator from './components/scMini/scStatusIndicator'
|
||||
import scTrend from './components/scMini/scTrend'
|
||||
import {
|
||||
Flexbox,
|
||||
FlexboxItem
|
||||
@ -52,27 +52,27 @@ export default {
|
||||
//注册全局组件
|
||||
app.component('flexbox', Flexbox)
|
||||
app.component('flexbox-item', FlexboxItem)
|
||||
app.component('XItem', XItem);
|
||||
app.component('xItem', xItem);
|
||||
app.component('xUser', xUser);
|
||||
app.component('xAvatar', xAvatar);
|
||||
app.component('xUpdate', xUpdate);
|
||||
app.component('scTable', scTable);
|
||||
app.component('scTableColumn', scTableColumn);
|
||||
app.component('scFilterBar', scFilterBar);
|
||||
app.component('scUpload', scUpload);
|
||||
app.component('scUploadMultiple', scUploadMultiple);
|
||||
app.component('scUploadFile', scUploadFile);
|
||||
app.component('scFormTable', scFormTable);
|
||||
app.component('scTableSelect', scTableSelect);
|
||||
app.component('xUpload', xUpload);
|
||||
app.component('xUploadMultiple', xUploadMultiple);
|
||||
app.component('xUploadFile', xUploadFile);
|
||||
app.component('xTable', xTable);
|
||||
app.component('xTableColumn', xTableColumn);
|
||||
app.component('xTableSelect', xTableSelect);
|
||||
app.component('xFilterBar', xFilterBar);
|
||||
app.component('xForm', xForm);
|
||||
app.component('xFormTable', xFormTable);
|
||||
app.component('scPageHeader', scPageHeader);
|
||||
app.component('scSelect', scSelect);
|
||||
app.component('xDialog', xDialog);
|
||||
app.component('scForm', scForm);
|
||||
app.component('scTitle', scTitle);
|
||||
app.component('xTitle', xTitle);
|
||||
app.component('scWaterMark', scWaterMark);
|
||||
app.component('scQrCode', scQrCode);
|
||||
app.component('scStatusIndicator', scStatusIndicator);
|
||||
app.component('scTrend', scTrend);
|
||||
app.component('xStatusIndicator', xStatusIndicator);
|
||||
app.component('xTrend', xTrend);
|
||||
//注册全局指令
|
||||
app.directive('auth', auth)
|
||||
app.directive('auths', auths)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user