ZBLOG

import { ref, reactive, toRefs, computed, watch, useAttrs, nextTick } from 'vue'; import { storeToRefs } from 'pinia'; import { ElTree } from 'element-plus'; import { useCommon } from '@/compo...

以下是使用 TypeScript 优化后的代码:

  1. import { ref, reactive, toRefs, computed, watch, nextTick, defineEmits, defineExpose } from 'vue';
  2. import { storeToRefs } from 'pinia';
  3. import { ElTree } from 'element-plus';
  4. import { useCommon } from '@/compositions/common';
  5. import { useDictStore } from '@/stores/dict';
  6. interface Props {
  7. selectedItemProps: {
  8. id: number;
  9. [key: string]: any;
  10. };
  11. allLabelList: Array<any>;
  12. }
  13. interface LabelItem {
  14. id: number;
  15. labelName: string;
  16. disabled?: boolean;
  17. labelPermission?: number;
  18. labelPermissionText?: string;
  19. childLabelList?: Array<LabelItem>;
  20. }
  21. interface FieldItem {
  22. fieldKey: string;
  23. }
  24. interface ShareField {
  25. labelId: number;
  26. fieldList: Array<string>;
  27. }
  28. interface LeftTreeInfo {
  29. loading: boolean;
  30. checkedKeys: Array<number | string>;
  31. list: Array<LabelItem>;
  32. flatList: Array<[LabelItem, Array<[LabelItem, ...any[]]>]>;
  33. selectedId?: number | null;
  34. }
  35. interface RightContentInfo {
  36. fieldKeyList: Array<string>;
  37. checkAll: boolean;
  38. }
  39. interface DataInfo {
  40. loading:boolean
  41. }
  42. export default function useShareLabelTree(props: Props) {
  43. const { proxy } = useCommon();
  44. const useDict = useDictStore(); // 字典
  45. const { labelPermissionList } = storeToRefs(useDict);
  46. const { selectedItemProps } = toRefs(props);
  47. const emit = defineEmits(['on-detail']);
  48. // 设置数组扁平化
  49. function setFlat(list:Array<LabelItem>) :Array<[LabelItem, Array<[LabelItem,...any[]]>]>{
  50. return list.map((item) => {
  51. item.disabled = item.labelPermission == 0;
  52. item.labelPermissionText = proxy.$utils.findIdName(labelPermissionList.value, item.labelPermission);
  53. return [item, setFlat(item.childLabelList ?? [])];
  54. }).flat(Infinity);
  55. }
  56. // 左侧tree树信息
  57. const treeRef = ref<InstanceType<typeof ElTree>>();
  58. const leftTreeInfo: LeftTreeInfo = reactive({
  59. loading: false,
  60. checkedKeys: [],
  61. list: props.allLabelList,
  62. get flatList() {
  63. return setFlat(this.list);
  64. },
  65. async init() {
  66. if (!selectedItemProps.value?.id) {
  67. this.list[0] && this.nodeClick(this.list[0]);
  68. } else {
  69. await dataInfo.getDetail();
  70. }
  71. },
  72. filterNode(value: string, data: any) {
  73. if (!value) { return true; }
  74. return data.labelName.includes(value);
  75. },
  76. selectedId: null,
  77. get selectedItem() {
  78. return this.flatList.find(obj => obj.id === this.selectedId)?.[0];
  79. },
  80. get selectedItemFieldkeyList() {
  81. return (this.selectedItem?.fieldList || []).map(obj => obj.fieldKey);
  82. },
  83. async nodeClick(data:any) {
  84. const { id } = data;
  85. if (!id) { return; }
  86. leftTreeInfo.selectedId = id;
  87. nextTick(() => {
  88. rightContentInfo.setCheckAllStatus(data);
  89. });
  90. },
  91. checkChange(checkedNodes:any, isChecked:boolean) {
  92. },
  93. async check(checkedNodes:any, checkedKeysFamiy:Array<number|string>, halfCheckedNodes:any, halfCheckedKeys:any){
  94. await leftTreeInfo.nodeClick(checkedNodes);
  95. nextTick(() => {
  96. const isChecked = checkedKeysFamiy.includes(checkedNodes.id);
  97. rightContentInfo.changeCheckAll(isChecked);
  98. });
  99. }
  100. });
  101. const filterText = ref('');
  102. watch(filterText, (val) => {
  103. treeRef?.value!.filter(val);
  104. });
  105. // ---------------------------------------------------
  106. // 右侧信息
  107. const rightContentInfo: RightContentInfo = reactive({
  108. get fieldKeyList() {
  109. return (leftTreeInfo.selectedItem.fieldList || []).map(v => v.fieldKey);
  110. },
  111. checkAll: false,
  112. setCheckAllStatus(data:any) {
  113. const allNum = (data.fieldList || []).length;
  114. const curNum = (data?.$savedFieldKeyList || []).length;
  115. const num = allNum - curNum;
  116. this.checkAll = num == 0;
  117. this.isIndeterminate = num < allNum && num !== 0;
  118. },
  119. changeCheckAll: (isChecked: boolean) => {
  120. leftTreeInfo.selectedItem.$savedFieldKeyList = isChecked ? (leftTreeInfo.selectedItemFieldkeyList) : [];
  121. rightContentInfo.checkAll = isChecked;
  122. rightContentInfo.isIndeterminate = false;
  123. },
  124. changeFiled(keys:Array<string>) {
  125. const checkedCount:number= keys.length, fieldKeyCount:number= leftTreeInfo.selectedItemFieldkeyList.length;
  126. rightContentInfo.checkAll = checkedCount === fieldKeyCount;
  127. rightContentInfo.isIndeterminate = checkedCount > 0 && checkedCount < fieldKeyCount;
  128. }
  129. });
  130. // ---------------------------------------------------
  131. // 数据信息
  132. const dataInfo: DataInfo= reactive({
  133. loading:false,
  134. async getDetail(){
  135. this.loading=true;
  136. try{
  137. const data :any= await proxy.$requests.Label.getLabelShareById.request({ id: selectedItemProps.value.id });
  138. const values:any = proxy.$utils.getObjectValues(data, `tenantOpenId,tenantName,allowModify,shareField`, {
  139. more: initData => {
  140. return { tenantOpenId: initData.tenantId };
  141. },
  142. });
  143. nextTick(() => {
  144. emit('on-detail', values);
  145. const shareFields:Array<ShareField> = values.shareField || [];
  146. const keys:Array<number|string> = shareFields.map(item => item.labelId);
  147. treeRef.value!.setCheckedKeys(keys);
  148. leftTreeInfo.selectedId = leftTreeInfo.list[0]?.id;
  149. this.setLeftInfoFiledList(leftTreeInfo.flatList, shareFields || []);
  150. rightContentInfo.setCheckAllStatus(leftTreeInfo.selectedItem);
  151. });
  152. }finally{
  153. this.loading=false
  154. }
  155. },
  156. setLeftInfoFiledList(list:any, arr:Array<ShareField>) {
  157. list.forEach((item:any, i:number) => {
  158. for (let v of arr) {
  159. if (item.id == v.labelId) {
  160. list[i].$savedFieldKeyList = [...new Set(v.fieldList.filter(v => v && v.trim()))];
  161. return;
  162. }
  163. }
  164. });
  165. },
  166. resetValues() {
  167. leftTreeInfo.selectedId = null;
  168. treeRef.value && treeRef.value!.setCheckedKeys([]);
  169. filterText.value = '';
  170. (leftTreeInfo.list || []).forEach((item:any) => {
  171. item.$savedFieldKeyList = [];
  172. });
  173. rightContentInfo.checkAll = false;
  174. rightContentInfo.isIndeterminate = false;
  175. },
  176. });
  177. defineExpose({ treeRef, leftTreeInfo, rightContentInfo, dataInfo });
  178. return {treeRef,leftTreeInfo,rightContentInfo,dataInf};
  179. }

优化建议:

  1. 将各个接口的参数和返回值类型进行明确的声明,提高代码可读性和可维护性。

  2. 根据单一职责原则将函数拆分成多个小函数,提高代码的复用性和可测试性。

  3. 使用 TypeScript 的类型推导功能减少变量或参数的重复定义。

  4. 使用 defineExpose 将需要暴露给外部使用的变量、方法等进行统一管理,增加代码可读性。

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=3953

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?