创建数据表需求

温丽香
Commit 2a92a55f authored Aug 18, 2021 by 温丽香
Showing with 109 additions and 24 deletions
src/views/Account/index.vue
src/views/Apply/index.vue
src/views/DataList/edit.vue
src/views/DataList/index.vue
--- a/src/views/Account/index.vue
+++ b/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: [
+      userRoleOptions: [],
-        { label: 'debug', value: -1 },
-        { label: 'info', value: 0 },
-        { label: 'warning', value: 1 },
-        { label: 'error', value: 2 },
-      ],
      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) {

--- a/src/views/Apply/index.vue
+++ b/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: '名称',
+          label: 'Secret',
-          render: 'name'
+          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>
--- a/src/views/DataList/edit.vue
+++ b/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() {}
  }

--- a/src/views/DataList/index.vue
+++ b/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