123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165 |
- <template>
- <el-dialog title="修改标签" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false" custom-class="tagDialog">
- <div>
- <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>
- <span slot="footer" class="dialog-footer">
- <el-button @click="dialogVisible = false">取 消</el-button>
- <el-button type="primary" @click="confirm">确 定</el-button>
- </span>
- </el-dialog>
- </template>
- <script>
- import { pubPlanerUpdate, planerUpdate } from "@/api/labsl";
- export default {
- props: {
- isPub: {
- type: Number,
- default: 0,
- },
- },
- data() {
- return {
- dialogVisible: false,
- dynamicTags: [],
- inputVisible: false,
- inputValue: "",
- data: {},
- };
- },
- methods: {
- showDialog(data) {
- this.dialogVisible = true;
- this.dynamicTags = JSON.parse(JSON.stringify(data.label || []));
- this.data = data;
- },
- handleClose(tag) {
- this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
- },
- 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 = "";
- },
- // 确认修改
- async confirm() {
- const pa = {
- content: [
- {
- id: this.data.id,
- graphId: this.data.graphId,
- label: this.dynamicTags,
- },
- ],
- projection: ["label"],
- };
- // 已发布
- if (this.isPub) {
- const res = await pubPlanerUpdate(pa);
- this.updateCall(res);
- } else { //未发布
- const res = await planerUpdate(pa);
- this.updateCall(res);
- }
- },
- // 更新成功回调
- updateCall(res) {
- if (res.result == "success") {
- this.dialogVisible = false;
- this.$emit("updateSuc");
- this.$message.success("更新成功");
- } else {
- this.$message(res.message);
- }
- },
- },
- };
- </script>
- <style lang="less" scoped>
- /deep/ .tagDialog {
- /deep/ .el-dialog__header {
- border-bottom: 1px solid #f0f1f2ff;
- }
- /deep/ .el-dialog__body {
- max-height: 192px;
- overflow: auto;
- padding: 20px;
- }
- .el-dialog__footer {
- padding: 14px 20px 20px;
- .el-button {
- padding: 0;
- width: 80px;
- height: 32px;
- text-align: center;
- line-height: 1;
- }
- }
- .el-tag {
- background: #eff0f1;
- border-radius: 2px;
- color: #1f2429ff;
- margin: 0 10px 10px 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;
- }
- }
- }
- .button-new-tag {
- height: 24px;
- line-height: 30px;
- margin-bottom: 8px;
- padding: 0 8px;
- 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: 90px;
- vertical-align: top;
- }
- }
- </style>
|