duty-management-web/src/components/cus/cus-form-link/portOfRegistry.vue

<template>
  <div v-loading="loading" :element-loading-background="elementLoadingBackground" style="width: 100%;">
    <el-select
        style="width: 90px;"
        v-model="paramOneVal"
        :placeholder="`请选择`"
        clearable
        filterable
        @change="handleChange"
        :title="$store.state.dictionary.cbglPersonDictionaryMap.get(paramOneVal)"
    >
      <el-option
          v-for="item in $store.state.dictionary.cbglPersonDictionary"
          :key="item.dictType"
          :label="item.dictName"
          :value="item.dictType"
          :title="item.dictName"
      />
    </el-select>
    <el-select
        style="width: calc(100% - 90px - 2px);margin-left: 2px;"
        v-model="paramTwoVal"
        :placeholder="`请选择${label}`"
        :disabled="!paramOneVal"
        clearable
        filterable
        @change="handleChange"
        :title="$store.state.dictionary.portOfRegistryTwoMap.get(paramTwoVal)"
    >
      <el-option
          v-for="item in $store.state.dictionary.portOfRegistryTwoList.filter(v => v.parent === paramOneVal)"
          :key="item.dictValue"
          :label="item.dictName"
          :value="item.dictValue"
          :title="item.dictName"
      />
    </el-select>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick,
  inject
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'

export default defineComponent({
  name: '',
  components: {},
  props: {
    paramOne: {},
    paramTwo: {},
    label: {},
  },
  setup(props, { emit }) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      paramOneVal: props.paramOne,
      paramTwoVal: props.paramTwo,
      loading: true,
      elementLoadingBackground: inject('element-loading-background', null)
    })
    watch(() => state.paramOneVal, (n) => {
      state.paramTwoVal = null
      emit('emitParam', state.paramOneVal, state.paramTwoVal)
    })
    watch(() => state.paramTwoVal, (n) => {
      emit('emitParam', state.paramOneVal, state.paramTwoVal)
    })
    watch(() => [props.paramOne, props.paramTwo], (n) => {
      state.paramOneVal = n[0]
      state.paramTwoVal = n[1]
    })
    const handleChange = (val: any) => {
    }
    onMounted(() => {
      store.dispatch('dictionary/LOAD_PORT_OF_REGISTRY').then(() => {
        state.loading = false
      })
    })
    return {
      ...toRefs(state),
      handleChange
    }
  },
})
</script>

<style scoped lang="scss">
</style>