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 { ...@@ -211,6 +211,13 @@ export default {
</script> </script>
<style lang="sass" scoped> <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 .el-date-editor
width: 240px width: 240px
height: 32px height: 32px
......
src/views/DataList/edit.vue
...@@ -7,7 +7,17 @@ ...@@ -7,7 +7,17 @@
<div class="content-header"> <div class="content-header">
<st-button type="primary" @click="addTableData"> <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 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"> <div class="search">
<input type="text" class="search-input" placeholder="请输入搜索内容" v-model="inputVal"> <input type="text" class="search-input" placeholder="请输入搜索内容" v-model="inputVal">
<i class="el-input__icon el-icon-search"></i> <i class="el-input__icon el-icon-search"></i>
...@@ -29,10 +39,11 @@ ...@@ -29,10 +39,11 @@
<input type="text" v-model="scope.row.field" @blur="handleBlur"> <input type="text" v-model="scope.row.field" @blur="handleBlur">
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<div style="display: flex"> <div class="column-box">
<el-select v-model="scope.row.type" placeholder="请选择" @blur="handleBlur"> <input type="text" v-model="scope.row.columns[index].value" @blur="handleBlur">
<el-select v-model="scope.row.columns[index].type" placeholder="请选择">
<el-option <el-option
v-for="item in typeOptions" v-for="item in typeOptions"
:key="item.value" :key="item.value"
...@@ -40,22 +51,6 @@ ...@@ -40,22 +51,6 @@
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> </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> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -87,6 +82,7 @@ export default { ...@@ -87,6 +82,7 @@ export default {
data() { data() {
return { return {
inputVal: '', inputVal: '',
isBase64: false,
typeOptions: [{ typeOptions: [{
value: 'base64', value: 'base64',
label: 'base64' label: 'base64'
...@@ -94,23 +90,35 @@ export default { ...@@ -94,23 +90,35 @@ export default {
value: 'string', value: 'string',
label: 'string' label: 'string'
}], }],
tableOptions: [], orderOptions: [],
tableData: [{ tableData: [{
field: '1', field: '1',
type: 'base64', columns: [
value: '122' { type: 'base64', value: '122' },
{ type: 'string', value: '122' },
{ type: 'base64', value: '122' }
]
}, { }, {
field: '2', field: '2',
type: 'base64', columns: [
value: 'fein_fe' { type: 'base64', value: '122' },
{ type: 'string', value: '122' },
{ type: 'base64', value: '122' }
]
}, { }, {
field: '3', field: '3',
type: 'base64', columns: [
value: '24字节' { type: 'base64', value: '122' },
{ type: 'string', value: '122' },
{ type: 'base64', value: '122' }
]
}, { }, {
field: '4', field: '4',
type: 'string', columns: [
value: '上海市普陀区金沙江路' { type: 'base64', value: '上海市普陀' },
{ type: 'string', value: '上海市普陀' },
{ type: 'base64', value: '上海市普陀' }
]
}], }],
currentRow: '', currentRow: '',
total: 34 total: 34
...@@ -121,24 +129,26 @@ export default { ...@@ -121,24 +129,26 @@ export default {
}, },
methods: { methods: {
addTableData() { addTableData() {
this.tableData.push({ field: '', type: 'string', value: '' }) this.tableData.push({
}, field: '5',
handleFocus() { columns: [
// console.log(111) { type: 'base64', value: '上海市普陀' },
this.$emit('cell-click') { type: 'string', value: '上海市普陀' },
{ type: 'base64', value: '上海市普陀' }
]
})
}, },
handleDelete(row) { handleDelete(row) {
console.log(row) console.log(row)
}, },
handleBlur(event) { handleBlur(event) {
this.setCurrent() this.setCurrent()
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) {
// 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')[1].classList.add('write') cell.getElementsByTagName('input')[0].focus()
} }
}, },
rowClick(row, column, event) { rowClick(row, column, event) {
...@@ -158,6 +168,26 @@ export default { ...@@ -158,6 +168,26 @@ export default {
<style lang="sass" scoped> <style lang="sass" scoped>
.page-content .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 ::v-deep.el-table tbody tr:hover>td
background: #ecf5ff!important background: #ecf5ff!important
::v-deep.el-table tbody tr.current-row input[type=text] ::v-deep.el-table tbody tr.current-row input[type=text]
...@@ -204,6 +234,21 @@ export default { ...@@ -204,6 +234,21 @@ export default {
display: flex display: flex
flex-direction: row flex-direction: row
justify-content: space-between 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 .search
width: 240px width: 240px
height: 32px height: 32px
......
src/views/ParamsModel/add.vue
...@@ -22,7 +22,14 @@ ...@@ -22,7 +22,14 @@
<st-form-item <st-form-item
:label="'基础模板'+':'" :label="'基础模板'+':'"
prop="name"> 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>
<st-form-item class="textarea" <st-form-item class="textarea"
:label="'描述'+':'" :label="'描述'+':'"
...@@ -103,6 +110,7 @@ export default { ...@@ -103,6 +110,7 @@ export default {
rules: [], rules: [],
file: '', file: '',
focusFlag: false, focusFlag: false,
modelOptions: [],
typeOptions: [{ typeOptions: [{
value: 'number', value: 'number',
label: 'number' label: 'number'
......
src/views/ParamsModel/edit.vue
...@@ -22,7 +22,14 @@ ...@@ -22,7 +22,14 @@
<st-form-item <st-form-item
:label="'基础模板'+':'" :label="'基础模板'+':'"
prop="name"> 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>
<st-form-item class="textarea" <st-form-item class="textarea"
:label="'描述'+':'" :label="'描述'+':'"
...@@ -55,7 +62,7 @@ ...@@ -55,7 +62,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="请选择" @blur="handleBlur"> <el-select v-model="scope.row.type" placeholder="请选择" @change="handleChange(scope.row)">
<el-option <el-option
v-for="item in typeOptions" v-for="item in typeOptions"
:key="item.value" :key="item.value"
...@@ -69,9 +76,9 @@ ...@@ -69,9 +76,9 @@
<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">
<div class="btn-box" v-if="scope.row.type === 'blob'"> <div class="btn-box" v-if="scope.row.type === 'blob'">
<span class="upload-btn" v-if="!file">Select File</span> <span class="upload-btn" v-if="!scope.row.value">Select File</span>
<input type="file" @blur="handleBlur" @change="handleUpload" class="input-btn" v-if="!file"> <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="file">{{file.name}}<i class="iconfont icon-guanbi" @click="deleteFile"></i></span> <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>
<div v-if="scope.row.type === 'table'"> <div v-if="scope.row.type === 'table'">
<el-select v-model="scope.row.value" placeholder="请选择" @blur="handleBlur"> <el-select v-model="scope.row.value" placeholder="请选择" @blur="handleBlur">
...@@ -125,7 +132,14 @@ export default { ...@@ -125,7 +132,14 @@ export default {
value: 'blob', value: 'blob',
label: 'blob' label: 'blob'
}], }],
tableOptions: [], tableOptions: [{
value: 'table1',
label: 'table1'
}, {
value: 'table2',
label: 'table2'
}],
modelOptions: [],
tableData: [{ tableData: [{
field: 'name', field: 'name',
type: 'number', type: 'number',
...@@ -137,7 +151,11 @@ export default { ...@@ -137,7 +151,11 @@ export default {
}, { }, {
field: 'image', field: 'image',
type: 'blob', type: 'blob',
value: '24字节' value: ''
}, {
field: 'file',
type: 'blob',
value: ''
}, { }, {
field: 'teat', field: 'teat',
type: 'string', type: 'string',
...@@ -161,11 +179,13 @@ export default { ...@@ -161,11 +179,13 @@ export default {
methods: { methods: {
cancel() {}, cancel() {},
save() {}, save() {},
handleUpload(event) { handleUpload(event, row) {
this.file = event.target.files[0] row.file = event.target.files[0]
row.value = event.target.files[0].name
}, },
deleteFile() { deleteFile(row) {
this.file = '' row.file = ''
row.value = ''
}, },
setFlexHeight() { setFlexHeight() {
const ele = document.getElementsByClassName('flex-item') && document.getElementsByClassName('flex-item')[0] const ele = document.getElementsByClassName('flex-item') && document.getElementsByClassName('flex-item')[0]
...@@ -174,19 +194,18 @@ export default { ...@@ -174,19 +194,18 @@ export default {
addTableData() { addTableData() {
this.tableData.push({ field: '', type: 'string', value: '' }) this.tableData.push({ field: '', type: 'string', value: '' })
}, },
handleFocus() {
// console.log(111)
this.$emit('cell-click')
},
handleDelete(row) { handleDelete(row) {
console.log(row) console.log(row)
}, },
handleChange(row) {
row.file = ''
row.value = ''
},
handleBlur(event) { handleBlur(event) {
this.setCurrent() this.setCurrent()
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) {
// 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()
......
src/views/ParamsModel/index.vue
...@@ -95,8 +95,8 @@ export default { ...@@ -95,8 +95,8 @@ export default {
}, },
], ],
tokenList: [ tokenList: [
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' }, { number: 1, name: 'aa', type: 'aa', desc: 'aaasdfasdfasdaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' }, { 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' }, { 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!