createCanvasDialog.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  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. style="width: 260px"
  16. v-model="ruleForm.buildFloor"
  17. :options="buildFloorData"
  18. :props="props"
  19. clearable
  20. size="small"
  21. ></el-cascader>
  22. </el-form-item>
  23. <el-form-item label="名称" prop="name">
  24. <el-input v-model="ruleForm.name" placeholder="请输入名称" size="small"></el-input>
  25. </el-form-item>
  26. <el-form-item label="标签" prop="resource">
  27. <div class="tagContainer">
  28. <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
  29. {{ tag }}
  30. </el-tag>
  31. <el-input
  32. class="input-new-tag"
  33. v-if="inputVisible"
  34. v-model="inputValue"
  35. ref="saveTagInput"
  36. size="small"
  37. @keyup.enter.native="handleInputConfirm"
  38. @blur="handleInputConfirm"
  39. :maxlength="10"
  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. export default {
  61. components: {},
  62. data() {
  63. /**
  64. * 自定义楼层校验规则
  65. */
  66. const validateBuildFloor = (rule, value, callback) => {
  67. if (value.length !== 2) {
  68. callback(new Error('请选择具体的楼层'));
  69. } else {
  70. callback();
  71. }
  72. };
  73. return {
  74. ruleForm: {
  75. buildFloor: [],
  76. name: "",
  77. folder: "",
  78. },
  79. rules: {
  80. buildFloor: [
  81. { required: true, message: "请选择建筑楼层", trigger: "change" },
  82. { validator: validateBuildFloor, trigger: 'change' }
  83. ],
  84. name: [
  85. { required: true, message: "请输入名称", trigger: "blur" },
  86. { max: 10, message: "最长为10个文字", trigger: "blur" },
  87. ],
  88. folder: [{ required: true, message: "请选择所属文件夹", trigger: "blur" }],
  89. },
  90. buildFloorData: [],
  91. props: {
  92. value: "id",
  93. label: "localName",
  94. children: "floor",
  95. },
  96. value: [],
  97. outerVisible: false,
  98. dynamicTags: [],
  99. inputValue: "",
  100. inputVisible: false,
  101. folderData: [
  102. {
  103. id: 1,
  104. name: "能源系统",
  105. updateName: "能源系统",
  106. checked: false,
  107. showInput: false,
  108. },
  109. {
  110. id: 2,
  111. name: "排水系统",
  112. updateName: "排水系统",
  113. checked: false,
  114. showInput: false,
  115. },
  116. {
  117. id: 3,
  118. name: "消防水系统",
  119. updateName: "消防水系统",
  120. checked: false,
  121. showInput: false,
  122. },
  123. {
  124. id: 4,
  125. name: "公共照明系统公共照明系统公共照明系统公共照明系统",
  126. updateName: "公共照明系统公共照明系统公共照明系统公共照明系统",
  127. checked: false,
  128. showInput: false,
  129. },
  130. {
  131. id: 5,
  132. name: "暖通空调系统",
  133. updateName: "暖通空调系统",
  134. checked: false,
  135. showInput: false,
  136. },
  137. ],
  138. };
  139. },
  140. created() {
  141. this.getBuildingFloorData();
  142. },
  143. methods: {
  144. // 显示创建平面图弹窗
  145. showDialog() {
  146. this.outerVisible = true;
  147. },
  148. // 获取建筑楼层数据
  149. getBuildingFloorData() {
  150. const params = {
  151. pageNumber: 1,
  152. pageSize: 1000,
  153. orders: "name asc, createTime desc",
  154. cascade: [
  155. {
  156. name: "floor",
  157. orders: "floorSequenceId desc",
  158. },
  159. ],
  160. };
  161. buildingQuery(params).then((res) => {
  162. this.buildFloorData = res.content;
  163. });
  164. },
  165. // 展示标签输入框
  166. showInput() {
  167. this.inputVisible = true;
  168. this.$nextTick(() => {
  169. this.$refs.saveTagInput.$refs.input.focus();
  170. });
  171. },
  172. // 添加标签
  173. handleInputConfirm() {
  174. const inputValue = this.inputValue;
  175. if (inputValue) {
  176. this.dynamicTags.push(inputValue);
  177. }
  178. this.inputVisible = false;
  179. this.inputValue = "";
  180. },
  181. // 删除标签
  182. handleClose(tag) {
  183. this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
  184. },
  185. // 点击确定按钮(校验创建信息并调用创建平面图接口)
  186. submitForm(formName) {
  187. this.$refs[formName].validate((valid) => {
  188. if (valid) {
  189. this.createPlan();
  190. } else {
  191. console.log("error submit!!");
  192. return false;
  193. }
  194. });
  195. },
  196. // 重置创建平面图信息
  197. resetForm(formName) {
  198. this.dynamicTags = [];
  199. this.$refs[formName].resetFields();
  200. this.outerVisible = false;
  201. },
  202. // 创建平面图接口
  203. createPlan() {
  204. const pa = {
  205. content: [
  206. {
  207. name: this.ruleForm.name,
  208. label: this.dynamicTags,
  209. building: this.ruleForm.buildFloor[0],
  210. floor: this.ruleForm.buildFloor[1]
  211. },
  212. ],
  213. };
  214. if (this.folderData.find(folder =>{return folder.id === this.ruleForm.folder})) {
  215. console.log("选中已有文件夹", this.ruleForm.folder);
  216. } else {
  217. console.log("新建文件夹", this.ruleForm.folder);
  218. }
  219. console.log(pa)
  220. /**
  221. * 返回参数中要返给我是否新建文件夹标识
  222. */
  223. },
  224. // 关闭创建弹窗回调(重置创建信息)
  225. closeModal() {
  226. this.resetForm("ruleForm");
  227. },
  228. },
  229. };
  230. </script>
  231. <style lang="less" scoped>
  232. /deep/ .createDialog {
  233. /deep/ .el-dialog__header {
  234. border-bottom: 1px solid #f0f1f2ff;
  235. }
  236. /deep/ .el-dialog__body {
  237. padding: 16px 120px;
  238. max-height: 500px;
  239. overflow: auto;
  240. }
  241. .el-dialog__footer {
  242. padding: 0 20px 20px;
  243. .el-button {
  244. padding: 0;
  245. width: 80px;
  246. height: 32px;
  247. text-align: center;
  248. line-height: 1;
  249. }
  250. }
  251. .el-form-item {
  252. margin-bottom: 0;
  253. & + .el-form-item {
  254. margin-top: 18px;
  255. }
  256. }
  257. .el-form-item__label {
  258. line-height: 1;
  259. }
  260. .input-new-tag {
  261. width: 150px;
  262. }
  263. .button-new-tag {
  264. width: 60px;
  265. height: 24px;
  266. margin-bottom: 8px;
  267. padding: 0;
  268. line-height: 1;
  269. border-radius: 2px;
  270. border: 1px dotted #0091ff;
  271. color: #0091ff;
  272. &:hover {
  273. background: #fff;
  274. color: #0091ff;
  275. border: 1px dotted #0091ff;
  276. }
  277. }
  278. .typeButton {
  279. min-width: 122px;
  280. height: 32px;
  281. text-align: center;
  282. line-height: 32px;
  283. border-radius: 4px;
  284. padding: 0;
  285. border: 1px solid #c3c6cb;
  286. }
  287. .tagContainer {
  288. width: 100%;
  289. border-radius: 4px;
  290. border: 1px solid #c3c6cb;
  291. padding: 7px 12px;
  292. line-height: 1;
  293. .el-tag {
  294. background: #eff0f1;
  295. border-radius: 2px;
  296. color: #1f2429ff;
  297. margin: 0 8px 8px 0;
  298. padding: 5px 6px 5px 8px;
  299. font-size: 14px;
  300. height: 24px;
  301. line-height: 1;
  302. border: none;
  303. &:hover {
  304. border: none;
  305. }
  306. .el-icon-close {
  307. color: #9ca2a9ff;
  308. right: 0;
  309. &:hover {
  310. color: #fff;
  311. background-color: #ccc;
  312. }
  313. }
  314. }
  315. }
  316. }
  317. </style>