初步完成场景案例

src/apis/tab2.js

@@ -7,3 +7,11 @@ export const getGoodsList = (data) => {
     data
   })
 }
+// 获取场景列表
+export const getSceneList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/scene/list',
+    data
+  })
+}

src/views/tab1/index.vue

@@ -49,18 +49,17 @@
           </el-table-column>
           <el-table-column prop="name" label="项目名称"></el-table-column>
           <el-table-column
-            width="190"
             prop="projectTypeName"
             label="项目分类"
           ></el-table-column>
-          <el-table-column prop="technology" label="应用技术" width="100">
+          <el-table-column prop="technology" label="应用技术" >
           </el-table-column>
-          <el-table-column prop="application" label="展示形式" width="90">
+          <el-table-column prop="application" label="展示形式" >
           </el-table-column>
-          <el-table-column prop="updateTime" label="项目时间" width="180">
+          <el-table-column prop="updateTime" label="项目时间" >
           </el-table-column>
-          <el-table-column prop="level" label="保密级别" width="90"> </el-table-column>
-          <el-table-column label="操作" width="180">
+          <el-table-column prop="level" label="保密级别" width="120"> </el-table-column>
+          <el-table-column label="操作" >
             <template #default='{row}'>
               <el-button type="text" @click="look(row.id)">查 看</el-button>
               <el-button type="text" @click="projecEdit(row.id)">编 辑</el-button>
@@ -190,6 +189,12 @@ export default {
 </script>
 <style lang='less' scoped>
 .template {
+      /deep/.cell{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  }
+
   /deep/.el-table__body-wrapper {
     max-height: 450px;
     overflow-y: auto;
@@ -285,7 +290,7 @@ export default {
           border-radius: 12px;
           z-index: 999;
           position: absolute;
-          right: 24px;
+          right: 56px;
           top: 62px;
         }
       }

src/views/tab1/tab1_edit.vue

@@ -186,6 +186,7 @@
     </div>
     <!-- 底部按钮 -->
     <div class="button_btn">
+      <div @click="$router.go(-1)">返 回</div>
       <div class="edit" @click="outBtnOk">保 存</div>
     </div>
     <!-- 点击 文物 的+号出现弹出层 -->
@@ -696,7 +697,7 @@ export default {
           this.$message.success('文物编辑成功')
           this.$router.push('/layout/tab1')
         } else this.$message.warning(res.msg)
-        console.log(999, res)
+        // console.log(999, res)
       }
     },
     // 封装获取详情方法
