|
@@ -1,456 +1,456 @@
|
|
|
<template>
|
|
|
- <div class="relation">
|
|
|
- <div class="header">
|
|
|
- <el-button class="el-icon-back" @click="goBack"></el-button>
|
|
|
- <el-button type="primary" @click="addRelation">添加关系</el-button>
|
|
|
- <el-button style="float: right" @click="updataExecl">上传Excel</el-button>
|
|
|
+ <div class="relation">
|
|
|
+ <div class="header">
|
|
|
+ <el-button class="el-icon-back" @click="goBack"></el-button>
|
|
|
+ <el-button type="primary" @click="addRelation">添加关系</el-button>
|
|
|
+ <el-button style="float: right" @click="updataExecl">上传Excel</el-button>
|
|
|
+ </div>
|
|
|
+ <el-row class="content">
|
|
|
+ <el-col :span="12" class="object">
|
|
|
+ <p>主对象</p>
|
|
|
+ <span v-if="relTypeStatus == 1 || relTypeStatus == 3">类型:</span>
|
|
|
+ <el-select
|
|
|
+ :clearable="true"
|
|
|
+ v-if="relTypeStatus == 1 || relTypeStatus == 3"
|
|
|
+ v-model="categoryFrom"
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="mainSelect"
|
|
|
+ style="margin-right: 10px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in mainOptions"
|
|
|
+ :key="item.classCode"
|
|
|
+ :label="item.className"
|
|
|
+ :value="item.classCode"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <AdmSearch @SearchValue="mainSerch"/>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="object">
|
|
|
+ <p>从对象</p>
|
|
|
+ <span v-if="relTypeStatus == 2 || relTypeStatus == 3">类型:</span>
|
|
|
+ <el-select
|
|
|
+ v-if="relTypeStatus == 2 || relTypeStatus == 3"
|
|
|
+ v-model="categoryTo"
|
|
|
+ :clearable="true"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="margin-right: 10px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in minorOptions"
|
|
|
+ :key="item.classCode"
|
|
|
+ :label="item.className"
|
|
|
+ :value="item.classCode"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <AdmSearch @SearchValue="minorSearch"/>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <relationTable
|
|
|
+ v-if="tableHeight"
|
|
|
+ @updata="addRelationSucess(0)"
|
|
|
+ @openMoreRelation="openMoreRelation"
|
|
|
+ :tableHeader="tableHeader"
|
|
|
+ :tableData="tableData"
|
|
|
+ :height="tableHeight"
|
|
|
+ :loading="loading"
|
|
|
+ />
|
|
|
+ <!-- 分页 -->
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="page.currentPage"
|
|
|
+ :page-sizes="[10, 15, 20, 30]"
|
|
|
+ :page-size="page.pageSize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="page.total"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <addRelationDialog
|
|
|
+ @closeAddRelation="addRelationValue = false"
|
|
|
+ @update="addRelationSucess(1)"
|
|
|
+ :addRelationValue="addRelationValue"
|
|
|
+ :values="values"
|
|
|
+ />
|
|
|
+ <excelDialog :values="values" ref="excelDialog"></excelDialog>
|
|
|
+ <editRelationDialog :values="values"></editRelationDialog>
|
|
|
+ <moreRelationDialog
|
|
|
+ :allRelation="allRelation"
|
|
|
+ :tableHeader="tableHeaderTo"
|
|
|
+ @update="addRelationSucess(0)"
|
|
|
+ ref="moreRelation"
|
|
|
+ ></moreRelationDialog>
|
|
|
</div>
|
|
|
- <el-row class="content">
|
|
|
- <el-col :span="12" class="object">
|
|
|
- <p>主对象</p>
|
|
|
- <span v-if="relTypeStatus == 1 || relTypeStatus == 3">类型:</span>
|
|
|
- <el-select
|
|
|
- :clearable="true"
|
|
|
- v-if="relTypeStatus == 1 || relTypeStatus == 3"
|
|
|
- v-model="categoryFrom"
|
|
|
- placeholder="请选择"
|
|
|
- @change="mainSelect"
|
|
|
- style="margin-right: 10px"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in mainOptions"
|
|
|
- :key="item.classCode"
|
|
|
- :label="item.className"
|
|
|
- :value="item.classCode"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <AdmSearch @SearchValue="mainSerch" />
|
|
|
- </el-col>
|
|
|
- <el-col :span="12" class="object">
|
|
|
- <p>从对象</p>
|
|
|
- <span v-if="relTypeStatus == 2 || relTypeStatus == 3">类型:</span>
|
|
|
- <el-select
|
|
|
- v-if="relTypeStatus == 2 || relTypeStatus == 3"
|
|
|
- v-model="categoryTo"
|
|
|
- :clearable="true"
|
|
|
- placeholder="请选择"
|
|
|
- style="margin-right: 10px"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in minorOptions"
|
|
|
- :key="item.classCode"
|
|
|
- :label="item.className"
|
|
|
- :value="item.classCode"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <AdmSearch @SearchValue="minorSearch" />
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <relationTable
|
|
|
- v-if="tableHeight"
|
|
|
- @updata="addRelationSucess(0)"
|
|
|
- @openMoreRelation="openMoreRelation"
|
|
|
- :tableHeader="tableHeader"
|
|
|
- :tableData="tableData"
|
|
|
- :height="tableHeight"
|
|
|
- :loading="loading"
|
|
|
- />
|
|
|
- <!-- 分页 -->
|
|
|
- <div class="pagination">
|
|
|
- <el-pagination
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- :current-page="page.currentPage"
|
|
|
- :page-sizes="[10, 15, 20, 30]"
|
|
|
- :page-size="page.pageSize"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :total="page.total"
|
|
|
- >
|
|
|
- </el-pagination>
|
|
|
- </div>
|
|
|
- <addRelationDialog
|
|
|
- @closeAddRelation="addRelationValue = false"
|
|
|
- @update="addRelationSucess(1)"
|
|
|
- :addRelationValue="addRelationValue"
|
|
|
- :values="values"
|
|
|
- />
|
|
|
- <excelDialog :values="values" ref="excelDialog"></excelDialog>
|
|
|
- <editRelationDialog :values="values"></editRelationDialog>
|
|
|
- <moreRelationDialog
|
|
|
- :allRelation="allRelation"
|
|
|
- :tableHeader="tableHeaderTo"
|
|
|
- @update="addRelationSucess(0)"
|
|
|
- ref="moreRelation"
|
|
|
- ></moreRelationDialog>
|
|
|
- </div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
-import { Component, Vue } from "vue-property-decorator";
|
|
|
-import { AdmSearch } from "./../../components";
|
|
|
+import {Component, Vue} from "vue-property-decorator";
|
|
|
+import {AdmSearch} from "./../../components";
|
|
|
import relationTable from "./components/table.vue";
|
|
|
import tableHeader from "@/views/maintain/relationship/components/tableHeader";
|
|
|
import addRelationDialog from "./components/addRelationDialog.vue";
|
|
|
import editRelationDialog from "./components/editRelationDialog.vue";
|
|
|
import excelDialog from "./components/excelDialog.vue";
|
|
|
-import { relToType, relManualQuery, relDel } from "@/api/datacenter";
|
|
|
-import { ElSelect } from "element-ui/types/select";
|
|
|
+import {relToType, relManualQuery, relDel} from "@/api/datacenter";
|
|
|
+import {ElSelect} from "element-ui/types/select";
|
|
|
import moreRelationDialog from "./components/moreRelationDialog.vue";
|
|
|
|
|
|
@Component({
|
|
|
- name: "relation",
|
|
|
- components: {
|
|
|
- AdmSearch,
|
|
|
- relationTable,
|
|
|
- addRelationDialog,
|
|
|
- excelDialog,
|
|
|
- editRelationDialog,
|
|
|
- moreRelationDialog,
|
|
|
- },
|
|
|
+ name: "relation",
|
|
|
+ components: {
|
|
|
+ AdmSearch,
|
|
|
+ relationTable,
|
|
|
+ addRelationDialog,
|
|
|
+ excelDialog,
|
|
|
+ editRelationDialog,
|
|
|
+ moreRelationDialog,
|
|
|
+ },
|
|
|
})
|
|
|
export default class extends Vue {
|
|
|
- categoryFrom = ""; //主关系
|
|
|
- mainOptions = []; //主关系选项
|
|
|
- categoryTo = ""; //次关系
|
|
|
- minorOptions = []; //次关系选项
|
|
|
- vagueFrom = ""; //主关系模糊收索
|
|
|
- vagueTo = ""; //次关系模糊收索
|
|
|
- allRelation: any[] = []; //所有更多从关系
|
|
|
- //表头数据
|
|
|
- tableHeader = [];
|
|
|
- //从数据表头数据
|
|
|
- tableHeaderTo =[];
|
|
|
- //表格数据
|
|
|
- tableData = [];
|
|
|
- // 是否添加关系
|
|
|
- addRelationValue: Boolean = false;
|
|
|
- // 传入tip需要得字段
|
|
|
- values: object = {
|
|
|
- relation_maintenance: "关系维护",
|
|
|
- optionTips: `请下载最新最新<${this.$route.query.relationTypeName}>数据进行手动维护`, //请下载最新最新 xxxx 数据进行手动维护
|
|
|
- currentNum: "当前关系数量:",
|
|
|
- download: "下载模板(含数据)",
|
|
|
- lastTime: `最后更新时间为:${this.$route.query.lastUpdate || ""}`, //最后更新时间为
|
|
|
- uploadTxt: "将Excel文件拖到此处,或<em>单击上传Excel文件<em>",
|
|
|
- uploadTips: "上传的Excel数据将完全覆盖当前关系表(关系表先前数据不会保留)",
|
|
|
- downloadFile: " 下载报告文件",
|
|
|
- back: "返回",
|
|
|
- done: "完成",
|
|
|
- addShip: "添加关系",
|
|
|
- editShip: "编辑关系",
|
|
|
- codeTip: "请填写主被控设备对象识别编码",
|
|
|
- deviceTip: "请填写主被控设备对象设备号",
|
|
|
- codeTitle: "识别编码对应:",
|
|
|
- mainObject: "主对象:",
|
|
|
- affiliatedObject: "从对象:",
|
|
|
- pleaseEnter: "请输入",
|
|
|
- pleaseEnterCode: "请输入识别编码",
|
|
|
- add: "添加",
|
|
|
- cancel: "取消",
|
|
|
- delete: "删除关系",
|
|
|
- };
|
|
|
- relTypeStatus: any = 0; //关系相关类型主从 0 None 1主 2从 3主从
|
|
|
-
|
|
|
- page: object = {
|
|
|
- total: 0, //总数
|
|
|
- currentPage: 1, //当前页
|
|
|
- pageSize: 15, //当前页数量
|
|
|
- };
|
|
|
- tableHeight: number = 0; //table高
|
|
|
- loading: Boolean = false; //是否显示loadding
|
|
|
- /////////////////////////////////////////
|
|
|
- // 方法
|
|
|
-
|
|
|
- /**
|
|
|
- * 返回页面上一级
|
|
|
- */
|
|
|
- goBack() {
|
|
|
- this.$router.go(-1);
|
|
|
- }
|
|
|
+ categoryFrom = ""; //主关系
|
|
|
+ mainOptions = []; //主关系选项
|
|
|
+ categoryTo = ""; //次关系
|
|
|
+ minorOptions = []; //次关系选项
|
|
|
+ vagueFrom = ""; //主关系模糊收索
|
|
|
+ vagueTo = ""; //次关系模糊收索
|
|
|
+ allRelation: any[] = []; //所有更多从关系
|
|
|
+ //表头数据
|
|
|
+ tableHeader = [];
|
|
|
+ //从数据表头数据
|
|
|
+ tableHeaderTo = [];
|
|
|
+ //表格数据
|
|
|
+ tableData = [];
|
|
|
+ // 是否添加关系
|
|
|
+ addRelationValue: Boolean = false;
|
|
|
+ // 传入tip需要得字段
|
|
|
+ values: object = {
|
|
|
+ relation_maintenance: "关系维护",
|
|
|
+ optionTips: `请下载最新最新<${this.$route.query.relationTypeName}>数据进行手动维护`, //请下载最新最新 xxxx 数据进行手动维护
|
|
|
+ currentNum: "当前关系数量:",
|
|
|
+ download: "下载模板(含数据)",
|
|
|
+ lastTime: `最后更新时间为:${this.$route.query.lastUpdate || ""}`, //最后更新时间为
|
|
|
+ uploadTxt: "将Excel文件拖到此处,或<em>单击上传Excel文件<em>",
|
|
|
+ uploadTips: "上传的Excel数据将完全覆盖当前关系表(关系表先前数据不会保留)",
|
|
|
+ downloadFile: " 下载报告文件",
|
|
|
+ back: "返回",
|
|
|
+ done: "完成",
|
|
|
+ addShip: "添加关系",
|
|
|
+ editShip: "编辑关系",
|
|
|
+ codeTip: "请填写主被控设备对象识别编码",
|
|
|
+ deviceTip: "请填写主被控设备对象设备号",
|
|
|
+ codeTitle: "识别编码对应:",
|
|
|
+ mainObject: "主对象:",
|
|
|
+ affiliatedObject: "从对象:",
|
|
|
+ pleaseEnter: "请输入",
|
|
|
+ pleaseEnterCode: "请输入识别编码",
|
|
|
+ add: "添加",
|
|
|
+ cancel: "取消",
|
|
|
+ delete: "删除关系",
|
|
|
+ };
|
|
|
+ relTypeStatus: any = 0; //关系相关类型主从 0 None 1主 2从 3主从
|
|
|
|
|
|
- /**
|
|
|
- * 更多关系
|
|
|
- *
|
|
|
- */
|
|
|
- openMoreRelation(obj: any) {
|
|
|
- this.allRelation = obj;
|
|
|
- this.$refs.moreRelation.dialogTableVisible = true;
|
|
|
- }
|
|
|
+ page: object = {
|
|
|
+ total: 0, //总数
|
|
|
+ currentPage: 1, //当前页
|
|
|
+ pageSize: 15, //当前页数量
|
|
|
+ };
|
|
|
+ tableHeight: number = 0; //table高
|
|
|
+ loading: Boolean = false; //是否显示loadding
|
|
|
+ /////////////////////////////////////////
|
|
|
+ // 方法
|
|
|
|
|
|
- /**
|
|
|
- * 上传 execl
|
|
|
- */
|
|
|
- updataExecl() {
|
|
|
- this.$refs.excelDialog.dialogExport = true;
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * 返回页面上一级
|
|
|
+ */
|
|
|
+ goBack() {
|
|
|
+ this.$router.go(-1);
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
- * 分页数量切换
|
|
|
- */
|
|
|
+ /**
|
|
|
+ * 更多关系
|
|
|
+ *
|
|
|
+ */
|
|
|
+ openMoreRelation(obj: any) {
|
|
|
+ this.allRelation = obj;
|
|
|
+ this.$refs.moreRelation.dialogTableVisible = true;
|
|
|
+ }
|
|
|
|
|
|
- handleSizeChange(val: any) {
|
|
|
- Object.assign(this.page, {
|
|
|
- pageSize: val,
|
|
|
- });
|
|
|
- this.relManualQuery();
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * 上传 execl
|
|
|
+ */
|
|
|
+ updataExecl() {
|
|
|
+ this.$refs.excelDialog.dialogExport = true;
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
- * 分页切换
|
|
|
- */
|
|
|
- handleCurrentChange(val: any) {
|
|
|
- Object.assign(this.page, {
|
|
|
- currentPage: val,
|
|
|
- });
|
|
|
- this.relManualQuery();
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * 分页数量切换
|
|
|
+ */
|
|
|
|
|
|
- /**
|
|
|
- * 主关系下拉框选择
|
|
|
- */
|
|
|
- mainSelect(val: any) {
|
|
|
- this.categoryFrom = val;
|
|
|
- this.page.currentPage = 1; //初始化页面
|
|
|
- this.relManualQuery();
|
|
|
- }
|
|
|
+ handleSizeChange(val: any) {
|
|
|
+ Object.assign(this.page, {
|
|
|
+ pageSize: val,
|
|
|
+ });
|
|
|
+ this.relManualQuery();
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
- * 从关系下拉框选择
|
|
|
- */
|
|
|
- minorSelect(val: any) {
|
|
|
- this.categoryTo = val;
|
|
|
- this.page.currentPage = 1; //初始化页面
|
|
|
- this.relManualQuery();
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * 分页切换
|
|
|
+ */
|
|
|
+ handleCurrentChange(val: any) {
|
|
|
+ Object.assign(this.page, {
|
|
|
+ currentPage: val,
|
|
|
+ });
|
|
|
+ this.relManualQuery();
|
|
|
+ }
|
|
|
|
|
|
- // 主关系模糊搜索
|
|
|
- mainSerch(val: string) {
|
|
|
- this.vagueFrom = val;
|
|
|
- this.page.currentPage = 1; //初始化页面
|
|
|
- this.relManualQuery();
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * 主关系下拉框选择
|
|
|
+ */
|
|
|
+ mainSelect(val: any) {
|
|
|
+ this.categoryFrom = val;
|
|
|
+ this.page.currentPage = 1; //初始化页面
|
|
|
+ this.relManualQuery();
|
|
|
+ }
|
|
|
|
|
|
- // 从关系模糊搜索
|
|
|
- minorSearch(val: string) {
|
|
|
- this.vagueTo = val;
|
|
|
- this.page.currentPage = 1; //初始化页面
|
|
|
- this.relManualQuery();
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * 从关系下拉框选择
|
|
|
+ */
|
|
|
+ minorSelect(val: any) {
|
|
|
+ this.categoryTo = val;
|
|
|
+ this.page.currentPage = 1; //初始化页面
|
|
|
+ this.relManualQuery();
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
- * 添加关系
|
|
|
- */
|
|
|
- addRelation() {
|
|
|
- this.addRelationValue = true;
|
|
|
- }
|
|
|
+ // 主关系模糊搜索
|
|
|
+ mainSerch(val: string) {
|
|
|
+ this.vagueFrom = val;
|
|
|
+ this.page.currentPage = 1; //初始化页面
|
|
|
+ this.relManualQuery();
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
- * 添加关系成功后
|
|
|
- */
|
|
|
- addRelationSucess(initPage:number) {
|
|
|
- if (initPage) {
|
|
|
- this.page.currentPage = 1; //初始化页面
|
|
|
+ // 从关系模糊搜索
|
|
|
+ minorSearch(val: string) {
|
|
|
+ this.vagueTo = val;
|
|
|
+ this.page.currentPage = 1; //初始化页面
|
|
|
+ this.relManualQuery();
|
|
|
}
|
|
|
- this.relManualQuery();
|
|
|
- this.relToType(); //重新f获取关系对象
|
|
|
- }
|
|
|
|
|
|
- /**
|
|
|
- * 获取主对象从对象关系
|
|
|
- */
|
|
|
- relToType() {
|
|
|
- const urlData = this.$route.query;
|
|
|
- if (this.relTypeStatus == 0) {
|
|
|
- this.mainObject = ""; //主关系
|
|
|
- this.mainOptions = []; //主关系选项
|
|
|
- this.minorObject = ""; //次关系
|
|
|
- this.minorOptions = []; //次关系选项
|
|
|
- return;
|
|
|
+ /**
|
|
|
+ * 添加关系
|
|
|
+ */
|
|
|
+ addRelation() {
|
|
|
+ this.addRelationValue = true;
|
|
|
}
|
|
|
- // 获取主关系接口
|
|
|
- if (this.relTypeStatus == 1 || this.relTypeStatus == 3) {
|
|
|
- const data = {
|
|
|
- zoneType: urlData.zoneType ? urlData.zoneType : "",
|
|
|
- graphCode: urlData.graphicType,
|
|
|
- type: urlData.relationType,
|
|
|
- relType: urlData.relationType,
|
|
|
- status: 1, // 1 为主关系;2 为从关系
|
|
|
- };
|
|
|
- relToType(data).then((res) => {
|
|
|
- this.mainObject = ""; //主关系
|
|
|
- this.mainOptions = this.dataReduce(res.content);
|
|
|
- });
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 添加关系成功后
|
|
|
+ */
|
|
|
+ addRelationSucess(initPage: number) {
|
|
|
+ if (initPage) {
|
|
|
+ this.page.currentPage = 1; //初始化页面
|
|
|
+ }
|
|
|
+ this.relManualQuery();
|
|
|
+ this.relToType(); //重新f获取关系对象
|
|
|
}
|
|
|
|
|
|
- // 获取从关系接口
|
|
|
- if (this.relTypeStatus == 2 || this.relTypeStatus == 3) {
|
|
|
- const data = {
|
|
|
- zoneType: urlData.zoneType ? urlData.zoneType : "",
|
|
|
- graphCode: urlData.graphicType,
|
|
|
- type: urlData.relationType,
|
|
|
- relType: urlData.relationType,
|
|
|
- status: 2, // 1 为主关系;2 为从关系
|
|
|
- };
|
|
|
- relToType(data).then((res) => {
|
|
|
- this.minorObject = ""; //次关系
|
|
|
- this.minorOptions = this.dataReduce(res.content); //次关系选项
|
|
|
- });
|
|
|
+ /**
|
|
|
+ * 获取主对象从对象关系
|
|
|
+ */
|
|
|
+ relToType() {
|
|
|
+ const urlData = this.$route.query;
|
|
|
+ if (this.relTypeStatus == 0) {
|
|
|
+ this.mainObject = ""; //主关系
|
|
|
+ this.mainOptions = []; //主关系选项
|
|
|
+ this.minorObject = ""; //次关系
|
|
|
+ this.minorOptions = []; //次关系选项
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 获取主关系接口
|
|
|
+ if (this.relTypeStatus == 1 || this.relTypeStatus == 3) {
|
|
|
+ const data = {
|
|
|
+ zoneType: urlData.zoneType ? urlData.zoneType : "",
|
|
|
+ graphCode: urlData.graphicType,
|
|
|
+ type: urlData.relationType,
|
|
|
+ relType: urlData.relationType,
|
|
|
+ status: 1, // 1 为主关系;2 为从关系
|
|
|
+ };
|
|
|
+ relToType(data).then((res) => {
|
|
|
+ this.mainObject = ""; //主关系
|
|
|
+ this.mainOptions = this.dataReduce(res.content);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取从关系接口
|
|
|
+ if (this.relTypeStatus == 2 || this.relTypeStatus == 3) {
|
|
|
+ const data = {
|
|
|
+ zoneType: urlData.zoneType ? urlData.zoneType : "",
|
|
|
+ graphCode: urlData.graphicType,
|
|
|
+ type: urlData.relationType,
|
|
|
+ relType: urlData.relationType,
|
|
|
+ status: 2, // 1 为主关系;2 为从关系
|
|
|
+ };
|
|
|
+ relToType(data).then((res) => {
|
|
|
+ this.minorObject = ""; //次关系
|
|
|
+ this.minorOptions = this.dataReduce(res.content); //次关系选项
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- //下拉框数据去重
|
|
|
- dataReduce(arr: []): [] {
|
|
|
- let obj = {},
|
|
|
- setArr = [];
|
|
|
- setArr = arr.reduce((item, next) => {
|
|
|
- obj[next.classCode]
|
|
|
- ? ""
|
|
|
- : (obj[next.classCode] = true && item.push(next));
|
|
|
- return item;
|
|
|
- }, []);
|
|
|
- return setArr;
|
|
|
- }
|
|
|
+ //下拉框数据去重
|
|
|
+ dataReduce(arr: []): [] {
|
|
|
+ let obj = {},
|
|
|
+ setArr = [];
|
|
|
+ setArr = arr.reduce((item, next) => {
|
|
|
+ obj[next.classCode]
|
|
|
+ ? ""
|
|
|
+ : (obj[next.classCode] = true && item.push(next));
|
|
|
+ return item;
|
|
|
+ }, []);
|
|
|
+ return setArr;
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
- * 获取table列表
|
|
|
- */
|
|
|
- relManualQuery() {
|
|
|
- this.loading = true;
|
|
|
- // 获取table数据
|
|
|
- const objectType = this.vagueTo.length && this.vagueFrom.length ? 3 : this.vagueTo.length ? 2 :1;
|
|
|
- const data = {
|
|
|
- projectId: this.$route.query.projectId,
|
|
|
- categoryFrom: this.categoryFrom,
|
|
|
- categoryTo: this.categoryTo,
|
|
|
- vagueTo: this.vagueTo, //从关系
|
|
|
- vagueFrom: this.vagueFrom, //主关系
|
|
|
- objectType: objectType,
|
|
|
- relType: this.$route.query.relationType,
|
|
|
- pageSize: this.page.pageSize,
|
|
|
- pageNumber: this.page.currentPage,
|
|
|
- graphicType: this.$route.query.graphicType,
|
|
|
- zoneType: this.$route.query.zoneType ? this.$route.query.zoneType : "",
|
|
|
- };
|
|
|
- relManualQuery(data)
|
|
|
- .then((res) => {
|
|
|
- this.eachResData(res.content);
|
|
|
- // this.tableData = res.content;
|
|
|
- this.page.total = res.total;
|
|
|
- this.loading = false;
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- this.loading = false;
|
|
|
- });
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * 获取table列表
|
|
|
+ */
|
|
|
+ relManualQuery() {
|
|
|
+ this.loading = true;
|
|
|
+ // 获取table数据
|
|
|
+ const objectType = this.vagueTo.length && this.vagueFrom.length ? 3 : this.vagueTo.length ? 2 : 1;
|
|
|
+ const data = {
|
|
|
+ projectId: this.$route.query.projectId,
|
|
|
+ categoryFrom: this.categoryFrom,
|
|
|
+ categoryTo: this.categoryTo,
|
|
|
+ vagueTo: this.vagueTo, //从关系
|
|
|
+ vagueFrom: this.vagueFrom, //主关系
|
|
|
+ objectType: objectType,
|
|
|
+ relType: this.$route.query.relationType,
|
|
|
+ pageSize: this.page.pageSize,
|
|
|
+ pageNumber: this.page.currentPage,
|
|
|
+ graphicType: this.$route.query.graphicType,
|
|
|
+ zoneType: this.$route.query.zoneType ? this.$route.query.zoneType : "",
|
|
|
+ };
|
|
|
+ relManualQuery(data)
|
|
|
+ .then((res) => {
|
|
|
+ this.eachResData(res.content);
|
|
|
+ // this.tableData = res.content;
|
|
|
+ this.page.total = res.total;
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
- * 重新拼装数组
|
|
|
- */
|
|
|
- eachResData(list: []) {
|
|
|
- if (list.length) {
|
|
|
- let newList: any[] = [];
|
|
|
- list.forEach((item: any) => {
|
|
|
- // 从对象为多个则新曾对象
|
|
|
- if (item.objectInfo && item.objectInfo.length >= 2) {
|
|
|
- // 只展示最多展示9个合并
|
|
|
- let objList: any = [];
|
|
|
- // 取9个
|
|
|
- if (item.objectInfo.length >= 9) {
|
|
|
- objList = [...item.objectInfo.slice(0, 9)];
|
|
|
- } else {
|
|
|
- objList = item.objectInfo.slice(0, 9);
|
|
|
- }
|
|
|
- const objInfo = JSON.parse(JSON.stringify(objList));
|
|
|
- const rowspan = (objInfo.length >= 9) ? 10 :objInfo.length;
|
|
|
- objInfo.forEach((objItem: any, index: number) => {
|
|
|
- const newItem = JSON.parse(JSON.stringify(item));
|
|
|
- Object.assign(newItem, {
|
|
|
- objectInfo: [objItem],
|
|
|
- rowspan: index == 0 ? rowspan : 0,
|
|
|
- firstSpan: true, //首行是否合并
|
|
|
+ /**
|
|
|
+ * 重新拼装数组
|
|
|
+ */
|
|
|
+ eachResData(list: []) {
|
|
|
+ if (list.length) {
|
|
|
+ let newList: any[] = [];
|
|
|
+ list.forEach((item: any) => {
|
|
|
+ // 从对象为多个则新曾对象
|
|
|
+ if (item.objectInfo && item.objectInfo.length >= 2) {
|
|
|
+ // 只展示最多展示9个合并
|
|
|
+ let objList: any = [];
|
|
|
+ // 取9个
|
|
|
+ if (item.objectInfo.length >= 9) {
|
|
|
+ objList = [...item.objectInfo.slice(0, 9)];
|
|
|
+ } else {
|
|
|
+ objList = item.objectInfo.slice(0, 9);
|
|
|
+ }
|
|
|
+ const objInfo = JSON.parse(JSON.stringify(objList));
|
|
|
+ const rowspan = (objInfo.length >= 9) ? 10 : objInfo.length;
|
|
|
+ objInfo.forEach((objItem: any, index: number) => {
|
|
|
+ const newItem = JSON.parse(JSON.stringify(item));
|
|
|
+ Object.assign(newItem, {
|
|
|
+ objectInfo: [objItem],
|
|
|
+ rowspan: index == 0 ? rowspan : 0,
|
|
|
+ firstSpan: true, //首行是否合并
|
|
|
+ });
|
|
|
+ newList.push(newItem);
|
|
|
+ });
|
|
|
+ // 如果从关系大于10个则需要添加打开弹窗按钮
|
|
|
+ if (item.objectInfo.length > 9) {
|
|
|
+ newList.push(
|
|
|
+ Object.assign(item, {
|
|
|
+ moreMsg: true,
|
|
|
+ firstSpan: true, //首行是否合并
|
|
|
+ })
|
|
|
+ );
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ Object.assign(item, {
|
|
|
+ rowspan: 1,
|
|
|
+ firstSpan: false,
|
|
|
+ });
|
|
|
+ newList.push(item);
|
|
|
+ }
|
|
|
});
|
|
|
- newList.push(newItem);
|
|
|
- });
|
|
|
- // 如果从关系大于10个则需要添加打开弹窗按钮
|
|
|
- if (item.objectInfo.length > 9) {
|
|
|
- newList.push(
|
|
|
- Object.assign(item, {
|
|
|
- moreMsg: true,
|
|
|
- firstSpan: true, //首行是否合并
|
|
|
- })
|
|
|
- );
|
|
|
- }
|
|
|
+ this.tableData = newList;
|
|
|
} else {
|
|
|
- Object.assign(item, {
|
|
|
- rowspan: 1,
|
|
|
- firstSpan: false,
|
|
|
- });
|
|
|
- newList.push(item);
|
|
|
+ this.tableData = [];
|
|
|
}
|
|
|
- });
|
|
|
- this.tableData = newList;
|
|
|
- } else {
|
|
|
- this.tableData = [];
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- created() {
|
|
|
- let relationTypeName = this.$route.query.relationTypeName;
|
|
|
- this.tableHeader = tableHeader[relationTypeName];
|
|
|
- tableHeader[relationTypeName].forEach((item:any)=>{
|
|
|
+ created() {
|
|
|
+ let relationTypeName = this.$route.query.relationTypeName;
|
|
|
+ this.tableHeader = tableHeader[relationTypeName];
|
|
|
+ tableHeader[relationTypeName].forEach((item: any) => {
|
|
|
|
|
|
- if(item[1].includes('objectInfo')){
|
|
|
- this.tableHeaderTo.push(item)
|
|
|
- }
|
|
|
+ if (item[1].includes('objectInfo')) {
|
|
|
+ this.tableHeaderTo.push(item)
|
|
|
+ }
|
|
|
|
|
|
- }) //从关系
|
|
|
- this.relTypeStatus = this.$route.query.relTypeStatus;
|
|
|
- // 获取主从对象下拉框数据
|
|
|
- this.relToType();
|
|
|
- // 获取table列表
|
|
|
- this.relManualQuery();
|
|
|
- }
|
|
|
+ }) //从关系
|
|
|
+ this.relTypeStatus = this.$route.query.relTypeStatus;
|
|
|
+ // 获取主从对象下拉框数据
|
|
|
+ this.relToType();
|
|
|
+ // 获取table列表
|
|
|
+ this.relManualQuery();
|
|
|
+ }
|
|
|
|
|
|
- mounted() {
|
|
|
- //计算table的高度
|
|
|
- let allHeight =
|
|
|
- document.getElementsByClassName("relation")[0].offsetHeight - 57; //57是Head的高
|
|
|
- let contentHeight = document.getElementsByClassName("content")[0]
|
|
|
- .offsetHeight;
|
|
|
- this.tableHeight = allHeight - contentHeight - 47;
|
|
|
- }
|
|
|
+ mounted() {
|
|
|
+ //计算table的高度
|
|
|
+ let allHeight =
|
|
|
+ document.getElementsByClassName("relation")[0].offsetHeight - 57; //57是Head的高
|
|
|
+ let contentHeight = document.getElementsByClassName("content")[0]
|
|
|
+ .offsetHeight;
|
|
|
+ this.tableHeight = allHeight - contentHeight - 47;
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.relation {
|
|
|
- background: #ffffff;
|
|
|
- height: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ height: 100%;
|
|
|
|
|
|
- .header {
|
|
|
- padding: 12px;
|
|
|
- overflow: hidden;
|
|
|
- border-bottom: 1px solid #e1e7ea;
|
|
|
- }
|
|
|
+ .header {
|
|
|
+ padding: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+ border-bottom: 1px solid #e1e7ea;
|
|
|
+ }
|
|
|
|
|
|
- .content {
|
|
|
- padding: 12px;
|
|
|
+ .content {
|
|
|
+ padding: 12px;
|
|
|
|
|
|
- .object {
|
|
|
- p {
|
|
|
- border-left: 7px solid #555555;
|
|
|
- text-indent: 10px;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
+ .object {
|
|
|
+ p {
|
|
|
+ border-left: 7px solid #555555;
|
|
|
+ text-indent: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .pagination {
|
|
|
- margin-top: 12px;
|
|
|
- margin-right: 24px;
|
|
|
- float: right;
|
|
|
- }
|
|
|
+ .pagination {
|
|
|
+ margin-top: 12px;
|
|
|
+ margin-right: 24px;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|