123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209 |
- <template>
- <a-tree-select
- allowClear
- labelInValue
- style="width: 100%"
- :disabled="disabled"
- :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
- :placeholder="placeholder"
- :loadData="asyncLoadTreeData"
- :value="treeValue"
- :treeData="treeData"
- @change="onChange"
- @search="onSearch">
- </a-tree-select>
- </template>
- <script>
- /*
- * 异步树加载组件 通过传入表名 显示字段 存储字段 加载一个树控件
- * <j-tree-select dict="aa_tree_test,aad,id" pid-field="pid" ></j-tree-select>
- * */
- import {getAction} from '@/api/manage'
- export default {
- name: 'JTreeSelect',
- props: {
- value: {
- type: String,
- required: false
- },
- placeholder: {
- type: String,
- default: '请选择',
- required: false
- },
- dict: {
- type: String,
- default: '',
- required: false
- },
- pidField: {
- type: String,
- default: 'pid',
- required: false
- },
- pidValue: {
- type: String,
- default: '0',
- required: false
- },
- disabled: {
- type: Boolean,
- default: false,
- required: false
- },
- hasChildField: {
- type: String,
- default: '',
- required: false
- }
- },
- data() {
- return {
- treeValue: "",
- treeData: [],
- url: "/sys/dict/loadTreeData",
- view: '/sys/dict/loadDictItem/',
- tableName: "",
- text: "",
- code: "",
- }
- },
- watch: {
- value() {
- this.loadItemByCode()
- },
- dict() {
- this.initDictInfo()
- this.loadRoot();
- }
- },
- created() {
- this.initDictInfo()
- this.loadRoot()
- this.loadItemByCode()
- },
- methods: {
- loadItemByCode() {
- if (!this.value || this.value == "0") {
- this.treeValue = ""
- } else {
- getAction(`${this.view}${this.dict}`, {key: this.value}).then(res => {
- console.log(res.result)
- if (res.success) {
- this.treeValue = {
- key: this.value,
- value: this.value,
- label: res.result
- }
- }
- })
- }
- },
- initDictInfo() {
- let arr = this.dict.split(",")
- this.tableName = arr[0]
- this.text = arr[1]
- this.code = arr[2]
- },
- asyncLoadTreeData(treeNode) {
- return new Promise((resolve) => {
- if (treeNode.$vnode.children) {
- resolve()
- return
- }
- let pid = treeNode.$vnode.key
- let param = {
- pid: pid,
- tableName: this.tableName,
- text: this.text,
- code: this.code,
- pidField: this.pidField,
- hasChildField: this.hasChildField
- }
- getAction(this.url, param).then(res => {
- if (res.success) {
- for (let i of res.result) {
- i.value = i.key
- if (i.leaf == false) {
- i.isLeaf = false
- } else if (i.leaf == true) {
- i.isLeaf = true
- }
- }
- this.addChildren(pid, res.result, this.treeData)
- this.treeData = [...this.treeData]
- }
- resolve()
- })
- })
- },
- addChildren(pid, children, treeArray) {
- if (treeArray && treeArray.length > 0) {
- for (let item of treeArray) {
- if (item.key == pid) {
- if (!children || children.length == 0) {
- item.isLeaf = true
- } else {
- item.children = children
- }
- break
- } else {
- this.addChildren(pid, children, item.children)
- }
- }
- }
- },
- loadRoot() {
- let param = {
- pid: this.pidValue,
- tableName: this.tableName,
- text: this.text,
- code: this.code,
- pidField: this.pidField,
- hasChildField: this.hasChildField
- }
- getAction(this.url, param).then(res => {
- if (res.success && res.result) {
- console.log(res.result)
- for (let i of res.result) {
- i.value = i.key
- // i.disabled = true
- if (i.leaf == false) {
- i.isLeaf = false
- } else if (i.leaf == true) {
- i.isLeaf = true
- }
- }
- this.treeData = [...res.result]
- } else {
- console.log("数根节点查询结果-else", res)
- }
- })
- },
- onChange(value) {
- if (!value) {
- this.$emit('change', '');
- this.treeValue = ''
- } else {
- this.$emit('change', value.value);
- this.treeValue = value
- }
- },
- onSearch(value) {
- console.log(value)
- },
- getCurrTreeData() {
- return this.treeData
- }
- },
- //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
- model: {
- prop: 'value',
- event: 'change'
- }
- }
- </script>
|