翻看之前工程師寫的vue2的代碼，很多都是復(fù)制、粘貼，也真是搞不懂，明明可以寫一個(gè)控件，不就可以重復(fù)使用。很多前端總喜歡element搞一下，ant-design也搞一下，有啥意義，控件也不是自己寫的，積木也沒有搭好。

選中之后將值帶回去

先看看組件代碼

<template><el-input v-model="inputLabel" @click="showSub"><template #suffix><i class="iconfont iconicon2-081"></i></template></el-input><BaseDialog ref="dialog" title="選擇會(huì)計(jì)科目" width="470px" :visible='visible' :showClose="true" @beforeClose="visible=false"><el-tabs v-model="subjectName" ><el-tab-pane v-for="(item,index) in subjectTabs" :key="index" :name='item.name' :label="item.title" :value="index" class="tabPane"><el-tree :data="categoryTree[index]" node-key="id" default-expand-all highlight-current :expand-on-click-node='false' @node-click="handleSubjectClick" :props="defaultSubjecTreeProps"style="height: 380px;overflow-y: auto;"><template #default="{ node,data }"><span class="custom-tree-node"><i :class="data.children.length>0 ? 'iconfont iconicon2-08' : 'iconfont iconicon2-11' "></i>{{ node.label }}</span></template></el-tree></el-tab-pane></el-tabs><template #footer><div  class="dialog-footer"><el-button type="primary" @click="cancelDialog">返 回</el-button></div></template></BaseDialog>
</template>
<script lang="ts" setup>
import {ref,getCurrentInstance,computed,onMounted,watch } from 'vue'
import BaseDialog from '@/components/base/BaseDialog.vue';
import { useAppStore } from '@/store'
import { de } from 'element-plus/es/locale';
const { proxy }: any = getCurrentInstance();
const appStore = useAppStore()
const userInfo = computed(() => appStore.userInfo)
const curAccountSet = computed(() => appStore.curAccountSet)
const defaultSubjecTreeProps = ref({children: 'children',label: 'label'})
const inputProps = ref({label:'name',value:'id'})
const inputLabel = ref('')
const emits = defineEmits(['update:modelValue','change'])
const visible = ref(false)
const props = defineProps<{modelValue:{},
}>()
const showSub = () =>{visible.value = true;
}
const subjectName = ref(1)
const subjectTabs = ref(curAccountSet.value?.accountingStandard=='1'?[{title: "資產(chǎn)", name: 1,},{title: "負(fù)債", name: 2,},{title: "權(quán)益", name: 3,},{title: "成本", name: 4,},{title: "損益", name: 5,},
]:[{title: "資產(chǎn)", name: 1,},{title: "負(fù)債", name: 2,},{title: "共同", name: 3,},{title: "權(quán)益", name: 4,},{title: "成本", name: 5,},{title: "損益", name: 6,},
])
const categoryTree = ref([])
const getCategoryTree = async (cate) =>{const res = await proxy.$api.acc.accountsubject.list({asId:curAccountSet.value.accId,category:cate});if (res.success){categoryTree.value[cate - 1] = res.data;} else{proxy.$message.error(res.msg);}
}
const handleSubjectClick = (data) => {if (proxy.$_.isEmpty(data.children)){inputLabel.value = data.nameemits('update:modelValue',{value:data.id,label:data.name})visible.value = false}
}
const cancelDialog = () =>{visible.value = false;
}
watch(()=>props.modelValue,(newVal,oldVal)=>{if (!proxy.$_.isEmpty(newVal)){inputLabel.value = newVal['label']}
},{immediate:true,deep:true})
onMounted(()=>{getCategoryTree(1);getCategoryTree(2);getCategoryTree(3);getCategoryTree(4);getCategoryTree(5);
})
</script>

控件使用比較簡(jiǎn)單了

<el-form-item label="應(yīng)付賬款" prop="yfzk"><acc-account-subject v-model="orderForm.yfzk"></acc-account-subject></el-form-item>

但是在保存和加載的時(shí)候需要特殊處理,因?yàn)榭丶闹凳?code>{value:data.id,label:data.name}
保存之前，需要做一次深拷貝,不能直接修改orderForm.value，因?yàn)殡p向綁定，頁(yè)面的數(shù)據(jù)會(huì)改變。

const convertParams = () =>{debuggerlet params = proxy.$tool.deepClone({...orderForm.value})// 應(yīng)收賬款params['yszk'] = orderForm.value['yszk']?.value || ''params['yszkName'] = orderForm.value['yszk']?.label || ''return params;
}
const save = async () => {orderRef.value?.validate(async valid=>{if (valid){isLoading.value = trueconst params = convertParams()const res = await proxy.$api.setting.psiAccConfig.save(params)if (res.success){isLoading.value = false;proxy.$message.success(res.msg);} else{isLoading.value = false;proxy.$message.error(res.msg);}}})
}

頁(yè)面加載的時(shí)候也需要做一下處理，還是因?yàn)閿?shù)據(jù)結(jié)構(gòu)的緣故

const load = async () => {const res = await proxy.$api.setting.psiAccConfig.load({asId:userInfo.value.currentAsId})if (res.success){isLoading.value = false;orderForm.value = res.data;// 應(yīng)收張狂if (orderForm.value['yszkName']){orderForm.value['yszk'] = {label:orderForm.value['yszkName'],value:orderForm.value['yszk']}}}} else{isLoading.value = false;proxy.$message.error(res.msg);}
}