Skip to content

seeta-device / deviceManage

Go to a project
Commit 19a0d507 by 温丽香
Options

编辑表格修改

1 parent 09cbdc3f
Inline Side-by-side
Showing with 136 additions and 57 deletions
src/views/Account/index.vue
......@@ -211,6 +211,13 @@ export default {
</script>
<style lang="sass" scoped>
.search-fields
::v-deep input
&::placeholder
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
color:#999999
.el-date-editor
width: 240px
height: 32px
......
src/views/DataList/edit.vue
......@@ -7,7 +7,17 @@
<div class="content-header">
<st-button type="primary" @click="addTableData">
<i class="iconfont icon-tianjia"></i><span class="text">{{'插入数据'}}</span></st-button>
<div>
<div class="search-box">
<el-checkbox v-model="isBase64">Base64</el-checkbox>
<st-select
v-model="inputVal"
:options="orderOptions"
size="small"
class="select-order"
clearable
placeholder="序号"
>
</st-select>
<div class="search">
<input type="text" class="search-input" placeholder="请输入搜索内容" v-model="inputVal">
<i class="el-input__icon el-icon-search"></i>
......@@ -29,10 +39,11 @@
<input type="text" v-model="scope.row.field" @blur="handleBlur">
</template>
</el-table-column>
<el-table-column label="列1">
<el-table-column v-for="(column, index) in tableData[0].columns" :key="index" :label="`列${index + 1}`">
<template slot-scope="scope">
<div style="display: flex">
<el-select v-model="scope.row.type" placeholder="请选择" @blur="handleBlur">
<div class="column-box">
<input type="text" v-model="scope.row.columns[index].value" @blur="handleBlur">
<el-select v-model="scope.row.columns[index].type" placeholder="请选择">
<el-option
v-for="item in typeOptions"
:key="item.value"
......@@ -40,22 +51,6 @@
: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>
......@@ -87,6 +82,7 @@ export default {
data() {
return {
inputVal: '',
isBase64: false,
typeOptions: [{
value: 'base64',
label: 'base64'
......@@ -94,23 +90,35 @@ export default {
value: 'string',
label: 'string'
}],
tableOptions: [],
orderOptions: [],
tableData: [{
field: '1',
type: 'base64',
value: '122'
columns: [
{ type: 'base64', value: '122' },
{ type: 'string', value: '122' },
{ type: 'base64', value: '122' }
]
}, {
field: '2',
type: 'base64',
value: 'fein_fe'
columns: [
{ type: 'base64', value: '122' },
{ type: 'string', value: '122' },
{ type: 'base64', value: '122' }
]
}, {
field: '3',
type: 'base64',
value: '24字节'
columns: [
{ type: 'base64', value: '122' },
{ type: 'string', value: '122' },
{ type: 'base64', value: '122' }
]
}, {
field: '4',
type: 'string',
value: '上海市普陀区金沙江路'
columns: [
{ type: 'base64', value: '上海市普陀' },
{ type: 'string', value: '上海市普陀' },
{ type: 'base64', value: '上海市普陀' }
]
}],
currentRow: '',
total: 34
......@@ -121,24 +129,26 @@ export default {
},
methods: {
addTableData() {
this.tableData.push({ field: '', type: 'string', value: '' })
},
handleFocus() {
// console.log(111)
this.$emit('cell-click')
this.tableData.push({
field: '5',
columns: [
{ type: 'base64', value: '上海市普陀' },
{ type: 'string', value: '上海市普陀' },
{ type: 'base64', value: '上海市普陀' }
]
})
},
handleDelete(row) {
console.log(row)
},
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')[1].classList.add('write')
cell.getElementsByTagName('input')[0].focus()
}
},
rowClick(row, column, event) {
......@@ -158,6 +168,26 @@ export default {
<style lang="sass" scoped>
.page-content
.column-box
position: relative
::v-deep.el-select
position: absolute
width: 10px
right: 0
z-index: 100
.el-input__inner
text-align: right
padding: 0
width: 0px
.el-input__suffix
width: 15px
&:hover
width: 70px
.el-input__inner
width: 50px
::v-deep.el-icon-arrow-up
&::before
content: '\e78f'
::v-deep.el-table tbody tr:hover>td
background: #ecf5ff!important
::v-deep.el-table tbody tr.current-row input[type=text]
......@@ -204,6 +234,21 @@ export default {
display: flex
flex-direction: row
justify-content: space-between
.search-box
display: flex
::v-deep.el-checkbox
line-height: 32px
::v-deep input[type=checkbox]
position: absolute
::v-deep input
&::placeholder
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
color:#999999
.select-order
width: 240px!important
margin: 0 10px
.search
width: 240px
height: 32px
......
src/views/ParamsModel/add.vue
......@@ -22,7 +22,14 @@
<st-form-item
:label="'基础模板'+':'"
prop="name">
<st-input v-model="form.name"></st-input>
<st-select
v-model="form.name"
:options="modelOptions"
size="small"
class="contents"
clearable
>
</st-select>
</st-form-item>
<st-form-item class="textarea"
:label="'描述'+':'"
......@@ -103,6 +110,7 @@ export default {
rules: [],
file: '',
focusFlag: false,
modelOptions: [],
typeOptions: [{
value: 'number',
label: 'number'
......
src/views/ParamsModel/edit.vue
......@@ -22,7 +22,14 @@
<st-form-item
:label="'基础模板'+':'"
prop="name">
<st-input v-model="form.name"></st-input>
<st-select
v-model="form.name"
:options="modelOptions"
size="small"
class="contents"
clearable
>
</st-select>
</st-form-item>
<st-form-item class="textarea"
:label="'描述'+':'"
......@@ -55,7 +62,7 @@
</el-table-column>
<el-table-column label="类型">
<template slot-scope="scope">
<el-select v-model="scope.row.type" placeholder="请选择" @blur="handleBlur">
<el-select v-model="scope.row.type" placeholder="请选择" @change="handleChange(scope.row)">
<el-option
v-for="item in typeOptions"
:key="item.value"
......@@ -69,9 +76,9 @@
<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>
<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'">
<el-select v-model="scope.row.value" placeholder="请选择" @blur="handleBlur">
......@@ -125,7 +132,14 @@ export default {
value: 'blob',
label: 'blob'
}],
tableOptions: [],
tableOptions: [{
value: 'table1',
label: 'table1'
}, {
value: 'table2',
label: 'table2'
}],
modelOptions: [],
tableData: [{
field: 'name',
type: 'number',
......@@ -137,7 +151,11 @@ export default {
}, {
field: 'image',
type: 'blob',
value: '24字节'
value: ''
}, {
field: 'file',
type: 'blob',
value: ''
}, {
field: 'teat',
type: 'string',
......@@ -161,11 +179,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]
......@@ -174,19 +194,18 @@ export default {
addTableData() {
this.tableData.push({ field: '', type: 'string', value: '' })
},
handleFocus() {
// console.log(111)
this.$emit('cell-click')
},
handleDelete(row) {
console.log(row)
},
handleChange(row) {
row.file = ''
row.value = ''
},
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()
......
src/views/ParamsModel/index.vue
......@@ -95,8 +95,8 @@ 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: 'aaasdfasdfasdaa' },
{ number: 1, name: 'aa', type: 'aa', desc: '描述描述描述描述描述描述' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' }
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!