Skip to content

seeta-device / deviceManage

Go to a project
Commit 09cbdc3f by 温丽香
Options

页面搭建完善

1 parent 7c31c57d
Expand all
Inline Side-by-side
Showing with 979 additions and 270 deletions
src/layouts/components/user-info.vue
...@@ -47,9 +47,9 @@ export default class userInfo extends Vue { ...@@ -47,9 +47,9 @@ export default class userInfo extends Vue {
} }
toPersonal() { toPersonal() {
const routeUrl = this.$router.resolve({ name: 'personal' }) // const routeUrl = this.$router.resolve({ name: 'personal' })
window.open(routeUrl.href, '_blank') // window.open(routeUrl.href, '_blank')
// this.$router.push({ name: 'personal' }) this.$router.push({ name: 'personal' })
} }
async logout() { async logout() {
......
src/router/routes.js
...@@ -16,7 +16,7 @@ export default [ ...@@ -16,7 +16,7 @@ export default [
{ {
path: '/device', path: '/device',
name: 'device', name: 'device',
meta: { title: '设备列表', icon: 'icon-yingyongguanli' }, meta: { title: '设备列表', icon: 'icon-shebei' },
component: () => import('@layouts/basicLayout'), component: () => import('@layouts/basicLayout'),
children: [{ children: [{
path: '/device', path: '/device',
...@@ -28,7 +28,7 @@ export default [ ...@@ -28,7 +28,7 @@ export default [
{ {
path: '/service', path: '/service',
name: 'service', name: 'service',
meta: { title: '服务列表', icon: 'icon-jiankongzhongxin' }, meta: { title: '服务列表', icon: 'icon-fuwu' },
component: () => import('@layouts/basicLayout'), component: () => import('@layouts/basicLayout'),
children: [{ children: [{
path: '/service', path: '/service',
...@@ -40,7 +40,7 @@ export default [ ...@@ -40,7 +40,7 @@ export default [
{ {
path: '/params', path: '/params',
name: 'params', name: 'params',
meta: { title: '参数模板', icon: 'icon-shebeiguanli' }, meta: { title: '参数模板', icon: 'icon-canshumoban' },
component: () => import('@layouts/basicLayout'), component: () => import('@layouts/basicLayout'),
children: [{ children: [{
path: '/params', path: '/params',
...@@ -57,12 +57,17 @@ export default [ ...@@ -57,12 +57,17 @@ export default [
name: 'params', name: 'params',
meta: { title: '详情' }, meta: { title: '详情' },
component: () => import('@views/ParamsModel/detail') component: () => import('@views/ParamsModel/detail')
}, {
path: '/params/add',
name: 'params',
meta: { title: '添加' },
component: () => import('@views/ParamsModel/add')
}] }]
}, },
{ {
path: '/data', path: '/data',
name: 'data', name: 'data',
meta: { title: '数据列表', icon: 'icon-OTA' }, meta: { title: '数据列表', icon: 'icon-shuju' },
component: () => import('@layouts/basicLayout'), component: () => import('@layouts/basicLayout'),
children: [{ children: [{
path: '/data', path: '/data',
...@@ -79,7 +84,7 @@ export default [ ...@@ -79,7 +84,7 @@ export default [
{ {
path: '/apply', path: '/apply',
name: 'apply', name: 'apply',
meta: { title: '应用中心', icon: 'icon-wendanggongju' }, meta: { title: '应用中心', icon: 'icon-yingyong' },
component: () => import('@layouts/basicLayout'), component: () => import('@layouts/basicLayout'),
children: [{ children: [{
path: '/apply', path: '/apply',
...@@ -91,7 +96,7 @@ export default [ ...@@ -91,7 +96,7 @@ export default [
{ {
path: '/setting', path: '/setting',
name: 'setting', name: 'setting',
meta: { title: '设置中心', icon: 'icon-wendanggongju' }, meta: { title: '设置中心', icon: 'icon-shebeiguanli' },
component: () => import('@layouts/basicLayout'), component: () => import('@layouts/basicLayout'),
children: [{ children: [{
path: '/setting', path: '/setting',
...@@ -103,7 +108,7 @@ export default [ ...@@ -103,7 +108,7 @@ export default [
{ {
path: '/account', path: '/account',
name: 'account', name: 'account',
meta: { title: '账户中心', icon: 'icon-wendanggongju' }, meta: { title: '账户中心', icon: 'icon-qianbao1' },
component: () => import('@layouts/basicLayout'), component: () => import('@layouts/basicLayout'),
children: [{ children: [{
path: '/account', path: '/account',
......
src/styles/fonts/iconfont.css
@font-face { @font-face {
font-family: "iconfont"; /* Project id 2598158 */ font-family: "iconfont"; /* Project id 2741238 */
src: url('iconfont.woff2?t=1623308852405') format('woff2'), src: url('iconfont.woff2?t=1628763203270') format('woff2'),
url('iconfont.woff?t=1623308852405') format('woff'), url('iconfont.woff?t=1628763203270') format('woff'),
url('iconfont.ttf?t=1623308852405') format('truetype'); url('iconfont.ttf?t=1628763203270') format('truetype');
} }
.iconfont { .iconfont {
...@@ -13,64 +13,84 @@ ...@@ -13,64 +13,84 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-tupianzhanshi:before { .icon-shuju:before {
content: "\e786"; content: "\e60c";
} }
.icon-liebiaozhanshi:before { .icon-fuwu:before {
content: "\e78d"; content: "\e6c7";
} }
.icon-duihao:before { .icon-shebei:before {
content: "\e77f"; content: "\e874";
} }
.icon-guanbi:before { .icon-canshumoban:before {
content: "\e780"; content: "\e78e";
} }
.icon-shanchu:before { .icon-yingyong:before {
content: "\e781"; content: "\e693";
} }
.icon-shangchuan:before { .icon-qianbao1:before {
content: "\e782"; content: "\e621";
} }
.icon-fuzhi:before { .icon-guanyuwomen:before {
content: "\e783"; content: "\e76e";
} }
.icon-fanhui:before { .icon-caidanzhankai:before {
content: "\e784"; content: "\e76f";
} }
.icon-right1:before { .icon-chanpinwendang:before {
content: "\e785"; content: "\e770";
} }
.icon-xiazai:before { .icon-caidanshouqi:before {
content: "\e787"; content: "\e771";
} }
.icon-fujian:before { .icon-yingyongguanli:before {
content: "\e788"; content: "\e772";
} }
.icon-riqi:before { .icon-wendanggongju:before {
content: "\e789"; content: "\e773";
} }
.icon-sousuo:before { .icon-OTA:before {
content: "\e78a"; content: "\e774";
} }
.icon-left:before { .icon-jiankongzhongxin:before {
content: "\e78b"; content: "\e775";
} }
.icon-tianjia:before { .icon-shebeiguanli:before {
content: "\e78c"; content: "\e776";
}
.icon-mianxingxiala:before {
content: "\e777";
}
.icon-mianxingshangla:before {
content: "\e778";
}
.icon-unfold:before {
content: "\e779";
}
.icon-right:before {
content: "\e77a";
}
.icon-fold:before {
content: "\e77b";
} }
.icon-jinggao:before { .icon-jinggao:before {
...@@ -85,59 +105,63 @@ ...@@ -85,59 +105,63 @@
content: "\e77e"; content: "\e77e";
} }
.icon-mianxingxiala:before { .icon-duihao:before {
content: "\e777"; content: "\e77f";
} }
.icon-mianxingshangla:before { .icon-guanbi:before {
content: "\e778"; content: "\e780";
} }
.icon-unfold:before { .icon-shanchu:before {
content: "\e779"; content: "\e781";
} }
.icon-right:before { .icon-shangchuan:before {
content: "\e77a"; content: "\e782";
} }
.icon-fold:before { .icon-fuzhi:before {
content: "\e77b"; content: "\e783";
} }
.icon-guanyuwomen:before { .icon-fanhui:before {
content: "\e76e"; content: "\e784";
} }
.icon-caidanzhankai:before { .icon-right1:before {
content: "\e76f"; content: "\e785";
} }
.icon-chanpinwendang:before { .icon-xiazai:before {
content: "\e770"; content: "\e787";
} }
.icon-caidanshouqi:before { .icon-fujian:before {
content: "\e771"; content: "\e788";
} }
.icon-yingyongguanli:before { .icon-riqi:before {
content: "\e772"; content: "\e789";
} }
.icon-wendanggongju:before { .icon-sousuo:before {
content: "\e773"; content: "\e78a";
} }
.icon-OTA:before { .icon-left:before {
content: "\e774"; content: "\e78b";
} }
.icon-jiankongzhongxin:before { .icon-tianjia:before {
content: "\e775"; content: "\e78c";
} }
.icon-shebeiguanli:before { .icon-tupianzhanshi:before {
content: "\e776"; content: "\e786";
}
.icon-liebiaozhanshi:before {
content: "\e78d";
} }
src/styles/fonts/iconfont.json
{ {
"id": "2598158", "id": "2741238",
"name": "SeetaAIOT", "name": "设备管理后台",
"font_family": "iconfont", "font_family": "iconfont",
"css_prefix_text": "icon-", "css_prefix_text": "icon-",
"description": "", "description": "",
"glyphs": [ "glyphs": [
{ {
"icon_id": "22178639", "icon_id": "18005150",
"name": "图片展示", "name": "数据 (4)",
"font_class": "tupianzhanshi", "font_class": "shuju",
"unicode": "e786", "unicode": "e60c",
"unicode_decimal": 59270 "unicode_decimal": 58892
}, },
{ {
"icon_id": "22178640", "icon_id": "3242865",
"name": "列表展示", "name": "列表",
"font_class": "liebiaozhanshi", "font_class": "fuwu",
"unicode": "e78d", "unicode": "e6c7",
"unicode_decimal": 59277 "unicode_decimal": 59079
},
{
"icon_id": "11564596",
"name": "列表",
"font_class": "shebei",
"unicode": "e874",
"unicode_decimal": 59508
},
{
"icon_id": "23505565",
"name": "参数模板",
"font_class": "canshumoban",
"unicode": "e78e",
"unicode_decimal": 59278
},
{
"icon_id": "13415761",
"name": "应用中心",
"font_class": "yingyong",
"unicode": "e693",
"unicode_decimal": 59027
},
{
"icon_id": "16069276",
"name": "钱包",
"font_class": "qianbao1",
"unicode": "e621",
"unicode_decimal": 58913
},
{
"icon_id": "22095875",
"name": "关于我们",
"font_class": "guanyuwomen",
"unicode": "e76e",
"unicode_decimal": 59246
},
{
"icon_id": "22095876",
"name": "菜单展开",
"font_class": "caidanzhankai",
"unicode": "e76f",
"unicode_decimal": 59247
},
{
"icon_id": "22095877",
"name": "产品文档",
"font_class": "chanpinwendang",
"unicode": "e770",
"unicode_decimal": 59248
},
{
"icon_id": "22095878",
"name": "菜单收起",
"font_class": "caidanshouqi",
"unicode": "e771",
"unicode_decimal": 59249
},
{
"icon_id": "22095879",
"name": "应用管理",
"font_class": "yingyongguanli",
"unicode": "e772",
"unicode_decimal": 59250
},
{
"icon_id": "22095880",
"name": "文档&工具",
"font_class": "wendanggongju",
"unicode": "e773",
"unicode_decimal": 59251
},
{
"icon_id": "22095881",
"name": "OTA",
"font_class": "OTA",
"unicode": "e774",
"unicode_decimal": 59252
},
{
"icon_id": "22095882",
"name": "监控中心",
"font_class": "jiankongzhongxin",
"unicode": "e775",
"unicode_decimal": 59253
},
{
"icon_id": "22095883",
"name": "设备管理",
"font_class": "shebeiguanli",
"unicode": "e776",
"unicode_decimal": 59254
},
{
"icon_id": "22095902",
"name": "面性下拉",
"font_class": "mianxingxiala",
"unicode": "e777",
"unicode_decimal": 59255
},
{
"icon_id": "22095903",
"name": "面性上拉",
"font_class": "mianxingshangla",
"unicode": "e778",
"unicode_decimal": 59256
},
{
"icon_id": "22095904",
"name": "unfold",
"font_class": "unfold",
"unicode": "e779",
"unicode_decimal": 59257
},
{
"icon_id": "22095905",
"name": "right",
"font_class": "right",
"unicode": "e77a",
"unicode_decimal": 59258
},
{
"icon_id": "22095906",
"name": "fold",
"font_class": "fold",
"unicode": "e77b",
"unicode_decimal": 59259
},
{
"icon_id": "22096387",
"name": "警告",
"font_class": "jinggao",
"unicode": "e77c",
"unicode_decimal": 59260
},
{
"icon_id": "22096388",
"name": "错误",
"font_class": "cuowu",
"unicode": "e77d",
"unicode_decimal": 59261
},
{
"icon_id": "22096389",
"name": "正确",
"font_class": "zhengque",
"unicode": "e77e",
"unicode_decimal": 59262
}, },
{ {
"icon_id": "22096432", "icon_id": "22096432",
...@@ -111,123 +258,18 @@ ...@@ -111,123 +258,18 @@
"unicode_decimal": 59276 "unicode_decimal": 59276
}, },
{ {
"icon_id": "22096387", "icon_id": "22178639",
"name": "警告", "name": "图片展示",
"font_class": "jinggao", "font_class": "tupianzhanshi",
"unicode": "e77c", "unicode": "e786",
"unicode_decimal": 59260 "unicode_decimal": 59270
},
{
"icon_id": "22096388",
"name": "错误",
"font_class": "cuowu",
"unicode": "e77d",
"unicode_decimal": 59261
},
{
"icon_id": "22096389",
"name": "正确",
"font_class": "zhengque",
"unicode": "e77e",
"unicode_decimal": 59262
},
{
"icon_id": "22095902",
"name": "面性下拉",
"font_class": "mianxingxiala",
"unicode": "e777",
"unicode_decimal": 59255
},
{
"icon_id": "22095903",
"name": "面性上拉",
"font_class": "mianxingshangla",
"unicode": "e778",
"unicode_decimal": 59256
},
{
"icon_id": "22095904",
"name": "unfold",
"font_class": "unfold",
"unicode": "e779",
"unicode_decimal": 59257
},
{
"icon_id": "22095905",
"name": "right",
"font_class": "right",
"unicode": "e77a",
"unicode_decimal": 59258
},
{
"icon_id": "22095906",
"name": "fold",
"font_class": "fold",
"unicode": "e77b",
"unicode_decimal": 59259
},
{
"icon_id": "22095875",
"name": "关于我们",
"font_class": "guanyuwomen",
"unicode": "e76e",
"unicode_decimal": 59246
},
{
"icon_id": "22095876",
"name": "菜单展开",
"font_class": "caidanzhankai",
"unicode": "e76f",
"unicode_decimal": 59247
},
{
"icon_id": "22095877",
"name": "产品文档",
"font_class": "chanpinwendang",
"unicode": "e770",
"unicode_decimal": 59248
},
{
"icon_id": "22095878",
"name": "菜单收起",
"font_class": "caidanshouqi",
"unicode": "e771",
"unicode_decimal": 59249
},
{
"icon_id": "22095879",
"name": "应用管理",
"font_class": "yingyongguanli",
"unicode": "e772",
"unicode_decimal": 59250
},
{
"icon_id": "22095880",
"name": "文档&工具",
"font_class": "wendanggongju",
"unicode": "e773",
"unicode_decimal": 59251
},
{
"icon_id": "22095881",
"name": "OTA",
"font_class": "OTA",
"unicode": "e774",
"unicode_decimal": 59252
},
{
"icon_id": "22095882",
"name": "监控中心",
"font_class": "jiankongzhongxin",
"unicode": "e775",
"unicode_decimal": 59253
}, },
{ {
"icon_id": "22095883", "icon_id": "22178640",
"name": "设备管理", "name": "列表展示",
"font_class": "shebeiguanli", "font_class": "liebiaozhanshi",
"unicode": "e776", "unicode": "e78d",
"unicode_decimal": 59254 "unicode_decimal": 59277
} }
] ]
} }
src/views/Account/index.vue
...@@ -32,8 +32,8 @@ ...@@ -32,8 +32,8 @@
</div> </div>
<div class="page-content"> <div class="page-content">
<div class="content-header"> <div class="content-header">
<st-button type="primary"> <st-button type="primary" @click="handleAdd">
<i class="iconfont icon-tianjia"></i><span class="text">{{'插入数据'}}</span> <i class="iconfont icon-tianjia"></i><span class="text">{{'增加用户'}}</span>
</st-button> </st-button>
</div> </div>
<div class="table-list"> <div class="table-list">
...@@ -45,10 +45,52 @@ ...@@ -45,10 +45,52 @@
list: tokenList, list: tokenList,
total: total, total: total,
}"> }">
<div slot="operate" slot-scope="row">
<span class="operate" @click="handleEdit(row)">编辑</span>
<span class="operate operate-delete" @click="handleDelete(row)">删除</span>
</div>
</st-table> </st-table>
</div> </div>
</div> </div>
</div> </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="90px"
ref="form"
:model="form">
<st-form-item
:label="'账号:'">
<st-input v-model="form.account"></st-input>
</st-form-item>
<st-form-item
:label="'角色:'">
<st-input v-model="form.role"></st-input>
</st-form-item>
<st-form-item
:label="'邮箱:'">
<st-input v-model="form.email"></st-input>
</st-form-item>
<st-form-item
:label="'初始密码:'">
<st-input v-model="form.password"></st-input>
</st-form-item>
<st-form-item
:label="'重复密码:'">
<st-input v-model="form.confirmPwd"></st-input>
</st-form-item>
</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> </div>
</template> </template>
...@@ -62,6 +104,8 @@ export default { ...@@ -62,6 +104,8 @@ export default {
deviceName: '', deviceName: '',
logLevel: '', logLevel: '',
timeSection: [], timeSection: [],
showDialog: false,
form: {},
logLevelOptions: [ logLevelOptions: [
{ label: 'debug', value: -1 }, { label: 'debug', value: -1 },
{ label: 'info', value: 0 }, { label: 'info', value: 0 },
...@@ -118,6 +162,21 @@ export default { ...@@ -118,6 +162,21 @@ export default {
// this.getData() // this.getData()
}, },
methods: { methods: {
submit() {
this.showDialog = false
},
cancelSubmit() {
this.showDialog = false
},
handleAdd() {
this.showDialog = true
},
handleEdit(row) {
this.showDialog = true
},
handleDelete(row) {
this.showDialog = true
},
checkSearchContent() { checkSearchContent() {
if (this.deviceName && this.deviceName.search(this.formatSearchName) !== -1) { if (this.deviceName && this.deviceName.search(this.formatSearchName) !== -1) {
this.borderColor = '#f00' this.borderColor = '#f00'
......
src/views/Apply/index.vue
...@@ -14,7 +14,8 @@ ...@@ -14,7 +14,8 @@
total: total, total: total,
}"> }">
<div slot="operate" slot-scope="row"> <div slot="operate" slot-scope="row">
<span class="operate" v-if="row.number" @click="$router.push({ path: '/data/edit' })">编辑</span> <span class="operate" v-if="row.number === 1" @click="setHostApp">设置为主应用</span>
<span class="operate" v-else @click="cancelHostApp">取消设置为主应用</span>
<span class="operate operate-delete" v-if="row.number">删除</span> <span class="operate operate-delete" v-if="row.number">删除</span>
</div> </div>
</st-table> </st-table>
...@@ -54,7 +55,8 @@ export default { ...@@ -54,7 +55,8 @@ export default {
}, },
], ],
tokenList: [ tokenList: [
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' } { number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 2, name: 'aa', type: 'aa', desc: 'aaaa' }
], ],
total: 34 total: 34
} }
...@@ -63,6 +65,8 @@ export default { ...@@ -63,6 +65,8 @@ export default {
// this.getData() // this.getData()
}, },
methods: { methods: {
setHostApp() {},
cancelHostApp() {}
} }
} }
</script> </script>
......
src/views/DataList/edit.vue
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
</div> </div>
<div class="page-content"> <div class="page-content">
<div class="content-header"> <div class="content-header">
<st-button type="primary"> <st-button type="primary" @click="addTableData">
<i class="iconfont icon-tianjia"></i><span class="text">{{'插入数据'}}</span></st-button> <i class="iconfont icon-tianjia"></i><span class="text">{{'插入数据'}}</span></st-button>
<div> <div>
<div class="search"> <div class="search">
...@@ -16,18 +16,66 @@ ...@@ -16,18 +16,66 @@
</div> </div>
<div class="table-list"> <div class="table-list">
<div class="list-content"> <div class="list-content">
<st-table <el-table
ref="vTable" ref="singleTable"
:options="definitions" :data="tableData"
:data="{ highlight-current-row
list: tokenList, @current-change="handleCurrentChange"
total: total, @row-click="rowClick"
}"> @cell-click="cellClick"
<div slot="operate" slot-scope="row"> style="width: 100%">
<span class="operate" v-if="row.number">编辑</span> <el-table-column label="序号" width="100px">
<span class="operate operate-delete" v-if="row.number">删除</span> <template slot-scope="scope">
<input type="text" v-model="scope.row.field" @blur="handleBlur">
</template>
</el-table-column>
<el-table-column label="列1">
<template slot-scope="scope">
<div style="display: flex">
<el-select v-model="scope.row.type" placeholder="请选择" @blur="handleBlur">
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<input style="margin-left: 10px" type="text" v-model="scope.row.value" @blur="handleBlur">
</div>
</template>
</el-table-column>
<el-table-column label="列2">
<template slot-scope="scope">
<div style="display: flex">
<el-select v-model="scope.row.type" placeholder="请选择" @blur="handleBlur">
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<input style="margin-left: 10px" type="text" v-model="scope.row.value" @blur="handleBlur">
</div>
</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>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handlePageChange"
:current-page="1"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, prev, pager, next, sizes, jumper"
:total="400">
</el-pagination>
</div> </div>
</st-table>
</div> </div>
</div> </div>
</div> </div>
...@@ -39,46 +87,119 @@ export default { ...@@ -39,46 +87,119 @@ export default {
data() { data() {
return { return {
inputVal: '', inputVal: '',
definitions: [ typeOptions: [{
{ value: 'base64',
label: '序号', label: 'base64'
render: 'number' }, {
value: 'string',
label: 'string'
}],
tableOptions: [],
tableData: [{
field: '1',
type: 'base64',
value: '122'
}, {
field: '2',
type: 'base64',
value: 'fein_fe'
}, {
field: '3',
type: 'base64',
value: '24字节'
}, {
field: '4',
type: 'string',
value: '上海市普陀区金沙江路'
}],
currentRow: '',
total: 34
}
}, },
{ mounted() {
label: '名称', // this.getData()
render: 'name'
}, },
{ methods: {
label: '类别', addTableData() {
render: 'type' this.tableData.push({ field: '', type: 'string', value: '' })
}, },
{ handleFocus() {
label: '描述', // console.log(111)
render: 'desc' this.$emit('cell-click')
}, },
{ handleDelete(row) {
label: '操作', console.log(row)
type: 'slot',
width: '150px',
slotName: 'operate'
}, },
], handleBlur(event) {
tokenList: [ this.setCurrent()
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' } event.target.classList.remove('write')
], },
total: 34 cellClick(row, column, cell, event) {
// console.log(cell)
if (cell.getElementsByTagName('input')[0]) {
cell.getElementsByTagName('input')[0].classList.add('write')
cell.getElementsByTagName('input')[1].classList.add('write')
} }
}, },
mounted() { rowClick(row, column, event) {
// this.getData() this.setCurrent(row)
}, },
methods: { setCurrent(row) {
this.$refs.singleTable.setCurrentRow(row)
},
handleCurrentChange(val) {
this.currentRow = val
},
handleSizeChange() {},
handlePageChange() {}
} }
} }
</script> </script>
<style lang="sass" scoped> <style lang="sass" scoped>
.page-content .page-content
::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
.content-header .content-header
display: flex display: flex
flex-direction: row flex-direction: row
...@@ -112,4 +233,24 @@ export default { ...@@ -112,4 +233,24 @@ export default {
font-family: PingFangSC-Regular, PingFang SC font-family: PingFangSC-Regular, PingFang SC
font-weight: 400 font-weight: 400
color:#999999 color:#999999
.pagination
text-align: center
margin-top: 24px
margin-bottom: 10px
.el-pagination
white-space: nowrap
padding: 2px 5px
color: #333
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
::v-deep .el-pagination__total
font-size: 14px
::v-deep .el-pager
font-weight: 500
::v-deep.el-pagination__sizes, ::v-deep.el-pagination__jump, ::v-deep.el-pagination__total
font-weight: 400
::v-deep .btn-next, ::v-deep .btn-prev
color: #666
&:disabled
color: #C0C4CC
</style> </style>
src/views/ParamsModel/add.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 class="flex-form"
ref="form"
label-width="100px"
:model="form"
:rules="rules">
<st-form-item
:label="'模板名称'+':'"
prop="name">
<st-input v-model="form.name"></st-input>
</st-form-item>
<st-form-item
:label="'模板类型'+':'"
prop="name">
<st-input v-model="form.name"></st-input>
</st-form-item>
<st-form-item
:label="'基础模板'+':'"
prop="name">
<st-input v-model="form.name"></st-input>
</st-form-item>
<st-form-item class="textarea"
: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 class="flex-item"
:label="'参数'+':'"
prop="description">
<div>
<el-table :max-height="flexHeight"
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="请选择" @blur="handleBlur">
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-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">
<div class="btn-box" v-if="scope.row.type === 'blob'">
<span class="upload-btn" v-if="!file">Select File</span>
<input type="file" @blur="handleBlur" @change="handleUpload" class="input-btn" v-if="!file">
<span class="file-btn" v-if="file">{{file.name}}<i class="iconfont icon-guanbi" @click="deleteFile"></i></span>
</div>
</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>
<div class="add-btn" @click="addTableData">
<span class="add-btn-text"><i class="iconfont icon-tianjia"></i> 添加</span>
</div>
</div>
</st-form-item>
</st-form>
<div class="buttons">
<st-button @click="cancel"><span class="text">{{'取消'}}</span></st-button>
<st-button type="primary" @click="save"><span class="text">{{'保存'}}</span></st-button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {},
rules: [],
file: '',
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: '上海市普陀区金沙江路'
}],
flexHeight: 0,
currentRow: ''
}
},
created() {
this.setFlexHeight()
},
mounted() {
this.setFlexHeight()
window.onresize = () => {
setTimeout(() => {
this.setFlexHeight()
}, 10)
}
},
methods: {
cancel() {},
save() {},
handleUpload(event) {
this.file = event.target.files[0]
},
deleteFile() {
this.file = ''
},
setFlexHeight() {
const ele = document.getElementsByClassName('flex-item') && document.getElementsByClassName('flex-item')[0]
this.flexHeight = ele && ele.clientHeight
},
addTableData() {
this.tableData.push({ field: '', type: 'string', value: '' })
},
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
position: relative
::v-deep.el-form-item
// height: 32px
// line-height: 32px
margin-bottom: 24px
::v-deep.el-form-item.textarea
height: 100px
::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
.flex-form
height: calc(100% - 60px)
overflow: hidden
.flex-item
height: calc(100% - 380px)
.delete-btn
margin-left: 12px
color: #F56C6C
.add-btn
height: 32px
line-height: 28px
margin-top: 20px
border: 2px dashed #D7DAE0
border-radius: 2px
border-radius: 2px
text-align: center
.add-btn-text
display: inline-block
height: 28px
line-height: 28px
.icon-tianjia
color: #666
.buttons
position: absolute
bottom: 0
right: 0
height: 60px
line-height: 60px
border-top: 1px solid #ddd
width: 100%
padding: 0 20px
text-align: right
.btn-box
// width: 80px
height: 24px
margin-left: 14px
position: relative
&:hover .upload-btn
background: #ccc
.upload-btn
background: #ddd
width: 80px
height: 24px
border-radius: 4px
text-align: center
position: absolute
.input-btn
width: 80px
height: 24px
opacity: 0
position: absolute
.file-btn
height: 24px
position: absolute
border: 1px solid #CCC
border-radius: 4px
padding: 0 24px 0 10px
.icon-guanbi
position: absolute
top: 0
right: 0
font-size: 10px
width: 24px
text-align: center
</style>
src/views/ParamsModel/edit.vue
...@@ -4,31 +4,27 @@ ...@@ -4,31 +4,27 @@
<span class="title">{{'参数模板 / 编辑'}}</span> <span class="title">{{'参数模板 / 编辑'}}</span>
</div> </div>
<div class="page-content"> <div class="page-content">
<st-form <st-form class="flex-form"
ref="form" ref="form"
label-width="100px" label-width="100px"
:model="form" :model="form"
:rules="rules"> :rules="rules">
<st-form-item <st-form-item
style="margin-bottom:20px"
:label="'模板名称'+':'" :label="'模板名称'+':'"
prop="name"> prop="name">
<st-input v-model="form.name"></st-input> <st-input v-model="form.name"></st-input>
</st-form-item> </st-form-item>
<st-form-item <st-form-item
style="margin-bottom:20px"
:label="'模板类型'+':'" :label="'模板类型'+':'"
prop="name"> prop="name">
<st-input v-model="form.name"></st-input> <st-input v-model="form.name"></st-input>
</st-form-item> </st-form-item>
<st-form-item <st-form-item
style="margin-bottom:20px"
:label="'基础模板'+':'" :label="'基础模板'+':'"
prop="name"> prop="name">
<st-input v-model="form.name"></st-input> <st-input v-model="form.name"></st-input>
</st-form-item> </st-form-item>
<st-form-item <st-form-item class="textarea"
style="margin-bottom:20px"
:label="'描述'+':'" :label="'描述'+':'"
prop="description"> prop="description">
<st-input <st-input
...@@ -40,11 +36,11 @@ ...@@ -40,11 +36,11 @@
> >
</st-input> </st-input>
</st-form-item> </st-form-item>
<st-form-item <st-form-item class="flex-item"
style="margin-bottom:20px"
:label="'参数'+':'" :label="'参数'+':'"
prop="description"> prop="description">
<el-table <div>
<el-table :max-height="flexHeight"
ref="singleTable" ref="singleTable"
:data="tableData" :data="tableData"
highlight-current-row highlight-current-row
...@@ -59,7 +55,7 @@ ...@@ -59,7 +55,7 @@
</el-table-column> </el-table-column>
<el-table-column label="类型"> <el-table-column label="类型">
<template slot-scope="scope"> <template slot-scope="scope">
<el-select v-model="scope.row.type" placeholder="请选择" @focus="handleFocus"> <el-select v-model="scope.row.type" placeholder="请选择" @blur="handleBlur">
<el-option <el-option
v-for="item in typeOptions" v-for="item in typeOptions"
:key="item.value" :key="item.value"
...@@ -67,17 +63,26 @@ ...@@ -67,17 +63,26 @@
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
<!-- <select id="item" class="myselect">
<option value="1">aa</option>
<option value="2">bb</option>
<option value="3">cc</option>
</select> -->
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="值"> <el-table-column label="值">
<template slot-scope="scope"> <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 === '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"> <div class="btn-box" v-if="scope.row.type === 'blob'">
<span class="upload-btn" v-if="!file">Select File</span>
<input type="file" @blur="handleBlur" @change="handleUpload" class="input-btn" v-if="!file">
<span class="file-btn" v-if="file">{{file.name}}<i class="iconfont icon-guanbi" @click="deleteFile"></i></span>
</div>
<div v-if="scope.row.type === 'table'">
<el-select v-model="scope.row.value" placeholder="请选择" @blur="handleBlur">
<el-option
v-for="item in tableOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作"> <el-table-column label="操作">
...@@ -86,8 +91,16 @@ ...@@ -86,8 +91,16 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="add-btn" @click="addTableData">
<span class="add-btn-text"><i class="iconfont icon-tianjia"></i> 添加</span>
</div>
</div>
</st-form-item> </st-form-item>
</st-form> </st-form>
<div class="buttons">
<st-button @click="cancel"><span class="text">{{'取消'}}</span></st-button>
<st-button type="primary" @click="save"><span class="text">{{'保存'}}</span></st-button>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -98,7 +111,7 @@ export default { ...@@ -98,7 +111,7 @@ export default {
return { return {
form: {}, form: {},
rules: [], rules: [],
focusFlag: false, file: '',
typeOptions: [{ typeOptions: [{
value: 'number', value: 'number',
label: 'number' label: 'number'
...@@ -112,6 +125,7 @@ export default { ...@@ -112,6 +125,7 @@ export default {
value: 'blob', value: 'blob',
label: 'blob' label: 'blob'
}], }],
tableOptions: [],
tableData: [{ tableData: [{
field: 'name', field: 'name',
type: 'number', type: 'number',
...@@ -129,17 +143,39 @@ export default { ...@@ -129,17 +143,39 @@ export default {
type: 'string', type: 'string',
value: '上海市普陀区金沙江路' value: '上海市普陀区金沙江路'
}], }],
rowIndex: null, flexHeight: 0,
columnIndex: null,
currentRow: '' currentRow: ''
} }
}, },
created() {
this.setFlexHeight()
},
mounted() { mounted() {
// this.getData() this.setFlexHeight()
window.onresize = () => {
setTimeout(() => {
this.setFlexHeight()
}, 10)
}
}, },
methods: { methods: {
cancel() {},
save() {},
handleUpload(event) {
this.file = event.target.files[0]
},
deleteFile() {
this.file = ''
},
setFlexHeight() {
const ele = document.getElementsByClassName('flex-item') && document.getElementsByClassName('flex-item')[0]
this.flexHeight = ele && ele.clientHeight
},
addTableData() {
this.tableData.push({ field: '', type: 'string', value: '' })
},
handleFocus() { handleFocus() {
console.log(111) // console.log(111)
this.$emit('cell-click') this.$emit('cell-click')
}, },
handleDelete(row) { handleDelete(row) {
...@@ -150,7 +186,7 @@ export default { ...@@ -150,7 +186,7 @@ export default {
event.target.classList.remove('write') event.target.classList.remove('write')
}, },
cellClick(row, column, cell, event) { cellClick(row, column, cell, event) {
console.log(cell) // console.log(cell)
if (cell.getElementsByTagName('input')[0]) { if (cell.getElementsByTagName('input')[0]) {
cell.getElementsByTagName('input')[0].classList.add('write') cell.getElementsByTagName('input')[0].classList.add('write')
cell.getElementsByTagName('input')[0].focus() cell.getElementsByTagName('input')[0].focus()
...@@ -172,11 +208,18 @@ export default { ...@@ -172,11 +208,18 @@ export default {
<style lang="sass" scoped> <style lang="sass" scoped>
.page-content .page-content
text-align: left text-align: left
position: relative
::v-deep.el-form-item
// height: 32px
// line-height: 32px
margin-bottom: 24px
::v-deep.el-form-item.textarea
height: 100px
::v-deep.el-input__inner, ::v-deep.el-textarea, ::v-deep.el-textarea__inner ::v-deep.el-input__inner, ::v-deep.el-textarea, ::v-deep.el-textarea__inner
font-size: 14px font-size: 14px
font-family: PingFangSC-Regular, PingFang SC font-family: PingFangSC-Regular, PingFang SC
font-weight: 400 font-weight: 400
color:#333 color: #333
&::placeholder &::placeholder
font-size: 14px font-size: 14px
font-family: PingFangSC-Regular, PingFang SC font-family: PingFangSC-Regular, PingFang SC
...@@ -221,7 +264,68 @@ export default { ...@@ -221,7 +264,68 @@ export default {
background: #F5F7FA background: #F5F7FA
::v-deep td ::v-deep td
padding: 6px 0 padding: 6px 0
.flex-form
height: calc(100% - 60px)
overflow: hidden
.flex-item
height: calc(100% - 380px)
.delete-btn .delete-btn
margin-left: 12px margin-left: 12px
color: #F56C6C color: #F56C6C
.add-btn
height: 32px
line-height: 28px
margin-top: 20px
border: 2px dashed #D7DAE0
border-radius: 2px
border-radius: 2px
text-align: center
.add-btn-text
display: inline-block
height: 28px
line-height: 28px
.icon-tianjia
color: #666
.buttons
position: absolute
bottom: 0
right: 0
height: 60px
line-height: 60px
border-top: 1px solid #ddd
width: 100%
padding: 0 20px
text-align: right
.btn-box
// width: 80px
height: 24px
margin-left: 14px
position: relative
&:hover .upload-btn
background: #ccc
.upload-btn
background: #ddd
width: 80px
height: 24px
border-radius: 4px
text-align: center
position: absolute
.input-btn
width: 80px
height: 24px
opacity: 0
position: absolute
.file-btn
height: 24px
position: absolute
border: 1px solid #CCC
border-radius: 4px
padding: 0 24px 0 10px
.icon-guanbi
position: absolute
top: 0
right: 0
font-size: 10px
width: 24px
text-align: center
</style> </style>
src/views/ParamsModel/index.vue
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div class="page-content"> <div class="page-content">
<div class="level level-one"> <div class="level level-one">
<div class="content-header"> <div class="content-header">
<st-button type="primary" @click="addModel"> <st-button type="primary" @click="$router.push({ path: '/params/add' })">
<i class="iconfont icon-tianjia"></i><span class="text">{{'添加'}}</span></st-button> <i class="iconfont icon-tianjia"></i><span class="text">{{'添加'}}</span></st-button>
<div class="search"> <div class="search">
<input type="text" class="search-input" placeholder="请输入搜索内容" v-model="inputVal"> <input type="text" class="search-input" placeholder="请输入搜索内容" v-model="inputVal">
...@@ -21,7 +21,9 @@ ...@@ -21,7 +21,9 @@
:data="{ :data="{
list: tokenList, list: tokenList,
total: total, total: total,
}"> }"
highlight-current-row
@row-click="handleClickRow">
<div slot="operate" slot-scope="row"> <div slot="operate" slot-scope="row">
<span class="operate" @click="$router.push({ path: '/params/detail' })">详情</span> <span class="operate" @click="$router.push({ path: '/params/detail' })">详情</span>
<span class="operate" @click="$router.push({ path: '/params/edit' })">编辑</span> <span class="operate" @click="$router.push({ path: '/params/edit' })">编辑</span>
...@@ -34,7 +36,7 @@ ...@@ -34,7 +36,7 @@
<div class="blanking"></div> <div class="blanking"></div>
<div class="level level-two"> <div class="level level-two">
<div class="content-header"> <div class="content-header">
<st-button type="primary" @click="addModel"> <st-button type="primary" @click="$router.push({ path: '/params/add' })">
<i class="iconfont icon-tianjia"></i><span class="text">{{'添加'}}</span></st-button> <i class="iconfont icon-tianjia"></i><span class="text">{{'添加'}}</span></st-button>
<div class="search"> <div class="search">
<input type="text" class="search-input" placeholder="请输入搜索内容" v-model="inputVal"> <input type="text" class="search-input" placeholder="请输入搜索内容" v-model="inputVal">
...@@ -93,6 +95,10 @@ export default { ...@@ -93,6 +95,10 @@ export default {
}, },
], ],
tokenList: [ tokenList: [
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' } { number: 1, name: 'aa', type: 'aa', desc: 'aaaa' }
], ],
total: 34 total: 34
...@@ -102,9 +108,10 @@ export default { ...@@ -102,9 +108,10 @@ export default {
// this.getData() // this.getData()
}, },
methods: { methods: {
addModel() {
},
removeModel(row) { removeModel(row) {
},
handleClickRow(row, column, event) {
console.log(row)
} }
} }
} }
...@@ -119,7 +126,7 @@ export default { ...@@ -119,7 +126,7 @@ export default {
width: 20px width: 20px
background: #EBEEF5 background: #EBEEF5
.level .level
flex: 1 width: calc(50% - 10px)
padding: 14px 20px padding: 14px 20px
.content-header .content-header
display: flex display: flex
...@@ -149,6 +156,8 @@ export default { ...@@ -149,6 +156,8 @@ export default {
display: none display: none
::v-deep.el-pagination__jump ::v-deep.el-pagination__jump
display: none display: none
::v-deep.current-row td
background: #ecf5ff!important
::v-deep input ::v-deep input
font-size: 14px font-size: 14px
font-family: PingFangSC-Regular, PingFang SC font-family: PingFangSC-Regular, PingFang SC
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!