|
@@ -0,0 +1,84 @@
|
|
|
+<template>
|
|
|
+ <el-select
|
|
|
+ v-model="selectValue"
|
|
|
+ multiple
|
|
|
+ filterable
|
|
|
+ remote
|
|
|
+ collapse-tags
|
|
|
+ style="width: 100%"
|
|
|
+ reserve-keyword
|
|
|
+ placeholder="请选择"
|
|
|
+ :remote-method="remoteMethod"
|
|
|
+ @change="changeCascader">
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ {{ item.level }} {{ item.label }}
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'CascaderInfo',
|
|
|
+ props: {
|
|
|
+ value: {
|
|
|
+ type: [Array, String],
|
|
|
+ required: false,
|
|
|
+ default: () => []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ selectValue: this.value,
|
|
|
+ options: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ selectEnum() {
|
|
|
+ return this.$store.state.monthlyReportEdit.selectEnum
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.selectValue = this.value
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ if (this.selectValue && this.selectValue.length) {
|
|
|
+ this.options = []
|
|
|
+ this.selectValue.forEach(elm => {
|
|
|
+ this.find(elm, 'value')
|
|
|
+ })
|
|
|
+ this.$forceUpdate()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ find(id, key = 'value') {
|
|
|
+ const run = (arr) => {
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
+ const elm = arr[i]
|
|
|
+ if (key === 'value' && `${elm[key]}` === `${id}`) {
|
|
|
+ this.$set(this.options, this.options.length, elm)
|
|
|
+ }
|
|
|
+ if (key === 'label' && `${elm[key]}`.indexOf(`${id}`) > -1) {
|
|
|
+ this.$set(this.options, this.options.length, elm)
|
|
|
+ }
|
|
|
+ if (elm.children) {
|
|
|
+ run(elm.children)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ run(this.selectEnum)
|
|
|
+ },
|
|
|
+ async remoteMethod(query) { // 获取部门option
|
|
|
+ if (query !== '') {
|
|
|
+ this.find(query, 'label')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeCascader(value) {
|
|
|
+ this.$emit('input', value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less"></style>
|