update code

src/api/engin.js

@@ -6,6 +6,13 @@ const magList=()=>{
         method:'get'
     })
 }
+const magDetailList=(data)=>{
+    return request({
+        url:'base/magDetail/list',
+        method:'get',
+        params:data
+    })
+}
 const magGroupByTopic=()=>{
     return new Promise((resolve) => {
      request({
@@ -14,8 +21,9 @@ const magGroupByTopic=()=>{
       }).then(d=>{        
         let total=0;
         let tmps=(d.data||[]).map(it=>{
-            total+=it.id||0;
+            total+=it.id||0;            
             return {
+                magid:it.magid,
                 mag:it.title,
                 magOrd:it.ord,
                 magDate:+dayjs(it.createTime).$d,
@@ -30,6 +38,7 @@ const magGroupByTopic=()=>{
             let obj={};
             if(objs.length==0){
                 obj={
+                    magid:it.magid,
                     mag:it.mag,
                     ord:it.magOrd,
                     date:it.magDate,
@@ -121,5 +130,6 @@ export default {
     groupByMag,
     committeeList,
     committeeSumGroupByType,
-    selectByWorkingType
+    selectByWorkingType,
+    magDetailList
 }

src/pages/engin/magListDialog.vue

@@ -0,0 +1,150 @@
+<template>
+    <MyDialog v-if="show" v-model="show" width="1600px" height="850px" class="mag-list-dialog">
+        <template slot="title">期刊 {{ magName }}</template>
+        <div class="head-title-tab" style="padding: 10px 0px;width:unset;">
+            <div v-for="it in navList" :class="nav == it.id ? 'head-nav active' : 'head-nav'" :key="it.id"
+                @click="doNav(it.id)">{{ it.topic }}</div>
+        </div>
+        <el-table :data="tableData">
+            <el-table-column label="期刊" align="center" prop="name" />
+            <el-table-column label="栏目" align="center" prop="topicName" />
+            <el-table-column label="单位" align="center" prop="deptName" />
+            <el-table-column label="作者" align="center" prop="authorName" />
+            <el-table-column label="期刊主图" align="center" prop="imageUrl">
+                <template slot-scope="{row}">
+                    <el-image v-if="row.imageUrl" class="row-image" :src="'/jhapi' + row.imageUrl + '.min.jpg'"
+                        :preview-src-list="['/jhapi' + row.imageUrl]"></el-image>
+                </template>
+            </el-table-column>
+            <el-table-column label="标题" align="center" prop="title">
+                <template slot-scope="{row}">
+                    <el-popover placement="bottom-start" width="400" trigger="hover">
+                        {{ row.title }}
+                        <div slot="reference" class="div-txt-3" style="text-align: left;">{{ row.title }}</div>
+                    </el-popover>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-pagination layout="total,prev, pager, next" :hide-on-single-page="true"
+            @current-change="handleCurrentChange" :total="total" :page-size="size" :current-page.sync="index"
+            class="bg-pagination"></el-pagination>
+    </MyDialog>
+</template>
+
+<script>
+import MyDialog from '../components/MyDialog'
+import imageItem from './enginImageItem.vue'
+import { tryToJson } from '@/utils/tools'
+export default {
+    components: {
+        MyDialog, imageItem
+    },
+    name: 'magListDlg',
+
+    data() {
+        return {
+            show: false,
+            tableData: [],
+            nav: 1,
+            index: 1,
+            size: 10,
+            deptId: 0,
+            projectId: 0,
+            total: 0,
+            magName: '',
+            info: null,
+            navList: []
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        handleCurrentChange(n) {
+            this.index = n;
+            this.loadData();
+        },
+        doNav(n) {
+            this.nav = n;
+            this.index = 1;
+            this.loadData();
+        },
+        showDialog(data) {
+            this.info = data.row;
+            this.magName = data.row.mag;
+            this.navList = data.row.list;
+            this.nav = this.navList[data.idx].id;
+            this.show = true
+            this.loadData();
+        },
+        loadData() {
+            let data = {
+                magid: this.info.magid,
+                topic: this.nav,
+                pageSize: this.size,
+                pageNum: this.index
+            }
+            this.$api.engin.magDetailList(data).then(d => {
+
+                this.tableData = (d.rows || []).map(it => {
+                    let tmps = it.images;
+                    if (tmps && tmps.length > 0) {
+                        tmps = tryToJson(tmps, []);
+                        if (tmps.length > 0) {
+                            it.imageUrl = tmps[0];
+                        }
+                    }
+                    return it;
+                }); this.total = d.total;
+            })
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.mytable {
+    /deep/ th .cell {
+        color: aquamarine;
+    }
+}
+</style>
+<style lang="less">
+.mag-list-dialog {
+    .popup-project-introduction-min {
+        transform: translateY(100px);
+    }
+
+    .bg-pagination {
+        margin-top: 20px;
+    }
+
+    .head-title-tab {
+        max-width: unset;
+
+        .head-nav {
+            width: 177px;
+        }
+    }
+
+    .image-list {
+        display: grid;
+        grid-template-columns: 25% 25% 25% 25%;
+
+        .engin-image-item {
+            height: 300px;
+
+            .div-img {
+                width: 100%;
+
+                .el-image {
+                    width: 100%;
+                }
+            }
+
+        }
+    }
+}
+</style>

src/pages/projectEngin.vue

@@ -78,7 +78,7 @@
                                 </el-table-column>
                                 <el-table-column v-for="(it, idx) in dataListTitles" :label="it">
                                     <template slot-scope="{row}">
-                                        {{ row.list[idx].cnt }}
+                                        <span style="cursor: pointer;" @click="showMagDlg(row,idx)">{{ row.list[idx].cnt }}</span>
                                     </template>
                                 </el-table-column>
                             </el-table>
@@ -182,6 +182,7 @@
             </el-row>
         </div>
         <projectStandardDialog ref="standardDlg"></projectStandardDialog>
+        <magListDialog ref="magListDlg"></magListDialog>
     </div>
 </template>
 
@@ -191,6 +192,7 @@ import '../components/module/module-one-2-1'
 import '../components/module/module-one-3-1'
 import '../components/staff-survey-chart'
 import '../components/chart-bar'
+import magListDialog from './engin/magListDialog.vue'
 import BorderBox6 from './components/BorderBox6.vue'
 import debounce from 'lodash.debounce'
 import imageItem from './engin/enginImageItems.vue'
@@ -202,7 +204,7 @@ import { tryToJson } from '@/utils/tools'
 import ListByCategory from './engin/flowListByCategory.vue'
 export default {
     name: 'JhbigscreenProjectEngin',
-    components: { BorderBox6, imageItem, unitDialog, stateDialog, enginChart, projectStandardDialog, ListByCategory },
+    components: { BorderBox6, imageItem, unitDialog, stateDialog, enginChart, projectStandardDialog, ListByCategory,magListDialog },
     data() {
         return {
             label1: '项目标准化管理',
@@ -263,6 +265,9 @@ export default {
         });
     },
     methods: {
+        showMagDlg(row,idx){
+            this.$refs.magListDlg.showDialog({row:row,idx:idx});
+        }, 
         getCommList(it){
             this.selType=it.value;
             this.$api.engin.selectByWorkingType({
@@ -438,7 +443,7 @@ export default {
             left: 196px;
         }
     }
-
+    
     /deep/ .tr-cmd {
         cursor: pointer;