tab1剩下编辑功能

src/apis/tab1.js

@@ -32,3 +32,32 @@ export const getAntiqueById = (id) => {
     url: `/cms/goods/detail/${id}`
   })
 }
+// 新增项目
+export const projectAdd = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/project/add',
+    data
+  })
+}
+// 获取主页列表数据
+export const projectList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/project/list',
+    data
+  })
+}
+// 主页面的删除
+export const projecDel = (id) => {
+  return axios({
+    method: 'delete',
+    url: `/cms/project/remove/${id}`
+  })
+}
+// 查看页面通过ID获取详情
+export const getDetail = (id) => {
+  return axios({
+    url: `/cms/project/detail/${id}`
+  })
+}

src/main.js

@@ -12,6 +12,35 @@ const checkBtn = {
     return {
       defaultImg: 'this.src="' + require('./assets/img/IMGerror.png') + '"'
     }
+  },
+  methods: {
+    // 应用技术数据转换
+    myTechnology (id) {
+      const list = [
+        { id: 'live', name: '实景拍摄' },
+        { id: 'virtual', name: '虚拟建模' },
+        { id: '4dkk', name: '四维看看' }
+      ]
+      return list.filter(v => id === v.id)[0] ? list.filter(v => id === v.id)[0].name : ''
+    },
+    // 展示形式数据转换
+    myApplication (id) {
+      const list = [
+        { id: 'web', name: '网页端' },
+        { id: 'app', name: '移动端' }
+      ]
+      return list.filter(v => id === v.id)[0] ? list.filter(v => id === v.id)[0].name : ''
+    },
+    // 保密级别数据转换
+    myLevel (id) {
+      const list = [
+        { id: 1, name: '一般' },
+        { id: 2, name: '秘密' },
+        { id: 3, name: '机密' },
+        { id: 4, name: '绝密' }
+      ]
+      return list.filter(v => id === v.id)[0] ? list.filter(v => id === v.id)[0].name : ''
+    }
   }
 }
 Vue.mixin(checkBtn)

src/views/tab1/index.vue

@@ -8,25 +8,33 @@
         <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.typeId" 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.technology" placeholder="请选择">
+            <el-option label="全部" :value="null"></el-option>
+            <el-option label="实景拍摄" value="live"></el-option>
+            <el-option label="虚拟建模" value="virtual"></el-option>
+            <el-option label="四维看看" value="4dkk"></el-option>
           </el-select>
         </div>
-        <div class="btn">搜 索</div>
+        <div class="btn" @click="search">搜 索</div>
       </div>
       <!-- 表格 -->
       <div class="table">
         <div class="title">
           <div class="txt">数据列表</div>
-          <div class="addBtn" @click="$router.push('/layout/tab1_add')">+ 新增</div>
+          <div class="addBtn" @click="$router.push('/layout/tab1_add')">
+            + 新增
+          </div>
         </div>
         <el-table
           :header-cell-style="{ background: '#d8dadc' }"
@@ -34,29 +42,42 @@
           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="name3" label="保密级别"> </el-table-column>
-          <el-table-column label="操作">
-            <template>
-              <el-button type="text" @click="look">查 看</el-button>
+          <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>
+          <el-table-column prop="application" label="展示形式" width="90">
+          </el-table-column>
+          <el-table-column prop="updateTime" label="项目时间" width="180">
+          </el-table-column>
+          <el-table-column prop="level" label="保密级别" width="90"> </el-table-column>
+          <el-table-column label="操作" width="180">
+            <template #default='{row}'>
+              <el-button type="text" @click="look(row.id)">查 看</el-button>
               <el-button type="text">编 辑</el-button>
-              <el-button type="text">删 除</el-button>
+              <el-button type="text" @click="projecDel(row.id)">删 除</el-button>
             </template>
           </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>
@@ -64,52 +85,91 @@
 </template>
 
 <script>
