参数模板修改完成

温丽香
Commit 5a70ba20 authored Oct 09, 2021 by 温丽香
Showing with 124 additions and 26 deletions
src/views/DataList/edit.vue
src/views/DataList/index.vue
src/views/ParamsModel/add.vue
src/views/ParamsModel/detail.vue
src/views/ParamsModel/edit.vue
--- a/src/views/DataList/edit.vue
+++ b/src/views/DataList/edit.vue
@@ -98,7 +98,7 @@ export default {
      content: '',
      isBase64: false,
      loadingStatus: false,
-      totalColumns: 0,
+      totalColumns: Number(this.$route.query.columns),
      typeOptions: [{
        value: 'base64',
        label: 'base64'
@@ -142,7 +142,6 @@ export default {
            const str = decode.length > 64 ? 'blob' : isASCII(decode) ? decode : 'blob'
            return str
          })
-          this.totalColumns = item.binary.length
          return item
        })
        this.total = res.data.table.total

--- a/src/views/DataList/index.vue
+++ b/src/views/DataList/index.vue
@@ -23,7 +23,7 @@
            }"
            :outerLoading="loadingStatus">
            <div slot="operate" slot-scope="row">
-              <span class="operate" @click="$router.push({ path: '/data/edit', query: { name: row.name } })">编辑</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>

--- a/src/views/ParamsModel/add.vue
+++ b/src/views/ParamsModel/add.vue
@@ -30,7 +30,7 @@
              clearable
            >
            </st-select> -->
-            <el-select v-model="form.base" placeholder="请选择" style="width: 400px;height: 32px;line-height: 32px">
+            <el-select v-model="form.base" placeholder="请选择" style="width: 400px;height: 32px;line-height: 32px" @change="handleSelectBase">
              <el-option
                v-for="item in baseOptions"
                :key="item.name"
@@ -65,12 +65,12 @@
                style="width: 100%">
                <el-table-column label="字段">
                  <template slot-scope="scope">
-                    <input type="text" v-model="scope.row.field" @blur="handleBlur" placeholder="请输入">
+                    <input type="text" v-model="scope.row.field" @blur="handleBlur" placeholder="请输入" :disabled="Boolean(scope.row.level)">
                  </template>
                </el-table-column>
                <el-table-column label="类型">
                  <template slot-scope="scope">
-                    <pack-select v-model="scope.row.type" placeholder="请选择" @blur="handleBlur" @visible-change="handleVisibleChange" @change="handleChange(scope.row)">
+                    <pack-select v-model="scope.row.type" placeholder="请选择" @blur="handleBlur" @visible-change="handleVisibleChange" @change="handleChange(scope.row)" :disabled="Boolean(scope.row.level)">
                      <el-option
                        v-for="item in typeOptions"
                        :key="item.value"
@@ -87,8 +87,8 @@
                      <span class="upload-btn" v-if="!scope.row.value">Select File</span>
                      <input type="file" @blur="handleBlur" @change="(event) => handleUpload(event, scope.row)" class="input-btn" v-if="!scope.row.value">
                      <span v-if="scope.row.value">
-                        <span style="float: left;margin-right: 10px">{{calculateByte(scope.row.value)}}字节</span>
+                        <span style="float: left;margin-right: 10px" @click="scope.row.value = ''">{{calculateByte(scope.row.value)}}字节</span>
-                        <el-image style="width: 42px; height: 28px;overflow: visible" :src="scope.row.value" fit="fit">
+                        <el-image style="width: 42px; height: 28px;overflow: visible" :src="scope.row.value" fit="fit" :preview-src-list="[scope.row.value]">
                          <div slot="error" style="width: 80px; height: 28px;overflow: visible">(不可预览)</div>
                        </el-image>
                      </span>
@@ -107,7 +107,9 @@
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
-                    <span @click="handleDelete(scope.$index)" class="delete-btn">删除</span>
+                    <span @click="handleHidden(scope.row)" class="delete-btn" style="color: #E6A23C" v-if="scope.row.level">隐藏</span>
+                    <span @click="handleReturnBack(scope.row, scope.$index)" style="color: #409EFF" class="delete-btn" v-if="scope.row.level && scope.row.value != originalData[scope.$index].value">撤回</span>
+                    <span @click="handleDelete(scope.$index)" class="delete-btn" v-if="!scope.row.level">删除</span>
                  </template>
                </el-table-column>
              </el-table>
@@ -126,7 +128,7 @@
 </template>
 <script>
-import { createParameter, getTable, getParameter } from '@/axios'
+import { createParameter, getTable, getParameter, detailParameter } from '@/axios'
 import { fileToBase64 } from '@/utils/typeConversion'
 import { calculateByte } from '@/utils/system'
 import Dialog from '@/helpers/dialog'
@@ -151,6 +153,7 @@ export default {
      tableOptions: [],
      baseOptions: [],
      tableData: [],
+      originalData: [],
      flexHeight: 0,
      currentRow: ''
    }
