参数模板修改完成

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

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>

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>
-                        <el-image style="width: 42px; height: 28px;overflow: visible" :src="scope.row.value" fit="fit">
+                        <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" :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()

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.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">
-                    <div slot="error" style="width: 80px; height: 28px;overflow: visible">(不可预览)</div>
-                  </el-image>
+                <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">
+                    <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" :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="handleToTableDetail(row.value)">{{row.value}}</span>
                 </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>
               </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
-      const scalarsObj = res.data.parameters.scalars
-      const tableObj = res.data.parameters.table
+      binaryObj = Object.assign(JSON.parse(JSON.stringify(binaryObj1)), res.data.parameters.binary)
+      scalarsObj = Object.assign(JSON.parse(JSON.stringify(scalarsObj1)), res.data.parameters.scalars)
+      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>