diff --git a/jero-web/package-lock.json b/jero-web/package-lock.json index c621e69d5..5038e50fb 100644 --- a/jero-web/package-lock.json +++ b/jero-web/package-lock.json @@ -34,6 +34,7 @@ "vue": "^2.6.10", "vue-area-linkage": "^5.1.0", "vue-cropper": "^0.5.4", + "vue-draggable-resizable": "^2.1.0", "vue-i18n": "^8.26.8", "vue-loader": "^15.7.0", "vue-ls": "^3.2.0", @@ -19415,6 +19416,15 @@ "resolved": "https://registry.npmjs.org/vue-cropper/-/vue-cropper-0.5.6.tgz", "integrity": "sha512-54Z/AipXDBcE5nzJweTM+BryzSAcC0FCTMQLvLt6f4XanP4AWB3mPkQw3PG3NRICo7knljHO+N+pjZxYAKoTLQ==" }, + "node_modules/vue-draggable-resizable": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/vue-draggable-resizable/-/vue-draggable-resizable-2.1.0.tgz", + "integrity": "sha512-DQe5JjiqPjndc3XZkkZAMVygMlJ4TLcpMWM78IkizHeJBfX5Ki6OKZPxrT+HE7w/12d+OfWom5Y5phYcrwCzqg==", + "engines": { + "node": ">= 4.0.0", + "npm": ">= 3.0.0" + } + }, "node_modules/vue-eslint-parser": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz", @@ -37285,6 +37295,11 @@ "resolved": "https://registry.npmjs.org/vue-cropper/-/vue-cropper-0.5.6.tgz", "integrity": "sha512-54Z/AipXDBcE5nzJweTM+BryzSAcC0FCTMQLvLt6f4XanP4AWB3mPkQw3PG3NRICo7knljHO+N+pjZxYAKoTLQ==" }, + "vue-draggable-resizable": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/vue-draggable-resizable/-/vue-draggable-resizable-2.1.0.tgz", + "integrity": "sha512-DQe5JjiqPjndc3XZkkZAMVygMlJ4TLcpMWM78IkizHeJBfX5Ki6OKZPxrT+HE7w/12d+OfWom5Y5phYcrwCzqg==" + }, "vue-eslint-parser": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz", diff --git a/jero-web/package.json b/jero-web/package.json index c8f4fbeb9..da4e81b29 100644 --- a/jero-web/package.json +++ b/jero-web/package.json @@ -36,6 +36,7 @@ "vue": "^2.6.10", "vue-area-linkage": "^5.1.0", "vue-cropper": "^0.5.4", + "vue-draggable-resizable": "^2.1.0", "vue-i18n": "^8.26.8", "vue-loader": "^15.7.0", "vue-ls": "^3.2.0", diff --git a/jero-web/src/common/lang/en-us.js b/jero-web/src/common/lang/en-us.js index 8bb2e75d2..91b9ecd39 100644 --- a/jero-web/src/common/lang/en-us.js +++ b/jero-web/src/common/lang/en-us.js @@ -707,6 +707,7 @@ module.exports = { uploadTime: 'Upload time', enclosure: 'enclosure', // 认证 + configurationInformation: 'configuration Information', modifyprojectInterfacePerson: 'modify project Interface Person', operatethisbutton: 'You do not have permission to operate this button', ParameterLibrary: 'Parameter Library', diff --git a/jero-web/src/common/lang/zh-cn.js b/jero-web/src/common/lang/zh-cn.js index 960b2e1f0..c17fe81ea 100644 --- a/jero-web/src/common/lang/zh-cn.js +++ b/jero-web/src/common/lang/zh-cn.js @@ -717,6 +717,7 @@ module.exports = { uploadTime: '上传时间', enclosure: '附件', // 认证 + configurationInformation: '配置信息', modifyprojectInterfacePerson: '修改工程接口人', operatethisbutton: '没有权限操作此按钮', ParameterLibrary: '参数库', diff --git a/jero-web/src/components/tableCollection/index.vue b/jero-web/src/components/tableCollection/index.vue index 8813b4c1b..d4056b84f 100644 --- a/jero-web/src/components/tableCollection/index.vue +++ b/jero-web/src/components/tableCollection/index.vue @@ -10,9 +10,13 @@ :data-source="dataSource" :loading="loading" :columns="columns" + :components="components" @change="tableOnChange" @onHeaderRow='onHeaderRow' > + + {{ text.sortOrder }} 查看 + @@ -54,20 +58,6 @@ - - - - {{!record.collectFlag || record.collectFlag == 0 ? $t('Collection') :$t('CancelCollection')}} - - - {{!record.subscribeFlag || record.subscribeFlag == 0 ? $t('subscribe') :$t('CancelSubscribe')}} - - - {{ol.text}} - - - @@ -105,6 +95,40 @@ + + +
+
+ {{$t('configurationName')}}: + {{configDetail.configName}} +
+
+
+
+ {{$t('Model')}}: + {{configDetail.carType}} +
+
+ {{$t('electricMachinery')}}: + {{configDetail.motor}} +
+
+
+
+ {{$t('Version')}}: + {{configDetail.version}} +
+
+ {{$t('Battery')}}: + {{configDetail.battery}} +
+
+
@@ -115,6 +139,7 @@ import CollectionType from '@/components/CollectionType' import { ACCESS_TOKEN } from '@/store/mutation-types' import axios from 'axios' import Vue from 'vue' +import VueDraggableResizable from 'vue-draggable-resizable' export default { name: 'index', props: { @@ -135,9 +160,48 @@ export default { } }, components: { - CollectionType + CollectionType, + VueDraggableResizable }, data() { + this.components = { + header: { + cell: (h, props, children) => { + const { key, ...restProps } = props + + // 此处的this.columns 是定义的table的表头属性变量 + + const col = this.columns.find((col) => { + const k = col.dataIndex || col.key + return k === key + }) + + if (!col || !col.width) { + return h('th', { ...restProps }, [...children]) + } + + const dragProps = { + key: col.dataIndex || col.key, + class: 'table-draggable-handle', + attrs: { + w: 10, + x: col.width, + z: 1, + axis: 'x', + draggable: true, + resizable: false, + }, + on: { + dragging: (x, y) => { + col.width = Math.max(x, 1) + }, + }, + } + const drag = h('vue-draggable-resizable', { ...dragProps }) + return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag]) + }, + }, + } return { token:Vue.ls.get(ACCESS_TOKEN), jsonBody: [], @@ -177,11 +241,44 @@ export default { querySdtList: [], // 工程接口人 Dateline: {}, getquerySdtId: '', // 当前工程接口人的id + areaVisibleView: false, // 查看配置得弹框 + configDetail: {}, // 查看配置得详细信息 } }, mounted() { }, methods: { + // 查看配置详细信息 + onClickSee(val) { + let _this = this + this.areaVisibleView = true + axios({ + url: `/jero-boot/params/config/getById?id=${val.sortColumn.dataIndex}`, + method: 'get', + transformRequest: [function (data) { + let ret = '' + for (let it in data) { + ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' + } + return ret + }], + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + 'X-Access-Token':_this.token + } + }) + .then( (res) =>{ + console.log(res) + if (res.data.success) { + this.configDetail = res.data.result + }else{ + _this.$message.warning(res.data.result) + } + }) + .catch( (error) =>{ + console.log(error); + }); + }, // 获取工程接口人 getquerySdtList(record) { // 当前工程接口人的id @@ -274,34 +371,36 @@ export default { var jsonHead = res.result this.columns = [] 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.type) { - this.columns[index].scopedSlots = { - customRender: 'detailClick' + // 配置列 + if(res.type) { + this.columns.push({ + dataIndex: res.db_field_name, + align: 'center', + ellipsis: true, + sorter: res.sort, + sortOrder: res.db_field_txt + }) + this.columns[index].scopedSlots = { + customRender: 'detailClick', + title: 'titleName' + } + // 非配置列 + } else { + 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: 'operationbtn' + } } } - if(res.click) { - // 工程接口人列表修改 - this.columns[index].scopedSlots = { - customRender: 'operationbtn' - } - } }) - if (this.showAction) { - this.columns.push({ - title: this.$t('operation'), - align: 'center', - fixed: 'right', - width: width, - scopedSlots: { customRender: 'operation' } - }) - } } }) }, @@ -382,6 +481,37 @@ export default { .ant-table td { white-space: nowrap; } +.content-text { + width: 100%; + display: flex; + flex-wrap: wrap; + .text-field { + width: 50%; + margin-bottom: 8px; + display: flex; + .text-field-left { + width: 100px; + display: inline-block; + font-size: 14px; + font-weight: 400; + color: #6F7385; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + margin-right: 24px; + } + + .text-field-right { + display: inline-block; + font-size: 16px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + color: #040B29; + font-weight: 400; + } + } +} diff --git a/jero-web/src/main.js b/jero-web/src/main.js index 1258d507d..ed0e649f6 100644 --- a/jero-web/src/main.js +++ b/jero-web/src/main.js @@ -56,7 +56,9 @@ import '@/assets/less/JAreaLinkage.less' import VueAreaLinkage from 'vue-area-linkage' import '@/components/jero/JVxeTable/install' import '@/components/JVxeCells/install' - +// 挂载全局使用的方法 +import VueDraggableResizable from 'vue-draggable-resizable' +Vue.component('vue-draggable-resizable', VueDraggableResizable) Vue.config.productionTip = false Vue.use(Storage, config.storageOptions) Vue.use(Antd) diff --git a/jero-web/src/views/projectManagement/components/TaskParameterCollection.vue b/jero-web/src/views/projectManagement/components/TaskParameterCollection.vue index 0f42d2479..ae2641f4b 100644 --- a/jero-web/src/views/projectManagement/components/TaskParameterCollection.vue +++ b/jero-web/src/views/projectManagement/components/TaskParameterCollection.vue @@ -72,17 +72,24 @@ @showSizeChange="SizeChange" /> + - + + + + + + + + + \ No newline at end of file