This commit is contained in:
sakuya 2021-10-04 23:10:44 +08:00
parent 10c03fbeba
commit 17b75dcd5a
9 changed files with 152 additions and 107 deletions

View File

@ -14,7 +14,8 @@
<el-row :gutter="15">
<template v-for="(item, index) in config.formItems" :key="index">
<el-col :span="item.span || 24" v-if="!hideHandle(item)">
<el-form-item :label="item.label" :prop="item.name" :rules="rulesHandle(item)">
<sc-title v-if="item.component=='title'" :title="item.label"></sc-title>
<el-form-item v-else :label="item.label" :prop="item.name" :rules="rulesHandle(item)">
<!-- input -->
<template v-if="item.component=='input'" >
<el-input v-model="form[item.name]" :placeholder="item.options.placeholder" clearable :maxlength="item.options.maxlength" show-word-limit></el-input>

View File

@ -0,0 +1,25 @@
<template>
<div class="sc-title">
{{title}}
</div>
</template>
<script>
export default {
props: {
title: { type: String, required: true, default: "" },
},
data() {
return {
}
},
computed: {
}
}
</script>
<style scoped>
.sc-title {border-bottom: 1px solid #eee;margin-bottom: 20px;font-size: 17px;padding-bottom: 15px;color: #3c4a54;font-weight: bold;}
</style>

View File

@ -1,68 +1,20 @@
import ElementPlus from 'element-plus'
import i18n from './locales'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/display.css'
import { createApp } from 'vue'
import App from './App.vue'
import config from "./config"
import scui from './scui'
import i18n from './locales'
import router from './router'
import store from './store'
import api from './api'
import tool from './utils/tool'
import http from "./utils/request"
import { permission, rolePermission } from './utils/permission'
import errorHandler from './utils/errorHandler'
import scTable from './components/scTable'
import scFilterBar from './components/scFilterBar'
import scUpload from './components/scUpload'
import scUploadMultiple from './components/scUpload/multiple'
import scFormTable from './components/scFormTable'
import scTableSelect from './components/scTableSelect'
import scPageHeader from './components/scPageHeader'
import scSelect from './components/scSelect'
import scDialog from './components/scDialog'
import scForm from './components/scForm'
import auth from './directives/auth'
import role from './directives/role'
import time from './directives/time'
import copy from './directives/copy'
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
//挂载全局对象
app.config.globalProperties.$CONFIG = config;
app.config.globalProperties.$TOOL = tool;
app.config.globalProperties.$HTTP = http;
app.config.globalProperties.$API = api;
app.config.globalProperties.$AUTH = permission;
app.config.globalProperties.$ROLE = rolePermission;
app.use(store);
app.use(router);
app.use(ElementPlus, {size: 'small'});
app.use(i18n);
//注册全局组件
app.component('scTable', scTable);
app.component('scFilterBar', scFilterBar);
app.component('scUpload', scUpload);
app.component('scUploadMultiple', scUploadMultiple);
app.component('scFormTable', scFormTable);
app.component('scTableSelect', scTableSelect);
app.component('scPageHeader', scPageHeader);
app.component('scSelect', scSelect);
app.component('scDialog', scDialog);
app.component('scForm', scForm);
//注册全局指令
app.directive('auth', auth)
app.directive('role', role)
app.directive('time', time)
app.directive('copy', copy)
//全局代码错误捕捉
app.config.errorHandler = errorHandler
app.use(scui);
//挂载app
app.mount('#app');

55
src/scui.js Normal file
View File

@ -0,0 +1,55 @@
import config from "./config"
import api from './api'
import tool from './utils/tool'
import http from "./utils/request"
import { permission, rolePermission } from './utils/permission'
import scTable from './components/scTable'
import scFilterBar from './components/scFilterBar'
import scUpload from './components/scUpload'
import scUploadMultiple from './components/scUpload/multiple'
import scFormTable from './components/scFormTable'
import scTableSelect from './components/scTableSelect'
import scPageHeader from './components/scPageHeader'
import scSelect from './components/scSelect'
import scDialog from './components/scDialog'
import scForm from './components/scForm'
import scTitle from './components/scTitle'
import auth from './directives/auth'
import role from './directives/role'
import time from './directives/time'
import copy from './directives/copy'
import errorHandler from './utils/errorHandler'
export default {
install(app) {
//挂载全局对象
app.config.globalProperties.$CONFIG = config;
app.config.globalProperties.$TOOL = tool;
app.config.globalProperties.$HTTP = http;
app.config.globalProperties.$API = api;
app.config.globalProperties.$AUTH = permission;
app.config.globalProperties.$ROLE = rolePermission;
//注册全局组件
app.component('scTable', scTable);
app.component('scFilterBar', scFilterBar);
app.component('scUpload', scUpload);
app.component('scUploadMultiple', scUploadMultiple);
app.component('scFormTable', scFormTable);
app.component('scTableSelect', scTableSelect);
app.component('scPageHeader', scPageHeader);
app.component('scSelect', scSelect);
app.component('scDialog', scDialog);
app.component('scForm', scForm);
app.component('scTitle', scTitle);
//注册全局指令
app.directive('auth', auth)
app.directive('role', role)
app.directive('time', time)
app.directive('copy', copy)
//全局代码错误捕捉
app.config.errorHandler = errorHandler
}
}

View File

@ -2,7 +2,7 @@
.el-menu {border: none!important;}
.el-menu-item.is-active {background: #ecf5ff;}
.el-menu .el-menu-item a {color: inherit;text-decoration: none;display: block;width:100%;height:100%;position: absolute;top:0px;left:0px;}
.el-form-item-msg {font-size: 12px;color: #999;}
.el-form-item-msg {font-size: 12px;color: #999;clear: both;}
.el-container {height: 100%;}
.el-aside {border-right: 1px solid #e6e6e6;background: #fff;}
.el-header {background: #fff;border-bottom: 1px solid #e6e6e6;padding:13px 15px;display: flex;justify-content: space-between;align-items: center;}

View File

@ -20,5 +20,3 @@
.header-tabs .el-tabs {border:0;box-shadow:none;}
.header-tabs .el-tabs__content {display: none;}
.header-tabs .el-tabs__item {font-size: 12px;}
.form-title {border-bottom: 1px solid #eee;margin-bottom: 20px;font-size: 17px;padding-bottom: 15px;color: #3c4a54;}

View File

@ -112,7 +112,7 @@
.el-dropdown__popper {
--el-dropdown-menuItem-hover-fill: #222225;
}
/* 布局 */
.adminui-header {background: $--background;}
.aminui-side-split {background: $--background;}
@ -231,4 +231,6 @@
#Mask {fill: #222;}
#Oval-Copy-2 {fill: #1d1d1d;}
}
.sc-title {color: #d0d0d0;border-color: $--border-color;}
}

View File

@ -4,6 +4,7 @@
<el-main style="padding:0 20px 20px 20px">
<el-form ref="dialogForm" :model="form" :rules="rules" label-width="100px" label-position="top">
<sc-title title="基础"></sc-title>
<el-row :gutter="20">
<el-col :span="16">
<el-form-item label="表格名称" prop="name">
@ -20,7 +21,8 @@
<el-checkbox v-model="form.remoteSort" label="远程排序"></el-checkbox>
<el-checkbox v-model="form.remoteFilter" label="远程过滤"></el-checkbox>
</el-form-item>
<el-form-item label="表格列" prop="column">
<sc-title title="表格列"></sc-title>
<el-form-item prop="column">
<sc-form-table v-model="form.column" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
<el-table-column prop="label" label="名称">
<template #default="scope">

View File

@ -54,6 +54,10 @@
labelPosition: 'right',
size: 'medium',
formItems: [
{
label: "ElementPlus",
component: "title",
},
{
label: "输入框",
name: "name",
@ -186,32 +190,6 @@
]
}
},
{
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: "多选框",
name: "checkbox",
@ -231,7 +209,8 @@
value: false
}
]
}
},
hideHandle: "$.required==true"
},
{
label: "多选框组",
@ -250,7 +229,8 @@
value: "option2"
}
]
}
},
hideHandle: "$.required==true"
},
{
label: "单选",
@ -268,7 +248,8 @@
value: "2"
}
]
}
},
hideHandle: "$.required==true"
},
{
label: "开关",
@ -277,25 +258,6 @@
value: false,
component: "switch",
},
{
label: "上传",
component: "upload",
options: {
items:[
{
label: "图像1",
name: "img1",
value: ""
},
{
label: "图像2",
name: "img2",
value: ""
}
]
},
hideHandle: "$.required==true"
},
{
label: "日期/时间",
name: "date",
@ -340,6 +302,54 @@
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",