update

src/packages/pc/views/member/institution/industry/components/details/index.vue

@@ -1,15 +1,16 @@
 <!-- 会员机构管理-机构管理-产业会员管理-详情 -->
 <template>
-    <app-drawer :title="t('member.institution.industry.details.title')" width="900" v-model:show="show" :loading="loading" :refresh="refresh">
-        <app-table-details :title="t('member.institution.industry.details.subtitle')" :data="data?.organ" :label-width="160" :cell-props="detailProps1" :column="2" />
-        <span>
-            <span>{{ t('member.institution.industry.details.subtitle2') }}</span>
-            <span v-for="item in goodslimit" v-bind:key="item.id">
-                <span>{{ item.title }}: </span>
-            </span> 
-        </span>
+    <app-drawer :title="t('member.institution.industry.details.title')" width="900" v-model:show="show"
+        :loading="loading">
+        <app-table-details :title="t('member.institution.industry.details.subtitle')" :data="data?.organ"
+            :label-width="160" :cell-props="detailProps1" :column="2" />
+        <app-table-details title="市场" :data="data?.organ" :label-width="160" :cell-props="detailProps2">
+            <template #market>
+                {{ goodslimit.join(',') }}
+            </template>
+        </app-table-details>
         <template #footer>
-            <el-button @click="onCancel(false)">{{ t('operation.close') }}</el-button>
+            <el-button @click="onCancel">{{ t('operation.close') }}</el-button>
         </template>
     </app-drawer>
 </template>
@@ -35,10 +36,8 @@ const props = defineProps({
 })
 
 const show = shallowRef(true)
-const refresh = shallowRef(false)
-const loading = shallowRef(false)
 
-const { data } = useRequest(queryRoleDetail, {
+const { data, loading } = useRequest(queryRoleDetail, {
     params: {
         rolename: 'industry',
         userid: props.record.userid
@@ -48,27 +47,19 @@ const { data } = useRequest(queryRoleDetail, {
     }
 })
 
+const goodslimit = computed(() => data.value?.markets.map((e) => e.marketname) ?? [])
+
 const detailProps1: CellProp[] = [
     { prop: 'accountname', label: 'member.institution.industry.details.accountname' },
-    { prop: 'userName', label: 'member.institution.industry.details.userName', formatValue: () => {
-        return data.value?.users.username
-    }, },
+    { prop: 'userName', label: 'member.institution.industry.details.userName', formatValue: () => data.value?.users.username },
     { prop: 'reckonaccountid', label: 'member.institution.industry.details.reckonaccountid' }
 ]
 
-const goodslimit = computed(() => {
-    return data.value?.markets.map(e => {
-        return {
-            id: e.marketid,
-            title: e.marketname,
-            value: data.value?.operategoodsinfo?.filter(g => g.marketid === e.marketid).map(e => e.goodsname).join(','),
-        }
-    }) ?? []
-})
+const detailProps2: CellProp[] = [
+    { prop: 'market', label: 'member.institution.industry.details.subtitle2' }
+]
 
-const onCancel = (isRefresh = false) => {
+const onCancel = () => {
     show.value = false
-    refresh.value = isRefresh
 }
-
 </script>