index.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  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
  52. v-if="tableHeight"
  53. @updata="relManualQuery"
  54. :tableHeader="tableHeader"
  55. :tableData="tableData"
  56. :height="tableHeight"
  57. :loading="loading"
  58. />
  59. <!-- 分页 -->
  60. <div class="pagination">
  61. <el-pagination
  62. @size-change="handleSizeChange"
  63. @current-change="handleCurrentChange"
  64. :current-page="page.currentPage"
  65. :page-sizes="[10, 15, 20, 30]"
  66. :page-size="page.pageSize"
  67. layout="total, sizes, prev, pager, next, jumper"
  68. :total="page.total"
  69. >
  70. </el-pagination>
  71. </div>
  72. <addRelationDialog
  73. @closeAddRelation="addRelationValue = false"
  74. @update="relManualQuery"
  75. :addRelationValue="addRelationValue"
  76. :values="values"
  77. />
  78. <excelDialog :values="values" ref="excelDialog"></excelDialog>
  79. <editRelationDialog :values="values"></editRelationDialog>
  80. </div>
  81. </template>
  82. <script lang="ts">
  83. import { Component, Vue } from "vue-property-decorator";
  84. import { AdmSearch } from "./../../components";
  85. import relationTable from "./components/table";
  86. import tableHeader from "@/views/maintain/relationship/components/tableHeader";
  87. import addRelationDialog from "./components/addRelationDialog.vue";
  88. import editRelationDialog from "./components/editRelationDialog.vue";
  89. import excelDialog from "./components/excelDialog.vue";
  90. import { relToType, relManualQuery, relDel } from "@/api/datacenter";
  91. @Component({
  92. name: "relation",
  93. components: {
  94. AdmSearch,
  95. relationTable,
  96. addRelationDialog,
  97. excelDialog,
  98. editRelationDialog,
  99. },
  100. })
  101. export default class extends Vue {
  102. categoryFrom = ""; //主关系
  103. mainOptions = []; //主关系选项
  104. categoryTo = ""; //次关系
  105. minorOptions = []; //次关系选项
  106. vagueFrom = ""; //主关系模糊收索
  107. vagueTo = ""; //次关系模糊收索
  108. //表头数据
  109. tableHeader = [];
  110. //表格数据
  111. tableData = [];
  112. // 是否添加关系
  113. addRelationValue: Boolean = false;
  114. // 传入tip需要得字段
  115. values: object = {
  116. relation_maintenance: "关系维护",
  117. optionTips: `请下载最新最新<${this.$route.query.relationTypeName}>数据进行手动维护`, //请下载最新最新 xxxx 数据进行手动维护
  118. currentNum: "当前关系数量:",
  119. download: "下载模板(含数据)",
  120. lastTime: `最后更新时间为:${this.$route.query.lastUpdate || ""}`, //最后更新时间为
  121. uploadTxt: "将Excel文件拖到此处,或<em>单击上传Excel文件<em>",
  122. uploadTips: "上传的Excel数据将完全覆盖当前关系表(关系表先前数据不会保留)",
  123. downloadFile: " 下载报告文件",
  124. back: "返回",
  125. done: "完成",
  126. addShip: "添加关系",
  127. editShip: "编辑关系",
  128. codeTip: "请填写主被控设备对象识别编码",
  129. deviceTip: "请填写主被控设备对象设备号",
  130. codeTitle: "识别编码对应:",
  131. mainObject: "主对象:",
  132. affiliatedObject: "从对象:",
  133. pleaseEnter: "请输入",
  134. pleaseEnterCode: "请输入识别编码",
  135. add: "添加",
  136. cancel: "取消",
  137. delete: "删除关系",
  138. };
  139. relTypeStatus: any = 0; //关系相关类型主从 0 None 1主 2从 3主从
  140. page: object = {
  141. total: 0, //总数
  142. currentPage: 1, //当前页
  143. pageSize: 15, //当前页数量
  144. };
  145. tableHeight: number = 0; //table高
  146. loading: Boolean = false; //是否显示loadding
  147. /////////////////////////////////////////
  148. // 方法
  149. /**
  150. * 返回页面上一级
  151. */
  152. goBack() {
  153. this.$router.go(-1);
  154. }
  155. /**
  156. * 上传 execl
  157. */
  158. updataExecl() {
  159. this.$refs.excelDialog.dialogExport = true;
  160. }
  161. /**
  162. * 分页数量切换
  163. */
  164. handleSizeChange(val: any) {
  165. Object.assign(this.page, {
  166. pageSize: val,
  167. });
  168. this.relManualQuery();
  169. }
  170. /**
  171. * 分页切换
  172. */
  173. handleCurrentChange(val: any) {
  174. Object.assign(this.page, {
  175. currentPage: val,
  176. });
  177. this.relManualQuery();
  178. }
  179. /**
  180. * 主关系下拉框选择
  181. */
  182. mainSelect(val: any) {
  183. this.categoryFrom = val;
  184. this.relManualQuery();
  185. console.log("mainSelect", val);
  186. }
  187. /**
  188. * 从关系下拉框选择
  189. */
  190. minorSelect(val: any) {
  191. this.categoryTo = val;
  192. this.relManualQuery();
  193. }
  194. // 主关系模糊搜索
  195. mainSerch(val: string) {
  196. this.vagueFrom = val;
  197. this.relManualQuery();
  198. }
  199. // 从关系模糊搜索
  200. minorSearch(val: string) {
  201. this.vagueTo = val;
  202. this.relManualQuery();
  203. }
  204. /**
  205. * 添加关系
  206. */
  207. addRelation() {
  208. this.addRelationValue = true;
  209. }
  210. /**
  211. * 获取主对象从对象关系
  212. */
  213. relToType() {
  214. const urlData = this.$route.query;
  215. if (this.relTypeStatus == 0) {
  216. this.mainObject = ""; //主关系
  217. this.mainOptions = []; //主关系选项
  218. this.minorObject = ""; //次关系
  219. this.minorOptions = []; //次关系选项
  220. return;
  221. }
  222. // 获取主关系接口
  223. if (this.relTypeStatus == 1 || this.relTypeStatus == 3) {
  224. const data = {
  225. zoneType: urlData.zoneType ? urlData.zoneType : "",
  226. graphCode: urlData.graphicType,
  227. type: urlData.relationType,
  228. relType: urlData.relationType,
  229. status: 1, // 1 为主关系;2 为从关系
  230. };
  231. relToType(data).then((res) => {
  232. this.mainObject = ""; //主关系
  233. this.mainOptions = res.content; //主关系选项
  234. });
  235. }
  236. // 获取从关系接口
  237. if (this.relTypeStatus == 2 || this.relTypeStatus == 3) {
  238. const data = {
  239. zoneType: urlData.zoneType ? urlData.zoneType : "",
  240. graphCode: urlData.graphicType,
  241. type: urlData.relationType,
  242. relType: urlData.relationType,
  243. status: 2, // 1 为主关系;2 为从关系
  244. };
  245. relToType(data).then((res) => {
  246. this.minorObject = ""; //次关系
  247. this.minorOptions = res.content; //次关系选项
  248. });
  249. }
  250. }
  251. /**
  252. * 获取table列表
  253. */
  254. relManualQuery() {
  255. this.loading = true;
  256. // 获取table数据
  257. const data = {
  258. projectId: this.$route.query.projectId,
  259. categoryFrom: this.categoryFrom,
  260. categoryTo: this.categoryTo,
  261. vagueTo: this.vagueTo, //主关系
  262. vagueFrom: this.vagueFrom, //从关系
  263. objectType: 1,
  264. relType: this.$route.query.relationType,
  265. pageSize: this.page.pageSize,
  266. pageNumber: this.page.currentPage,
  267. graphicType: this.$route.query.graphicType,
  268. zoneType: this.$route.query.zoneType ? this.$route.query.zoneType : "",
  269. };
  270. relManualQuery(data)
  271. .then((res) => {
  272. this.tableData = res.content;
  273. this.page.total = res.total;
  274. this.loading = false;
  275. })
  276. .catch((error) => {
  277. this.loading = false;
  278. });
  279. }
  280. created() {
  281. let relationTypeName = this.$route.query.relationTypeName;
  282. this.tableHeader = tableHeader[relationTypeName];
  283. this.relTypeStatus = this.$route.query.relTypeStatus;
  284. // 获取主从对象下拉框数据
  285. this.relToType();
  286. // 获取table列表
  287. this.relManualQuery();
  288. }
  289. mounted() {
  290. //计算table的高度
  291. let allHeight =
  292. document.getElementsByClassName("relation")[0].offsetHeight - 57; //57是Head的高
  293. let contentHeight = document.getElementsByClassName("content")[0]
  294. .offsetHeight;
  295. this.tableHeight = allHeight - contentHeight - 47;
  296. }
  297. }
  298. </script>
  299. <style scoped lang="scss">
  300. .relation {
  301. background: #ffffff;
  302. height: 100%;
  303. .header {
  304. padding: 12px;
  305. overflow: hidden;
  306. border-bottom: 1px solid #e1e7ea;
  307. }
  308. .content {
  309. padding: 12px;
  310. .object {
  311. p {
  312. border-left: 7px solid #555555;
  313. text-indent: 10px;
  314. margin-bottom: 10px;
  315. }
  316. }
  317. }
  318. .pagination {
  319. margin-top: 12px;
  320. margin-right: 24px;
  321. float: right;
  322. }
  323. }
  324. </style>