+import { projectList, getProjectType, projecDel } from '@/apis/tab1'
 export default {
   name: 'tab1',
   data () {
     // 这里存放数据
     return {
+      total: 0,
+      projectType: [],
       form: {
         pageNum: 1,
         pageSize: 10,
-        name: '',
-        fenlei: '',
-        jishu: ''
+        searchKey: '',
+        typeId: null,
+        technology: null
       },
-      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概念
   computed: {},
   // 监控data中的数据变化
-  watch: {
-  },
+  watch: {},
   // 方法集合
   methods: {
+    // 点击删除
+    projecDel (id) {
+      this.$confirm('确定删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          await projecDel(id)
+          this.$message.success('删除成功!')
+          this.projectList(this.form)
+        })
+        .catch(() => {
+          this.$message.info('已取消删除')
+        })
+    },
+    // 点击搜索
+    search () {
+      this.form.pageNum = 1
+      this.projectList(this.form)
+    },
+    // 分页器方法
+    currentChange (val) {
+      // console.log('当前页改变了', val)
+      this.form.pageNum = val
+      this.projectList(this.form)
+    },
+    sizeChange (val) {
+      // console.log('条数改变了', val)
+      this.form.pageNum = 1
+      this.form.pageSize = val
+      this.projectList(this.form)
+    },
     // 点击查看
-    look () {
-      this.$router.push('/layout/tab1_look')
+    look (id) {
+      this.$router.push({
+        path: '/layout/tab1_look',
+        query: { id }
+      })
+    },
+    // 封装获取列表方法
+    async projectList (data) {
+      const res = await projectList(data)
+      this.total = res.data.total
+      this.tableData = res.data.list
+      this.tableData.forEach(v => {
+        v.technology = this.myTechnology(v.technology)
+        v.application = this.myApplication(v.application)
+        v.level = this.myLevel(v.level)
+      })
+      // console.log(999, res)
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  async created () {
+    this.projectList(this.form)
+    // 获取项目类型
+    const res1 = await getProjectType()
+    this.projectType = res1.data
+    this.projectType.unshift({ id: null, name: '全部' })
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -218,7 +278,7 @@ export default {
           border-radius: 12px;
           z-index: 999;
           position: absolute;
-          right: 56px;
+          right: 24px;
           top: 62px;
         }
       }

src/views/tab1/tab1_add.vue

@@ -135,16 +135,15 @@
             <div class="tab_btn" @click="tab2Add" v-else>+ 添加场景</div>
           </div>
         </div>
-
+<!-- ------------------上传附件-------------------- -->
         <div id="tab3" class="conten_box">
           <div class="title" style="margin-bottom: 20px">资料文档</div>
           <el-upload
             class="upload-demo"
             drag
-            :action="baseURL + `/cms/goods/upload/${projectId}`"
+            :action="baseURL + '/cms/doc/upload'"
             :headers="{ token }"
             :on-success="successFujian"
-            :on-remove="handleRemove"
             :show-file-list="true"
             multiple
           >
@@ -156,6 +155,13 @@
               <!-- 只能上传jpg/png文件，且不超过500kb -->
             </div>
           </el-upload>
+            <!-- 上传成功后的数组数据 -->
+            <div class="upFJSucc">
+            <div v-for="(item,index) in fuJianArr" :key="index">
+              <span>{{item.name}}</span>
+              <i class="el-icon-close" @click="delFJ(index)"></i>
+            </div>
+            </div>
         </div>
         <div id="tab4" class="conten_box">
           <div class="title">文物</div>
@@ -290,7 +296,8 @@ import {
   getGoodsType,
   modelSetIndex,
   modelSave,
-  getAntiqueById
+  getAntiqueById,
+  projectAdd
 } from '@/apis/tab1'
 import axios from '@/utils/request'
 export default {
@@ -323,7 +330,6 @@ export default {
       // 点击保存后的文物数组
       saveAntiqueArr: [],
       // 文物弹窗数据↑↑↑↑↑↑↑↑↑↑↑↑
-      projectId: 'SWKK',
       // 服务器前缀地址
       baseURL: '',
       token: '',
@@ -354,7 +360,9 @@ export default {
         name: { required: true, message: '请输入项目名称', trigger: 'blur' }
       },
       // 外层的文物数据
-      moveShowIdn: null
+      moveShowIdn: null,
+      // 上传附件成功的数组
+      fuJianArr: []
     }
   },
   // 监听属性 类似于data概念
@@ -453,13 +461,18 @@ export default {
         })
     },
     // 保存
-    outBtnOk () {
+    async outBtnOk () {
       if (this.ruleForm.name.trim() === '') { return this.$message.warning('项目名称不能为空') }
       // 遍历文物数组，得到文物id
       const temp = []
       this.saveAntiqueArr.forEach((v) => {
         temp.push(v.id)
       })
+      // 遍历附件数组，得到附件id
+      const temp1 = []
+      this.fuJianArr.forEach(v => {
+        temp1.push(v.id)
+      })
       // 处理项目网址数据
       const websites = {}
       this.tab1Arr.forEach((v) => {
@@ -470,19 +483,37 @@ export default {
       this.tab2Arr.forEach((v) => {
         scenes[v.name] = v.href
       })
-      console.log(999, {
-        ...this.ruleForm,
-        goodsIds: temp.join(','),
-        websites,
-        scenes
-      })
+      const obj = { ...this.ruleForm, goodsIds: temp.join(','), docIds: temp1.join(','), websites, scenes }
+      // console.log(999, obj)
+      const res = await projectAdd(obj)
+      if (res.code === 0) {
+        this.$router.push('/layout/tab1')
+        this.$message.success('新增项目成功')
+      }
+      // console.log(999, res)
     },
     // --------------附件--------------
+
     successFujian (file) {
-      console.log('上传附件成功', file)
+      // console.log('上传附件成功', file)
+      this.fuJianArr.push({ name: file.data.name, id: file.data.id })
+      this.$message.success('上传成功')
     },
-    handleRemove (file) {
-      console.log('删除附件成功', file)
+    // 删除附件
+    delFJ (index) {
+      // 点击删除
+      this.$confirm('确定删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.fuJianArr.splice(index, 1)
+          this.$message.success('删除成功!')
+        })
+        .catch(() => {
+          this.$message.info('已取消删除')
+        })
     },
     // ----------------文物弹窗里面---------------
     beforethumbUpload (file) {
@@ -631,6 +662,18 @@ export default {
 }
 </script>
 <style lang='less' scoped>
+/deep/.el-upload-list__item .el-progress{
+  top: 0;
+}
+/deep/.el-upload-list__item-name{
+  display: none;
+}
+/deep/.el-upload-list__item-status-label{
+  display: none !important;
+}
+/deep/.el-upload-list{
+  width: 360px;
+}
 .lookImg {
   padding-top: 15px;
   display: flex;
@@ -896,6 +939,22 @@ export default {
           justify-content: center;
         }
       }
+      .upFJSucc{
+        margin-top: 30px;
+          width: 360px;
+        &>div {
+          margin-top: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        i {
+          cursor: pointer;
+          &:hover{
+            color:#dc3545;
+          }
+        }
+        }
+      }
     }
     .tabAll {
       max-height: 600px;

src/views/tab1/tab1_look.vue

@@ -17,39 +17,36 @@
       <!-- 项目详情 -->
       <div id="tab0" class="conten_box">
         <div class="title">项目详情</div>
-        <div class="row"><div>项目名称：</div>123456</div>
-        <div class="row"><div>项目时间：</div>123456</div>
-        <div class="row"><div>项目分类：</div>123456</div>
-        <div class="row"><div>展示形式：</div>123456</div>
-        <div class="row"><div>应用技术：</div>123456</div>
-        <div class="row"><div>保密级别：</div>123456</div>
-        <div class="row"><div>项目合作方：</div>123456</div>
+        <div class="row"><div>项目名称：</div>{{tab0Data.name}}</div>
+        <div class="row"><div>项目时间：</div>{{tab0Data.age?tab0Data.age:'-'}}</div>
+        <div class="row"><div>项目分类：</div>{{tab0Data.projectTypeName}}</div>
+        <div class="row"><div>展示形式：</div>{{tab0Data.application}}</div>
+        <div class="row"><div>应用技术：</div>{{tab0Data.technology}}</div>
+        <div class="row"><div>保密级别：</div>{{tab0Data.level}}</div>
+        <div class="row"><div>项目合作方：</div>{{tab0Data.cooperation?tab0Data.cooperation:'-'}}</div>
       </div>
       <div id="tab1" class="conten_box">
         <div class="title">项目网址</div>
-        <div class="row"><div>门户网站：</div><a href="http://www.hao123.com" target="_blank">www.hao123.com</a></div>
-        <div class="row"><div>门户网站111111111111：</div><a href="www.hao123.com">www.hao123.com</a></div>
+        <div class="row" v-for="item in tab1Data" :key="item.id"><div>{{item.name}}：</div><a :href="item.url" target="_blank">{{item.url}}</a></div>
       </div>
       <div id="tab2" class="conten_box">
         <div class="title">三维场景</div>
-        <div class="row"><div>陈云临展：</div><a href="www.hao123.com">www.hao123.com</a></div>
-        <div class="row"><div>汉唐文物临展：</div><a href="www.hao123.com">www.hao123.com</a></div>
-        <div class="row"><div>邬达克临展：</div><a href="www.hao123.com">www.hao123.com</a></div>
+        <div class="row" v-for="item in tab2Data" :key="item.id"><div>{{item.name}}：</div><a :href="item.url" target="_blank">{{item.url}}</a></div>
       </div>
       <div id="tab3" class="conten_box">
         <div class="title">资料文档</div>
         <div class="imgBox">
-          <div><img src="@/assets/img/wd1.png" alt="">12345678911111111</div>
-          <div><img src="@/assets/img/wd2.png" alt="">123456789</div>
-          <div><img src="@/assets/img/wd3.png" alt="">123456789</div>
-          <div><img src="@/assets/img/wd4.png" alt="">123456789</div>
+          <div class="wendang" v-for="item in tab3Data" :key="item.id">
+            <a :href="baseURL+item.filePath" target="_blank" download>{{item.name}}</a>
+            </div>
         </div>
       </div>
       <div id="tab4" class="conten_box">
         <div class="title">文物</div>
         <div class="imgBox">
-          <div><img src="@/assets/img/logo22.png" alt="">1234567891111111111111</div>
-          <div><img src="@/assets/img/logo22.png" alt="">12345678</div>
+          <a :href="item.url" target="_blank" v-for="item in tab4Data" :key="item.id">
+          <img :src="baseURL+item.thumb" alt="">{{item.name}}
+          </a>
         </div>
       </div>
       </div>
@@ -63,9 +60,8 @@
 </template>
 
 <script>
-// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-// 例如：import 《组件名称》 from '《组件路径》';
-
+import axios from '@/utils/request'
+import { getDetail } from '@/apis/tab1'
 export default {
   // import引入的组件需要注入到对象中才能使用
   name: 'tab1Look',
@@ -73,6 +69,13 @@ export default {
   data () {
     // 这里存放数据
     return {
+      baseURL: '',
+      tab0Data: {},
+      tab1Data: [],
+      tab2Data: [],
+      tab3Data: [],
+      tab4Data: [],
+      myId: null, // 项目总id
       topTabInd: 0,
       topTab: [
         { name: '项目详情', id: '#tab0' },
@@ -94,7 +97,22 @@ export default {
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  async created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    // 拿到路由跳转传过来的数据
+    this.myId = this.$route.query.id
+    const res = await getDetail(this.myId)
+    console.log(999, res)
+    this.tab0Data = res.data.entity
+    this.tab0Data.technology = this.myTechnology(this.tab0Data.technology)
+    this.tab0Data.application = this.myApplication(this.tab0Data.application)
+    this.tab0Data.level = this.myLevel(this.tab0Data.level)
+    this.tab1Data = res.data.website
+    this.tab2Data = res.data.scene
+    this.tab3Data = res.data.doc
+    this.tab4Data = res.data.goods
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -202,12 +220,26 @@ export default {
           height: 75px;
           object-fit: contain;
         }
+        .wendang{
+          text-align: left;
+          margin-top: 10px;
+          width: 100%;
+          a:hover{
+            color:#DC3545;
+          }
+        }
       }
     }
     #tab4{
       .imgBox{
-        &>div {
+        &>a {
+        word-wrap: break-word;
+        text-align: center;
+        display: block;
+        cursor: pointer;
         width: 124px;
+        margin-top: 10px;
+        margin-right: 20px;
         }
       img {
         width: 124px;