NEZ-3349 feat：software asset列表页面开发

nezha-fronted/src/components/common/table/settings/softwareAssetTable.vue

@@ -43,6 +43,14 @@
               </template>
             </copy>
           </template>
+          <template v-else-if="item.prop === 'category'">
+            <div>
+              {{scope.row.type ? scope.row.type.category : '-'}}
+            </div>
+          </template>
+          <template v-else-if="item.prop === 'type'">
+            {{scope.row.type ? scope.row.type.name : '-'}}
+          </template>
           <template v-else-if="item.prop === 'asset'">
             <div>
               <div class="document-copy-block" v-if="scope.row.asset">
@@ -59,27 +67,18 @@
               <span v-else>--</span>
             </div>
           </template>
-          <template v-else-if="item.prop === 'category'">
-            <div>
-              {{scope.row.type ? scope.row.type.category : '-'}}
+          <span v-else-if="item.prop === 'dateIssued' || item.prop === 'dateExpires'">{{ scope.row[item.prop] ? momentTz(scope.row[item.prop] ) : '-'}}</span>
+          <!-- status -->
+          <template v-else-if="item.prop === 'status'">
+            <div v-if="scope.row.status === 1">
+              <i class="nz-icon nz-icon-import-success1" style="color:#8dcb4b;"></i>
+              <span>{{$t('licenseMange.licensed')}}</span>
             </div>
-          </template>
-          <template v-else-if="item.prop === 'project'">
-            <div>
-              <div class="document-copy-block" v-if="scope.row.project">
-              <span class="document-copy-text"
-                    :title="scope.row[item.prop].name"
-                    @mouseenter="labelHover(scope.row, item.prop, true,true, $event)"
-                    @mouseleave="labelHover(scope.row, item.prop, false,true)">
-              {{scope.row[item.prop].name}}
-              </span>
-                <i v-if="scope.row[item.prop].name" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row[item.prop].name)" :title="$t('overall.copyText')"></i>
-              </div>
-              <span v-else>--</span>
+            <div v-else-if="scope.row.status == 2">
+              <i class="nz-icon nz-icon-stop" style="color:#bebebe;"></i>
+              <span>{{ $t('licenseMange.notLicensed') }}</span>
             </div>
-          </template>
-          <template v-else-if="item.prop === 'type'">
-            {{scope.row.type ? scope.row.type.name : '-'}}
+            <div v-else>-</div>
           </template>
           <span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
           <span v-else>-</span>
@@ -91,16 +90,21 @@
         fixed="right">
         <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
         <div slot-scope="scope" class="table-operation-items">
-          <!-- <button class="table-operation-item" v-has="'softwareAsset_edit'" @click="$emit('edit', scope.row)" :title="$t('overall.edit')"><i class="nz-icon nz-icon-edit"></i></button> -->
-          <button class="table-operation-item" @click="showBottomBox('endpoint', scope.row)" :title="$t('overall.view')"><i class="nz-icon nz-icon-view1"></i></button>
-          <el-dropdown size="medium" v-has="['softwareAsset_delete','main_edit','softwareAsset_edit']" trigger="click" @command="tableOperation">
+          <!-- <button class="table-operation-item" @click="showBottomBox('endpoint', scope.row)" :title="$t('overall.view')"><i class="nz-icon nz-icon-view1"></i></button> -->
+          <button class="table-operation-item" v-has="'softwareAsset_edit'" @click="tableOperation(['edit', scope.row])" :title="$t('overall.edit')"><i class="nz-icon nz-icon-edit"></i></button>
+          <el-dropdown size="medium" v-has="['softwareAsset_edit','softwareAsset_add','softwareAsset_delete']" trigger="click" @command="tableOperation">
             <div class="table-operation-item table-operation-item--more" :title="$t('overall.moreOperations')">
               <i class="nz-icon nz-icon-more3"></i>
             </div>
             <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
-              <el-dropdown-item v-has="'softwareAsset_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
-              <el-dropdown-item v-has="'softwareAsset_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
-              <el-dropdown-item v-has="'softwareAsset_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:true, single:true,from:'model'}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+              <el-dropdown-item v-has="'softwareAsset_add'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
+              <el-dropdown-item v-has="'softwareAsset_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:true, single:true,from:'softwareAsset'}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+              <el-dropdown-item v-has="'softwareAsset_edit'" :command="['upload', scope.row]" @click.native="upload(scope.row)">
+                <i class="nz-icon nz-icon-upload"></i><span class="operation-dropdown-text">{{$t('softwareAsset.upload')}}</span>
+              </el-dropdown-item>
+              <el-dropdown-item v-has="'softwareAsset_edit'" :command="['download', scope.row]" @click.native="download(scope.row)">
+                <i class="nz-icon nz-icon-download1"></i><span class="operation-dropdown-text">{{$t('softwareAsset.download')}}</span>
+              </el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </div>
@@ -121,6 +125,15 @@
       :that="alertLabelObj"
       :type="alertLabelType"
     ></alertLabel>
