创建数据表需求

src/views/Account/index.vue

@@ -11,7 +11,7 @@
         <span class="fields">用户角色：</span>
         <st-select
           v-model="userRole"
-          :options="logLevelOptions"
+          :options="userRoleOptions"
           size="small"
           style="width: 240px"
           class="contents"
@@ -32,7 +32,7 @@
     </div>
     <div class="page-content">
       <div class="content-header">
-        <st-button type="primary" @click="handleAdd">
+        <st-button type="primary" @click="handleCreate">
           <i class="iconfont icon-tianjia"></i><span class="text">{{'增加用户'}}</span>
         </st-button>
       </div>
@@ -58,7 +58,7 @@
       class="update-dialog"
       @dismiss="cancelSubmit"
       >
-      <div slot="header" class="popup-header">{{'增加用户'}}</div>
+      <div slot="header" class="popup-header">{{submitType === 'create' ? '增加用户' : '编辑用户'}}</div>
       <div slot="body" class="popup-body">
         <st-form
           label-width="90px"
@@ -106,32 +106,36 @@ export default {
       userRole: '',
       created_at: [],
       showDialog: false,
+      submitType: 'create',
       form: {},
-      logLevelOptions: [
-        { label: 'debug', value: -1 },
-        { label: 'info', value: 0 },
-        { label: 'warning', value: 1 },
-        { label: 'error', value: 2 },
-      ],
+      userRoleOptions: [],
       currentPage: 1,
       currentSize: 10,
       loadingStatus: false,
       borderColor: '#ccc',
       definitions: [
         {
-          label: '序号',
+          label: '账号',
           render: 'number'
         },
         {
-          label: '名称',
+          label: '角色',
           render: 'name'
         },
         {
-          label: '类别',
+          label: '邮箱',
           render: 'type'
         },
         {
-          label: '描述',
+          label: '创建人',
+          render: 'desc'
+        },
+        {
+          label: '创建日期',
+          render: 'desc'
+        },
+        {
+          label: '备注',
           render: 'desc'
         },
         {
@@ -169,10 +173,12 @@ export default {
     cancelSubmit() {
       this.showDialog = false
     },
-    handleAdd() {
+    handleCreate() {
+      this.submitType = 'create'
       this.showDialog = true
     },
     handleEdit(row) {
+      this.submitType = 'edit'
       this.showDialog = true
     },
     async handleDelete(row) {

src/views/Apply/index.vue

@@ -13,6 +13,11 @@
               list: tokenList,
               total: total,
             }">
+            <div slot="secret" slot-scope="row">
+              <span v-if="showSecret === row.number" class="secret-box">{{row.desc}}</span>
+              <span v-else class="secret-box">********</span>
+              <i class="el-icon-view eye-btn" @mousedown="showSecret = row.number" @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>
@@ -30,22 +35,27 @@ import Dialog from '@/helpers/dialog'
 export default {
   data() {
     return {
-      inputVal: '',
+      showSecret: '',
       definitions: [
         {
-          label: '序号',
+          label: 'APPID',
           render: 'number'
         },
         {
-          label: '名称',
-          render: 'name'
+          label: 'Secret',
+          type: 'slot',
+          slotName: 'secret'
         },
         {
-          label: '类别',
+          label: '创建时间',
           render: 'type'
         },
         {
-          label: '描述',
+          label: '设备数量',
+          render: 'desc'
+        },
+        {
+          label: '说明',
           render: 'desc'
         },
         {
@@ -84,4 +94,10 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.eye-btn
+  margin-left: 10px
+  color: #409EFF
+.secret-box
+  display: inline-block
+  width: 60px
 </style>

src/views/DataList/edit.vue

@@ -3,7 +3,7 @@
     <div class="header">
       <span class="title">{{'数据列表 / 编辑'}}</span>
     </div>
-    <div class="page-content">
+    <div class="page-content" @click="handleClick">
       <div class="content-header">
         <st-button type="primary" @click="addTableData">
           <i class="iconfont icon-tianjia"></i><span class="text">{{'插入数据'}}</span></st-button>
@@ -30,6 +30,7 @@
             ref="singleTable"
             :data="tableData"
             highlight-current-row
+            @current-change="currentChange"
             @row-click="rowClick"
             @cell-click="cellClick"
             style="width: 100%">
@@ -153,9 +154,11 @@ export default {
   methods: {
     cancel() {
       this.clearCell(this.agoCell)
+      this.setCurrent()
     },
     save() {
       this.clearCell(this.agoCell)
+      this.setCurrent()
     },
     setFlexHeight() {
       const ele = document.getElementsByClassName('list-content') && document.getElementsByClassName('list-content')[0]
@@ -195,7 +198,6 @@ export default {
     },
     clearCell(cell) {
       if (!cell) return
-      this.setCurrent()
       const select = cell.getElementsByClassName('el-select')
       const input = cell.getElementsByTagName('input')
       select && select[0] && select[0].classList.add('none-display')
@@ -227,6 +229,15 @@ export default {
     setCurrent(row) {
       this.$refs.singleTable.setCurrentRow(row)
     },
+    currentChange(currentRow, oldCurrentRow) {
+      this.clearCell(this.agoCell)
+    },
+    handleClick(event) {
+      if (['content-header', 'list-content', 'el-pagination', 'buttons'].includes(event.target.classList[0])) {
+        this.clearCell(this.agoCell)
+        this.setCurrent()
+      }
+    },
     handleSizeChange() {},
     handlePageChange() {}
   }

src/views/DataList/index.vue

@@ -5,6 +5,8 @@
     </div>
     <div class="page-content">
       <div class="content-header">
+        <st-button type="primary" id="btn" @click="showDialog = true">
+          <i class="iconfont icon-tianjia"></i><span class="text">{{'创建数据表'}}</span></st-button>
         <div class="search">
           <input type="text" class="search-input" placeholder="请输入搜索内容" v-model="inputVal">
           <i class="el-input__icon el-icon-search"></i>
@@ -27,6 +29,32 @@
         </div>
       </div>
     </div>
+    <st-dialog
+      :show.sync="showDialog"
+      class="update-dialog"
+      @dismiss="cancelSubmit"
+      >
+      <div slot="header" class="popup-header">{{'创建数据表'}}</div>
+      <div slot="body" class="popup-body">
+        <st-form
+          label-width="90px"
+          ref="form"
+          :model="form">
+          <st-form-item
+            :label="'名称:'">
+            <st-input v-model="form.name"></st-input>
+          </st-form-item>
+          <st-form-item
+            :label="'列数:'">
+            <st-input v-model="form.columns"></st-input>
+          </st-form-item>
+        </st-form>
+      </div>
+      <div slot="footer" class="popup-footer flex right">
+        <st-button @click="cancelSubmit">{{$t('public.cancel')}}</st-button>
+        <st-button type="primary" @click="submit">{{'确定'}}</st-button>
+      </div>
+    </st-dialog>
   </div>
 </template>
 
@@ -36,6 +64,8 @@ export default {
   data() {
     return {
       inputVal: '',
+      showDialog: false,
+      form: {},
       definitions: [
         {
           label: '序号',
@@ -46,11 +76,23 @@ export default {
           render: 'name'
         },
         {
-          label: '类别',
+          label: '列数',
           render: 'type'
         },
         {
-          label: '描述',
+          label: '行数',
+          render: 'desc'
+        },
+        {
+          label: '容量',
+          render: 'desc'
+        },
+        {
+          label: '创建时间',
+          render: 'desc'
+        },
+        {
+          label: '修改时间',
           render: 'desc'
         },
         {
@@ -70,6 +112,13 @@ export default {
     // this.getData()
   },
   methods: {
+    cancelSubmit() {
+      this.form = {}
+      this.showDialog = false
+    },
+    submit() {
+      this.showDialog = false
+    },
     async handleDelete(row) {
       console.log(row)
       const confirmDelete = await Dialog.confirm('提示', { message: '是否删除此日志？' })
@@ -87,6 +136,9 @@ export default {
 
 <style lang="sass" scoped>
 .page-content
+  #btn
+    width: 116px!important
+    text-align: left
   .search
     width: 240px
     height: 32px