<template>
|
<view class="pages">
|
<view class="tools">
|
<view class="tools-item" @tap="init()">
|
{{isConnect?'已连接':'未连接'}}
|
</view>
|
</view>
|
<view class="tab-list-visual">
|
<view class="tab-list" >
|
<view class="tab-item" :class="thisTableIndex==tableIndex?'this':''" v-for="tableItem,tableIndex in tableList" :key="tableIndex" @click="changeTable(tableIndex, tableItem.name)">
|
{{tableItem.name}}
|
</view>
|
<view class="tab-item">
|
+
|
</view>
|
</view>
|
</view>
|
<view class="toolsbar">
|
<view class="tools-item" @tap="addData()">
|
增加
|
</view>
|
<view class="tools-item">
|
自定义SQL
|
</view>
|
</view>
|
<view class="table-content-visual">
|
<table class="table-content">
|
<td class="header" v-for="(cols,cIndex) in currentTableData[0]" :key="'cols-header-'+cIndex" @tap="tdTap(rIndex, cIndex, cols)">
|
<view class="">
|
{{cIndex=='usql_id'?'':cIndex}}
|
</view>
|
</td>
|
<tr v-for="(row,rIndex) in currentTableData" :key="'rows-'+rIndex">
|
<td :class="cIndex=='usql_id'?'id':'content'" v-for="(cols,cIndex) in row" :key="'cols-'+rIndex+'-'+cIndex" @tap="tdTap(rIndex, cIndex, cols)">
|
<view class="data">
|
<view :class="(rIndex==thisrIndex&&cIndex==thiscIndex&&cIndex!='usql_id')?'hied':'show'">
|
{{cols}}
|
</view>
|
<input :class="(rIndex==thisrIndex&&cIndex==thiscIndex&&cIndex!='usql_id')?'show':'hied'" type="text" v-model="thisValue" @blur="changeValue(rIndex, cIndex, thisValue)">
|
</view>
|
</td>
|
</tr>
|
</table>
|
</view>
|
</view>
|
</template>
|
<script>
|
import { usqlite } from '@/uni_modules/onemue-USQLite/js_sdk/usqlite.js'
|
export default {
|
data() {
|
return {
|
isConnect: false,
|
consoleText: '',
|
tableList: [],
|
thisTableIndex: 0,
|
thisTableName: '',
|
thisSqlModel: null,
|
thisrIndex: null,
|
thiscIndex: null,
|
thisValue: null,
|
currentTableData: [],
|
}
|
},
|
onShow() {
|
let self = this;
|
self.consoleText = usqlite;
|
},
|
methods:{
|
init(){
|
usqlite.connect(this.dbOptions, function(e, r){
|
if(e){
|
if(e.code == -1402){
|
self.isConnect = true;
|
self.getTable();
|
}else{
|
console.log('this is error');
|
console.log(e);
|
self.consoleText = e;
|
}
|
return;
|
}
|
self.getTable();
|
self.isConnect = true;
|
console.log('链接成功');
|
})
|
},
|
addData(){
|
this.currentTableData.push({})
|
},
|
tdTap(rows, cols, content){
|
console.log(rows, cols, content);
|
this.thiscIndex = cols;
|
this.thisrIndex = rows;
|
this.thisValue = content;
|
},
|
changeTable(index, name){
|
this.thisTableIndex = index;
|
this.thisTableName = name;
|
this.getTableData();
|
},
|
changeValue(rows, cols, content){
|
this.thiscIndex = null;
|
this.thisrIndex = null;
|
this.thisValue = null;
|
let option = {};
|
if(this.currentTableData[rows][cols]==content){
|
console.log('no change');
|
return;
|
}
|
let options = this.currentTableData[rows];
|
let str = '';
|
let self = this;
|
for(var key in options){
|
str += `${key} = '${options[key]}' AND `
|
}
|
str = str.replace(/AND $/, '');
|
option[cols] = content;
|
|
this.thisSqlModel.update(str, option, function(e, r){
|
if(e){
|
return;
|
}
|
self.getTableData();
|
});
|
},
|
getTable(){
|
let self = this;
|
plus.sqlite.selectSql({
|
name: this.dbOptions.name,
|
sql: "select * FROM sqlite_master where type='table'",
|
success(e) {
|
self.tableList = e;
|
if(!self.thisTableName){
|
self.thisTableName = e[self.thisTableIndex].name;
|
self.getTableData();
|
}
|
console.log(e);
|
},
|
fail(e) {
|
console.log(e)
|
}
|
})
|
},
|
getTableData(){
|
let self = this;
|
let thisTableName = self.thisTableName;
|
console.log(self.thisTableName);
|
let thisSqlModel = usqlite.model(thisTableName)
|
this.thisSqlModel = thisSqlModel;
|
this.thisSqlModel.find(function(err, r) {
|
if (err) {
|
console.log(err);
|
return;
|
}
|
|
self.currentTableData = r;
|
console.log(self.currentTableData);
|
})
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.tools{
|
display: flex;
|
position: sticky;
|
top: 0;
|
line-height: 2em;
|
height: 2em;
|
background: #FFFFFF;
|
}
|
.tab-list-visual{
|
position: sticky;
|
top: 2em;
|
line-height: 2em;
|
height: 2em;
|
background: #FFFFFF;
|
}
|
.tab-list-visual{
|
overflow: auto;
|
border: #333333 1px solid;
|
border-width: 1px 0 1px 0;
|
}
|
.tab-list{
|
display: flex;
|
}
|
.tab-list .tab-item{
|
padding: 0 4px;
|
line-height: 2em;
|
border-right: #eee 1px solid;
|
white-space: nowrap;
|
}
|
.tab-list .tab-item:last-child{
|
border-right: #eee 1px none;
|
}
|
.tab-list .tab-item.this{
|
background: #eee;
|
}
|
.toolsbar{
|
width: 100%;
|
border: #333 1px solid;
|
border-top: none;
|
display: flex;
|
}
|
.toolsbar .tools-item{
|
padding: 0 4px;
|
line-height: 2em;
|
border-right: #eee 1px solid;
|
white-space: nowrap;
|
}
|
.toolsbar .tools-item:last-child{
|
border-right: #eee 1px none;
|
}
|
.table-content-visual{
|
overflow: auto;
|
}
|
.table-content {border-collapse:collapse;}
|
.table-content td.content,
|
.table-content td.header{
|
padding: 2px;
|
border: #eee 1px solid;
|
margin: 0;
|
white-space: nowrap;
|
}
|
.table-content td.content:hover{
|
background: #eee;
|
}
|
.data .show{
|
display: block;
|
}
|
.data .hied{
|
display: none;
|
}
|
</style>
|
