Skip to content

R
rym-element-ui
Commit 457280ca by 姜雷
Options

添加app布局和搜索栏布局组件

parent 2fe2e018
Showing with 375 additions and 303 deletions
.eslintrc.js
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
module.exports = { module.exports = {
root: true, root: true,
parserOptions: { parserOptions: {
parser: 'babel-eslint' parser: 'babel-eslint',
}, },
env: { env: {
browser: true, browser: true,
...@@ -12,12 +12,10 @@ module.exports = { ...@@ -12,12 +12,10 @@ module.exports = {
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
extends: ['plugin:vue/essential'], extends: ['plugin:vue/essential'],
// required to lint *.vue files // required to lint *.vue files
plugins: [ plugins: ['vue'],
'vue'
],
// add your custom rules here // add your custom rules here
rules: { rules: {
// allow debugger during development // allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
} },
} };
components.json 0 → 100644
{
"Layout": "./src/components/Layout",
"SearchItem": "./src/components/SearchItem",
"DatePicker": "./src/components/DatePicker",
"DateRangePicker": "./src/components/DateRangePicker"
}
examples/App.vue 0 → 100644
<template>
<div id="app">
<app-layout>
<router-view></router-view>
</app-layout>
</div>
</template>
<script>
export default {
name: "app",
data() {
let dataList = [];
for (let index = 0; index < 20; index++) {
dataList[index] = {
id: index,
name: "asdad"
};
}
return {
filters: {},
dataList: dataList,
selectVal: "",
pagination: {
pageNum: 1,
pageSize: 10,
total: 123
}
};
},
methods: {
changePage(index) {
console.log(index);
},
changeSizeHandle(size) {
console.log(size);
}
}
};
</script>
<style lang="scss">
.components-demo-wrap {
width: 500px;
margin: 50px auto;
}
</style>
src/demo/Layout.vue → examples/Layout.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="app-wrapper"> <div class="app-wrapper">
<div class="topTitle"> <div class="topTitle">
<div class="com-logo"> <div class="com-logo">
<img src="../assets/images/logo.png" alt="logo" /> <img src="../src/assets/images/logo.png" alt="logo" />
</div> </div>
<h1 class="com-title">后台管理系统</h1> <h1 class="com-title">后台管理系统</h1>
</div> </div>
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</template> </template>
<style lang="scss"> <style lang="scss">
@import '../assets/styles/variables.scss'; @import '../src/assets/styles/variables.scss';
.app-wrapper { .app-wrapper {
.com-logo { .com-logo {
width: 80px; width: 80px;
......
examples/containers/DatePicker.vue 0 → 100644
<template>
<div>
<div class="components-demo-wrap">
<date-picker v-model="filters.dateTime" />
</div>
<div class="components-demo-wrap">
<date-range-picker v-model="filters.dateRange" />
</div>
</div>
</template>
<script>
export default {
name: "DatePickerPage",
data() {
return {
filters: {}
};
}
};
</script>
examples/containers/Home.vue 0 → 100644
<template>
<div>
<ul>
<li>
<router-link to="DatePicker">DatePicker Demo</router-link>
</li>
<li>
<router-link to="SearchItem">SearchItem Demo</router-link>
</li>
</ul>
</div>
</template>
\ No newline at end of file
examples/containers/SearchItem.vue 0 → 100644
<template>
<div>
<div class="components-demo-wrap">
<search-item label="默认">
<date-picker v-model="filters.dateTime" />
</search-item>
<search-item
label="大号"
size="big"
>
<date-picker v-model="filters.dateTime" />
</search-item>
</div>
</div>
</template>
<script>
export default {
name: "SearchItemPage",
data() {
return {
filters: {}
};
}
};
</script>
\ No newline at end of file
src/main.js → examples/main.js
import Vue from 'vue'; import Vue from 'vue';
import App from './demo/App.vue'; import App from './App.vue';
import rymUi from './index'; import route from './route';
import rymUi from '../src/index';
import 'normalize.css/normalize.css'; import 'normalize.css/normalize.css';
Vue.use(rymUi); Vue.use(rymUi);
...@@ -9,4 +10,5 @@ Vue.config.productionTip = false; ...@@ -9,4 +10,5 @@ Vue.config.productionTip = false;
new Vue({ new Vue({
render: h => h(App), render: h => h(App),
router: route,
}).$mount('#app'); }).$mount('#app');
examples/route.js 0 → 100644
import Vue from 'vue';
import Router from 'vue-router';
import Home from './containers/Home.vue';
import DatePicker from './containers/DatePicker.vue';
import SearchItem from './containers/SearchItem.vue';
Vue.use(Router);
const routerMap = [
{ path: '', component: Home },
{ path: '/DatePicker', component: DatePicker },
{ path: '/SearchItem', component: SearchItem },
];
export default new Router({
// mode: 'history',
scrollBehavior: () => ({ y: 0 }),
routes: routerMap,
});
package-lock.json
...@@ -11459,6 +11459,11 @@ ...@@ -11459,6 +11459,11 @@
"vue-style-loader": "^4.1.0" "vue-style-loader": "^4.1.0"
} }
}, },
"vue-router": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.2.tgz",
"integrity": "sha512-opKtsxjp9eOcFWdp6xLQPLmRGgfM932Tl56U9chYTnoWqKxQ8M20N7AkdEbM5beUh6wICoFGYugAX9vQjyJLFg=="
},
"vue-style-loader": { "vue-style-loader": {
"version": "4.1.2", "version": "4.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
......
package.json
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"description": "任意门组件库", "description": "任意门组件库",
"main": "lib/rymUi.common.js", "main": "lib/rymUi.common.js",
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "start": "vue-cli-service serve --port 3000 examples/main.js",
"build": "vue-cli-service build --target lib --name rymUi --dest lib src/index.js", "build": "vue-cli-service build --target lib --name rymUi --dest lib src/index.js",
"publish": "cross-env vue-cli-service build --target lib --name rymUi --dest lib src/index.js && npm publish", "publish": "cross-env vue-cli-service build --target lib --name rymUi --dest lib src/index.js && npm publish",
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
...@@ -23,7 +23,8 @@ ...@@ -23,7 +23,8 @@
"element-ui": "^2.4.5", "element-ui": "^2.4.5",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"popmotion": "^8.5.5", "popmotion": "^8.5.5",
"vue": "^2.5.21" "vue": "^2.5.21",
"vue-router": "^3.0.2"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^3.2.0", "@vue/cli-plugin-babel": "^3.2.0",
......
src/assets/styles/element-ui.scss
...@@ -8,6 +8,10 @@ $--color-danger: #ff3333; ...@@ -8,6 +8,10 @@ $--color-danger: #ff3333;
$--font-path: '~element-ui/lib/theme-chalk/fonts'; $--font-path: '~element-ui/lib/theme-chalk/fonts';
@import '~element-ui/packages/theme-chalk/src/index'; @import '~element-ui/packages/theme-chalk/src/index';
.hide {
display: none !important;
}
.el-upload { .el-upload {
input[type='file'] { input[type='file'] {
display: none !important; display: none !important;
...@@ -58,7 +62,6 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts'; ...@@ -58,7 +62,6 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
.el-button { .el-button {
height: 22px; height: 22px;
line-height: 22px; line-height: 22px;
font-size: 12px;
} }
.el-button { .el-button {
padding: 0 8px; padding: 0 8px;
......
src/components/DateRangePicker/DatePicker.vue → src/components/DatePicker/DatePicker.vue
...@@ -94,16 +94,18 @@ ...@@ -94,16 +94,18 @@
</template> </template>
<script> <script>
import { DatePicker } from 'element-ui'; import { DatePicker } from "element-ui";
export default { export default {
name: 'date-picker', name: "date-picker",
extends: DatePicker, extends: DatePicker
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
@import '../../assets/styles/variables.scss'; @import "../../assets/styles/variables.scss";
@import "../../assets/styles/element-ui.scss";
.md-data-picker { .md-data-picker {
font-size: 12px;
&.el-date-editor.el-input { &.el-date-editor.el-input {
width: 100%; width: 100%;
} }
...@@ -111,7 +113,12 @@ export default { ...@@ -111,7 +113,12 @@ export default {
display: block; display: block;
width: 10px; width: 10px;
height: 10px; height: 10px;
margin-top: 7px; margin-top: 6px;
img {
display: block;
width: 100%;
height: 100%;
}
} }
.el-input__prefix { .el-input__prefix {
left: 100%; left: 100%;
...@@ -123,6 +130,7 @@ export default { ...@@ -123,6 +130,7 @@ export default {
} }
@media screen and (min-width: $bigScreenWidth) { @media screen and (min-width: $bigScreenWidth) {
.md-data-picker { .md-data-picker {
font-size: 14px;
.md-date__icon { .md-date__icon {
width: 22px; width: 22px;
height: 22px; height: 22px;
......
src/components/DatePicker/index.js 0 → 100644
import DatePicker from './DatePicker.vue'
DatePicker.install = Vue => {
Vue.component(DatePicker.name, DatePicker)
}
export default DatePicker
\ No newline at end of file
src/components/DateRangePicker/DateRangePicker.vue
<template> <template>
<div
class="date-range-pick"
v-if="noLabel"
>
<date-picker
class="data-range-item"
v-model="starttime"
format="yyyy-MM-dd HH:mm"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetime"
:picker-options="pickerOptions1"
default-time="00:00:00"
>
</date-picker>
<date-picker
class="data-range-item"
v-model="endtime"
format="yyyy-MM-dd HH:mm"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetime"
:picker-options="pickerOptions2"
default-time="00:00:00"
>
</date-picker>
</div>
<search-item
:label="label"
size="big"
v-else
>
<div class="date-range-pick"> <div class="date-range-pick">
<date-picker <date-picker
class="data-range-item" class="data-range-item"
...@@ -51,27 +21,26 @@ ...@@ -51,27 +21,26 @@
> >
</date-picker> </date-picker>
</div> </div>
</search-item>
</template> </template>
<script> <script>
export default { export default {
name: 'date-range-picker', name: "date-range-picker",
props: { props: {
label: { label: {
type: String, type: String,
default: '时间范围', default: "时间范围"
}, },
noLabel: { noLabel: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
startTime: { startTime: {
type: String, type: String
}, },
endTime: { endTime: {
type: String, type: String
}, }
}, },
data() { data() {
return { return {
...@@ -82,54 +51,56 @@ export default { ...@@ -82,54 +51,56 @@ export default {
return this.endtime return this.endtime
? time.getTime() > new Date(this.endtime).getTime() ? time.getTime() > new Date(this.endtime).getTime()
: false; : false;
}, }
}, },
pickerOptions2: { pickerOptions2: {
disabledDate: time => { disabledDate: time => {
return this.starttime return this.starttime
? time.getTime() < new Date(this.starttime).getTime() ? time.getTime() < new Date(this.starttime).getTime()
: false; : false;
}, }
}, }
}; };
}, },
watch: { watch: {
starttime(newVal) { starttime(newVal) {
this.$emit('input', [this.starttime, this.endtime]); this.$emit("input", [this.starttime, this.endtime]);
}, },
endtime(newVal) { endtime(newVal) {
this.$emit('input', [this.starttime, this.endtime]); this.$emit("input", [this.starttime, this.endtime]);
}, }
}, }
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
@import '../../assets/styles/variables.scss'; @import "../../assets/styles/variables.scss";
.date-range-pick { .date-range-pick {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
min-width: 262px;
.data-range-item.el-input { .data-range-item.el-input {
width: 126px; width: 126px;
} }
.el-input__prefix { .el-input__prefix {
left: 110px; transform: translate(-13px);
} }
.el-input__suffix { .el-input__suffix {
right: -2px; right: -5px;
} }
} }
@media screen and (min-width: $bigScreenWidth) { @media screen and (min-width: $bigScreenWidth) {
.date-range-pick { .date-range-pick {
min-width: 324px;
.data-range-item.el-input { .data-range-item.el-input {
width: 157px; width: 157px;
} }
.el-input__prefix { .el-input__prefix {
left: 130px; transform: translate(-24px);
} }
.el-input__suffix { .el-input__suffix {
right: 5px; right: 2px;
} }
} }
} }
......
src/components/DateRangePicker/index.js 0 → 100644
import DateRangePicker from './DateRangePicker.vue';
DateRangePicker.install = Vue => {
Vue.component(DateRangePicker.name, DateRangePicker);
};
export default DateRangePicker;
src/components/Layout/Layout.vue 0 → 100644
<template>
<div class="app-wrapper">
<div class="topTitle">
<div class="com-logo">
<img
src="../../assets/images/logo.png"
alt="logo"
/>
</div>
<h1 class="com-title">后台管理系统</h1>
</div>
<div class="body-container">
<div class="sidebar-container">
<slot name="sidebar"></slot>
</div>
<div class="main-container">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: "app-layout",
computed: {
sidebar() {
return this.$store.state.app.sidebar;
}
}
};
</script>
<style lang="scss">
@import "../../assets/styles/variables.scss";
html,
body,
#app {
width: 100%;
height: 100%;
overflow: hidden;
}
.app-wrapper {
position: relative;
height: 100%;
width: 100%;
min-width: 1280px;
background-image: radial-gradient(
ellipse farthest-corner at 0px 0px,
#6895fe 0%,
#2362f6 100%
);
.topTitle {
display: flex;
align-items: center;
transition: height 0.28s;
height: $topBar-height; // background-image: linear-gradient(90deg, #6895fe, #2362f6);
}
.com-logo {
width: 80px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
img {
width: 100%;
height: 100%;
}
}
.com-title {
flex: 1;
height: 24px;
line-height: 24px;
font-size: 14px;
font-weight: normal;
color: #fff;
text-indent: 6px;
}
.body-container {
display: flex;
height: calc(100vh - #{$topBar-height});
}
.sidebar-container {
transition: width 0.28s;
width: $sideBar-width;
height: 100%;
z-index: 1001;
overflow: hidden;
}
// 主体区域
.main-container {
flex: 1;
display: flex;
flex-direction: column;
height: calc(100vh - #{$topBar-height});
transition: margin-left 0.28s;
background-color: #eee;
// main-container全局样式
.app-main {
width: calc(100vw - #{$sideBar-width});
height: calc(100vh - #{$topBar-height} - 30px);
}
.main-wrap {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
.main-wrap-inner {
height: calc(100% - #{$footer-height});
display: flex;
flex-direction: column;
&.noFooter {
height: 100%;
.table-wrap {
margin-bottom: 0;
}
}
}
.table-wrap {
flex: 1;
overflow: auto;
margin: 12px 12px 22px;
}
}
}
}
@media screen and (min-width: $bigScreenWidth) {
$sideBar-width: 132px;
$topBar-height: 72px;
.app-wrapper {
.topTitle {
height: $topBar-height; // background-image: linear-gradient(90deg, #6895fe, #2362f6);
}
.com-logo {
width: 138px;
height: 44px;
}
.sidebar-container {
width: $sideBar-width;
}
}
}
</style>
src/components/Layout/index.js 0 → 100644
import Layout from './Layout.vue';
Layout.install = Vue => {
Vue.component(Layout.name, Layout);
};
export default Layout;
src/components/SearchItem/index.js 0 → 100644
import SearchItem from './SearchItem.vue';
SearchItem.install = Vue => {
Vue.component(SearchItem.name, SearchItem);
};
export default SearchItem;
src/demo/App.vue deleted 100644 → 0
<template>
<div id="app">
<Layout>
<list-layout>
<template slot="filterItem">
<search-item label="会员ID">
<md-select v-model="selectVal">
<el-option value="fsd">ds</el-option>
<el-option value="ffg">ds</el-option>
<el-option value="fga">ds</el-option>
</md-select>
</search-item>
<date-range-picker label="注册时间" v-model="filters.timeRange" />
</template>
<md-table :data="dataList">
<md-table-column
prop="id"
label="ID"
min-width="50"
></md-table-column>
<md-table-column
prop="name"
label="姓名"
min-width="250"
></md-table-column>
<md-table-column
prop="name"
label="姓名"
min-width="250"
></md-table-column>
<md-table-column
prop="name"
label="姓名"
min-width="250"
></md-table-column>
<md-table-column
prop="name"
label="姓名"
min-width="250"
></md-table-column>
<md-table-column
prop="name"
label="姓名"
min-width="250"
></md-table-column>
<md-table-column
prop="name"
label="姓名"
min-width="250"
></md-table-column>
</md-table>
<template slot="footer">
<md-pagination
class="md-pagination"
:pagination="pagination"
:changePage="changePage"
:changeSizeHandle="changeSizeHandle"
/>
</template>
</list-layout>
</Layout>
</div>
</template>
<script>
import Layout from './Layout';
export default {
name: 'app',
components: {
Layout,
},
data() {
let dataList = [];
for (let index = 0; index < 20; index++) {
dataList[index] = {
id: index,
name: 'asdad',
};
}
return {
filters: {},
dataList: dataList,
selectVal: '',
pagination: {
pageNum: 1,
pageSize: 10,
total: 123,
},
};
},
methods: {
changePage(index) {
console.log(index);
},
changeSizeHandle(size) {
console.log(size);
},
},
};
</script>
src/index.js
import DragDialog from './components/DragDialog/DragDialog'; import Layout from './components/Layout/index';
import Pagination from './components/Pagination/index'; import SearchItem from './components/SearchItem/index';
import NormalDialog from './components/Dialog/NormalDialog.vue'; import DatePicker from './components/DatePicker/index';
// import UserDialog from './components/Dialog/UserDialogWrap'; import DateRangePicker from './components/DateRangePicker/index';
import MessageBox from './components/MessageBox/index';
import SearchItem from './components/SearchItem/SearchItem.vue';
import MdSelect from './components/input/Select.vue';
import DateRangePicker from './components/DateRangePicker/DateRangePicker.vue';
import DatePicker from './components/DateRangePicker/DatePicker.vue';
import Table from './components/Table/TableWrap';
import TableColumn from './components/Table/TableColumn.vue';
import ListLayout from './components/ListLayout/ListLayout.vue';
import FormArea from './components/FormArea/FormArea.vue';
import FormLine from './components/FormArea/FormLine.vue';
import FormItem from './components/FormArea/FormItem.vue';
// import AreaSelect from './components/input/AreaSelect.vue';
// import UserWithContent from './components/UserCard/UserWithContent.vue';
// import UserCard from './components/UserCard/UserCard.vue';
// import UserInfo from './components/UserCard/UserInfo.vue';
// import ServiceTypeSelect from './components/input/ServiceTypeSelect.vue';
// import GiveTypeSelect from './components/input/GiveTypeSelect.vue';
// import BaseDataSelect from './components/input/BaseDataSelect.vue';
import ImgIcon from './components/ImgIcon/ImgIcon.vue';
import HeaderImg from './components/HeaderImg/HeaderImg.vue';
import { Option } from 'element-ui'; import { Option } from 'element-ui';
import '@/assets/styles/index.scss'; // global css
const install = Vue => { const install = Vue => {
Vue.prototype.$mdAlert = MessageBox; // Layout
Vue.component(Layout.name, Layout);
Vue.component(SearchItem.name, SearchItem);
// Element-ui // Element-ui
Vue.component(Option.name, Option); Vue.component(Option.name, Option);
// 布局组件
Vue.component(ImgIcon.name, ImgIcon);
Vue.component(HeaderImg.name, HeaderImg);
Vue.component(ListLayout.name, ListLayout);
Vue.component(SearchItem.name, SearchItem);
Vue.component(Pagination.name, Pagination);
Vue.component(Table.name, Table);
Vue.component(TableColumn.name, TableColumn);
// Vue.component('UserCard', UserCard);
// Vue.component('UserInfo', UserInfo);
// Vue.component(UserWithContent.name, UserWithContent);
// 弹窗内表单布局
Vue.component(FormArea.name, FormArea);
Vue.component(FormLine.name, FormLine);
Vue.component(FormItem.name, FormItem);
// 弹窗
Vue.component(DragDialog.name, DragDialog);
Vue.component(NormalDialog.name, NormalDialog);
// Vue.component(UserDialog.name, UserDialog);
// input // input
Vue.component(MdSelect.name, MdSelect);
Vue.component(DateRangePicker.name, DateRangePicker);
Vue.component(DatePicker.name, DatePicker); Vue.component(DatePicker.name, DatePicker);
// Vue.component(AreaSelect.name, AreaSelect); Vue.component(DateRangePicker.name, DateRangePicker);
// Vue.component(BaseDataSelect.name, BaseDataSelect);
// Vue.component(ServiceTypeSelect.name, ServiceTypeSelect);
// Vue.component(GiveTypeSelect.name, GiveTypeSelect);
}; };
// module.exports = rymUi; // module.exports = rymUi;
......
src/mixins/operator.js deleted 100644 → 0
import { mapGetters,mapActions} from 'vuex';
export default {
data() {
return {
// listData: [], // 需页面组件自己注入列表并命名为 listData
filters: {},
selected: {},
selectedList: [], // 带有选择框列表选中的列表项
editType: 0, // 带有新增/编辑的页面区分编辑状态
dialogEditVisible: false, // 带有新增/编辑的页面弹出框可/不可见
};
},
computed: {
...mapGetters(['loading', 'operatorList']),
},
created() {
let operatorPromise = null;
if (this.operatorList && this.operatorList.length) {
operatorPromise = new Promise(resolve => resolve());
} else {
operatorPromise = this.getOperatorList();
}
operatorPromise.then(() => {
if (this.operatorId) {
this.filters.operatorId = this.operatorId;
} else if (this.operatorList.length === 1) {
this.filters.operatorId = this.operatorList[0].operatorId;
}
});
},
methods:{
...mapActions(['getOperatorList']),
// 页面组件需自己实现获取列表数据的方法
fetchList() {},
// 点击搜索时处理函数
searchList() {
this.changePage(1);
},
// 获取过滤条件方法 组件可自己实现
getFilters() {
let filters = this.$getFilters(this.filters);
return filters;
},
// 页码改变时处理函数
changePage(index) {
const filters = this.getFilters();
this.fetchList({
...filters,
pageNum: index,
});
},
// 分页大小改变时处理函数
changeSizeHandle(pageSize) {
const filters = this.getFilters();
this.fetchList({
...filters,
pageNum: 1,
pageSize: pageSize,
});
this.updatePagination({
pageNum: 1,
pageSize: pageSize,
});
},
// 当列表可选时 处理选择函数
handleSelectionChange(val) {
this.selectedList = val;
},
resetEditDialog(done) {
this.selected = {};
done && typeof done == 'function'
? done()
: (this.dialogEditVisible = false);
},
}
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment