createPointZone.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. <template>
  2. <div id="createPoint">
  3. <div class="condition">
  4. <div class="header">
  5. <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
  6. <el-button size="small" style="float:right" @click="createZ">创建</el-button>
  7. </div>
  8. <el-scrollbar style="height:calc(100% - 43px)">
  9. <div class="item">
  10. <span>基本信息:</span>
  11. <div>
  12. <label><span style="color:red;">*</span>业务空间名称</label>
  13. <el-input placeholder="请输入业务空间名称" v-model="RoomLocalName" clearable style="width:215px;margin-right:10px;"></el-input>
  14. <label>业务空间编码</label>
  15. <el-input placeholder="请输入业务空间编码" v-model="RoomLocalID" clearable style="width:215px;margin-right:10px;"></el-input>
  16. </div>
  17. <div>
  18. <label><span style="color:red;">*</span>所属建筑楼层</label>
  19. <el-cascader placeholder='请选择' v-model="buildFloor" :options="options" :props="floorProps" filterable ref="buildfloor"
  20. style="width:215px;margin-right:10px;"></el-cascader>
  21. <label><span style="color:red;">*</span>业务空间类型</label>
  22. <el-select v-model="space" placeholder="请选择空间" style="width:215px;margin-right:10px;" @change="changeSpace">
  23. <el-option v-for="item in spaceList" :key="item.Code" :label="item.Name" :value="item.Code">
  24. </el-option>
  25. </el-select>
  26. </div>
  27. </div>
  28. <div class="item">
  29. <span>其它可补充信息:</span>
  30. <i style="cursor: pointer;" :class="showEx"
  31. @click="showEx = (showEx == 'el-icon-arrow-up' ? 'el-icon-arrow-down' : 'el-icon-arrow-up')"></i>
  32. <div v-show="showEx == 'el-icon-arrow-up'" v-loading="loadingOtherMsg">
  33. <zoneInput v-show="otherList.length" :inputList="otherList" labelWidth="140px" ref="zoneInput"></zoneInput>
  34. <p v-show="!otherList.length">请选择业务空间类型</p>
  35. </div>
  36. </div>
  37. <div class="item">
  38. <p>位置标签图片信息:</p>
  39. <locationPointMsg ref="pointMsg" :pointObj="$route.params.item"></locationPointMsg>
  40. </div>
  41. </el-scrollbar>
  42. </div>
  43. </div>
  44. </template>
  45. <script>
  46. import locationPointMsg from '@/views/data_admin/buildGraphy/locationPointMsg'
  47. import { queryDictionaryHead, getDataDictionary, createZone } from '@/api/scan/request';
  48. import { mapGetters } from 'vuex'
  49. import zoneInput from '@/components/data_admin/zoneInput'
  50. export default {
  51. data() {
  52. return {
  53. floorProps: {
  54. value: 'BuildID',
  55. label: 'BuildLocalName',
  56. children: 'Floor'
  57. },
  58. options: [],//建筑楼层
  59. spaceList: [],//空间列表
  60. space: '',//当前空间
  61. buildFloor: [],//建筑楼层信息
  62. zoneName: '',//业务空间名称
  63. zoneLocalId: '',//业务空间编码
  64. showEx: 'el-icon-arrow-down',//下拉菜单
  65. RoomLocalID: '',//业务空间本地编码
  66. RoomLocalName: '',//业务空间名称
  67. otherList: [],//可补充信息list
  68. loadingOtherMsg: false,
  69. }
  70. },
  71. computed: {
  72. ...mapGetters("layout", ["projectId"])
  73. },
  74. props: {
  75. },
  76. components: {
  77. locationPointMsg,
  78. zoneInput
  79. },
  80. created() {
  81. this.options = this.$route.params.floorData
  82. this.getSpaceList();
  83. },
  84. methods: {
  85. //创建
  86. createZ() {
  87. let param = {
  88. zone: '',
  89. data: {
  90. content: []
  91. }
  92. }
  93. let zObj = this.$refs.zoneInput.getFormData();
  94. zObj.Pic = this.$refs.pointMsg.choImg.concat();
  95. zObj.Pic = zObj.Pic.map(item => ({
  96. Id: item.ObjectId,
  97. Key: item.Key,
  98. Name: item.Name,
  99. Type: item.Type
  100. }))
  101. if (this.RoomLocalName && this.buildFloor.length && this.space) {
  102. zObj.RoomLocalName = this.RoomLocalName;
  103. zObj.RoomLocalID = this.RoomLocalID;
  104. zObj.BuildingId = this.buildFloor[0];
  105. zObj.FloorId = this.buildFloor[1];
  106. param.zone = this.space;
  107. param.data.content = [zObj];
  108. createZone(param, res => {
  109. this.$message.success("创建成功");
  110. this.$refs.pointMsg.clearImg();
  111. this.RoomLocalName = ''
  112. this.RoomLocalID = ''
  113. this.buildFloor = []
  114. this.space = ''
  115. this.otherList = []
  116. })
  117. }
  118. else if (!this.RoomLocalName) {
  119. this.$message("请输入业务空间名称");
  120. }
  121. else if (!this.buildFloor.length) {
  122. this.$message("请选择所属建筑楼层");
  123. }
  124. else {
  125. this.$message("请选择业务空间类型");
  126. }
  127. },
  128. //获取空间列表
  129. getSpaceList() {
  130. let pa = {
  131. Filters: `parentId='Space'`
  132. }
  133. queryDictionaryHead(pa, res => {
  134. this.spaceList = res.Content.filter((item => { return item.Name != '元空间' }));
  135. });
  136. },
  137. //选择业务空间
  138. changeSpace(val) {
  139. this.space = val;
  140. let pa = {
  141. type: this.space,
  142. data: {
  143. "Orders": "sort asc", "PageNumber": 1, "PageSize": 500
  144. }
  145. };
  146. this.loadingOtherMsg = true;
  147. getDataDictionary(pa, res => {
  148. this.loadingOtherMsg = false;
  149. let filterCode = ["RoomLocalID", "RoomLocalName"]
  150. res.Content = res.Content.filter(item => {
  151. item.inputValue = null;
  152. return filterCode.indexOf(item.InfoPointCode) == -1
  153. });
  154. this.otherList = res.Content;
  155. this.$refs.zoneInput.init(this.otherList);
  156. })
  157. },
  158. //返回
  159. goBack() {
  160. this.$router.push({
  161. name: "buildGraphy",
  162. params: { nowBuildFloor: this.$route.params.nowBuildFloor }
  163. })
  164. }
  165. },
  166. watch: {
  167. projectId: {
  168. handler(val) {
  169. this.goBack();
  170. }
  171. }
  172. }
  173. }
  174. </script>
  175. <style lang="less" scoped>
  176. .condition {
  177. position: relative;
  178. padding: 10px 10px;
  179. display: flex;
  180. height: calc(100% - 22px);
  181. flex-direction: column;
  182. border: 1px solid #dfe6ec;
  183. background: #fff;
  184. .header {
  185. padding-bottom: 10px;
  186. border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  187. span {
  188. line-height: 33px;
  189. margin-left: 15px;
  190. }
  191. /deep/ .buildFloor {
  192. line-height: 32px;
  193. }
  194. }
  195. }
  196. /deep/ .el-scrollbar__wrap {
  197. overflow-x: hidden;
  198. }
  199. .item {
  200. padding: 10px 10px;
  201. label {
  202. display: inline-block;
  203. padding: 5px 10px;
  204. width: 130px;
  205. }
  206. }
  207. .suppMsg {
  208. display: inline-block;
  209. position: relative;
  210. }
  211. </style>