mirror of https://gitee.com/pnoker/dc3-web.git
pull/1/head
parent
a55ec3e56e
commit
3902dc7b29
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 422 B After Width: | Height: | Size: 422 B |
@ -1,13 +1,17 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
|
|
||||||
import Element from 'element-ui'
|
import Element from 'element-ui'
|
||||||
|
import Avue from "@smallwei/avue";
|
||||||
import locale from 'element-ui/lib/locale/lang/zh-CN'
|
import locale from 'element-ui/lib/locale/lang/zh-CN'
|
||||||
import 'element-ui/lib/theme-chalk/index.css';
|
import 'element-ui/lib/theme-chalk/index.css';
|
||||||
import './element-variables.scss'
|
import './element-variables.scss'
|
||||||
|
import '@smallwei/avue/lib/index.css'
|
||||||
|
|
||||||
import baseCard from '@/components/card/base-card'
|
import baseCard from '@/components/card/base-card'
|
||||||
import titleCard from '@/components/card/title-card'
|
import titleCard from '@/components/card/title-card'
|
||||||
|
|
||||||
Vue.use(Element, {locale});
|
Vue.use(Element, {locale});
|
||||||
|
Vue.use(Avue);
|
||||||
|
|
||||||
Vue.component('base-card', baseCard);
|
Vue.component('base-card', baseCard);
|
||||||
Vue.component('title-card', titleCard);
|
Vue.component('title-card', titleCard);
|
@ -1,5 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="about">
|
<div class="about">
|
||||||
<h1>This is an about page</h1>
|
<h1>This is an about page</h1>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
@ -1,5 +1,109 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="about">
|
<base-card>
|
||||||
<h1>This is an about page</h1>
|
<avue-crud :option="option"
|
||||||
</div>
|
:data="data"
|
||||||
|
ref="crud"
|
||||||
|
v-model="form"
|
||||||
|
@row-del="rowDel"
|
||||||
|
@row-update="handleRowUpdate"
|
||||||
|
@row-save="handleRowSave"
|
||||||
|
@search-change="searchChange"
|
||||||
|
@search-reset="searchReset">
|
||||||
|
<template slot="menuLeft">
|
||||||
|
<el-button type="danger"
|
||||||
|
size="small"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
plain>删 除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</avue-crud>
|
||||||
|
</base-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {},
|
||||||
|
selectionList: [],
|
||||||
|
query: {},
|
||||||
|
page: {
|
||||||
|
pageSize: 10,
|
||||||
|
currentPage: 1,
|
||||||
|
total: 0
|
||||||
|
},
|
||||||
|
data: [{
|
||||||
|
name: '张三',
|
||||||
|
sex: '男',
|
||||||
|
date: '1994-02-23 00:00:00'
|
||||||
|
}, {
|
||||||
|
name: '李四',
|
||||||
|
sex: '女',
|
||||||
|
date: '1994-02-23 00:00:00'
|
||||||
|
}, {
|
||||||
|
name: '王五',
|
||||||
|
sex: '女',
|
||||||
|
date: '1994-02-23 00:00:00'
|
||||||
|
}, {
|
||||||
|
name: '赵六',
|
||||||
|
sex: '男',
|
||||||
|
date: '1994-02-23 00:00:00'
|
||||||
|
}],
|
||||||
|
option: {
|
||||||
|
tip: false,
|
||||||
|
tree: true,
|
||||||
|
border: true,
|
||||||
|
index: true,
|
||||||
|
selection: true,
|
||||||
|
viewBtn: true,
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '姓名',
|
||||||
|
prop: 'name',
|
||||||
|
search: true,
|
||||||
|
rules: [{
|
||||||
|
required: true,
|
||||||
|
message: "请输入部门名称",
|
||||||
|
trigger: "blur"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '性别',
|
||||||
|
prop: 'sex'
|
||||||
|
}, {
|
||||||
|
label: "日期",
|
||||||
|
prop: "date",
|
||||||
|
type: "date",
|
||||||
|
format: "yyyy-MM-dd hh:mm:ss",
|
||||||
|
valueFormat: "yyyy-MM-dd hh:mm:ss",
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 增加按钮
|
||||||
|
handleRowSave(row, done, loading) {
|
||||||
|
this.data.splice(0, 0, row);
|
||||||
|
done(); // 关闭表单
|
||||||
|
loading(); // 按钮停止加载
|
||||||
|
},
|
||||||
|
// 修改按钮
|
||||||
|
handleRowUpdate(row, index, done, loading) {
|
||||||
|
this.data.splice(index, 1, row);
|
||||||
|
done(); // 关闭表单
|
||||||
|
loading(); // 按钮停止加载
|
||||||
|
},
|
||||||
|
// 删除按钮
|
||||||
|
rowDel(row, index) {
|
||||||
|
this.$confirm('是否删除该条信息?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
this.data.splice(index, 1);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
@ -1,64 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="container view">
|
|
||||||
<el-row class="operator">
|
|
||||||
<el-button icon="el-icon-search" circle></el-button>
|
|
||||||
<el-button type="success" icon="el-icon-plus" circle></el-button>
|
|
||||||
<el-button type="primary" icon="el-icon-edit" circle></el-button>
|
|
||||||
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
|
|
||||||
<el-button type="danger" icon="el-icon-delete" circle></el-button>
|
|
||||||
</el-row>
|
|
||||||
<el-row class="device_list">
|
|
||||||
<el-card class="box-card" shadow="hover">
|
|
||||||
<div slot="header" class="clearfix">
|
|
||||||
<span>设备名称</span>
|
|
||||||
<el-button class="el-icon-more" style="float: right; padding: 3px 0" type="text"/>
|
|
||||||
</div>
|
|
||||||
<div v-for="o in 4" :key="o" class="text item">
|
|
||||||
{{'列表内容 ' + o }}
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
<el-card class="box-card" shadow="hover">
|
|
||||||
<div slot="header" class="clearfix">
|
|
||||||
<span>设备名称</span>
|
|
||||||
<el-button class="el-icon-more" style="float: right; padding: 3px 0" type="text"/>
|
|
||||||
</div>
|
|
||||||
<div v-for="o in 4" :key="o" class="text item">
|
|
||||||
{{'列表内容 ' + o }}
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
</el-row>
|
|
||||||
<el-row class="page">
|
|
||||||
<el-pagination
|
|
||||||
background
|
|
||||||
layout="prev, pager, next"
|
|
||||||
:total="1000">
|
|
||||||
</el-pagination>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.text {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
margin-bottom: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clearfix:before,
|
|
||||||
.clearfix:after {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clearfix:after {
|
|
||||||
clear: both
|
|
||||||
}
|
|
||||||
|
|
||||||
.box-card {
|
|
||||||
width: 480px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
@ -0,0 +1,220 @@
|
|||||||
|
<template>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-col :span="4">
|
||||||
|
<base-card>
|
||||||
|
<avue-tree :option="treeOption"
|
||||||
|
:data="treeData"
|
||||||
|
@node-click="nodeClick"/>
|
||||||
|
</base-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="20">
|
||||||
|
<base-card>
|
||||||
|
<avue-crud :option="option"
|
||||||
|
:data="data"
|
||||||
|
ref="crud"
|
||||||
|
v-model="form"
|
||||||
|
:page="page"
|
||||||
|
@row-del="rowDel"
|
||||||
|
@row-update="handleRowUpdate"
|
||||||
|
@row-save="handleRowSave"
|
||||||
|
@search-change="searchChange"
|
||||||
|
@search-reset="searchReset">
|
||||||
|
<template slot="menuLeft">
|
||||||
|
<el-button type="danger"
|
||||||
|
size="small"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
plain>删 除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</avue-crud>
|
||||||
|
</base-card>
|
||||||
|
</el-col>
|
||||||
|
</el-col>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {},
|
||||||
|
query: {},
|
||||||
|
selectionList: [],
|
||||||
|
page: {
|
||||||
|
currentPage: 1,
|
||||||
|
total: 0,
|
||||||
|
pageSize: 20
|
||||||
|
},
|
||||||
|
treeOption: {
|
||||||
|
nodeKey: 'id',
|
||||||
|
size: 'medium',
|
||||||
|
formOption: {
|
||||||
|
labelWidth: 100,
|
||||||
|
column: [{
|
||||||
|
label: '分组',
|
||||||
|
prop: 'group'
|
||||||
|
}],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
option: {
|
||||||
|
index: true,
|
||||||
|
align: 'center',
|
||||||
|
border: true,
|
||||||
|
viewBtn: true,
|
||||||
|
selection: true,
|
||||||
|
stripe: true,
|
||||||
|
tip: false,
|
||||||
|
height: 664,
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '设备',
|
||||||
|
prop: 'name',
|
||||||
|
search: true,
|
||||||
|
rules: [{
|
||||||
|
required: true,
|
||||||
|
message: "请输入设备名称",
|
||||||
|
trigger: "blur"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
label: '编码',
|
||||||
|
prop: 'code',
|
||||||
|
search: true,
|
||||||
|
rules: [{
|
||||||
|
required: true,
|
||||||
|
message: "请输入设备编码",
|
||||||
|
trigger: "blur"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
label: '状态',
|
||||||
|
prop: 'status',
|
||||||
|
search: true,
|
||||||
|
rules: [{
|
||||||
|
required: true,
|
||||||
|
message: "请输入设备状态",
|
||||||
|
trigger: "blur"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
label: '描述',
|
||||||
|
prop: 'description'
|
||||||
|
}, {
|
||||||
|
label: "创建日期",
|
||||||
|
prop: "create_time",
|
||||||
|
type: "date",
|
||||||
|
format: "yyyy-MM-dd hh:mm:ss",
|
||||||
|
valueFormat: "yyyy-MM-dd hh:mm:ss",
|
||||||
|
}, {
|
||||||
|
label: "修改日期",
|
||||||
|
prop: "update_time",
|
||||||
|
type: "date",
|
||||||
|
format: "yyyy-MM-dd hh:mm:ss",
|
||||||
|
valueFormat: "yyyy-MM-dd hh:mm:ss",
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
treeData: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
label: '一级部门',
|
||||||
|
value: 0,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
label: '一级部门1',
|
||||||
|
value: 0,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}],
|
||||||
|
data: [{
|
||||||
|
name: '张三',
|
||||||
|
sex: '男',
|
||||||
|
date: '1994-02-23 00:00:00'
|
||||||
|
}, {
|
||||||
|
name: '李四',
|
||||||
|
sex: '女',
|
||||||
|
date: '1994-02-23 00:00:00'
|
||||||
|
}, {
|
||||||
|
name: '王五',
|
||||||
|
sex: '女',
|
||||||
|
date: '1994-02-23 00:00:00'
|
||||||
|
}, {
|
||||||
|
name: '赵六',
|
||||||
|
sex: '男',
|
||||||
|
date: '1994-02-23 00:00:00'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
methods:
|
||||||
|
{
|
||||||
|
getList() {
|
||||||
|
this.page.total = 200
|
||||||
|
if (this.page.currentPage === 1) {
|
||||||
|
this.data = [
|
||||||
|
{
|
||||||
|
name: '张三',
|
||||||
|
sex: '男'
|
||||||
|
}, {
|
||||||
|
name: '李四',
|
||||||
|
sex: '女'
|
||||||
|
}, {
|
||||||
|
name: '李四',
|
||||||
|
sex: '女'
|
||||||
|
}, {
|
||||||
|
name: '李四',
|
||||||
|
sex: '女'
|
||||||
|
}, {
|
||||||
|
name: '李四',
|
||||||
|
sex: '女'
|
||||||
|
}, {
|
||||||
|
name: '李四',
|
||||||
|
sex: '女'
|
||||||
|
}, {
|
||||||
|
name: '李四',
|
||||||
|
sex: '女'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} else if (this.page.currentPage == 2) {
|
||||||
|
this.data = [
|
||||||
|
{
|
||||||
|
name: '李四',
|
||||||
|
sex: '女'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 增加按钮
|
||||||
|
handleRowSave(row, done, loading) {
|
||||||
|
this.data.splice(0, 0, row);
|
||||||
|
done(); // 关闭表单
|
||||||
|
loading(); // 按钮停止加载
|
||||||
|
}
|
||||||
|
,
|
||||||
|
// 修改按钮
|
||||||
|
handleRowUpdate(row, index, done, loading) {
|
||||||
|
this.data.splice(index, 1, row);
|
||||||
|
done(); // 关闭表单
|
||||||
|
loading(); // 按钮停止加载
|
||||||
|
}
|
||||||
|
,
|
||||||
|
// 删除按钮
|
||||||
|
rowDel(row, index) {
|
||||||
|
this.$confirm('是否删除该条信息?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
this.data.splice(index, 1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,
|
||||||
|
}
|
||||||
|
,
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.avue-tree {
|
||||||
|
height: 876px;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in new issue