mirror of https://gitee.com/pnoker/dc3-web.git
pull/1/head
pnoker
4 years ago
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 Element from 'element-ui'
|
||||
import Avue from "@smallwei/avue";
|
||||
import locale from 'element-ui/lib/locale/lang/zh-CN'
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
import './element-variables.scss'
|
||||
import '@smallwei/avue/lib/index.css'
|
||||
|
||||
import baseCard from '@/components/card/base-card'
|
||||
import titleCard from '@/components/card/title-card'
|
||||
|
||||
Vue.use(Element, {locale});
|
||||
Vue.use(Avue);
|
||||
|
||||
Vue.component('base-card', baseCard);
|
||||
Vue.component('title-card', titleCard);
|
||||
@ -1,5 +1,15 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted(){
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,109 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
<base-card>
|
||||
<avue-crud :option="option"
|
||||
: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>
|
||||
|
||||
<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