123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336 |
- <template>
- <el-dialog
- class="create-dialog"
- title="新建画布"
- width="600px"
- :visible.sync="outerVisible"
- :close-on-click-modal="false"
- custom-class="createDialog"
- @close="closeModal"
- >
- <div class="dialog-bodys">
- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="top">
- <el-form-item label="所属楼层" prop="buildFloor">
- <el-cascader
- ref="buildFloor"
- style="width: 260px"
- v-model="ruleForm.buildFloor"
- :options="buildFloorData"
- :props="props"
- clearable
- size="small"
- ></el-cascader>
- </el-form-item>
- <el-form-item label="名称" prop="name">
- <el-input v-model="ruleForm.name" placeholder="请输入名称" size="small" :maxlength="10"></el-input>
- </el-form-item>
- <el-form-item label="标签" prop="resource">
- <div class="tagContainer">
- <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
- {{ tag }}
- </el-tag>
- <el-input
- class="input-new-tag"
- v-if="inputVisible"
- v-model="inputValue"
- ref="saveTagInput"
- size="small"
- @keyup.enter.native="handleInputConfirm"
- @blur="handleInputConfirm"
- >
- </el-input>
- <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
- </div>
- </el-form-item>
- <el-form-item label="所属文件夹" prop="folder">
- <el-select v-model="ruleForm.folder" filterable allow-create default-first-option size="small">
- <el-option v-for="item in folderData" :key="item.id" :label="item.name" :value="item.id"> </el-option>
- </el-select>
- </el-form-item>
- </el-form>
- </div>
- <div slot="footer" class="dialog-footer">
- <el-button @click="resetForm('ruleForm')">取消</el-button>
- <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
- </div>
- </el-dialog>
- </template>
- <script>
- import { buildingQuery } from "@/api/datacenter";
- import { folderQuery, planarCreate } from "@/api/labsl";
- export default {
- components: {},
- data() {
- /**
- * 自定义楼层校验规则
- */
- const validateBuildFloor = (rule, value, callback) => {
- if (value.length !== 2) {
- callback(new Error("请选择具体的楼层"));
- } else {
- callback();
- }
- };
- return {
- ruleForm: {
- buildFloor: [],
- name: "",
- folder: "",
- },
- rules: {
- buildFloor: [
- { required: true, message: "请选择建筑楼层", trigger: "change" },
- { validator: validateBuildFloor, trigger: "change" },
- ],
- name: [
- { required: true, message: "请输入名称", trigger: "blur" },
- { max: 10, message: "最长为10个文字", trigger: "blur" },
- ],
- folder: [{ required: true, message: "请选择所属文件夹", trigger: "blur" }],
- },
- buildFloorData: [],
- props: {
- value: "id",
- label: "localName",
- children: "floor",
- },
- floorName: "",
- folderName: "",
- value: [],
- outerVisible: false,
- dynamicTags: [],
- inputValue: "",
- inputVisible: false,
- folderData: [],
- };
- },
- methods: {
- // 显示创建平面图弹窗
- showDialog() {
- this.outerVisible = true;
- },
- // 获取建筑楼层数据和文件夹数据
- getData() {
- const params1 = {
- pageNumber: 1,
- pageSize: 1000,
- orders: "name asc, createTime desc",
- cascade: [
- {
- name: "floor",
- orders: "floorSequenceId desc",
- },
- ],
- };
- const params2 = {
- pageNumber: 1,
- pageSize: 1000,
- orders: "name asc, createTime desc",
- };
- const promise1 = new Promise((resolve) => {
- const res = buildingQuery(params1);
- resolve(res);
- });
- const promise2 = new Promise((resolve) => {
- const res = folderQuery(params2);
- resolve(res);
- });
- Promise.all([promise1, promise2]).then((values) => {
- console.log(values);
- this.buildFloorData = values[0].content;
- this.folderData = values[1].content;
- });
- },
- // 展示标签输入框
- showInput() {
- this.inputVisible = true;
- this.$nextTick(() => {
- this.$refs.saveTagInput.$refs.input.focus();
- });
- },
- // 添加标签
- handleInputConfirm() {
- const inputValue = this.inputValue;
- if (inputValue) {
- this.dynamicTags.push(inputValue);
- }
- this.inputVisible = false;
- this.inputValue = "";
- },
- // 删除标签
- handleClose(tag) {
- this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
- },
- // 点击确定按钮(校验创建信息并调用创建平面图接口)
- submitForm(formName) {
- this.$refs[formName].validate((valid) => {
- if (valid) {
- this.createPlan();
- } else {
- console.log("error submit!!");
- return false;
- }
- });
- },
- // 重置创建平面图信息
- resetForm(formName) {
- this.dynamicTags = [];
- this.$refs[formName].resetFields();
- this.outerVisible = false;
- },
- // 创建平面图接口
- async createPlan() {
- /**
- * 是否选中已有的文件夹对象
- * folder(undefind/folder对象)
- */
- const folder = this.folderData.find((folder) => {
- return folder.id === this.ruleForm.folder;
- });
- const floorNode = this.$refs.buildFloor.getCheckedNodes()[0];
- const buildingId = this.ruleForm.buildFloor[0];
- const floorId = this.ruleForm.buildFloor[1];
- const floorLocalName = floorNode.label;
- const floorMap = floorNode.data.infos && floorNode.data.infos.floorMap ? floorNode.data.infos.floorMap : "";
- const folderName = folder ? folder.name : this.ruleForm.folder;
- const params = {
- name: this.ruleForm.name,
- buildingId,
- floorId,
- };
- // 判断是否添加标签字段
- if (this.dynamicTags.length) params.label = this.dynamicTags;
- // 判断是否新建文件夹
- if (folder) {
- params.folderId = this.ruleForm.folder;
- } else {
- params.folderName = this.ruleForm.folder;
- }
- const res = await planarCreate(params);
- if (res.result === "success" && res.entityList.length) {
- const entity = res.entityList[0];
- // this.$emit("createPlanar", {
- // folderId: entity.folderId,
- // folderName: entity.folderName,
- // });
- this.$message.success("新建画布成功!");
- this.outerVisible = false;
- this.$router.push({
- name: "Editer",
- query: {
- buildingId: entity.buildingId,
- floorId: entity.floorId,
- id: entity.id,
- graphId: entity.graphId,
- folderId: entity.folderId,
- name: entity.name,
- version: entity.version,
- floorMap,
- folderName,
- floorLocalName,
- },
- });
- } else {
- this.$message.error(res.message);
- }
- },
- // 关闭创建弹窗回调(重置创建信息)
- closeModal() {
- this.resetForm("ruleForm");
- },
- },
- watch: {
- outerVisible(n) {
- if (n) this.getData();
- },
- },
- };
- </script>
- <style lang="less" scoped>
- /deep/ .createDialog {
- /deep/ .el-dialog__header {
- border-bottom: 1px solid #f0f1f2ff;
- }
- /deep/ .el-dialog__body {
- padding: 16px 120px;
- max-height: 500px;
- overflow: auto;
- }
- .el-dialog__footer {
- padding: 0 20px 20px;
- .el-button {
- padding: 0;
- width: 80px;
- height: 32px;
- text-align: center;
- line-height: 1;
- }
- }
- .el-form-item {
- margin-bottom: 0;
- & + .el-form-item {
- margin-top: 18px;
- }
- }
- .el-form-item__label {
- line-height: 1;
- }
- .input-new-tag {
- width: 150px;
- }
- .button-new-tag {
- width: 60px;
- height: 24px;
- margin-bottom: 8px;
- padding: 0;
- line-height: 1;
- border-radius: 2px;
- border: 1px dotted #0091ff;
- color: #0091ff;
- &:hover {
- background: #fff;
- color: #0091ff;
- border: 1px dotted #0091ff;
- }
- }
- .typeButton {
- min-width: 122px;
- height: 32px;
- text-align: center;
- line-height: 32px;
- border-radius: 4px;
- padding: 0;
- border: 1px solid #c3c6cb;
- }
- .tagContainer {
- width: 100%;
- border-radius: 4px;
- border: 1px solid #c3c6cb;
- padding: 7px 12px;
- line-height: 1;
- .el-tag {
- background: #eff0f1;
- border-radius: 2px;
- color: #1f2429ff;
- margin: 0 8px 8px 0;
- padding: 5px 6px 5px 8px;
- font-size: 14px;
- height: 24px;
- line-height: 1;
- border: none;
- &:hover {
- border: none;
- }
- .el-icon-close {
- color: #9ca2a9ff;
- right: 0;
- &:hover {
- color: #fff;
- background-color: #ccc;
- }
- }
- }
- }
- }
- </style>
|