no message
This commit is contained in:
parent
9d04ec7e22
commit
16cf8c1aef
@ -1,13 +0,0 @@
|
|||||||
请提交`Issue`时填写以下信息，以便我们更快更准确的定位和复现问题，谢谢。
|
|
||||||
|
|
||||||
### 1、SCUI版本号
|
|
||||||
|
|
||||||
### 2、运行浏览器品牌及版本号
|
|
||||||
|
|
||||||
### 3、问题的描述
|
|
||||||
|
|
||||||
### 4、重现步骤
|
|
||||||
|
|
||||||
### 5、期待的结果
|
|
||||||
|
|
||||||
### 6、最小化可复现问题的源码
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
请在提交PR前阅读以下说明，谢谢。
|
|
||||||
- 提交 PR 前请`rebase`，确保`commit`记录的整洁。
|
|
||||||
- 确保 PR 是提交到`develop`分支，而不是`master`分支。
|
|
||||||
- 在下方填写本次 PR 的目的。
|
|
||||||
|
|
||||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,6 +1,7 @@
|
|||||||
.DS_Store
|
.DS_Store
|
||||||
node_modules
|
node_modules
|
||||||
/dist
|
/dist
|
||||||
|
/backup
|
||||||
|
|
||||||
# local env files
|
# local env files
|
||||||
.env.local
|
.env.local
|
||||||
|
|||||||
@ -1,124 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<div class="left-panel">
|
|
||||||
<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
|
|
||||||
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<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>
|
|
||||||
<el-table-column label="状态" width="50">
|
|
||||||
<template #default>
|
|
||||||
<el-icon style="color: #67C23A;"><el-icon-circle-check-filled /></el-icon>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="秘钥" prop="secret" show-overflow-tooltip width="150"></el-table-column>
|
|
||||||
<el-table-column label="授权到期" prop="exp" width="150"></el-table-column>
|
|
||||||
<el-table-column label="操作" fixed="right" align="right" width="120">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button-group>
|
|
||||||
<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
|
|
||||||
<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
|
|
||||||
<template #reference>
|
|
||||||
<el-button text type="primary" size="small">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-popconfirm>
|
|
||||||
</el-button-group>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</xTable>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
|
|
||||||
<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import saveDialog from './save'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "client",
|
|
||||||
components: {
|
|
||||||
saveDialog
|
|
||||||
},
|
|
||||||
data(){
|
|
||||||
return {
|
|
||||||
dialog: {
|
|
||||||
save: false
|
|
||||||
},
|
|
||||||
// apiObj: this.$api.system.app.list,
|
|
||||||
selection: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//增加
|
|
||||||
add(){
|
|
||||||
this.dialog.save = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.saveDialog.open()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//编辑
|
|
||||||
table_edit(row){
|
|
||||||
this.dialog.save = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.saveDialog.open('edit').setData(row)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//删除
|
|
||||||
async table_del(row, index){
|
|
||||||
var reqData = {id: row.id}
|
|
||||||
var res = await this.$api.user.del.post(reqData);
|
|
||||||
if(res.code == 200){
|
|
||||||
//这里选择刷新整个表格 OR 插入/编辑现有表格数据
|
|
||||||
this.$refs.table.tableData.splice(index, 1);
|
|
||||||
this.$message.success("删除成功")
|
|
||||||
}else{
|
|
||||||
this.$alert(res.message, "提示", {type: 'error'})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//批量删除
|
|
||||||
async batch_del(){
|
|
||||||
this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
|
|
||||||
type: 'warning'
|
|
||||||
}).then(() => {
|
|
||||||
const loading = this.$loading();
|
|
||||||
this.selection.forEach(item => {
|
|
||||||
this.$refs.table.tableData.forEach((itemI, indexI) => {
|
|
||||||
if (item.id === itemI.id) {
|
|
||||||
this.$refs.table.tableData.splice(indexI, 1)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
loading.close();
|
|
||||||
this.$message.success("操作成功")
|
|
||||||
}).catch(() => {
|
|
||||||
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//表格选择后回调事件
|
|
||||||
selectionChange(selection){
|
|
||||||
this.selection = selection;
|
|
||||||
},
|
|
||||||
//本地更新数据
|
|
||||||
handleSuccess(data, mode){
|
|
||||||
if(mode=='add'){
|
|
||||||
data.id = new Date().getTime()
|
|
||||||
this.$refs.table.tableData.unshift(data)
|
|
||||||
}else if(mode=='edit'){
|
|
||||||
this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
|
|
||||||
Object.assign(item, data)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,109 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
|
|
||||||
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
|
|
||||||
<el-form-item label="应用标识" prop="appId">
|
|
||||||
<el-input v-model="form.appId" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="应用名称" prop="appName">
|
|
||||||
<el-input v-model="form.appName" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="秘钥" prop="secret">
|
|
||||||
<el-input v-model="form.secret" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="类型范围" prop="type">
|
|
||||||
<el-checkbox-group v-model="form.type">
|
|
||||||
<el-checkbox-button label="ALL"></el-checkbox-button>
|
|
||||||
<el-checkbox-button label="UPDATA"></el-checkbox-button>
|
|
||||||
<el-checkbox-button label="QUERY"></el-checkbox-button>
|
|
||||||
<el-checkbox-button label="INSERT"></el-checkbox-button>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="授权至" prop="exp">
|
|
||||||
<el-date-picker v-model="form.exp" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="visible=false" >取 消</el-button>
|
|
||||||
<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
emits: ['success', 'closed'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
mode: "add",
|
|
||||||
titleMap: {
|
|
||||||
add: '新增APP',
|
|
||||||
edit: '编辑APP'
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
id:"",
|
|
||||||
appId: "",
|
|
||||||
appName: "",
|
|
||||||
secret: "",
|
|
||||||
type: [],
|
|
||||||
exp: ""
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
appId:[
|
|
||||||
{required: true, message: '请输入应用标识'}
|
|
||||||
],
|
|
||||||
appName:[
|
|
||||||
{required: true, message: '请输入应用名称'}
|
|
||||||
],
|
|
||||||
secret:[
|
|
||||||
{required: true, message: '请输入秘钥'}
|
|
||||||
],
|
|
||||||
type:[
|
|
||||||
{required: true, message: '请选择类型范围', trigger: 'change'}
|
|
||||||
],
|
|
||||||
exp:[
|
|
||||||
{required: true, message: '请选择授权到期日期', trigger: 'change'}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
visible: false,
|
|
||||||
isSaveing: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//显示
|
|
||||||
open(mode='add'){
|
|
||||||
this.mode = mode;
|
|
||||||
this.visible = true;
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
//表单提交方法
|
|
||||||
submit(){
|
|
||||||
this.$refs.dialogForm.validate(async (valid) => {
|
|
||||||
if (valid) {
|
|
||||||
this.isSaveing = true;
|
|
||||||
var res = await this.$api.demo.post.post(this.form);
|
|
||||||
this.isSaveing = false;
|
|
||||||
if(res.code == 200){
|
|
||||||
this.$emit('success', this.form, this.mode)
|
|
||||||
this.visible = false;
|
|
||||||
this.$message.success("操作成功")
|
|
||||||
}else{
|
|
||||||
this.$alert(res.message, "提示", {type: 'error'})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//表单注入数据
|
|
||||||
setData(data){
|
|
||||||
this.form.id = data.id
|
|
||||||
this.form.appId = data.appId
|
|
||||||
this.form.appName = data.appName
|
|
||||||
this.form.secret = data.secret
|
|
||||||
this.form.type = data.type
|
|
||||||
this.form.exp = data.exp
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,153 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<div class="left-panel">
|
|
||||||
<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
|
|
||||||
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
|
|
||||||
</div>
|
|
||||||
<div class="right-panel">
|
|
||||||
<div class="right-panel-search">
|
|
||||||
<el-input v-model="search.keyword" placeholder="部门名称" clearable></el-input>
|
|
||||||
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<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>
|
|
||||||
<el-table-column label="状态" prop="status" width="150">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-tag v-if="scope.row.status==1" type="success">启用</el-tag>
|
|
||||||
<el-tag v-if="scope.row.status==0" type="danger">停用</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="创建时间" prop="date" width="180"></el-table-column>
|
|
||||||
<el-table-column label="备注" prop="remark" min-width="300"></el-table-column>
|
|
||||||
<el-table-column label="操作" fixed="right" align="right" width="170">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button-group>
|
|
||||||
<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
|
|
||||||
<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
|
|
||||||
<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
|
|
||||||
<template #reference>
|
|
||||||
<el-button text type="primary" size="small">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-popconfirm>
|
|
||||||
</el-button-group>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
</xTable>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
|
|
||||||
<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import saveDialog from './save'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'dept',
|
|
||||||
components: {
|
|
||||||
saveDialog
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
dialog: {
|
|
||||||
save: false
|
|
||||||
},
|
|
||||||
// apiObj: this.$api.system.dept.list,
|
|
||||||
selection: [],
|
|
||||||
search: {
|
|
||||||
keyword: null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//添加
|
|
||||||
add(){
|
|
||||||
this.dialog.save = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.saveDialog.open()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//编辑
|
|
||||||
table_edit(row){
|
|
||||||
this.dialog.save = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.saveDialog.open('edit').setData(row)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//查看
|
|
||||||
table_show(row){
|
|
||||||
this.dialog.save = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.saveDialog.open('show').setData(row)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//删除
|
|
||||||
async table_del(row){
|
|
||||||
var reqData = {id: row.id}
|
|
||||||
var res = await this.$api.demo.post.post(reqData);
|
|
||||||
if(res.code == 200){
|
|
||||||
this.$refs.table.refresh()
|
|
||||||
this.$message.success("删除成功")
|
|
||||||
}else{
|
|
||||||
this.$alert(res.message, "提示", {type: 'error'})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//批量删除
|
|
||||||
async batch_del(){
|
|
||||||
this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
|
|
||||||
type: 'warning'
|
|
||||||
}).then(() => {
|
|
||||||
const loading = this.$loading();
|
|
||||||
this.$refs.table.refresh()
|
|
||||||
loading.close();
|
|
||||||
this.$message.success("操作成功")
|
|
||||||
}).catch(() => {
|
|
||||||
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//表格选择后回调事件
|
|
||||||
selectionChange(selection){
|
|
||||||
this.selection = selection;
|
|
||||||
},
|
|
||||||
//搜索
|
|
||||||
upsearch(){
|
|
||||||
|
|
||||||
},
|
|
||||||
//根据ID获取树结构
|
|
||||||
filterTree(id){
|
|
||||||
var target = null;
|
|
||||||
function filter(tree){
|
|
||||||
tree.forEach(item => {
|
|
||||||
if(item.id == id){
|
|
||||||
target = item
|
|
||||||
}
|
|
||||||
if(item.children){
|
|
||||||
filter(item.children)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
filter(this.$refs.table.tableData)
|
|
||||||
return target
|
|
||||||
},
|
|
||||||
//本地更新数据
|
|
||||||
handleSaveSuccess(data, mode){
|
|
||||||
if(mode=='add'){
|
|
||||||
this.$refs.table.refresh()
|
|
||||||
}else if(mode=='edit'){
|
|
||||||
this.$refs.table.refresh()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,116 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-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">
|
|
||||||
<el-form-item label="上级部门" prop="parentId">
|
|
||||||
<el-cascader v-model="form.parentId" :options="groups" :props="groupsProps" :show-all-levels="false" clearable style="width: 100%;"></el-cascader>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="部门名称" prop="label">
|
|
||||||
<el-input v-model="form.label" placeholder="请输入部门名称" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="排序" prop="sort">
|
|
||||||
<el-input-number v-model="form.sort" controls-position="right" :min="1" style="width: 100%;"></el-input-number>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="是否有效" prop="status">
|
|
||||||
<el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注" prop="remark">
|
|
||||||
<el-input v-model="form.remark" clearable type="textarea"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="visible=false" >取 消</el-button>
|
|
||||||
<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
emits: ['success', 'closed'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
mode: "add",
|
|
||||||
titleMap: {
|
|
||||||
add: '新增',
|
|
||||||
edit: '编辑',
|
|
||||||
show: '查看'
|
|
||||||
},
|
|
||||||
visible: false,
|
|
||||||
isSaveing: false,
|
|
||||||
//表单数据
|
|
||||||
form: {
|
|
||||||
id:"",
|
|
||||||
parentId: "",
|
|
||||||
label: "",
|
|
||||||
sort: 1,
|
|
||||||
status: "1",
|
|
||||||
remark: ""
|
|
||||||
},
|
|
||||||
//验证规则
|
|
||||||
rules: {
|
|
||||||
sort: [
|
|
||||||
{required: true, message: '请输入排序', trigger: 'change'}
|
|
||||||
],
|
|
||||||
label: [
|
|
||||||
{required: true, message: '请输入部门名称'}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
//所需数据选项
|
|
||||||
groups: [],
|
|
||||||
groupsProps: {
|
|
||||||
value: "id",
|
|
||||||
emitPath: false,
|
|
||||||
checkStrictly: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.getGroup()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//显示
|
|
||||||
open(mode='add'){
|
|
||||||
this.mode = mode;
|
|
||||||
this.visible = true;
|
|
||||||
return this
|
|
||||||
},
|
|
||||||
//加载树数据
|
|
||||||
async getGroup(){
|
|
||||||
var res = await this.$api.system.dept.list.get();
|
|
||||||
this.groups = res.data;
|
|
||||||
},
|
|
||||||
//表单提交方法
|
|
||||||
submit(){
|
|
||||||
this.$refs.dialogForm.validate(async (valid) => {
|
|
||||||
if (valid) {
|
|
||||||
this.isSaveing = true;
|
|
||||||
var res = await this.$api.demo.post.post(this.form);
|
|
||||||
this.isSaveing = false;
|
|
||||||
if(res.code == 200){
|
|
||||||
this.$emit('success', this.form, this.mode)
|
|
||||||
this.visible = false;
|
|
||||||
this.$message.success("操作成功")
|
|
||||||
}else{
|
|
||||||
this.$alert(res.message, "提示", {type: 'error'})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//表单注入数据
|
|
||||||
setData(data){
|
|
||||||
this.form.id = data.id
|
|
||||||
this.form.label = data.label
|
|
||||||
this.form.status = data.status
|
|
||||||
this.form.sort = data.sort
|
|
||||||
this.form.parentId = data.parentId
|
|
||||||
this.form.remark = data.remark
|
|
||||||
|
|
||||||
//可以和上面一样单个注入，也可以像下面一样直接合并进去
|
|
||||||
//Object.assign(this.form, data)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,103 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-dialog :title="titleMap[mode]" v-model="visible" :width="330" destroy-on-close @closed="$emit('closed')">
|
|
||||||
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
|
|
||||||
<el-form-item label="编码" prop="code">
|
|
||||||
<el-input v-model="form.code" clearable placeholder="字典编码"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="字典名称" prop="name">
|
|
||||||
<el-input v-model="form.name" clearable placeholder="字典显示名称"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="父路径" prop="parentId">
|
|
||||||
<el-cascader v-model="form.parentId" :options="dic" :props="dicProps" :show-all-levels="false" clearable></el-cascader>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="visible=false" >取 消</el-button>
|
|
||||||
<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
emits: ['success', 'closed'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
mode: "add",
|
|
||||||
titleMap: {
|
|
||||||
add: '新增字典',
|
|
||||||
edit: '编辑字典'
|
|
||||||
},
|
|
||||||
visible: false,
|
|
||||||
isSaveing: false,
|
|
||||||
form: {
|
|
||||||
id:"",
|
|
||||||
name: "",
|
|
||||||
code: "",
|
|
||||||
parentId: ""
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
code: [
|
|
||||||
{required: true, message: '请输入编码'}
|
|
||||||
],
|
|
||||||
name: [
|
|
||||||
{required: true, message: '请输入字典名称'}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
dic: [],
|
|
||||||
dicProps: {
|
|
||||||
value: "id",
|
|
||||||
label: "name",
|
|
||||||
emitPath: false,
|
|
||||||
checkStrictly: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.getDic()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//显示
|
|
||||||
open(mode='add'){
|
|
||||||
this.mode = mode;
|
|
||||||
this.visible = true;
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
//获取字典列表
|
|
||||||
async getDic(){
|
|
||||||
var res = await this.$api.system.dic.tree.get();
|
|
||||||
this.dic = res.data;
|
|
||||||
},
|
|
||||||
//表单提交方法
|
|
||||||
submit(){
|
|
||||||
this.$refs.dialogForm.validate(async (valid) => {
|
|
||||||
if (valid) {
|
|
||||||
this.isSaveing = true;
|
|
||||||
var res = await this.$api.demo.post.post(this.form);
|
|
||||||
this.isSaveing = false;
|
|
||||||
if(res.code == 200){
|
|
||||||
this.$emit('success', this.form, this.mode)
|
|
||||||
this.visible = false;
|
|
||||||
this.$message.success("操作成功")
|
|
||||||
}else{
|
|
||||||
this.$alert(res.message, "提示", {type: 'error'})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//表单注入数据
|
|
||||||
setData(data){
|
|
||||||
this.form.id = data.id
|
|
||||||
this.form.name = data.name
|
|
||||||
this.form.code = data.code
|
|
||||||
this.form.parentId = data.parentId
|
|
||||||
|
|
||||||
//可以和上面一样单个注入，也可以像下面一样直接合并进去
|
|
||||||
//Object.assign(this.form, data)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,333 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-aside width="300px" v-loading="showDicloading">
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<el-input placeholder="输入关键字进行过滤" v-model="dicFilterText" clearable></el-input>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<el-tree ref="dic" class="menu" node-key="id" :data="dicList" :props="dicProps" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="dicFilterNode" @node-click="dicClick">
|
|
||||||
<template #default="{node, data}">
|
|
||||||
<span class="custom-tree-node">
|
|
||||||
<span class="label">{{ node.label }}</span>
|
|
||||||
<span class="code">{{ data.code }}</span>
|
|
||||||
<span class="do">
|
|
||||||
<el-button-group>
|
|
||||||
<el-button icon="el-icon-edit" size="small" @click.stop="dicEdit(data)"></el-button>
|
|
||||||
<el-button icon="el-icon-delete" size="small" @click.stop="dicDel(node, data)"></el-button>
|
|
||||||
</el-button-group>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-tree>
|
|
||||||
</el-main>
|
|
||||||
<el-footer style="height:51px;">
|
|
||||||
<el-button type="primary" size="small" icon="el-icon-plus" style="width: 100%;" @click="addDic">字典分类</el-button>
|
|
||||||
</el-footer>
|
|
||||||
</el-container>
|
|
||||||
</el-aside>
|
|
||||||
<el-container class="is-vertical">
|
|
||||||
<el-header>
|
|
||||||
<div class="left-panel">
|
|
||||||
<el-button type="primary" icon="el-icon-plus" @click="addInfo"></el-button>
|
|
||||||
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<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>
|
|
||||||
<el-tag class="move" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;"/></el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="名称" prop="name" width="150"></el-table-column>
|
|
||||||
<el-table-column label="键值" prop="key" width="150"></el-table-column>
|
|
||||||
<el-table-column label="是否有效" prop="yx" width="100">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-switch v-model="scope.row.yx" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_yx" active-value="1" inactive-value="0"></el-switch>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" fixed="right" align="right" width="120">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button-group>
|
|
||||||
<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
|
|
||||||
<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
|
|
||||||
<template #reference>
|
|
||||||
<el-button text type="primary" size="small">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-popconfirm>
|
|
||||||
</el-button-group>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</xTable>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</el-container>
|
|
||||||
|
|
||||||
<dic-dialog v-if="dialog.dic" ref="dicDialog" @success="handleDicSuccess" @closed="dialog.dic=false"></dic-dialog>
|
|
||||||
|
|
||||||
<list-dialog v-if="dialog.list" ref="listDialog" @success="handleListSuccess" @closed="dialog.list=false"></list-dialog>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import dicDialog from './dic'
|
|
||||||
import listDialog from './list'
|
|
||||||
import Sortable from 'sortablejs'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'dic',
|
|
||||||
components: {
|
|
||||||
dicDialog,
|
|
||||||
listDialog
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
dialog: {
|
|
||||||
dic: false,
|
|
||||||
info: false
|
|
||||||
},
|
|
||||||
showDicloading: true,
|
|
||||||
dicList: [],
|
|
||||||
dicFilterText: '',
|
|
||||||
dicProps: {
|
|
||||||
label: 'name'
|
|
||||||
},
|
|
||||||
listApi: null,
|
|
||||||
listApiParams: {},
|
|
||||||
selection: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
dicFilterText(val) {
|
|
||||||
this.$refs.dic.filter(val);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.getDic()
|
|
||||||
this.rowDrop()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//加载树数据
|
|
||||||
async getDic(){
|
|
||||||
var res = await this.$api.system.dic.tree.get();
|
|
||||||
this.showDicloading = false;
|
|
||||||
this.dicList = res.data;
|
|
||||||
//获取第一个节点,设置选中 & 加载明细列表
|
|
||||||
var firstNode = this.dicList[0];
|
|
||||||
if(firstNode){
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.dic.setCurrentKey(firstNode.id)
|
|
||||||
})
|
|
||||||
this.listApiParams = {
|
|
||||||
code: firstNode.code
|
|
||||||
}
|
|
||||||
this.listApi = this.$api.system.dic.list;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//树过滤
|
|
||||||
dicFilterNode(value, data){
|
|
||||||
if (!value) return true;
|
|
||||||
var targetText = data.name + data.code;
|
|
||||||
return targetText.indexOf(value) !== -1;
|
|
||||||
},
|
|
||||||
//树增加
|
|
||||||
addDic(){
|
|
||||||
this.dialog.dic = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.dicDialog.open()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//编辑树
|
|
||||||
dicEdit(data){
|
|
||||||
this.dialog.dic = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
var editNode = this.$refs.dic.getNode(data.id);
|
|
||||||
var editNodeParentId = editNode.level==1?undefined:editNode.parent.data.id
|
|
||||||
data.parentId = editNodeParentId
|
|
||||||
this.$refs.dicDialog.open('edit').setData(data)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//树点击事件
|
|
||||||
dicClick(data){
|
|
||||||
this.$refs.table.reload({
|
|
||||||
code: data.code
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//删除树
|
|
||||||
dicDel(node, data){
|
|
||||||
this.$confirm(`确定删除 ${data.name} 项吗？`, '提示', {
|
|
||||||
type: 'warning'
|
|
||||||
}).then(() => {
|
|
||||||
this.showDicloading = true;
|
|
||||||
|
|
||||||
//删除节点是否为高亮当前 是的话 设置第一个节点高亮
|
|
||||||
var dicCurrentKey = this.$refs.dic.getCurrentKey();
|
|
||||||
this.$refs.dic.remove(data.id)
|
|
||||||
if(dicCurrentKey == data.id){
|
|
||||||
var firstNode = this.dicList[0];
|
|
||||||
if(firstNode){
|
|
||||||
this.$refs.dic.setCurrentKey(firstNode.id);
|
|
||||||
this.$refs.table.upData({
|
|
||||||
code: firstNode.code
|
|
||||||
})
|
|
||||||
}else{
|
|
||||||
this.listApi = null;
|
|
||||||
this.$refs.table.tableData = []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.showDicloading = false;
|
|
||||||
this.$message.success("操作成功")
|
|
||||||
}).catch(() => {
|
|
||||||
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//行拖拽
|
|
||||||
rowDrop(){
|
|
||||||
const _this = this
|
|
||||||
const tbody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody')
|
|
||||||
Sortable.create(tbody, {
|
|
||||||
handle: ".move",
|
|
||||||
animation: 300,
|
|
||||||
ghostClass: "ghost",
|
|
||||||
onEnd({ newIndex, oldIndex }) {
|
|
||||||
const tableData = _this.$refs.table.tableData
|
|
||||||
const currRow = tableData.splice(oldIndex, 1)[0]
|
|
||||||
tableData.splice(newIndex, 0, currRow)
|
|
||||||
_this.$message.success("排序成功")
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//添加明细
|
|
||||||
addInfo(){
|
|
||||||
this.dialog.list = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
var dicCurrentKey = this.$refs.dic.getCurrentKey();
|
|
||||||
const data = {
|
|
||||||
dic: dicCurrentKey
|
|
||||||
}
|
|
||||||
this.$refs.listDialog.open().setData(data)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//编辑明细
|
|
||||||
table_edit(row){
|
|
||||||
this.dialog.list = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.listDialog.open('edit').setData(row)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//删除明细
|
|
||||||
async table_del(row, index){
|
|
||||||
var reqData = {id: row.id}
|
|
||||||
var res = await this.$api.demo.post.post(reqData);
|
|
||||||
if(res.code == 200){
|
|
||||||
this.$refs.table.tableData.splice(index, 1);
|
|
||||||
this.$message.success("删除成功")
|
|
||||||
}else{
|
|
||||||
this.$alert(res.message, "提示", {type: 'error'})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//批量删除
|
|
||||||
async batch_del(){
|
|
||||||
this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
|
|
||||||
type: 'warning'
|
|
||||||
}).then(() => {
|
|
||||||
const loading = this.$loading();
|
|
||||||
this.selection.forEach(item => {
|
|
||||||
this.$refs.table.tableData.forEach((itemI, indexI) => {
|
|
||||||
if (item.id === itemI.id) {
|
|
||||||
this.$refs.table.tableData.splice(indexI, 1)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
loading.close();
|
|
||||||
this.$message.success("操作成功")
|
|
||||||
}).catch(() => {
|
|
||||||
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//提交明细
|
|
||||||
saveList(){
|
|
||||||
this.$refs.listDialog.submit(async (formData) => {
|
|
||||||
this.isListSaveing = true;
|
|
||||||
var res = await this.$api.demo.post.post(formData);
|
|
||||||
this.isListSaveing = false;
|
|
||||||
if(res.code == 200){
|
|
||||||
//这里选择刷新整个表格 OR 插入/编辑现有表格数据
|
|
||||||
this.listDialogVisible = false;
|
|
||||||
this.$message.success("操作成功")
|
|
||||||
}else{
|
|
||||||
this.$alert(res.message, "提示", {type: 'error'})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//表格选择后回调事件
|
|
||||||
selectionChange(selection){
|
|
||||||
this.selection = selection;
|
|
||||||
},
|
|
||||||
//表格内开关事件
|
|
||||||
changeSwitch(val, row){
|
|
||||||
//1.还原数据
|
|
||||||
row.yx = row.yx == '1'?'0':'1'
|
|
||||||
//2.执行加载
|
|
||||||
row.$switch_yx = true;
|
|
||||||
//3.等待接口返回后改变值
|
|
||||||
setTimeout(()=>{
|
|
||||||
delete row.$switch_yx;
|
|
||||||
row.yx = val;
|
|
||||||
this.$message.success(`操作成功id:${row.id} val:${val}`)
|
|
||||||
}, 500)
|
|
||||||
},
|
|
||||||
//本地更新数据
|
|
||||||
handleDicSuccess(data, mode){
|
|
||||||
if(mode=='add'){
|
|
||||||
data.id = new Date().getTime()
|
|
||||||
if(this.dicList.length > 0){
|
|
||||||
this.$refs.table.upData({
|
|
||||||
code: data.code
|
|
||||||
})
|
|
||||||
}else{
|
|
||||||
this.listApiParams = {
|
|
||||||
code: data.code
|
|
||||||
}
|
|
||||||
this.listApi = this.$api.dic.info;
|
|
||||||
}
|
|
||||||
this.$refs.dic.append(data, data.parentId[0])
|
|
||||||
this.$refs.dic.setCurrentKey(data.id)
|
|
||||||
}else if(mode=='edit'){
|
|
||||||
var editNode = this.$refs.dic.getNode(data.id);
|
|
||||||
//判断是否移动？
|
|
||||||
var editNodeParentId = editNode.level==1?undefined:editNode.parent.data.id
|
|
||||||
if(editNodeParentId != data.parentId){
|
|
||||||
var obj = editNode.data;
|
|
||||||
this.$refs.dic.remove(data.id)
|
|
||||||
this.$refs.dic.append(obj, data.parentId[0])
|
|
||||||
}
|
|
||||||
Object.assign(editNode.data, data)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//本地更新数据
|
|
||||||
handleListSuccess(data, mode){
|
|
||||||
if(mode=='add'){
|
|
||||||
data.id = new Date().getTime()
|
|
||||||
this.$refs.table.tableData.push(data)
|
|
||||||
}else if(mode=='edit'){
|
|
||||||
this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
|
|
||||||
Object.assign(item, data)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.menu:deep(.el-tree-node__label) {display: flex;flex: 1;height:100%;}
|
|
||||||
.custom-tree-node {display: flex;flex: 1;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 24px;height:100%;}
|
|
||||||
.custom-tree-node .code {font-size: 12px;color: #999;}
|
|
||||||
.custom-tree-node .do {display: none;}
|
|
||||||
.custom-tree-node:hover .code {display: none;}
|
|
||||||
.custom-tree-node:hover .do {display: inline-block;}
|
|
||||||
</style>
|
|
||||||
@ -1,111 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-dialog :title="titleMap[mode]" v-model="visible" :width="400" destroy-on-close @closed="$emit('closed')">
|
|
||||||
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
|
|
||||||
<el-form-item label="所属字典" prop="dic">
|
|
||||||
<el-cascader v-model="form.dic" :options="dic" :props="dicProps" :show-all-levels="false" clearable></el-cascader>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="项名称" prop="name">
|
|
||||||
<el-input v-model="form.name" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="键值" prop="key">
|
|
||||||
<el-input v-model="form.key" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="是否有效" prop="yx">
|
|
||||||
<el-switch v-model="form.yx" active-value="1" inactive-value="0"></el-switch>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="visible=false" >取 消</el-button>
|
|
||||||
<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
emits: ['success', 'closed'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
mode: "add",
|
|
||||||
titleMap: {
|
|
||||||
add: '新增项',
|
|
||||||
edit: '编辑项'
|
|
||||||
},
|
|
||||||
visible: false,
|
|
||||||
isSaveing: false,
|
|
||||||
form: {
|
|
||||||
id: "",
|
|
||||||
dic: "",
|
|
||||||
name: "",
|
|
||||||
key: "",
|
|
||||||
yx: "1"
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
dic: [
|
|
||||||
{required: true, message: '请选择所属字典'}
|
|
||||||
],
|
|
||||||
name: [
|
|
||||||
{required: true, message: '请输入项名称'}
|
|
||||||
],
|
|
||||||
key: [
|
|
||||||
{required: true, message: '请输入键值'}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
dic: [],
|
|
||||||
dicProps: {
|
|
||||||
value: "id",
|
|
||||||
label: "name",
|
|
||||||
emitPath: false,
|
|
||||||
checkStrictly: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
if(this.params){
|
|
||||||
this.form.dic = this.params.code
|
|
||||||
}
|
|
||||||
this.getDic()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//显示
|
|
||||||
open(mode='add'){
|
|
||||||
this.mode = mode;
|
|
||||||
this.visible = true;
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
//获取字典列表
|
|
||||||
async getDic(){
|
|
||||||
var res = await this.$api.system.dic.tree.get();
|
|
||||||
this.dic = res.data;
|
|
||||||
},
|
|
||||||
//表单提交方法
|
|
||||||
submit(){
|
|
||||||
this.$refs.dialogForm.validate(async (valid) => {
|
|
||||||
if (valid) {
|
|
||||||
this.isSaveing = true;
|
|
||||||
var res = await this.$api.demo.post.post(this.form);
|
|
||||||
this.isSaveing = false;
|
|
||||||
if(res.code == 200){
|
|
||||||
this.$emit('success', this.form, this.mode)
|
|
||||||
this.visible = false;
|
|
||||||
this.$message.success("操作成功")
|
|
||||||
}else{
|
|
||||||
this.$alert(res.message, "提示", {type: 'error'})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//表单注入数据
|
|
||||||
setData(data){
|
|
||||||
this.form.id = data.id
|
|
||||||
this.form.name = data.name
|
|
||||||
this.form.key = data.key
|
|
||||||
this.form.yx = data.yx
|
|
||||||
this.form.dic = data.dic
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-row :gutter="15">
|
|
||||||
<el-col :lg="24">
|
|
||||||
<el-card shadow="never" class="aboutTop">
|
|
||||||
<div class="aboutTop-info">
|
|
||||||
<img src="@/assets/img/logo.png">
|
|
||||||
<h2>{{data.name}}</h2>
|
|
||||||
<p>{{data.version}}</p>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never" header="dependencies">
|
|
||||||
<el-descriptions border :column="4">
|
|
||||||
<el-descriptions-item v-for="(value, key) in data.dependencies" :key="key" :label="key">{{value}}</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never" header="devDependencies">
|
|
||||||
<el-descriptions border :column="3">
|
|
||||||
<el-descriptions-item v-for="(value, key) in data.devDependencies" :key="key" :label="key">{{value}}</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never" header="scripts">
|
|
||||||
<el-descriptions border :column="3">
|
|
||||||
<el-descriptions-item v-for="(value, key) in data.scripts" :key="key" :label="key">{{value}}</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import packageJson from '../../../package.json'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'about',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
data: packageJson
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.aboutTop {border:0;background: linear-gradient(to right, #8E54E9, #4776E6);color: #fff;}
|
|
||||||
.aboutTop-info {text-align: center}
|
|
||||||
.aboutTop-info img {width: 100px;}
|
|
||||||
.aboutTop-info h2 {font-size: 26px;margin-top: 15px;}
|
|
||||||
.aboutTop-info p {font-size: 16px;margin-top: 10px;}
|
|
||||||
</style>
|
|
||||||
@ -1,58 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-card shadow="never" header="v-auth 高精度权限控制">
|
|
||||||
<el-button v-auth="'user.add'" type="primary">v-auth="'user.add'"</el-button>
|
|
||||||
<el-button v-auths="['user.no','user.add']" type="primary">v-auths="['user.no','user.add']"</el-button>
|
|
||||||
<el-button v-auths-all="['list.add','user.add']" type="primary">v-auths-all="['list.add','user.add']"</el-button>
|
|
||||||
|
|
||||||
<el-alert title="v-auth指令 是$AUTH的语法糖, 原先需要使用v-if来判断是否有权限, 判断单项权限，如果满足就判断有权限" style="margin-top: 20px;"></el-alert>
|
|
||||||
<el-alert title="v-auths指令 传入数组,有一项满足就判断有权限" style="margin-top: 20px;"></el-alert>
|
|
||||||
<el-alert title="v-auths-all指令 传入数组,必须全满足才有权限，比如user.no没有这个权限，加到这里的话就表示不全部满足" style="margin-top: 20px;"></el-alert>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never" header="v-role 角色权限控制" style="margin-top: 15px;">
|
|
||||||
<el-button v-role="'admin'" type="primary">v-role="'admin'"</el-button>
|
|
||||||
<el-button v-role="['SA','admin']" type="primary">v-role="['SA','admin']"</el-button>
|
|
||||||
<el-alert title="v-role指令 是$ROLE的语法糖, 原理是判断是否含有用户所在的角色别名" style="margin-top: 20px;"></el-alert>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never" header="v-time 时间转换" style="margin-top: 15px;">
|
|
||||||
<p>
|
|
||||||
<el-tag v-time="1630117968295" format="yyyy-MM-dd hh:mm:ss"></el-tag>
|
|
||||||
</p>
|
|
||||||
<p style="margin-top: 15px;">
|
|
||||||
<el-tag v-time.tip="time1"></el-tag>
|
|
||||||
</p>
|
|
||||||
<p style="margin-top: 15px;">
|
|
||||||
<el-tag v-time.tip="time2"></el-tag>
|
|
||||||
</p>
|
|
||||||
<p style="margin-top: 15px;">
|
|
||||||
<el-tag v-time.tip="time3"></el-tag>
|
|
||||||
</p>
|
|
||||||
<el-alert title="指令方式日期时间转换,如设置'tip'修饰符将会转换成相对时间,并且每60秒自动更新" style="margin-top: 20px;"></el-alert>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never" header="v-copy 一键复制" style="margin-top: 15px;">
|
|
||||||
<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="copyText"></el-input>
|
|
||||||
<el-button v-copy="copyText" type="primary" style="margin-top: 15px;">复制</el-button>
|
|
||||||
<el-alert title="点击复制按钮会将文本框绑定的值复制到剪切板, 试着粘贴到其他地方看看效果" style="margin-top: 20px;"></el-alert>
|
|
||||||
</el-card>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'directive',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
time1: new Date(),
|
|
||||||
time2: new Date().setMinutes(new Date().getMinutes()-1),
|
|
||||||
time3: new Date().setMinutes(new Date().getMinutes()-120),
|
|
||||||
copyText: '测试复制内容'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<el-page-header content="FullPage" @back="goBack" />
|
|
||||||
</el-header>
|
|
||||||
<el-main>
|
|
||||||
<el-empty description="FullPageMain"></el-empty>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'fullpage',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
goBack(){
|
|
||||||
this.$router.go(-1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-aside style="padding:15px;width: 400px;">
|
|
||||||
<el-card shadow="never" header="异步加载JS">
|
|
||||||
<div style="line-height: 1.5;font-size: 13px;">
|
|
||||||
<p>演示了使用 @/utils/load 加载百度地图的JSAPI和它的GL库BMapGLLib</p>
|
|
||||||
<p>当然也可以像传统网页一样加载任何JS和CSS，甚至可以是JQ。</p>
|
|
||||||
<br/>
|
|
||||||
<el-alert title="这是一项试验工具, 具有不稳定性" type="warning" show-icon :closable="false"/>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-aside>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<div style="width: 100%;height: 100%;" id="container"></div>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { loadJS } from '@/utils/load'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'loadJS',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.init()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async init(){
|
|
||||||
var ak = "vxSbZuydZ42ktZCvXvy5xCai28OEVqUq"
|
|
||||||
//loadJS (src, keyName, callbackName)
|
|
||||||
//src 必填，需要加载的URL路径
|
|
||||||
//keyName 必填，有2个作用，作为唯一KEY防止N次插入DOM；作为JS返回对象的key名，类似百度地图的BMapGL，如果没有则返回null
|
|
||||||
//callbackName 非必填，如果远程JS有callback，填写callback方法名称。
|
|
||||||
//loadJS返回Promise，如果全局对象eslint发出警告 需要//eslint-disable-next-line，暂时关闭警告行
|
|
||||||
// ╭───这两个字符串要一致───╮
|
|
||||||
var BMapGL = await loadJS(`//api.map.baidu.com/api?type=webgl&v=1.0&ak=${ak}&callback=BMapGLinit`, "BMapGL", "BMapGLinit")
|
|
||||||
//像BMapGLLib就没有callback，无需第3个参数
|
|
||||||
//var BMapGLLib = await loadJS("//api.map.baidu.com/library/LuShu/gl/src/LuShu_min.js", "BMapGLLib")
|
|
||||||
|
|
||||||
|
|
||||||
var map = new BMapGL.Map('container')
|
|
||||||
map.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 20);
|
|
||||||
map.enableScrollWheelZoom()
|
|
||||||
map.setTilt(55)
|
|
||||||
map.setDisplayOptions({
|
|
||||||
poiText: false,
|
|
||||||
poiIcon: false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,139 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-card shadow="never" header="async-validator内置">
|
|
||||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px" status-icon>
|
|
||||||
<el-form-item label="必填" prop="required">
|
|
||||||
<el-input v-model="form.required"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="长度" prop="length">
|
|
||||||
<el-input v-model="form.length" placeholder="长度需为3位"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="类型" prop="type">
|
|
||||||
<el-input v-model="form.type" placeholder="类型可为string number boolean array date url email等"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="范围" prop="range">
|
|
||||||
<el-input v-model="form.range" placeholder="请填写范围在3至5位"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="枚举" prop="enum">
|
|
||||||
<el-input v-model="form.enum" placeholder="请填写admin，user，guest其一"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="自定义" prop="custom">
|
|
||||||
<el-input v-model="form.custom" placeholder="请填写数字1"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="异步验证" prop="async">
|
|
||||||
<el-input v-model="form.async" placeholder="请输入SCUI最新版本号,form开启status-icon后 可以查看右侧状态"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="submit">验证所有字段</el-button>
|
|
||||||
<el-button @click="resetForm('form')">Reset</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never" header="自定义" style="margin-top: 15px;">
|
|
||||||
<el-form ref="form2" :model="form2" :rules="rules2" label-width="100px" status-icon>
|
|
||||||
<el-form-item label="手机号码" prop="phone">
|
|
||||||
<el-input v-model="form2.phone"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="车牌号码" prop="cars">
|
|
||||||
<el-input v-model="form2.cars"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="submit2">验证所有字段</el-button>
|
|
||||||
<el-button @click="resetForm('form2')">Reset</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<el-alert title="自定义验证可在 @/utils/verificate.js 中不断扩展业务需要的验证. 记得要 import 进来" type="success" />
|
|
||||||
</el-card>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { verifyPhone, verifyCars } from '@/utils/verificate'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'verificate',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
form: {
|
|
||||||
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
required: [
|
|
||||||
{ required: true, message: '请填写' }
|
|
||||||
],
|
|
||||||
length: [
|
|
||||||
{ required: true, len: 3, message: '长度需为3位' }
|
|
||||||
],
|
|
||||||
type: [
|
|
||||||
{ required: true, type: 'email', message: '类型需为email' }
|
|
||||||
],
|
|
||||||
range: [
|
|
||||||
{ required: true, min: 3, max: 5, message: '范围在3至5位' }
|
|
||||||
],
|
|
||||||
enum: [
|
|
||||||
{ required: true, type: 'enum', enum: ['admin', 'user', 'guest'], message: '请填写admin，user，guest其一' }
|
|
||||||
],
|
|
||||||
custom: [
|
|
||||||
{ required: true, validator: (rule, value)=>{return value === '1'}, message: '请填写数字1' , trigger:'blur'}
|
|
||||||
],
|
|
||||||
async: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
validator: (rule, value, callback)=>{
|
|
||||||
this.$api.demo.ver.get({value: value}).then(res => {
|
|
||||||
if(res.data != value){
|
|
||||||
return callback(new Error('请输入SCUI最新版本号：'+res.data))
|
|
||||||
}
|
|
||||||
callback()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
trigger:'blur'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
form2: {
|
|
||||||
|
|
||||||
},
|
|
||||||
rules2: {
|
|
||||||
phone: [
|
|
||||||
{ required: true, message: '请输入姓名' },
|
|
||||||
{ validator: verifyPhone, trigger:'blur' }
|
|
||||||
],
|
|
||||||
cars: [
|
|
||||||
{ required: true, validator: verifyCars, trigger:'blur' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
submit(){
|
|
||||||
this.$refs.form.validate(async (valid) => {
|
|
||||||
if (valid) {
|
|
||||||
this.$message.success("全部验证通过")
|
|
||||||
}else{
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
submit2(){
|
|
||||||
this.$refs.form2.validate(async (valid) => {
|
|
||||||
if (valid) {
|
|
||||||
this.$message.success("全部验证通过")
|
|
||||||
}else{
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
resetForm(ref){
|
|
||||||
this.$refs[ref].resetFields()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-card shadow="never" header="打开">
|
|
||||||
<el-button type="primary" plain @click="open1">打开个人信息</el-button>
|
|
||||||
<el-button type="primary" plain @click="open2">打开后执行</el-button>
|
|
||||||
<el-alert title="打开后执行原理: 路由push时,在当前路由对象中插入一个特殊标识, 在目标视图中beforeRouteEnter获取判断是否需要执行特殊方法" style="margin-top: 20px;"></el-alert>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never" header="刷新" style="margin-top: 15px;">
|
|
||||||
<el-button type="primary" plain @click="refresh1">刷新当前</el-button>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never" header="关闭" style="margin-top: 15px;">
|
|
||||||
<el-button type="primary" plain @click="close1">关闭当前</el-button>
|
|
||||||
<el-button type="primary" plain @click="close2">关闭其他</el-button>
|
|
||||||
<el-button type="primary" plain @click="close3">关闭后执行</el-button>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never" header="设置" style="margin-top: 15px;">
|
|
||||||
<el-form :inline="true">
|
|
||||||
<el-form-item>
|
|
||||||
<el-input v-model="input" placeholder="请输入内容"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" plain @click="set1">设置标题</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never" header="整页路由" style="margin-top: 15px;">
|
|
||||||
<el-button type="primary" plain @click="fullpage">fullpage</el-button>
|
|
||||||
<el-alert title="变更路由的层级关系,向上推至顶级达到在layout视图中显示. 只需要在路由中设置 meta.fullpage 即可" style="margin-top: 20px;"></el-alert>
|
|
||||||
</el-card>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import useTabs from '@/utils/useTabs'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'viewTags',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
input: "newTabName"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
open1(){
|
|
||||||
this.$router.push('/usercenter')
|
|
||||||
},
|
|
||||||
open2(){
|
|
||||||
this.$router.push('/usercenter')
|
|
||||||
this.$route.is = true
|
|
||||||
},
|
|
||||||
refresh1(){
|
|
||||||
useTabs.refresh()
|
|
||||||
},
|
|
||||||
close1(){
|
|
||||||
useTabs.close()
|
|
||||||
},
|
|
||||||
close2(){
|
|
||||||
useTabs.closeOther()
|
|
||||||
},
|
|
||||||
close3(){
|
|
||||||
useTabs.closeNext((tags)=>{
|
|
||||||
//回调返回所有标签的数组，这里其实是需要判断是否含有'/usercenter'，含有再操作的，这里为了演示就直接打开了。
|
|
||||||
console.log(tags)
|
|
||||||
this.$router.push('/usercenter')
|
|
||||||
this.$route.is = true
|
|
||||||
})
|
|
||||||
},
|
|
||||||
set1(){
|
|
||||||
useTabs.setTitle(this.input)
|
|
||||||
},
|
|
||||||
fullpage(){
|
|
||||||
this.$router.push('/other/fullpage')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,177 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<div class="left-panel">
|
|
||||||
<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
|
|
||||||
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
|
|
||||||
<el-button type="primary" plain :disabled="selection.length!=1" @click="permission">权限设置</el-button>
|
|
||||||
</div>
|
|
||||||
<div class="right-panel">
|
|
||||||
<div class="right-panel-search">
|
|
||||||
<el-input v-model="search.keyword" placeholder="角色名称" clearable></el-input>
|
|
||||||
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<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>
|
|
||||||
<el-table-column label="别名" prop="alias" width="200"></el-table-column>
|
|
||||||
<el-table-column label="排序" prop="sort" width="80"></el-table-column>
|
|
||||||
<el-table-column label="状态" prop="status" width="80">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-switch v-model="scope.row.status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" active-value="1" inactive-value="0"></el-switch>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="创建时间" prop="date" width="180"></el-table-column>
|
|
||||||
<el-table-column label="备注" prop="remark" min-width="150"></el-table-column>
|
|
||||||
<el-table-column label="操作" fixed="right" align="right" width="170">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button-group>
|
|
||||||
<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
|
|
||||||
<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
|
|
||||||
<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
|
|
||||||
<template #reference>
|
|
||||||
<el-button text type="primary" size="small">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-popconfirm>
|
|
||||||
</el-button-group>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
</xTable>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
|
|
||||||
<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
|
|
||||||
|
|
||||||
<permission-dialog v-if="dialog.permission" ref="permissionDialog" @closed="dialog.permission=false"></permission-dialog>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import saveDialog from './save'
|
|
||||||
import permissionDialog from './permission'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'role',
|
|
||||||
components: {
|
|
||||||
saveDialog,
|
|
||||||
permissionDialog
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
dialog: {
|
|
||||||
save: false,
|
|
||||||
permission: false
|
|
||||||
},
|
|
||||||
apiObj: this.$api.system.role.list,
|
|
||||||
selection: [],
|
|
||||||
search: {
|
|
||||||
keyword: null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//添加
|
|
||||||
add(){
|
|
||||||
this.dialog.save = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.saveDialog.open()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//编辑
|
|
||||||
table_edit(row){
|
|
||||||
this.dialog.save = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.saveDialog.open('edit').setData(row)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//查看
|
|
||||||
table_show(row){
|
|
||||||
this.dialog.save = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.saveDialog.open('show').setData(row)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//权限设置
|
|
||||||
permission(){
|
|
||||||
this.dialog.permission = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.permissionDialog.open()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//删除
|
|
||||||
async table_del(row){
|
|
||||||
var reqData = {id: row.id}
|
|
||||||
var res = await this.$api.demo.post.post(reqData);
|
|
||||||
if(res.code == 200){
|
|
||||||
this.$refs.table.refresh()
|
|
||||||
this.$message.success("删除成功")
|
|
||||||
}else{
|
|
||||||
this.$alert(res.message, "提示", {type: 'error'})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//批量删除
|
|
||||||
async batch_del(){
|
|
||||||
this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
|
|
||||||
type: 'warning'
|
|
||||||
}).then(() => {
|
|
||||||
const loading = this.$loading();
|
|
||||||
this.$refs.table.refresh()
|
|
||||||
loading.close();
|
|
||||||
this.$message.success("操作成功")
|
|
||||||
}).catch(() => {
|
|
||||||
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//表格选择后回调事件
|
|
||||||
selectionChange(selection){
|
|
||||||
this.selection = selection;
|
|
||||||
},
|
|
||||||
//表格内开关
|
|
||||||
changeSwitch(val, row){
|
|
||||||
row.status = row.status == '1'?'0':'1'
|
|
||||||
row.$switch_status = true;
|
|
||||||
setTimeout(()=>{
|
|
||||||
delete row.$switch_status;
|
|
||||||
row.status = val;
|
|
||||||
this.$message.success("操作成功")
|
|
||||||
}, 500)
|
|
||||||
},
|
|
||||||
//搜索
|
|
||||||
upsearch(){
|
|
||||||
|
|
||||||
},
|
|
||||||
//根据ID获取树结构
|
|
||||||
filterTree(id){
|
|
||||||
var target = null;
|
|
||||||
function filter(tree){
|
|
||||||
tree.forEach(item => {
|
|
||||||
if(item.id == id){
|
|
||||||
target = item
|
|
||||||
}
|
|
||||||
if(item.children){
|
|
||||||
filter(item.children)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
filter(this.$refs.table.tableData)
|
|
||||||
return target
|
|
||||||
},
|
|
||||||
//本地更新数据
|
|
||||||
handleSaveSuccess(data, mode){
|
|
||||||
if(mode=='add'){
|
|
||||||
this.$refs.table.refresh()
|
|
||||||
}else if(mode=='edit'){
|
|
||||||
this.$refs.table.refresh()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,190 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-drawer title="角色权限设置" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
|
|
||||||
<el-tabs tab-position="top">
|
|
||||||
<el-tab-pane label="菜单权限">
|
|
||||||
<div class="treeMain">
|
|
||||||
<el-tree ref="menu" node-key="name" :data="menu.list" :props="menu.props" show-checkbox></el-tree>
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane label="数据权限">
|
|
||||||
<el-form label-width="100px" label-position="left">
|
|
||||||
<el-form-item label="规则类型">
|
|
||||||
<el-select v-model="data.dataType" placeholder="请选择">
|
|
||||||
<el-option label="全部可见" value="1"></el-option>
|
|
||||||
<el-option label="本人可见" value="2"></el-option>
|
|
||||||
<el-option label="所在部门可见" value="3"></el-option>
|
|
||||||
<el-option label="所在部门及子级可见" value="4"></el-option>
|
|
||||||
<el-option label="选择的部门可见" value="5"></el-option>
|
|
||||||
<el-option label="自定义" value="6"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="选择部门" v-show="data.dataType=='5'">
|
|
||||||
<div class="treeMain" style="width: 100%;">
|
|
||||||
<el-tree ref="dept" node-key="id" :data="data.list" :props="data.props" show-checkbox></el-tree>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="规则值" v-show="data.dataType=='6'">
|
|
||||||
<el-input v-model="data.rule" clearable type="textarea" :rows="6" placeholder="请输入自定义规则代码"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane label="控制台模块">
|
|
||||||
<div class="treeMain">
|
|
||||||
<el-tree ref="grid" node-key="key" :data="grid.list" :props="grid.props" :default-checked-keys="grid.checked" show-checkbox></el-tree>
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane label="控制台">
|
|
||||||
<el-form label-width="100px" label-position="left">
|
|
||||||
<el-form-item label="控制台视图">
|
|
||||||
<el-select v-model="dashboard" placeholder="请选择">
|
|
||||||
<el-option v-for="item in dashboardOptions" :key="item.value" :label="item.label" :value="item.value">
|
|
||||||
<span style="float: left">{{ item.label }}</span>
|
|
||||||
<span style="float: right; color: #8492a6; font-size: 12px">{{ item.views }}</span>
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
<div class="el-form-item-msg">用于控制角色登录后控制台的视图</div>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="visible=false" >取 消</el-button>
|
|
||||||
<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
|
||||||
</template>
|
|
||||||
</el-drawer>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
emits: ['success', 'closed'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
visible: false,
|
|
||||||
isSaveing: false,
|
|
||||||
menu: {
|
|
||||||
list: [],
|
|
||||||
checked: [],
|
|
||||||
props: {
|
|
||||||
label: (data)=>{
|
|
||||||
return data.meta.title
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
list: [],
|
|
||||||
checked: ["welcome", "ver", "time", "progress", "echarts", "about"],
|
|
||||||
props: {
|
|
||||||
label: (data)=>{
|
|
||||||
return data.title
|
|
||||||
},
|
|
||||||
disabled: (data)=>{
|
|
||||||
return data.isFixed
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
dataType :"1",
|
|
||||||
list: [],
|
|
||||||
checked: [],
|
|
||||||
props: {},
|
|
||||||
rule: ""
|
|
||||||
},
|
|
||||||
dashboard: "0",
|
|
||||||
dashboardOptions: [
|
|
||||||
{
|
|
||||||
value: '0',
|
|
||||||
label: '数据统计',
|
|
||||||
views: 'stats'
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: '1',
|
|
||||||
label: '工作台',
|
|
||||||
views: 'work'
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.getMenu()
|
|
||||||
this.getDept()
|
|
||||||
this.getGrid()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
open(){
|
|
||||||
this.visible = true;
|
|
||||||
},
|
|
||||||
submit(){
|
|
||||||
this.isSaveing = true;
|
|
||||||
|
|
||||||
//选中的和半选的合并后传值接口
|
|
||||||
var checkedKeys = this.$refs.menu.getCheckedKeys().concat(this.$refs.menu.getHalfCheckedKeys())
|
|
||||||
console.log(checkedKeys)
|
|
||||||
|
|
||||||
var checkedKeys_dept = this.$refs.dept.getCheckedKeys().concat(this.$refs.dept.getHalfCheckedKeys())
|
|
||||||
console.log(checkedKeys_dept)
|
|
||||||
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.isSaveing = false;
|
|
||||||
this.visible = false;
|
|
||||||
this.$message.success("操作成功")
|
|
||||||
this.$emit('success')
|
|
||||||
},1000)
|
|
||||||
},
|
|
||||||
async getMenu(){
|
|
||||||
var res = await this.$api.system.menu.list.get()
|
|
||||||
this.menu.list = res.data
|
|
||||||
|
|
||||||
//获取接口返回的之前选中的和半选的合并，处理过滤掉有叶子节点的key
|
|
||||||
this.menu.checked = ["system", "user", "user.add", "user.edit", "user.del", "directive.edit", "other", "directive"]
|
|
||||||
this.$nextTick(() => {
|
|
||||||
let filterKeys = this.menu.checked.filter(key => this.$refs.menu.getNode(key).isLeaf)
|
|
||||||
this.$refs.menu.setCheckedKeys(filterKeys, true)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
async getDept(){
|
|
||||||
var res = await this.$api.system.dept.list.get();
|
|
||||||
this.data.list = res.data
|
|
||||||
this.data.checked = ["12", "2", "21", "22", "1"]
|
|
||||||
this.$nextTick(() => {
|
|
||||||
let filterKeys = this.data.checked.filter(key => this.$refs.dept.getNode(key).isLeaf)
|
|
||||||
this.$refs.dept.setCheckedKeys(filterKeys, true)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getGrid(){
|
|
||||||
this.grid.list = [
|
|
||||||
{
|
|
||||||
key: "welcome",
|
|
||||||
title: "欢迎",
|
|
||||||
isFixed: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "ver",
|
|
||||||
title: "版本信息",
|
|
||||||
isFixed: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "time",
|
|
||||||
title: "时钟"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "progress",
|
|
||||||
title: "进度环"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "echarts",
|
|
||||||
title: "实时收入"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "about",
|
|
||||||
title: "关于项目"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.treeMain {height:280px;overflow: auto;border: 1px solid #dcdfe6;margin-bottom: 10px;}
|
|
||||||
</style>
|
|
||||||
@ -1,107 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-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="label">
|
|
||||||
<el-input v-model="form.label" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="角色别名" prop="alias">
|
|
||||||
<el-input v-model="form.alias" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="排序" prop="sort">
|
|
||||||
<el-input-number v-model="form.sort" controls-position="right" :min="1" style="width: 100%;"></el-input-number>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="是否有效" prop="status">
|
|
||||||
<el-switch v-model="form.status" active-value="1" inactive-value="0"></el-switch>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注" prop="remark">
|
|
||||||
<el-input v-model="form.remark" clearable type="textarea"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="visible=false" >取 消</el-button>
|
|
||||||
<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
emits: ['success', 'closed'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
mode: "add",
|
|
||||||
titleMap: {
|
|
||||||
add: '新增',
|
|
||||||
edit: '编辑',
|
|
||||||
show: '查看'
|
|
||||||
},
|
|
||||||
visible: false,
|
|
||||||
isSaveing: false,
|
|
||||||
//表单数据
|
|
||||||
form: {
|
|
||||||
id:"",
|
|
||||||
label: "",
|
|
||||||
alias: "",
|
|
||||||
sort: 1,
|
|
||||||
status: 1,
|
|
||||||
remark: ""
|
|
||||||
},
|
|
||||||
//验证规则
|
|
||||||
rules: {
|
|
||||||
sort: [
|
|
||||||
{required: true, message: '请输入排序', trigger: 'change'}
|
|
||||||
],
|
|
||||||
label: [
|
|
||||||
{required: true, message: '请输入角色名称'}
|
|
||||||
],
|
|
||||||
alias: [
|
|
||||||
{required: true, message: '请输入角色别名'}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//显示
|
|
||||||
open(mode='add'){
|
|
||||||
this.mode = mode;
|
|
||||||
this.visible = true;
|
|
||||||
return this
|
|
||||||
},
|
|
||||||
//表单提交方法
|
|
||||||
submit(){
|
|
||||||
this.$refs.dialogForm.validate(async (valid) => {
|
|
||||||
if (valid) {
|
|
||||||
this.isSaveing = true;
|
|
||||||
var res = await this.$api.demo.post.post(this.form);
|
|
||||||
this.isSaveing = false;
|
|
||||||
if(res.code == 200){
|
|
||||||
this.$emit('success', this.form, this.mode)
|
|
||||||
this.visible = false;
|
|
||||||
this.$message.success("操作成功")
|
|
||||||
}else{
|
|
||||||
this.$alert(res.message, "提示", {type: 'error'})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//表单注入数据
|
|
||||||
setData(data){
|
|
||||||
this.form.id = data.id
|
|
||||||
this.form.label = data.label
|
|
||||||
this.form.alias = data.alias
|
|
||||||
this.form.sort = data.sort
|
|
||||||
this.form.status = data.status
|
|
||||||
this.form.remark = data.remark
|
|
||||||
|
|
||||||
//可以和上面一样单个注入，也可以像下面一样直接合并进去
|
|
||||||
//Object.assign(this.form, data)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-empty :image-size="200" :description="title"></el-empty>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'blank',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
title: "BLANK PAGE :)"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-aside>
|
|
||||||
<el-container>
|
|
||||||
<el-header>Left Header</el-header>
|
|
||||||
<el-main>Left Main</el-main>
|
|
||||||
<el-footer>Left Footer</el-footer>
|
|
||||||
</el-container>
|
|
||||||
</el-aside>
|
|
||||||
<el-container>
|
|
||||||
<el-header>Header</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<el-result icon="info" title="Tip" sub-title="可根据 <el-container> <el-header> <el-aside> <el-main> <el-footer> 灵活运用达到各种布局"></el-result>
|
|
||||||
</el-main>
|
|
||||||
<el-footer>Footer</el-footer>
|
|
||||||
</el-container>
|
|
||||||
<el-aside>
|
|
||||||
<el-container>
|
|
||||||
<el-header>Right Header</el-header>
|
|
||||||
<el-main>Right Main</el-main>
|
|
||||||
<el-footer>Right Footer</el-footer>
|
|
||||||
</el-container>
|
|
||||||
</el-aside>
|
|
||||||
</el-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'layoutLCR',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-header>Header</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<el-result icon="info" title="Tip" sub-title="可根据 <el-container> <el-header> <el-aside> <el-main> <el-footer> 灵活运用达到各种布局"></el-result>
|
|
||||||
</el-main>
|
|
||||||
<el-footer>Footer</el-footer>
|
|
||||||
</el-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'layoutTCB',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,222 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<div class="left-panel">
|
|
||||||
<el-radio-group v-model="dateType" style="margin-right: 15px;">
|
|
||||||
<el-radio-button label="今天"></el-radio-button>
|
|
||||||
<el-radio-button label="昨天"></el-radio-button>
|
|
||||||
<el-radio-button label="最近7天"></el-radio-button>
|
|
||||||
<el-radio-button label="最近30天"></el-radio-button>
|
|
||||||
</el-radio-group>
|
|
||||||
<el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main>
|
|
||||||
<el-card shadow="never">
|
|
||||||
<div class="number-data">
|
|
||||||
<div class="item">
|
|
||||||
<h2>浏览量(PV)
|
|
||||||
<el-tooltip effect="light">
|
|
||||||
<template #content>
|
|
||||||
<div style="width: 200px;line-height: 2;">
|
|
||||||
即通常说的Page View(PV)，用户每打开一个网站页面就被记录1次。用户多次打开同一页面，浏览量值累计。
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<el-icon><el-icon-question-filled /></el-icon>
|
|
||||||
</el-tooltip>
|
|
||||||
</h2>
|
|
||||||
<p>65,715</p>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<h2>访客数(UV)
|
|
||||||
<el-tooltip effect="light">
|
|
||||||
<template #content>
|
|
||||||
<div style="width: 200px;line-height: 2;">
|
|
||||||
一天之内您网站的独立访客数(以Cookie为依据)，一天内同一访客多次访问您网站只计算1个访客。
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<el-icon><el-icon-question-filled /></el-icon>
|
|
||||||
</el-tooltip>
|
|
||||||
</h2>
|
|
||||||
<p>8,936</p>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<h2>IP数
|
|
||||||
<el-tooltip effect="light">
|
|
||||||
<template #content>
|
|
||||||
<div style="width: 200px;line-height: 2;">
|
|
||||||
一天之内您网站的独立访问ip数。
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<el-icon><el-icon-question-filled /></el-icon>
|
|
||||||
</el-tooltip>
|
|
||||||
</h2>
|
|
||||||
<p>10,279</p>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<h2>跳出率
|
|
||||||
<el-tooltip effect="light">
|
|
||||||
<template #content>
|
|
||||||
<div style="width: 200px;line-height: 2;">
|
|
||||||
只浏览了一个页面便离开了网站的访问次数占总的访问次数的百分比。
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<el-icon><el-icon-question-filled /></el-icon>
|
|
||||||
</el-tooltip>
|
|
||||||
</h2>
|
|
||||||
<p>27.92%</p>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<h2>平均访问时长
|
|
||||||
<el-tooltip effect="light">
|
|
||||||
<template #content>
|
|
||||||
<div style="width: 200px;line-height: 2;">
|
|
||||||
访客在一次访问中，平均打开网站的时长。即每次访问中，打开第一个页面到关闭最后一个页面的平均值，打开一个页面时计算打开关闭的时间差。
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<el-icon><el-icon-question-filled /></el-icon>
|
|
||||||
</el-tooltip>
|
|
||||||
</h2>
|
|
||||||
<p>00:19:05</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="chart">
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="8">
|
|
||||||
<xEcharts height="250px" :option="pie"></xEcharts>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="16">
|
|
||||||
<xEcharts height="250px" :option="option"></xEcharts>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never">
|
|
||||||
<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>
|
|
||||||
<el-table-column label="IP数" prop="ip" width="150"></el-table-column>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="流量质量指标" align="center">
|
|
||||||
<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>
|
|
||||||
</xTable>
|
|
||||||
</el-card>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import xEcharts from '@/components/xEcharts';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'chartlist',
|
|
||||||
components: {
|
|
||||||
xEcharts
|
|
||||||
},
|
|
||||||
data(){
|
|
||||||
return {
|
|
||||||
dateType: "今天",
|
|
||||||
date: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
type: "直接访问",
|
|
||||||
pv: "57,847",
|
|
||||||
uv: "7,129",
|
|
||||||
ip: "8,330",
|
|
||||||
out: "26.38%",
|
|
||||||
time: "00:20:35"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "搜索引擎",
|
|
||||||
pv: "5,942",
|
|
||||||
uv: "1,338",
|
|
||||||
ip: "1,449",
|
|
||||||
out: "33.49%",
|
|
||||||
time: "00:11:31"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "外部链接",
|
|
||||||
pv: "1,926",
|
|
||||||
uv: "469",
|
|
||||||
ip: "500",
|
|
||||||
out: "44.53%",
|
|
||||||
time: "00:08:49"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
pie: {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item'
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '访问来源',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['55%', '70%'],
|
|
||||||
itemStyle: {
|
|
||||||
borderRadius: 5,
|
|
||||||
borderColor: '#fff',
|
|
||||||
borderWidth: 1
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{value: 1048, name: '搜索引擎'},
|
|
||||||
{value: 235, name: '直接访问'},
|
|
||||||
{value: 180, name: '外部链接'}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
option: {
|
|
||||||
legend: {
|
|
||||||
data: ['直接访问', '搜索引擎', '外部链接']
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis'
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00'],
|
|
||||||
boundaryGap: false,
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '直接访问',
|
|
||||||
data: [120, 210, 150, 80, 70, 110, 130],
|
|
||||||
type: 'line',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '搜索引擎',
|
|
||||||
data: [110, 180, 120, 120, 60, 90, 110],
|
|
||||||
type: 'line',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '外部链接',
|
|
||||||
data: [50, 90, 60, 60, 30, 40, 50],
|
|
||||||
type: 'line',
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.el-card {margin-bottom: 15px;}
|
|
||||||
|
|
||||||
.number-data {display: flex;}
|
|
||||||
.number-data .item {flex:1;border-right: 1px solid #f0f0f0;padding:0 20px;}
|
|
||||||
.number-data .item:last-child {border: 0;}
|
|
||||||
.number-data .item h2 {font-size: 12px;color: #787a7d;font-weight: normal;display: flex;align-items: center;}
|
|
||||||
.number-data .item h2 i {margin-left: 5px;color: #8cc5ff;cursor: pointer;}
|
|
||||||
.number-data .item p {font-size: 20px;color: #121315;margin-top: 10px;}
|
|
||||||
|
|
||||||
.chart {border-top: 1px solid #f0f0f0;margin-top: 20px;padding-top: 20px;}
|
|
||||||
|
|
||||||
.dark .number-data .item {border-color: var(--el-border-color-light);}
|
|
||||||
.dark .number-data .item p {color: #d0d0d0;}
|
|
||||||
.dark .chart {border-color: var(--el-border-color-light);}
|
|
||||||
</style>
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
<template>
|
|
||||||
<x-page-header :title="id?'编辑':'新增'" description="可用于非常复杂的表单提交，如一些较为简单的表单提交应使用dialog或者drawer更合适" icon="el-icon-burger"></x-page-header>
|
|
||||||
|
|
||||||
<el-main>
|
|
||||||
<el-alert title="注意: 因为keep-alive只接受组件name,导致多路由共用组件时,关闭或刷新一个标签导致其他同一组件的页面缓存失效,后续还在寻找完美的解决方案.建议在列表页使用dialog或者drawer形式" type="error" style="margin-bottom: 15px;"></el-alert>
|
|
||||||
<el-card shadow="never">
|
|
||||||
<el-form ref="form" label-width="100px">
|
|
||||||
<el-form-item label="id">
|
|
||||||
<el-input v-model="id"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary">保存</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</el-card>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'listCrud-detail',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
id: this.$route.query.id,
|
|
||||||
input: ""
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
//修改tab名称
|
|
||||||
this.$store.commit("updateViewTagsTitle", this.id?`CURD编辑ID:${this.id}`:"CURD新增")
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,158 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<div class="left-panel">
|
|
||||||
<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
|
|
||||||
<el-button type="primary" icon="el-icon-plus" @click="addPage">页面新增</el-button>
|
|
||||||
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<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">
|
|
||||||
<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>
|
|
||||||
<el-table-column label="操作" fixed="right" align="right" width="300">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button plain size="small" @click="table_show(scope.row)">查看</el-button>
|
|
||||||
<el-button type="primary" plain size="small" @click="table_edit(scope.row)">编辑</el-button>
|
|
||||||
<el-button type="primary" plain size="small" @click="table_edit_page(scope.row)">页面编辑</el-button>
|
|
||||||
<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
|
|
||||||
<template #reference>
|
|
||||||
<el-button plain type="danger" size="small">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-popconfirm>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</xTable>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
|
|
||||||
<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
|
|
||||||
|
|
||||||
<el-drawer v-model="dialog.info" :size="800" title="详细" direction="rtl" destroy-on-close>
|
|
||||||
<info ref="infoDialog"></info>
|
|
||||||
</el-drawer>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import saveDialog from './save'
|
|
||||||
import info from './info'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'listCrud',
|
|
||||||
components: {
|
|
||||||
saveDialog,
|
|
||||||
info
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
dialog:{
|
|
||||||
save: false,
|
|
||||||
info: false
|
|
||||||
},
|
|
||||||
list: {
|
|
||||||
apiObj: this.$api.demo.list
|
|
||||||
},
|
|
||||||
selection: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//窗口新增
|
|
||||||
add(){
|
|
||||||
this.dialog.save = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.saveDialog.open()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//窗口编辑
|
|
||||||
table_edit(row){
|
|
||||||
this.dialog.save = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.saveDialog.open('edit').setData(row)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//页面新增
|
|
||||||
addPage(){
|
|
||||||
this.$router.push({
|
|
||||||
path: '/template/list/crud/detail',
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//页面编辑
|
|
||||||
table_edit_page(row){
|
|
||||||
this.$router.push({
|
|
||||||
path: '/template/list/crud/detail',
|
|
||||||
query: {
|
|
||||||
id: row.id
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//查看
|
|
||||||
table_show(row){
|
|
||||||
this.dialog.info = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.infoDialog.setData(row)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//删除明细
|
|
||||||
async table_del(row, index){
|
|
||||||
var reqData = {id: row.id}
|
|
||||||
var res = await this.$api.demo.post.post(reqData);
|
|
||||||
if(res.code == 200){
|
|
||||||
this.$refs.table.removeIndex(index)
|
|
||||||
this.$message.success("删除成功")
|
|
||||||
}else{
|
|
||||||
this.$alert(res.message, "提示", {type: 'error'})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//批量删除
|
|
||||||
async batch_del(){
|
|
||||||
var confirmRes = await this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
|
|
||||||
type: 'warning',
|
|
||||||
confirmButtonText: '删除',
|
|
||||||
confirmButtonClass: 'el-button--danger'
|
|
||||||
}).catch(() => {})
|
|
||||||
|
|
||||||
if(!confirmRes){
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
var ids = this.selection.map(v => v.id)
|
|
||||||
this.$refs.table.removeKeys(ids)
|
|
||||||
this.$message.success("操作成功")
|
|
||||||
|
|
||||||
},
|
|
||||||
//表格选择后回调事件
|
|
||||||
selectionChange(selection){
|
|
||||||
this.selection = selection
|
|
||||||
},
|
|
||||||
//本地更新数据
|
|
||||||
handleSaveSuccess(data, mode){
|
|
||||||
//为了减少网络请求，直接变更表格内存数据
|
|
||||||
if(mode=='add'){
|
|
||||||
this.$refs.table.unshiftRow(data)
|
|
||||||
}else if(mode=='edit'){
|
|
||||||
this.$refs.table.updateKey(data)
|
|
||||||
}
|
|
||||||
|
|
||||||
//当然也可以暴力的直接刷新表格
|
|
||||||
// this.$refs.table.refresh()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main style="padding:0 20px;">
|
|
||||||
<el-card shadow="never">
|
|
||||||
<el-descriptions title="Table row data" :column="2" border>
|
|
||||||
<el-descriptions-item v-for=" (val, key) in data" :key="key" :label="key" width="150px">{{val}}</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
</el-card>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
data: {
|
|
||||||
id: ""
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//注入数据
|
|
||||||
setData(data){
|
|
||||||
this.data = data
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,114 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-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">
|
|
||||||
<el-form-item label="姓名" prop="name">
|
|
||||||
<el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="性别" prop="sex">
|
|
||||||
<el-radio-group v-model="form.sex">
|
|
||||||
<el-radio label="男">男</el-radio>
|
|
||||||
<el-radio label="女">女</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="邮箱" prop="email">
|
|
||||||
<el-input v-model="form.email" placeholder="请输入邮箱" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="评分" prop="num">
|
|
||||||
<el-input-number v-model="form.num" :min="0" style="width: 100%;"></el-input-number>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="状态" prop="boolean">
|
|
||||||
<el-switch v-model="form.boolean"></el-switch>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="visible=false" >取 消</el-button>
|
|
||||||
<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
emits: ['success', 'closed'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
mode: "add",
|
|
||||||
titleMap: {
|
|
||||||
add: '新增',
|
|
||||||
edit: '编辑',
|
|
||||||
show: '查看'
|
|
||||||
},
|
|
||||||
visible: false,
|
|
||||||
isSaveing: false,
|
|
||||||
//表单数据
|
|
||||||
form: {
|
|
||||||
id:"",
|
|
||||||
name: "",
|
|
||||||
sex: "男",
|
|
||||||
email: "",
|
|
||||||
num: 0,
|
|
||||||
boolean: true
|
|
||||||
},
|
|
||||||
//验证规则
|
|
||||||
rules: {
|
|
||||||
name: [
|
|
||||||
{required: true, message: '请输入姓名'}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
//所需数据选项
|
|
||||||
groups: [],
|
|
||||||
groupsProps: {
|
|
||||||
value: "id",
|
|
||||||
emitPath: false,
|
|
||||||
checkStrictly: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//显示
|
|
||||||
open(mode='add'){
|
|
||||||
this.mode = mode;
|
|
||||||
this.visible = true;
|
|
||||||
return this
|
|
||||||
},
|
|
||||||
//表单提交方法
|
|
||||||
async submit(){
|
|
||||||
var valid = await this.$refs.dialogForm.validate().catch(() => {})
|
|
||||||
if(!valid){
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
this.isSaveing = true;
|
|
||||||
var res = await this.$api.demo.post.post(this.form);
|
|
||||||
this.isSaveing = false;
|
|
||||||
if(res.code == 200){
|
|
||||||
if(this.mode=='add'){
|
|
||||||
this.form.id = res.data
|
|
||||||
}
|
|
||||||
this.$emit('success', this.form, this.mode)
|
|
||||||
this.visible = false;
|
|
||||||
this.$message.success("操作成功")
|
|
||||||
}else{
|
|
||||||
this.$alert(res.message, "提示", {type: 'error'})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//表单注入数据
|
|
||||||
setData(data){
|
|
||||||
this.form.id = data.id
|
|
||||||
this.form.name = data.name
|
|
||||||
this.form.sex = data.sex
|
|
||||||
this.form.email = data.email
|
|
||||||
this.form.num = data.num
|
|
||||||
this.form.boolean = data.boolean
|
|
||||||
|
|
||||||
//可以和上面一样单个注入，也可以像下面一样直接合并进去
|
|
||||||
//Object.assign(this.form, data)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-aside width="40%">
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<div class="left-panel">
|
|
||||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
|
||||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<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>
|
|
||||||
<el-table-column label="进度" prop="progress" width="250" sortable>
|
|
||||||
<template #default="scope">
|
|
||||||
<el-progress :percentage="scope.row.progress" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="创建日期" prop="datetime" width="150" sortable></el-table-column>
|
|
||||||
</xTable>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</el-aside>
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<div class="left-panel">
|
|
||||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
|
||||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<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">
|
|
||||||
<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>
|
|
||||||
</xTable>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</el-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'listSon',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
list: {
|
|
||||||
apiObj: this.$api.demo.list
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
rowClick(row){
|
|
||||||
var params = {
|
|
||||||
groupId: row.id
|
|
||||||
}
|
|
||||||
this.$refs.sontable.reload(params)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,167 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-header class="header-tabs">
|
|
||||||
<el-tabs type="card" v-model="groupId" @tab-change="tabChange">
|
|
||||||
<el-tab-pane label="所有" name="0"></el-tab-pane>
|
|
||||||
<el-tab-pane label="未完成" name="1"></el-tab-pane>
|
|
||||||
<el-tab-pane label="已退回" name="2"></el-tab-pane>
|
|
||||||
<el-tab-pane label="已关闭" name="3"></el-tab-pane>
|
|
||||||
<el-tab-pane label="已完成" name="4"></el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</el-header>
|
|
||||||
<el-header style="height: auto;">
|
|
||||||
<x-select-filter :data="filterData" :label-width="80" @on-change="filterChange"></x-select-filter>
|
|
||||||
</el-header>
|
|
||||||
<el-header>
|
|
||||||
<div class="left-panel">
|
|
||||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
|
||||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
|
||||||
</div>
|
|
||||||
<div class="right-panel">
|
|
||||||
<div class="right-panel-search">
|
|
||||||
<el-input v-model="search.keyword" placeholder="关键词" clearable></el-input>
|
|
||||||
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
<el-table-column label="操作" fixed="right" align="right" width="160">
|
|
||||||
<template #default>
|
|
||||||
<el-button-group>
|
|
||||||
<el-button text type="primary" size="small">查看</el-button>
|
|
||||||
<el-button text type="primary" size="small">编辑</el-button>
|
|
||||||
<el-button text type="primary" size="small">删除</el-button>
|
|
||||||
</el-button-group>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</xTable>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import xSelectFilter from '@/components/xSelectFilter'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'listTab',
|
|
||||||
components: {
|
|
||||||
xSelectFilter
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
groupId: "0",
|
|
||||||
filterData: [
|
|
||||||
{
|
|
||||||
title: "所属行业",
|
|
||||||
key: "type",
|
|
||||||
multiple: true,
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
label: "全部",
|
|
||||||
value: ""
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "汽车",
|
|
||||||
value: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "大健康",
|
|
||||||
value: "2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "节能环保",
|
|
||||||
value: "3"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "智能信息",
|
|
||||||
value: "4"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "文化旅游",
|
|
||||||
value: "5"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "新材料",
|
|
||||||
value: "6"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "高端装备",
|
|
||||||
value: "7"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "其他行业",
|
|
||||||
value: "99"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "所属区域",
|
|
||||||
key: "area",
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
label: "全部",
|
|
||||||
value: ""
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "华东",
|
|
||||||
value: "HD"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "华北",
|
|
||||||
value: "HB"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "华南",
|
|
||||||
value: "HN"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "华中",
|
|
||||||
value: "HZ"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "华西南",
|
|
||||||
value: "HXN"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "东北",
|
|
||||||
value: "DB"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
list: {
|
|
||||||
apiObj: this.$api.demo.list
|
|
||||||
},
|
|
||||||
search: {
|
|
||||||
keyword: ""
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//搜索
|
|
||||||
upsearch(){
|
|
||||||
this.$refs.table.upData(this.search)
|
|
||||||
},
|
|
||||||
//标签切换
|
|
||||||
tabChange(name){
|
|
||||||
var params = {
|
|
||||||
groupId: name
|
|
||||||
}
|
|
||||||
this.$refs.table.reload(params)
|
|
||||||
},
|
|
||||||
filterChange(data){
|
|
||||||
this.$refs.table.upData(data)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,128 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-aside width="200px">
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<el-tree ref="group" class="menu" node-key="id" :data="groupData" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</el-aside>
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<div class="left-panel">
|
|
||||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
|
||||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
|
||||||
</div>
|
|
||||||
<div class="right-panel">
|
|
||||||
<div class="right-panel-search">
|
|
||||||
<el-input v-model="search.keyword" placeholder="关键词" clearable></el-input>
|
|
||||||
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
<el-table-column label="操作" fixed="right" align="right" width="160">
|
|
||||||
<template #default>
|
|
||||||
<el-button-group>
|
|
||||||
<el-button text type="primary" size="small">查看</el-button>
|
|
||||||
<el-button text type="primary" size="small">编辑</el-button>
|
|
||||||
<el-button text type="primary" size="small">删除</el-button>
|
|
||||||
</el-button-group>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</xTable>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</el-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'listTree',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
groupFilterText: "",
|
|
||||||
groupData: [
|
|
||||||
{
|
|
||||||
id: "",
|
|
||||||
label: "所有"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "1",
|
|
||||||
label: "华东总部",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: "11",
|
|
||||||
label: "售前客服部"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "12",
|
|
||||||
label: "技术研发部"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "13",
|
|
||||||
label: "行政人事部"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
label: "华难总部",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: "21",
|
|
||||||
label: "售前客服部"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "22",
|
|
||||||
label: "技术研发部"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
list: {
|
|
||||||
apiObj: this.$api.demo.list
|
|
||||||
},
|
|
||||||
search: {
|
|
||||||
keyword: ""
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
groupFilterText(val) {
|
|
||||||
this.$refs.group.filter(val);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//树过滤
|
|
||||||
groupFilterNode(value, data){
|
|
||||||
if (!value) return true;
|
|
||||||
return data.label.indexOf(value) !== -1;
|
|
||||||
},
|
|
||||||
//树点击事件
|
|
||||||
groupClick(data){
|
|
||||||
var params = {
|
|
||||||
groupId: data.id
|
|
||||||
}
|
|
||||||
this.$refs.table.reload(params)
|
|
||||||
},
|
|
||||||
//搜索
|
|
||||||
upsearch(){
|
|
||||||
this.$refs.table.upData(this.search)
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main class="sc-page">
|
|
||||||
<el-page-header content="定宽页面" />
|
|
||||||
<el-alert class="page-msg" description="<el-main>添加定宽样式 .sc-page 即可定宽, 固定1200px宽度, 适用于一些无法自适应的页面, 类似报表等需要固定宽度的页面. 其实定宽页面更受C端用户接受和习惯" type="warning" show-icon :closable="false" />
|
|
||||||
<el-card shadow="never" header="所有主机">
|
|
||||||
<div class="page-buttons">
|
|
||||||
<el-button type="primary" style="width: 180px;">创建云主机</el-button>
|
|
||||||
<el-button type="primary" text>管理秘钥</el-button>
|
|
||||||
<el-button type="primary" text>黑名单</el-button>
|
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
<el-table-column label="数据盘" prop="d" width="150"></el-table-column>
|
|
||||||
<el-table-column label="业务状态" prop="zt" width="150">
|
|
||||||
<el-tag type="success">运行中</el-tag>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" width="70">
|
|
||||||
<el-dropdown>
|
|
||||||
<el-button icon="el-icon-more" size="small"></el-button>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item>配额</el-dropdown-item>
|
|
||||||
<el-dropdown-item divided>重启</el-dropdown-item>
|
|
||||||
<el-dropdown-item >停机</el-dropdown-item>
|
|
||||||
<el-dropdown-item divided>释放主机</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
</el-table-column>
|
|
||||||
</xTable>
|
|
||||||
</el-card>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'widthlist',
|
|
||||||
data(){
|
|
||||||
return {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: "WIN-server-202256324",
|
|
||||||
ip: "211.187.11.18",
|
|
||||||
c: "80G",
|
|
||||||
d: "2048G",
|
|
||||||
out: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "WIN-server-20210312081254",
|
|
||||||
ip: "211.187.41.56",
|
|
||||||
c: "80G",
|
|
||||||
d: "2048G",
|
|
||||||
out: "1"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.page-msg {margin: 15px 0;}
|
|
||||||
.page-buttons {margin-bottom: 20px;}
|
|
||||||
</style>
|
|
||||||
@ -1,150 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-card shadow="never" header="分步表单">
|
|
||||||
<el-steps :active="active" align-center style="margin-bottom: 20px;">
|
|
||||||
<el-step title="填写转账信息"></el-step>
|
|
||||||
<el-step title="确认转账信息"></el-step>
|
|
||||||
<el-step title="完成"></el-step>
|
|
||||||
</el-steps>
|
|
||||||
<el-row>
|
|
||||||
<el-col :lg="{span: 8, offset: 8}">
|
|
||||||
<el-form v-if="active==0" ref="stepForm_0" :model="form" :rules="rules" label-position="top">
|
|
||||||
<el-form-item label="付款账户" prop="paymentAccount">
|
|
||||||
<el-select v-model="form.paymentAccount" clearable>
|
|
||||||
<el-option label="sakuya@scui.com" value="sakuya@scui.com"></el-option>
|
|
||||||
<el-option label="lolicode@scui.com" value="lolicode@scui.com"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="收款账户" prop="collectionAccount">
|
|
||||||
<el-input v-model="form.collectionAccount" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="收款人姓名" prop="collectionName">
|
|
||||||
<el-input v-model="form.collectionName" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="转账金额" prop="amount">
|
|
||||||
<el-input v-model="form.amount"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<el-form v-if="active==1" ref="stepForm_1" :model="form" :rules="rules" label-position="top">
|
|
||||||
<el-alert title="确认转账后，资金将直接打入对方账户，无法退回。" type="warning" show-icon style="margin-bottom: 15px;"/>
|
|
||||||
<el-descriptions :column="1" border>
|
|
||||||
<el-descriptions-item label="付款账户">{{form.paymentAccount}}</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="收款账户">{{form.collectionAccount}}</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="收款人姓名">{{form.collectionName}}</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="转账金额">{{form.amount}} 元</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
<el-divider></el-divider>
|
|
||||||
<el-form-item label="支付密码" prop="payPassword">
|
|
||||||
<el-input v-model="form.payPassword" show-password placeholder="请输入"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div v-if="active==2">
|
|
||||||
<el-result icon="success" title="操作成功" sub-title="预计两小时内到账">
|
|
||||||
<template #extra>
|
|
||||||
<el-button type="primary" @click="again">再转一笔</el-button>
|
|
||||||
<el-button>查看账单</el-button>
|
|
||||||
</template>
|
|
||||||
</el-result>
|
|
||||||
</div>
|
|
||||||
<el-button v-if="active>0 && active<2" @click="pre" :disabled="submitLoading">上一步</el-button>
|
|
||||||
<el-button v-if="active<1" type="primary" @click="next">下一步</el-button>
|
|
||||||
<el-button v-if="active==1" type="primary" @click="submit" :loading="submitLoading">提交</el-button>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-card>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'stepform',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
active: 0,
|
|
||||||
submitLoading: false,
|
|
||||||
form: {
|
|
||||||
paymentAccount: 'lolicode@scui.com',
|
|
||||||
collectionAccount: 'test@example.com',
|
|
||||||
collectionName: 'Lolowan',
|
|
||||||
amount: '100',
|
|
||||||
payPassword: ''
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
paymentAccount: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: '请选择付款账户',
|
|
||||||
}
|
|
||||||
],
|
|
||||||
collectionAccount: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: '请输入收款账户',
|
|
||||||
}
|
|
||||||
],
|
|
||||||
collectionName: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: '请输入收款人姓名',
|
|
||||||
}
|
|
||||||
],
|
|
||||||
amount: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: '请输入转账金额',
|
|
||||||
}
|
|
||||||
],
|
|
||||||
payPassword: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: '需要支付密码才能进行支付',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//下一步
|
|
||||||
next(){
|
|
||||||
const formName = `stepForm_${this.active}`
|
|
||||||
this.$refs[formName].validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
this.active += 1
|
|
||||||
}else{
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//上一步
|
|
||||||
pre(){
|
|
||||||
this.active -= 1
|
|
||||||
},
|
|
||||||
//提交
|
|
||||||
submit(){
|
|
||||||
const formName = `stepForm_${this.active}`
|
|
||||||
this.$refs[formName].validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
this.submitLoading = true
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.submitLoading = false
|
|
||||||
this.active += 1
|
|
||||||
},1000)
|
|
||||||
}else{
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//再来一次
|
|
||||||
again(){
|
|
||||||
this.active = 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.el-steps:deep(.is-finish) .el-step__line {background: var(--el-color-primary);}
|
|
||||||
</style>
|
|
||||||
@ -1,232 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-alert title="感谢百度Echarts组件, SCUI经过封装后在VUE里使用更方便而且暴露Echarts所有方法,具体请查看本文件" type="success" style="margin-bottom:20px;"></el-alert>
|
|
||||||
<el-row :gutter="15">
|
|
||||||
<el-col :lg="8">
|
|
||||||
<el-card shadow="never">
|
|
||||||
<xEcharts height="300px" :option="option"></xEcharts>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="8">
|
|
||||||
<el-card shadow="never">
|
|
||||||
<xEcharts height="300px" :option="option2"></xEcharts>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="8">
|
|
||||||
<el-card shadow="never">
|
|
||||||
<xEcharts height="300px" :option="option3"></xEcharts>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="8">
|
|
||||||
<el-card shadow="never">
|
|
||||||
<xEcharts height="300px" :option="option4"></xEcharts>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="8">
|
|
||||||
<el-card shadow="never">
|
|
||||||
<xEcharts height="300px" :option="option5"></xEcharts>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="8">
|
|
||||||
<el-card shadow="never">
|
|
||||||
<xEcharts height="300px" :option="option6"></xEcharts>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import xEcharts from '@/components/xEcharts';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 引入组件 @/components/xEcharts
|
|
||||||
* 组件内部会自动加载主题 @/components/xEcharts/echarts-theme-T.js
|
|
||||||
* 支持props包括 height，width，option
|
|
||||||
* 组件export百度Echarts所有方法，使用方式: new xEcharts[fun]
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'chart',
|
|
||||||
components: {
|
|
||||||
xEcharts
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
option: {
|
|
||||||
title: {
|
|
||||||
text: 'Bar Demo',
|
|
||||||
subtext: '基础柱状图',
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: '80px'
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis'
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
data: [120, 200, 150, 80, 70, 110, 130],
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: '15px',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
data: [110, 180, 120, 120, 60, 90, 110],
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: '15px',
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
option2: {
|
|
||||||
title: {
|
|
||||||
text: 'Line Demo',
|
|
||||||
subtext: '基础折线图',
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: '80px'
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis'
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
data: [120, 200, 150, 80, 70, 110, 130],
|
|
||||||
type: 'line',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
data: [110, 180, 120, 120, 60, 90, 110],
|
|
||||||
type: 'line',
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
option3: {
|
|
||||||
title: {
|
|
||||||
text: 'Pie Demo',
|
|
||||||
subtext: '基础饼图',
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item'
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '访问来源',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['40%', '70%'],
|
|
||||||
center: ['50%', '60%'],
|
|
||||||
label: false,
|
|
||||||
data: [
|
|
||||||
{value: 1048, name: '搜索引擎'},
|
|
||||||
{value: 735, name: '直接访问'},
|
|
||||||
{value: 580, name: '邮件营销'},
|
|
||||||
{value: 484, name: '联盟广告'},
|
|
||||||
{value: 300, name: '视频广告'}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
option4: {
|
|
||||||
title: {
|
|
||||||
text: 'Radar Demo',
|
|
||||||
subtext: '基础雷达(属性)图',
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item'
|
|
||||||
},
|
|
||||||
radar: {
|
|
||||||
radius: 100,
|
|
||||||
center: ['50%', '55%'],
|
|
||||||
indicator: [
|
|
||||||
{ name: '销售', max: 100},
|
|
||||||
{ name: '管理', max: 100},
|
|
||||||
{ name: '信息技术', max: 100},
|
|
||||||
{ name: '客服', max: 100},
|
|
||||||
{ name: '研发', max: 100},
|
|
||||||
{ name: '市场', max: 100}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: "SCUI",
|
|
||||||
type: 'radar',
|
|
||||||
areaStyle: {},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: [74, 90, 95, 65, 80, 31],
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
option5: {
|
|
||||||
title: {
|
|
||||||
text: 'Kline Demo',
|
|
||||||
subtext: '基础K线图',
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: '80px'
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'cross'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
data: ['2017-10-23', '2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27', '2017-10-28', '2017-10-29', '2017-10-30'],
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
scale: true,
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
type: 'k',
|
|
||||||
data: [
|
|
||||||
[2213.19,2199.31,2191.85,2224.63],
|
|
||||||
[2203.89,2177.91,2173.86,2210.58],
|
|
||||||
[2170.78,2174.12,2161.14,2179.65],
|
|
||||||
[2179.05,2205.5,2179.05,2222.81],
|
|
||||||
[2212.5,2231.17,2212.5,2236.07],
|
|
||||||
[2227.86,2235.57,2219.44,2240.26],
|
|
||||||
[2242.39,2246.3,2235.42,2255.21],
|
|
||||||
[2246.96,2232.97,2221.38,2247.86]
|
|
||||||
]
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
option6: {
|
|
||||||
title: {
|
|
||||||
text: 'Gauge Demo',
|
|
||||||
subtext: '基础仪表盘',
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
center: ['50%', '60%'],
|
|
||||||
type: 'gauge',
|
|
||||||
anchor: {
|
|
||||||
show: true,
|
|
||||||
showAbove: true,
|
|
||||||
size: 20,
|
|
||||||
itemStyle: {
|
|
||||||
borderWidth: 5
|
|
||||||
}
|
|
||||||
},
|
|
||||||
progress: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
data: [{
|
|
||||||
value: 70
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,88 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-alert title="感谢codeMirror组件" type="success" style="margin-bottom:20px;"></el-alert>
|
|
||||||
<el-row :gutter="15">
|
|
||||||
<el-col :lg="24">
|
|
||||||
<el-card shadow="never" header="JSON">
|
|
||||||
<x-code-editor ref="editor" v-model="json" mode="javascript" :height="200"></x-code-editor>
|
|
||||||
<div style="margin-top: 15px;">
|
|
||||||
<el-button type="primary" @click="getCode">获取v-model</el-button>
|
|
||||||
<el-button type="primary" @click="getValue">getValue()</el-button>
|
|
||||||
<el-button type="primary" @click="setValue">setValue()</el-button>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="12">
|
|
||||||
<el-card shadow="never" header="javascript Darcula主题">
|
|
||||||
<x-code-editor v-model="js" mode="javascript" theme="darcula"></x-code-editor>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<el-col :lg="12">
|
|
||||||
<el-card shadow="never" header="SQL">
|
|
||||||
<x-code-editor v-model="sql" mode="sql"></x-code-editor>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { defineAsyncComponent } from 'vue';
|
|
||||||
const xCodeEditor = defineAsyncComponent(() => import('@/components/xCodeEditor'));
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "codeeditor",
|
|
||||||
components: {
|
|
||||||
xCodeEditor
|
|
||||||
},
|
|
||||||
data(){
|
|
||||||
return {
|
|
||||||
json:
|
|
||||||
`{
|
|
||||||
"name": "SCUI",
|
|
||||||
"menu": [
|
|
||||||
{
|
|
||||||
"title": "VUE 3",
|
|
||||||
"type": true,
|
|
||||||
"link": "https://v3.cn.vuejs.org"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "elementplus",
|
|
||||||
"type": false,
|
|
||||||
"link": "https://element-plus.gitee.io"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}`,
|
|
||||||
js:
|
|
||||||
`// Demo code (the actual new parser character stream implementation)
|
|
||||||
function StringStream(string) {
|
|
||||||
this.pos = 0;
|
|
||||||
this.string = string;
|
|
||||||
}`,
|
|
||||||
sql:
|
|
||||||
`SELECT \`author\`, \`title\` FROM \`posts\`
|
|
||||||
WHERE \`status\` = 'draft' AND \`author\` IN('author1','author2')
|
|
||||||
ORDER BY \`created_at\` DESC, \`id\` DESC LIMIT 0, 10;`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getCode(){
|
|
||||||
this.$message("请查看控制台")
|
|
||||||
console.log(this.json)
|
|
||||||
},
|
|
||||||
getValue(){
|
|
||||||
this.$message("请查看控制台")
|
|
||||||
var v = this.$refs.editor.coder.getValue()
|
|
||||||
console.log(v)
|
|
||||||
},
|
|
||||||
setValue(){
|
|
||||||
var v = `{"key":"newValue"}`
|
|
||||||
this.$refs.editor.coder.setValue(v)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,117 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Descripttion: 右键简单组件演示文件
|
|
||||||
* @version: 1.0
|
|
||||||
* @Author: sakuya
|
|
||||||
* @Date: 2021年7月22日16:31:14
|
|
||||||
* @LastEditors:
|
|
||||||
* @LastEditTime:
|
|
||||||
-->
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-row :gutter="15">
|
|
||||||
<el-col :lg="12">
|
|
||||||
<el-card shadow="never">
|
|
||||||
<el-alert title="试试右键表格行看看. 支持多级菜单, 动态菜单等等等..." type="success" style="margin-bottom:20px;"></el-alert>
|
|
||||||
<el-table ref="table" :data="tableData" highlight-current-row @row-contextmenu="rowContextmenu">
|
|
||||||
<el-table-column type="expand">
|
|
||||||
<template #default="props">
|
|
||||||
<el-empty :description="props.row.id + ' 自定义扩展行'" :image-size="60"></el-empty>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="id" label="ID" width="50"></el-table-column>
|
|
||||||
<el-table-column prop="name" label="NAME" width="220"></el-table-column>
|
|
||||||
<el-table-column prop="date" label="DATE"></el-table-column>
|
|
||||||
<el-table-column prop="state" label="STATE"></el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="12">
|
|
||||||
<el-card shadow="never" @contextmenu.prevent="openMenu">
|
|
||||||
<div style="height:500px;display: flex;flex-direction: column;align-items: center;justify-content: center;color: #999;">
|
|
||||||
试试看在上下左右四个角落右键，看看边缘位置修正效果
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-main>
|
|
||||||
|
|
||||||
<x-contextmenu ref="contextmenu" @command="handleCommand" @visible-change="visibleChange">
|
|
||||||
<x-contextmenu-item command="a" title="返回(B)" suffix="Alt+←"></x-contextmenu-item>
|
|
||||||
<x-contextmenu-item command="b" title="重新加载(R)" suffix="Ctrl+R" icon="el-icon-refresh"></x-contextmenu-item>
|
|
||||||
<x-contextmenu-item title="切换兼容性模式" divided>
|
|
||||||
<x-contextmenu-item command="c1" title="二级菜单1"></x-contextmenu-item>
|
|
||||||
<x-contextmenu-item title="二级菜单2">
|
|
||||||
<x-contextmenu-item command="c2-1" title="三级菜单1"></x-contextmenu-item>
|
|
||||||
<x-contextmenu-item command="c2-2" title="三级菜单2"></x-contextmenu-item>
|
|
||||||
<x-contextmenu-item command="c2-3" title="三级菜单3"></x-contextmenu-item>
|
|
||||||
</x-contextmenu-item>
|
|
||||||
<x-contextmenu-item command="c3" title="二级菜单3"></x-contextmenu-item>
|
|
||||||
</x-contextmenu-item>
|
|
||||||
<x-contextmenu-item command="d" title="属性(P)" divided :disabled="row&&row.state==0"></x-contextmenu-item>
|
|
||||||
<x-contextmenu-item command="e" title="设置state=1" v-if="row&&row.state==0"></x-contextmenu-item>
|
|
||||||
</x-contextmenu>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import xContextmenu from '@/components/xContextmenu'
|
|
||||||
import xContextmenuItem from '@/components/xContextmenu/item'
|
|
||||||
export default {
|
|
||||||
name: 'contextmenu',
|
|
||||||
components: {
|
|
||||||
xContextmenu,
|
|
||||||
xContextmenuItem
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
row: null,
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
name: 'Sakuya',
|
|
||||||
date: '2021-10-10',
|
|
||||||
state: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
name: 'Lolowan(此行右键属性禁用)',
|
|
||||||
date: '2021-10-09',
|
|
||||||
state: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '3',
|
|
||||||
name: 'Ali',
|
|
||||||
date: '2021-10-08',
|
|
||||||
state: 1
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
rowContextmenu(row, column, event){
|
|
||||||
this.row = row
|
|
||||||
this.$refs.table.setCurrentRow(row);
|
|
||||||
this.$refs.contextmenu.openMenu(event)
|
|
||||||
},
|
|
||||||
openMenu(e){
|
|
||||||
this.row = null
|
|
||||||
this.$refs.contextmenu.openMenu(e)
|
|
||||||
},
|
|
||||||
handleCommand(command){
|
|
||||||
this.$message('click on item ' + command)
|
|
||||||
if(command == 'e'){
|
|
||||||
this.row.state = 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
visibleChange(visible){
|
|
||||||
if(!visible){
|
|
||||||
this.$refs.table.setCurrentRow();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-alert title="SCUI独创, 区别于市面上的规则生成器, 对不是很理解Cron的操作员也可以选择设置的快捷录入" type="success" style="margin-bottom:20px;"></el-alert>
|
|
||||||
<el-row :gutter="15">
|
|
||||||
<el-col :lg="12">
|
|
||||||
<el-card shadow="never" header="默认">
|
|
||||||
<x-cron v-model="v1" placeholder="请输入Cron定时规则" clearable></x-cron>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="12">
|
|
||||||
<el-card shadow="never" header="快捷扩展">
|
|
||||||
<x-cron v-model="v2" placeholder="请输入Cron定时规则" clearable :shortcuts="shortcuts"></x-cron>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import xCron from '@/components/xCron'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'cron',
|
|
||||||
components: {
|
|
||||||
xCron
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
v1: "",
|
|
||||||
v2: "",
|
|
||||||
shortcuts: [
|
|
||||||
{
|
|
||||||
text: "每天8点和12点 (自定义追加)",
|
|
||||||
value: "0 0 8,12 * * ?"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,93 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Descripttion: 图像剪裁组件演示文件
|
|
||||||
-->
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-row :gutter="15">
|
|
||||||
<el-col :lg="14">
|
|
||||||
<el-card shadow="never">
|
|
||||||
<x-cropper :src="cropperImg" :compress="compress" :aspectRatio="aspectRatio" ref="cropper"></x-cropper>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never" header="参数和方法">
|
|
||||||
<el-form label-width="100px">
|
|
||||||
<el-form-item label="aspectRatio">
|
|
||||||
<el-select v-model="aspectRatio" placeholder="请选择">
|
|
||||||
<el-option label="自由" :value="0"></el-option>
|
|
||||||
<el-option label="1:1" :value="1/1"></el-option>
|
|
||||||
<el-option label="4:3" :value="4/3"></el-option>
|
|
||||||
<el-option label="16:9" :value="16/9"></el-option>
|
|
||||||
</el-select>
|
|
||||||
<div class="el-form-item-msg">固定选区或者不固定</div>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="compress">
|
|
||||||
<el-select v-model="compress" placeholder="请选择">
|
|
||||||
<el-option label="0.1" :value="0.1"></el-option>
|
|
||||||
<el-option label="0.5" :value="0.5"></el-option>
|
|
||||||
<el-option label="1" :value="1"></el-option>
|
|
||||||
</el-select>
|
|
||||||
<div class="el-form-item-msg">图像压缩率，值为：0.1-1</div>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<el-button type="primary" plain @click="getBase64">Base64</el-button>
|
|
||||||
<el-button type="primary" plain @click="getBlob">Blob</el-button>
|
|
||||||
<el-button type="primary" plain @click="getFile">File</el-button>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never" header="方法结果">
|
|
||||||
<img :src="imgData" />
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="10">
|
|
||||||
<el-card shadow="never" header="已内置剪裁的上传组件">
|
|
||||||
<el-alert title="设置cropper就可以开启上传前剪裁, 并已封装compress和aspectRatio, 打开F12查看网络请求" type="success" style="margin-bottom:20px;"></el-alert>
|
|
||||||
<x-upload v-model="uploadImg" title="开启剪裁" :cropper="true" :compress="1" :aspectRatio="1/1"></x-upload>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-main>
|
|
||||||
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import xCropper from '@/components/xCropper'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'cropper',
|
|
||||||
components: {
|
|
||||||
xCropper
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
cropperImg: 'img/avatar.jpg',
|
|
||||||
compress: 0.5,
|
|
||||||
aspectRatio: 0,
|
|
||||||
uploadImg: '',
|
|
||||||
imgData: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getBase64(){
|
|
||||||
this.$refs.cropper.getCropData(data=>{
|
|
||||||
this.imgData = data
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getBlob(){
|
|
||||||
this.$refs.cropper.getCropBlob(blob=>{
|
|
||||||
this.imgData = URL.createObjectURL(blob)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getFile(){
|
|
||||||
this.$refs.cropper.getCropFile(file=>{
|
|
||||||
let aTag = document.createElement('a')
|
|
||||||
aTag.download = file.name;
|
|
||||||
aTag.href = URL.createObjectURL(file)
|
|
||||||
aTag.click()
|
|
||||||
}, 'fileName.jpg', 'image/jpeg')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
<template>
|
|
||||||
<sc-dialog v-model="visible" title="提示" @closed="$emit('closed')">
|
|
||||||
内容1
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="visible = false">取 消</el-button>
|
|
||||||
<el-button type="primary" @click="visible = false">确 定</el-button>
|
|
||||||
</template>
|
|
||||||
</sc-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
visible: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
console.log("加载./dialog1组件完成")
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
<template>
|
|
||||||
<sc-dialog v-model="visible" title="提示" @closed="$emit('closed')">
|
|
||||||
内容2
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="visible = false">取 消</el-button>
|
|
||||||
<el-button type="primary" @click="visible = false">确 定</el-button>
|
|
||||||
</template>
|
|
||||||
</sc-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
visible: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
console.log("加载./dialog2组件完成")
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,101 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Descripttion: scDialog 弹窗扩展演示文件
|
|
||||||
* @version: 1.0
|
|
||||||
* @Author: sakuya
|
|
||||||
* @Date: 2021年8月27日08:56:30
|
|
||||||
* @LastEditors:
|
|
||||||
* @LastEditTime:
|
|
||||||
-->
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-alert title="二次封装el-dialog,加入加载中/最大化." type="success" style="margin:0 0 20px 0;"></el-alert>
|
|
||||||
<el-card shadow="never" header="内置">
|
|
||||||
<el-button type="primary" @click="open1">默认</el-button>
|
|
||||||
<el-button type="primary" @click="open2">加载</el-button>
|
|
||||||
<el-button type="primary" @click="open3">禁止拖拽最大化和关闭</el-button>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never" header="异步" style="margin-top: 15px;">
|
|
||||||
<el-button type="primary" @click="asyn1">异步加载1</el-button>
|
|
||||||
<el-button type="primary" @click="asyn2">异步加载2</el-button>
|
|
||||||
<el-alert title="适用于页面有很多弹窗操作,利用异步组件按需加载,加快首屏的加载速度和打包体积" style="margin-top: 20px;"></el-alert>
|
|
||||||
</el-card>
|
|
||||||
</el-main>
|
|
||||||
|
|
||||||
<sc-dialog v-model="dialog1" draggable title="提示">
|
|
||||||
内容
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="dialog1 = false">取 消</el-button>
|
|
||||||
<el-button type="primary" @click="dialog1 = false">确 定</el-button>
|
|
||||||
</template>
|
|
||||||
</sc-dialog>
|
|
||||||
|
|
||||||
<sc-dialog v-model="dialog2" draggable title="模拟加载" :width="400" :loading="dialog2Loading">
|
|
||||||
<el-empty description="NO Data" :image-size="80"></el-empty>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="dialog2 = false">取 消</el-button>
|
|
||||||
<el-button type="primary" @click="dialog2 = false" :loading="dialog2Loading">确 定</el-button>
|
|
||||||
</template>
|
|
||||||
</sc-dialog>
|
|
||||||
|
|
||||||
<sc-dialog v-model="dialog3" title="禁用拖拽" :show-fullscreen="false" :show-close="false">
|
|
||||||
内容
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="dialog3 = false">取 消</el-button>
|
|
||||||
<el-button type="primary" @click="dialog3 = false">确 定</el-button>
|
|
||||||
</template>
|
|
||||||
</sc-dialog>
|
|
||||||
|
|
||||||
<dialog1 v-if="asynDialog1" draggable @closed="asynDialog1 = false"></dialog1>
|
|
||||||
<dialog2 v-if="asynDialog2" draggable @closed="asynDialog2 = false"></dialog2>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { defineAsyncComponent } from 'vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'dialogExtend',
|
|
||||||
components: {
|
|
||||||
dialog1: defineAsyncComponent(() => import("./dialog1")),
|
|
||||||
dialog2: defineAsyncComponent(() => import("./dialog2"))
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
dialog1: false,
|
|
||||||
dialog2: false,
|
|
||||||
dialog3: false,
|
|
||||||
dialog2Loading: false,
|
|
||||||
asynDialog1: false,
|
|
||||||
asynDialog2: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
open1(){
|
|
||||||
this.dialog1 = true
|
|
||||||
},
|
|
||||||
open2(){
|
|
||||||
this.dialog2 = true
|
|
||||||
this.dialog2Loading = true
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.dialog2Loading = false
|
|
||||||
}, 1000)
|
|
||||||
},
|
|
||||||
open3(){
|
|
||||||
this.dialog3 = true
|
|
||||||
},
|
|
||||||
asyn1(){
|
|
||||||
this.asynDialog1 = true
|
|
||||||
},
|
|
||||||
asyn2(){
|
|
||||||
this.asynDialog2 = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,117 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-alert title="感谢Vue3.0版本的vue.draggable.next拖拽组件 https://github.com/SortableJS/vue.draggable.next" type="success" style="margin-bottom:20px;"></el-alert>
|
|
||||||
<div class="dragList">
|
|
||||||
<draggable v-model="listA" animation="200" item-key="id" group="people">
|
|
||||||
<template #item="{ element }">
|
|
||||||
<div class="item">{{element.text}}</div>
|
|
||||||
</template>
|
|
||||||
</draggable>
|
|
||||||
</div>
|
|
||||||
<div class="dragList">
|
|
||||||
<draggable v-model="listB" animation="200" item-key="id" group="people">
|
|
||||||
<template #item="{ element }">
|
|
||||||
<div class="item">{{element.text}}</div>
|
|
||||||
</template>
|
|
||||||
</draggable>
|
|
||||||
</div>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import draggable from 'vuedraggable'
|
|
||||||
export default {
|
|
||||||
name: 'drag',
|
|
||||||
components: {
|
|
||||||
draggable
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
listA: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
text: 'A1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
text: 'A2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
text: 'A3'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
text: 'A4'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
text: 'A5'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
text: 'A6'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
text: 'A7'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 8,
|
|
||||||
text: 'A8'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 9,
|
|
||||||
text: 'A9'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
listB: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
text: 'B1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
text: 'B2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
text: 'B3'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
text: 'B4'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
text: 'B5'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
text: 'B6'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
text: 'B7'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 8,
|
|
||||||
text: 'B8'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 9,
|
|
||||||
text: 'B9'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.dragList {overflow: auto;}
|
|
||||||
.item {cursor: move;float: left;background: #fff;width:100px;height: 100px;line-height: 100px;text-align: center;margin:0 15px 15px 0;border: 1px solid #e6e6e6;}
|
|
||||||
.dragList .sortable-ghost {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-card shadow="never">
|
|
||||||
<x-editor v-model="html" placeholder="请输入" :templates="templates" :height="400"></x-editor>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never" header="配置" style="margin-top: 20px;">
|
|
||||||
<el-descriptions border :column="1">
|
|
||||||
<el-descriptions-item label="v-model">绑定的内容</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="placeholder">占位符</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="height">编辑器高度，默认300</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="disabled">禁用编辑器 Boolean</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="templates">插入自定义模板 Array</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="toolbar">自定义工具栏，使用"|"竖杠分割，使用"\"斜杠分组，默认：'undo redo | forecolor backcolor bold italic underline strikethrough link | blocks fontfamily fontsize | \
|
|
||||||
alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | pagebreak | \
|
|
||||||
image media table template preview | code selectall'</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="options">支持tinymce的其他配置项</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
</el-card>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { defineAsyncComponent } from 'vue';
|
|
||||||
const xEditor = defineAsyncComponent(() => import('@/components/xEditor'));
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "editor",
|
|
||||||
components: {
|
|
||||||
xEditor
|
|
||||||
},
|
|
||||||
data(){
|
|
||||||
return {
|
|
||||||
html: '',
|
|
||||||
templates: [
|
|
||||||
{
|
|
||||||
title: '自定义HTML模板',
|
|
||||||
description: '',
|
|
||||||
content: '<strong>演示模板</strong>'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '列表',
|
|
||||||
description: '',
|
|
||||||
content: '<ol><li>演示列表1</li><li>演示列表2</li></ol>'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-row :gutter="15">
|
|
||||||
<el-col :lg="18">
|
|
||||||
<el-card shadow="never">
|
|
||||||
<el-alert title="资源库选择器即将弃用,将不会维护更新,与1.7版本之后将移除此组件" type="error" style="margin-bottom:20px;"></el-alert>
|
|
||||||
<x-file-select v-model="file" :multiple="multiple" :hideUpload="hideUpload" :max="99" @submit="submit">
|
|
||||||
<template #do>
|
|
||||||
<el-button>自定义插槽</el-button>
|
|
||||||
</template>
|
|
||||||
</x-file-select>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="6">
|
|
||||||
<el-card shadow="never" header="参数和方法">
|
|
||||||
<el-button type="primary" @click="multiple = !multiple">切换multiple</el-button>
|
|
||||||
<el-button type="primary" @click="hideUpload = !hideUpload">切换hideUpload</el-button>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import xFileSelect from '@/components/xFileSelect'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'fileselect',
|
|
||||||
components: {
|
|
||||||
xFileSelect
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
file: '',
|
|
||||||
multiple: false,
|
|
||||||
hideUpload: false,
|
|
||||||
upload: '',
|
|
||||||
upload2: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
submit(value){
|
|
||||||
console.log(value)
|
|
||||||
this.$message("返回值请查看F12控制台console.log()")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,185 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-card shadow="never" header="过滤器">
|
|
||||||
<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>
|
|
||||||
</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="返回值">
|
|
||||||
<pre>{{ filterData }}</pre>
|
|
||||||
</el-card>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import xFilterBar from '@/components/xFilterBar';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'filterBar',
|
|
||||||
components: {
|
|
||||||
xFilterBar
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
filterData : {},
|
|
||||||
defaultFilter : [],
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
label: '订单号',
|
|
||||||
value: 'id',
|
|
||||||
type: 'text',
|
|
||||||
selected: true,
|
|
||||||
placeholder: '请输入订单号'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '类型',
|
|
||||||
value: 'type',
|
|
||||||
type: 'select',
|
|
||||||
operator: '=',
|
|
||||||
selected: true,
|
|
||||||
placeholder: '请选择类型',
|
|
||||||
extend: {
|
|
||||||
data:[
|
|
||||||
{
|
|
||||||
label: "选项1",
|
|
||||||
value: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "选项2",
|
|
||||||
value: "2"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '类型(多选)',
|
|
||||||
value: 'type2',
|
|
||||||
type: 'select',
|
|
||||||
operator: '=',
|
|
||||||
placeholder: '请选择类型',
|
|
||||||
extend: {
|
|
||||||
multiple: true,
|
|
||||||
data:[
|
|
||||||
{
|
|
||||||
label: "选项1",
|
|
||||||
value: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "选项2",
|
|
||||||
value: "2"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '通知(异步)',
|
|
||||||
value: 'noticeType',
|
|
||||||
type: 'select',
|
|
||||||
operator: '=',
|
|
||||||
placeholder: '请选择通知类型',
|
|
||||||
extend: {
|
|
||||||
request: async () => {
|
|
||||||
var list = await this.$api.system.dic.get.get()
|
|
||||||
return list.data.map(item => {
|
|
||||||
return {
|
|
||||||
label: item.label,
|
|
||||||
value: item.value
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '通知(远程搜索)',
|
|
||||||
value: 'noticeType2',
|
|
||||||
type: 'select',
|
|
||||||
operator: '=',
|
|
||||||
placeholder: '请输入关键词后检索',
|
|
||||||
extend: {
|
|
||||||
remote: true,
|
|
||||||
request: async (query) => {
|
|
||||||
var data = {
|
|
||||||
keyword: query,
|
|
||||||
}
|
|
||||||
var list = await this.$api.system.dic.get.get(data)
|
|
||||||
return list.data.map(item => {
|
|
||||||
return {
|
|
||||||
label: item.label,
|
|
||||||
value: item.value
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '关键词(标签)',
|
|
||||||
value: 'tags',
|
|
||||||
type: 'tags',
|
|
||||||
operator: 'include',
|
|
||||||
operators: [
|
|
||||||
{
|
|
||||||
label: '包含',
|
|
||||||
value: 'include',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '不包含',
|
|
||||||
value: 'notinclude',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '开关(可重复)',
|
|
||||||
value: 'switch',
|
|
||||||
type: 'switch',
|
|
||||||
repeat: true,
|
|
||||||
operator: '='
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '日期单选',
|
|
||||||
value: 'date',
|
|
||||||
type: 'date',
|
|
||||||
operator: '=',
|
|
||||||
operators: [
|
|
||||||
{
|
|
||||||
label: '等于',
|
|
||||||
value: '=',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '不等于',
|
|
||||||
value: '!=',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '日期范围',
|
|
||||||
value: 'date2',
|
|
||||||
type: 'daterange'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '自定义日期',
|
|
||||||
value: 'date3',
|
|
||||||
type: 'customDate',
|
|
||||||
placeholder: '请选择月份',
|
|
||||||
extend: {
|
|
||||||
dateType: 'month',
|
|
||||||
valueFormat: 'YYYY-MM'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
change(data){
|
|
||||||
this.filterData = data;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,410 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-row :gutter="15">
|
|
||||||
<el-col :lg="6">
|
|
||||||
<el-card shadow="never" header="处理逻辑说明">
|
|
||||||
<el-timeline>
|
|
||||||
<el-timeline-item timestamp="两者数据并无顺序要求,只是获取表单值时需要自行设置loading">1.远程获取表单配置参数和表单的值</el-timeline-item>
|
|
||||||
<el-timeline-item timestamp="构建form对象, 循环渲染对应组件, 获取远程选项数据. 完成前组件将由骨架代替">2.根据配置构建表单组件</el-timeline-item>
|
|
||||||
<el-timeline-item timestamp="合并form对象和表单值">3.给表单赋值</el-timeline-item>
|
|
||||||
</el-timeline>
|
|
||||||
<el-alert title="当前版本为预览版本,并未在正式项目中实施,请谨慎使用. 更多配置以及图形化编辑器正在路上." type="warning" show-icon></el-alert>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never" header="双向绑定">
|
|
||||||
<el-button type="primary" @click="setName">改变输入框的值</el-button>
|
|
||||||
<el-button type="primary" @click="setConfig">改变指定栅格配置</el-button>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="12">
|
|
||||||
<el-card shadow="never" header="动态表单渲染器">
|
|
||||||
<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>
|
|
||||||
</x-form>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="6">
|
|
||||||
<el-card shadow="never" header="表单输出">
|
|
||||||
<pre>{{form}}</pre>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'formRender',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
loading: false,
|
|
||||||
config: {},
|
|
||||||
form: {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
//模拟请求延迟, 配置参数和form值并无顺序要求，可同时请求
|
|
||||||
const config = {
|
|
||||||
labelWidth: '130px',
|
|
||||||
labelPosition: 'right',
|
|
||||||
size: 'medium',
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: "ElementPlus",
|
|
||||||
component: "title",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "输入框",
|
|
||||||
name: "name",
|
|
||||||
value: "",
|
|
||||||
component: "input",
|
|
||||||
options: {
|
|
||||||
maxlength: "20",
|
|
||||||
placeholder: "Activity name",
|
|
||||||
},
|
|
||||||
rules: [
|
|
||||||
{required: true, message: "Please input Activity name", trigger: "blur"}
|
|
||||||
],
|
|
||||||
requiredHandle: "$.required==true",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "栅格(12/24)",
|
|
||||||
name: "name2",
|
|
||||||
value: "",
|
|
||||||
component: "input",
|
|
||||||
span: 12,
|
|
||||||
options: {
|
|
||||||
placeholder: "span: 12",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "栅格(12/24)",
|
|
||||||
name: "name3",
|
|
||||||
value: "",
|
|
||||||
component: "input",
|
|
||||||
span: 12,
|
|
||||||
options: {
|
|
||||||
placeholder: "span: 12",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "选择器(多选)",
|
|
||||||
name: "select",
|
|
||||||
value: "",
|
|
||||||
component: "select",
|
|
||||||
span: 24,
|
|
||||||
options: {
|
|
||||||
remote: {
|
|
||||||
api: `${this.$config.API_URL}/system/dic/get`,
|
|
||||||
data: {name: 'a'}
|
|
||||||
},
|
|
||||||
multiple: true,
|
|
||||||
items:[
|
|
||||||
{
|
|
||||||
label: "选项1",
|
|
||||||
value: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "选项2",
|
|
||||||
value: "2"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
rules: [
|
|
||||||
{required: true, message: "Please input Activity name", trigger: "change"}
|
|
||||||
],
|
|
||||||
requiredHandle: "$.required==true",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "选择器(单选)",
|
|
||||||
name: "select2",
|
|
||||||
value: "",
|
|
||||||
component: "select",
|
|
||||||
span: 24,
|
|
||||||
options: {
|
|
||||||
remote: {
|
|
||||||
api: `${this.$config.API_URL}/system/dic/get`,
|
|
||||||
data: {name: 'b'}
|
|
||||||
},
|
|
||||||
items:[
|
|
||||||
{
|
|
||||||
label: "选项1",
|
|
||||||
value: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "选项2",
|
|
||||||
value: "2"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "级联选择器",
|
|
||||||
name: "cascader",
|
|
||||||
value: "",
|
|
||||||
component: "cascader",
|
|
||||||
span: 24,
|
|
||||||
options: {
|
|
||||||
items:[
|
|
||||||
{
|
|
||||||
label: "Guide",
|
|
||||||
value: "guide",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: "Disciplines",
|
|
||||||
value: "disciplines"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Consistency",
|
|
||||||
value: "consistency"
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Resource",
|
|
||||||
value: "resource",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: "Axure Components",
|
|
||||||
value: "axure"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Sketch Templates",
|
|
||||||
value: "sketch"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Design Documentation",
|
|
||||||
value: "docs"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Component",
|
|
||||||
value: "component"
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "多选框",
|
|
||||||
name: "checkbox",
|
|
||||||
component: "checkbox",
|
|
||||||
span: 24,
|
|
||||||
tips: "多选框配置加上 name 表示拥有嵌套关系。否则将值“平铺”在form对象",
|
|
||||||
options: {
|
|
||||||
items:[
|
|
||||||
{
|
|
||||||
label: "选项1",
|
|
||||||
name: "option1",
|
|
||||||
value: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "选项2",
|
|
||||||
name: "option2",
|
|
||||||
value: false
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
hideHandle: "$.required==true"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "多选框组",
|
|
||||||
name: "checkboxGroup",
|
|
||||||
value: [],
|
|
||||||
component: "checkboxGroup",
|
|
||||||
span: 24,
|
|
||||||
options: {
|
|
||||||
items:[
|
|
||||||
{
|
|
||||||
label: "选项1",
|
|
||||||
value: "option1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "选项2",
|
|
||||||
value: "option2"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
hideHandle: "$.required==true"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "单选",
|
|
||||||
name: "radio",
|
|
||||||
value: "1",
|
|
||||||
component: "radio",
|
|
||||||
options: {
|
|
||||||
items:[
|
|
||||||
{
|
|
||||||
label: "选项1",
|
|
||||||
value: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "选项2",
|
|
||||||
value: "2"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
hideHandle: "$.required==true"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "开关",
|
|
||||||
name: "required",
|
|
||||||
message: "演示如何使用表达式动态显隐和必填，试试打开和关闭开关",
|
|
||||||
value: false,
|
|
||||||
component: "switch",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "日期/时间",
|
|
||||||
name: "date",
|
|
||||||
value: "",
|
|
||||||
component: "date",
|
|
||||||
options: {
|
|
||||||
type: "datetime",
|
|
||||||
valueFormat: "YYYY-MM-DD HH:mm:ss",
|
|
||||||
},
|
|
||||||
rules: [
|
|
||||||
{required: true, message: "Please input Data", trigger: "change"}
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "滑块",
|
|
||||||
name: "slider",
|
|
||||||
value: 0,
|
|
||||||
component: "slider",
|
|
||||||
options: {
|
|
||||||
marks: {
|
|
||||||
0: '0°C',
|
|
||||||
8: '8°C',
|
|
||||||
37: '37°C'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "数值",
|
|
||||||
name: "number",
|
|
||||||
value: 0,
|
|
||||||
component: "number",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "颜色",
|
|
||||||
name: "color",
|
|
||||||
value: "",
|
|
||||||
component: "color",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "评分",
|
|
||||||
name: "rate",
|
|
||||||
value: 0,
|
|
||||||
component: "rate",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "SCUI扩展",
|
|
||||||
component: "title",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "表格选择器",
|
|
||||||
name: "tableselect",
|
|
||||||
value: {},
|
|
||||||
component: "tableselect",
|
|
||||||
span: 24,
|
|
||||||
options: {
|
|
||||||
apiObj: '$api.demo.page',
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: "ID",
|
|
||||||
prop: "id",
|
|
||||||
width:150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "姓名",
|
|
||||||
prop: "user"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
props: {
|
|
||||||
label: 'user',
|
|
||||||
value: 'id',
|
|
||||||
keyword: "keyword"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "上传",
|
|
||||||
component: "upload",
|
|
||||||
options: {
|
|
||||||
items:[
|
|
||||||
{
|
|
||||||
label: "图像1",
|
|
||||||
name: "img1",
|
|
||||||
value: ""
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "图像2",
|
|
||||||
name: "img2",
|
|
||||||
value: ""
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "富文本",
|
|
||||||
name: "text",
|
|
||||||
value: "",
|
|
||||||
component: "editor",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
const form = {
|
|
||||||
name: "Activity name",
|
|
||||||
checkbox: {
|
|
||||||
option1: true
|
|
||||||
},
|
|
||||||
checkboxGroup: ["option1"],
|
|
||||||
select: ["1"],
|
|
||||||
select2: "1",
|
|
||||||
cascader: ['resource','docs'],
|
|
||||||
tableselect: {
|
|
||||||
user: "何敏",
|
|
||||||
id: "360000197302144442"
|
|
||||||
},
|
|
||||||
text: "<p><span style=\"font-size: 28px;\">Editor</span></p>\n<table style=\"border-collapse: collapse; width: 100%;\" border=\"1\">\n<tbody>\n<tr>\n<td style=\"width: 47.4544%; background-color: #ecf0f1;\">Name</td>\n<td style=\"width: 47.4544%;\">SCUI</td>\n</tr>\n<tr>\n<td style=\"width: 47.4544%; background-color: #ecf0f1;\">Describe</td>\n<td style=\"width: 47.4544%;\">Super color UI Admin</td>\n</tr>\n</tbody>\n</table>"
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.config = config
|
|
||||||
},500)
|
|
||||||
|
|
||||||
this.loading = true
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.form = form
|
|
||||||
this.loading = false
|
|
||||||
},100)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setName(){
|
|
||||||
this.form.name = "New Title"
|
|
||||||
},
|
|
||||||
setConfig(){
|
|
||||||
this.config.column[2].span = this.config.column[2].span==24?12:24
|
|
||||||
this.config.column[3].span = this.config.column[3].span==24?12:24
|
|
||||||
},
|
|
||||||
save(){
|
|
||||||
this.$refs.formref.validate((valid, obj) => {
|
|
||||||
if (valid) {
|
|
||||||
console.log(this.form)
|
|
||||||
alert('submit!')
|
|
||||||
}else{
|
|
||||||
this.$refs.formref.scrollToField(Object.keys(obj)[0])
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
reset(){
|
|
||||||
this.$refs.formref.resetFields()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,131 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-alert title="来自AVUE的灵感, 业务会有表单里含有对象数组的可能, 进行封装后进行增删改操作, 并且支持联动form表单的禁用属性" type="success" style="margin-bottom:20px;"></el-alert>
|
|
||||||
|
|
||||||
<el-card shadow="never">
|
|
||||||
<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
|
|
||||||
<el-form-item label="标题" prop="title">
|
|
||||||
<el-input v-model="form.title"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="表格" prop="list">
|
|
||||||
<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>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="type" label="类型" width="180">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-select v-model="scope.row.type" placeholder="请选择">
|
|
||||||
<el-option v-for="item in typeDic" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="val" label="数量" min-width="180">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-input v-model="scope.row.val" placeholder="请输入内容"></el-input>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="open" label="checked" width="85" align="center">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-checkbox v-model="scope.row.checked"></el-checkbox>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="open" label="开关" width="80" align="center">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-switch v-model="scope.row.open"></el-switch>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</x-form-table>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="submitForm">保存</el-button>
|
|
||||||
<el-button @click="resetForm">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never" header="方法" style="margin-top: 15px;">
|
|
||||||
<el-button type="primary" @click="pushRow">外部插入行</el-button>
|
|
||||||
<el-button type="primary" @click="deleteRow">外部删除第一行</el-button>
|
|
||||||
</el-card>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'formtable',
|
|
||||||
data(){
|
|
||||||
return {
|
|
||||||
addTemplate: {
|
|
||||||
time: '',
|
|
||||||
type: '',
|
|
||||||
val: '',
|
|
||||||
open: true,
|
|
||||||
checked: false
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
title: "标题",
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
time: '09:00',
|
|
||||||
type: '1',
|
|
||||||
val: '100',
|
|
||||||
open: true,
|
|
||||||
checked: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
time: '10:00',
|
|
||||||
type: '0',
|
|
||||||
val: '50',
|
|
||||||
open: false,
|
|
||||||
checked: true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
typeDic: [
|
|
||||||
{
|
|
||||||
label: "全局",
|
|
||||||
value: "0"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "局部",
|
|
||||||
value: "1"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
rules: {
|
|
||||||
title: [
|
|
||||||
{required: true, message: '请上传', trigger: 'blur'}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
submitForm(){
|
|
||||||
this.$refs.ruleForm.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
alert('请看控制台输出');
|
|
||||||
console.log(this.form);
|
|
||||||
}else{
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
resetForm(){
|
|
||||||
this.$refs.ruleForm.resetFields();
|
|
||||||
},
|
|
||||||
pushRow(){
|
|
||||||
const data = {
|
|
||||||
time: '18:00',
|
|
||||||
type: '1',
|
|
||||||
val: '0',
|
|
||||||
open: true,
|
|
||||||
checked: true
|
|
||||||
}
|
|
||||||
this.$refs.table.pushRow(data)
|
|
||||||
},
|
|
||||||
deleteRow(){
|
|
||||||
this.$refs.table.deleteRow(0)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-alert title="扩展了Element Plus图标库,可以在@/assets/icons中新增自己的SVG图标组件,记得在@/assets/icons/index.js中引入. 建议前往阿里iconfont复制SVG代码 https://www.iconfont.cn/collections/detail?spm=a313x.7781069.0.da5a778a4&cid=25353" type="success" style="margin-bottom:20px;"></el-alert>
|
|
||||||
<el-row :gutter="0" class="box">
|
|
||||||
<el-col :span="4" v-for="(icon, index) in icons" :key="index" >
|
|
||||||
<div class="icon-box">
|
|
||||||
<el-icon><component :is="icon" /></el-icon>
|
|
||||||
<p>{{ icon }}</p>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-main>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as scIcons from '@/assets/icons'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
icons: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
for(let icon in scIcons){
|
|
||||||
this.icons.push('x-icon'+icon.replace(/[A-Z]/g,(match)=>'-'+match.toLowerCase()))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.box {border-top: 1px solid #eee;border-left: 1px solid #eee;}
|
|
||||||
.icon-box {height:120px;text-align: center;background: #fff;border-bottom: 1px solid #eee;border-right: 1px solid #eee;color: #666;padding:30px 10px;}
|
|
||||||
.icon-box i {font-size: 26px;transition: color .15s linear;}
|
|
||||||
.icon-box p {color: #999;margin-top: 15px;transition: color .15s linear;}
|
|
||||||
.icon-box:hover i, .icon-box:hover p {color: #5cb6ff;}
|
|
||||||
|
|
||||||
.dark .box {border-color: var(--el-border-color-light);}
|
|
||||||
.dark .icon-box {background: var(--el-bg-color-overlay);border-color: var(--el-border-color-light);}
|
|
||||||
</style>
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Descripttion: 图标选择器组件演示文件
|
|
||||||
-->
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-alert title="支持扩展的图标选择器,除了默认的图标组还可以在 @/config/iconSelect 中定义更多的图标组" type="success" style="margin-bottom:20px;"></el-alert>
|
|
||||||
<el-card shadow="never">
|
|
||||||
<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
|
|
||||||
<el-form-item label="图标" prop="icon">
|
|
||||||
<x-icon-select v-model="form.icon" :disabled="disabled"></x-icon-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="submitForm">保存</el-button>
|
|
||||||
<el-button @click="resetForm">重置</el-button>
|
|
||||||
<el-button @click="setdisabled">{{disabled?'移除禁用':'设为禁用'}}</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</el-card>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import xIconSelect from '@/components/xIconSelect'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'iconSelect',
|
|
||||||
components: {
|
|
||||||
xIconSelect
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
form: {
|
|
||||||
icon: 'el-icon-apple'
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
icon: [
|
|
||||||
{required: true, message: '请选择图标', trigger: 'change'}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
disabled: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
submitForm(){
|
|
||||||
this.$refs.ruleForm.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
alert('请看控制台输出');
|
|
||||||
console.log(this.form);
|
|
||||||
}else{
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
resetForm(){
|
|
||||||
this.$refs.ruleForm.resetFields();
|
|
||||||
},
|
|
||||||
setdisabled(){
|
|
||||||
this.disabled = !this.disabled
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,169 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-row :gutter="15">
|
|
||||||
<el-col :lg="12">
|
|
||||||
<el-card shadow="never" header="导入(使用mock,有50%几率导入失败)">
|
|
||||||
<x-file-import :apiObj="$api.common.importFile" templateUrl="http://www.scuiadmin/file.xlsx" @success="success"></x-file-import>
|
|
||||||
<x-file-import :apiObj="$api.common.importFile" :data="{otherData:'demo'}" templateUrl="http://www.scuiadmin/file.xlsx" accept=".xls, .xlsx" :maxSize="30" tip="请上传小于或等于 30M 的 .xls, .xlsx 格式文件(自定义TIP)" @success="success">
|
|
||||||
<template #default="{open}">
|
|
||||||
<el-button type="primary" icon="x-icon-upload" @click="open">导入(全配置)</el-button>
|
|
||||||
</template>
|
|
||||||
<template #uploader>
|
|
||||||
<el-icon class="el-icon--upload"><x-icon-file-excel /></el-icon>
|
|
||||||
<div class="el-upload__text">
|
|
||||||
将文件拖到此处或 <em>点击选择文件上传</em>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #form="{formData}">
|
|
||||||
<el-form-item label="覆盖已有数据">
|
|
||||||
<el-switch v-model="formData.coverage" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="跳过错误数据">
|
|
||||||
<el-switch v-model="formData.skipError" />
|
|
||||||
</el-form-item>
|
|
||||||
</template>
|
|
||||||
</x-file-import>
|
|
||||||
<el-descriptions :column="1" border size="small" style="margin-top: 15px;">
|
|
||||||
<el-descriptions-item label="apiObj" :width="200">Object 文件上传接口对象</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="data">Object 上传时附带的额外参数</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="accept">String 可选择文件类型，默认为".xls, .xlsx"</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="maxSize">Number 可选择文件大小，单位为M，默认为10</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="tip">String 上传框底下的提示语句，默认为"请上传小于或等于 {maxSize}M 的 {accept} 格式文件"</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="templateUrl">String 模板的下载URL</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="@success">事件 上传接口返回的事件，返回function(res, close)，执行close()将关闭窗口</el-descriptions-item>
|
|
||||||
<el-descriptions-item label='#default="{open}"'>插糟 默认触发按钮插糟，返回open()打开窗口函数，可以绑定元素@click事件</el-descriptions-item>
|
|
||||||
<el-descriptions-item label='#uploader'>插糟 自定义上传框插槽</el-descriptions-item>
|
|
||||||
<el-descriptions-item label='#form="{formData}"'>插糟 自定义表单组件，插槽formData都将作为上传时附带的额外参数</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="12">
|
|
||||||
<el-card shadow="never" header="导出">
|
|
||||||
<x-file-export :apiObj="$api.common.exportFile"></x-file-export>
|
|
||||||
<x-file-export :apiObj="$api.common.exportFile" fileName="人员列表(异步)" async>
|
|
||||||
<template #default="{open}">
|
|
||||||
<el-button type="primary" icon="x-icon-download" @click="open">导出(异步)</el-button>
|
|
||||||
</template>
|
|
||||||
</x-file-export>
|
|
||||||
<x-file-export :apiObj="$api.common.exportFile" blob fileName="人员列表" :data="{otherData:'demo'}" showData :column="column" :fileTypes="['xlsx','docx','pdf']">
|
|
||||||
<template #default="{open}">
|
|
||||||
<el-button type="primary" icon="x-icon-download" @click="open">导出(blob文件流)</el-button>
|
|
||||||
</template>
|
|
||||||
<template #form="{formData}">
|
|
||||||
<el-form-item label="导出条数">
|
|
||||||
<el-select v-model="formData.limit" placeholder="Select">
|
|
||||||
<el-option label="100条" value="100" />
|
|
||||||
<el-option label="500条" value="500" />
|
|
||||||
<el-option label="1000条" value="1000" />
|
|
||||||
<el-option label="5000条" value="5000" />
|
|
||||||
<el-option label="10000条" value="10000" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</template>
|
|
||||||
</x-file-export>
|
|
||||||
<el-descriptions :column="1" border size="small" style="margin-top: 15px;">
|
|
||||||
<el-descriptions-item label="apiObj" :width="200">Object 文件导出接口对象，通过apiObj.url请求文件</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="data">Object 上传时附带的额外参数(可为数据表格的过滤项)</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="showData">Boolean 是否显示附带的额外参数</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="async">Boolean 是否异步导出文件</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="fileName">String 下载文件名称，默认为当前时间戳</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="fileTypes">Array 可选择文件类型，默认为['xlsx']，组件将数组第一项当做已选项</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="column">Array 列配置，请求文件时将添加column为key的参数，值为prop逗号","分割的字符串</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="blob">Boolean 是否由游览器请求文件返回blob后提供下载</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="progress">Boolean blob开启后是否显示下载文件进度条，当服务器启用Gzip时，建议关闭，因为获取到的文件总数和下载总数不匹配。</el-descriptions-item>
|
|
||||||
|
|
||||||
<el-descriptions-item label='#default="{open}"'>插糟 默认触发按钮插糟，返回open()打开窗口函数，可以绑定元素@click事件</el-descriptions-item>
|
|
||||||
<el-descriptions-item label='#form="{formData}"'>插糟 自定义表单组件，插槽formData都将作为请求时附带的额外参数</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-main>
|
|
||||||
|
|
||||||
<el-dialog v-model="importErrDialogVisible" title="导入失败" :width="680" destroy-on-close @closed="()=>{importErrData={}}">
|
|
||||||
<el-alert :title="`总条目数 ${importErrData.ok} ,其中有 ${importErrData.fail} 条格式不满足导入要求，请修改后再次操作。`" type="error" show-icon :closable="false"/>
|
|
||||||
<div style="margin-top: 15px;">
|
|
||||||
<el-table :data="importErrData.failList" border stripe max-height="270" style="width: 100%">
|
|
||||||
<el-table-column prop="keyName" label="主键名" width="180" />
|
|
||||||
<el-table-column prop="" label="状态" width="100" >
|
|
||||||
<el-tag type="danger"><el-icon><el-icon-circle-close-filled/></el-icon> 失败</el-tag>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="reason" label="原因" />
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
<template #footer>
|
|
||||||
<el-button type="primary" @click="importErrDialogVisible=false">我知道了</el-button>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import scFileImport from '@/components/scFileImport'
|
|
||||||
import scFileExport from '@/components/scFileExport'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'importexport',
|
|
||||||
components: {
|
|
||||||
scFileImport,
|
|
||||||
scFileExport
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
importErrDialogVisible: false,
|
|
||||||
importErrData: {},
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: "姓名",
|
|
||||||
prop: "name"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "性别",
|
|
||||||
prop: "sex"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "评分",
|
|
||||||
prop: "num"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "邮箱",
|
|
||||||
prop: "email",
|
|
||||||
hide: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "进度",
|
|
||||||
prop: "progress"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "注册时间",
|
|
||||||
prop: "datetime"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
success(res, close){
|
|
||||||
if(res.code==200){
|
|
||||||
this.$alert("导入返回成功后，可后续操作，比如刷新表格等。执行回调函数close()可关闭上传窗口。", "导入成功", {
|
|
||||||
type: "success",
|
|
||||||
showClose: false,
|
|
||||||
center: true
|
|
||||||
})
|
|
||||||
close()
|
|
||||||
}else{
|
|
||||||
//返回失败后的自定义操作，这里演示显示错误的条目
|
|
||||||
this.importErrDialogVisible = true
|
|
||||||
this.importErrData = res.data
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
|
|
||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-row :gutter="15">
|
|
||||||
<el-col :lg="8">
|
|
||||||
<el-card shadow="never" header="脉冲圆点">
|
|
||||||
<el-space wrap :size="15">
|
|
||||||
<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">
|
|
||||||
<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>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="8">
|
|
||||||
<el-card shadow="never">
|
|
||||||
<div class="up">
|
|
||||||
<h2>持续更新中...</h2>
|
|
||||||
<p>非常欢迎提交Issue/PR完善和补充更多好玩的原子组件</p>
|
|
||||||
<p>原子组件库位置：@/components/xMini/*</p>
|
|
||||||
<el-button type="primary" text @click="goIssue">提交想法</el-button>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'minivab',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
trendValue: 4.6,
|
|
||||||
trendValue2: 0,
|
|
||||||
trendValue3: -32
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
goIssue(){
|
|
||||||
window.open("https://gitee.com/lolicode/scui/issues")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.up {text-align: center;}
|
|
||||||
.up h2 {margin-bottom: 10px;}
|
|
||||||
.up p {color: #999;line-height: 1.5;}
|
|
||||||
.el-card {height:150px;}
|
|
||||||
</style>
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-card shadow="never">
|
|
||||||
<el-tabs tab-position="top">
|
|
||||||
<el-tab-pane label="普通打印">
|
|
||||||
<el-alert title="打印当前页面已存在的元素,如包含.no-print样式就忽略,分页打印就需要{page-break-after: always}控制" type="success" style="margin-bottom:20px;"></el-alert>
|
|
||||||
<el-button type="primary" @click="print">普通打印</el-button>
|
|
||||||
<div style="height:20px"></div>
|
|
||||||
<div class="printMain" ref="printMain">
|
|
||||||
<div class="item">打印内容1 <el-icon><el-icon-eleme-filled /></el-icon> <p class="no-print">忽略打印</p></div>
|
|
||||||
<div style="page-break-after: always;"></div>
|
|
||||||
<div class="item">打印内容2</div>
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane label="动态打印">
|
|
||||||
<el-alert title="打印创建的DOM结构,适用于远程获取模板后打印" type="success" style="margin-bottom:20px;"></el-alert>
|
|
||||||
<el-button type="primary" @click="print2">动态打印</el-button>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</el-card>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import print from '@/utils/print'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'print',
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
print(){
|
|
||||||
//直接传入REF或者querySelector
|
|
||||||
print(this.$refs.printMain)
|
|
||||||
},
|
|
||||||
print2(){
|
|
||||||
//创建虚拟DOM结构后再传入
|
|
||||||
var dom = "<h2>TITLE</h2><p>后创建的DOM结构</p>"
|
|
||||||
print(dom)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.printMain .item{padding:20px;border: 1px solid #409eff;margin-bottom: 20px;background: #ecf5ff;border-radius: 4px;}
|
|
||||||
.printMain p {margin-top: 20px;color: #999;}
|
|
||||||
</style>
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-row :gutter="15">
|
|
||||||
<el-col :lg="8">
|
|
||||||
<el-card shadow="never" header="常用">
|
|
||||||
<x-qr-code text="scui"></x-qr-code>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="8">
|
|
||||||
<el-card shadow="never" header="带Logo">
|
|
||||||
<x-qr-code text="scui" logo="@/assets/img/logo.png"></x-qr-code>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="8">
|
|
||||||
<el-card shadow="never" header="自定义颜色大小">
|
|
||||||
<x-qr-code text="scui" :size="100" colorDark="#088200" colorLight="#fff"></x-qr-code>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="8">
|
|
||||||
<el-card shadow="never" header="动态">
|
|
||||||
<x-qr-code :text="qrcode"></x-qr-code>
|
|
||||||
<el-input v-model="qrcode" placeholder="Please input" style="margin-top: 20px;"/>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'qrcode',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
qrcode: "scui"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,65 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Descripttion: 字典选择器组件演示
|
|
||||||
* @version: 1.0
|
|
||||||
* @Author: sakuya
|
|
||||||
* @Date: 2021年8月3日15:51:20
|
|
||||||
* @LastEditors:
|
|
||||||
* @LastEditTime:
|
|
||||||
-->
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-alert title="封装el-select支持异步获取数据,以及根据字典名获取数据,继承el-select全部的属性和事件" type="success" style="margin-bottom:20px;"></el-alert>
|
|
||||||
|
|
||||||
<el-row :gutter="15">
|
|
||||||
<el-col :lg="12">
|
|
||||||
<el-card shadow="never" header="异步单选">
|
|
||||||
<sc-select v-model="value" :apiObj="$api.system.dic.get" clearable filterable style="width: 100%;"></sc-select>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="12">
|
|
||||||
<el-card shadow="never" header="异步多选">
|
|
||||||
<sc-select v-model="value2" :apiObj="$api.system.dic.get" clearable filterable multiple style="width: 100%;"></sc-select>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="12">
|
|
||||||
<el-card shadow="never" header="字典选择器">
|
|
||||||
<sc-select v-model="value3" dic="notice" clearable filterable style="width: 100%;"></sc-select>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="12">
|
|
||||||
<el-card shadow="never" header="自定义模板">
|
|
||||||
<sc-select v-model="value4" dic="notice" clearable filterable placeholder="自定义placeholder" style="width: 100%;">
|
|
||||||
<template #option="{data}">
|
|
||||||
<span style="float: left">{{ data.label }}</span>
|
|
||||||
<span style="float: right; color: #999; font-size: 13px">{{ data.value }}</span>
|
|
||||||
</template>
|
|
||||||
</sc-select>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'scselect',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value: '3',
|
|
||||||
value2: ['1', '3'],
|
|
||||||
value3: '',
|
|
||||||
value4: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,92 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-card shadow="never" header="分类筛选器">
|
|
||||||
<x-select-filter :data="data" :selected-values="selectedValues" :label-width="80" @on-change="change"></x-select-filter>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never" header="返回值" style="margin-top: 15px;">
|
|
||||||
<pre>{{ filterData }}</pre>
|
|
||||||
</el-card>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import xSelectFilter from '@/components/xSelectFilter'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'selectFilter',
|
|
||||||
components: {
|
|
||||||
xSelectFilter
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
title: "状态(单)",
|
|
||||||
key: "state",
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
label: "全部",
|
|
||||||
value: ""
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "待审核",
|
|
||||||
value: "1",
|
|
||||||
icon: "el-icon-flag"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "已退回",
|
|
||||||
value: "2",
|
|
||||||
icon: "el-icon-bottom-left"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "已关闭",
|
|
||||||
value: "3",
|
|
||||||
icon: "el-icon-circle-close"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "已完成",
|
|
||||||
value: "4",
|
|
||||||
icon: "el-icon-checked"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "类型(多)",
|
|
||||||
key: "type",
|
|
||||||
multiple: true,
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
label: "全部",
|
|
||||||
value: ""
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "请假申请",
|
|
||||||
value: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "加班申请",
|
|
||||||
value: "2"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
selectedValues: {
|
|
||||||
state: [""],
|
|
||||||
type: [""]
|
|
||||||
},
|
|
||||||
filterData: {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
change(selected){
|
|
||||||
this.filterData = selected
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Descripttion: 统计数值组件演示
|
|
||||||
-->
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-alert title="一个非常简单的组件, 目的就是省去重复写样式, 支持千分符/前后缀等." type="success" style="margin-bottom:20px;"></el-alert>
|
|
||||||
<el-row :gutter="15">
|
|
||||||
<el-col :lg="8">
|
|
||||||
<el-card shadow="never">
|
|
||||||
<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">
|
|
||||||
<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">
|
|
||||||
<x-statistic title="留言" value="112893" suffix="条" groupSeparator>
|
|
||||||
<x-trend v-model="trendValue2"></x-trend>
|
|
||||||
</x-statistic>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import xStatistic from '@/components/xStatistic';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'statistic',
|
|
||||||
components: {
|
|
||||||
xStatistic
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
trendValue1: 7.7,
|
|
||||||
trendValue2: -18.9
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.el-card {margin-bottom: 15px;}
|
|
||||||
.up {color: #F56C6C;margin-left: 5px;}
|
|
||||||
.down {color: #67C23A;margin-left: 5px;}
|
|
||||||
</style>
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<div class="left-panel">
|
|
||||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
|
||||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<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">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-tag v-if="scope.row.sex=='男'">{{scope.row.sex}}</el-tag>
|
|
||||||
<el-tag v-if="scope.row.sex=='女'" type="success">{{scope.row.sex}}</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="邮箱" prop="email" width="250"></el-table-column>
|
|
||||||
<el-table-column label="评分" prop="num" width="150" sortable></el-table-column>
|
|
||||||
<el-table-column label="进度" prop="progress" width="250" sortable>
|
|
||||||
<template #default="scope">
|
|
||||||
<el-progress :percentage="scope.row.progress" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="注册时间" prop="datetime" width="150" sortable></el-table-column>
|
|
||||||
</xTable>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'tableBase',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
sexFilters: [
|
|
||||||
{text: '男', value: '男'},
|
|
||||||
{text: '女', value: '女'}
|
|
||||||
],
|
|
||||||
list: {
|
|
||||||
apiObj: this.$api.demo.list
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
filterHandler(value, row, column){
|
|
||||||
const property = column['property']
|
|
||||||
return row[property] === value
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<div class="left-panel">
|
|
||||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
|
||||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
|
||||||
</div>
|
|
||||||
<div class="right-panel">
|
|
||||||
<el-alert title="请在右下角第二个按钮体验自定义列" type="warning" :closable="false"/>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<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>
|
|
||||||
</xTable>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'tableCustomColumn',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
list: {
|
|
||||||
apiObj: this.$api.demo.list,
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: "姓名",
|
|
||||||
prop: "name",
|
|
||||||
width: "150"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "性别",
|
|
||||||
prop: "sex",
|
|
||||||
width: "150",
|
|
||||||
filters: [{text: '男', value: '男'}, {text: '女', value: '女'}]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "邮箱",
|
|
||||||
prop: "email",
|
|
||||||
width: "250",
|
|
||||||
hide: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "评分",
|
|
||||||
prop: "num",
|
|
||||||
width: "150",
|
|
||||||
sortable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "进度",
|
|
||||||
prop: "progress",
|
|
||||||
width: "250",
|
|
||||||
sortable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "注册时间",
|
|
||||||
prop: "datetime",
|
|
||||||
width: "150",
|
|
||||||
sortable: true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<div class="left-panel">
|
|
||||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
|
||||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
|
||||||
</div>
|
|
||||||
<div class="right-panel">
|
|
||||||
<el-alert title="因演示使用mock数据,所以视图上看不出效果,可以查看控制台的网络请求" type="warning" :closable="false"/>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<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>
|
|
||||||
<el-table-column label="邮箱" prop="email" width="250"></el-table-column>
|
|
||||||
<el-table-column label="评分" prop="num" width="150" sortable='custom'></el-table-column>
|
|
||||||
<el-table-column label="进度" prop="progress" width="250" sortable></el-table-column>
|
|
||||||
<el-table-column label="注册时间" prop="datetime" width="150" sortable='custom'></el-table-column>
|
|
||||||
</xTable>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'tableRemote',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
sexFilters: [
|
|
||||||
{text: '男', value: '男'},
|
|
||||||
{text: '女', value: '女'}
|
|
||||||
],
|
|
||||||
list: {
|
|
||||||
apiObj: this.$api.demo.list
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<div class="left-panel">
|
|
||||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
|
||||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<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>
|
|
||||||
<el-table-column label="性别" prop="sex" width="150"></el-table-column>
|
|
||||||
<el-table-column label="邮箱" prop="email" width="250"></el-table-column>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="评分" prop="num" width="150"></el-table-column>
|
|
||||||
<el-table-column label="注册时间" prop="datetime" width="150"></el-table-column>
|
|
||||||
</xTable>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'tableThead',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
list: {
|
|
||||||
apiObj: this.$api.demo.list
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,90 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Descripttion: 表格选择器组件演示
|
|
||||||
-->
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-alert title="select深度改造的表格选择器, 非常适用于大量数据选择的场景" type="success" style="margin-bottom:20px;"></el-alert>
|
|
||||||
<el-card shadow="never" header="单选">
|
|
||||||
<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>
|
|
||||||
</x-table-select>
|
|
||||||
</el-card>
|
|
||||||
<div style="height:15px"></div>
|
|
||||||
<el-card shadow="never" header="多选">
|
|
||||||
<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>
|
|
||||||
<el-select v-model="form.sex" placeholder="性别" clearable :teleported="false">
|
|
||||||
<el-option label="男" value="1"></el-option>
|
|
||||||
<el-option label="女" value="2"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-date-picker v-model="form.date" value-format="YYYY-MM-DD" type="date" placeholder="注册时间" :teleported="false"></el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="submit">查询</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<el-alert title="自定义FORM插糟 传递了form对象和提交方法" type="info" />
|
|
||||||
</template>
|
|
||||||
<el-table-column prop="id" label="ID" width="180"></el-table-column>
|
|
||||||
<el-table-column prop="user" label="姓名" width="100"></el-table-column>
|
|
||||||
<el-table-column prop="cip" label="最后请求IP" width="150"></el-table-column>
|
|
||||||
<el-table-column prop="time" label="注册时间"></el-table-column>
|
|
||||||
</x-table-select>
|
|
||||||
</el-card>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'tableselect',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
apiObj: this.$api.demo.page,
|
|
||||||
params: {
|
|
||||||
name: 'demoName'
|
|
||||||
},
|
|
||||||
value: [
|
|
||||||
{
|
|
||||||
id: "410000199512025445",
|
|
||||||
user: "魏磊"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "520000198407304275",
|
|
||||||
user: "史平"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
value2: {
|
|
||||||
id: "520000198407275",
|
|
||||||
user: "史平lllll"
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
label: 'user',
|
|
||||||
value: 'id',
|
|
||||||
keyword: "keyword"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//值变化
|
|
||||||
change(val){
|
|
||||||
this.$message('change事件，返回详情查看控制台')
|
|
||||||
console.log(val)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
</style>
|
|
||||||
@ -1,154 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-card shadow="never" header="文件示例">
|
|
||||||
<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>
|
|
||||||
</x-upload-file>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
<el-card shadow="never" header="文件示例(值为对象数组,适合保存原始文件名)">
|
|
||||||
<x-upload-file v-model="fileurlArr" :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传xlsx/docx格式文件">
|
|
||||||
<el-button type="primary" icon="el-icon-upload">上传附件</el-button>
|
|
||||||
</x-upload-file>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
<el-card shadow="never" header="图片卡片示例(已开启拖拽排序)">
|
|
||||||
<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">
|
|
||||||
<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>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<el-card shadow="never" header="在验证表单中使用">
|
|
||||||
<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
|
|
||||||
<el-form-item label="身份证" required>
|
|
||||||
<el-space wrap :size="8">
|
|
||||||
<el-form-item prop="file1">
|
|
||||||
<x-upload v-model="form.file1" title="人像面"></x-upload>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="file2">
|
|
||||||
<x-upload v-model="form.file2" title="国徽面"></x-upload>
|
|
||||||
</el-form-item>
|
|
||||||
</el-space>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="其他凭证" prop="file3">
|
|
||||||
<x-upload-multiple v-model="form.file3"></x-upload-multiple>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="附件" prop="file4">
|
|
||||||
<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>
|
|
||||||
</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>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="submitForm">保存</el-button>
|
|
||||||
<el-button @click="resetForm">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'upload',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
uploadApi: this.$api.common.upload,
|
|
||||||
fileurlArr: [
|
|
||||||
{
|
|
||||||
name: '销售合同模板.xlsx',
|
|
||||||
url: 'http://www.scuiadmin.com/files/220000198611262243.xlsx'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '企业员工联系方式.xlsx',
|
|
||||||
url: 'http://www.scuiadmin.com/files/350000201004261875.xlsx',
|
|
||||||
}
|
|
||||||
],
|
|
||||||
fileurl: "http://www.scuiadmin.com/files/220000198611262243.xlsx,http://www.scuiadmin.com/files/350000201004261875.xlsx",
|
|
||||||
fileurl2: "img/auth_banner.jpg,img/avatar3.gif",
|
|
||||||
fileurl3: "img/auth_banner.jpg",
|
|
||||||
fileurl4: "",
|
|
||||||
fileurl5: "",
|
|
||||||
fileurl6: "",
|
|
||||||
fileurl7: "",
|
|
||||||
form: {
|
|
||||||
file1: "",
|
|
||||||
file2: "",
|
|
||||||
file3: "",
|
|
||||||
file4: "",
|
|
||||||
date: ""
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
file1: [
|
|
||||||
{required: true, message: '请上传', trigger: 'change'}
|
|
||||||
],
|
|
||||||
file2: [
|
|
||||||
{required: true, message: '请上传', trigger: 'change'}
|
|
||||||
],
|
|
||||||
file3: [
|
|
||||||
{required: true, message: '请上传', trigger: 'change'}
|
|
||||||
],
|
|
||||||
file4: [
|
|
||||||
{required: true, message: '请上传附件', trigger: 'change'}
|
|
||||||
],
|
|
||||||
date: [
|
|
||||||
{required: true, message: '请选择日期', trigger: 'change'}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
success(response){
|
|
||||||
this.$alert(`success函数钩子，可用于类似OCR返回信息，return false后阻止后续执行，回调参数打开控制台查看`, {
|
|
||||||
title: "提示",
|
|
||||||
type: "success"
|
|
||||||
})
|
|
||||||
console.log(response);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
submitForm(){
|
|
||||||
this.$refs.ruleForm.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
alert('请看控制台输出');
|
|
||||||
console.log(this.form);
|
|
||||||
}else{
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
resetForm(){
|
|
||||||
this.$refs.ruleForm.resetFields();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.el-card+.el-card {margin-top: 15px;}
|
|
||||||
.imglist .el-col+.el-col {margin-left: 8px;}
|
|
||||||
|
|
||||||
.custom-empty {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;background: #8c939d;border-radius:5px;}
|
|
||||||
.custom-empty i {font-size: 30px;color: #fff;}
|
|
||||||
.custom-empty p {font-size: 12px;font-weight: normal;color: #fff;margin-top: 10px;}
|
|
||||||
</style>
|
|
||||||
@ -1,65 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-alert title="播放器使用来自西瓜视频的西瓜播放器xgplayer" type="success" style="margin-bottom:20px;"></el-alert>
|
|
||||||
<el-row :gutter="15">
|
|
||||||
<el-col :lg="12">
|
|
||||||
<el-card shadow="never" header="MP4点播">
|
|
||||||
<sc-video :src="playUrl" :options="options"></sc-video>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :lg="12">
|
|
||||||
<el-card shadow="never" header="HlS(m3u8)直播">
|
|
||||||
<el-row :gutter="1">
|
|
||||||
<el-col :span="12">
|
|
||||||
<sc-video :src="liveUrl" isLive :options="{volume: 0}"></sc-video>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<sc-video :src="liveUrl_2" isLive :options="{volume: 0}"></sc-video>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row :gutter="1" style="margin-top: 1px;">
|
|
||||||
<el-col :span="12">
|
|
||||||
<sc-video :src="liveUrl_3" isLive :options="{volume: 0}"></sc-video>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<sc-video :src="liveUrl_4" isLive :options="{volume: 0}"></sc-video>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import xVideo from '@/components/xVideo'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'scvideo',
|
|
||||||
components: {
|
|
||||||
xVideo
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
playUrl: "https://fastly.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-720.mp4",
|
|
||||||
options: {
|
|
||||||
poster: "https://fastly.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-1080_Moment.jpg",
|
|
||||||
pip: true
|
|
||||||
},
|
|
||||||
liveUrl: "http://local.live.jxtvcn.com.cn/live-jxtv/tv_jxtv1.m3u8",
|
|
||||||
liveUrl_2: "http://local.live.jxtvcn.com.cn/live-jxtv/tv_jxtv6.m3u8",
|
|
||||||
liveUrl_3: "http://local.live.jxtvcn.com.cn/live-jxtv/tv_jxtv7.m3u8",
|
|
||||||
liveUrl_4: "http://local.live.jxtvcn.com.cn/live-jxtv/tv_jxtv8.m3u8",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-main>
|
|
||||||
<el-card shadow="never">
|
|
||||||
<x-water-mark ref="wm" text="欢迎体验SCUI" subtext="admin@scui.com">
|
|
||||||
<el-table :data="tableData" border stripe style="width: 100%">
|
|
||||||
<el-table-column prop="date" label="Date" width="180" />
|
|
||||||
<el-table-column prop="name" label="Name" width="180" />
|
|
||||||
<el-table-column prop="address" label="Address" />
|
|
||||||
</el-table>
|
|
||||||
</x-water-mark>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never" style="margin-top: 15px;">
|
|
||||||
<el-button type="primary" @click="create">创建水印</el-button>
|
|
||||||
<el-button type="primary" @click="clear">移除水印</el-button>
|
|
||||||
</el-card>
|
|
||||||
</el-main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'watermark',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
date: '2016-05-03',
|
|
||||||
name: 'Tom',
|
|
||||||
address: 'No. 189, Grove St, Los Angeles',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2016-05-02',
|
|
||||||
name: 'Tom',
|
|
||||||
address: 'No. 189, Grove St, Los Angeles',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2016-05-04',
|
|
||||||
name: 'Tom',
|
|
||||||
address: 'No. 189, Grove St, Los Angeles',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2016-05-01',
|
|
||||||
name: 'Tom',
|
|
||||||
address: 'No. 189, Grove St, Los Angeles',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
create(){
|
|
||||||
this.$refs.wm.create()
|
|
||||||
},
|
|
||||||
clear(){
|
|
||||||
this.$refs.wm.clear()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,114 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-header>
|
|
||||||
<el-page-header :content="data.name"></el-page-header>
|
|
||||||
<div class="do">
|
|
||||||
<el-button type="primary" @click="exportJson">export JSON</el-button>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main>
|
|
||||||
<sc-workflow v-model="data.nodeConfig"></sc-workflow>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import scWorkflow from '@/components/scWorkflow'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'workflow',
|
|
||||||
components: {
|
|
||||||
scWorkflow
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
data: {
|
|
||||||
"id": 1,
|
|
||||||
"name": "请假审批",
|
|
||||||
"nodeConfig": {
|
|
||||||
"nodeName": "发起人",
|
|
||||||
"type": 0,
|
|
||||||
"nodeRoleList": [],
|
|
||||||
"childNode": {
|
|
||||||
"nodeName": "条件路由",
|
|
||||||
"type": 4,
|
|
||||||
"conditionNodes": [{
|
|
||||||
"nodeName": "长期",
|
|
||||||
"type": 3,
|
|
||||||
"priorityLevel": 1,
|
|
||||||
"conditionMode": 1,
|
|
||||||
"conditionList": [{
|
|
||||||
"label": "请假天数",
|
|
||||||
"field": "day",
|
|
||||||
"operator": ">",
|
|
||||||
"value": "7"
|
|
||||||
}],
|
|
||||||
"childNode": {
|
|
||||||
"nodeName": "领导审批",
|
|
||||||
"type": 1,
|
|
||||||
"setType": 1,
|
|
||||||
"nodeUserList": [{
|
|
||||||
"id": "360000197302144442",
|
|
||||||
"name": "何敏"
|
|
||||||
}],
|
|
||||||
"nodeRoleList": [],
|
|
||||||
"examineLevel": 1,
|
|
||||||
"directorLevel": 1,
|
|
||||||
"selectMode": 1,
|
|
||||||
"termAuto": false,
|
|
||||||
"term": 0,
|
|
||||||
"termMode": 1,
|
|
||||||
"examineMode": 1,
|
|
||||||
"directorMode": 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"nodeName": "短期",
|
|
||||||
"type": 3,
|
|
||||||
"priorityLevel": 2,
|
|
||||||
"conditionMode": 1,
|
|
||||||
"conditionList": [],
|
|
||||||
"childNode": {
|
|
||||||
"nodeName": "直接主管审批",
|
|
||||||
"type": 1,
|
|
||||||
"setType": 2,
|
|
||||||
"nodeUserList": [],
|
|
||||||
"nodeRoleList": [],
|
|
||||||
"examineLevel": 1,
|
|
||||||
"directorLevel": 1,
|
|
||||||
"selectMode": 1,
|
|
||||||
"termAuto": false,
|
|
||||||
"term": 0,
|
|
||||||
"termMode": 1,
|
|
||||||
"examineMode": 1,
|
|
||||||
"directorMode": 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"childNode": {
|
|
||||||
"nodeName": "抄送人",
|
|
||||||
"type": 2,
|
|
||||||
"userSelectFlag": true,
|
|
||||||
"nodeUserList": [{
|
|
||||||
"id": "220000200908305857",
|
|
||||||
"name": "何秀英"
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
exportJson() {
|
|
||||||
this.$message("返回值请查看F12控制台console.log()")
|
|
||||||
console.log(this.data)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style></style>
|
|
||||||
Loading…
Reference in New Issue
Block a user