[add] 查看配置
This commit is contained in:
zhaomeijing
@@ -10,9 +10,13 @@
|
||||
:data-source="dataSource"
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:components="components"
|
||||
@change="tableOnChange"
|
||||
@onHeaderRow='onHeaderRow'
|
||||
>
|
||||
<span slot="titleName" slot-scope="text">
|
||||
<span style='padding-right: 20px'>{{ text.sortOrder }} </span><a-button @click='onClickSee(text)'>查看</a-button>
|
||||
</span>
|
||||
<span slot="operationbtn" slot-scope="record">
|
||||
<!-- 待发起收集 1-->
|
||||
<!-- 待工程接口人处理 2-->
|
||||
@@ -54,20 +58,6 @@
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<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">
|
||||
<collection-type :detailDate='text' />
|
||||
</span>
|
||||
@@ -105,6 +95,40 @@
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
<!-- 配置信息--->
|
||||
<a-modal v-model="areaVisibleView" :title="$t('configurationInformation')" width='550px' :footer="null">
|
||||
<div class="content-text">
|
||||
<div class="text-field">
|
||||
<span class="text-field-left" :title="$t('configurationName')">{{$t('configurationName')}}:</span>
|
||||
<span class="text-field-right"
|
||||
>{{configDetail.configName}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-text">
|
||||
<div class="text-field">
|
||||
<span class="text-field-left" :title="$t('Model')">{{$t('Model')}}:</span>
|
||||
<span class="text-field-right"
|
||||
>{{configDetail.carType}}</span>
|
||||
</div>
|
||||
<div class="text-field">
|
||||
<span class="text-field-left" :title="$t('electricMachinery')">{{$t('electricMachinery')}}:</span>
|
||||
<span class="text-field-right"
|
||||
>{{configDetail.motor}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-text">
|
||||
<div class="text-field">
|
||||
<span class="text-field-left" :title="$t('Version')">{{$t('Version')}}:</span>
|
||||
<span class="text-field-right"
|
||||
>{{configDetail.version}}</span>
|
||||
</div>
|
||||
<div class="text-field">
|
||||
<span class="text-field-left" :title="$t('Battery')">{{$t('Battery')}}:</span>
|
||||
<span class="text-field-right"
|
||||
>{{configDetail.battery}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.box {
|
||||
@@ -398,4 +528,20 @@ export default {
|
||||
text-align: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.table-draggable-handle {
|
||||
/* width: 10px !important; */
|
||||
height: 100% !important;
|
||||
left: auto !important;
|
||||
right: -5px;
|
||||
cursor: col-resize;
|
||||
touch-action: none;
|
||||
border: none;
|
||||
position: absolute;
|
||||
transform: none !important;
|
||||
bottom: 0;
|
||||
}
|
||||
.resize-table-th {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user