软件列表支持贡献者分布点击弹窗

src/views/Jyh/Search/Components/OssQuery.vue

@@ -53,12 +53,16 @@
                 <d-tag type="success">{{ scope.row.programmingLanguage }}</d-tag>
               </template>
               <template v-else-if="column.key === 'contributorCountries'">
-                <span class="mr-2">美国 3.57%</span>
-                <d-tag color="gray">+3</d-tag>
+                <div style="cursor: pointer" @click="openCountryModal(column)">
+                  <span class="mr-2">美国 3.57%</span>
+                  <d-tag color="gray">+3</d-tag>
+                </div>
               </template>
               <template v-else-if="column.key === 'contributorOrganizations'">
-                <span class="mr-2">microsoft 3.57%</span>
-                <d-tag color="gray">+3</d-tag>
+                <div style="cursor: pointer" @click="openOrgModal(column)">
+                  <span class="mr-2">microsoft 3.57%</span>
+                  <d-tag color="gray">+3</d-tag>
+                </div>
               </template>
               <template v-else-if="column.key === 'sourceCodeDownload'">
                 <a>{{ scope.row.sourceCodeDownload }}</a>
@@ -88,6 +92,12 @@
       <span class="inline-block text-G900 text-sm font-normal leading-[20px] break-all">你确认删除此项：{{ item.cla_name }}
         ？</span>
     </GModal>
+
+    <!-- 引入子组件 -->
+    <CountryModal ref="countryModalRef" />
+
+    <!-- 引入子组件 -->
+    <OrgModal ref="orgModalRef" />
   </div>
 </template>
 
@@ -104,6 +114,8 @@ import { reqCatch } from '@/utils/catch';
 import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
 import { Message } from 'vue-devui';
 import { storeToRefs } from 'pinia';
+import CountryModal from './CountryModal.vue'
+import OrgModal from './OrgModal.vue'
 import { useAccountStore } from '@/stores/user';
 const { namespace } = getOrgInfo();
 const userInfo = useAccountStore();
@@ -111,6 +123,8 @@ const { isLogin } = storeToRefs(userInfo);
 
 // 定义 tableKey，用于强制刷新表格
 const tableKey = ref(0);
+const countryVisible = ref(false);
+const orgVisible = ref(false);
 const tableData = ref([
   {
     softwareName: 'eslint-plugin-import',
@@ -400,12 +414,37 @@ const columns = ref([
 
 // 定义 showColumnList 状态
 const showColumnList = ref(false);
+// 获取子组件的引用
+const countryModalRef = ref(null);
+const orgModalRef = ref(null);
 
+// 打开模态框的方法
+const openCountryModal = () => {
+  if (countryModalRef.value) {
+    countryModalRef.value.openModal(); // 调用子组件的方法
+  }
+};
+// 打开模态框的方法
+const openOrgModal = () => {
+  if (orgModalRef.value) {
+    orgModalRef.value.openModal(); // 调用子组件的方法
+  }
+};
 // 更新 showColumnList 的方法
 const updateShowColumnList = (newValue) => {
   showColumnList.value = newValue;
   tableKey.value++; // 更新 tableKey，强制刷新表格
 };
+// 更新 showColumnList 的方法
+const openCountryChart = (row) => {
+  // selectRow.value = row;
+  countryVisible.value = true;
+};
+// 更新 showColumnList 的方法
+const openOrgChart = (row) => {
+  // selectRow.value = row;
+  orgVisible.value = true;
+};
 
 const router = useRouter();
 const route = useRoute();