123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597 |
- <template>
- <div class="relation-ship" v-loading="loading">
- <section style="margin-top: 20px">
- <el-button
- style="padding: 10px"
- icon="el-icon-back"
- @click="back"
- />
- <el-button
- type="primary"
- @click="addBtn"
- >添加关系
- </el-button>
- <el-button
- type="default"
- style="float: right"
- @click="excel"
- >
- Excel导出
- </el-button>
- </section>
- <section>
- <el-row>
- <el-col :span="12">
- <p class="border-left-8">主对象
- <span>{{MainObject}}</span></p>
- <label>所属建筑楼层:</label>
- <el-select disabled v-model="buildValue">
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- <label>类型:</label>
- <el-cascader
- :options="typeList"
- :props="props"
- collapse-tags
- clearable
- disabled
- />
- <el-input
- placeholder="请输入"
- @keyup.enter.native="queryTable(1)"
- v-model="mainValue"
- style="margin-left: 5px"
- class="min-margin"
- >
- <i
- slot="suffix"
- class="el-input__icon el-icon-search cursor"
- @click="queryTable(1)"
- />
- </el-input>
- </el-col>
- <el-col :span="12">
- <p class="border-left-8">从对象
- <span>{{FromObject}}</span></p>
- <label>所属建筑楼层:</label>
- <el-select disabled v-model="buildValue">
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- <label>类型:</label>
- <el-cascader
- :options="typeList"
- :props="props"
- collapse-tags
- clearable
- disabled
- />
- <el-input
- placeholder="请输入"
- @keyup.enter.native="queryTable(2)"
- v-model="formValue"
- style="margin-left: 5px"
- class="min-margin"
- >
- <i
- slot="suffix"
- class="el-input__icon el-icon-search cursor"
- @click="queryTable(2)"
- />
- </el-input>
- </el-col>
- </el-row>
- </section>
- <section class="table-list">
- <!-- :span-method="objectSpanMethod"
- -->
- <el-table
- :data="tableData"
- :span-method="objectSpanMethod"
- :header-cell-style="{background:'#e1e4e5',color:'#2b2b2b', lineHeight: '30px'}"
- :cell-style="cellStyle"
- class="table"
- >
- <el-table-column
- prop="Name"
- label="全局名称"
- width="180"
- align="left"
- min-width="100"
- >
- </el-table-column>
- <el-table-column
- prop="LocalId"
- label="本地编码"
- align="left"
- min-width="100"
- >
- </el-table-column>
- <el-table-column
- prop="LocalName"
- label="本地名称"
- align="left"
- min-width="100"
- >
- </el-table-column>
- <el-table-column
- prop="CADID"
- label="CADID"
- align="left"
- min-width="100"
- >
- </el-table-column>
- <el-table-column
- label="对象详情"
- prop="btn"
- align="left"
- min-width="90"
- >
- <template slot-scope="scope">
- <el-button
- type="text"
- size="mini"
- @click="lookOver(scope.$index, scope.row)">查看
- </el-button>
- </template>
- </el-table-column>
- <el-table-column
- class-name="td-bl"
- prop="cName"
- label="全局名称"
- width="180"
- align="left"
- >
- </el-table-column>
- <el-table-column
- prop="cLocalId"
- align="left"
- label="本地编码"
- >
- </el-table-column>
- <el-table-column
- prop="cLocalName"
- label="本地名称"
- align="left"
- >
- </el-table-column>
- <el-table-column
- prop="cCADID"
- label="CADID"
- align="left"
- >
- </el-table-column>
- <el-table-column
- label="对象详情"
- align="left"
- >
- <template slot-scope="scope">
- <el-button
- type="text"
- size="mini"
- @click="lookOver(scope.$index, scope.row)">查看
- </el-button>
- </template>
- </el-table-column>
- <el-table-column
- label="操作"
- align="left"
- >
- <template slot-scope="scope">
- <!-- <el-button-->
- <!-- size="mini"-->
- <!-- icon="el-icon-delete"-->
- <!-- @click="deleteObject(scope.$index, scope.row)">-->
- <!-- </el-button>-->
- <el-popconfirm
- title="确定删除吗?"
- @onConfirm="deleteObject(scope.$index, scope.row)"
- >
- <el-button slot="reference" size="mini" icon="el-icon-delete"/>
- </el-popconfirm>
- </template>
- </el-table-column>
- </el-table>
- </section>
- <!-- 分页 -->
- <!-- <el-pagination-->
- <!-- @size-change="handleSizeChange"-->
- <!-- @current-change="handleCurrentChange"-->
- <!-- :current-page="currentPage"-->
- <!-- :page-sizes="pageSizes"-->
- <!-- :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"-->
- <!-- style="float:right;margin-top:10px;padding:2px 5px;">-->
- <!-- </el-pagination>-->
- <exportExcel
- ref="export"
- :values="values"
- />
- <addRelationShip
- ref="addShipComponent"
- :values="values"
- @update="update"
- />
- <editRelationShip
- ref="editShipComponent"
- :values="values"
- />
- </div>
- </template>
- <script>
- import {mapGetters} from 'vuex'
- import exportExcel from "../../../components/relation/relationShip/Modal/exportExcel";
- import addRelationShip from "../../../components/relation/relationShip/Modal/addRelationShip";
- import editRelationShip from "../../../components/relation/relationShip/Modal/editRelationShip";
- import {relAdd, relDelete, relQuery} from "../../../api/relation/api";
- export default {
- name: "index",
- data() {
- return {
- MainObject: `(限制条件:对象类型的范围(包括:${localStorage.getItem('MainObject')}类型)`,
- FromObject: `(限制条件:对象类型的范围(包括:${localStorage.getItem('FromObject')}类型)`,
- pageSizes: [10, 20, 50, 100],
- pageSize: 50,
- currentPage: 1,
- total: 0,
- values: {
- relation_maintenance: '关系维护',
- optionTips: `请下载最新最新<${localStorage.getItem('RelationTypeName')}>数据进行手动维护`, //请下载最新最新 xxxx 数据进行手动维护
- currentNum: '当前关系数量:',
- download: '下载模板(含数据)',
- lastTime: '最后更新时间为', //最后更新时间为
- uploadTxt: '将Excel文件拖到此处,或<em>单击上传Excel文件<em>',
- uploadTips: '上传的Excel数据将完全覆盖当前关系表(关系表先前数据不会保留)',
- downloadFile: ' 下载报告文件',
- back: '返回',
- done: '完成',
- addShip: '添加关系',
- editShip: '编辑关系',
- codeTip: '请填写主被控设备对象识别编码',
- deviceTip: '请填写主被控设备对象设备号',
- codeTitle: '识别编码对应:',
- mainObject: '主对象:',
- affiliatedObject: '从对象:',
- pleaseEnter: '请输入',
- pleaseEnterCode: '请输入识别编码',
- add: '添加',
- cancel: '取消',
- delete: '删除关系'
- },
- mainValue: '',
- formValue: '',
- options: [
- {
- value: 'all',
- label: '全选'
- }, {
- value: '选项2',
- label: '双皮奶'
- }, {
- value: '选项3',
- label: '蚵仔煎'
- }, {
- value: '选项4',
- label: '龙须面'
- }, {
- value: '选项5',
- label: '北京烤鸭'
- }],
- buildValue: 'all',
- props: {multiple: true},
- typeList: [{
- value: 1,
- label: '东南',
- children: [
- {
- value: 2,
- label: '上海',
- }, {
- value: 7,
- label: '江苏',
- }, {
- value: 12,
- label: '浙江',
- }]
- }, {
- value: 17,
- label: '西北',
- children: [{
- value: 18,
- label: '陕西',
- }, {
- value: 21,
- label: '新疆维吾尔族自治区',
- }]
- }],
- tableData: [],
- loading: false,
- needMergeArr: ['Name', 'LocalId', 'LocalName', 'CADID','btn'],
- rowMergeArrs: {}
- // needMergeArr: ['name', 'id'], // 有合并项的列
- // rowMergeArrs: {}, // 包含需要一个或多个合并项信息的对象
- }
- },
- components: {exportExcel, addRelationShip, editRelationShip},
- created() {
- this.$store.dispatch('setBreadcrumb', [{
- label: '全部关系总览',
- path: '/relation/overview'
- }, {
- label: '全部关系总览',
- path: '/relation/overview'
- },
- {
- label: localStorage.getItem('RelationTypeName'),
- },
- ])
- this.init()
- },
- watch: {
- projectId() {
- this.init()
- }
- },
- computed: {
- ...mapGetters('layout', ["projectId"])
- },
- mounted() {
- // this.getSpanArr(this.tableData)
- },
- methods: {
- deepCopy(obj) {
- return JSON.parse(JSON.stringify(obj))
- },
- init() {
- this.loading = true
- let data = {
- projectId: this.projectId,
- ObjectType: 1,
- RelType: localStorage.getItem('RelManualType'),
- PageSize: this.pageSize,
- PageNumber: this.currentPage
- };
- relQuery(data, res => {
- this.filterTable(res)
- // this.total = res.Total
- this.loading = false
- })
- },
- filterTable(list) {
- let arr = []
- if(list.Content.length) {
- list.Content.forEach(i => {
- i.ObjectInfo && i.ObjectInfo.forEach(j => {
- arr.push({
- Name: i.Name,
- LocalName: i.LocalName,
- LocalId: i.LocalId,
- CADID: i.CADID,
- cName: j.Name,
- cLocalName: j.LocalName,
- cLocalId: j.LocalId,
- cCADID: j.CADID,
- Id: i.Id,
- cId: j.Id
- })
- })
- })
- this.tableData = this.deepCopy(arr)
- this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData); // 处理数据
- } else {
- this.tableData = []
- }
- },
- back() {
- this.$router.go(-1)
- },
- addBtn() {
- this.$refs.addShipComponent.addShipDialog = true
- },
- excel() {
- this.$refs.export.dialogExport = true
- },
- queryTable(i) {
- let param = {}, RelType = localStorage.getItem('RelManualType');
- if (i === 1) {
- param = {
- ObjectType: 1,
- RelType,
- Vague: this.mainValue
- }
- } else {
- param = {
- ObjectType: 2,
- RelType,
- Vague: this.formValue
- }
- }
- relQuery(param, res => {
- this.filterTable(res)
- console.log(res, '==object==')
- })
- },
- // addShip(index) {
- // let that = this
- // relAdd(index).then(res => {
- // if (res.data.Result === "failure") {
- // if(res.data.ErrorType == 1) {
- // this.mainError = res.data.Message
- // debugger
- // } else if(res.data.ErrorType == 2) {
- //
- // } else {
- // debugger
- // this.$message.error(res.data.Message);
- //
- // }
- //
- // } else if (res.data.Result === "success") {
- // this.$message.success(res.data.Message);
- // this.init()
- // that.$refs.addShipComponent.addShipDialog = false
- // that.$refs.addShipComponent.codeValue = ''
- // that.$refs.addShipComponent.ruleForm.codeList = [{value:''}]
- // that.$refs.addShipComponent.ruleForm.main = ''
- // }
- // })
- // },
- //分页更换size
- handleSizeChange(val) {
- this.currentPage = 1;
- this.pageSize = val;
- this.init()
- },
- //分页更换页
- handleCurrentChange(val) {
- this.currentPage = val;
- this.init()
- },
- update() {
- this.init()
- },
- lookOver(index, row) {
- console.log(index, row)
- // this.$refs.editShipComponent.editShipDialog = true
- },
- deleteObject(index, row) {
- let param = {
- "FromId": row.Id,
- "RelType": localStorage.getItem('RelManualType'),
- "ToId": row.cId
- }
- relDelete(param, res => {
- this.init()
- })
- },
- cellStyle({row, column, rowIndex, columnIndex}) {
- if (column.label === '全局名称') {
- return {
- background: '#f9f9f9',
- color: '#606266',
- lineHeight: '30px'
- }
- }
- },
- objectSpanMethod({row, column, rowIndex, columnIndex}) {
- if (column.property === 'Name') return this.mergeAction('Name', rowIndex, column);
- if (column.property === 'LocalId' && row.LocalId != undefined) return this.mergeAction('LocalId', rowIndex, column);
- if (column.property === 'LocalName' && row.LocalName != undefined) return this.mergeAction('LocalName', rowIndex, column);
- if (column.property === 'CADID' && row.CADID != undefined) return this.mergeAction('CADID', rowIndex, column);
- if (column.property === 'btn') return this.mergeAction('Name', rowIndex, column);
- },
- mergeAction(val, rowIndex, colData) {
- let _row = this.rowMergeArrs[val].rowArr[rowIndex];
- let _col = _row > 0 ? 1 : 0;
- return [_row, _col];
- },
- rowMergeHandle(arr, data) {
- if (!Array.isArray(arr) && !arr.length) return false;
- if (!Array.isArray(data) && !data.length) return false;
- let needMerge = {};
- arr.forEach(i => {
- needMerge[i] = {
- rowArr: [],
- rowMergeNum: 0
- };
- data.forEach((item, index) => {
- if (index === 0) {
- needMerge[i].rowArr.push(1);
- needMerge[i].rowMergeNum = 0;
- } else {
- if (item[i] === data[index - 1][i]) {
- needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
- needMerge[i].rowArr.push(0);
- } else {
- needMerge[i].rowArr.push(1);
- needMerge[i].rowMergeNum = index;
- }
- }
- });
- });
- return needMerge;
- }
- }
- }
- </script>
- <style scoped lang="less">
- .relation-ship {
- @media screen and (max-width: 1500px) {
- .min-margin{
- margin-top: 10px;
- }
- }
- .cursor {
- cursor: pointer;
- }
- /deep/ .el-input__inner {
- width: 220px;
- }
- /deep/ .el-input {
- width: auto;
- }
- /deep/.el-table__body-wrappe {
- }
- .table-list {
- width: 100%;
- display: block;
- /*height: calc(100% - 71px);*/
- }
- .table {
- width: 100%;
- margin-top: 20px;
- .el-button {
- border: none;
- background: transparent;
- &:link, &:visited, &:hover, &:active {
- background: #f5f7fa;
- }
- }
- }
- .border-left-8 {
- border-left: 8px solid black;
- margin: 10px 0;
- font-weight: 600;
- text-indent: 10px;
- span {
- color: #AAAAAA;
- margin-left: 20px;
- }
- }
- }
- </style>
|