数据列表修改

.eslintrc.js

@@ -56,7 +56,7 @@ module.exports = {
 
     'no-unneeded-ternary': 2, // 禁止不必要的嵌套
 
-    'no-nested-ternary': 2, // 禁用嵌套的三目运算符
+    'no-nested-ternary': 0, // 禁用嵌套的三目运算符
 
     'no-const-assign': 2, // 禁止修改 const 变量
 

src/axios.js

@@ -17,7 +17,9 @@ 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)
+export const addData = data => axios(POST, FRONT + TABLE + '/data/insert', data)
+export const getData = data => axios(GET, FRONT + TABLE + '/data/query_list', data)
+export const deleteData = data => axios(POST, FRONT + TABLE + '/data/delete', data)
 
 const APPID = '/appid'
 export const getApp = data => axios(GET, FRONT + APPID + '/query_list', data)

src/utils/typeConversion.js

@@ -36,8 +36,9 @@ export const stringToBase64 = str => {
 export const base64ToString = base64 => {
   // 对base64转编码
   const decode = atob(base64)
+  const temp = decode.replace(/%/g, '%25')
   // 编码转字符串
-  const str = decodeURI(decode)
+  const str = decodeURI(temp)
   return str
 }
 

src/views/Account/index.vue

@@ -44,7 +44,8 @@
             :data="{
               list: tokenList,
               total: total,
-            }">
+            }"
+            :outerLoading="loadingStatus">
             <div slot="operate" slot-scope="row">
               <span class="operate" @click="handleEdit(row)">编辑</span>
               <span class="operate operate-delete" @click="handleDelete(row)">删除</span>

src/views/Apply/index.vue

@@ -12,15 +12,16 @@
             :data="{
               list: tokenList,
               total: total,
-            }">
+            }"
+            :outerLoading="loadingStatus">
             <div slot="secret" slot-scope="row">
-              <span v-if="showSecret === row.number" class="secret-box">{{row.desc}}</span>
+              <span v-if="showSecret === row.appid" class="secret-box">{{row.secret}}</span>
               <span v-else class="secret-box">********</span>
-              <i class="el-icon-view eye-btn" @mousedown="showSecret = row.number" @mouseup="showSecret = ''"></i>
+              <i class="el-icon-view eye-btn" @mousedown="showSecret = row.appid" @mouseup="showSecret = ''"></i>
             </div>
             <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" v-if="row.number === 1" @click="setHostApp(row)">设置为主应用</span>
+              <span class="operate" v-else @click="setHostApp(row)">取消设置为主应用</span>
               <span class="operate operate-delete" @click="handleDelete(row)">删除</span>
             </div>
           </st-table>
@@ -31,16 +32,17 @@
 </template>
 
 <script>
