新增项目资料，文物逻辑

src/apis/tab1.js

@@ -9,7 +9,26 @@ export const getProjectType = () => {
 // 获取文物类型
 export const getGoodsType = () => {
   return axios({
-    // method: 'post',
     url: '/cms/goods/base/getGoodsType'
   })
 }
+// 设置文物封面
+export const modelSetIndex = (fileId) => {
+  return axios({
+    url: `/cms/goods/modelSetIndex/${fileId}`
+  })
+}
+// 弹窗文物-新增&编辑
+export const modelSave = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/goods/modelSave',
+    data
+  })
+}
+// 通过ID获取文物详情
+export const getAntiqueById = (id) => {
+  return axios({
+    url: `/cms/goods/detail/${id}`
+  })
+}

src/apis/tab2.js

@@ -0,0 +1,9 @@
+import axios from '../utils/request'
+// 获取文物列表
+export const getGoodsList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/goods/list',
+    data
+  })
+}

src/assets/style/initial.css

@@ -48,3 +48,9 @@ a {
 .v-modal{
   z-index: 999 !important;
 }
+.el-pager li.active{
+  color: #DC3545;
+}
+.el-pager li:hover{
+  color: #DC3545;
+}

src/router/index.js

@@ -20,40 +20,47 @@ const routes = [
       {
         path: 'tab1',
         name: 'tab1',
+        meta: { myInd: 0 },
         component: () => import('@/views/tab1/index.vue')
       },
       {
         path: 'tab1_look',
         name: 'tab1_look',
+        meta: { myInd: 0 },
         component: () => import('@/views/tab1/tab1_look.vue')
       },
       {
         path: 'tab1_add',
         name: 'tab1_add',
+        meta: { myInd: 0 },
         component: () => import('@/views/tab1/tab1_add.vue')
       },
       // 文物案例
       {
         path: 'tab2',
         name: 'tab2',
+        meta: { myInd: 1 },
         component: () => import('@/views/tab2/index.vue')
       },
       // 场景案例
       {
         path: 'tab3',
         name: 'tab3',
+        meta: { myInd: 2 },
         component: () => import('@/views/tab3/index.vue')
       },
       // 用户管理
       {
         path: 'tab4',
         name: 'tab4',
+        meta: { myInd: 3 },
         component: () => import('@/views/tab4/index.vue')
       },
       // 操作日志
       {
         path: 'tab5',
         name: 'tab5',
+        meta: { myInd: 4 },
         component: () => import('@/views/tab5/index.vue')
       }
     ]

src/views/layout/index.vue

@@ -16,11 +16,11 @@
     <div class="leftTab">
       <div class="title">数据管理</div>
       <ul>
-        <li v-for="item in tabList1" :key="item.id" :class="{active:index===item.id}" @click="skip(item.id,item.path)">{{item.name}}</li>
+        <li v-for="item in tabList1" :key="item.id" :class="{active:$route.meta.myInd===item.id}" @click="skip(item.id,item.path)">{{item.name}}</li>
       </ul>
       <div class="title">系统管理</div>
       <ul>
-        <li v-for="item in tabList2" :key="item.id"  :class="{active:index===item.id}" @click="skip(item.id,item.path)">{{item.name}}</li>
+        <li v-for="item in tabList2" :key="item.id"  :class="{active:$route.meta.myInd===item.id}" @click="skip(item.id,item.path)">{{item.name}}</li>
       </ul>
     </div>
     <!-- 右侧内容 -->
@@ -39,15 +39,14 @@ export default {
   data () {
     // 这里存放数据
     return {
-      index: 1,
       tabList1: [
-        { id: 1, name: '项目资料', path: '/layout/tab1' },
-        { id: 2, name: '文物案例', path: '/layout/tab2' },
-        { id: 3, name: '场景案例', path: '/layout/tab3' }
+        { id: 0, name: '项目资料', path: '/layout/tab1' },
+        { id: 1, name: '文物案例', path: '/layout/tab2' },
+        { id: 2, name: '场景案例', path: '/layout/tab3' }
       ],
       tabList2: [
-        { id: 4, name: '用户管理', path: '/layout/tab4' },
-        { id: 5, name: '操作日志', path: '/layout/tab5' }
+        { id: 3, name: '用户管理', path: '/layout/tab4' },
+        { id: 4, name: '操作日志', path: '/layout/tab5' }
       ]
     }
   },
@@ -58,7 +57,6 @@ export default {
   // 方法集合
   methods: {
     skip (id, url) {
-      this.index = id
       this.$router.push(url).catch(() => {})
     }
   },

src/views/login.vue

@@ -114,6 +114,7 @@ export default {
     }
 
     .btn{
+      cursor: pointer;
       margin-top: 40px;
       color: #fff;
       display: flex;

src/views/tab1/tab1_add.vue

@@ -160,10 +160,19 @@
         <div id="tab4" class="conten_box">
           <div class="title">文物</div>
           <div class="imgBox">
-            <div>
-              <img src="@/assets/img/logo22.png" alt="" />1234567891111111111111
+            <div
+              v-for="(item, index) in saveAntiqueArr"
+              :key="index"
+              @mouseenter="moveShowIdn = index"
+              @mouseleave="moveShowIdn = null"
+            >
+              <img :src="baseURL + item.url" alt="" />{{ item.name }}
+              <!-- 鼠标移上去显示的盒子 -->
+              <div class="moveShow" v-show="moveShowIdn === index">
+                <i class="el-icon-edit" @click="outEditAntique(item.id)"></i>
+                <i class="el-icon-delete" @click="outDelAntique(index)"></i>
+              </div>
             </div>
-            <div><img src="@/assets/img/logo22.png" alt="" />12345678</div>
             <!-- 点击文物+号新增文物 -->
             <div class="uploaImg" @click="addAntique">+</div>
           </div>
@@ -175,8 +184,8 @@
         <div class="edit">保 存</div>
       </div>
     </div>
-    <!-- 点击文物的+号出现弹出层 -->
-    <el-dialog title="添加文物" :visible.sync="addIsShow">
+    <!-- 点击 文物 的+号出现弹出层 -->
+    <el-dialog :title="addForm.id?'编辑文物':'添加文物'" :visible.sync="addIsShow">
       <el-form
         :model="addForm"
         :rules="addRules"
@@ -208,70 +217,74 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="文物图片：">
-          <el-upload
-            :action="baseURL + '/cms/goods/upload'"
-            :headers="{token}"
-            list-type="picture-card"
-            :auto-upload="false"
-            :before-upload="beforethumbUpload"
-            :on-success="upload_thumb_success"
-          >
-            <i slot="default" class="el-icon-plus"></i>
-            <div slot="file" slot-scope="{ file }" class="myttttttttt">
-              <!-- 底部的设为封面按钮 -->
-              <div class="fengmian">设为封面</div>
+        <el-form-item label="文物图片：" class="myImgBox">
+          <div class="upImgBox">
+            <div
+              class="imgdiv"
+              :class="{ active: fengmianInd === index }"
+              v-for="(item, index) in imgList"
+              :key="index"
+              @mouseenter="imgIconInd = index"
+              @mouseleave="imgIconInd = null"
+            >
               <img
-                class="el-upload-list__item-thumbnail"
-                :src="file.url"
-                alt=""
+                style="width: 100%; height: 100%"
+                :src="baseURL + item.url"
               />
-              <span class="el-upload-list__item-actions">
-                <span
-                  class="el-upload-list__item-preview"
-                  @click="handlePictureCardPreview(file)"
-                >
-                  <i class="el-icon-zoom-in"></i>
-                </span>
+              <div class="imgIcon" v-show="index === imgIconInd">
+                <i class="el-icon-zoom-in" @click="lookImg(item.url)"></i>
+                <a :href="baseURL + item.url" target="_blank" download
+                  ><i class="el-icon-download"></i
+                ></a>
+                <i class="el-icon-delete" @click="delImg(index)"></i>
                 <span
-                  v-if="!disabled"
-                  class="el-upload-list__item-delete"
-                  @click="handleDownload(file)"
+                  @click="modelSetIndex(item.id, index, item.url)"
+                  v-if="fengmianInd !== index"
+                  >设置封面</span
                 >
-                  <i class="el-icon-download"></i>
-                </span>
-                <span
-                  v-if="!disabled"
-                  class="el-upload-list__item-delete"
-                  @click="handleRemoveImg(file)"
-                >
-                  <i class="el-icon-delete"></i>
-                </span>
-              </span>
+              </div>
             </div>
-            <div class="el-upload__tip" slot="tip">
-              支持png / jpg / gif / jpeg的图片格式，最大支持20M。
+          </div>
+          <el-upload
+            drag
+            class="avatar-uploader"
+            :action="baseURL + '/cms/goods/upload'"
+            :headers="{ token }"
+            :show-file-list="false"
+            :before-upload="beforethumbUpload"
+            :on-success="upload_thumb_success"
+          >
+            <div class="upImg">
+              <i slot="default" class="el-icon-plus"></i>
             </div>
           </el-upload>
-          <div class="lookImg" v-if="dialogVisible">
-            <img :src="dialogImageUrl" alt="" />
-            <div class="imgBtnX" @click="dialogVisible = false">关 闭</div>
-          </div>
-          <!-- <el-dialog :visible.sync="dialogVisible" class="lookImg">
-          </el-dialog> -->
         </el-form-item>
+        <span style="margin-left: 100px"
+          >支持png / jpg / gif / jpeg的图片格式，最大支持20M。</span
+        >
       </el-form>
 
       <div slot="footer" class="dialog-footer">
-        <el-button @click="addIsShow = false">取 消</el-button>
-        <el-button type="primary" @click="addIsShow = false">保 存</el-button>
+        <el-button @click="addBtnX">取 消</el-button>
+        <el-button type="primary" @click="addBtnOk">保 存</el-button>
       </div>
     </el-dialog>
+    <!-- 点击查看图片 -->
+    <div class="lookImg" v-if="dialogImageIshow">
+      <img :src="baseURL + dialogImageUrl" alt="" />
+      <div class="imgBtnX" @click="dialogImageIshow = false">关 闭</div>
+    </div>
   </div>
 </template>
 
 <script>
-import { getProjectType, getGoodsType } from '@/apis/tab1'
+import {
+  getProjectType,
+  getGoodsType,
+  modelSetIndex,
+  modelSave,
+  getAntiqueById
+} from '@/apis/tab1'
 import axios from '@/utils/request'
 export default {
   // import引入的组件需要注入到对象中才能使用
@@ -280,14 +293,19 @@ export default {
   data () {
     // 这里存放数据
     return {
+      fengmianInd: 0,
+      imgIconInd: null,
+      imgList: [],
       dialogImageUrl: '',
-      dialogVisible: false,
-      disabled: false,
+      dialogImageIshow: false,
       addIsShow: false,
       addForm: {
-        name: '',
-        url: '',
-        goodsTypeId: null
+        fileIds: '', // 图片id, 多个以逗号隔开
+        name: '', // 名称
+        url: '', // 链接
+        goodsTypeId: null, // 文物类型id
+        // projectId: '', // 项目id
+        thumb: '' // 封面
       },
       addRules: {
         name: { required: true, message: '不能为空', trigger: 'blur' },
@@ -295,7 +313,9 @@ export default {
       },
       // 文物类别数组
       antiqueArr: [],
-      // 文物弹窗数据↑
+      // 点击保存后的文物数组
+      saveAntiqueArr: [],
+      // 文物弹窗数据↑↑↑↑↑↑↑↑↑↑↑↑
       projectId: 'SWKK',
       // 服务器前缀地址
       baseURL: '',
@@ -333,7 +353,9 @@ export default {
       projectType: [],
       rules: {
         name: { required: true, message: '请输入项目名称', trigger: 'blur' }
-      }
+      },
+      // 外层的文物数据
+      moveShowIdn: null
     }
   },
   // 监听属性 类似于data概念
@@ -346,8 +368,10 @@ export default {
     async addAntique () {
       const res = await getGoodsType()
       this.antiqueArr = res.data
-      this.antiqueArr.unshift({ id: '', name: '请选择' })
+      this.antiqueArr.unshift({ id: '', name: '' })
       this.addIsShow = true
+      // 把封面默认变成第一个
+      this.fengmianInd = 0
     },
     // 上面的tab栏切换
     tabCut (index) {
@@ -389,6 +413,38 @@ export default {
           this.$message.info('已取消删除!')
         })
     },
+    // -------------点击外层文物-------------------
+    // 编辑
+    async outEditAntique (id) {
+      const res = await getAntiqueById(id)
+      // console.log(999, res)
+      this.addForm = res.data.entity
+      res.data.file.forEach((v, i) => {
+        this.imgList.push({
+          url: v.filePath,
+          name: v.name,
+          id: v.id
+        })
+        // index为1的是首页图片
+        if (v.isIndex === 1) this.fengmianInd = i
+      })
+      this.addIsShow = true
+    },
+    // 删除
+    outDelAntique (index) {
+      this.$confirm('确定删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.saveAntiqueArr.splice(index, 1)
+          this.$message.success('删除成功!')
+        })
+        .catch(() => {
+          this.$message.info('已取消删除')
+        })
+    },
     // --------------附件--------------
     successFujian (file) {
       console.log('上传附件成功', file)
@@ -396,12 +452,15 @@ export default {
     handleRemove (file) {
       console.log('删除附件成功', file)
     },
-    // ----------------文物弹窗里面的图片---------------
+    // ----------------文物弹窗里面---------------
     beforethumbUpload (file) {
-      console.log('上传文件前校验', file)
+      // console.log('上传文件前校验', file)
       // 限制图片大小和格式
       const sizeOk = file.size / 1024 / 1024 < 20
-      const typeOk = file.type === 'image/png' || file.type === 'image/jpeg'
+      const typeOk =
+        file.type === 'image/png' ||
+        file.type === 'image/jpeg' ||
+        file.type === 'image/gif'
 
       return new Promise((resolve, reject) => {
         if (!typeOk) {
@@ -411,27 +470,96 @@ export default {
           this.$message.error('照片大小超过20M！')
           reject(file)
         } else {
-          this.$message.success('上传成功')
           resolve(file)
         }
       })
     },
     upload_thumb_success (data) {
-      console.log('上传文件成功', data)
+      this.$message.success('上传成功')
+      // console.log('上传文件成功', data)
+      this.imgList.push({
+        url: data.data.filePath,
+        name: data.data.fileName,
+        id: data.data.fileId
+      })
+      // 把第一张的url设置为封面---如果是新增
+      if (!this.addForm.id) this.addForm.thumb = this.imgList[0].url
       // this.loading = false
       // this.ruleForm.thumb = data.data.filePath
     },
-    handleRemoveImg (file) {
+    delImg (index) {
       // 点击删除
-      console.log(file)
+      this.$confirm('确定删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.imgList.splice(index, 1)
+          this.$message.success('删除成功!')
+        })
+        .catch(() => {
+          this.$message.info('已取消删除')
+        })
+    },
+    // 点击放大镜，查看图片
+    lookImg (url) {
+      this.dialogImageUrl = url
+      this.dialogImageIshow = true
+    },
+    // 点击设置为封面
+    async modelSetIndex (id, index, url) {
+      const res = await modelSetIndex(id)
+      if (res.code === 0) {
+        this.fengmianInd = index
+        this.$message.success('设置封面成功')
+        this.addForm.thumb = url
+      }
     },
-    handlePictureCardPreview (file) {
-      this.dialogImageUrl = file.url
-      this.dialogVisible = true
+    // 点击弹窗里面的保存
+    async addBtnOk () {
+      if (this.addForm.name.trim() === '') { return this.$message.warning('文物名称不能为空') }
+      if (this.addForm.url.trim() === '') { return this.$message.warning('文物链接不能为空') }
+      const temp = []
+      this.imgList.forEach((v) => {
+        temp.push(v.id)
+      })
+      this.addForm.fileIds = temp.join(',')
+      // console.log(999, this.addForm)
+      const res = await modelSave(this.addForm)
+      if (res.code === 0) {
+        if (!this.addForm.id) { // 新增的push进去
+          this.saveAntiqueArr.push({
+            id: res.data.id,
+            name: res.data.name,
+            url: res.data.thumb
+          })
+        } else {
+          // 修改的改变之前的数组
+          this.saveAntiqueArr.forEach(v => {
+            if (v.id === this.addForm.id) {
+              v.name = res.data.name
+              v.url = res.data.thumb
+            }
+          })
+        }
+        this.$message.success('保存成功')
+        this.addBtnX()
+      }
+      // console.log(999, res)
     },
-    handleDownload (file) {
-      // 点击下载
-      console.log(file)
+    // 点击弹窗里面的取消
+    addBtnX () {
+      this.addForm = {
+        fileIds: '', // 图片id, 多个以逗号隔开
+        name: '', // 名称
+        url: '', // 链接
+        goodsTypeId: null, // 文物类型id
+        // projectId: '', // 项目id
+        thumb: '' // 封面
+      }
+      this.imgList = []
+      this.addIsShow = false
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
@@ -465,7 +593,7 @@ export default {
   width: 100vw;
   height: 100vh;
   position: fixed;
-  z-index: 999;
+  z-index: 9999;
   background-color: rgba(0, 0, 0, 0.7);
   img {
     max-width: 80vw;
@@ -474,6 +602,7 @@ export default {
   .imgBtnX {
     cursor: pointer;
     width: 100px;
+    height: 30px;
     position: absolute;
     left: 50%;
     bottom: 20px;
@@ -485,34 +614,81 @@ export default {
     align-items: center;
   }
 }
-/deep/.el-upload-list--picture-card .el-upload-list__item-thumbnail {
-  width: 146px;
-  height: 146px;
-  object-fit: contain;
-}
-/deep/.el-upload-list--picture-card .el-upload-list__item {
-  overflow: visible;
+.myImgBox {
+  /deep/.el-form-item__content {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  /deep/.el-upload-dragger {
+    width: 135px;
+    height: 135px;
+    border: 1px solid #ccc;
+  }
 }
-/deep/.el-upload-list--picture-card {
+.upImgBox {
   display: flex;
-  margin-bottom: 40px;
+  .active {
+    border: 2px solid #dc3545;
+  }
 }
-.myttttttttt {
-  .fengmian {
-    border-radius: 8px;
-    display: flex;
-    justify-content: center;
+.imgdiv {
+  position: relative;
+  margin: 0 10px 10px 0;
+  border: 1px solid #ccc;
+  width: 135px;
+  height: 135px;
+  & > img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+  .imgIcon {
+    justify-content: space-around;
     align-items: center;
-    cursor: pointer;
-    z-index: 999;
+    display: flex;
     position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: -35px;
-    background-color: #dc3545;
-    width: 100px;
-    height: 30px;
-    color: #fff;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+    i {
+      color: #fff;
+      font-size: 24px;
+      cursor: pointer;
+    }
+    a {
+      i {
+        margin-top: 10px;
+      }
+    }
+    i:hover {
+
+      color: #dc3545;
+    }
+    & > span {
+      cursor: pointer;
+      color: #fff;
+      position: absolute;
+      bottom: 0px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    & > span:hover {
+      color: #dc3545;
+    }
+  }
+}
+
+.upImg {
+  width: 135px;
+  height: 135px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  & > i {
+    font-size: 50px;
+    color: #ccc;
   }
 }
 /deep/.el-select {
@@ -557,16 +733,22 @@ export default {
         li {
           padding-bottom: 5px;
           cursor: pointer;
-          color: #666;
           margin-right: 100px;
+          a {
+            color: #666;
+          }
         }
         li:hover {
-          color: black;
           border-bottom: 2px solid #dc3545;
+          a {
+            color: black;
+          }
         }
         .active {
-          color: black;
           border-bottom: 2px solid #dc3545;
+          a {
+            color: black;
+          }
         }
       }
     }
@@ -620,22 +802,51 @@ export default {
         display: flex;
         flex-wrap: wrap;
         & > div {
-          cursor: pointer;
+          // cursor: pointer;
+          position: relative;
           word-wrap: break-word;
           text-align: center;
           width: 120px;
           margin: 20px 0 0 10px;
+          border: 1px solid #ccc;
+          box-shadow: 1px 1px 3px 0px;
+          .moveShow {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            & > i {
+              cursor: pointer;
+              color: #fff;
+              font-size: 24px;
+            }
+            & > i:hover {
+              color: #dc3545;
+            }
+          }
         }
         img {
+          padding-top: 8px;
           width: 100px;
           height: 75px;
+          display: block;
+          margin: 0 auto;
           object-fit: contain;
         }
         .uploaImg {
+          cursor: pointer;
           color: #ccc;
           border: 1px solid #ccc;
           font-size: 80px;
           font-weight: 700;
+          display: flex;
+          align-items: center;
+          justify-content: center;
         }
       }
     }

src/views/tab1/tab1_look.vue

@@ -146,16 +146,22 @@ export default {
         li {
           padding-bottom: 5px;
           cursor: pointer;
-          color:#666;
           margin-right: 100px;
+          a{
+            color:#666;
+          }
         }
         li:hover {
-          color: black;
           border-bottom: 2px solid #DC3545;
+          a {
+            color: black;
+          }
         }
         .active {
-          color: black;
           border-bottom: 2px solid #DC3545;
+          a {
+            color: black;
+          }
         }
       }
     }

src/views/tab2/index.vue

@@ -8,16 +8,24 @@
         <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>
           <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.goodsTypeId" placeholder="请选择">
+            <el-option
+              v-for="item in antiqueArr"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
           </el-select>
         </div>
         <div class="btn">搜 索</div>
@@ -28,7 +36,7 @@
           <div class="txt">数据列表</div>
         </div>
         <el-table
-          :header-cell-style="{background:'#d8dadc'}"
+          :header-cell-style="{ background: '#d8dadc' }"
           :data="tableData"
           stripe
           style="width: 100%"
@@ -39,59 +47,65 @@
             </template>
           </el-table-column>
           <el-table-column label="图片">
-            <template>
+            <template #default="{ row }">
               <div class="tabImg">
-              <img src="../../assets/img/logo22.png" alt="">
+                <img :src="baseURL + row.thumb" alt="" />
               </div>
             </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="name3" label="保密级别"> </el-table-column>
+          <el-table-column prop="name" label="文物名称"></el-table-column>
+          <el-table-column
+            prop="goodsTypeName"
+            label="文物类别"
+          ></el-table-column>
+          <el-table-column prop="projectName" label="所属项目">
+          </el-table-column>
+          <el-table-column prop="projectTypeName" label="所属项目分类">
+          </el-table-column>
+          <el-table-column label="链接" #default="{ row }">
+            <a :href="row.url">{{ row.url }}</a>
+          </el-table-column>
+          <el-table-column prop="level" label="保密级别"> </el-table-column>
         </el-table>
       </div>
       <!-- 分页 -->
       <div class="paging">
-      <el-pagination layout="prev, pager, next,jumper" :total="50"> </el-pagination>
+        <el-pagination
+          layout="prev, pager, next,sizes,jumper"
+          :total="total"
+          :current-page='form.pageNum'
+          @current-change="currentChange"
+          @size-change="sizeChange"
+        >
+        </el-pagination>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { getGoodsType, getProjectType } from '@/apis/tab1'
+import axios from '@/utils/request'
+import { getGoodsList } from '@/apis/tab2'
 export default {
   name: 'tab2',
   data () {
     // 这里存放数据
     return {
+      // 文物类别数组
+      antiqueArr: [],
+      // 项目分类数组
+      projectType: [],
+      baseURL: '',
+      total: 0,
       form: {
         pageNum: 1,
         pageSize: 10,
-        name: '',
-        fenlei: '',
-        jishu: ''
+        searchKey: '',
+        goodsTypeId: '',
+        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概念
@@ -99,9 +113,41 @@ export default {
   // 监控data中的数据变化
   watch: {},
   // 方法集合
-  methods: {},
+  methods: {
+    // 封装获取文物列表方法
+    async getGoodsList (data) {
+      const res = await getGoodsList(data)
+      this.tableData = res.data.list
+      // console.log(999, res)
+      this.total = res.data.total
+    },
+    // 分页器方法
+    currentChange (val) {
+      // console.log('当前页改变了', val)
+      this.form.pageNum = val
+      this.getGoodsList(this.form)
+    },
+    sizeChange (val) {
+      // console.log('条数改变了', val)
+      this.form.pageNum = 1
+      this.form.pageSize = val
+      this.getGoodsList(this.form)
+    }
+  },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  async created () {
+    // 获取文物类别
+    const res = await getGoodsType()
+    this.antiqueArr = res.data
+    this.antiqueArr.unshift({ id: '', name: '全部' })
+    // 获取项目类型
+    const res1 = await getProjectType()
+    this.projectType = res1.data
+    this.projectType.unshift({ id: '', name: '全部' })
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    this.getGoodsList(this.form)
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -116,28 +162,25 @@ export default {
 <style lang='less' scoped>
 .template {
   /deep/.el-table__row td:nth-of-type(5) {
-    color: #E97B86;
+    color: #e97b86;
   }
-  /deep/.el-table__row td:nth-of-type(7) {
-    color: #E97B86;
-  }
-  /deep/.el-table__body-wrapper{
+  /deep/.el-table__body-wrapper {
     max-height: 450px;
     overflow-y: auto;
   }
   /deep/.cell {
     padding-left: 20px !important;
   }
-  /deep/.el-table__row .el-table__cell{
+  /deep/.el-table__row .el-table__cell {
     padding: 10px 0 !important;
   }
-  /deep/.el-pager li{
+  /deep/.el-pager li {
     background: transparent !important;
   }
-  /deep/.btn-prev{
+  /deep/.btn-prev {
     background: transparent !important;
   }
-  /deep/.btn-next{
+  /deep/.btn-next {
     background: transparent !important;
   }
   padding: 0px 30px;
@@ -204,7 +247,7 @@ export default {
         padding: 15px 20px 0;
         background-color: #d8dadc;
       }
-      .tabImg{
+      .tabImg {
         width: 80px;
         height: 80px;
         img {
@@ -213,8 +256,11 @@ export default {
           object-fit: contain;
         }
       }
+      a {
+        color: #e97b86;
+      }
     }
-    .paging{
+    .paging {
       position: absolute;
       bottom: 15px;
       right: 50px;