123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317 |
- <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
- 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"></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"
- :maxlength="10"
- >
- </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";
- 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",
- },
- value: [],
- outerVisible: false,
- dynamicTags: [],
- inputValue: "",
- inputVisible: false,
- folderData: [
- {
- id: 1,
- name: "能源系统",
- updateName: "能源系统",
- checked: false,
- showInput: false,
- },
- {
- id: 2,
- name: "排水系统",
- updateName: "排水系统",
- checked: false,
- showInput: false,
- },
- {
- id: 3,
- name: "消防水系统",
- updateName: "消防水系统",
- checked: false,
- showInput: false,
- },
- {
- id: 4,
- name: "公共照明系统公共照明系统公共照明系统公共照明系统",
- updateName: "公共照明系统公共照明系统公共照明系统公共照明系统",
- checked: false,
- showInput: false,
- },
- {
- id: 5,
- name: "暖通空调系统",
- updateName: "暖通空调系统",
- checked: false,
- showInput: false,
- },
- ],
- };
- },
- created() {
- this.getBuildingFloorData();
- },
- methods: {
- // 显示创建平面图弹窗
- showDialog() {
- this.outerVisible = true;
- },
- // 获取建筑楼层数据
- getBuildingFloorData() {
- const params = {
- pageNumber: 1,
- pageSize: 1000,
- orders: "name asc, createTime desc",
- cascade: [
- {
- name: "floor",
- orders: "floorSequenceId desc",
- },
- ],
- };
- buildingQuery(params).then((res) => {
- this.buildFloorData = res.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;
- },
- // 创建平面图接口
- createPlan() {
- const pa = {
- content: [
- {
- name: this.ruleForm.name,
- label: this.dynamicTags,
- building: this.ruleForm.buildFloor[0],
- floor: this.ruleForm.buildFloor[1]
- },
- ],
- };
- if (this.folderData.find(folder =>{return folder.id === this.ruleForm.folder})) {
- console.log("选中已有文件夹", this.ruleForm.folder);
- } else {
- console.log("新建文件夹", this.ruleForm.folder);
- }
- console.log(pa)
- /**
- * 返回参数中要返给我是否新建文件夹标识
- */
- },
- // 关闭创建弹窗回调(重置创建信息)
- closeModal() {
- this.resetForm("ruleForm");
- },
- },
- };
- </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>
|