<!--
|
* @Date: 2024-10-05 09:51:45
|
* @LastEditors: gaoshp
|
* @LastEditTime: 2024-10-07 09:51:11
|
* @FilePath: /cps-web/src/views/console/workstation/CollTable.vue
|
-->
|
<template>
|
<div>
|
<el-table :data="tabledata" height="200px">
|
<el-table-column v-for="item in cols" :key="item.prop" :prop="item.prop" :label="item.label" width="120">
|
<template #header="scope">
|
<span v-show="item.isRequired" style="color: red;">*</span>
|
<span>{{ scope.column.label }}</span>
|
<el-tooltip class="box-item" effect="dark" placement="top-start">
|
<template #content>
|
<p v-html="item.describe"></p>
|
</template>
|
<el-icon v-show="item.describe"><el-icon-question-filled /></el-icon>
|
</el-tooltip>
|
|
</template>
|
<template #default="scope">
|
<el-select disabled v-model="scope.row[item.prop]" placeholder="" size="small"
|
v-if="item.type === 'option'">
|
<el-option v-for="item in item.options" :key="item" :label="item" :value="item" />
|
</el-select>
|
<el-switch disabled size="small" v-model="scope.row[item.prop]"
|
v-else-if="item.type === 'boolean'" />
|
<span v-else>{{ scope.row[item.prop] }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
props: {
|
info: {
|
type: Object,
|
default() {
|
return {}
|
}
|
}
|
},
|
watch: {
|
info: {
|
handler() {
|
this.getList({
|
workstationId: this.info.id,
|
})
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
data() {
|
return {
|
cols: [],
|
tabledata: []
|
}
|
},
|
methods: {
|
refresh() {
|
this.getList({
|
workstationId: this.info.id,
|
})
|
},
|
getList(params) {
|
this.$HTTP.get(`/api/blade-cps/workstation/listDatapointsByWorkstationId`, {}, { params }).then(res => {
|
try {
|
this.cols = JSON.parse(res.data.dpHead)
|
if (this.cols.filter(v => v.prop === 'dplabel').length === 0) {
|
this.cols.unshift(
|
{
|
label: "显示名称",
|
prop: "dplabel",
|
isRequired: true,
|
}
|
)
|
}
|
} catch (error) {
|
this.cols = []
|
}
|
try {
|
this.tabledata = JSON.parse(res.data.dpConfig).map(v => {
|
v.status = null
|
return v
|
}) || [];
|
} catch (error) {
|
this.tabledata = []
|
}
|
})
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped></style>
|
