createPlanarDialog.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336
  1. <template>
  2. <el-dialog
  3. class="create-dialog"
  4. title="新建画布"
  5. width="600px"
  6. :visible.sync="outerVisible"
  7. :close-on-click-modal="false"
  8. custom-class="createDialog"
  9. @close="closeModal"
  10. >
  11. <div class="dialog-bodys">
  12. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="top">
  13. <el-form-item label="所属楼层" prop="buildFloor">
  14. <el-cascader
  15. ref="buildFloor"
  16. style="width: 260px"
  17. v-model="ruleForm.buildFloor"
  18. :options="buildFloorData"
  19. :props="props"
  20. clearable
  21. size="small"
  22. ></el-cascader>
  23. </el-form-item>
  24. <el-form-item label="名称" prop="name">
  25. <el-input v-model="ruleForm.name" placeholder="请输入名称" size="small" :maxlength="10"></el-input>
  26. </el-form-item>
  27. <el-form-item label="标签" prop="resource">
  28. <div class="tagContainer">
  29. <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
  30. {{ tag }}
  31. </el-tag>
  32. <el-input
  33. class="input-new-tag"
  34. v-if="inputVisible"
  35. v-model="inputValue"
  36. ref="saveTagInput"
  37. size="small"
  38. @keyup.enter.native="handleInputConfirm"
  39. @blur="handleInputConfirm"
  40. >
  41. </el-input>
  42. <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
  43. </div>
  44. </el-form-item>
  45. <el-form-item label="所属文件夹" prop="folder">
  46. <el-select v-model="ruleForm.folder" filterable allow-create default-first-option size="small">
  47. <el-option v-for="item in folderData" :key="item.id" :label="item.name" :value="item.id"> </el-option>
  48. </el-select>
  49. </el-form-item>
  50. </el-form>
  51. </div>
  52. <div slot="footer" class="dialog-footer">
  53. <el-button @click="resetForm('ruleForm')">取消</el-button>
  54. <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
  55. </div>
  56. </el-dialog>
  57. </template>
  58. <script>
  59. import { buildingQuery } from "@/api/datacenter";
  60. import { folderQuery, planarCreate } from "@/api/labsl";
  61. export default {
  62. components: {},
  63. data() {
  64. /**
  65. * 自定义楼层校验规则
  66. */
  67. const validateBuildFloor = (rule, value, callback) => {
  68. if (value.length !== 2) {
  69. callback(new Error("请选择具体的楼层"));
  70. } else {
  71. callback();
  72. }
  73. };
  74. return {
  75. ruleForm: {
  76. buildFloor: [],
  77. name: "",
  78. folder: "",
  79. },
  80. rules: {
  81. buildFloor: [
  82. { required: true, message: "请选择建筑楼层", trigger: "change" },
  83. { validator: validateBuildFloor, trigger: "change" },
  84. ],
  85. name: [
  86. { required: true, message: "请输入名称", trigger: "blur" },
  87. { max: 10, message: "最长为10个文字", trigger: "blur" },
  88. ],
  89. folder: [{ required: true, message: "请选择所属文件夹", trigger: "blur" }],
  90. },
  91. buildFloorData: [],
  92. props: {
  93. value: "id",
  94. label: "localName",
  95. children: "floor",
  96. },
  97. floorName: "",
  98. folderName: "",
  99. value: [],
  100. outerVisible: false,
  101. dynamicTags: [],
  102. inputValue: "",
  103. inputVisible: false,
  104. folderData: [],
  105. };
  106. },
  107. methods: {
  108. // 显示创建平面图弹窗
  109. showDialog() {
  110. this.outerVisible = true;
  111. },
  112. // 获取建筑楼层数据和文件夹数据
  113. getData() {
  114. const params1 = {
  115. pageNumber: 1,
  116. pageSize: 1000,
  117. orders: "name asc, createTime desc",
  118. cascade: [
  119. {
  120. name: "floor",
  121. orders: "floorSequenceId desc",
  122. },
  123. ],
  124. };
  125. const params2 = {
  126. pageNumber: 1,
  127. pageSize: 1000,
  128. orders: "name asc, createTime desc",
  129. };
  130. const promise1 = new Promise((resolve) => {
  131. const res = buildingQuery(params1);
  132. resolve(res);
  133. });
  134. const promise2 = new Promise((resolve) => {
  135. const res = folderQuery(params2);
  136. resolve(res);
  137. });
  138. Promise.all([promise1, promise2]).then((values) => {
  139. console.log(values);
  140. this.buildFloorData = values[0].content;
  141. this.folderData = values[1].content;
  142. });
  143. },
  144. // 展示标签输入框
  145. showInput() {
  146. this.inputVisible = true;
  147. this.$nextTick(() => {
  148. this.$refs.saveTagInput.$refs.input.focus();
  149. });
  150. },
  151. // 添加标签
  152. handleInputConfirm() {
  153. const inputValue = this.inputValue;
  154. if (inputValue) {
  155. this.dynamicTags.push(inputValue);
  156. }
  157. this.inputVisible = false;
  158. this.inputValue = "";
  159. },
  160. // 删除标签
  161. handleClose(tag) {
  162. this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
  163. },
  164. // 点击确定按钮(校验创建信息并调用创建平面图接口)
  165. submitForm(formName) {
  166. this.$refs[formName].validate((valid) => {
  167. if (valid) {
  168. this.createPlan();
  169. } else {
  170. console.log("error submit!!");
  171. return false;
  172. }
  173. });
  174. },
  175. // 重置创建平面图信息
  176. resetForm(formName) {
  177. this.dynamicTags = [];
  178. this.$refs[formName].resetFields();
  179. this.outerVisible = false;
  180. },
  181. // 创建平面图接口
  182. async createPlan() {
  183. /**
  184. * 是否选中已有的文件夹对象
  185. * folder(undefind/folder对象)
  186. */
  187. const folder = this.folderData.find((folder) => {
  188. return folder.id === this.ruleForm.folder;
  189. });
  190. const floorNode = this.$refs.buildFloor.getCheckedNodes()[0];
  191. const buildingId = this.ruleForm.buildFloor[0];
  192. const floorId = this.ruleForm.buildFloor[1];
  193. const floorLocalName = floorNode.label;
  194. const floorMap = floorNode.data.infos && floorNode.data.infos.floorMap ? floorNode.data.infos.floorMap : "";
  195. const folderName = folder ? folder.name : this.ruleForm.folder;
  196. const params = {
  197. name: this.ruleForm.name,
  198. buildingId,
  199. floorId,
  200. };
  201. // 判断是否添加标签字段
  202. if (this.dynamicTags.length) params.label = this.dynamicTags;
  203. // 判断是否新建文件夹
  204. if (folder) {
  205. params.folderId = this.ruleForm.folder;
  206. } else {
  207. params.folderName = this.ruleForm.folder;
  208. }
  209. const res = await planarCreate(params);
  210. if (res.result === "success" && res.entityList.length) {
  211. const entity = res.entityList[0];
  212. // this.$emit("createPlanar", {
  213. // folderId: entity.folderId,
  214. // folderName: entity.folderName,
  215. // });
  216. this.$message.success("新建画布成功!");
  217. this.outerVisible = false;
  218. this.$router.push({
  219. name: "Editer",
  220. query: {
  221. buildingId: entity.buildingId,
  222. floorId: entity.floorId,
  223. id: entity.id,
  224. graphId: entity.graphId,
  225. folderId: entity.folderId,
  226. name: entity.name,
  227. version: entity.version,
  228. floorMap,
  229. folderName,
  230. floorLocalName,
  231. },
  232. });
  233. } else {
  234. this.$message.error(res.message);
  235. }
  236. },
  237. // 关闭创建弹窗回调(重置创建信息)
  238. closeModal() {
  239. this.resetForm("ruleForm");
  240. },
  241. },
  242. watch: {
  243. outerVisible(n) {
  244. if (n) this.getData();
  245. },
  246. },
  247. };
  248. </script>
  249. <style lang="less" scoped>
  250. /deep/ .createDialog {
  251. /deep/ .el-dialog__header {
  252. border-bottom: 1px solid #f0f1f2ff;
  253. }
  254. /deep/ .el-dialog__body {
  255. padding: 16px 120px;
  256. max-height: 500px;
  257. overflow: auto;
  258. }
  259. .el-dialog__footer {
  260. padding: 0 20px 20px;
  261. .el-button {
  262. padding: 0;
  263. width: 80px;
  264. height: 32px;
  265. text-align: center;
  266. line-height: 1;
  267. }
  268. }
  269. .el-form-item {
  270. margin-bottom: 0;
  271. & + .el-form-item {
  272. margin-top: 18px;
  273. }
  274. }
  275. .el-form-item__label {
  276. line-height: 1;
  277. }
  278. .input-new-tag {
  279. width: 150px;
  280. }
  281. .button-new-tag {
  282. width: 60px;
  283. height: 24px;
  284. margin-bottom: 8px;
  285. padding: 0;
  286. line-height: 1;
  287. border-radius: 2px;
  288. border: 1px dotted #0091ff;
  289. color: #0091ff;
  290. &:hover {
  291. background: #fff;
  292. color: #0091ff;
  293. border: 1px dotted #0091ff;
  294. }
  295. }
  296. .typeButton {
  297. min-width: 122px;
  298. height: 32px;
  299. text-align: center;
  300. line-height: 32px;
  301. border-radius: 4px;
  302. padding: 0;
  303. border: 1px solid #c3c6cb;
  304. }
  305. .tagContainer {
  306. width: 100%;
  307. border-radius: 4px;
  308. border: 1px solid #c3c6cb;
  309. padding: 7px 12px;
  310. line-height: 1;
  311. .el-tag {
  312. background: #eff0f1;
  313. border-radius: 2px;
  314. color: #1f2429ff;
  315. margin: 0 8px 8px 0;
  316. padding: 5px 6px 5px 8px;
  317. font-size: 14px;
  318. height: 24px;
  319. line-height: 1;
  320. border: none;
  321. &:hover {
  322. border: none;
  323. }
  324. .el-icon-close {
  325. color: #9ca2a9ff;
  326. right: 0;
  327. &:hover {
  328. color: #fff;
  329. background-color: #ccc;
  330. }
  331. }
  332. }
  333. }
  334. }
  335. </style>