first commit

target/classes/static/components/plugins/sysDict/DictData.js

@@ -0,0 +1,48 @@
+class SysDictData {
+    constructor(dict) {
+        this.dict = dict
+    }
+
+    async init(dictNames) {
+        const ps = []
+        dictNames.forEach((name) => {
+            Vue.set(this.dict.type, name, null)
+            ps.push(
+                $.get("/open/common/dictOptions", { code: name }).then((res) => {
+                    const dictValue = res.data.map((v) => {
+                        return {
+                            name: v.name,
+                            text: v.name,
+                            label: v.name,
+                            code: v.code,
+                            raw: v
+                        }
+                    })
+                    this.dict.type[name] = Object.freeze(dictValue)
+                })
+            )
+        })
+        await Promise.all(ps)
+    }
+}
+
+window.dictData = {}
+window.dictData.install = function (Vue) {
+    Vue.mixin({
+        data() {
+            if (this.$options.dicts instanceof Array && this.$options.dicts.length > 0) {
+                return { dict: { type: {} } }
+            } else {
+                return {}
+            }
+        },
+        created() {
+            if (this.$options.dicts instanceof Array && this.$options.dicts.length > 0) {
+                new SysDictData(this.dict).init(this.$options.dicts).then()
+            }
+        }
+    })
+}
+if (window.Vue) {
+    Vue.use(window.dictData)
+}

target/classes/static/components/plugins/sysDict/DictSelect.vue

@@ -0,0 +1,113 @@
+<template>
+    <el-select
+        v-model="valueAsString"
+        :placeholder="placeholder"
+        @change="onChange"
+        :disabled="disabled"
+        :clearable="clearable"
+        :multiple="multiple"
+        :filterable="filterable"
+        :size="size"
+        style="width: 100%"
+        v-bind="$attrs"
+    >
+        <el-option
+            v-for="item in options"
+            v-if="!item.disabled"
+            :key="item[option_value]"
+            :label="item[option_label]"
+            :value="item[option_value]"
+        ></el-option>
+    </el-select>
+</template>
+
+<script>
+module.exports = {
+    props: {
+        value: { type: [String, Array] },
+        code: {
+            type: [String, Array],
+            default: ""
+        },
+        option_value: {
+            type: String,
+            default: "code"
+        },
+        option_label: {
+            type: String,
+            default: "name"
+        },
+        size: {
+            type: String,
+            default: ""
+        },
+        placeholder: {
+            type: String,
+            default: "请选择"
+        },
+        clearable: {
+            type: Boolean,
+            default: true
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        },
+        filterable: {
+            type: Boolean,
+            default: true
+        }
+    },
+    model: {
+        prop: "value",
+        event: "change"
+    },
+    data() {
+        return {
+            options: []
+        }
+    },
+
+    computed: {
+        valueAsString: {
+            get() {
+                if (Array.isArray(this.value)) {
+                    return this.value
+                } else {
+                    return this.value ? this.value.toString() : ""
+                }
+            },
+            set(val) {}
+        }
+    },
+
+    watch: {
+        code(val) {
+            this.flushOptions()
+        }
+    },
+    methods: {
+        onChange(val) {
+            this.$emit("change", val)
+        },
+        async flushOptions() {
+            if (!this.code) {
+                this.options = []
+                return
+            }
+            $.get("/open/common/dictOptions", { code: this.code }).then((res) => {
+                this.options = res.data
+            })
+        }
+    },
+    created() {
+        this.flushOptions()
+    }
+}
+</script>
+
+<style></style>

target/classes/static/components/plugins/sysDict/DictTag.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <template v-for="(item, index) in options">
+            <template v-if="values.includes(item[option_value])">
+                <span :key="item.value">{{ item[option_label] }}</span>
+            </template>
+        </template>
+    </div>
+</template>
+
+<script>
+module.exports = {
+    name: "DictTag",
+    props: {
+        options: {
+            type: Array,
+            default: null
+        },
+        option_value: {
+            type: String,
+            default: "code"
+        },
+        option_label: {
+            type: String,
+            default: "name"
+        },
+        value: [Number, String, Array]
+    },
+    computed: {
+        values() {
+            if (this.value !== null && typeof this.value !== "undefined") {
+                return Array.isArray(this.value) ? this.value : [String(this.value)]
+            } else {
+                return []
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+.el-tag + .el-tag {
+    margin-left: 10px;
+}
+</style>