@@ -1049,9 +1050,9 @@ export default {
     justify-content: space-between;
     align-items: center;
     position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
+    left: 100px;
     bottom: 30px;
+    width: 300px;
     height: 40px;
     div {
       border-radius: 10px;
@@ -1064,6 +1065,7 @@ export default {
       cursor: pointer;
     }
     .edit {
+      margin-left: 50px;
       color: #fff !important;
       background-color: #dc3545 !important;
     }

src/views/tab1/tab1_look.vue

@@ -6,7 +6,7 @@
     </div>
     <div class="conten">
       <div class="search">
-        <div class="txt">项目名称</div>
+        <div class="txt">{{tab0Data.name}}</div>
         <ul>
           <li v-for="(item,index) in topTab" :key="index" :class="{active:topTabInd===index}" @click="tabCut(index)">
             <a :href="item.id">{{item.name}}</a>
@@ -247,10 +247,17 @@ export default {
         width: 124px;
         margin-top: 10px;
         margin-right: 20px;
+        border: 1px solid #ccc;
+        box-shadow: 1px 1px 3px 0px;
+        padding: 15px 0;
+        transition: all .3s;
+            &:hover {
+            transform: translate(2px,-2px);
+        }
         }
       img {
-        width: 124px;
-        height: 124px;
+        width: 100px;
+        height: 75px;
         object-fit: contain;
       }
       }

src/views/tab2/index.vue

@@ -41,12 +41,12 @@
           stripe
           style="width: 100%"
         >
-          <el-table-column label="序号" width="80">
+          <el-table-column label="序号" width="60">
             <template slot-scope="scope">
               {{ scope.$index + (form.pageNum - 1) * form.pageSize + 1 }}
             </template>
           </el-table-column>
-          <el-table-column label="图片">
+          <el-table-column label="图片" width="120">
             <template #default="{ row }">
               <div class="tabImg">
                 <img :src="baseURL + row.thumb" alt="" :onerror='defaultImg'/>
@@ -58,14 +58,15 @@
             prop="goodsTypeName"
             label="文物类别"
           ></el-table-column>
-          <el-table-column prop="projectName" label="所属项目">
+          <el-table-column label="所属项目" #default="{ row }">
+            <span style="cursor: pointer;" @click="jump(row.projectId)">{{row.projectName}}</span>
           </el-table-column>
-          <el-table-column prop="projectTypeName" label="所属项目分类">
+          <el-table-column label="所属项目分类"  prop="projectTypeName">
           </el-table-column>
           <el-table-column label="链接" #default="{ row }">
-            <a :href="row.url">{{ row.url }}</a>
+            <a :href="row.url" target="_blank">{{ row.url }}</a>
           </el-table-column>
-          <el-table-column prop="level" label="保密级别"> </el-table-column>
+          <el-table-column prop="level" label="保密级别" width="120"> </el-table-column>
         </el-table>
       </div>
       <!-- 分页 -->
@@ -114,6 +115,12 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    jump (id) {
+      this.$router.push({
+        path: '/layout/tab1_look',
+        query: { id }
+      })
+    },
     // 点击搜索
     search () {
       this.form.pageNum = 1
@@ -124,6 +131,10 @@ export default {
       const res = await getGoodsList(data)
       this.tableData = res.data.list
       // console.log(999, res)
+      this.tableData.forEach(v => {
+        v.level = this.myLevel(v.level)
+      })
+
       this.total = res.data.total
     },
     // 分页器方法
@@ -166,6 +177,12 @@ export default {
 </script>
 <style lang='less' scoped>
 .template {
+    /deep/.cell{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  }
+
   /deep/.el-table__row td:nth-of-type(5) {
     color: #e97b86;
   }

src/views/tab3/index.vue

@@ -8,14 +8,18 @@
         <div class="txt">筛选查询</div>
         <div class="row">
           <span>输入搜索：</span>
-          <el-input v-model="form.name" placeholder="请输入"></el-input>
+          <el-input v-model="form.searchKey" placeholder="请输入"></el-input>
           <span>项目分类：</span>
-          <el-select v-model="form.fenlei" placeholder="请选择">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
+          <el-select v-model="form.projectTypeId" placeholder="请选择">
+            <el-option
+              v-for="item in projectType"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
           </el-select>
         </div>
-        <div class="btn">搜 索</div>
+        <div class="btn" @click="search">搜 索</div>
       </div>
       <!-- 表格 -->
       <div class="table">
@@ -28,21 +32,32 @@
           stripe
           style="width: 100%"
         >
-          <el-table-column label="序号" width="80">
+          <el-table-column label="序号" width="60">
             <template slot-scope="scope">
               {{ scope.$index + (form.pageNum - 1) * form.pageSize + 1 }}
             </template>
           </el-table-column>
-          <el-table-column prop="name1" label="场景名称"></el-table-column>
-          <el-table-column prop="name2" label="所属项目"></el-table-column>
-          <el-table-column prop="name3" label="项目时间"> </el-table-column>
-          <el-table-column prop="name3" label="链接"> </el-table-column>
-          <el-table-column prop="name3" label="保密级别"> </el-table-column>
+          <el-table-column prop="name" label="场景名称"></el-table-column>
+          <el-table-column label="所属项目" #default="{ row }">
+            <span style="cursor: pointer;" @click="jump(row.projectId)">{{row.projectName}}</span>
+          </el-table-column>
+          <el-table-column prop="projectTypeName" label="所属项目分类" ></el-table-column>
+          <el-table-column prop="updateTime" label="项目时间" > </el-table-column>
+          <el-table-column label="链接" #default="{ row }">
+            <a :href="row.url" target="_blank">{{ row.url }}</a>
+          </el-table-column>
+          <el-table-column prop="level" label="保密级别" width="120"> </el-table-column>
         </el-table>
       </div>
       <!-- 分页 -->
       <div class="paging">
-        <el-pagination layout="prev, pager, next,jumper" :total="50">
+        <el-pagination
+        layout="prev, pager, next,sizes,jumper"
+        :total="total"
+          :current-page='form.pageNum'
+          @current-change="currentChange"
+          @size-change="sizeChange"
+        >
         </el-pagination>
       </div>
     </div>
@@ -50,36 +65,22 @@
 </template>
 
 <script>
+import { getProjectType } from '@/apis/tab1'
+import { getSceneList } from '@/apis/tab2'
 export default {
   name: 'tab3',
   data () {
     // 这里存放数据
     return {
+      projectType: [],
+      total: 0,
       form: {
         pageNum: 1,
         pageSize: 10,
-        name: '',
-        fenlei: '',
-        jishu: ''
+        searchKey: '',
+        projectTypeId: ''
       },
-      tableData: [
-        {
-          name1: '111',
-          name2: '111',
-          name3: '111',
-          name4: '111',
-          name5: '111',
-          name6: '111'
-        },
-        {
-          name1: '222',
-          name2: '222',
-          name3: '222',
-          name4: '222',
-          name5: '222',
-          name6: '222'
-        }
-      ]
+      tableData: []
     }
   },
   // 监听属性 类似于data概念
@@ -87,9 +88,49 @@ export default {
   // 监控data中的数据变化
   watch: {},
   // 方法集合
-  methods: {},
+  methods: {
+    jump (id) {
+      this.$router.push({
+        path: '/layout/tab1_look',
+        query: { id }
+      })
+    },
+    // 封装获取文物列表方法
+    async getSceneList (data) {
+      const res = await getSceneList(data)
+      this.tableData = res.data.list
+      // console.log(999, res)
+      this.tableData.forEach(v => {
+        v.level = this.myLevel(v.level)
+      })
+      this.total = res.data.total
+    },
+    // 分页器方法
+    currentChange (val) {
+      // console.log('当前页改变了', val)
+      this.form.pageNum = val
+      this.getSceneList(this.form)
+    },
+    sizeChange (val) {
+      // console.log('条数改变了', val)
+      this.form.pageNum = 1
+      this.form.pageSize = val
+      this.getSceneList(this.form)
+    },
+    // 点击搜索
+    search () {
+      this.form.pageNum = 1
+      this.getSceneList(this.form)
+    }
+  },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  async created () {
+    this.getSceneList(this.form)
+    // 获取项目类型
+    const res1 = await getProjectType()
+    this.projectType = res1.data
+    this.projectType.unshift({ id: '', name: '全部' })
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -103,12 +144,15 @@ export default {
 </script>
 <style lang='less' scoped>
 .template {
-  /deep/.el-table__row td:nth-of-type(2) {
-    color: #E97B86;
+  /deep/.cell{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   }
-  /deep/.el-table__row td:nth-of-type(5) {
+  /deep/.el-table__row td:nth-of-type(3) {
     color: #E97B86;
   }
+
   /deep/.el-table__body-wrapper {
     max-height: 450px;
     overflow-y: auto;
@@ -193,6 +237,9 @@ export default {
         padding: 15px 20px 0;
         background-color: #d8dadc;
       }
+            a {
+        color: #e97b86;
+      }
     }
     .paging {
       position: absolute;