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 1015 additions and 306 deletions
src/layouts/components/user-info.vue
......@@ -47,9 +47,9 @@ export default class userInfo extends Vue {
}
toPersonal() {
const routeUrl = this.$router.resolve({ name: 'personal' })
window.open(routeUrl.href, '_blank')
// this.$router.push({ name: 'personal' })
// const routeUrl = this.$router.resolve({ name: 'personal' })
// window.open(routeUrl.href, '_blank')
this.$router.push({ name: 'personal' })
}
async logout() {
......
src/router/routes.js
......@@ -16,7 +16,7 @@ export default [
{
path: '/device',
name: 'device',
meta: { title: '设备列表', icon: 'icon-yingyongguanli' },
meta: { title: '设备列表', icon: 'icon-shebei' },
component: () => import('@layouts/basicLayout'),
children: [{
path: '/device',
......@@ -28,7 +28,7 @@ export default [
{
path: '/service',
name: 'service',
meta: { title: '服务列表', icon: 'icon-jiankongzhongxin' },
meta: { title: '服务列表', icon: 'icon-fuwu' },
component: () => import('@layouts/basicLayout'),
children: [{
path: '/service',
......@@ -40,7 +40,7 @@ export default [
{
path: '/params',
name: 'params',
meta: { title: '参数模板', icon: 'icon-shebeiguanli' },
meta: { title: '参数模板', icon: 'icon-canshumoban' },
component: () => import('@layouts/basicLayout'),
children: [{
path: '/params',
......@@ -57,12 +57,17 @@ export default [
name: 'params',
meta: { title: '详情' },
component: () => import('@views/ParamsModel/detail')
}, {
path: '/params/add',
name: 'params',
meta: { title: '添加' },
component: () => import('@views/ParamsModel/add')
}]
},
{
path: '/data',
name: 'data',
meta: { title: '数据列表', icon: 'icon-OTA' },
meta: { title: '数据列表', icon: 'icon-shuju' },
component: () => import('@layouts/basicLayout'),
children: [{
path: '/data',
......@@ -79,7 +84,7 @@ export default [
{
path: '/apply',
name: 'apply',
meta: { title: '应用中心', icon: 'icon-wendanggongju' },
meta: { title: '应用中心', icon: 'icon-yingyong' },
component: () => import('@layouts/basicLayout'),
children: [{
path: '/apply',
......@@ -91,7 +96,7 @@ export default [
{
path: '/setting',
name: 'setting',
meta: { title: '设置中心', icon: 'icon-wendanggongju' },
meta: { title: '设置中心', icon: 'icon-shebeiguanli' },
component: () => import('@layouts/basicLayout'),
children: [{
path: '/setting',
......@@ -103,7 +108,7 @@ export default [
{
path: '/account',
name: 'account',
meta: { title: '账户中心', icon: 'icon-wendanggongju' },
meta: { title: '账户中心', icon: 'icon-qianbao1' },
component: () => import('@layouts/basicLayout'),
children: [{
path: '/account',
......
src/styles/fonts/iconfont.css
@font-face {
font-family: "iconfont"; /* Project id 2598158 */
src: url('iconfont.woff2?t=1623308852405') format('woff2'),
url('iconfont.woff?t=1623308852405') format('woff'),
url('iconfont.ttf?t=1623308852405') format('truetype');
font-family: "iconfont"; /* Project id 2741238 */
src: url('iconfont.woff2?t=1628763203270') format('woff2'),
url('iconfont.woff?t=1628763203270') format('woff'),
url('iconfont.ttf?t=1628763203270') format('truetype');
}
.iconfont {
......@@ -13,64 +13,84 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-tupianzhanshi:before {
content: "\e786";
.icon-shuju:before {
content: "\e60c";
}
.icon-liebiaozhanshi:before {
content: "\e78d";
.icon-fuwu:before {
content: "\e6c7";
}
.icon-duihao:before {
content: "\e77f";
.icon-shebei:before {
content: "\e874";
}
.icon-guanbi:before {
content: "\e780";
.icon-canshumoban:before {
content: "\e78e";
}
.icon-shanchu:before {
content: "\e781";
.icon-yingyong:before {
content: "\e693";
}
.icon-shangchuan:before {
content: "\e782";
.icon-qianbao1:before {
content: "\e621";
}
.icon-fuzhi:before {
content: "\e783";
.icon-guanyuwomen:before {
content: "\e76e";
}
.icon-fanhui:before {
content: "\e784";
.icon-caidanzhankai:before {
content: "\e76f";
}
.icon-right1:before {
content: "\e785";
.icon-chanpinwendang:before {
content: "\e770";
}
.icon-xiazai:before {
content: "\e787";
.icon-caidanshouqi:before {
content: "\e771";
}
.icon-fujian:before {
content: "\e788";
.icon-yingyongguanli:before {
content: "\e772";
}
.icon-riqi:before {
content: "\e789";
.icon-wendanggongju:before {
content: "\e773";
}
.icon-sousuo:before {
content: "\e78a";
.icon-OTA:before {
content: "\e774";
}
.icon-left:before {
content: "\e78b";
.icon-jiankongzhongxin:before {
content: "\e775";
}
.icon-tianjia:before {
content: "\e78c";
.icon-shebeiguanli:before {
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 {
......@@ -85,59 +105,63 @@
content: "\e77e";
}
.icon-mianxingxiala:before {
content: "\e777";
.icon-duihao:before {
content: "\e77f";
}
.icon-mianxingshangla:before {
content: "\e778";
.icon-guanbi:before {
content: "\e780";
}
.icon-unfold:before {
content: "\e779";
.icon-shanchu:before {
content: "\e781";
}
.icon-right:before {
content: "\e77a";
.icon-shangchuan:before {
content: "\e782";
}
.icon-fold:before {
content: "\e77b";
.icon-fuzhi:before {
content: "\e783";
}
.icon-guanyuwomen:before {
content: "\e76e";
.icon-fanhui:before {
content: "\e784";
}
.icon-caidanzhankai:before {
content: "\e76f";
.icon-right1:before {
content: "\e785";
}
.icon-chanpinwendang:before {
content: "\e770";
.icon-xiazai:before {
content: "\e787";
}
.icon-caidanshouqi:before {
content: "\e771";
.icon-fujian:before {
content: "\e788";
}
.icon-yingyongguanli:before {
content: "\e772";
.icon-riqi:before {
content: "\e789";
}
.icon-wendanggongju:before {
content: "\e773";
.icon-sousuo:before {
content: "\e78a";
}
.icon-OTA:before {
content: "\e774";
.icon-left:before {
content: "\e78b";
}
.icon-jiankongzhongxin:before {
content: "\e775";
.icon-tianjia:before {
content: "\e78c";
}
.icon-shebeiguanli:before {
content: "\e776";
.icon-tupianzhanshi:before {
content: "\e786";
}
.icon-liebiaozhanshi:before {
content: "\e78d";
}
src/styles/fonts/iconfont.json
{
"id": "2598158",
"name": "SeetaAIOT",
"id": "2741238",
"name": "设备管理后台",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "22178639",
"name": "图片展示",
"font_class": "tupianzhanshi",
"unicode": "e786",
"unicode_decimal": 59270
"icon_id": "18005150",
"name": "数据 (4)",
"font_class": "shuju",
"unicode": "e60c",
"unicode_decimal": 58892
},
{
"icon_id": "22178640",
"name": "列表展示",
"font_class": "liebiaozhanshi",
"unicode": "e78d",
"unicode_decimal": 59277
"icon_id": "3242865",
"name": "列表",
"font_class": "fuwu",
"unicode": "e6c7",
"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",
......@@ -111,123 +258,18 @@
"unicode_decimal": 59276
},
{
"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": "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": "22178639",
"name": "图片展示",
"font_class": "tupianzhanshi",
"unicode": "e786",
"unicode_decimal": 59270
},
{
"icon_id": "22095883",
"name": "设备管理",
"font_class": "shebeiguanli",
"unicode": "e776",
"unicode_decimal": 59254
"icon_id": "22178640",
"name": "列表展示",
"font_class": "liebiaozhanshi",
"unicode": "e78d",
"unicode_decimal": 59277
}
]
}
src/views/Account/index.vue
......@@ -32,8 +32,8 @@
</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 type="primary" @click="handleAdd">
<i class="iconfont icon-tianjia"></i><span class="text">{{'增加用户'}}</span>
</st-button>
</div>
<div class="table-list">
......@@ -45,10 +45,52 @@
list: tokenList,
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>
</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>
</template>
......@@ -62,6 +104,8 @@ export default {
deviceName: '',
logLevel: '',
timeSection: [],
showDialog: false,
form: {},
logLevelOptions: [
{ label: 'debug', value: -1 },
{ label: 'info', value: 0 },
......@@ -118,6 +162,21 @@ export default {
// this.getData()
},
methods: {
submit() {
this.showDialog = false
},
cancelSubmit() {
this.showDialog = false
},
handleAdd() {
this.showDialog = true
},
handleEdit(row) {
this.showDialog = true
},
handleDelete(row) {
this.showDialog = true
},
checkSearchContent() {
if (this.deviceName && this.deviceName.search(this.formatSearchName) !== -1) {
this.borderColor = '#f00'
......
src/views/Apply/index.vue
......@@ -14,7 +14,8 @@
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" 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>
</div>
</st-table>
......@@ -54,7 +55,8 @@ export default {
},
],
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
}
......@@ -63,6 +65,8 @@ export default {
// this.getData()
},
methods: {
setHostApp() {},
cancelHostApp() {}
}
}
</script>
......
src/views/DataList/edit.vue
......@@ -5,7 +5,7 @@
</div>
<div class="page-content">
<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>
<div>
<div class="search">
......@@ -16,18 +16,66 @@
</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>
<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="序号" width="100px">
<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>
</div>
</div>
......@@ -39,33 +87,32 @@ 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' }
],
typeOptions: [{
value: 'base64',
label: 'base64'
}, {
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
}
},
......@@ -73,12 +120,86 @@ export default {
// this.getData()
},
methods: {
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')[1].classList.add('write')
}
},
rowClick(row, column, event) {
this.setCurrent(row)
},
setCurrent(row) {
this.$refs.singleTable.setCurrentRow(row)
},
handleCurrentChange(val) {
this.currentRow = val
},
handleSizeChange() {},
handlePageChange() {}
}
}
</script>
<style lang="sass" scoped>
.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
display: flex
flex-direction: row
......@@ -112,4 +233,24 @@ export default {
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
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>
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 @@
<span class="title">{{'参数模板 / 编辑'}}</span>
</div>
<div class="page-content">
<st-form
<st-form class="flex-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"
<st-form-item class="textarea"
:label="'描述'+':'"
prop="description">
<st-input
......@@ -40,54 +36,71 @@
>
</st-input>
</st-form-item>
<st-form-item
style="margin-bottom:20px"
<st-form-item class="flex-item"
: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>
<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>
<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>
</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>
......@@ -98,7 +111,7 @@ export default {
return {
form: {},
rules: [],
focusFlag: false,
file: '',
typeOptions: [{
value: 'number',
label: 'number'
......@@ -112,6 +125,7 @@ export default {
value: 'blob',
label: 'blob'
}],
tableOptions: [],
tableData: [{
field: 'name',
type: 'number',
......@@ -129,17 +143,39 @@ export default {
type: 'string',
value: '上海市普陀区金沙江路'
}],
rowIndex: null,
columnIndex: null,
flexHeight: 0,
currentRow: ''
}
},
created() {
this.setFlexHeight()
},
mounted() {
// this.getData()
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)
// console.log(111)
this.$emit('cell-click')
},
handleDelete(row) {
......@@ -150,7 +186,7 @@ export default {
event.target.classList.remove('write')
},
cellClick(row, column, cell, event) {
console.log(cell)
// console.log(cell)
if (cell.getElementsByTagName('input')[0]) {
cell.getElementsByTagName('input')[0].classList.add('write')
cell.getElementsByTagName('input')[0].focus()
......@@ -172,11 +208,18 @@ export default {
<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
color: #333
&::placeholder
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
......@@ -221,7 +264,68 @@ export default {
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/index.vue
......@@ -6,7 +6,7 @@
<div class="page-content">
<div class="level level-one">
<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>
<div class="search">
<input type="text" class="search-input" placeholder="请输入搜索内容" v-model="inputVal">
......@@ -21,7 +21,9 @@
:data="{
list: tokenList,
total: total,
}">
}"
highlight-current-row
@row-click="handleClickRow">
<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>
......@@ -34,7 +36,7 @@
<div class="blanking"></div>
<div class="level level-two">
<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>
<div class="search">
<input type="text" class="search-input" placeholder="请输入搜索内容" v-model="inputVal">
......@@ -93,6 +95,10 @@ export default {
},
],
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' }
],
total: 34
......@@ -102,9 +108,10 @@ export default {
// this.getData()
},
methods: {
addModel() {
},
removeModel(row) {
},
handleClickRow(row, column, event) {
console.log(row)
}
}
}
......@@ -119,7 +126,7 @@ export default {
width: 20px
background: #EBEEF5
.level
flex: 1
width: calc(50% - 10px)
padding: 14px 20px
.content-header
display: flex
......@@ -149,6 +156,8 @@ export default {
display: none
::v-deep.el-pagination__jump
display: none
::v-deep.current-row td
background: #ecf5ff!important
::v-deep input
font-size: 14px
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!