simulation-front/src/views/sceneLibrary/components/benchmarkEdit.vue

<template>
    <el-dialog title="基准场景筛选编辑" :visible.sync="dialogVisible" width="700" @close="dialogClose">
        <h3>标签类型</h3>
        <el-radio-group v-model="radio" style="display: flex; flex-wrap: wrap; justify-content: flex-start;"
            @input="radioChange">
            <el-radio style="margin: 5px 5px" label="sceneLibrodeType" border>道路类型</el-radio>
            <el-radio style="margin: 5px 5px;" label="egoAction" border>主车行动</el-radio>
            <el-radio style="margin: 5px 5px;" label="targetAction" border>它车行动</el-radio>
            <el-radio style="margin: 5px 5px;" label="sceneLibWeather" border>天气</el-radio>
            <el-radio style="margin: 5px 5px;" label="roadPlaneGeometry" border>道路平面几何</el-radio>
            <el-radio style="margin: 5px 5px;" label="roadProfileGeometry" border>道路几何-纵断面</el-radio>
            <el-radio style="margin: 5px 5px;" label="rodeSection" border>运行区域</el-radio>
            <el-radio style="margin: 5px 5px;" label="supportedAdas" border>智能驾驶</el-radio>
            <el-radio style="margin: 5px 5px;" label="complexityLevel" border>复杂度等级</el-radio>
            <el-radio style="margin: 5px 5px;" label="riskLevel" border>危险度等级</el-radio>
        </el-radio-group>
        <h3>下拉内容编辑</h3>
        <div style="display: flex; margin-bottom: 30px;">
            <el-tag :key="tag.id" v-for="tag in dynamicTags" closable :disable-transitions="false"
                @close="handleClose(tag.id)">
                {{ tag.dictName }}
            </el-tag>
            <el-input placeholder="请输入新增内容" style="width: 150px; margin-left: 20px;" 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="dialogVisible = false">确 定</el-button>
        </span> -->
    </el-dialog>
</template>

<script>
const dictionaryMap = {
    sceneLibrodeType: '道路类型',
    egoAction: '主车动作',
    targetAction: '它车动作',
    sceneLibWeather: '天气',
    roadPlaneGeometry: '道路平面几何',
    roadProfileGeometry: '道路几何-纵断面',
    rodeSection: '运行区域',
    supportedAdas: '智能驾驶',
    complexityLevel: '复杂度等级',
    riskLevel: '危险度等级',
}

export default {
    name: "benchmarkEdit", // 基准场景筛选项编辑
    components: {},
    data() {
        return {
            radio: 'sceneLibrodeType',
            dialogVisible: true,
            dictionaryList: {}, // 字典对象
            dynamicTags: [{ label: 'xxx', value: '123' }],
            inputVisible: false,
            inputValue: '',
        }

    },
    props: {
        // content: {
        //     type: String,
        //     default: "",
        // },
        // isEdit: {
        //     type: Boolean,
        //     default: true,
        // },
    },

    methods: {
        init(defaultType = 'sceneLibrodeType') {
            this.$axios({
                method: 'post',
                url: this.$api.common.getDictListsByTypes,
                data: { dictTypes: "egoAction,targetAction,sceneLibWeather,sceneLibrodeType,roadPlaneGeometry,roadProfileGeometry,supportedAdas,rodeSection,complexityLevel,riskLevel" },
            }).then((res) => {
                if (res.code == 200) {
                    this.dictionaryList = res.info
                    // 默认加载道路类型数据 
                    this.dynamicTags = res.info[defaultType] || []
                } else {
                    this.$message.error(res.message || '查询失败')
                }
            })
        },
        radioChange(type) {
            this.dynamicTags = this.dictionaryList[type] || []
        },
        handleClose(tag) {
            console.log(tag)
            // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            this.$axios({
                    method: 'post',
                    url: this.$api.sceneLibrary.benchmarkSearchDelete,
                    data: {
                        id: tag,
                        dictType: this.radio
                    },
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success('数据删除成功')
                        this.init(this.radio)
                    } else {
                        this.$message.error(res.message || '删除失败')
                    }
                })
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick(() => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm() {
            console.log(this.radio, dictionaryMap[this.radio])
            let inputValue = this.inputValue;
            if (inputValue) {
                this.$axios({
                    method: 'post',
                    url: this.$api.sceneLibrary.benchmarkSearchCreate,
                    data: {
                        dictType: this.radio,
                        dictName: this.inputValue,
                        dictCode: this.inputValue,
                        dictComment: dictionaryMap[this.radio]
                    },
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success('数据新增成功')
                        this.init(this.radio)
                    } else {
                        this.$message.error(res.message || '新增失败')
                    }
                    this.inputVisible = false;
                    this.inputValue = '';
                })
            }
        },
        dialogClose(){
            console.log('关闭')
            this.$emit('closeHandle');
        }
    },
    mounted() {
        this.init()
    },
    beforeDestroy() {

    },
};
</script>

<style lang='less' scoped>
.el-tag+.el-tag {
    margin-left: 10px;
}

.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    border: 2px solid red;
    width: 50px;
    margin-left: 10px;
    vertical-align: bottom;
}

h3 {
    font-size: 18px;
    margin: 20px 0 10px;
}
</style>