Skip to content

seeta-device / deviceManage

Go to a project
Commit 588ece13 by 温丽香
Options

页面样式修改

1 parent 31d9e754
Pipeline #3322 passed
in 1 minute 0 seconds
Inline Side-by-side
Showing with 275 additions and 94 deletions
src/axios.js
......@@ -8,6 +8,17 @@ export const loginApi = data => axios(POST, FRONT + USER + '/login', data)
const PARAMETER = '/parameter'
export const getParameter = data => axios(GET, FRONT + PARAMETER + '/query_list', data)
export const createParameter = data => axios(POST, FRONT + PARAMETER + '/create', data)
export const deleteParameter = data => axios(GET, FRONT + PARAMETER + '/delete', data)
export const editParameter = data => axios(POST, FRONT + PARAMETER + '/change', data)
const TABLE = '/table'
export const getTable = data => axios(GET, FRONT + TABLE + '/query_list', data)
export const createTable = data => axios(POST, FRONT + TABLE + '/create', data)
export const deleteTable = data => axios(GET, FRONT + TABLE + '/delete', data)
export const insertTable = data => axios(POST, FRONT + TABLE + '/insert', data)
const APPID = '/appid'
export const getApp = data => axios(GET, FRONT + APPID + '/query_list', data)
export const deleteApp = data => axios(GET, FRONT + APPID + '/delete', data)
export const setApp = data => axios(GET, FRONT + APPID + '/set', data)
src/components/seeta-ui/seeta-table/index.vue
......@@ -472,6 +472,7 @@ export default class seetaTableIndex extends Vue {
::v-deep .el-icon-arrow-down:hover
color: #409EFF !important
.any-slot
display: inline-block
// display: inline-block
vertical-align: middle
over-flow: hidden
</style>
src/views/Account/index.vue
......@@ -6,11 +6,11 @@
<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>
<st-input width="240px" class="align contents" id="align-input" v-model="userName"></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"
v-model="userRole"
:options="logLevelOptions"
size="small"
style="width: 240px"
......@@ -21,7 +21,7 @@
</st-select>
<span class="fields">创建日期：</span>
<el-date-picker
v-model="timeSection"
v-model="created_at"
type="daterange"
@change="getData"
range-separator="至"
......@@ -97,13 +97,14 @@
<script>
import browserStorage from '@/services/local-storage'
import { rTimeMin } from '@/utils/system.js'
import Dialog from '@/helpers/dialog'
export default {
data() {
return {
// 查询字段
deviceName: '',
logLevel: '',
timeSection: [],
userName: '',
userRole: '',
created_at: [],
showDialog: false,
form: {},
logLevelOptions: [
......@@ -174,8 +175,16 @@ export default {
handleEdit(row) {
this.showDialog = true
},
handleDelete(row) {
this.showDialog = true
async handleDelete(row) {
console.log(row)
const confirmDelete = await Dialog.confirm('提示', { message: '是否删除此日志？' })
if (!confirmDelete) return
const res = await this.getData()
if (res) {
Toast.success('操作成功')
this.getData()
}
},
checkSearchContent() {
if (this.deviceName && this.deviceName.search(this.formatSearchName) !== -1) {
......@@ -211,6 +220,16 @@ export default {
</script>
<style lang="sass" scoped>
.popup-body
::v-deep.el-form-item
height: 32px
line-height: 32px
::v-deep.el-form-item__label
height: 32px!important
line-height: 32px!important
::v-deep.el-form-item__content
height: 32px!important
line-height: 32px!important
.search-fields
::v-deep input
&::placeholder
......
src/views/Apply/index.vue
......@@ -16,7 +16,7 @@
<div slot="operate" slot-scope="row">
<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" @click="handleDelete(row)">删除</span>
</div>
</st-table>
</div>
......@@ -26,6 +26,7 @@
</template>
<script>
import Dialog from '@/helpers/dialog'
export default {
data() {
return {
......@@ -65,6 +66,17 @@ export default {
// this.getData()
},
methods: {
async handleDelete(row) {
console.log(row)
const confirmDelete = await Dialog.confirm('提示', { message: '是否删除此日志？' })
if (!confirmDelete) return
const res = await this.getData()
if (res) {
Toast.success('操作成功')
this.getData()
}
},
setHostApp() {},
cancelHostApp() {}
}
......
src/views/DataList/edit.vue
......@@ -26,40 +26,40 @@
</div>
<div class="table-list">
<div class="list-content">
<el-table
<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="序号" width="100px">
<template slot-scope="scope">
<input type="text" v-model="scope.row.field" @blur="handleBlur">
<!-- <input type="text" v-model="" @blur="handleBlur"> -->
<span style="margin-left: 12px">{{scope.row.field}}</span>
</template>
</el-table-column>
<el-table-column v-for="(column, index) in tableData[0].columns" :key="index" :label="`列${index + 1}`">
<template slot-scope="scope">
<div class="column-box">
<!-- <div style="display: flex"> -->
<!-- <pack-select v-model="scope.row.columns[index].type" @blur="handleBlur" placeholder="请选择" class="none-display" style="margin-right: 10px">
<!-- <div class="column-box"> -->
<div style="display: flex">
<pack-select v-model="scope.row.columns[index].type" @blur="handleBlur" placeholder="请选择" class="none-display" style="margin-right: 10px">
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</pack-select> -->
<input type="text" v-model="scope.row.columns[index].value" @blur="handleBlur">
<el-select v-model="scope.row.columns[index].type" placeholder="请选择">
</pack-select>
<input type="text" v-model="scope.row.columns[index].value" @blur="handleBlur" placeholder="请输入">
<!-- <el-select v-model="scope.row.columns[index].type" placeholder="请选择">
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-select> -->
</div>
</template>
</el-table-column>
......@@ -82,11 +82,16 @@
</div>
</div>
</div>
<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>
import Dialog from '@/helpers/dialog'
export default {
data() {
return {
......@@ -129,14 +134,33 @@ export default {
{ type: 'base64', value: '上海市普陀' }
]
}],
currentRow: '',
total: 34
total: 34,
agoCell: null,
flexHeight: 0
}
},
created() {
this.setFlexHeight()
},
mounted() {
// this.getData()
this.setFlexHeight()
window.onresize = () => {
setTimeout(() => {
this.setFlexHeight()
}, 10)
}
},
methods: {
cancel() {
this.clearCell(this.agoCell)
},
save() {
this.clearCell(this.agoCell)
},
setFlexHeight() {
const ele = document.getElementsByClassName('list-content') && document.getElementsByClassName('list-content')[0]
this.flexHeight = ele && ele.clientHeight
},
addTableData() {
this.tableData.push({
field: '5',
......@@ -147,49 +171,62 @@ export default {
]
})
},
handleDelete(row) {
async handleDelete(row) {
console.log(row)
const confirmDelete = await Dialog.confirm('提示', { message: '是否删除此日志？' })
if (!confirmDelete) return
const res = await this.getData()
if (res) {
Toast.success('操作成功')
this.getData()
}
},
// handleBlur(event) {
// this.setCurrent()
// event.target && event.target.classList && event.target.classList.remove('write')
// },
handleBlur(event) {
event.path.map(item => {
if (item.classList && Array.from(item.classList).includes('cell')) {
this.agoCell = item
}
})
},
clearCell(cell) {
if (!cell) return
this.setCurrent()
event.target && event.target.classList && event.target.classList.remove('write')
const select = cell.getElementsByClassName('el-select')
const input = cell.getElementsByTagName('input')
select && select[0] && select[0].classList.add('none-display')
input && input[0] && input[0].classList.remove('write')
input && input[1] && input[1].classList.remove('write')
},
// handleBlur(event) {
// console.log(event.target, event.target.classList)
// if (this.selectBlur && this.inputBlur) {
// this.setCurrent()
// event.path.map(item => {
// if (item.classList && Array.from(item.classList).includes('cell')) {
// item.getElementsByClassName('el-select')[0].classList.add('none-display')
// item.getElementsByTagName('input')[0].classList.remove('write')
// item.getElementsByTagName('input')[1].classList.remove('write')
// }
// })
// cellClick(row, column, cell, event) {
// if (cell.getElementsByTagName('input')[0]) {
// cell.getElementsByTagName('input')[0].classList.add('write')
// cell.getElementsByTagName('input')[0].focus()
// }
// },
cellClick(row, column, cell, event) {
if (cell.getElementsByTagName('input')[0]) {
if (column.label === '序号' || column.label === '操作') return
if (this.agoCell !== cell) {
this.clearCell(this.agoCell)
}
cell.getElementsByClassName('el-select')[0].classList.remove('none-display')
if (cell.getElementsByTagName('input')[0] && cell.getElementsByTagName('input')[1]) {
cell.getElementsByTagName('input')[0].classList.add('write')
cell.getElementsByTagName('input')[0].focus()
cell.getElementsByTagName('input')[1].classList.add('write')
cell.getElementsByTagName('input')[1].focus()
}
},
// cellClick(row, column, cell, event) {
// cell.getElementsByClassName('el-select')[0].classList.remove('none-display')
// if (cell.getElementsByTagName('input')[0] && cell.getElementsByTagName('input')[1]) {
// cell.getElementsByTagName('input')[0].classList.add('write')
// cell.getElementsByTagName('input')[1].classList.add('write')
// cell.getElementsByTagName('input')[1].focus()
// }
// },
rowClick(row, column, event) {
if (column.label === '序号' || column.label === '操作') return
this.setCurrent(row)
},
setCurrent(row) {
this.$refs.singleTable.setCurrentRow(row)
},
handleCurrentChange(val) {
this.currentRow = val
},
handleSizeChange() {},
handlePageChange() {}
}
......@@ -198,8 +235,17 @@ export default {
<style lang="sass" scoped>
.page-content
position: relative
.list-content
height: calc(100% - 120px)!important
.column-box
position: relative
::v-deep input
&::placeholder
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
color:#999999
::v-deep.el-select
position: absolute
width: 10px
......@@ -261,6 +307,7 @@ export default {
.delete-btn
margin-left: 12px
color: #F56C6C
cursor: pointer
.content-header
display: flex
flex-direction: row
......@@ -331,4 +378,14 @@ export default {
color: #C0C4CC
.none-display
display: none
.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
</style>
src/views/DataList/index.vue
......@@ -20,8 +20,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 operate-delete" v-if="row.number">删除</span>
<span class="operate" @click="$router.push({ path: '/data/edit' })">编辑</span>
<span class="operate operate-delete" @click="handleDelete(row)">删除</span>
</div>
</st-table>
</div>
......@@ -31,6 +31,7 @@
</template>
<script>
import Dialog from '@/helpers/dialog'
export default {
data() {
return {
......@@ -69,6 +70,17 @@ export default {
// this.getData()
},
methods: {
async handleDelete(row) {
console.log(row)
const confirmDelete = await Dialog.confirm('提示', { message: '是否删除此日志？' })
if (!confirmDelete) return
const res = await this.getData()
if (res) {
Toast.success('操作成功')
this.getData()
}
},
}
}
</script>
......
src/views/ParamsModel/add.vue
......@@ -57,28 +57,38 @@
style="width: 100%">
<el-table-column label="字段">
<template slot-scope="scope">
<input type="text" v-model="scope.row.field" @blur="handleBlur">
<input type="text" v-model="scope.row.field" @blur="handleBlur" placeholder="请输入">
</template>
</el-table-column>
<el-table-column label="类型">
<template slot-scope="scope">
<el-select v-model="scope.row.type" placeholder="请选择" @blur="handleBlur">
<pack-select v-model="scope.row.type" placeholder="请选择" @blur="handleBlur" @visible-change="handleVisibleChange" @change="handleChange(scope.row)">
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</pack-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 === 'string' || scope.row.type === 'number'" type="text" v-model="scope.row.value" @blur="handleBlur" placeholder="请输入">
<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>
<span class="upload-btn" v-if="!scope.row.value">Select File</span>
<input type="file" @blur="handleBlur" @change="(event) => handleUpload(event, scope.row)" class="input-btn" v-if="!scope.row.value">
<span class="file-btn" v-if="scope.row.value">{{scope.row.value}}<i class="iconfont icon-guanbi" @click="deleteFile(scope.row)"></i></span>
</div>
<div v-if="scope.row.type === 'table'">
<pack-select v-model="scope.row.value" placeholder="请选择" @blur="handleBlur" @visible-change="handleVisibleChange">
<el-option
v-for="item in tableOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</pack-select>
</div>
</template>
</el-table-column>
......@@ -103,14 +113,13 @@
</template>
<script>
import Dialog from '@/helpers/dialog'
export default {
data() {
return {
form: {},
rules: [],
file: '',
focusFlag: false,
modelOptions: [],
typeOptions: [{
value: 'number',
label: 'number'
......@@ -124,6 +133,14 @@ export default {
value: 'blob',
label: 'blob'
}],
tableOptions: [{
value: 'table1',
label: 'table1'
}, {
value: 'table2',
label: 'table2'
}],
modelOptions: [],
tableData: [{
field: 'name',
type: 'number',
......@@ -135,7 +152,11 @@ export default {
}, {
field: 'image',
type: 'blob',
value: '24字节'
value: ''
}, {
field: 'file',
type: 'blob',
value: ''
}, {
field: 'teat',
type: 'string',
......@@ -159,11 +180,13 @@ export default {
methods: {
cancel() {},
save() {},
handleUpload(event) {
this.file = event.target.files[0]
handleUpload(event, row) {
row.file = event.target.files[0]
row.value = event.target.files[0].name
},
deleteFile() {
this.file = ''
deleteFile(row) {
row.file = ''
row.value = ''
},
setFlexHeight() {
const ele = document.getElementsByClassName('flex-item') && document.getElementsByClassName('flex-item')[0]
......@@ -172,19 +195,31 @@ export default {
addTableData() {
this.tableData.push({ field: '', type: 'string', value: '' })
},
handleFocus() {
// console.log(111)
this.$emit('cell-click')
},
handleDelete(row) {
async handleDelete(row) {
console.log(row)
const confirmDelete = await Dialog.confirm('提示', { message: '是否删除此日志？' })
if (!confirmDelete) return
const res = await this.getData()
if (res) {
Toast.success('操作成功')
this.getData()
}
},
handleChange(row) {
row.file = ''
row.value = ''
},
handleVisibleChange(val) {
if (!val) {
this.setCurrent()
}
},
handleBlur(event) {
this.setCurrent()
event.target.classList.remove('write')
event.target && event.target.classList && 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()
......@@ -207,9 +242,15 @@ export default {
.page-content
text-align: left
position: relative
::v-deep.el-form-item
// height: 32px
// line-height: 32px
::v-deep input
&::placeholder
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
color:#999999
::v-deep.el-form-item, ::v-deep.el-form-item__label, ::v-deep.el-form-item__content
height: 32px
line-height: 32px
margin-bottom: 24px
::v-deep.el-form-item.textarea
height: 100px
......@@ -266,10 +307,11 @@ export default {
height: calc(100% - 60px)
overflow: hidden
.flex-item
height: calc(100% - 380px)
height: calc(100% - 370px)
.delete-btn
margin-left: 12px
color: #F56C6C
cursor: pointer
.add-btn
height: 32px
line-height: 28px
......
src/views/ParamsModel/edit.vue
......@@ -57,7 +57,7 @@
style="width: 100%">
<el-table-column label="字段">
<template slot-scope="scope">
<input type="text" v-model="scope.row.field" @blur="handleBlur">
<input type="text" v-model="scope.row.field" @blur="handleBlur" placeholder="请输入">
</template>
</el-table-column>
<el-table-column label="类型">
......@@ -74,7 +74,7 @@
</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 === 'string' || scope.row.type === 'number'" type="text" v-model="scope.row.value" @blur="handleBlur" placeholder="请输入">
<div class="btn-box" v-if="scope.row.type === 'blob'">
<span class="upload-btn" v-if="!scope.row.value">Select File</span>
<input type="file" @blur="handleBlur" @change="(event) => handleUpload(event, scope.row)" class="input-btn" v-if="!scope.row.value">
......@@ -113,6 +113,7 @@
</template>
<script>
import Dialog from '@/helpers/dialog'
export default {
data() {
return {
......@@ -194,8 +195,16 @@ export default {
addTableData() {
this.tableData.push({ field: '', type: 'string', value: '' })
},
handleDelete(row) {
async handleDelete(row) {
console.log(row)
const confirmDelete = await Dialog.confirm('提示', { message: '是否删除此日志？' })
if (!confirmDelete) return
const res = await this.getData()
if (res) {
Toast.success('操作成功')
this.getData()
}
},
handleChange(row) {
row.file = ''
......@@ -233,6 +242,12 @@ export default {
.page-content
text-align: left
position: relative
::v-deep input
&::placeholder
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
color:#999999
::v-deep.el-form-item, ::v-deep.el-form-item__label, ::v-deep.el-form-item__content
height: 32px
line-height: 32px
......@@ -296,6 +311,7 @@ export default {
.delete-btn
margin-left: 12px
color: #F56C6C
cursor: pointer
.add-btn
height: 32px
line-height: 28px
......
src/views/ParamsModel/index.vue
......@@ -27,7 +27,7 @@
<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>
<span class="operate operate-delete" @click="handleDelete(row)">删除</span>
</div>
</st-table>
</div>
......@@ -55,7 +55,7 @@
<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>
<span class="operate operate-delete" @click="handleDelete(row)">删除</span>
</div>
</st-table>
</div>
......@@ -66,6 +66,7 @@
</template>
<script>
import Dialog from '@/helpers/dialog'
export default {
data() {
return {
......@@ -108,7 +109,16 @@ export default {
// this.getData()
},
methods: {
removeModel(row) {
async handleDelete(row) {
console.log(row)
const confirmDelete = await Dialog.confirm('提示', { message: '是否删除此日志？' })
if (!confirmDelete) return
const res = await this.getData()
if (res) {
Toast.success('操作成功')
this.getData()
}
},
handleClickRow(row, column, event) {
console.log(row)
......
vue.config.js
......@@ -28,24 +28,25 @@ module.exports = {
.rule('typescript')
.test(/\.tsx?$/)
.use('babel-loader')
.loader('babel-loader')
.end()
.loader('babel-loader')
.end()
.use('ts-loader')
.loader('ts-loader')
.options({
transpileOnly: true,
appendTsSuffixTo: [
'\\.vue$'
],
happyPackMode: false
})
.loader('ts-loader')
.options({
transpileOnly: true,
appendTsSuffixTo: [
'\\.vue$'
],
happyPackMode: false
})
.end()
.end()
config.module
.rule('thejs')
.test(/\.js$/)
.include
.add(path.resolve('src'))
.add(path.resolve('node_modules/element-ui/packages'))
.add(resolve('src'))
.add(resolve('node_modules/element-ui/packages'))
.end()
.use('babel-loader')
.loader('babel-loader')
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!