做网站开发 用什么,网站程序元,东阳网站建设yw81,上海装修公司投诉翻看之前工程师写的vue2的代码#xff0c;很多都是复制、粘贴#xff0c;也真是搞不懂#xff0c;明明可以写一个控件#xff0c;不就可以重复使用。很多前端总喜欢element搞一下#xff0c;ant-design也搞一下#xff0c;有啥意义#xff0c;控件也不是自己写的#x…翻看之前工程师写的vue2的代码很多都是复制、粘贴也真是搞不懂明明可以写一个控件不就可以重复使用。很多前端总喜欢element搞一下ant-design也搞一下有啥意义控件也不是自己写的积木也没有搭好。 选中之后将值带回去 先看看组件代码
templateel-input v-modelinputLabel clickshowSubtemplate #suffixi classiconfont iconicon2-081/i/template/el-inputBaseDialog refdialog title选择会计科目 width470px :visiblevisible :showClosetrue beforeClosevisiblefalseel-tabs v-modelsubjectName el-tab-pane v-for(item,index) in subjectTabs :keyindex :nameitem.name :labelitem.title :valueindex classtabPaneel-tree :datacategoryTree[index] node-keyid default-expand-all highlight-current :expand-on-click-nodefalse node-clickhandleSubjectClick :propsdefaultSubjecTreePropsstyleheight: 380px;overflow-y: auto;template #default{ node,data }span classcustom-tree-nodei :classdata.children.length0 ? iconfont iconicon2-08 : iconfont iconicon2-11 /i{{ node.label }}/span/template/el-tree/el-tab-pane/el-tabstemplate #footerdiv classdialog-footerel-button typeprimary clickcancelDialog返 回/el-button/div/template/BaseDialog
/template
script langts 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?.accountingStandard1?[{title: 资产, name: 1,},{title: 负债, name: 2,},{title: 权益, name: 3,},{title: 成本, name: 4,},{title: 损益, name: 5,},
]:[{title: 资产, name: 1,},{title: 负债, name: 2,},{title: 共同, name: 3,},{title: 权益, 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控件使用比较简单了
el-form-item label应付账款 propyfzkacc-account-subject v-modelorderForm.yfzk/acc-account-subject/el-form-item但是在保存和加载的时候需要特殊处理,因为控件的值是{value:data.id,label:data.name} 保存之前需要做一次深拷贝,不能直接修改orderForm.value因为双向绑定页面的数据会改变。
const convertParams () {debuggerlet params proxy.$tool.deepClone({...orderForm.value})// 应收账款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);}}})
}页面加载的时候也需要做一下处理还是因为数据结构的缘故
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;// 应收张狂if (orderForm.value[yszkName]){orderForm.value[yszk] {label:orderForm.value[yszkName],value:orderForm.value[yszk]}}}} else{isLoading.value false;proxy.$message.error(res.msg);}
}
