Skip to content

seeta-device / deviceManage

Go to a project
Commit 5a70ba20 by 温丽香
Options

参数模板修改完成

1 parent 092017ee
Pipeline #4936 passed
in 2 minutes 14 seconds
Expand all
Inline Side-by-side
Showing with 129 additions and 31 deletions
src/views/DataList/edit.vue
...@@ -98,7 +98,7 @@ export default { ...@@ -98,7 +98,7 @@ export default {
content: '', content: '',
isBase64: false, isBase64: false,
loadingStatus: false, loadingStatus: false,
totalColumns: 0, totalColumns: Number(this.$route.query.columns),
typeOptions: [{ typeOptions: [{
value: 'base64', value: 'base64',
label: 'base64' label: 'base64'
...@@ -142,7 +142,6 @@ export default { ...@@ -142,7 +142,6 @@ export default {
const str = decode.length > 64 ? 'blob' : isASCII(decode) ? decode : 'blob' const str = decode.length > 64 ? 'blob' : isASCII(decode) ? decode : 'blob'
return str return str
}) })
this.totalColumns = item.binary.length
return item return item
}) })
this.total = res.data.table.total this.total = res.data.table.total
......
src/views/DataList/index.vue
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
}" }"
:outerLoading="loadingStatus"> :outerLoading="loadingStatus">
<div slot="operate" slot-scope="row"> <div slot="operate" slot-scope="row">
<span class="operate" @click="$router.push({ path: '/data/edit', query: { name: row.name } })">编辑</span> <span class="operate" @click="$router.push({ path: '/data/edit', query: { name: row.name, columns: row.columns } })">编辑</span>
<span class="operate operate-delete" @click="handleDelete(row)">删除</span> <span class="operate operate-delete" @click="handleDelete(row)">删除</span>
</div> </div>
</st-table> </st-table>
......
src/views/ParamsModel/add.vue
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
clearable clearable
> >
</st-select> --> </st-select> -->
<el-select v-model="form.base" placeholder="请选择" style="width: 400px;height: 32px;line-height: 32px"> <el-select v-model="form.base" placeholder="请选择" style="width: 400px;height: 32px;line-height: 32px" @change="handleSelectBase">
<el-option <el-option
v-for="item in baseOptions" v-for="item in baseOptions"
:key="item.name" :key="item.name"
...@@ -65,12 +65,12 @@ ...@@ -65,12 +65,12 @@
style="width: 100%"> style="width: 100%">
<el-table-column label="字段"> <el-table-column label="字段">
<template slot-scope="scope"> <template slot-scope="scope">
<input type="text" v-model="scope.row.field" @blur="handleBlur" placeholder="请输入"> <input type="text" v-model="scope.row.field" @blur="handleBlur" placeholder="请输入" :disabled="Boolean(scope.row.level)">
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="类型"> <el-table-column label="类型">
<template slot-scope="scope"> <template slot-scope="scope">
<pack-select v-model="scope.row.type" placeholder="请选择" @blur="handleBlur" @visible-change="handleVisibleChange" @change="handleChange(scope.row)"> <pack-select v-model="scope.row.type" placeholder="请选择" @blur="handleBlur" @visible-change="handleVisibleChange" @change="handleChange(scope.row)" :disabled="Boolean(scope.row.level)">
<el-option <el-option
v-for="item in typeOptions" v-for="item in typeOptions"
:key="item.value" :key="item.value"
...@@ -87,8 +87,8 @@ ...@@ -87,8 +87,8 @@
<span class="upload-btn" v-if="!scope.row.value">Select File</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"> <input type="file" @blur="handleBlur" @change="(event) => handleUpload(event, scope.row)" class="input-btn" v-if="!scope.row.value">
<span v-if="scope.row.value"> <span v-if="scope.row.value">
<span style="float: left;margin-right: 10px">{{calculateByte(scope.row.value)}}字节</span> <span style="float: left;margin-right: 10px" @click="scope.row.value = ''">{{calculateByte(scope.row.value)}}字节</span>
<el-image style="width: 42px; height: 28px;overflow: visible" :src="scope.row.value" fit="fit"> <el-image style="width: 42px; height: 28px;overflow: visible" :src="scope.row.value" fit="fit" :preview-src-list="[scope.row.value]">
<div slot="error" style="width: 80px; height: 28px;overflow: visible">(不可预览)</div> <div slot="error" style="width: 80px; height: 28px;overflow: visible">(不可预览)</div>
</el-image> </el-image>
</span> </span>
...@@ -107,7 +107,9 @@ ...@@ -107,7 +107,9 @@
</el-table-column> </el-table-column>
<el-table-column label="操作"> <el-table-column label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<span @click="handleDelete(scope.$index)" class="delete-btn">删除</span> <span @click="handleHidden(scope.row)" class="delete-btn" style="color: #E6A23C" v-if="scope.row.level">隐藏</span>
<span @click="handleReturnBack(scope.row, scope.$index)" style="color: #409EFF" class="delete-btn" v-if="scope.row.level && scope.row.value != originalData[scope.$index].value">撤回</span>
<span @click="handleDelete(scope.$index)" class="delete-btn" v-if="!scope.row.level">删除</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -126,7 +128,7 @@ ...@@ -126,7 +128,7 @@
</template> </template>
<script> <script>
import { createParameter, getTable, getParameter } from '@/axios' import { createParameter, getTable, getParameter, detailParameter } from '@/axios'
import { fileToBase64 } from '@/utils/typeConversion' import { fileToBase64 } from '@/utils/typeConversion'
import { calculateByte } from '@/utils/system' import { calculateByte } from '@/utils/system'
import Dialog from '@/helpers/dialog' import Dialog from '@/helpers/dialog'
...@@ -151,6 +153,7 @@ export default { ...@@ -151,6 +153,7 @@ export default {
tableOptions: [], tableOptions: [],
baseOptions: [], baseOptions: [],
tableData: [], tableData: [],
originalData: [],
flexHeight: 0, flexHeight: 0,
currentRow: '' currentRow: ''
} }
...@@ -183,8 +186,36 @@ export default { ...@@ -183,8 +186,36 @@ export default {
this.baseOptions = res.data.parameters.datas this.baseOptions = res.data.parameters.datas
} }
}, },
async handleSelectBase(value) {
const res = await detailParameter({ name: value })
if (res && res.data && res.data.code === 0) {
this.tableData = []
const binaryObj = res.data.parameters.binary
const scalarsObj = res.data.parameters.scalars
const tableObj = res.data.parameters.table
for (const key in binaryObj) {
this.tableData.push({ field: key, type: 'blob', value: binaryObj[key], level: 1 })
}
for (const key in scalarsObj) {
this.tableData.push({ field: key, type: typeof scalarsObj[key], value: scalarsObj[key], level: 1 })
}
for (const key in tableObj) {
this.tableData.push({ field: key, type: 'table', value: tableObj[key], level: 1 })
}
this.originalData = JSON.parse(JSON.stringify(this.tableData))
}
},
async save() { async save() {
const tableData = this.tableData.filter(item => item.field && item.value) const tableDataTemp = this.tableData.filter(item => item.field !== '' && item.type !== '' && item.value !== '')
// 最终提交的数据字段名不重复
const temp = []
const tableData = []
for (let i = 0; i < tableDataTemp.length; i++) {
if (!temp.includes(tableDataTemp[i].field)) {
temp.push(tableDataTemp[i].field)
tableData.push(tableDataTemp[i])
}
}
const scalarsArr = tableData.filter(item => item.type === 'string' || item.type === 'number') const scalarsArr = tableData.filter(item => item.type === 'string' || item.type === 'number')
const binaryArr = tableData.filter(item => item.type === 'blob') const binaryArr = tableData.filter(item => item.type === 'blob')
const tableArr = tableData.filter(item => item.type === 'table') const tableArr = tableData.filter(item => item.type === 'table')
...@@ -192,7 +223,7 @@ export default { ...@@ -192,7 +223,7 @@ export default {
const binaryObj = {} const binaryObj = {}
const tableObj = {} const tableObj = {}
for (let i = 0; i < scalarsArr.length; i++) { for (let i = 0; i < scalarsArr.length; i++) {
scalarsObj[scalarsArr[i].field] = scalarsArr[i].value scalarsObj[scalarsArr[i].field] = scalarsArr[i].value === null ? null : (scalarsArr[i].type === 'number' ? Number(scalarsArr[i].value) : String(scalarsArr[i].value))
} }
for (let j = 0; j < binaryArr.length; j++) { for (let j = 0; j < binaryArr.length; j++) {
binaryObj[binaryArr[j].field] = binaryArr[j].value binaryObj[binaryArr[j].field] = binaryArr[j].value
...@@ -210,11 +241,13 @@ export default { ...@@ -210,11 +241,13 @@ export default {
}) })
if (res && res.data && res.data.code === 0) { if (res && res.data && res.data.code === 0) {
Toast.success('操作成功') Toast.success('操作成功')
this.$router.push({ path: '/params' }) // this.$router.push({ path: '/params' })
} }
}, },
cancel() { cancel() {
this.$router.push({ path: '/params' }) // this.$router.push({ path: '/params' })
this.form = {}
this.tableData = []
}, },
async handleUpload(event, row) { async handleUpload(event, row) {
row.value = await fileToBase64(event.target.files[0]) row.value = await fileToBase64(event.target.files[0])
...@@ -222,8 +255,17 @@ export default { ...@@ -222,8 +255,17 @@ export default {
insertTableData() { insertTableData() {
this.tableData.push({ field: '', type: '', value: '' }) this.tableData.push({ field: '', type: '', value: '' })
}, },
handleReturnBack(row, index) {
row.value = JSON.parse(JSON.stringify(this.originalData[index])).value
this.$forceUpdate()
},
handleHidden(row) {
row.value = null
this.$forceUpdate()
},
handleDelete(index) { handleDelete(index) {
this.tableData.splice(index, 1) this.tableData.splice(index, 1)
this.$forceUpdate()
}, },
setFlexHeight() { setFlexHeight() {
const ele = document.getElementsByClassName('flex-item') && document.getElementsByClassName('flex-item')[0] const ele = document.getElementsByClassName('flex-item') && document.getElementsByClassName('flex-item')[0]
...@@ -242,6 +284,7 @@ export default { ...@@ -242,6 +284,7 @@ export default {
event.target && event.target.classList && event.target.classList.remove('write') event.target && event.target.classList && event.target.classList.remove('write')
}, },
cellClick(row, column, cell, event) { cellClick(row, column, cell, event) {
if (row.level && (column.label === '字段' || column.label === '类型')) return
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()
......
src/views/ParamsModel/detail.vue
...@@ -26,20 +26,22 @@ ...@@ -26,20 +26,22 @@
:options="definitions" :options="definitions"
:pagination="false" :pagination="false"
:data="{ :data="{
list: tokenList, list: tableData,
total: total, total: total,
}" }"
:outerLoading="loadingStatus"> :outerLoading="loadingStatus">
<div slot="value" slot-scope="row"> <div slot="value" slot-scope="row">
<span v-if="row.type === 'number' || row.type === 'string'">{{row.value}}</span> <span v-if="row.value === null" class="cell-null">null</span>
<span v-if="row.type === 'blob'" style="line-height: 28px"> <span v-else>
<!-- TODO --> <span v-if="row.type === 'number' || row.type === 'string'">{{row.value}}</span>
<span style="float: left;margin-right: 10px">{{parseInt(calculateByte(row.value))}}&nbsp;字节</span> <span v-if="row.type === 'blob'" style="line-height: 28px">
<el-image style="width: 42px; height: 28px;overflow: visible" :src="row.value" fit="fit"> <span style="float: left;margin-right: 10px">{{parseInt(calculateByte(row.value))}}&nbsp;字节</span>
<div slot="error" style="width: 80px; height: 28px;overflow: visible">(不可预览)</div> <el-image style="width: 42px; height: 28px;overflow: visible" :src="row.value" fit="fit" :preview-src-list="[row.value]">
</el-image> <div slot="error" style="width: 80px; height: 28px;overflow: visible">(不可预览)</div>
</el-image>
</span>
<span v-if="row.type === 'table'" style="color: #409EFF; cursor: pointer" @click="handleToTableDetail(row.value)">{{row.value}}</span>
</span> </span>
<span v-if="row.type === 'table'" style="color: #409EFF; cursor: pointer" @click="$router.push({ path: '/data/edit', query: { name: row.value } })">{{row.value}}</span>
</div> </div>
</st-table> </st-table>
</st-form-item> </st-form-item>
...@@ -49,7 +51,7 @@ ...@@ -49,7 +51,7 @@
</template> </template>
<script> <script>
import { detailParameter } from '@/axios' import { detailParameter, getTable } from '@/axios'
import { calculateByte } from '@/utils/system' import { calculateByte } from '@/utils/system'
export default { export default {
data() { data() {
...@@ -71,7 +73,8 @@ export default { ...@@ -71,7 +73,8 @@ export default {
slotName: 'value' slotName: 'value'
} }
], ],
tokenList: [], baseData: [],
tableData: [],
total: 0 total: 0
} }
}, },
...@@ -79,24 +82,69 @@ export default { ...@@ -79,24 +82,69 @@ export default {
this.loadingStatus = true this.loadingStatus = true
const res = await detailParameter({ name: this.$route.query.name }) const res = await detailParameter({ name: this.$route.query.name })
if (res && res.data && res.data.code === 0) { if (res && res.data && res.data.code === 0) {
let binaryObj = {}
let scalarsObj = {}
let tableObj = {}
let binaryObj1 = {}
let scalarsObj1 = {}
let tableObj1 = {}
if (res.data.base) {
const base = await detailParameter({ name: res.data.base })
if (base && base.data && base.data.code === 0) {
binaryObj1 = base.data.parameters.binary
scalarsObj1 = base.data.parameters.scalars
tableObj1 = base.data.parameters.table
this.baseObj = Object.assign(JSON.parse(JSON.stringify(binaryObj1)), JSON.parse(JSON.stringify(scalarsObj1)), JSON.parse(JSON.stringify(tableObj1)))
for (const key in binaryObj1) {
this.baseData.push({ field: key, type: 'blob', value: binaryObj1[key], level: 1 })
}
for (const key in scalarsObj1) {
this.baseData.push({ field: key, type: typeof scalarsObj1[key], value: scalarsObj1[key], level: 1 })
}
for (const key in tableObj1) {
this.baseData.push({ field: key, type: 'table', value: tableObj1[key], level: 1 })
}
}
}
this.form = res.data this.form = res.data
const binaryObj = res.data.parameters.binary binaryObj = Object.assign(JSON.parse(JSON.stringify(binaryObj1)), res.data.parameters.binary)
const scalarsObj = res.data.parameters.scalars scalarsObj = Object.assign(JSON.parse(JSON.stringify(scalarsObj1)), res.data.parameters.scalars)
const tableObj = res.data.parameters.table tableObj = Object.assign(JSON.parse(JSON.stringify(tableObj1)), res.data.parameters.table)
const frontData = []
const endData = []
for (const key in binaryObj) { for (const key in binaryObj) {
this.tokenList.push({ field: key, type: 'blob', value: binaryObj[key] }) if (binaryObj1[key]) {
frontData.push({ field: key, type: 'blob', value: binaryObj[key], level: 1 })
} else {
endData.push({ field: key, type: 'blob', value: binaryObj[key] })
}
} }
for (const key in scalarsObj) { for (const key in scalarsObj) {
this.tokenList.push({ field: key, type: typeof scalarsObj[key], value: scalarsObj[key] }) if (scalarsObj1[key]) {
frontData.push({ field: key, type: typeof scalarsObj[key], value: scalarsObj[key], level: 1 })
} else {
endData.push({ field: key, type: typeof scalarsObj[key], value: scalarsObj[key] })
}
} }
for (const key in tableObj) { for (const key in tableObj) {
this.tokenList.push({ field: key, type: 'table', value: tableObj[key] }) if (tableObj1[key]) {
frontData.push({ field: key, type: 'table', value: tableObj[key], level: 1 })
} else {
endData.push({ field: key, type: 'table', value: tableObj[key] })
}
} }
this.tableData = frontData.concat(endData)
} }
this.loadingStatus = false this.loadingStatus = false
}, },
methods: { methods: {
calculateByte: base64 => calculateByte(base64), calculateByte: base64 => calculateByte(base64),
async handleToTableDetail(name) {
const res = await getTable({ pages: 0, pagesize: 1, name: name })
if (res && res.data && res.data.code === 0) {
this.$router.push({ path: '/data/edit', query: { name: name, columns: res.data.data && res.data.data.tables.length && res.data.data.tables[0].columns } })
}
}
} }
} }
</script> </script>
...@@ -121,4 +169,12 @@ export default { ...@@ -121,4 +169,12 @@ export default {
::v-deep .cell ::v-deep .cell
height: 28px height: 28px
line-height: 28px!important line-height: 28px!important
.cell-null
display: inline-block
height: 26px
line-height: 26px
padding: 0 10px
color: #fff
background: #ccc
border-radius: 4px
</style> </style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!