@@ -183,8 +186,36 @@ export default {
        this.baseOptions = res.data.parameters.datas
      }
    },
+    async handleSelectBase(value) {
+      const res = await detailParameter({ name: value })
+      if (res && res.data && res.data.code === 0) {
+        this.tableData = []
+        const binaryObj = res.data.parameters.binary
+        const scalarsObj = res.data.parameters.scalars
+        const tableObj = res.data.parameters.table
+        for (const key in binaryObj) {
+          this.tableData.push({ field: key, type: 'blob', value: binaryObj[key], level: 1 })
+        }
+        for (const key in scalarsObj) {
+          this.tableData.push({ field: key, type: typeof scalarsObj[key], value: scalarsObj[key], level: 1 })
+        }
+        for (const key in tableObj) {
+          this.tableData.push({ field: key, type: 'table', value: tableObj[key], level: 1 })
+        }
+        this.originalData = JSON.parse(JSON.stringify(this.tableData))
+      }
+    },
    async save() {
-      const tableData = this.tableData.filter(item => item.field && item.value)
+      const tableDataTemp = this.tableData.filter(item => item.field !== '' && item.type !== '' && item.value !== '')
+      // 最终提交的数据字段名不重复
+      const temp = []
+      const tableData = []
+      for (let i = 0; i < tableDataTemp.length; i++) {
+        if (!temp.includes(tableDataTemp[i].field)) {
+          temp.push(tableDataTemp[i].field)
+          tableData.push(tableDataTemp[i])
+        }
+      }
      const scalarsArr = tableData.filter(item => item.type === 'string' || item.type === 'number')
      const binaryArr = tableData.filter(item => item.type === 'blob')
      const tableArr = tableData.filter(item => item.type === 'table')
@@ -192,7 +223,7 @@ export default {
      const binaryObj = {}
      const tableObj = {}
      for (let i = 0; i < scalarsArr.length; i++) {
-        scalarsObj[scalarsArr[i].field] = scalarsArr[i].value
+        scalarsObj[scalarsArr[i].field] = scalarsArr[i].value === null ? null : (scalarsArr[i].type === 'number' ? Number(scalarsArr[i].value) : String(scalarsArr[i].value))
      }
      for (let j = 0; j < binaryArr.length; j++) {
        binaryObj[binaryArr[j].field] = binaryArr[j].value
@@ -210,11 +241,13 @@ export default {
      })
      if (res && res.data && res.data.code === 0) {
        Toast.success('操作成功')
-        this.$router.push({ path: '/params' })
+        // this.$router.push({ path: '/params' })
      }
    },
    cancel() {
-      this.$router.push({ path: '/params' })
+      // this.$router.push({ path: '/params' })
+      this.form = {}
+      this.tableData = []
    },
    async handleUpload(event, row) {
      row.value = await fileToBase64(event.target.files[0])
@@ -222,8 +255,17 @@ export default {
    insertTableData() {
      this.tableData.push({ field: '', type: '', value: '' })
    },
+    handleReturnBack(row, index) {
+      row.value = JSON.parse(JSON.stringify(this.originalData[index])).value
+      this.$forceUpdate()
+    },
+    handleHidden(row) {
+      row.value = null
+      this.$forceUpdate()
+    },
    handleDelete(index) {
      this.tableData.splice(index, 1)
+      this.$forceUpdate()
    },
    setFlexHeight() {
      const ele = document.getElementsByClassName('flex-item') && document.getElementsByClassName('flex-item')[0]
@@ -242,6 +284,7 @@ export default {
      event.target && event.target.classList && event.target.classList.remove('write')
    },
    cellClick(row, column, cell, event) {
+      if (row.level && (column.label === '字段' || column.label === '类型')) return
      if (cell.getElementsByTagName('input')[0]) {
        cell.getElementsByTagName('input')[0].classList.add('write')
        cell.getElementsByTagName('input')[0].focus()

--- a/src/views/ParamsModel/detail.vue
+++ b/src/views/ParamsModel/detail.vue
@@ -26,20 +26,22 @@
              :options="definitions"
              :pagination="false"
              :data="{
-                list: tokenList,
+                list: tableData,
                total: total,
              }"
              :outerLoading="loadingStatus">
              <div slot="value" slot-scope="row">
+                <span v-if="row.value === null" class="cell-null">null</span>
+                <span v-else>
                  <span v-if="row.type === 'number' || row.type === 'string'">{{row.value}}</span>
                  <span v-if="row.type === 'blob'" style="line-height: 28px">
-                  <!-- TODO -->
                    <span style="float: left;margin-right: 10px">{{parseInt(calculateByte(row.value))}}&nbsp;字节</span>
-                  <el-image style="width: 42px; height: 28px;overflow: visible" :src="row.value" fit="fit">
+                    <el-image style="width: 42px; height: 28px;overflow: visible" :src="row.value" fit="fit" :preview-src-list="[row.value]">
                      <div slot="error" style="width: 80px; height: 28px;overflow: visible">(不可预览)</div>
                    </el-image>
                  </span>
-                <span v-if="row.type === 'table'" style="color: #409EFF; cursor: pointer" @click="$router.push({ path: '/data/edit', query: { name: row.value } })">{{row.value}}</span>
+                  <span v-if="row.type === 'table'" style="color: #409EFF; cursor: pointer" @click="handleToTableDetail(row.value)">{{row.value}}</span>
+                </span>
              </div>
            </st-table>
          </st-form-item>
@@ -49,7 +51,7 @@
 </template>
 <script>
-import { detailParameter } from '@/axios'
+import { detailParameter, getTable } from '@/axios'
 import { calculateByte } from '@/utils/system'
 export default {
  data() {
@@ -71,7 +73,8 @@ export default {
          slotName: 'value'
        }
      ],
-      tokenList: [],
+      baseData: [],
+      tableData: [],
      total: 0
    }
  },
@@ -79,24 +82,69 @@ export default {
    this.loadingStatus = true
    const res = await detailParameter({ name: this.$route.query.name })
    if (res && res.data && res.data.code === 0) {
+      let binaryObj = {}
+      let scalarsObj = {}
+      let tableObj = {}
+      let binaryObj1 = {}
+      let scalarsObj1 = {}
+      let tableObj1 = {}
+      if (res.data.base) {
+        const base = await detailParameter({ name: res.data.base })
+        if (base && base.data && base.data.code === 0) {
+          binaryObj1 = base.data.parameters.binary
+          scalarsObj1 = base.data.parameters.scalars
+          tableObj1 = base.data.parameters.table
+          this.baseObj = Object.assign(JSON.parse(JSON.stringify(binaryObj1)), JSON.parse(JSON.stringify(scalarsObj1)), JSON.parse(JSON.stringify(tableObj1)))
+          for (const key in binaryObj1) {
+            this.baseData.push({ field: key, type: 'blob', value: binaryObj1[key], level: 1 })
+          }
+          for (const key in scalarsObj1) {
+            this.baseData.push({ field: key, type: typeof scalarsObj1[key], value: scalarsObj1[key], level: 1 })
+          }
+          for (const key in tableObj1) {
+            this.baseData.push({ field: key, type: 'table', value: tableObj1[key], level: 1 })
+          }
+        }
+      }
      this.form = res.data
-      const binaryObj = res.data.parameters.binary
+      binaryObj = Object.assign(JSON.parse(JSON.stringify(binaryObj1)), res.data.parameters.binary)
-      const scalarsObj = res.data.parameters.scalars
+      scalarsObj = Object.assign(JSON.parse(JSON.stringify(scalarsObj1)), res.data.parameters.scalars)
-      const tableObj = res.data.parameters.table
+      tableObj = Object.assign(JSON.parse(JSON.stringify(tableObj1)), res.data.parameters.table)
+      const frontData = []
+      const endData = []
      for (const key in binaryObj) {
-        this.tokenList.push({ field: key, type: 'blob', value: binaryObj[key] })
+        if (binaryObj1[key]) {
+          frontData.push({ field: key, type: 'blob', value: binaryObj[key], level: 1 })
+        } else {
+          endData.push({ field: key, type: 'blob', value: binaryObj[key] })
+        }
      }
      for (const key in scalarsObj) {
-        this.tokenList.push({ field: key, type: typeof scalarsObj[key], value: scalarsObj[key] })
+        if (scalarsObj1[key]) {
+          frontData.push({ field: key, type: typeof scalarsObj[key], value: scalarsObj[key], level: 1 })
+        } else {
+          endData.push({ field: key, type: typeof scalarsObj[key], value: scalarsObj[key] })
+        }
      }
      for (const key in tableObj) {
-        this.tokenList.push({ field: key, type: 'table', value: tableObj[key] })
+        if (tableObj1[key]) {
+          frontData.push({ field: key, type: 'table', value: tableObj[key], level: 1 })
+        } else {
+          endData.push({ field: key, type: 'table', value: tableObj[key] })
+        }
      }
+      this.tableData = frontData.concat(endData)
    }
    this.loadingStatus = false
  },
  methods: {
    calculateByte: base64 => calculateByte(base64),
+    async handleToTableDetail(name) {
+      const res = await getTable({ pages: 0, pagesize: 1, name: name })
+      if (res && res.data && res.data.code === 0) {
+        this.$router.push({ path: '/data/edit', query: { name: name, columns: res.data.data && res.data.data.tables.length && res.data.data.tables[0].columns } })
+      }
+    }
  }
 }
 </script>
@@ -121,4 +169,12 @@ export default {
  ::v-deep .cell
    height: 28px
    line-height: 28px!important
+  .cell-null
+    display: inline-block
+    height: 26px
+    line-height: 26px
+    padding: 0 10px
+    color: #fff
+    background: #ccc
+    border-radius: 4px
 </style>
--- a/src/views/ParamsModel/edit.vue
+++ b/src/views/ParamsModel/edit.vue