|
@@ -1,339 +1,387 @@
|
|
|
<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="20" @blur="nameBlur"></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>
|
|
|
+ <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="20"
|
|
|
+ @blur="nameBlur"
|
|
|
+ ></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";
|
|
|
+import { mapState } from "vuex";
|
|
|
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: 20, message: "最长为20个文字", 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: [],
|
|
|
- };
|
|
|
+ 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: 20, message: "最长为20个文字", 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: {
|
|
|
+ nameBlur() {
|
|
|
+ this.ruleForm.name = this.ruleForm.name.trim();
|
|
|
},
|
|
|
- methods: {
|
|
|
- nameBlur() {
|
|
|
- this.ruleForm.name = this.ruleForm.name.trim()
|
|
|
- },
|
|
|
- // 显示创建平面图弹窗
|
|
|
- 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,
|
|
|
- };
|
|
|
+ // 显示创建平面图弹窗
|
|
|
+ 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.info(res.message);
|
|
|
- }
|
|
|
- },
|
|
|
- // 关闭创建弹窗回调(重置创建信息)
|
|
|
- closeModal() {
|
|
|
- this.resetForm("ruleForm");
|
|
|
- },
|
|
|
+ // 判断是否添加标签字段
|
|
|
+ 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;
|
|
|
+ let routeUrl = this.$router.resolve({
|
|
|
+ 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,
|
|
|
+ projectId: this.projectId,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ window.open(routeUrl.href, "_blank");
|
|
|
+ } else {
|
|
|
+ this.$message.info(res.message);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 关闭创建弹窗回调(重置创建信息)
|
|
|
+ closeModal() {
|
|
|
+ this.resetForm("ruleForm");
|
|
|
},
|
|
|
- watch: {
|
|
|
- outerVisible(n) {
|
|
|
- if (n) this.getData();
|
|
|
- },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(["projectId"]),
|
|
|
+ },
|
|
|
+ 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__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;
|
|
|
}
|
|
|
- /deep/ .el-dialog__body {
|
|
|
- padding: 16px 120px;
|
|
|
- max-height: 500px;
|
|
|
- overflow: auto;
|
|
|
+ }
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
+ & + .el-form-item {
|
|
|
+ margin-top: 18px;
|
|
|
}
|
|
|
- .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;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
}
|
|
|
- .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;
|
|
|
+ }
|
|
|
+ .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 {
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
+ color: #fff;
|
|
|
+ background-color: #ccc;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|