This commit is contained in:
parent
10c03fbeba
commit
17b75dcd5a
|
@ -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>
|
||||
|
|
|
@ -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>
|
58
src/main.js
58
src/main.js
|
@ -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');
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
|
@ -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;}
|
||||
|
|
|
@ -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;}
|
||||
|
|
|
@ -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;}
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in New Issue