businessTable.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. <template>
  2. <div>
  3. <div style="margin-bottom: 15px;">
  4. <el-input
  5. placeholder="请输入内容"
  6. @blur="querySearch"
  7. size="small"
  8. v-model="search"
  9. class="input-with-select"
  10. >
  11. <el-button slot="append" @click="querySearch" icon="el-icon-search"></el-button>
  12. </el-input>
  13. </div>
  14. <el-table
  15. :data="tableData"
  16. height="300"
  17. :stripe="true"
  18. border
  19. size="small"
  20. v-loading="isLoading"
  21. style="width: 100%"
  22. >
  23. <el-table-column label="业务空间名称">
  24. <template slot-scope="scope">
  25. <span style="margin-left: 10px">
  26. <el-tooltip
  27. :content="scope.row.infos.RoomLocalName || scope.row.infos.RoomName"
  28. placement="top"
  29. >
  30. <span>{{scope.row.infos.RoomLocalName || scope.row.infos.RoomName | cutString(8)}}</span>
  31. </el-tooltip>
  32. </span>
  33. </template>
  34. </el-table-column>
  35. <el-table-column v-if="type == 'relevance'" label="操作">
  36. <template slot-scope="scope">
  37. <el-button type="text" size="mini" @click="deleteSpace(scope.row)">关联平面图</el-button>
  38. </template>
  39. </el-table-column>
  40. </el-table>
  41. <my-pagination :page="page" @change="pageChange"></my-pagination>
  42. </div>
  43. </template>
  44. <script>
  45. import { getBussines2, createRelation } from "@/api/request";
  46. import myPagination from "@/components/lib/myPagination.vue";
  47. export default {
  48. name: "equip-table",
  49. components: {
  50. myPagination
  51. },
  52. props: {
  53. type: {
  54. type: String,
  55. default: "default"
  56. }
  57. },
  58. data() {
  59. return {
  60. page: {
  61. size: 50,
  62. sizes: [10, 30, 50, 100, 150, 200],
  63. total: 1,
  64. currentPage: 1
  65. },
  66. tableData: [],
  67. allData: null,
  68. search: "",
  69. list: {},
  70. graphy: "",
  71. isLoading: false,
  72. code: null
  73. };
  74. },
  75. created() { },
  76. methods: {
  77. getData(list, build, graphy, code) {
  78. this.isLoading = true;
  79. this.list = list;
  80. this.graphy = graphy;
  81. this.code = code
  82. getBussines2(
  83. // {
  84. // data: {
  85. // criteria: {
  86. // id: build.code,
  87. // graphId: graphy,
  88. // relType: !!code ? code.rel_type : "99",
  89. // exclude: "false",
  90. // side: 1,
  91. // type: [code.code]
  92. // }
  93. // },
  94. // ProjId: this.$route.query.projId,
  95. // secret: this.$route.query.secret
  96. // }
  97. {
  98. data: {
  99. criteria: {
  100. id: build.code,
  101. // graphId: this.graphyId,
  102. // relType: this.spaceType.rel_type,
  103. // exclude: false,
  104. // side: 1,
  105. type: [code.code],
  106. "exclude": [ // 可选, 只查询指定图/关系中的对象
  107. {
  108. "graphId": graphy,
  109. "graphType": code.code,
  110. "relType": !!code ? code.rel_type : "99",
  111. "side": "toId",
  112. // "fromId": "", // 选填
  113. // "toId": "" // 选填
  114. }
  115. ]
  116. },
  117. },
  118. ProjId: this.$route.query.projId,
  119. secret: this.$route.query.secret
  120. })
  121. .then(res => {
  122. if (res.data.Result == "success") {
  123. this.allData = res.data.Content || [];
  124. this.page.total = this.allData.length;
  125. this.tableData = this.pagination(
  126. this.page.currentPage,
  127. this.page.size,
  128. this.allData
  129. );
  130. this.isLoading = false;
  131. } else {
  132. this.$message.error(res.data.ResultMsg);
  133. }
  134. })
  135. .catch(() => {
  136. this.$message.error("请求出错");
  137. });
  138. },
  139. /**
  140. * 分页函数
  141. * @param pageNo 当前页数
  142. * @param pageSize 当前条数
  143. * @param array 全部数据
  144. */
  145. pagination(pageNo, pageSize, array) {
  146. let offset = (pageNo - 1) * pageSize;
  147. return offset + pageSize >= array.length
  148. ? array.slice(offset, array.length)
  149. : array.slice(offset, offset + pageSize);
  150. },
  151. //搜索
  152. querySearch() {
  153. var restaurants = this.allData;
  154. var results = this.search
  155. ? restaurants.filter(this.createFilter(this.search))
  156. : restaurants;
  157. this.page.total = results.length;
  158. this.tableData = this.tableData = this.pagination(
  159. this.page.currentPage,
  160. this.page.size,
  161. results
  162. );
  163. },
  164. createFilter(queryString) {
  165. return restaurant => {
  166. return (
  167. restaurant.infos.RoomLocalName.indexOf(queryString) > -1
  168. );
  169. };
  170. },
  171. /**
  172. * 删除
  173. * @param row 点击的当条数据
  174. */
  175. deleteSpace(row) {
  176. let param = {
  177. data: {
  178. criterias: []
  179. },
  180. ProjId: this.$route.query.projId,
  181. secret: this.$route.query.secret
  182. };
  183. this.list.map(item => {
  184. param.data.criterias.push({
  185. from_id: item.id, //必填,object id
  186. to_id: row.id, //必填,object id
  187. graph_id: this.graphy, //必填,图实例id
  188. rel_type: this.code.rel_type
  189. });
  190. });
  191. createRelation(param)
  192. .then(res => {
  193. if (res.data.Result == "success") {
  194. this.$message.success("关联成功");
  195. this.$emit("createSuccess");
  196. } else {
  197. this.$message.error(res.data.ResultMsg);
  198. }
  199. })
  200. .catch(() => {
  201. this.$message.error("请求失败");
  202. });
  203. },
  204. /**
  205. * 查看详情
  206. * @param row 点击的当条数据
  207. */
  208. lockDetails(row) { },
  209. pageChange() {
  210. this.tableData = this.pagination(
  211. this.page.currentPage,
  212. this.page.size,
  213. this.allData
  214. );
  215. }
  216. },
  217. filters: {
  218. cutString: function (str, len) {
  219. //length属性读出来的汉字长度为1
  220. if (!!str && typeof str == "string" && str.length > len) {
  221. return str.substring(0, len) + "...";
  222. } else {
  223. return str || "--";
  224. }
  225. }
  226. }
  227. };
  228. </script>
  229. <style>
  230. .el-table tr th {
  231. background: #fafafa !important;
  232. }
  233. </style>