From d43ae50abc9461a9b20b3f015ba3679ba699dfa2 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: 星期二, 06 六月 2023 22:52:24 +0800
Subject: [PATCH] update 修改组件 去除无用引用和代码缩进

---
 src/components/RightToolbar/index.vue |   77 ++++++++++++++++----------------------
 1 files changed, 33 insertions(+), 44 deletions(-)

diff --git a/src/components/RightToolbar/index.vue b/src/components/RightToolbar/index.vue
index becb12c..09036b7 100644
--- a/src/components/RightToolbar/index.vue
+++ b/src/components/RightToolbar/index.vue
@@ -12,84 +12,73 @@
       </el-tooltip>
     </el-row>
     <el-dialog :title="title" v-model="open" append-to-body>
-      <el-transfer
-        :titles="['鏄剧ず', '闅愯棌']"
-        v-model="value"
-        :data="columns"
-        @change="dataChange"
-      ></el-transfer>
+      <el-transfer :titles="['鏄剧ず', '闅愯棌']" v-model="value" :data="columns" @change="dataChange"></el-transfer>
     </el-dialog>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+
 const props = defineProps({
-  showSearch: {
-    type: Boolean,
-    default: true,
-  },
-  columns: {
-    type: Array,
-  },
-  search: {
-    type: Boolean,
-    default: true,
-  },
-  gutter: {
-    type: Number,
-    default: 10,
-  },
+    showSearch: propTypes.bool.def(true),
+    columns: {
+        type: Array as PropType<FieldOption[]>,
+    },
+    search: propTypes.bool.def(true),
+    gutter: propTypes.number.def(10),
 })
 
 const emits = defineEmits(['update:showSearch', 'queryTable']);
 
 // 鏄鹃殣鏁版嵁
-const value = ref([]);
+const value = ref<Array<number>>([]);
 // 寮瑰嚭灞傛爣棰�
 const title = ref("鏄剧ず/闅愯棌");
 // 鏄惁鏄剧ず寮瑰嚭灞�
 const open = ref(false);
 
 const style = computed(() => {
-  const ret = {};
-  if (props.gutter) {
-    ret.marginRight = `${props.gutter / 2}px`;
-  }
-  return ret;
+    const ret: any = {};
+    if (props.gutter) {
+        ret.marginRight = `${props.gutter / 2}px`;
+    }
+    return ret;
 });
 
 // 鎼滅储
 function toggleSearch() {
-  emits("update:showSearch", !props.showSearch);
+    emits("update:showSearch", !props.showSearch);
 }
 
 // 鍒锋柊
 function refresh() {
-  emits("queryTable");
+    emits("queryTable");
 }
 
 // 鍙充晶鍒楄〃鍏冪礌鍙樺寲
-function dataChange(data) {
-  for (let item in props.columns) {
-    const key = props.columns[item].key;
-    props.columns[item].visible = !data.includes(key);
-  }
+function dataChange(data: TransferKey[]) {
+    props.columns?.forEach((item) => {
+        item.visible = !data.includes(item.key);
+    })
 }
 
 // 鎵撳紑鏄鹃殣鍒梔ialog
-function showColumn() {
-  open.value = true;
+const showColumn = () => {
+    open.value = true;
 }
 
 // 鏄鹃殣鍒楀垵濮嬮粯璁ら殣钘忓垪
-for (let item in props.columns) {
-  if (props.columns[item].visible === false) {
-    value.value.push(parseInt(item));
-  }
-}
+onMounted(() => {
+    props.columns?.forEach((item) => {
+        if (!item.visible) {
+            value.value.push(item.key);
+        }
+    })
+})
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 :deep(.el-transfer__button) {
   border-radius: 50%;
   display: block;
@@ -102,4 +91,4 @@
 .my-el-transfer {
   text-align: center;
 }
-</style>
\ No newline at end of file
+</style>

--
Gitblit v1.9.3