+    <el-upload
+      action=""
+      :auto-upload="false"
+      accept=".v2c,.V2CP,.H2R,.R2H,.H2H,.ID "
+      :on-change="uploadChange"
+      style="display: none"
+      ref="upload"
+    >
+    </el-upload>
   </div>
 </template>
 
@@ -128,8 +141,9 @@
 import table from '@/components/common/mixin/table'
 import copy from '@/components/common/copy'
 import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
+import axios from 'axios'
 export default {
-  name: 'softwareTypeTable',
+  name: 'softwareTable',
   mixins: [table, alertLabelMixin],
   components: { copy },
   props: {
@@ -143,13 +157,13 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 120,
+          width: 80,
           sortable: 'custom'
         }, {
           label: this.$t('overall.name'),
           prop: 'name',
           show: true,
-          width: 350,
+          width: 200,
           sortable: 'custom'
         }, {
           label: this.$t('softwareType.category'),
@@ -157,62 +171,113 @@ export default {
           show: true,
           minWidth: 200,
           sortable: 'custom'
-        },
-        // {
-        //   label: this.$t('config.menus.icon'),
-        //   prop: 'icon',
-        //   show: true,
-        //   width: 120,
-        //   sortable: 'custom'
-        // },
-        {
+        }, {
           label: this.$t('overall.type'),
           prop: 'type',
           minWidth: 200,
           show: true
-        },
-        {
-          label: this.$t('project.project.projectName'),
-          prop: 'project',
-          minWidth: 200,
-          show: true
         }, {
           label: this.$t('asset.asset'),
           prop: 'asset',
           minWidth: 200,
           show: true
-        },
-
-        {
+        }, {
+          label: this.$t('licenseMange.dateIssue'),
+          prop: 'dateIssued',
+          minWidth: 200,
+          show: true
+        }, {
+          label: this.$t('licenseMange.dateExpire'),
+          prop: 'dateExpires',
+          minWidth: 200,
+          show: true
+        }, {
+          label: this.$t('licenseMange.licenseStatus'),
+          prop: 'status',
+          minWidth: 200,
+          show: true
+        }, {
+          label: this.$t('licenseMange.concurrency'),
+          prop: 'concurrency',
+          minWidth: 150,
+          show: true
+        }, {
+          label: this.$t('licenseMange.logins'),
+          prop: 'logins',
+          minWidth: 100,
+          show: true
+        }, {
           label: this.$t('overall.remark'),
           prop: 'remark',
           minWidth: 200,
           show: true
         }
-      ]
+      ],
+      uploadId: undefined
     }
   },
   methods: {
+    // 上传V2C
+    upload (row) {
+      this.uploadId = row.id
+      this.$refs.upload.$children[0].$refs.input.click()
+    },
+    async uploadChange (file) {
+      const form = new FormData()
+      form.append('file', file.raw)
+      form.append('saId', this.uploadId)
+      const res = await this.$post('/license/uploadV2C', form, { 'Content-Type': 'multipart/form-data' })
+      if (res.code === 200) {
+        this.$emit('reload')
+        this.$message.success(this.$t('tip.uploadSuccess'))
+      } else {
+        this.$message.error(res.msg)
+      }
+    },
+    // 下载C2V
+    download (row) {
+      const params = {
+        saId: row.id
+      }
+      axios.get('/license/downloadC2V', { responseType: 'blob', params: params }).then(res => {
+        const filename = row.name + '.c2v'
+        if (window.navigator.msSaveOrOpenBlob) {
+          // 兼容ie11
+          const blobObject = new Blob([res.data])
+          window.navigator.msSaveOrOpenBlob(blobObject, filename)
+        } else {
+          const url = URL.createObjectURL(new Blob([res.data]))
+          const a = document.createElement('a')
+          document.body.appendChild(a) // 此处增加了将创建的添加到body当中
+          a.href = url
+          a.download = filename
+          a.target = '_blank'
+          a.click()
+          a.remove() // 将a标签移除
+        }
+      }, error => {
+        const $self = this
+        const reader = new FileReader()
+        reader.onload = function (event) {
+          const responseText = reader.result
+          const exception = JSON.parse(responseText)
+          if (exception.message) {
+            $self.$message.error(exception.message)
+          } else if (exception.msg) {
+            $self.$message.error(exception.msg)
+          } else {
+            console.error(error)
+          }
+        }
+        reader.readAsText(error.response.data)
+      })
+    },
     copyValue (item) {
       const str = item
-      // const domUrl = document.createElement('input')
-      // domUrl.value = JSON.stringify(str)
-      // domUrl.id = 'creatDom'
-      // document.body.appendChild(domUrl)
-      // domUrl.select() // 选择对象
-      // document.execCommand('Copy') // 执行浏览器复制命令
-      // const creatDom = document.getElementById('creatDom')
-      // creatDom.parentNode.removeChild(creatDom)
-      // this.$message.success(this.$t('overall.copySuccess'))
       this.$copyText(JSON.stringify(str)).then(() => {
         this.$message.success({ message: this.$t('overall.copySuccess') })
       })
     }
-  },
-  created () {
-  },
-  computed: {
-
   }
 }
 </script>