| /* * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for additional information * regarding |
| copyright ownership. The ASF licenses this file * to you under the Apache License, Version 2.0 (the * "License"); you may not use this file except in compliance * with the License. You may obtain a |
| copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, * software distributed under the License is distributed on an * "AS |
| IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND, either express or implied. See the License for the * specific language governing permissions and limitations * under the License. */ |
| |
| <template> |
| <div class="standTable"> |
| <div class="border_table"> |
| <el-table |
| :data="tableDatas.list" |
| style="width: 100%" |
| :height="Height" |
| :max-height="maxHeight" |
| tooltip-effect="light" |
| :cell-style="{ |
| padding: `${celineHeight ? celineHeight : 0}px ${celineWidth ? celineWidth : 0}px !important`, |
| }" |
| :header-cell-style="{ |
| color: 'black', |
| overflow: 'hidden', |
| background: '#F9FAFC', |
| padding: `${lineHeight ? lineHeight : 0}px ${lineWidth ? lineWidth : 0}px !important`, |
| }" |
| @selection-change="handleSelectionChange" |
| > |
| <el-table-column fixed="left" v-if="selectData" type="selection" width="50" align="center"> </el-table-column> |
| <el-table-column :key="item.prop" v-for="item of columns.list" min-width="180px" :width="item.width + 'px'" :align="item.align" :fixed="item.fixed" show-overflow-tooltip> |
| <template #header> |
| <span :class="{ spanbox: item.required }"></span> |
| <svg v-if="iconArr.icon[item.icon]" :class="['icon', { 'icon-time': item.icon === 'TIME' }]" @click="sqlClick" aria-hidden="true"> |
| <use :xlink:href="`#icon-${iconArr.icon[item.icon]}`"></use> |
| </svg> |
| <span :style="{ 'margin-left': iconArr.icon[item.icon] ? '5px' : '' }" :class="[{ closable: !!item.closable }]" :title="$t(item.label)" |
| >{{ $t(item.label) }} |
| <span class="el-icon-close" v-on:click="item.closable(item)"></span> |
| </span> |
| <i :class="item.icon" style="margin-left: 4px" @click="iconEvent(item.iconNum)"></i> |
| </template> |
| <template #default="scope"> |
| <el-input |
| v-if="item.type === 'INPUT' && (!scope.row[item.prop] || scope.row.display || item.canEdit)" |
| v-model="scope.row[item.prop]" |
| :size="item.size" |
| :class="{ borderRed: (scope.row.namecopy || !scope.row[item.prop]) && scope.row.border && item.border }" |
| :placeholder="$t('device.inputTip') + $t(item.label)" |
| @blur="item.event(scope, scope.row, scope.row[item.prop], $event, item)" |
| > |
| </el-input> |
| <el-input |
| v-if="item.type === 'TEXT'" |
| v-model="scope.row[item.prop]" |
| :maxlength="item.maxlength" |
| :size="item.size" |
| :placeholder="$t('device.inputTip') + $t(item.label)" |
| @blur="checkInput(scope.row[item.prop], item.required)" |
| > |
| </el-input> |
| <el-select |
| v-model="scope.row[item.prop]" |
| :class="{ borderRed: !scope.row[item.prop] && scope.row.seBorder }" |
| :placeholder="$t(item.label)" |
| v-if="item.type === 'SELECT' && (!scope.row[item.prop] || scope.row.display)" |
| :size="item.size" |
| @change="item.event(scope, scope.row)" |
| > |
| <el-option v-for="item in item.options" :key="item.value" :label="item.label" :value="item.value" @click="selectEncoding(item.value, scope.row)"> |
| <span style="float: left">{{ item.label }}</span> |
| </el-option> |
| </el-select> |
| <el-select |
| v-model="scope.row[item.prop]" |
| :class="{ borderRed: !scope.row[item.prop] && scope.row.seBorder }" |
| :placeholder="$t('device.selectTip')" |
| v-if="item.type === 'SELECTCH' && (!scope.row[item.prop] || scope.row.display)" |
| :size="item.size" |
| > |
| <el-option v-for="item in scope.row.options" :key="item.value" :label="item.label" :value="item.value"> |
| <span style="float: left">{{ item.label }}</span> |
| </el-option> |
| </el-select> |
| <!-- <div v-if="item.type === 'TAGS'"> |
| <span v-for="(item, index) in scope.row[item.prop]" :key="index"> {{ item }}={{ item[1] }}, </span> |
| </div> --> |
| <div v-if="item.type === 'ATTRIBUTES' || item.type === 'TAG'"> |
| <i v-if="!item.onlyShow" class="el-icon-edit editF" @click="editTag(scope.row[item.prop], scope.row.timeseries, item.prop, scope.$index)"></i> |
| <span v-for="(item, index) in scope.row[item.prop]" :key="index">{{ item[0] }} = {{ item[1] }}, </span> |
| </div> |
| <span |
| :class="item.type" |
| v-if="item.type && scope.row[item.prop] && !scope.row.display && item.type !== 'TEXT' && item.type !== 'ATTRIBUTES' && item.type !== 'TAG' && item.prop !== 'alias'" |
| >{{ scope.row[item.prop] }}</span |
| > |
| <span class="item.type" v-if="!item.type">{{ scope.row[item.prop] || item.value }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column fixed="right" v-if="actionO" :label="$t(actionO.label)" min-width="150px"> |
| <template #default="scope"> |
| <slot :scope="scope"></slot> |
| </template> |
| </el-table-column> |
| </el-table> |
| </div> |
| <div class="paination" v-if="paginations || deleteArry"> |
| <el-button v-if="deleteArry" type="primary" @click="deleteArrys">{{ $t('standTable.deleteArry') }}</el-button> |
| <div></div> |
| <el-pagination |
| v-if="paginations" |
| @size-change="handleSizeChange" |
| @current-change="getList" |
| v-model:currentPage="paginations.pageNum" |
| :page-size="paginations.pageSize" |
| layout="total, prev, pager, next" |
| :total="total" |
| :hide-on-single-page="true" |
| > |
| </el-pagination> |
| </div> |
| <el-dialog :title="`${edData.label}编辑`" v-model="dialogFormVisible.flag" width="500px" class="dialog_tag"> |
| <div class="tag_content"> |
| <div> |
| <span>物理量名称：</span><span>{{ edData.name }}</span> |
| </div> |
| <div> |
| <span>物理量{{ edData.label }}：</span> |
| <svg class="icon" aria-hidden="true" @click="addData(edData.data)"> |
| <use xlink:href="#icon-add1"></use> |
| </svg> |
| </div> |
| <div class="content"> |
| <div v-for="(item, index) in edData.data" :key="index"> |
| <el-input v-model="item[0]" size="small" maxlength="30" :placeholder="`${edData.label}名`" /> = |
| <el-input v-model="item[1]" size="small" maxlength="30" :placeholder="`${edData.label}值`" /><el-button type="text" |
| ><i class="el-icon-delete" @click="deleTag(edData.data, index)" |
| /></el-button> |
| </div> |
| </div> |
| </div> |
| <template #footer> |
| <span class="dialog-footer"> |
| <el-button @click="dialogFormVisible.flag = false">取 消</el-button> |
| <el-button type="primary" @click="confirmTag">确 定</el-button> |
| </span> |
| </template> |
| </el-dialog> |
| </div> |
| </template> |
| |
| <script> |
| import { ElTable, ElTableColumn, ElInput, ElSelect, ElOption, ElMessage, ElButton, ElPagination, ElDialog } from 'element-plus'; |
| import { onActivated, reactive } from 'vue'; |
| export default { |
| name: 'StandTable', |
| props: { |
| column: Array, |
| tableData: Array, |
| selectData: Function, |
| maxHeight: Number, |
| Height: Number, |
| lineHeight: Number, |
| lineWidth: Number, |
| pagination: Object, |
| deleteArry: Function, |
| encoding: Object, |
| total: Number, |
| getList: Function, |
| celineWidth: Number, |
| celineHeight: Number, |
| backColor: String, |
| }, |
| setup(props, { emit }) { |
| let dialogFormVisible = reactive({ |
| flag: false, |
| }); |
| const iconArr = reactive({ |
| icon: { |
| INT64: 'int64', |
| BOOLEAN: 'buer', |
| INT32: 'int32', |
| TEXT: 'TEXT', |
| DOUBLE: 'DOUBLE', |
| FLOAT: 'FLOAT', |
| TIME: 'time', |
| }, |
| }); |
| let edData = reactive({ |
| data: [], |
| name: '', |
| label: '', |
| }); |
| const columns = reactive({ |
| list: {}, |
| }); |
| const actionA = props.column.list.filter((item) => item.prop === 'action'); |
| columns.list = props.column.list.filter((item) => item.prop !== 'action'); |
| const actionO = actionA.length > 0 ? reactive(actionA[0]) : ''; |
| const paginations = reactive(props.pagination); |
| const tableDatas = reactive(props.tableData); |
| const encodings = reactive(props.encoding); |
| function handleSelectionChange(val) { |
| props.selectData(val); |
| } |
| function deleteArrys() { |
| props.deleteArry(); |
| } |
| function checkInput(val, flag) { |
| if (!val && flag) { |
| ElMessage({ |
| showClose: true, |
| message: '该项值不能为空，请填写', |
| type: 'error', |
| }); |
| } |
| } |
| function getlist(val) { |
| console.log(11111); |
| console.log(val); |
| } |
| function handleCurrentChange(val) { |
| console.log(val); |
| emit('getPagintions', val); |
| } |
| function getColumn(data) { |
| columns.list = data.filter((item) => item.prop !== 'action'); |
| } |
| function selectEncoding(val, row) { |
| row.options = encodings[val]; |
| if (!row.options) { |
| row.options = encodings.DEFAULT; |
| } |
| if (val === 'FLOAT' || val === 'DOUBLE') { |
| row.encoding = row.options[row.options.length - 1].value; |
| } else { |
| row.encoding = row.options[0].value; |
| } |
| } |
| function iconEvent(iconNum) { |
| emit('iconEvent', iconNum); |
| } |
| function editTag(arr, name, str, index) { |
| let obj = { |
| tags: '标签', |
| attributes: '属性', |
| }; |
| edData.data = [...arr]; |
| edData.name = name; |
| edData.label = obj[str]; |
| edData.index = index; |
| dialogFormVisible.flag = true; |
| } |
| function addData(arr) { |
| arr.unshift([null, null]); |
| } |
| function deleTag(arr, index) { |
| arr.splice(index, 1); |
| } |
| const isRepeat = (arr) => { |
| var hash = {}; |
| |
| for (var i in arr) { |
| if (hash[arr[i]]) return true; |
| |
| hash[arr[i]] = true; |
| } |
| |
| return false; |
| }; |
| |
| const confirmTag = () => { |
| let result = isRepeat(edData.data.map((d) => d[0])); |
| let keys = edData.data.map((d) => d[0]); |
| let values = edData.data.map((d) => d[1]); |
| |
| let pattern = /^[0-9]*$/; |
| if (keys.every((d) => pattern.test(d)) || values.every((d) => pattern.test(d))) { |
| ElMessage.error(`${edData.label}不能完全为数值`); |
| return; |
| } |
| if (edData.data.length && (!keys.every((d) => d !== null) || !values.find((d) => d !== null))) { |
| ElMessage.error(`请填写完整`); |
| return; |
| } |
| if (result) { |
| ElMessage.error(`${edData.label}名不能重复`); |
| return; |
| } |
| if (edData.label === '标签') { |
| tableDatas.list[edData.index].tags = edData.data; |
| } else { |
| tableDatas.list[edData.index].attributes = edData.data; |
| } |
| dialogFormVisible.flag = false; |
| }; |
| onActivated(() => { |
| // |
| }); |
| return { |
| iconArr, |
| deleTag, |
| addData, |
| deleteArrys, |
| edData, |
| columns, |
| actionO, |
| paginations, |
| tableDatas, |
| checkInput, |
| handleSelectionChange, |
| handleCurrentChange, |
| selectEncoding, |
| getlist, |
| iconEvent, |
| getColumn, |
| editTag, |
| dialogFormVisible, |
| confirmTag, |
| }; |
| }, |
| components: { |
| ElTable, |
| ElTableColumn, |
| ElInput, |
| ElSelect, |
| ElOption, |
| ElButton, |
| ElPagination, |
| ElDialog, |
| }, |
| }; |
| </script> |
| |
| <style lang="scss" scoped> |
| .standTable { |
| .icon { |
| cursor: pointer; |
| } |
| .icon-time { |
| color: #4eb5ff; |
| } |
| } |
| .border_table { |
| border-radius: 4px; |
| border: 1px solid #eaecf0; |
| } |
| .editF { |
| cursor: pointer; |
| padding-right: 3px; |
| } |
| .tag_content { |
| div { |
| padding: 8px 0; |
| } |
| .icon_color { |
| cursor: pointer; |
| color: #7a859f; |
| } |
| .content { |
| div { |
| text-align: center; |
| } |
| i { |
| color: red; |
| } |
| .el-input__inner { |
| width: 150px; |
| } |
| } |
| } |
| .spanbox::before { |
| content: '*'; |
| color: #f56c6c; |
| margin-right: 4px; |
| } |
| .paination { |
| display: flex; |
| justify-content: space-between; |
| margin-top: 10px; |
| |
| // padding: 10px 0px; |
| .el-pagination { |
| padding: 4px 5px 0 5px; |
| } |
| } |
| .export_button { |
| height: 30px; |
| line-height: 0px; |
| min-height: 0 !important; |
| } |
| .el-icon-close { |
| display: none; |
| position: absolute; |
| top: 5px; |
| cursor: pointer; |
| } |
| .closable { |
| &:hover > .el-icon-close { |
| display: inline-block; |
| position: absolute; |
| top: 5px; |
| cursor: pointer; |
| } |
| } |
| :deep(.el-table) th > .cell { |
| white-space: nowrap; |
| } |
| </style> |
| <style lang="scss"> |
| .borderRed { |
| .el-input__inner { |
| border: 1px solid red; |
| } |
| } |
| .tag_content { |
| .content { |
| .el-input { |
| width: 100px; |
| padding: 0 16px; |
| } |
| } |
| } |
| </style> |
