@hong-yu/lb-depanduserchoose

vuecomponent

vue component

用法示例

人员部门选择器组件

// main.js 引入组件
import yuVuecomponent from 'lb-vue-component'
Vue.use(yuVuecomponent);

// 页面使用
<template>
  <div id="app">
    <h1>组件使用示例</h1>

    <button type="button" @click="open">选择器</button>
    <department-and-user-choose
      v-if="visible"
      v-model="visible"
      title="选择人和部门"
      selectType="all"
      :pickedDepartments="pickedDepartments"
      :pickedUsers="pickedUsers"
      :requiredUsers="requiredUsers"
      :requiredDepartments="requiredDepartments"
      :disabledDepartments="disabledDepartments"
      :disabledUsers="disabledUsers"
      chooseDepartUrl="http://localhost:8989/server/chooseDepart"
      checkDepartAndUserUrl="http://localhost:8989/server/checkDepartAndUser"
      @dataChange="dataChange"
    />
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      visible: false,
      rootElement: {
        departId: 'a',
        departName: '一级部门',
        number: 500,
        subDepart: true,
      },
      pickedDepartments: ['a-4', 'a-1-1'],
      pickedUsers: ['a-456', 'a-1-123'],
      requiredUsers: ['a-456'],
      requiredDepartments: ['a-4'],
      disabledDepartments: ['a-1-2'],
      disabledUsers: ['a-1-123'],
    }
  },
  methods: {
    open() {
      this.visible = true
    },
    dataChange(data) {
      console.log('选中的数据', data)
    },
  },
}
</script>

<style lang="scss">

</style>