Skip to content

seeta-device / deviceManage

Go to a project
Commit 7c31c57d by 温丽香
Options

页面初步搭建

1 parent 6aa710ea
Inline Side-by-side
Showing with 1048 additions and 14 deletions
src/components/seeta-ui/seeta-table/index.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="table-box" ref="tableBox"> <div class="table-box" ref="tableBox">
<el-table <el-table
ref="table" ref="table"
stripe :stripe="stripe"
v-bind="$attrs" v-bind="$attrs"
v-on="$listeners" v-on="$listeners"
v-loading="isLoading" v-loading="isLoading"
...@@ -133,6 +133,7 @@ export default class seetaTableIndex extends Vue { ...@@ -133,6 +133,7 @@ export default class seetaTableIndex extends Vue {
@Prop({ type: Boolean, default: false }) outerLoading @Prop({ type: Boolean, default: false }) outerLoading
// 列表参数 // 列表参数
@Prop({ type: Array, default: () => [] }) options @Prop({ type: Array, default: () => [] }) options
@Prop({ type: Boolean, default: true }) stripe
// 数据加载函数 // 数据加载函数
@Prop({ type: Function, default: () => { return {} } }) loadFunction @Prop({ type: Function, default: () => { return {} } }) loadFunction
@Prop({ type: Number, default: 10 }) pageSize @Prop({ type: Number, default: 10 }) pageSize
...@@ -142,7 +143,7 @@ export default class seetaTableIndex extends Vue { ...@@ -142,7 +143,7 @@ export default class seetaTableIndex extends Vue {
// 是否分页 // 是否分页
@Prop({ type: Boolean, default: true }) pagination @Prop({ type: Boolean, default: true }) pagination
// 自动高度，仅适用于父级容器有明确高度的情况 // 自动高度，仅适用于父级容器有明确高度的情况
@Prop({ type: Boolean, default: true }) autoHeight @Prop({ type: Boolean, default: false }) autoHeight
// 最大高度，当autoHeight为false时生效 // 最大高度，当autoHeight为false时生效
@Prop({ type: [Number, String], default: '100%' }) maxHeight @Prop({ type: [Number, String], default: '100%' }) maxHeight
// 是否自动刷新 // 是否自动刷新
......
src/layouts/components/sidebar.vue
...@@ -27,7 +27,7 @@ export default { ...@@ -27,7 +27,7 @@ export default {
return this.$route.name return this.$route.name
}, },
menuList() { menuList() {
const routerList = JSON.parse(JSON.stringify(this.$router.options.routes.filter(item => item.children))) const routerList = JSON.parse(JSON.stringify(this.$router.options.routes.filter(item => item.children && !item.meta.hidden)))
const result = [] const result = []
routerList.map(item => { routerList.map(item => {
const children = [] const children = []
......
src/router/routes.js
...@@ -47,6 +47,16 @@ export default [ ...@@ -47,6 +47,16 @@ export default [
name: 'params', name: 'params',
meta: { title: '参数模板' }, meta: { title: '参数模板' },
component: () => import('@views/ParamsModel') component: () => import('@views/ParamsModel')
}, {
path: '/params/edit',
name: 'params',
meta: { title: '编辑' },
component: () => import('@views/ParamsModel/edit')
}, {
path: '/params/detail',
name: 'params',
meta: { title: '详情' },
component: () => import('@views/ParamsModel/detail')
}] }]
}, },
{ {
...@@ -59,6 +69,11 @@ export default [ ...@@ -59,6 +69,11 @@ export default [
name: 'data', name: 'data',
meta: { title: '数据列表' }, meta: { title: '数据列表' },
component: () => import('@views/DataList') component: () => import('@views/DataList')
}, {
path: '/data/edit',
name: 'data',
meta: { title: '编辑' },
component: () => import('@views/DataList/edit')
}] }]
}, },
{ {
...@@ -97,6 +112,18 @@ export default [ ...@@ -97,6 +112,18 @@ export default [
component: () => import('@views/Account') component: () => import('@views/Account')
}] }]
}, },
{
path: '/personal',
name: 'personal',
meta: { title: '个人中心', icon: 'icon-wendanggongju', hidden: true },
component: () => import('@layouts/basicLayout'),
children: [{
path: '/personal',
name: 'personal',
meta: { title: '个人中心' },
component: () => import('@views/PersonInfo')
}]
},
// 匹配不到，展示404 // 匹配不到，展示404
{ {
path: '/*', path: '/*',
......
src/views/Account/index.vue
<template> <template>
<div> <div class="data-list-common flex column main-content flex-1">
<div class="header">
<span class="title">{{'账户中心'}}</span>
</div>
<div class="page-nav">
<div class="search-fields">
<span class="fields">用户名：</span>
<!-- <st-input width="240px" class="align contents" id="align-input" v-model="deviceName"></st-input> -->
<input type="text" id="raw-input" autocomplete="off" class="align contents" :style="{borderColor: borderColor}" placeholder="请输入" @blur="getData" v-model.trim="deviceName" @keyup.enter="getData" @input="checkSearchContent">
<span class="fields">用户角色：</span>
<st-select
v-model="logLevel"
:options="logLevelOptions"
size="small"
style="width: 240px"
class="contents"
clearable
@change="getData"
>
</st-select>
<span class="fields">创建日期：</span>
<el-date-picker
v-model="timeSection"
type="daterange"
@change="getData"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
</div>
<div class="page-content">
<div class="content-header">
<st-button type="primary">
<i class="iconfont icon-tianjia"></i><span class="text">{{'插入数据'}}</span>
</st-button>
</div>
<div class="table-list">
<div class="list-content">
<st-table
ref="vTable"
:options="definitions"
:data="{
list: tokenList,
total: total,
}">
</st-table>
</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import browserStorage from '@/services/local-storage'
import { rTimeMin } from '@/utils/system.js'
export default { export default {
data() { data() {
return { return {
// 查询字段
deviceName: '',
logLevel: '',
timeSection: [],
logLevelOptions: [
{ label: 'debug', value: -1 },
{ label: 'info', value: 0 },
{ label: 'warning', value: 1 },
{ label: 'error', value: 2 },
],
currentPage: 1,
currentSize: 10,
loadingStatus: false,
borderColor: '#ccc',
definitions: [
{
label: '序号',
render: 'number'
},
{
label: '名称',
render: 'name'
},
{
label: '类别',
render: 'type'
},
{
label: '描述',
render: 'desc'
},
{
label: '操作',
type: 'slot',
width: '150px',
slotName: 'operate'
},
],
tokenList: [
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' }
],
total: 34
}
},
watch: {
'$route.query': {
handler(val) {
if (!val) return
this.currentPage = Number(val.page_index)
this.currentSize = Number(val.page_size)
this.getData()
},
immediate: true,
deep: true
}
},
mounted() {
// this.getData()
},
methods: {
checkSearchContent() {
if (this.deviceName && this.deviceName.search(this.formatSearchName) !== -1) {
this.borderColor = '#f00'
return true
}
this.borderColor = '#ccc'
return false
},
async getData() {
// if (this.checkSearchContent()) return
// let startTime = ''
// let endTime = ''
// if (this.timeSection && this.timeSection.length) {
// startTime = new Date(+this.timeSection[0] + 8 * 3600 * 1000).toISOString()
// endTime = new Date(+this.timeSection[1] + 32 * 3600 * 1000).toISOString()
// }
// this.loadingStatus = true
// const res = await projectsApi.getProjectDeviceLogs(
// browserStorage.getItem('projectId'), this.deviceName,
// endTime,
// this.logLevel, this.currentPage, this.currentSize,
// startTime
// )
// if (res && res.data) {
// this.tokenList = res.data.data
// this.total = res.data.total
// }
// this.loadingStatus = false
} }
} },
} }
</script> </script>
<style lang="sass" scoped> <style lang="sass" scoped>
.el-date-editor
width: 240px
height: 32px
float: right
::v-deep .el-range__icon
line-height: 24px
::v-deep .el-range-separator
width: 12%
line-height: 24px
</style> </style>
src/views/Apply/index.vue
<template> <template>
<div> <div class="data-list-common flex column main-content flex-1">
<div class="header">
<span class="title">{{'应用中心'}}</span>
</div>
<div class="page-content">
<div class="table-list">
<div class="list-content">
<st-table
ref="vTable"
:options="definitions"
:data="{
list: tokenList,
total: total,
}">
<div slot="operate" slot-scope="row">
<span class="operate" v-if="row.number" @click="$router.push({ path: '/data/edit' })">编辑</span>
<span class="operate operate-delete" v-if="row.number">删除</span>
</div>
</st-table>
</div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -7,8 +28,41 @@ ...@@ -7,8 +28,41 @@
export default { export default {
data() { data() {
return { return {
inputVal: '',
definitions: [
{
label: '序号',
render: 'number'
},
{
label: '名称',
render: 'name'
},
{
label: '类别',
render: 'type'
},
{
label: '描述',
render: 'desc'
},
{
label: '操作',
type: 'slot',
width: '150px',
slotName: 'operate'
},
],
tokenList: [
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' }
],
total: 34
} }
},
mounted() {
// this.getData()
},
methods: {
} }
} }
</script> </script>
......
src/views/DataList/edit.vue 0 → 100644
<template>
<div class="data-list-common flex column main-content flex-1">
<div class="header">
<span class="title">{{'数据列表 / 编辑'}}</span>
</div>
<div class="page-content">
<div class="content-header">
<st-button type="primary">
<i class="iconfont icon-tianjia"></i><span class="text">{{'插入数据'}}</span></st-button>
<div>
<div class="search">
<input type="text" class="search-input" placeholder="请输入搜索内容" v-model="inputVal">
<i class="el-input__icon el-icon-search"></i>
</div>
</div>
</div>
<div class="table-list">
<div class="list-content">
<st-table
ref="vTable"
:options="definitions"
:data="{
list: tokenList,
total: total,
}">
<div slot="operate" slot-scope="row">
<span class="operate" v-if="row.number">编辑</span>
<span class="operate operate-delete" v-if="row.number">删除</span>
</div>
</st-table>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
inputVal: '',
definitions: [
{
label: '序号',
render: 'number'
},
{
label: '名称',
render: 'name'
},
{
label: '类别',
render: 'type'
},
{
label: '描述',
render: 'desc'
},
{
label: '操作',
type: 'slot',
width: '150px',
slotName: 'operate'
},
],
tokenList: [
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' }
],
total: 34
}
},
mounted() {
// this.getData()
},
methods: {
}
}
</script>
<style lang="sass" scoped>
.page-content
.content-header
display: flex
flex-direction: row
justify-content: space-between
.search
width: 240px
height: 32px
position: relative
.search-input
width: 100%
padding-right: 35px
.el-icon-search
line-height: 32px
position: absolute
right: 0
font-size: 18px
color: #CCC
cursor: pointer
width: 44px
height: 32px
text-align: center
::v-deep input
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
color:#333
height: 32px
line-height: 32px
&::placeholder
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
color:#999999
</style>
src/views/DataList/index.vue
<template> <template>
<div> <div class="data-list-common flex column main-content flex-1">
<div class="header">
<span class="title">{{'数据列表'}}</span>
</div>
<div class="page-content">
<div class="content-header">
<div class="search">
<input type="text" class="search-input" placeholder="请输入搜索内容" v-model="inputVal">
<i class="el-input__icon el-icon-search"></i>
</div>
</div>
<div class="table-list">
<div class="list-content">
<st-table
ref="vTable"
:options="definitions"
:data="{
list: tokenList,
total: total,
}">
<div slot="operate" slot-scope="row">
<span class="operate" v-if="row.number" @click="$router.push({ path: '/data/edit' })">编辑</span>
<span class="operate operate-delete" v-if="row.number">删除</span>
</div>
</st-table>
</div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -7,11 +34,75 @@ ...@@ -7,11 +34,75 @@
export default { export default {
data() { data() {
return { return {
inputVal: '',
definitions: [
{
label: '序号',
render: 'number'
},
{
label: '名称',
render: 'name'
},
{
label: '类别',
render: 'type'
},
{
label: '描述',
render: 'desc'
},
{
label: '操作',
type: 'slot',
width: '150px',
slotName: 'operate'
},
],
tokenList: [
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' }
],
total: 34
} }
},
mounted() {
// this.getData()
},
methods: {
} }
} }
</script> </script>
<style lang="sass" scoped> <style lang="sass" scoped>
.page-content
.search
width: 240px
height: 32px
position: relative
float: right
.search-input
width: 100%
padding-right: 35px
.el-icon-search
line-height: 32px
position: absolute
right: 0
font-size: 18px
color: #CCC
cursor: pointer
width: 44px
height: 32px
text-align: center
::v-deep input
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
color:#333
height: 32px
line-height: 32px
&::placeholder
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
color:#999999
</style> </style>
src/views/ParamsModel/detail.vue 0 → 100644
<template>
<div class="data-list-common flex column main-content flex-1">
<div class="header">
<span class="title">{{'参数模板 / 详情'}}</span>
</div>
<div class="page-content">
<st-form
ref="form"
label-width="100px"
:model="form">
<st-form-item
style="margin-bottom:20px"
:label="'模板名称'+':'"
prop="name">
<span>{{form.name}}</span>
</st-form-item>
<st-form-item
style="margin-bottom:20px"
:label="'模板类型'+':'"
prop="name">
<span>{{form.name}}</span>
</st-form-item>
<st-form-item
style="margin-bottom:20px"
:label="'基础模板'+':'"
prop="name">
<span>{{form.name}}</span>
</st-form-item>
<st-form-item
style="margin-bottom:20px"
:label="'描述'+':'"
prop="description">
<span>{{form.name}}</span>
</st-form-item>
<st-form-item
style="margin-bottom:20px"
:label="'参数'+':'"
prop="description">
<st-table
ref="vTable"
:options="definitions"
:pagination="false"
:data="{
list: tokenList,
total: total,
}">
</st-table>
</st-form-item>
</st-form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {},
definitions: [
{
label: '字段',
render: 'field'
},
{
label: '类型',
render: 'type'
},
{
label: '值',
render: 'value'
}
],
tokenList: [{
field: 'name',
type: 'number',
value: '122'
}, {
field: 'database',
type: 'table',
value: 'fein_fe'
}, {
field: 'image',
type: 'blob',
value: '24字节'
}, {
field: 'teat',
type: 'string',
value: '上海市普陀区金沙江路'
}],
total: 0
}
},
mounted() {
// this.getData()
},
methods: {
}
}
</script>
<style lang="sass" scoped>
</style>
src/views/ParamsModel/edit.vue 0 → 100644
<template>
<div class="data-list-common flex column main-content flex-1">
<div class="header">
<span class="title">{{'参数模板 / 编辑'}}</span>
</div>
<div class="page-content">
<st-form
ref="form"
label-width="100px"
:model="form"
:rules="rules">
<st-form-item
style="margin-bottom:20px"
:label="'模板名称'+':'"
prop="name">
<st-input v-model="form.name"></st-input>
</st-form-item>
<st-form-item
style="margin-bottom:20px"
:label="'模板类型'+':'"
prop="name">
<st-input v-model="form.name"></st-input>
</st-form-item>
<st-form-item
style="margin-bottom:20px"
:label="'基础模板'+':'"
prop="name">
<st-input v-model="form.name"></st-input>
</st-form-item>
<st-form-item
style="margin-bottom:20px"
:label="'描述'+':'"
prop="description">
<st-input
type="textarea"
placeholder="请输入应用描述"
v-model="form.description"
maxlength="100"
show-word-limit
>
</st-input>
</st-form-item>
<st-form-item
style="margin-bottom:20px"
:label="'参数'+':'"
prop="description">
<el-table
ref="singleTable"
:data="tableData"
highlight-current-row
@current-change="handleCurrentChange"
@row-click="rowClick"
@cell-click="cellClick"
style="width: 100%">
<el-table-column label="字段">
<template slot-scope="scope">
<input type="text" v-model="scope.row.field" @blur="handleBlur">
</template>
</el-table-column>
<el-table-column label="类型">
<template slot-scope="scope">
<el-select v-model="scope.row.type" placeholder="请选择" @focus="handleFocus">
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- <select id="item" class="myselect">
<option value="1">aa</option>
<option value="2">bb</option>
<option value="3">cc</option>
</select> -->
</template>
</el-table-column>
<el-table-column label="值">
<template slot-scope="scope">
<input v-if="scope.row.type === 'string' || scope.row.type === 'number'" type="text" v-model="scope.row.value" @blur="handleBlur">
<input v-if="scope.row.type === 'blob'" type="file" @blur="handleBlur">
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<span @click="handleDelete(scope.row)" class="delete-btn">删除</span>
</template>
</el-table-column>
</el-table>
</st-form-item>
</st-form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {},
rules: [],
focusFlag: false,
typeOptions: [{
value: 'number',
label: 'number'
}, {
value: 'string',
label: 'string'
}, {
value: 'table',
label: 'table'
}, {
value: 'blob',
label: 'blob'
}],
tableData: [{
field: 'name',
type: 'number',
value: '122'
}, {
field: 'database',
type: 'table',
value: 'fein_fe'
}, {
field: 'image',
type: 'blob',
value: '24字节'
}, {
field: 'teat',
type: 'string',
value: '上海市普陀区金沙江路'
}],
rowIndex: null,
columnIndex: null,
currentRow: ''
}
},
mounted() {
// this.getData()
},
methods: {
handleFocus() {
console.log(111)
this.$emit('cell-click')
},
handleDelete(row) {
console.log(row)
},
handleBlur(event) {
this.setCurrent()
event.target.classList.remove('write')
},
cellClick(row, column, cell, event) {
console.log(cell)
if (cell.getElementsByTagName('input')[0]) {
cell.getElementsByTagName('input')[0].classList.add('write')
cell.getElementsByTagName('input')[0].focus()
}
},
rowClick(row, column, event) {
this.setCurrent(row)
},
setCurrent(row) {
this.$refs.singleTable.setCurrentRow(row)
},
handleCurrentChange(val) {
this.currentRow = val
}
}
}
</script>
<style lang="sass" scoped>
.page-content
text-align: left
::v-deep.el-input__inner, ::v-deep.el-textarea, ::v-deep.el-textarea__inner
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
color:#333
&::placeholder
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
color:#999999
::v-deep.el-table tbody tr:hover>td
background: #ecf5ff!important
::v-deep.el-table tbody tr.current-row input[type=text]
background: rgba(0, 0, 0, 0)
::v-deep.el-table tbody tr.current-row input[type=text].write
background: #fff
::v-deep.el-table tbody tr.current-row>td
background: #ecf5ff!important
.el-table
::v-deep .el-input__icon
line-height: 32px
::v-deep .myselect
border: none
width: 194px
height: 32px
background: rgba(0, 0, 0, 0)
font-family: PingFangSC-Regular, PingFang SC, Avenir, Helvetica, Arial, sans-serif
font-size: 14px
color: #666
::v-deep input[type=text], ::v-deep input[type=password], ::v-deep input[type=number], ::v-deep textarea
border: none
font-family: PingFangSC-Regular, PingFang SC, Avenir, Helvetica, Arial, sans-serif
font-size: 14px
color: #666
background: rgba(0, 0, 0, 0)
height: 32px
::v-deep thead
font-size: 14px
font-family: PingFang-SC-Bold, PingFang-SC
font-weight: bold
color: #333333
line-height: 20px
::v-deep th
font-weight: 'bold'
border-top: 1px solid #E8EBF2
padding-left: 12px
background: #F5F7FA
::v-deep td
padding: 6px 0
.delete-btn
margin-left: 12px
color: #F56C6C
</style>
src/views/ParamsModel/index.vue
<template> <template>
<div> <div class="data-list-common flex column main-content flex-1">
<div class="header">
<span class="title">{{'参数模板'}}</span>
</div>
<div class="page-content">
<div class="level level-one">
<div class="content-header">
<st-button type="primary" @click="addModel">
<i class="iconfont icon-tianjia"></i><span class="text">{{'添加'}}</span></st-button>
<div class="search">
<input type="text" class="search-input" placeholder="请输入搜索内容" v-model="inputVal">
<i class="el-input__icon el-icon-search"></i>
</div>
</div>
<div class="table-list">
<div class="list-content">
<st-table
ref="vTable"
:options="definitions"
:data="{
list: tokenList,
total: total,
}">
<div slot="operate" slot-scope="row">
<span class="operate" @click="$router.push({ path: '/params/detail' })">详情</span>
<span class="operate" @click="$router.push({ path: '/params/edit' })">编辑</span>
<span class="operate operate-delete" @click="removeModel(row)">删除</span>
</div>
</st-table>
</div>
</div>
</div>
<div class="blanking"></div>
<div class="level level-two">
<div class="content-header">
<st-button type="primary" @click="addModel">
<i class="iconfont icon-tianjia"></i><span class="text">{{'添加'}}</span></st-button>
<div class="search">
<input type="text" class="search-input" placeholder="请输入搜索内容" v-model="inputVal">
<i class="el-input__icon el-icon-search"></i>
</div>
</div>
<div class="table-list">
<div class="list-content">
<st-table
ref="vTable"
:options="definitions"
:data="{
list: tokenList,
total: total,
}">
<div slot="operate" slot-scope="row">
<span class="operate" @click="$router.push({ path: '/params/detail' })">详情</span>
<span class="operate" @click="$router.push({ path: '/params/edit' })">编辑</span>
<span class="operate operate-delete" @click="removeModel(row)">删除</span>
</div>
</st-table>
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -7,11 +67,98 @@ ...@@ -7,11 +67,98 @@
export default { export default {
data() { data() {
return { return {
inputVal: '',
definitions: [
{
label: '序号',
render: 'number'
},
{
label: '名称',
render: 'name'
},
{
label: '类别',
render: 'type'
},
{
label: '描述',
render: 'desc'
},
{
label: '操作',
type: 'slot',
width: '150px',
slotName: 'operate'
},
],
tokenList: [
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' }
],
total: 34
}
},
mounted() {
// this.getData()
},
methods: {
addModel() {
},
removeModel(row) {
} }
} }
} }
</script> </script>
<style lang="sass" scoped> <style lang="sass" scoped>
.page-content
display: flex
flex-direction: row
padding: 0
.blanking
width: 20px
background: #EBEEF5
.level
flex: 1
padding: 14px 20px
.content-header
display: flex
justify-content: space-between
margin-bottom: 20px
.search
width: 240px
height: 32px
position: relative
display: inline-block
.search-input
width: 100%
padding-right: 35px
.el-icon-search
line-height: 32px
position: absolute
right: 0
font-size: 18px
color: #CCC
cursor: pointer
width: 44px
height: 32px
text-align: center
::v-deep.el-pagination__total
display: none
::v-deep.el-pagination__sizes
display: none
::v-deep.el-pagination__jump
display: none
::v-deep input
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
color:#333
height: 32px
line-height: 32px
&::placeholder
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
color:#999999
</style> </style>
src/views/PersonInfo/index.vue 0 → 100644
<template>
<div class="data-list-common flex column main-content flex-1">
<div class="header">
<span class="title">{{'个人中心'}}</span>
</div>
<div class="page-content">
<st-form
ref="form"
label-width="70px"
:model="form">
<st-form-item
style="margin-bottom:10px"
:label="'头像'+':'">
<el-image style="width: 80px; height: 80px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
</st-form-item>
<st-form-item
style="margin-bottom:10px"
:label="'账户'+':'">
<span>{{form.account}}asdfasdf</span>
</st-form-item>
<st-form-item
style="margin-bottom:10px"
:label="'姓名'+':'">
<span>{{form.name}}asdfasdf</span><span class="btn-text" @click="showDialog = true;type = 'name'">编辑</span>
</st-form-item>
<st-form-item
style="margin-bottom:10px"
:label="'邮箱'+':'">
<span>{{form.email}}asdfasdf</span><span class="btn-text" @click="showDialog = true;type = 'email'">编辑</span>
</st-form-item>
<st-form-item
style="margin-bottom:10px"
:label="'密码'+':'">
<span class="btn-text" style="margin-left: 0" @click="showDialog = true;type = 'password'">修改密码</span>
</st-form-item>
</st-form>
</div>
<st-dialog
:show.sync="showDialog"
class="update-dialog"
@dismiss="cancelSubmit"
>
<div slot="header" class="popup-header">{{'编辑'}}</div>
<div slot="body" class="popup-body">
<st-form
:label-width="type === 'password' ? '90px' : ''"
ref="form">
<st-form-item v-if="type === 'email'"
:label="'邮箱:'">
<st-input v-model="email"></st-input>
</st-form-item>
<st-form-item v-if="type === 'name'"
:label="'姓名:'">
<st-input v-model="name"></st-input>
</st-form-item>
<div v-if="type === 'password'">
<st-form-item
:label="'当前密码:'">
<st-input v-model="password"></st-input>
</st-form-item>
<st-form-item
:label="'新密码:'">
<st-input v-model="newPwd"></st-input>
</st-form-item>
<st-form-item
:label="'新密码:'">
<st-input v-model="confirmPwd"></st-input>
</st-form-item>
</div>
</st-form>
</div>
<div slot="footer" class="popup-footer flex right">
<st-button @click="cancelSubmit">{{$t('public.cancel')}}</st-button>
<st-button type="primary" @click="submit">{{'确定'}}</st-button>
</div>
</st-dialog>
</div>
</template>
<script>
export default {
data() {
return {
showDialog: false,
form: {},
type: '',
email: '',
name: '',
password: '',
newPwd: '',
confirmPwd: ''
}
},
mounted() {
// this.getData()
},
methods: {
submit() {
this.showDialog = false
},
cancelSubmit() {
this.showDialog = false
}
}
}
</script>
<style lang="sass" scoped>
.page-content
text-align: left
.btn-text
color: #409EFF
margin-left: 30px
font-size: 14px
</style>
src/views/Setting/index.vue
<template> <template>
<div> <div class="data-list-common flex column main-content flex-1">
<div class="header">
<span class="title">{{'设置中心'}}</span>
</div>
<div class="page-content">
</div>
</div> </div>
</template> </template>
...@@ -7,8 +12,11 @@ ...@@ -7,8 +12,11 @@
export default { export default {
data() { data() {
return { return {
} }
},
mounted() {
},
methods: {
} }
} }
</script> </script>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!