<template>
<div id="main" class="h-all">
<el-container class="h-all">
<el-header height="auto">
<div class="header-button-box">
<el-button size='mini' icon="el-icon-circle-plus-outline" type="primary"
v-if="createAndCopyCommand.visible"
@click="createIndexTemplateInit">
{{$t("common.createBtn")}}
</el-button>
<el-button size='mini' icon="el-icon-delete" type="danger"
v-if="deleteCommand.visible"
@click="deleteIndexTemplateInitEL">{{$t("common.deleteBtn")}}
</el-button>
<div class="search">
<div class="search-div">
<label>{{$t('IndexTemplate.indexTemplateName')}}：</label>
<el-input size='mini' :placeholder="$t('common.placeholder')"
v-model="queryIndexTemplateName"
style="width: 180px"
clearable>
</el-input>
</div>
<div class="search-div">
<label>{{$t('IndexTemplate.deviceModel')}}：</label>
<el-select v-model="queryDeviceModel" size="mini" :placeholder="$t('common.selectOption')" :clearable="true">
<el-option
v-for="item in deviceModelList"
:key="item.deviceModelKey"
:label="item.deviceModel"
:value="item.deviceModel">
</el-option>
</el-select>
</div>
<div class="search-div">
<el-button icon="el-icon-search" type="primary" size = 'mini' @click="queryIndexTemplateByCondition">{{$t('common.queryBtn')}}</el-button>
</div>
</div>
</div>
</el-header>
<!-- table数据表格 -->
<el-main class="adapt-height-box">
<el-table
:empty-text="$t('common.noData')"
tooltip-effect="dark"
ref="singleTable"
:span-method="cellMerge"
:data="indexTemplateColl"
stripe
header-row-class-name="table-header"
cell-class-name="table-cell"
class="adapt-height"
height="auto"
border
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="28">
</el-table-column>
<el-table-column
prop="performTemplateName"
:label="$t('IndexTemplate.indexTemplateName')">
</el-table-column>
<el-table-column
prop="description"
:label="$t('IndexTemplate.description')">
</el-table-column>
<el-table-column
prop="deviceType"
:label="$t('IndexTemplate.deviceType')">
</el-table-column>
<el-table-column
prop="deviceModel"
:label="$t('IndexTemplate.deviceModel')">
</el-table-column>
<el-table-column
prop="performName"
:label="$t('IndexTemplate.index')"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
width="105px"
v-if="updateCommand.visible"
:label="$t('common.operation')">
<template slot-scope="scope">
<el-button
size="mini"
style="background: #175BE3"
:title="$t('common.copyBtn')"
@click="handleCopy(scope.row)">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fuzhi"></use>
</svg>
</el-button>
<el-button
size="mini"
style="background: #008000"
:title="$t('common.updateBtn')"
@click="handleUpdate(scope.row)">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-bianji"></use>
</svg>
</el-button>
</template>
</el-table-column>
</el-table>
</el-main>
</el-container>
<CommandExecuteContext v-bind:commands="commandContext"></CommandExecuteContext>
</div>
</template>
<script>
import CommandExecuteContext from '../../commands/CommandExecuteContext'
import IndexTemplateCommands from '../../commands/IndexTemplateCommands'
import IndexTeplateService from '../../domain/services/IndexTeplateService'
import DeviceService from '@/domain/services/DeviceService'
import HelperUtil from '../../utils/HelperUtil'
import loading from '../../utils/Loading'
export default {
name: 'IndexTemplate',
components: {
CommandExecuteContext
},
data: function () {
return {
// 命令
commandContext: {},
// 为修改传参数
multipleSelection: [],
createAndCopyInitList: {},
deleteList: [],
copyInitList: {},
updateInitList: {},
queryIndexTemplateName: '',
queryDeviceModel: '',
selectList: [],
deviceModelList: [],
spanArr: [],
pos: 0,
IndexTemplateArray: [],
// 双向绑定展示数据
indexTemplateList0: [],
indexTemplateList: [],
indexTemplateColl: [],
}
},
computed: {
createAndCopyCommand () {
return IndexTemplateCommands.createAndCopyCommand(this.createAndCopyTitle, this.createAndCopyInitList, this.commandContext)
},
copyCommand () {
return IndexTemplateCommands.copyCommand(this.copyInitList, this.commandContext)
},
deleteCommand () {
return IndexTemplateCommands.deleteIndexTemplateCommand(this.deleteList, this.commandContext)
},
updateCommand () {
return IndexTemplateCommands.updateIndexTemplateCommand(this.updateInitList, this.commandContext)
}
},
created: function () {
if (this.$route.query.performTemplateName != null) {
this.queryIndexTemplateName = this.$route.query.performTemplateName
this.TurnFromCollectTask(this.$route.query.performTemplateName)
}
if (this.$route.query.performTemplateName == null) {
this.getAllIndexTemplate()
// this.queryInit()
}
this.getAllDeviceModel()
},
methods: {
/**
* @Description : 跳转查询
* @author : ls
* @date : 2020/4/29 14:09
* @param :
* @return :
*/
TurnFromCollectTask: function (val) {
let _this = this
_this.selectList = []
_this.selectList.push({
quaryAttribute: 'performTemplateName',
compareSymbol: 'like',
compareValue: val
})
IndexTeplateService.queryIndexTemplate(_this.selectList).then(result => {
_this.indexTemplateList0 = result
_this.indexTemplateList = Object.values(result)
if (_this.indexTemplateList.length === 0) {
this.InfoTip.warningTip(_this, HelperUtil.getCheckStatusCodeObjectByCode(_this.successCode.QUERY_NULL_CODE))
} else {
this.handleIndexTemplateList()
this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.QUERY_CODE))
}
}).catch(err => {
this.InfoTip.errorTip(_this, err)
})
},
/**
* @Description : 复制
* @author : ls
* @date : 2020/5/25 11:53
* @param :
* @return :
*/
copyDeviceInit: function (val) {
this.copyInitList = val
this.copyCommand.execute()
},
/**
* @Description : 修改
* @author : ls
* @date : 2020/5/25 11:54
* @param :
* @return :
*/
updateDeviceInit: function (val) {
this.updateInitList = val
this.updateCommand.execute()
},
/**
* @Description : fuzhi
* @author : ls
* @date : 2020/4/27 10:54
* @param :
* @return :
*/
handleCopy: function (row) {
this.copyInitList = this.indexTemplateList0[row.performTemplateKey]
this.copyCommand.execute()
},
/**
* @Description : xiugai
* @author : ls
* @date : 2020/4/27 10:55
* @param :
* @return :
*/
handleUpdate: function (row) {
this.updateInitList = this.indexTemplateList0[row.performTemplateKey]
this.updateCommand.execute()
},
/**
* @Description : 合并判断
* @author : ls
* @date : 2020/4/27 10:32
* @param :
* @return :
*/
cellMerge ({ rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 6) {
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
},
/**
* @Description : 合并判断
* @author : ls
* @date : 2020/4/27 10:30
* @param :
* @return :
*/
getSpanArr (data) {
this.spanArr = []
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1)
this.pos = 0
} else {
if (data[i].performTemplateKey === data[i - 1].performTemplateKey) {
this.spanArr[this.pos] += 1
this.spanArr.push(0)
} else {
this.spanArr.push(1)
this.pos = i
}
}
}
},
/**
* @Description : shezhitiaojian
* @author : ls
* @date : 2020/4/27 10:05
* @param :
* @return :
*/
setSelectList: function () {
this.selectList = []
if (this.queryDeviceModel !== null && this.queryDeviceModel !== '') {
this.selectList.push({
quaryAttribute: 'deviceModel',
compareSymbol: '=',
compareValue: this.queryDeviceModel
})
}
if (this.queryIndexTemplateName !== '' && this.queryIndexTemplateName !== null) {
this.selectList.push({
quaryAttribute: 'performTemplateName',
compareSymbol: 'like',
compareValue: this.queryIndexTemplateName
})
}
},
/**
* @Description : 查询
* @author : ls
* @date : 2020/6/10 15:50
* @param :
* @return :
*/
queryInit: function () {
this.beginItem = 1
this.setSelectList()
let _this = this
let loadingInstance = _this.Loading.openLoading()
IndexTeplateService.getIndexTemplateTotalCounts(this.selectList).then(result => {
_this.total = result
_this.Loading.closeLoading(loadingInstance)
if (this.total === 0 || this.total < 0) {
_this.indexTemplateColl = []
} else {
if (this.total < 100 && this.total > 0) {
this.endItem = this.total
} else {
this.endItem = 100
}
this.queryIndexTemplateDataByConditionCurrentPage()
}
}).catch(err => {
_this.Loading.closeLoading(loadingInstance)
_this.InfoTip.errorTip(_this, err)
})
},
/**
* @Description : 分页
* @author : ls
* @date : 2020/6/10 15:58
* @param :
* @return :
*/
queryIndexTemplateDataByConditionCurrentPage: function () {
let _this = this
let loadingInstance = _this.Loading.openLoading()
IndexTeplateService.queryIndexTemplateListPaging(this.beginItem, this.endItem, this.selectList).then(result => {
_this.indexTemplateList0 = result
_this.indexTemplateList = Object.values(result)
if (_this.indexTemplateList.length === 0) {
_this.Loading.closeLoading(loadingInstance)
} else {
this.handleIndexTemplateList()
_this.Loading.closeLoading(loadingInstance)
}
}).catch(err => {
_this.Loading.closeLoading(loadingInstance)
_this.InfoTip.errorTip(_this, err)
})
},
/**
* @Description : 条件查询
* @author : ls
* @date : 2020/6/10 16:22
* @param :
* @return :
*/
queryIndexTemplateByCondition1: function () {
this.beginItem = 1
this.setSelectList()
this.IndexTemplateDataTotalNumber()
},
/**
* @Description :
* @author : ls
* @date : 2020/6/10 16:26
* @param :
* @return :
*/
IndexTemplateDataTotalNumber: function () {
let _this = this
let loadingInstance = _this.Loading.openLoading()
IndexTeplateService.getIndexTemplateTotalCounts(_this.selectList).then(result => {
_this.total = result
_this.Loading.closeLoading(loadingInstance)
if (_this.total === 0 || _this.total < 0) {
_this.InfoTip.warningTip_alarm(_this, HelperUtil.getCheckStatusCodeObjectByCode(_this.successCode.QUERY_NULL_CODE))
_this.indexTemplateColl = []
} else {
if (_this.total < 100 && _this.total > 0) {
_this.endItem = _this.total
} else {
_this.endItem = 100
}
_this.InfoTip.successTip(_this, HelperUtil.getCheckStatusCodeObjectByCode(_this.successCode.QUERY_CODE))
_this.queryIndexTemplateDataByConditionCurrentPage()
}
}).catch(err => {
_this.Loading.closeLoading(loadingInstance)
_this.InfoTip.errorTip(_this, err)
})
},
/**
* @Description : chaxun
* @author : ls
* @date : 2020/4/27 10:04
* @param :
* @return :
*/
queryIndexTemplateByCondition: function () {
let _this = this
_this.setSelectList()
let loadingInstance = _this.Loading.openLoading()
IndexTeplateService.queryIndexTemplate(_this.selectList).then(result => {
_this.indexTemplateList0 = result
_this.indexTemplateList = Object.values(result)
if (_this.indexTemplateList.length === 0) {
_this.Loading.closeLoading(loadingInstance)
this.InfoTip.warningTip(_this, HelperUtil.getCheckStatusCodeObjectByCode(_this.successCode.QUERY_NULL_CODE))
} else {
this.handleIndexTemplateList()
_this.Loading.closeLoading(loadingInstance)
this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.QUERY_CODE))
}
}).catch(err => {
this.Loading.closeLoading(loadingInstance)
this.InfoTip.errorTip(_this, err)
})
},
/**
* @Description : 获取网元型号
* @author : ls
* @date : 2020/4/27 9:57
* @param :
* @return :
*/
getAllDeviceModel: function () {
let _this = this
DeviceService.getAllDeviceModelCollection().then(result => {
_this.deviceModelList = Object.values(result)
}).catch(err => {
_this.InfoTip.errorTip(_this, err)
})
},
/**
* @Description : huoqusuoyou
* @author : ls
* @date : 2020/4/27 9:36
* @param :
* @return :
*/
getAllIndexTemplate: function () {
let _this = this
let loadingInstance = loading.openLoading()
IndexTeplateService.getAllIndexTemplateCollection().then(result => {
if (JSON.stringify(result) === '{}') {
this.indexTemplateColl = []
loadingInstance.close()
} else {
_this.indexTemplateList0 = result
_this.indexTemplateList = Object.values(result)
if (_this.indexTemplateList.length === 0) {
// this.InfoTip.warningTip(_this, HelperUtil.getCheckStatusCodeObjectByCode(_this.successCode.QUERY_NULL_CODE))
loadingInstance.close()
} else {
this.handleIndexTemplateList()
// this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.QUERY_CODE))
loadingInstance.close()
}
}
}).catch(err => {
this.InfoTip.errorTip(this, err)
loadingInstance.close()
})
},
/**
* @Description : 处理数据
* @author : ls
* @date : 2020/5/28 12:57
* @param :
* @return :
*/
handleIndexTemplateList: function () {
this.indexTemplateColl = []
for (let t in this.indexTemplateList) {
for (let k in this.indexTemplateList[t].unitList) {
this.indexTemplateColl.push(
{
performTemplateKey: this.indexTemplateList[t].performTemplateKey,
performTemplateName: this.indexTemplateList[t].performTemplateName,
description: this.indexTemplateList[t].description,
deviceModel: this.indexTemplateList[t].unitList[k].deviceModel,
deviceTypeKey: this.indexTemplateList[t].unitList[k].deviceTypeKey,
deviceType: this.indexTemplateList[t].unitList[k].deviceType,
deviceParam: this.indexTemplateList[t].unitList[k].deviceParam,
performName: this.indexTemplateList[t].unitList[k].performName,
performTemplateUnitID: this.indexTemplateList[t].unitList[k].performTemplateUnitID
}
)
}
}
this.getSpanArr(this.indexTemplateColl)
},
/**
* @Description : chuanjian
* @author : ls
* @date : 2020/4/26 15:01
* @param :
* @return :
*/
createIndexTemplateInit () {
this.createAndCopyTitle = this.$t('IndexTemplateCommands.createIndexTemplate')
this.createAndCopyCommand.execute()
},
deleteIndexTemplateInitEL () {
if (this.multipleSelection.length === 0) {
this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.DELETE_SELECT_CODE))
} else {
this.deleteList = []
for (var i = 0; i < this.multipleSelection.length; i++) {
this.deleteList.push(this.multipleSelection[i].performTemplateKey)
}
this.deleteCommand.execute()
}
},
/* ---------------------------Table选择--------------------------- */
/**
* @Description : fuzhi
* @author : ls
* @date : 2020/4/29 18:12
* @param :
* @return :
*/
handleSelectionChange (val) {
this.multipleSelection = val
}
},
watch: {
'$route' (to) {
if (to.name === '指标模板管理' && to.query.performTemplateName !== undefined) {
this.queryIndexTemplateName = to.query.performTemplateName
this.TurnFromCollectTask(to.query.performTemplateName)
}
},
commandContext (newVal, oldVal) {
if (JSON.stringify(newVal) === '{}') {
this.getAllIndexTemplate()
// this.queryInit()
this.queryIndexTemplateName = ''
this.queryDeviceModel = ''
}
deep: true
}
}
}
</script>
<style scoped>
table{
width: 100%;
border:1px solid #e9eaec;
border-collapse:collapse
}
th{
background:#eef1f6;
color:#606266
}
th,td{
border: 1px solid #e9eaec;
text-align: left;
padding-left: 10px;
vertical-align: center;
line-height: 31px;
}
/*tr:hover{*/
/* background-color: #409EFF;*/
/*}*/
</style>