-import { getApp } from '@/axios'
+import { getApp, deleteApp, setApp } from '@/axios'
 import Dialog from '@/helpers/dialog'
 export default {
   data() {
     return {
       showSecret: '',
+      loadingStatus: false,
       definitions: [
         {
           label: 'APPID',
-          render: 'number'
+          render: 'appid'
         },
         {
           label: 'Secret',
@@ -49,15 +51,15 @@ export default {
         },
         {
           label: '创建时间',
-          render: 'type'
+          render: 'create_date'
         },
         {
           label: '设备数量',
-          render: 'desc'
+          render: 'devices'
         },
         {
           label: '说明',
-          render: 'desc'
+          render: 'description'
         },
         {
           label: '操作',
@@ -67,7 +69,7 @@ export default {
         },
       ],
       tokenList: [],
-      total: 34
+      total: 0
     }
   },
   mounted() {
@@ -75,24 +77,31 @@ export default {
   },
   methods: {
     async getData() {
+      this.loadingStatus = true
       const res = await getApp({ pages: 0, pagesize: 10 })
       if (res && res.data && res.data.code === 0) {
         this.tokenList = res.data.data.apps
         this.total = res.data.data.total
       }
+      this.loadingStatus = false
     },
     async handleDelete(row) {
-      console.log(row)
       const confirmDelete = await Dialog.confirm('提示', { message: '是否删除此应用？' })
       if (!confirmDelete) return
 
-      const res = await this.getData()
-      if (res) {
+      const res = await deleteApp({ appid: row.appid })
+      if (res && res.data && res.data.code === 0) {
+        Toast.success('操作成功')
+        this.getData()
+      }
+    },
+    async setHostApp(row) {
+      const res = await setApp({ appid: row.appid, mainapp: 1, username: 'test' })
+      if (res && res.data && res.data.code === 0) {
         Toast.success('操作成功')
         this.getData()
       }
     },
-    setHostApp() {},
     cancelHostApp() {}
   }
 }

src/views/DataList/edit.vue

@@ -28,22 +28,23 @@
         <div class="list-content">
           <el-table :max-height="flexHeight"
             ref="singleTable"
-            :data="tableData"
+            :data="tableData.concat(insertData)"
             highlight-current-row
             @current-change="currentChange"
             @row-click="rowClick"
             @cell-click="cellClick"
-            style="width: 100%">
+            style="width: 100%"
+            v-loading="loadingStatus">
             <el-table-column label="序号" width="100px">
               <template slot-scope="scope">
-                <span style="margin-left: 12px">{{scope.row.field}}</span>
+                <span style="margin-left: 12px">{{scope.row.id}}</span>
               </template>
             </el-table-column>
-            <el-table-column v-for="(column, index) in tableData[0].columns" :key="index" :label="`列${index + 1}`" :min-width="index + 1 === columnIndex ? '220px' : ''">
+            <el-table-column v-for="index of totalColumns" :key="index" :label="`列${index}`" :min-width="index === columnIndex ? '220px' : ''">
               <template slot-scope="scope">
-                <!-- <div class="column-box"> -->
                 <div style="display: flex">
-                  <pack-select v-model="scope.row.columns[index].type" @blur="handleBlur" @change="value => handleTypeChange(value, scope.row.columns[index])" placeholder="请选择" class="none-display" style="margin-right: 10px">
+                  <span type="text" v-if="scope.row.id !== ''" class="cell-span">{{scope.row.binary[index - 1]}}</span>
+                  <pack-select v-if="scope.row.id === ''" v-model="scope.row.binary[index - 1].type" @blur="handleBlur" @change="value => handleTypeChange(value, scope.row.binary[index - 1])" placeholder="请选择" class="none-display" style="margin-right: 10px">
                     <el-option
                       v-for="item in typeOptions"
                       :key="item.value"
@@ -51,24 +52,16 @@
                       :value="item.value">
                     </el-option>
                   </pack-select>
-                  <input type="text" v-model="scope.row.columns[index].value" @blur="handleBlur" placeholder="请输入" class="cell-value"
-                  :style="{border: scope.row.columns[index].type === 'base64' && !base64Pattern.test(scope.row.columns[index].value) ? '1px solid #F56C6C' : 'none'}"
-                  @input="event => checkBase64(event.target, scope.row.columns[index])"
-                  @focus="event => handleFocus(event.target, scope.row.columns[index])">
-                  <!-- <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> -->
+                  <input type="text" v-if="scope.row.id === ''" v-model="scope.row.binary[index - 1].value" @blur="handleBlur" placeholder="请输入" class="cell-value"
+                  :style="{border: scope.row.binary[index - 1].type === 'base64' && !base64Pattern.test(scope.row.binary[index - 1]) ? '1px solid #F56C6C' : 'none'}"
+                  @input="event => checkBase64(event.target, scope.row.binary[index - 1])"
+                  @focus="event => handleFocus(event.target, scope.row.binary[index - 1])">
                 </div>
               </template>
             </el-table-column>
             <el-table-column label="操作">
               <template slot-scope="scope">
-                <span @click="handleDelete(scope.row)" class="delete-btn">删除</span>
+                <span @click="handleDelete(scope.row, scope.$index)" class="delete-btn">删除</span>
               </template>
             </el-table-column>
           </el-table>
@@ -77,30 +70,33 @@
               @size-change="handleSizeChange"
               @current-change="handlePageChange"
               :current-page="1"
-              :page-sizes="[100, 200, 300, 400]"
-              :page-size="100"
+              :page-sizes="[10, 20, 50, 100]"
+              :page-size="10"
               layout="total, prev, pager, next, sizes, jumper"
-              :total="400">
+              :total="total">
             </el-pagination>
           </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>
+        <st-button @click="cancel" :disabled="!insertData.length"><span class="text">{{'取消'}}</span></st-button>
+        <st-button type="primary" @click="save" :disabled="!insertData.length"><span class="text">{{'保存'}}</span></st-button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { insertTable } from '@/axios'
+import { addData, getData, deleteData } from '@/axios'
 import Dialog from '@/helpers/dialog'
+import { base64ToString, stringToBase64, isASCII } from '@/utils/typeConversion'
 export default {
   data() {
     return {
       inputVal: '',
       isBase64: false,
+      loadingStatus: false,
+      totalColumns: Number(this.$route.query.columns),
       typeOptions: [{
         value: 'base64',
         label: 'base64'
@@ -109,52 +105,11 @@ export default {
         label: 'string'
       }],
       orderOptions: [],
-      tableData: [{
-        field: '1',
-        columns: [
-          { type: 'base64', value: '1222' },
-          { type: 'string', value: '1222' },
-          { type: 'base64', value: '1222' },
-          { type: 'string', value: '1222' },
-          { type: 'base64', value: '1222' },
-          { type: 'string', value: '1222' },
-          { type: 'base64', value: '1222' }
-        ]
-      }, {
-        field: '2',
-        columns: [
-          { type: 'base64', value: '1222' },
-          { type: 'string', value: '1222' },
-          { type: 'base64', value: '1222' },
-          { type: 'string', value: '1222' },
-          { type: 'base64', value: '1222' },
-          { type: 'string', value: '1222' },
-          { type: 'base64', value: '1222' }
-        ]
-      }, {
-        field: '3',
-        columns: [
-          { type: 'base64', value: '1222' },
-          { type: 'string', value: '1222' },
-          { type: 'base64', value: '1222' },
-          { type: 'string', value: '1222' },
-          { type: 'base64', value: '1222' },
-          { type: 'string', value: '1222' },
-          { type: 'base64', value: '1222' }
-        ]
-      }, {
-        field: '4',
-        columns: [
-          { type: 'string', value: '上海市普陀上海市普陀' },
-          { type: 'string', value: '上海市普陀上海市普陀' },
-          { type: 'base64', value: '1222' },
-          { type: 'base64', value: '1222' },
-          { type: 'string', value: '1222' },
-          { type: 'string', value: '1222' },
-          { type: 'string', value: '上海市普陀上海市普陀' }
-        ]
-      }],
-      total: 34,
+      currentPage: 1,
+      currentSize: 10,
+      tableData: [],
+      insertData: [],
+      total: 0,
       agoCell: null,
       currentInput: null,
       base64Pattern: /^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)$/,
@@ -172,8 +127,25 @@ export default {
         this.setFlexHeight()
       }, 10)
     }
+    this.getData()
   },
   methods: {
+    async getData() {
+      this.loadingStatus = true
+      const res = await getData({ name: this.$route.query.name, pages: this.currentPage - 1, pagesize: this.currentSize })
+      if (res && res.data && res.data.code === 0) {
+        this.tableData = res.data.table.data.map(item => {
+          item.binary = item.binary.map(base64 => {
+            const decode = base64ToString(base64)
+            const str = decode.length > 64 ? 'blob' : isASCII(decode) ? decode : 'blob'
+            return str
+          })
+          return item
+        })
+        this.total = res.data.table.total
+      }
+      this.loadingStatus = false
+    },
     handleTypeChange(value, param) {
       this.checkBase64(this.currentInput, param)
     },
@@ -186,30 +158,47 @@ export default {
         target.style.border = 'none'
         return
       }
-      if (!this.base64Pattern.test(param.value)) {
+      if (param.type === 'base64' && param.value && !this.base64Pattern.test(param.value)) {
         target.style.border = '1px solid #F56C6C'
       } else {
         target.style.border = 'none'
       }
     },
     cancel() {
-      // this.getData() 取消后所有修改都撤销
+      this.getData() // 取消后所有修改都撤销
+      this.insertData = [] // 取消后所有修改都撤销
       this.clearCell(this.agoCell)
       this.setCurrent()
     },
     async save() {
       this.clearCell(this.agoCell)
       this.setCurrent()
-      const res = await insertTable({
-        name: 'demo',
-        binary: [
-          ['dGhpcyBpcyBhIHRlc3Qy', 'emhhbmc='],
-          ['dGhpcyBpcyBhIHRlc3Qz', 'c2FuY2h1'],
-          ['dGhpcyBpcyBhIHRlc3Qx', 'c2FuY2g1'],
-        ]
+      const binaryData = []
+      const insertData = this.insertData.map(item => {
+        return item.binary
       })
-      if (res && res.data) {
-
+      insertData.map(item => {
+        const binaryItem = []
+        item.map(ite => {
+          if (ite.type === 'string') {
+            binaryItem.push(stringToBase64(ite.value))
+          }
+          if (ite.type === 'base64') {
+            binaryItem.push(ite.value)
+          }
+        })
+        if (binaryItem.length === Number(this.$route.query.columns)) {
+          binaryData.push(binaryItem)
+        }
+      })
+      const res = await addData({
+        name: this.$route.query.name,
+        binary: binaryData
+      })
+      if (res && res.data && res.data.code === 0) {
+        this.insertData = []
+        Toast.success('操作成功')
+        this.getData()
       }
     },
     setFlexHeight() {
@@ -217,34 +206,29 @@ export default {
       this.flexHeight = ele && ele.clientHeight
     },
     addTableData() {
-      this.tableData.push({
-        field: '5',
-        columns: [
-          { type: 'base64', value: '' },
-          { type: 'string', value: '' },
-          { type: 'base64', value: '' },
-          { type: 'base64', value: '' },
-          { type: 'string', value: '' },
-          { type: 'string', value: '' },
-          { type: 'base64', value: '' }
-        ]
+      const binary = []
+      for (let i = 0; i < Number(this.$route.query.columns); i++) {
+        binary.push({ type: '', value: '' })
+      }
+      this.insertData.push({
+        id: '',
+        binary
       })
     },
-    async handleDelete(row) {
-      console.log(row)
+    async handleDelete(row, index) {
+      if (!row.id) {
+        this.insertData.splice(index - this.tableData.length, 1)
+        return
+      }
       const confirmDelete = await Dialog.confirm('提示', { message: '是否删除此数据？' })
       if (!confirmDelete) return
 
-      const res = await this.getData()
-      if (res) {
+      const res = await deleteData({ name: this.$route.query.name, id: [row.id] })
+      if (res && res.data && res.data.code === 0) {
         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')) {
@@ -261,19 +245,13 @@ export default {
       input && input[0] && input[0].classList.remove('write')
       input && input[1] && 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 (column.label === '序号' || column.label === '操作') return
       if (this.agoCell !== cell) {
         this.clearCell(this.agoCell)
       }
       this.columnIndex = Number(column.label.substring(1))
-      cell.getElementsByClassName('el-select')[0].classList.remove('none-display')
+      cell.getElementsByClassName('el-select')[0] && 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')
@@ -296,8 +274,14 @@ export default {
         this.setCurrent()
       }
     },
-    handleSizeChange() {},
-    handlePageChange() {}
+    handleSizeChange(val) {
+      this.currentSize = val
+      this.getData()
+    },
+    handlePageChange(val) {
+      this.currentPage = val
+      this.getData()
+    }
   }
 }
 </script>
@@ -455,6 +439,11 @@ export default {
       font-family: PingFangSC-Regular, PingFang SC
       font-weight: 400
       color:#999999!important
+  .cell-span
+    display: inline-block
+    height: 32px
+    line-height: 32px
+    padding-left: 10px
   .buttons
     position: absolute
     bottom: 0

src/views/DataList/index.vue

@@ -20,9 +20,10 @@
             :data="{
               list: tokenList,
               total: total,
-            }">
+            }"
+            :outerLoading="loadingStatus">
             <div slot="operate" slot-scope="row">
-              <span class="operate" @click="$router.push({ path: '/data/edit' })">编辑</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>
             </div>
           </st-table>
@@ -66,6 +67,7 @@ export default {
     return {
       inputVal: '',
       showDialog: false,
+      loadingStatus: false,
       form: {},
       definitions: [
         {
@@ -126,11 +128,13 @@ export default {
   },
   methods: {
     async getData() {
+      this.loadingStatus = true
       const res = await getTable({ pages: this.currentPage - 1, pagesize: this.currentSize })
       if (res && res.data && res.data.code === 0) {
         this.tokenList = res.data.data.tables
         this.total = res.data.data.total
       }
+      this.loadingStatus = false
     },
     cancelSubmit() {
       this.form = {}

src/views/ParamsModel/detail.vue

@@ -28,7 +28,8 @@
               :data="{
                 list: tokenList,
                 total: total,
-              }">
+              }"
+              :outerLoading="loadingStatus">
               <div slot="value" slot-scope="row">
                 <span v-if="row.type === 'number' || row.type === 'string'">{{row.value}}</span>
                 <span v-if="row.type === 'blob'" style="line-height: 28px">
@@ -54,6 +55,7 @@ export default {
   data() {
     return {
       form: {},
+      loadingStatus: false,
       definitions: [
         {
           label: '字段',
@@ -74,6 +76,7 @@ export default {
     }
   },
   async mounted() {
+    this.loadingStatus = true
     const res = await detailParameter({ name: this.$route.query.name })
     if (res && res.data && res.data.code === 0) {
       this.form = res.data
@@ -90,6 +93,7 @@ export default {
         this.tokenList.push({ field: key, type: 'table', value: tableObj[key] })
       }
     }
+    this.loadingStatus = false
   },
   methods: {
     calculateByte: base64 => calculateByte(base64),

src/views/ParamsModel/edit.vue

@@ -62,7 +62,8 @@
                 @current-change="handleCurrentChange"
                 @row-click="rowClick"
                 @cell-click="cellClick"
-                style="width: 100%">
+                style="width: 100%"
+                v-loading="loadingStatus">
                 <el-table-column label="字段">
                   <template slot-scope="scope">
                     <input type="text" v-model="scope.row.field" @blur="handleBlur" placeholder="请输入">
@@ -134,6 +135,7 @@ export default {
       form: {},
       rules: [],
       file: '',
+      loadingStatus: false,
       typeOptions: [{
         value: 'number',
         label: 'number'
@@ -184,6 +186,7 @@ export default {
       }
     },
     async getData() {
+      this.loadingStatus = true
       const res = await detailParameter({ name: this.$route.query.name })
       if (res && res.data && res.data.code === 0) {
         this.form = res.data
@@ -200,6 +203,7 @@ export default {
           this.tableData.push({ field: key, type: 'table', value: tableObj[key] })
         }
       }
+      this.loadingStatus = false
     },
     cancel() {
       this.$router.push({ path: '/params' })

src/views/ParamsModel/index.vue

@@ -24,7 +24,8 @@
               }"
               :pagination="false"
               highlight-current-row
-              @row-click="handleClickRow">
+              @row-click="handleClickRow"
+              :outerLoading="loadingOne">
               <div slot="operate" slot-scope="row">
                 <span class="operate" @click="$router.push({ path: '/params/detail', query: { name: row.name }})">详情</span>
                 <span class="operate" @click="$router.push({ path: '/params/edit', query: { name: row.name, level: 1 } })">编辑</span>
@@ -58,7 +59,8 @@
               :data="{
                 list: twoList,
                 total: twoTotal,
-              }">
+              }"
+              :outerLoading="loadingTwo">
               <div slot="operate" slot-scope="row">
                 <span class="operate" @click="$router.push({ path: '/params/detail', query: { name: row.name } })">详情</span>
                 <span class="operate" @click="$router.push({ path: '/params/edit', query: { name: row.name, level: 2 } })">编辑</span>
@@ -91,6 +93,9 @@ export default {
       twoTotal: 0,
       oneCurrentPage: 1,
       twoCurrentPage: 1,
+      loadingOne: false,
+      loadingTwo: false,
+      parentLevel: '',
       definitions: [
         {
           label: '序号',
@@ -123,18 +128,22 @@ export default {
   },
   methods: {
     async getOneData() {
+      this.loadingOne = true
       const oneLevel = await getParameter({ base: 1, pages: this.oneCurrentPage - 1, pagesize: 10 })
       if (oneLevel && oneLevel.data && oneLevel.data.code === 0) {
         this.oneList = oneLevel.data.parameters.datas
         this.oneTotal = oneLevel.data.parameters.total
       }
+      this.loadingOne = false
     },
     async getTwoData() {
-      const twoLevel = await getParameter({ base: 0, pages: this.twoCurrentPage - 1, pagesize: 10 })
+      this.loadingTwo = true
+      const twoLevel = await getParameter({ base: 0, parent: this.parentLevel, pages: this.twoCurrentPage - 1, pagesize: 10 })
       if (twoLevel && twoLevel.data && twoLevel.data.code === 0) {
         this.twoList = twoLevel.data.parameters.datas
         this.twoTotal = twoLevel.data.parameters.total
       }
+      this.loadingTwo = false
     },
     async handleDelete(row, level) {
       const confirmDelete = await Dialog.confirm('提示', { message: '是否删除此模板？' })
@@ -148,7 +157,8 @@ export default {
       }
     },
     handleClickRow(row, column, event) {
-      console.log(row)
+      this.parentLevel = row.name
+      this.getTwoData()
     },
     handleOneCurrentChange(val) {
       this.oneCurrentPage = val