| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118 |
- <template>
- <div>
- <el-form ref="form" :rules='rules' :model="form">
- <el-form-item prop="dict" class="cascader-container">
- <el-cascader-multi :data='options' v-model='form.dict' :value-key='props.value' :label-key='props.label' :children-key='props.children'
- filterable :popper-class="'select'" @change="changeSelect" ref="dictCas" :only-last="true" :no-data-text='"无数据"'>
- </el-cascader-multi>
- <el-tooltip class="item" effect="dark" :content="`于${cacheTime}缓存,点击重新缓存`" placement="top">
- <el-button icon="el-icon-refresh" class="update-button" @click="getDictionary"></el-button>
- </el-tooltip>
- </el-form-item>
- </el-form>
- </div>
- </template>
- <script>
- import { mapGetters, mapMutations, mapActions } from "vuex";
- import tools from "@/utils/scan/tools";
- export default {
- data() {
- return {
- options: [],
- form: {
- dict: [],
- },
- props: {
- value: 'code',
- label: 'name',
- children: 'content'
- },
- rules: {
- dict: [{ required: true, message: '请选择对应数据字典', trigger: 'blur' }]
- },
- }
- },
- computed: {
- ...mapGetters("project", ["dictionary", "cacheTime"]),
- },
- created() {
- if (!this.dictionary.length) {
- this.getDictionary().then(res => {
- this.getDictSuc(res.content)
- })
- } else {
- this.getDictSuc(this.dictionary);
- }
- },
- methods: {
- ...mapActions('project', ['getDictionary']),
- //获取物理世界所有设备类型
- getDictSuc(list) {
- this.options = this.transformList(list);
- this.changeSelect(this.form.dict);
- },
- changeSelect(val) {
- setTimeout(() => {
- if (this.$refs.dictCas) {
- let labels = this.$refs.dictCas.selectedLabels;
- let data = {};
- this.$refs.dictCas.selectedNodes.forEach(t => {
- let key = t.code;
- data[key] = t;
- });
- this.$emit('change', { val: val, labels: labels, data: data })
- }
- }, 500)
- },
- //设置值
- setCascaderVal(value) {
- this.form.dict = tools.deepCopy(value)
- },
- //校验是否选择
- validate(cb) {
- this.$refs.form.validate(valid => {
- if (valid) {
- cb(true)
- } else {
- cb(false)
- }
- })
- },
- transformList(list) {
- let arr = [];
- arr = list.map(t => {
- if (t.content) {
- if (!t.content.length) {
- t.content = [{ name: '暂无可对应信息点', disabled: true }]
- } else {
- t.content = this.transformList(t.content);
- }
- }
- return t;
- })
- return arr;
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .cascader-container.el-form-item--small.el-form-item {
- margin-bottom: 0;
- .el-form-item__content div:nth-child(1) {
- width: 89% !important;
- display: block;
- float: left;
- /deep/ .el-input .el-input__inner {
- border-radius: 4px 0 0 4px;
- vertical-align: bottom;
- }
- }
- .update-button {
- display: block;
- height: 32px;
- float: left;
- border-left: 0;
- border-radius: 0 4px 4px 0;
- }
- }
- </style>
|