1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- <template>
- <div>
- <el-form ref="form" :rules='rules' :model="form">
- <el-form-item prop="dict" class="cascader-container">
- <el-cascader :options='options' v-model='form.dict' :props='props' filterable @change="changeSelect" ref="dictCas">
- </el-cascader>
- <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: 'InfoPointCode',
- label: 'InfoPointName',
- 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 = list;
- this.changeSelect(this.form.dict);
- },
- changeSelect(val) {
- setTimeout(() => {
- if (this.$refs.dictCas.getCheckedNodes()[0]) {
- let labels = this.$refs.dictCas.getCheckedNodes()[0].pathLabels;
- let data = this.$refs.dictCas.getCheckedNodes()[0].data;
- 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)
- }
- })
- },
- }
- }
- </script>
- <style lang="less" scoped>
- .cascader-container {
- margin-bottom: 0;
- /deep/ .el-cascader {
- width: 89%;
- display: block;
- float: left;
- .el-input .el-input__inner {
- border-radius: 4px 0 0 4px;
- vertical-align: bottom;
- }
- }
- .update-button {
- display: block;
- float: left;
- border-left: 0;
- border-radius: 0 4px 4px 0;
- }
- }
- </style>
|