index.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. <template>
  2. <div class="relation">
  3. <div class="header">
  4. <el-button class="el-icon-back" @click="goBack"></el-button>
  5. <el-button type="primary" @click="addRelation">添加关系</el-button>
  6. <el-button style="float: right" @click="updataExecl">上传Excel</el-button>
  7. </div>
  8. <el-row class="content">
  9. <el-col :span="12" class="object">
  10. <p>主对象</p>
  11. <span v-if="relTypeStatus == 1 || relTypeStatus == 3">类型:</span>
  12. <el-select
  13. :clearable="true"
  14. v-if="relTypeStatus == 1 || relTypeStatus == 3"
  15. v-model="categoryFrom"
  16. placeholder="请选择"
  17. @change="mainSelect"
  18. style="margin-right: 10px"
  19. >
  20. <el-option
  21. v-for="item in mainOptions"
  22. :key="item.classCode"
  23. :label="item.className"
  24. :value="item.classCode"
  25. >
  26. </el-option>
  27. </el-select>
  28. <AdmSearch @SearchValue="mainSerch" />
  29. </el-col>
  30. <el-col :span="12" class="object">
  31. <p>从对象</p>
  32. <span v-if="relTypeStatus == 2 || relTypeStatus == 3">类型:</span>
  33. <el-select
  34. v-if="relTypeStatus == 2 || relTypeStatus == 3"
  35. v-model="categoryTo"
  36. :clearable="true"
  37. placeholder="请选择"
  38. style="margin-right: 10px"
  39. >
  40. <el-option
  41. v-for="item in minorOptions"
  42. :key="item.classCode"
  43. :label="item.className"
  44. :value="item.classCode"
  45. >
  46. </el-option>
  47. </el-select>
  48. <AdmSearch @SearchValue="minorSearch" />
  49. </el-col>
  50. </el-row>
  51. <relationTable :tableHeader="tableHeader" :tableData="tableData" />
  52. <addRelationDialog
  53. @closeAddRelation="addRelationValue = false"
  54. :addRelationValue="addRelationValue"
  55. :values="values"
  56. />
  57. <excelDialog :values="values" ref="excelDialog"></excelDialog>
  58. <editRelationDialog :values="values"></editRelationDialog>
  59. </div>
  60. </template>
  61. <script lang="ts">
  62. import { Component, Vue } from "vue-property-decorator";
  63. import { AdmSearch } from "./../../components";
  64. import relationTable from "./components/table";
  65. import tableHeader from "@/views/maintain/relationship/components/tableHeader";
  66. import addRelationDialog from "./components/addRelationDialog.vue";
  67. import editRelationDialog from "./components/editRelationDialog.vue";
  68. import excelDialog from "./components/excelDialog.vue";
  69. import { relToType, relManualQuery } from "@/api/datacenter";
  70. @Component({
  71. name: "relation",
  72. components: {
  73. AdmSearch,
  74. relationTable,
  75. addRelationDialog,
  76. excelDialog,
  77. editRelationDialog,
  78. },
  79. })
  80. export default class extends Vue {
  81. categoryFrom = ""; //主关系
  82. mainOptions = []; //主关系选项
  83. categoryTo = ""; //次关系
  84. minorOptions = []; //次关系选项
  85. vagueFrom = ""; //主关系模糊收索
  86. vagueTo = ""; //次关系模糊收索
  87. //表头数据
  88. tableHeader = [];
  89. //表格数据
  90. tableData = [];
  91. // 是否添加关系
  92. addRelationValue: Boolean = false;
  93. // 传入tip需要得字段
  94. values: object = {
  95. relation_maintenance: "关系维护",
  96. optionTips: `请下载最新最新<${this.$route.query.relationTypeName}>数据进行手动维护`, //请下载最新最新 xxxx 数据进行手动维护
  97. currentNum: "当前关系数量:",
  98. download: "下载模板(含数据)",
  99. lastTime: `最后更新时间为:${this.$route.query.lastUpdate || ""}`, //最后更新时间为
  100. uploadTxt: "将Excel文件拖到此处,或<em>单击上传Excel文件<em>",
  101. uploadTips: "上传的Excel数据将完全覆盖当前关系表(关系表先前数据不会保留)",
  102. downloadFile: " 下载报告文件",
  103. back: "返回",
  104. done: "完成",
  105. addShip: "添加关系",
  106. editShip: "编辑关系",
  107. codeTip: "请填写主被控设备对象识别编码",
  108. deviceTip: "请填写主被控设备对象设备号",
  109. codeTitle: "识别编码对应:",
  110. mainObject: "主对象:",
  111. affiliatedObject: "从对象:",
  112. pleaseEnter: "请输入",
  113. pleaseEnterCode: "请输入识别编码",
  114. add: "添加",
  115. cancel: "取消",
  116. delete: "删除关系",
  117. };
  118. relTypeStatus: any = 0; //关系相关类型主从 0 None 1主 2从 3主从
  119. /////////////////////////////////////////
  120. // 方法
  121. /**
  122. * 返回页面上一级
  123. */
  124. goBack() {
  125. this.$router.go(-1);
  126. }
  127. /**
  128. * 上传 execl
  129. */
  130. updataExecl() {
  131. this.$refs.excelDialog.dialogExport = true;
  132. }
  133. /**
  134. * 主关系下拉框选择
  135. */
  136. mainSelect(val: any) {
  137. this.categoryFrom = val;
  138. this.relManualQuery();
  139. console.log("mainSelect", val);
  140. }
  141. /**
  142. * 从关系下拉框选择
  143. */
  144. minorSelect(val: any) {
  145. this.categoryTo = val;
  146. this.relManualQuery();
  147. }
  148. // 主关系模糊搜索
  149. mainSerch(val: string) {
  150. this.vagueFrom = val;
  151. this.relManualQuery();
  152. }
  153. // 从关系模糊搜索
  154. minorSearch(val: string) {
  155. this.vagueTo = val;
  156. this.relManualQuery();
  157. }
  158. /**
  159. * 添加关系
  160. */
  161. addRelation() {
  162. this.addRelationValue = true;
  163. }
  164. /**
  165. * 获取主对象从对象关系
  166. */
  167. relToType() {
  168. const urlData = this.$route.query;
  169. if (this.relTypeStatus == 0) {
  170. this.mainObject = ""; //主关系
  171. this.mainOptions = []; //主关系选项
  172. this.minorObject = ""; //次关系
  173. this.minorOptions = []; //次关系选项
  174. return;
  175. }
  176. // 获取主关系接口
  177. if (this.relTypeStatus == 1 || this.relTypeStatus == 3) {
  178. const data = {
  179. zoneType: urlData.zoneType ? urlData.zoneType : "",
  180. graphCode: urlData.graphicType,
  181. type: urlData.relationType,
  182. relType: urlData.relationType,
  183. status: 1, // 1 为主关系;2 为从关系
  184. };
  185. relToType(data).then((res) => {
  186. this.mainObject = ""; //主关系
  187. this.mainOptions = res.content; //主关系选项
  188. });
  189. }
  190. // 获取从关系接口
  191. if (this.relTypeStatus == 2 || this.relTypeStatus == 3) {
  192. const data = {
  193. zoneType: urlData.zoneType ? urlData.zoneType : "",
  194. graphCode: urlData.graphicType,
  195. type: urlData.relationType,
  196. relType: urlData.relationType,
  197. status: 2, // 1 为主关系;2 为从关系
  198. };
  199. relToType(data).then((res) => {
  200. this.minorObject = ""; //次关系
  201. this.minorOptions = res.content; //次关系选项
  202. });
  203. }
  204. }
  205. /**
  206. * 获取table列表
  207. */
  208. relManualQuery() {
  209. // 获取table数据
  210. const data = {
  211. projectId: this.$route.query.projectId,
  212. vagueTo: this.vagueTo, //主关系
  213. vagueFrom: this.vagueFrom, //从关系
  214. objectType: 1,
  215. relType: this.$route.query.relationType,
  216. pageSize: 50,
  217. pageNumber: 1,
  218. graphicType: this.$route.query.graphicType,
  219. zoneType: this.$route.query.zoneType ? this.$route.query.zoneType : "",
  220. };
  221. relManualQuery(data).then((res) => {
  222. console.log("this.tableHeader", this.tableHeader);
  223. this.tableData = res.content;
  224. });
  225. }
  226. created() {
  227. let relationTypeName = this.$route.query.relationTypeName;
  228. this.tableHeader = tableHeader[relationTypeName];
  229. this.relTypeStatus = this.$route.query.relTypeStatus;
  230. // 获取主从对象下拉框数据
  231. this.relToType();
  232. // 获取table列表
  233. this.relManualQuery();
  234. }
  235. }
  236. </script>
  237. <style scoped lang="scss">
  238. .relation {
  239. background: #ffffff;
  240. height: 100%;
  241. .header {
  242. padding: 12px;
  243. overflow: hidden;
  244. border-bottom: 1px solid #e1e7ea;
  245. }
  246. .content {
  247. padding: 12px;
  248. .object {
  249. p {
  250. border-left: 7px solid #555555;
  251. text-indent: 10px;
  252. margin-bottom: 10px;
  253. }
  254. }
  255. }
  256. }
  257. </style>