Commit 457280ca by 姜雷

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

parent 2fe2e018
......@@ -3,7 +3,7 @@
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
parser: 'babel-eslint',
},
env: {
browser: true,
......@@ -12,12 +12,10 @@ module.exports = {
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
extends: ['plugin:vue/essential'],
// required to lint *.vue files
plugins: [
'vue'
],
plugins: ['vue'],
// add your custom rules here
rules: {
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
};
{
"Layout": "./src/components/Layout",
"SearchItem": "./src/components/SearchItem",
"DatePicker": "./src/components/DatePicker",
"DateRangePicker": "./src/components/DateRangePicker"
}
<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>
......@@ -2,7 +2,7 @@
<div class="app-wrapper">
<div class="topTitle">
<div class="com-logo">
<img src="../assets/images/logo.png" alt="logo" />
<img src="../src/assets/images/logo.png" alt="logo" />
</div>
<h1 class="com-title">后台管理系统</h1>
</div>
......@@ -14,7 +14,7 @@
</template>
<style lang="scss">
@import '../assets/styles/variables.scss';
@import '../src/assets/styles/variables.scss';
.app-wrapper {
.com-logo {
width: 80px;
......
<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>
<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
<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
import Vue from 'vue';
import App from './demo/App.vue';
import rymUi from './index';
import App from './App.vue';
import route from './route';
import rymUi from '../src/index';
import 'normalize.css/normalize.css';
Vue.use(rymUi);
......@@ -9,4 +10,5 @@ Vue.config.productionTip = false;
new Vue({
render: h => h(App),
router: route,
}).$mount('#app');
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,
});
......@@ -11459,6 +11459,11 @@
"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": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
......
......@@ -4,7 +4,7 @@
"description": "任意门组件库",
"main": "lib/rymUi.common.js",
"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",
"publish": "cross-env vue-cli-service build --target lib --name rymUi --dest lib src/index.js && npm publish",
"lint": "vue-cli-service lint"
......@@ -23,7 +23,8 @@
"element-ui": "^2.4.5",
"normalize.css": "^8.0.1",
"popmotion": "^8.5.5",
"vue": "^2.5.21"
"vue": "^2.5.21",
"vue-router": "^3.0.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.2.0",
......
......@@ -8,6 +8,10 @@ $--color-danger: #ff3333;
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import '~element-ui/packages/theme-chalk/src/index';
.hide {
display: none !important;
}
.el-upload {
input[type='file'] {
display: none !important;
......@@ -58,7 +62,6 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
.el-button {
height: 22px;
line-height: 22px;
font-size: 12px;
}
.el-button {
padding: 0 8px;
......
......@@ -94,16 +94,18 @@
</template>
<script>
import { DatePicker } from 'element-ui';
import { DatePicker } from "element-ui";
export default {
name: 'date-picker',
extends: DatePicker,
name: "date-picker",
extends: DatePicker
};
</script>
<style lang="scss">
@import '../../assets/styles/variables.scss';
@import "../../assets/styles/variables.scss";
@import "../../assets/styles/element-ui.scss";
.md-data-picker {
font-size: 12px;
&.el-date-editor.el-input {
width: 100%;
}
......@@ -111,7 +113,12 @@ export default {
display: block;
width: 10px;
height: 10px;
margin-top: 7px;
margin-top: 6px;
img {
display: block;
width: 100%;
height: 100%;
}
}
.el-input__prefix {
left: 100%;
......@@ -123,6 +130,7 @@ export default {
}
@media screen and (min-width: $bigScreenWidth) {
.md-data-picker {
font-size: 14px;
.md-date__icon {
width: 22px;
height: 22px;
......
import DatePicker from './DatePicker.vue'
DatePicker.install = Vue => {
Vue.component(DatePicker.name, DatePicker)
}
export default DatePicker
\ No newline at end of file
<template>
<div
class="date-range-pick"
v-if="noLabel"
>
<div class="date-range-pick">
<date-picker
class="data-range-item"
v-model="starttime"
......@@ -24,54 +21,26 @@
>
</date-picker>
</div>
<search-item
:label="label"
size="big"
v-else
>
<div class="date-range-pick">
<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>
</template>
<script>
export default {
name: 'date-range-picker',
name: "date-range-picker",
props: {
label: {
type: String,
default: '时间范围',
default: "时间范围"
},
noLabel: {
type: Boolean,
default: false,
default: false
},
startTime: {
type: String,
type: String
},
endTime: {
type: String,
},
type: String
}
},
data() {
return {
......@@ -82,54 +51,56 @@ export default {
return this.endtime
? time.getTime() > new Date(this.endtime).getTime()
: false;
},
}
},
pickerOptions2: {
disabledDate: time => {
return this.starttime
? time.getTime() < new Date(this.starttime).getTime()
: false;
},
},
}
}
};
},
watch: {
starttime(newVal) {
this.$emit('input', [this.starttime, this.endtime]);
this.$emit("input", [this.starttime, this.endtime]);
},
endtime(newVal) {
this.$emit('input', [this.starttime, this.endtime]);
},
},
this.$emit("input", [this.starttime, this.endtime]);
}
}
};
</script>
<style lang="scss">
@import '../../assets/styles/variables.scss';
@import "../../assets/styles/variables.scss";
.date-range-pick {
display: flex;
justify-content: space-between;
min-width: 262px;
.data-range-item.el-input {
width: 126px;
}
.el-input__prefix {
left: 110px;
transform: translate(-13px);
}
.el-input__suffix {
right: -2px;
right: -5px;
}
}
@media screen and (min-width: $bigScreenWidth) {
.date-range-pick {
min-width: 324px;
.data-range-item.el-input {
width: 157px;
}
.el-input__prefix {
left: 130px;
transform: translate(-24px);
}
.el-input__suffix {
right: 5px;
right: 2px;
}
}
}
......
import DateRangePicker from './DateRangePicker.vue';
DateRangePicker.install = Vue => {
Vue.component(DateRangePicker.name, DateRangePicker);
};
export default DateRangePicker;
<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>
import Layout from './Layout.vue';
Layout.install = Vue => {
Vue.component(Layout.name, Layout);
};
export default Layout;
import SearchItem from './SearchItem.vue';
SearchItem.install = Vue => {
Vue.component(SearchItem.name, SearchItem);
};
export default SearchItem;
<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>
import DragDialog from './components/DragDialog/DragDialog';
import Pagination from './components/Pagination/index';
import NormalDialog from './components/Dialog/NormalDialog.vue';
// import UserDialog from './components/Dialog/UserDialogWrap';
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 Layout from './components/Layout/index';
import SearchItem from './components/SearchItem/index';
import DatePicker from './components/DatePicker/index';
import DateRangePicker from './components/DateRangePicker/index';
import { Option } from 'element-ui';
import '@/assets/styles/index.scss'; // global css
const install = Vue => {
Vue.prototype.$mdAlert = MessageBox;
// Layout
Vue.component(Layout.name, Layout);
Vue.component(SearchItem.name, SearchItem);
// Element-ui
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
Vue.component(MdSelect.name, MdSelect);
Vue.component(DateRangePicker.name, DateRangePicker);
Vue.component(DatePicker.name, DatePicker);
// Vue.component(AreaSelect.name, AreaSelect);
// Vue.component(BaseDataSelect.name, BaseDataSelect);
// Vue.component(ServiceTypeSelect.name, ServiceTypeSelect);
// Vue.component(GiveTypeSelect.name, GiveTypeSelect);
Vue.component(DateRangePicker.name, DateRangePicker);
};
// module.exports = rymUi;
......
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