From ba0f28da599f9083f309d20f310f9537c53c7ead Mon Sep 17 00:00:00 2001
From: zhaomeijing <zhaomeijing@syxysoft.com>
Date: Tue, 10 May 2022 11:32:47 +0800
Subject: [PATCH] =?UTF-8?q?[add]=20=E5=8F=82=E6=95=B0=E9=A1=B9=E6=94=B6?=
 =?UTF-8?q?=E9=9B=86=E6=B8=85=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/tableCollection/index.vue  | 268 +++++++++++++
 .../parameterlist/components/addModel.vue     |   2 +-
 .../ParameterItemCollectionList.vue           | 354 ++++++++----------
 3 files changed, 433 insertions(+), 191 deletions(-)
 create mode 100644 jero-web/src/components/tableCollection/index.vue

diff --git a/jero-web/src/components/tableCollection/index.vue b/jero-web/src/components/tableCollection/index.vue
new file mode 100644
index 000000000..3a4504902
--- /dev/null
+++ b/jero-web/src/components/tableCollection/index.vue
@@ -0,0 +1,268 @@
+<template>
+  <div style="height: 100%">
+    <div class="box">
+      <a-table
+        class="table"
+        rowKey="id"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :pagination="false"
+        :scroll="{x: true}"
+        :data-source="dataSource"
+        :loading="loading"
+        :columns="columns"
+        @change="tableOnChange"
+      >
+        <span slot="operation" slot-scope="record">
+                     <a v-for="(ol,index) in OperationList"
+                        @click="OperationClick(ol,record)">
+                        <span v-if="ol.text == $t('CancelCollection')" v-has="ol.has" class="text">
+                                    {{!record.collectFlag || record.collectFlag == 0 ? $t('Collection') :$t('CancelCollection')}}
+                        </span>
+                        <span v-else-if="ol.text == $t('CancelSubscribe')" v-has="ol.has" class="text">
+                                    {{!record.subscribeFlag || record.subscribeFlag == 0 ? $t('subscribe') :$t('CancelSubscribe')}}
+                       </span>
+                        <span v-else v-has="ol.has" class="text">
+                               {{ol.text}}
+                        </span>
+                     </a>
+         </span>
+        <span slot="detailClick" slot-scope="text,record">
+              <a class="text" :title="text" @click="detailClick(record)">
+                {{text && text.length > 18?text.slice(0,17)+'...':text}}
+              </a>
+        </span>
+        <span slot="urlClick" slot-scope="text,record">
+              <a class="text" :title="text" @click="urlClick(text)">
+                {{text && text.length > 18?text.slice(0,17)+'...':text}}
+              </a>
+        </span>
+        <span slot="detailText" slot-scope="text,record">
+              <span class="text" :title="text">
+               {{text && text.length > 18?text.slice(0,17)+'...':text}}
+              </span>
+        </span>
+
+      </a-table>
+    </div>
+    <div class="page" v-if="dataSource.length > 0">
+      <a-pagination
+        :show-total="total => $t('total')+` ${total} `+$t('strip')"
+        show-quick-jumper
+        show-size-changer
+        :page-size.sync="pageSize"
+        :total="total"
+        @change="onChange"
+        @showSizeChange="SizeChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import eventBUs from '../../common/event'
+import { getAction, postAction } from '@/api/manage'
+
+export default {
+  name: 'index',
+  props: {
+    //接口
+    url: {
+      type: Object,
+      default: {}
+    },
+    // 详细列表得一条数据
+    paramsManifest: {
+      type: Object,
+      default: {},
+      require: true
+    },
+    // flag: {
+    //   type: String,
+    //   default: ''
+    // },
+    // //是否显示操作；默认不显示
+    // showAction: {
+    //   type: Boolean,
+    //   default: false
+    // }
+  },
+  data() {
+    return {
+      jsonBody: [],
+      checkboxList: [],
+      tableAll: false,
+      indeterminate: false,
+      columns: [],
+      selectedRowKeys: [],
+      dataSource: [],
+      pageNo: 1,
+      pageSize: 10,
+      total: 0,
+      searchParmes: {},
+      loading: false,
+      orderBy: '1',
+      orderByField: ''
+    }
+  },
+  mounted() {
+    // eventBUs.$on('searchQuery', search => {
+    //   Object.keys(search).forEach(res => {
+    //     if (search[res] instanceof Array) {
+    //       search[res] = search[res].join(',')
+    //     }
+    //   })
+    //   this.searchParmes = search
+    //   this.getData()
+    //   this.getTableList()
+    // })
+    // eventBUs.$on('searchReset', target => {
+    //   this.searchParmes = {}
+    //   this.selectedRowKeys = []
+    //   this.getData()
+    //   this.getTableList()
+    // })
+    // this.getData()
+    // this.getTableList()
+  },
+  methods: {
+
+    getTextWith(text, fontStyle) {
+      // var canvas = document.createElement('canvas')
+      // var context = canvas.getContext('2d')
+      // context.font = fontStyle || '14px' // 设置字体样式
+      // var dimension = context.measureText(text)
+      // return dimension.width + 40
+    },
+    getData() {
+      let params = {
+        paramsManifestId: this.paramsManifest.id,
+        flag: '7'
+      }
+      console.log(params,'paramsparams')
+      getAction(this.url.tableHeader, params).then((res) => {
+        if (res.success) {
+          console.log(res,'res...头部')
+          var jsonHead = res.result
+          this.columns = []
+          // res.db_field_txt
+          jsonHead.forEach((res, index) => {
+            this.columns.push({
+              title: res.db_field_txt,
+              dataIndex: res.db_field_name,
+              align: 'center',
+              ellipsis: true,
+              sorter: res.sort
+            })
+            // if (res.click) {
+            //   this.columns[index].scopedSlots = {
+            //     customRender: 'detailClick'
+            //   }
+            // } else if (res.urlClick) {
+            //   this.columns[index].scopedSlots = {
+            //     customRender: 'urlClick'
+            //   }
+            // } else {
+            //   this.columns[index].scopedSlots = {
+            //     customRender: 'detailText'
+            //   }
+            // }
+          })
+          // let width = 0
+          // if (this.OperationList.length > 0) {
+          //   for (let i = 0; i < this.OperationList.length; i++) {
+          //     width += this.getTextWith(this.OperationList[i].text)
+          //   }
+          // }
+          if (this.showAction) {
+            this.columns.push({
+              title: this.$t('operation'),
+              align: 'center',
+              fixed: 'right',
+              width: width,
+              scopedSlots: { customRender: 'operation' }
+            })
+          }
+        }
+      })
+    },
+    tableOnChange(pagination, filters, sorter) {
+
+    },
+    getTableList() {
+      let params = {
+        paramsManifestId: this.paramsManifest.id,
+      }
+      console.log(params,'paykkkkk')
+      this.loading = true
+      getAction(this.url.tableList, params).then((res) => {
+        if (res.success) {
+          console.log(res,'res...list')
+          // if (res.result.current > 1 && res.result.records.length == 0) {
+          //   this.pageNo = res.result.current - 1
+          //   this.getTableList()
+          //   return
+          // }
+          // this.dataSource = res.result.records
+          // this.total = res.result.total
+          this.loading = false
+        } else {
+          this.loading = false
+        }
+      })
+    },
+    onChange(page, pageSize) {
+      // this.pageNo = page
+      // this.getTableList()
+    },
+    SizeChange(page, pageSize) {
+      // this.pageNo = 1
+      // this.pageSize = pageSize
+      // this.getTableList()
+    },
+    onSelectChange(value) {
+      // this.selectedRowKeys = value
+      // this.$emit('onSelectChange', value)
+    },
+    OperationClick(ol, item) {
+      // this.$emit(ol.ClickEvent, item)
+    },
+    detailClick(item, index) {
+      // this.$emit('detailClick', item)
+    },
+    urlClick(item) {
+      // window.open(item)
+    }
+  },
+  watch: {
+    paramsManifest(newVal, oldVal) {
+      this.getData()
+      this.getTableList()
+    }
+  }
+}
+</script>
+<style>
+.table .ant-table-column-title {
+  font-weight: bold;
+}
+
+.ant-table td {
+  white-space: nowrap;
+}
+</style>
+<style scoped>
+.box {
+  width: 100%;
+  height: calc(100% - 100px);
+  overflow: auto;
+}
+
+.text {
+  margin-right: 10px;
+}
+
+.page {
+  text-align: right;
+  margin-top: 20px;
+}
+</style>
diff --git a/jero-web/src/views/parameter/parameterlist/components/addModel.vue b/jero-web/src/views/parameter/parameterlist/components/addModel.vue
index a9fe82a35..7971c5fef 100644
--- a/jero-web/src/views/parameter/parameterlist/components/addModel.vue
+++ b/jero-web/src/views/parameter/parameterlist/components/addModel.vue
@@ -392,7 +392,7 @@ export default {
       val.forEach((item) => {
         _tt.push({
           textVal: item.text, // tab
-          certCategory: '', // 所属认证类别
+          certCategory: item.value, // 所属认证类别
           paramsNumber: '', // 编号
           paramsName: '', // 参数名称
           description: ''// 参数说明
diff --git a/jero-web/src/views/projectManagement/components/ParameterItemCollectionList.vue b/jero-web/src/views/projectManagement/components/ParameterItemCollectionList.vue
index 1fe959eec..65f870c08 100644
--- a/jero-web/src/views/projectManagement/components/ParameterItemCollectionList.vue
+++ b/jero-web/src/views/projectManagement/components/ParameterItemCollectionList.vue
@@ -60,46 +60,25 @@
       </a-row>
     </div>
     <div class="table-operator">
-      <div @click="handleAdd" class="operator-text">
-        <a-icon type="plus"/>
-        {{$t('add')}}{{ $t('detailedList') }}
-      </div>
-      <div @click="handleModule" class="operator-text">
-        <a-icon type="bulb"/>
-        {{$t('changeExtension')}}
-      </div>
-      <div @click="handleCody" class="operator-text">
-        <a-icon type="copy"/>
-        {{$t('copy')}}{{$t('parameter')}}{{ $t('detailedList') }}
-      </div>
-      <div @click="handleDel" class="operator-text" v-has="'document:deleteBatch'">
-        <a-icon type="delete"/>
-        {{$t('BatchDelete')}}
-      </div>
+<!--      <div @click="handleAdd" class="operator-text">-->
+<!--        <a-icon type="plus"/>-->
+<!--        {{$t('add')}}{{ $t('detailedList') }}-->
+<!--      </div>-->
+<!--      <div @click="handleModule" class="operator-text">-->
+<!--        <a-icon type="bulb"/>-->
+<!--        {{$t('changeExtension')}}-->
+<!--      </div>-->
+<!--      <div @click="handleCody" class="operator-text">-->
+<!--        <a-icon type="copy"/>-->
+<!--        {{$t('copy')}}{{$t('parameter')}}{{ $t('detailedList') }}-->
+<!--      </div>-->
+<!--      <div @click="handleDel" class="operator-text" v-has="'document:deleteBatch'">-->
+<!--        <a-icon type="delete"/>-->
+<!--        {{$t('BatchDelete')}}-->
+<!--      </div>-->
     </div>
     <div style="width: 100%">
-      <a-table
-        class='table-area'
-        ref='table'
-        size='middle'
-        rowKey='id'
-        :columns='columns'
-        :dataSource='dataSource'
-        :pagination='false'
-        :loading='loading'
-        :scroll='{x: 600}'
-        :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
-        @change='handleTableChange'>
-        <span slot="paramsManifestClick" slot-scope="text,record">
-          <a @click="paramsManifestClick(record)">{{text}}</a>
-        </span>
-        <span slot="operation" slot-scope="text,record">
-            <a class="text-operation" @click="configure(record)">{{$t('configure')}}</a>
-            <a class="text-operation" @click="edit(record)">{{$t('edit')}}</a>
-            <a class="text-operation" @click="deleteLib(record)">{{$t('deleteLib')}}</a>
-            <a class="text-operation" @click="historicalVersion(record)">{{$t('historicalVersion')}}</a>
-        </span>
-      </a-table>
+      <table-collection ref="CollectionTabel" :url='url' :paramsManifest='paramsManifest'/>
     </div>
     <div class="page">
       <a-pagination
@@ -113,27 +92,19 @@
       />
     </div>
     <a-modal v-model="areaVisible" :title="$t('parameterTemplate')" width='750px' :footer="null">
-<!--      <parameter-template v-if='areaVisible' @areaVisible='handleCancel' :templateTitle='templatetitle'-->
-<!--                          :selectedRowKeyS='selectedRowKeys' :rowId='rowId' :version='version'></parameter-template>-->
     </a-modal>
-<!--    <configure ref="configureRef" :url='url' :itemId='itemId'/>-->
   </a-card>
 </template>
 
 <script>
-// import ImportFile from '@/components/ImportFile/index'
-// import ParameterTemplate from '../dialog/ParameterTemplate'
+import TableCollection from '@/components/tableCollection/index'
 import { getAction,postAction } from '../../../api/manage'
-// import Configure from '../dialog/configure'
-import axios from 'axios'
 
 export default {
   name: 'ParameterItemCollectionList',
-  // components:{
-  //   ImportFile,
-  //   ParameterTemplate,
-  //   Configure
-  // },
+  components:{
+    TableCollection
+  },
   data(){
     return{
       columns:[
@@ -184,8 +155,8 @@ export default {
       selectedRowKeys: [],
       queryParam: {},
       url: {
-        getHeader: 'params/collectManifest/getHeader',
-        list: 'params/collectManifest/list',
+        tableHeader: 'params/collectManifest/getHeader',
+        tableList: 'params/collectManifest/list',
         // add: 'params/manifest/add',
         // edit: 'params/manifest/edit',
         // queryById: 'params/manifest/queryById',
@@ -219,158 +190,161 @@ export default {
   mounted() {
   },
   methods:{
-    paramsManifestClick(item) {
-      // let newUrl = this.$router.resolve({
-      //   path: '/ParameterItemCollection',
-      //   query: item
-      // })
-      // window.open(newUrl.href, '_blank')
-    },
-    deleteLib(val) {
-      let _this = this
-      this.$confirm({
-        content: _this.$t('ConfirmDelete'),
-        onOk() {
-          // getAction(_this.url.deleteBatch, { id: val.id }).then((res) => {
-          //   if (res.success) {
-          //     _this.$message.success(_this.$t('OperationSuccessful'))
-          //     _this.getlist()
-          //   } else {
-          //     _this.$message.warning(_this.$t('operationFailed'))
-          //   }
-          // })
-        }
-      })
-    },
-    handleTableChange() {
-
-    },
+    // paramsManifestClick(item) {
+    //   // let newUrl = this.$router.resolve({
+    //   //   path: '/ParameterItemCollection',
+    //   //   query: item
+    //   // })
+    //   // window.open(newUrl.href, '_blank')
+    // },
+    // deleteLib(val) {
+    //   let _this = this
+    //   this.$confirm({
+    //     content: _this.$t('ConfirmDelete'),
+    //     onOk() {
+    //       // getAction(_this.url.deleteBatch, { id: val.id }).then((res) => {
+    //       //   if (res.success) {
+    //       //     _this.$message.success(_this.$t('OperationSuccessful'))
+    //       //     _this.getlist()
+    //       //   } else {
+    //       //     _this.$message.warning(_this.$t('operationFailed'))
+    //       //   }
+    //       // })
+    //     }
+    //   })
+    // },
+    // handleTableChange() {
     //
-    historicalVersion() {
-
-    },
-    // 配置
-    configure(item) {
-      this.itemId = item.id
-      this.$refs.configureRef.addModel(item.id)
-    },
-    handleCancel(val) {
-      this.areaVisible = val
-      this.getlist()
-    },
+    // },
+    // //
+    // historicalVersion() {
+    //
+    // },
+    // // 配置
+    // configure(item) {
+    //   this.itemId = item.id
+    //   this.$refs.configureRef.addModel(item.id)
+    // },
+    // handleCancel(val) {
+    //   this.areaVisible = val
+    //   // this.getlist()
+    // },
     searchQuery() {
       this.pageNo = 1
-      this.getlist()
+      // this.getlist()
     },
     searchReset() {
       this.queryParam = {}
-      this.pageNo = 1
-      this.getlist()
-    },
-    onSelectChange(val) {
-      this.selectedRowKeys = val
-      this.selectedRowKeysArray = val.join(',')
-    },
-    edit(edit){
-      this.areaVisible = true
-      let _this = this
-      let query = {
-        paramsManifestId: this.paramsManifest.id
-      }
-      getAction(_this.url.getHeader, query).then((res) => {
-        if (res.success) {
-          console.log(res,'res..')
-          this.templatetitle = res.result.title
-          this.selectedRowKeys = res.result.paramsTemplateId.split(',')
-          this.rowId = res.result.id
-          this.version = res.result.paramsTemplatePublishVersion
-          console.log(this.selectedRowKeys,'this.selectedRowKeys')
-          console.log(typeof this.version)
-        } else {
-        }
-      })
-    },
-    handleAdd(){
-      this.areaVisible = true
-    },
-    handleModule(){
-
-    },
-    handleDel(){
-      let param={
-        ids: this.selectedRowKeysArray
-      }
-      if (this.selectedRowKeys.length > 0) {
-        let _this = this
-        this.$confirm({
-          content: _this.$t('ConfirmBatchDeletion'),
-          onOk() {
-            postAction(_this.url.deleteAll, param).then((res) => {
-              if (res.success) {
-                _this.$message.success(_this.$t('OperationSuccessful'))
-                _this.getlist()
-              } else {
-                _this.$message.warning(_this.$t('operationFailed'))
-              }
-            })
-          }
-        })
-      } else {
-        this.$message.warning(this.$t('selectLeastOne'))
-      }
-    },
-    handleCody() {
-
-    },
-    getPersonnelList(){
-
+      // this.pageNo = 1
+      // this.getlist()
     },
+    // onSelectChange(val) {
+    //   this.selectedRowKeys = val
+    //   this.selectedRowKeysArray = val.join(',')
+    // },
+    // edit(edit){
+    //   this.areaVisible = true
+    //   let _this = this
+    //   let query = {
+    //     paramsManifestId: this.paramsManifest.id
+    //   }
+    //   getAction(_this.url.getHeader, query).then((res) => {
+    //     if (res.success) {
+    //       console.log(res,'res..')
+    //       this.templatetitle = res.result.title
+    //       this.selectedRowKeys = res.result.paramsTemplateId.split(',')
+    //       this.rowId = res.result.id
+    //       this.version = res.result.paramsTemplatePublishVersion
+    //       console.log(this.selectedRowKeys,'this.selectedRowKeys')
+    //       console.log(typeof this.version)
+    //     } else {
+    //     }
+    //   })
+    // },
+    // handleAdd(){
+    //   this.areaVisible = true
+    // },
+    // handleModule(){
+    //
+    // },
+    // handleDel(){
+    //   let param={
+    //     ids: this.selectedRowKeysArray
+    //   }
+    //   if (this.selectedRowKeys.length > 0) {
+    //     let _this = this
+    //     this.$confirm({
+    //       content: _this.$t('ConfirmBatchDeletion'),
+    //       onOk() {
+    //         postAction(_this.url.deleteAll, param).then((res) => {
+    //           if (res.success) {
+    //             _this.$message.success(_this.$t('OperationSuccessful'))
+    //             // _this.getlist()
+    //           } else {
+    //             _this.$message.warning(_this.$t('operationFailed'))
+    //           }
+    //         })
+    //       }
+    //     })
+    //   } else {
+    //     this.$message.warning(this.$t('selectLeastOne'))
+    //   }
+    // },
+    // handleCody() {
+    //
+    // },
+    // getPersonnelList(){
+    //
+    // },
     pageOnChange() {
 
     },
     SizeChange() {
 
     },
-    getlist() {
-      let query = {
-        paramsManifestId: this.paramsManifest.id,
-        flag: '7'
-      }
-      console.log(this.paramsManifest,'this.paramsManifestthis.paramsManifestthis.paramsManifest')
-      getAction(this.url.getHeader, query).then((res) => {
-        if(res.success) {
-          console.log(res,'头部，，，')
-          // this.total =  res.result.total
-          // this.dataSource = res.result.records || []
-          this.loading = false
-        } else {
-          this.loading = false
-        }
-      })
-      // let query = {
-      //   pageSize: this.pageSize,
-      //   pageNo: this.pageNo,
-      //   ...this.queryParam
-      // }
-      // console.log(this.paramsManifest,'this.paramsManifestthis.paramsManifest')
-      // // console.log(this.$route.query,'this.query')
-      getAction(this.url.list, {}).then((res) => {
-        if(res.success) {
-          console.log(res,'oooo')
-          // this.total =  res.result.total
-          // this.dataSource = res.result.records || []
-          this.loading = false
-        } else {
-          this.loading = false
-        }
-      })
-    }
+    // // getlist() {
+    // //   let query = {
+    // //     paramsManifestId: this.paramsManifest.id,
+    // //   }
+    // //   let flag = {
+    // //     flag: '7'
+    // //   }
+    // //   let getquery = {...query,...flag}
+    // //   console.log(this.paramsManifest,'this.paramsManifestthis.paramsManifestthis.paramsManifest')
+    // //   getAction(this.url.getHeader, getquery).then((res) => {
+    // //     if(res.success) {
+    // //       console.log(res,'头部，，，')
+    // //       // this.total =  res.result.total
+    // //       // this.dataSource = res.result.records || []
+    // //       this.loading = false
+    // //     } else {
+    // //       this.loading = false
+    // //     }
+    // //   })
+    // //   // let query = {
+    // //   //   pageSize: this.pageSize,
+    // //   //   pageNo: this.pageNo,
+    // //   //   ...this.queryParam
+    // //   // }
+    // //   // console.log(this.paramsManifest,'this.paramsManifestthis.paramsManifest')
+    // //   // // console.log(this.$route.query,'this.query')
+    // //   getAction(this.url.list, query).then((res) => {
+    // //     if(res.success) {
+    // //       console.log(res,'oooo')
+    // //       // this.total =  res.result.total
+    // //       // this.dataSource = res.result.records || []
+    // //       this.loading = false
+    // //     } else {
+    // //       this.loading = false
+    // //     }
+    // //   })
+    // // }
   },
-  watch: {
-    paramsManifest(newVal, oldVal) {
-      this.getlist()
-    }
-  }
+  // watch: {
+  //   paramsManifest(newVal, oldVal) {
+  //     this.getlist()
+  //   }
+  // }
 }
 </script>