修改项目资料页面样式

src/apis/tab4.js

@@ -7,3 +7,40 @@ export const updatePwd = (data) => {
     data
   })
 }
+// 获取用户列表
+export const getUserList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/sys/user/list',
+    data
+  })
+}
+// 新增、修改用户
+export const userSave = (data) => {
+  return axios({
+    method: 'post',
+    url: '/sys/user/save',
+    data
+  })
+}
+// 根据id获取用户详情
+export const getUserDetailById = (id) => {
+  return axios({
+    url: `/sys/user/detail/${id}`
+  })
+}
+// 根据id删除用户
+export const delUserById = (id) => {
+  return axios({
+    url: `/sys/user/removes/${id}`
+  })
+}
+
+// 获取日志列表
+export const getLogList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/sys/log/list',
+    data
+  })
+}

src/views/tab1/index.vue

@@ -31,7 +31,7 @@
       <!-- 表格 -->
       <div class="table">
         <div class="title">
-          <div class="txt">数据列表</div>
+          <div class="txt">项目列表</div>
           <div class="addBtn" @click="$router.push('/layout/tab1_add')">
             + 新增
           </div>

src/views/tab1/tab1_add.vue

@@ -134,7 +134,7 @@
             <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
@@ -154,13 +154,13 @@
               <!-- 只能上传jpg/png文件，且不超过500kb -->
             </div>
           </el-upload>
-            <!-- 上传成功后的数组数据 -->
-            <div class="upFJSucc">
-            <div v-for="(item,index) in fuJianArr" :key="index">
-              <span>{{item.name}}</span>
+          <!-- 上传成功后的数组数据 -->
+          <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>
         <div id="tab4" class="conten_box">
           <div class="title">文物</div>
@@ -321,7 +321,10 @@ export default {
         thumb: '' // 封面
       },
       addRules: {
-        name: { required: true, message: '不能为空', trigger: 'blur' },
+        name: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { max: 50, message: '不能超过50个字', trigger: 'blur' }
+        ],
         url: { required: true, message: '不能为空', trigger: 'blur' }
       },
       // 文物类别数组
@@ -388,7 +391,9 @@ export default {
       if (
         this.tab1Arr[this.tab1Arr.length - 1].name.trim() === '' ||
         this.tab1Arr[this.tab1Arr.length - 1].href.trim() === ''
-      ) { return this.$message.warning('网址名称或链接不能为空') }
+      ) {
+        return this.$message.warning('网址名称或链接不能为空')
+      }
       this.tab1Arr.push({ name: '', href: '' })
     },
     tab1Del (index) {
@@ -410,7 +415,9 @@ export default {
       if (
         this.tab2Arr[this.tab2Arr.length - 1].name.trim() === '' ||
         this.tab2Arr[this.tab2Arr.length - 1].href.trim() === ''
-      ) { return this.$message.warning('场景名称或链接不能为空') }
+      ) {
+        return this.$message.warning('场景名称或链接不能为空')
+      }
       this.tab2Arr.push({ name: '', href: '' })
     },
     tab2Del (index) {
@@ -461,7 +468,9 @@ export default {
     },
     // 保存
     async outBtnOk () {
-      if (this.ruleForm.name.trim() === '') { return this.$message.warning('项目名称不能为空') }
+      if (this.ruleForm.name.trim() === '') {
+        return this.$message.warning('项目名称不能为空')
+      }
       // 遍历文物数组，得到文物id
       const temp = []
       this.saveAntiqueArr.forEach((v) => {
@@ -469,7 +478,7 @@ export default {
       })
       // 遍历附件数组，得到附件id
       const temp1 = []
-      this.fuJianArr.forEach(v => {
+      this.fuJianArr.forEach((v) => {
         temp1.push(v.id)
       })
       // 处理项目网址数据
@@ -482,7 +491,13 @@ export default {
       this.tab2Arr.forEach((v) => {
         scenes[v.name] = v.href
       })
-      const obj = { ...this.ruleForm, goodsIds: temp.join(','), docIds: temp1.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) {
@@ -498,7 +513,7 @@ export default {
       if (file.code === 0) {
         this.fuJianArr.push({ name: file.data.name, id: file.data.id })
         this.$message.success('上传成功')
-      } else if (file.code === -1) this.$message.warning('上传失败，不支持的文件格式')
+      } else if (file.code === -1) { this.$message.warning('上传失败，不支持的文件格式') }
     },
     // 删除附件
     delFJ (index) {
@@ -595,6 +610,10 @@ export default {
       if (this.addForm.name.trim() === '') {
         return this.$message.warning('文物名称不能为空')
       }
+      if (this.addForm.name.length > 50) {
+        return this.$message.warning('文物名称不能超过50个字')
+      }
+
       if (this.addForm.url.trim() === '') {
         return this.$message.warning('文物链接不能为空')
       }
@@ -629,6 +648,9 @@ export default {
     },
     // 点击弹窗里面的取消
     addBtnX () {
+      // 清空情况表单校验
+      this.$refs.addForm.resetFields()
+
       this.addForm = {
         fileIds: '', // 图片id, 多个以逗号隔开
         name: '', // 名称
@@ -663,16 +685,16 @@ export default {
 }
 </script>
 <style lang='less' scoped>
-/deep/.el-upload-list__item .el-progress{
+/deep/.el-upload-list__item .el-progress {
   top: 0;
 }
-/deep/.el-upload-list__item-name{
+/deep/.el-upload-list__item-name {
   display: none;
 }
-/deep/.el-upload-list__item-status-label{
+/deep/.el-upload-list__item-status-label {
   display: none !important;
 }
-/deep/.el-upload-list{
+/deep/.el-upload-list {
   width: 360px;
 }
 .lookImg {
@@ -899,14 +921,14 @@ export default {
           text-align: center;
           width: 120px;
           margin: 20px 0 0 10px;
-          border: 1px solid #ccc;
-          box-shadow: 1px 1px 3px 0px;
+          // border: 1px solid #ccc;
+          // box-shadow: 1px 1px 3px 0px;
           .moveShow {
             position: absolute;
             left: 0;
             top: 0;
-            width: 100%;
-            height: 100%;
+            width: 120px;
+            height: 120px;
             background-color: rgba(0, 0, 0, 0.7);
             display: flex;
             justify-content: space-around;
@@ -922,14 +944,20 @@ export default {
           }
         }
         img {
-          padding-top: 8px;
-          width: 100px;
-          height: 75px;
+          border: 1px solid #ccc;
+          box-shadow: 1px 1px 3px 0px;
+          padding: 5px;
+          width: 120px;
+          height: 120px;
           display: block;
           margin: 0 auto;
+          margin-bottom: 10px;
           object-fit: contain;
         }
         .uploaImg {
+          width: 120px;
+          height: 120px;
+
           cursor: pointer;
           color: #ccc;
           border: 1px solid #ccc;
@@ -940,21 +968,21 @@ export default {
           justify-content: center;
         }
       }
-      .upFJSucc{
+      .upFJSucc {
         margin-top: 30px;
-          width: 360px;
-        &>div {
+        width: 360px;
+        & > div {
           margin-top: 8px;
           display: flex;
           align-items: center;
           justify-content: space-between;
-        i {
-          cursor: pointer;
-          &:hover{
-            color:#dc3545;
+          i {
+            cursor: pointer;
+            &:hover {
+              color: #dc3545;
+            }
           }
         }
-        }
       }
     }
     .tabAll {

src/views/tab1/tab1_edit.vue

@@ -355,7 +355,7 @@ export default {
         thumb: '' // 封面
       },
       addRules: {
-        name: { required: true, message: '不能为空', trigger: 'blur' },
+        name: [{ required: true, message: '不能为空', trigger: 'blur' }, { max: 50, message: '不能超过50个字', trigger: 'blur' }],
         url: { required: true, message: '不能为空', trigger: 'blur' }
       }
     }
@@ -445,6 +445,9 @@ export default {
       if (this.addForm.name.trim() === '') {
         return this.$message.warning('文物名称不能为空')
       }
+      if (this.addForm.name.length > 50) {
+        return this.$message.warning('文物名称不能超过50个字')
+      }
       if (this.addForm.url.trim() === '') {
         return this.$message.warning('文物链接不能为空')
       }
@@ -479,6 +482,9 @@ export default {
     },
     // 点击弹窗里面的取消
     addBtnX () {
+      // 清空情况表单校验
+      this.$refs.addForm.resetFields()
+
       this.addForm = {
         fileIds: '', // 图片id, 多个以逗号隔开
         name: '', // 名称
@@ -1002,14 +1008,14 @@ export default {
           text-align: center;
           width: 120px;
           margin: 20px 0 0 10px;
-          border: 1px solid #ccc;
-          box-shadow: 1px 1px 3px 0px;
+          // border: 1px solid #ccc;
+          // box-shadow: 1px 1px 3px 0px;
           .moveShow {
             position: absolute;
             left: 0;
             top: 0;
-            width: 100%;
-            height: 100%;
+            width: 120px;
+            height: 120px;
             background-color: rgba(0, 0, 0, 0.7);
             display: flex;
             justify-content: space-around;
@@ -1025,18 +1031,23 @@ export default {
           }
         }
         img {
-          padding-top: 8px;
-          width: 100px;
-          height: 75px;
+          border: 1px solid #ccc;
+          box-shadow: 1px 1px 3px 0px;
+          padding: 5px;
+          width: 120px;
+          height: 120px;
           display: block;
           margin: 0 auto;
+          margin-bottom: 10px;
           object-fit: contain;
         }
         .uploaImg {
+          width: 120px;
+          height: 120px;
           cursor: pointer;
           color: #ccc;
           border: 1px solid #ccc;
-          font-size: 80px;
+          font-size: 60px;
           font-weight: 700;
           display: flex;
           align-items: center;

src/views/tab1/tab1_look.vue

@@ -244,11 +244,9 @@ export default {
         text-align: center;
         display: block;
         cursor: pointer;
-        width: 124px;
+        width: 120px;
         margin-top: 10px;
         margin-right: 20px;
-        border: 1px solid #ccc;
-        box-shadow: 1px 1px 3px 0px;
         padding: 15px 0;
         transition: all .3s;
             &:hover {
@@ -256,8 +254,12 @@ export default {
         }
         }
       img {
-        width: 100px;
-        height: 75px;
+        border: 1px solid #ccc;
+        box-shadow: 1px 1px 3px 0px;
+        padding: 5px;
+        width: 120px;
+        height: 120px;
+        margin-bottom:10px;
         object-fit: contain;
       }
       }

src/views/tab2/index.vue

@@ -33,7 +33,7 @@
       <!-- 表格 -->
       <div class="table">
         <div class="title">
-          <div class="txt">数据列表</div>
+          <div class="txt">文物列表</div>
         </div>
         <el-table
           :header-cell-style="{ background: '#d8dadc' }"
@@ -134,7 +134,6 @@ export default {
       this.tableData.forEach(v => {
         v.level = this.myLevel(v.level)
       })
-
       this.total = res.data.total
     },
     // 分页器方法

src/views/tab3/index.vue

@@ -24,7 +24,7 @@
       <!-- 表格 -->
       <div class="table">
         <div class="title">
-          <div class="txt">数据列表</div>
+          <div class="txt">场景列表</div>
         </div>
         <el-table
           :header-cell-style="{ background: '#d8dadc' }"

src/views/tab4/index.vue

@@ -8,15 +8,15 @@
         <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>
         </div>
-        <div class="btn">搜 索</div>
+        <div class="btn" @click="getUserList(form)">搜 索</div>
       </div>
       <!-- 表格 -->
       <div class="table">
         <div class="title">
-          <div class="txt">数据列表</div>
-          <div class="addBtn">+ 新增</div>
+          <div class="txt">用户列表</div>
+          <div class="addBtn" @click="addUser">+ 新增</div>
         </div>
         <el-table
           :header-cell-style="{ background: '#d8dadc' }"
@@ -29,59 +29,52 @@
               {{ 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="realName" label="用户名"></el-table-column>
+          <el-table-column prop="roleName" label="用户角色"></el-table-column>
+          <el-table-column prop="dept" label="部门"> </el-table-column>
+          <el-table-column prop="updateTime" label="创建时间"> </el-table-column>
+          <el-table-column prop="remark" label="备注"> </el-table-column>
           <el-table-column label="操作">
-            <template>
-              <el-button type="text">编 辑</el-button>
-              <el-button type="text">删 除</el-button>
+            <template #default='{row}'>
+              <el-button type="text" @click="editUser(row.id)">编 辑</el-button>
+              <el-button type="text" @click="delUserById(row.id)" v-if="row.roleId!==1">删 除</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>
+    <!-- 点击新增的弹窗 -->
+    <Tab4Add :isShow.sync="isShow" @update='getUserList(form)' ref="myUser"/>
   </div>
 </template>
 
 <script>
+import Tab4Add from './tab4_add.vue'
+import { getUserList, delUserById } from '@/apis/tab4'
 export default {
   name: 'tab3',
+  components: { Tab4Add },
   data () {
     // 这里存放数据
     return {
+      isShow: false,
+      total: 0,
       form: {
         pageNum: 1,
         pageSize: 10,
-        name: '',
-        fenlei: '',
-        jishu: ''
+        searchKey: ''
       },
-      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概念
@@ -89,9 +82,60 @@ export default {
   // 监控data中的数据变化
   watch: {},
   // 方法集合
-  methods: {},
+  methods: {
+    // 点击删除
+    delUserById (id) {
+      this.$confirm('确定删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          const res = await delUserById(id)
+          if (res.code === 0) {
+            this.getUserList(this.form)
+            this.$message.success('删除成功!')
+          }
+          console.log(999, res)
+        })
+        .catch(() => {
+          this.$message.info('已取消删除!')
+        })
+    },
+    // 点击编辑
+    editUser (id) {
+      this.$refs.myUser.getUserDetailById(id)
+      this.isShow = true
+    },
+    // 点击新增
+    addUser () {
+      this.isShow = true
+    },
+    // 封装获取文物列表方法
+    async getUserList (data) {
+      const res = await getUserList(data)
+      this.tableData = res.data.list
+
+      this.total = res.data.total
+    },
+    // 分页器方法
+    currentChange (val) {
+      // console.log('当前页改变了', val)
+      this.form.pageNum = val
+      this.getUserList(this.form)
+    },
+    sizeChange (val) {
+      // console.log('条数改变了', val)
+      this.form.pageNum = 1
+      this.form.pageSize = val
+      this.getUserList(this.form)
+    }
+
+  },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created () {
+    this.getUserList(this.form)
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前

src/views/tab4/tab4_add.vue

@@ -0,0 +1,141 @@
+<!--  -->
+<template>
+  <el-dialog :title="ruleForm.id?'编辑用户':'新增用户'" :visible="isShow" @close='btnX()'>
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="100px"
+      class="demo-ruleForm"
+    >
+      <el-form-item label="账号：" prop="userName">
+        <el-input
+          :disabled='!!ruleForm.id'
+          style="width:300px"
+          v-model="ruleForm.userName"
+          placeholder="请输入账号"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="用户名：" prop="realName">
+        <el-input
+          style="width:300px"
+          v-model="ruleForm.realName"
+          placeholder="请输入用户名"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="用户角色：" prop="roleId" v-if="0">
+        <el-select v-model="ruleForm.roleId" placeholder="请选择用户角色">
+          <el-option label="普通用户" :value="2"></el-option>
+          <el-option label="超级管理员" :value="1"></el-option>
+        </el-select>
+      </el-form-item>
+            <el-form-item label="部门：" prop="dept">
+        <el-input
+          style="width:300px"
+          v-model="ruleForm.dept"
+          placeholder="请输入部门"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="备注：" prop="remark">
+        <el-input
+          style="width:300px"
+          v-model="ruleForm.remark"
+          placeholder="请输入备注"
+        ></el-input>
+      </el-form-item>
+      <span class="hint">*默认密码123456</span>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="btnX">取 消</el-button>
+      <el-button type="primary" @click="btnOk">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { userSave, getUserDetailById } from '@/apis/tab4'
+export default {
+  name: 'tab4_add',
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      ruleForm: {
+        userName: '',
+        realName: '',
+        roleId: 2,
+        dept: '',
+        remark: ''
+      },
+      rules: {
+        userName: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        realName: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        dept: [{ max: 10, message: '不能超过10个字', trigger: 'blur' }],
+        remark: [{ max: 30, message: '不能超过30个字', trigger: 'blur' }]
+      }
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    async btnX () {
+      this.ruleForm = {
+        userName: '',
+        realName: '',
+        roleId: 2,
+        dept: '',
+        remark: ''
+      }
+      await this.$refs.ruleForm.resetFields()
+      this.$emit('update:isShow', false)
+    },
+    async btnOk () {
+      try {
+        await this.$refs.ruleForm.validate()
+        const res = await userSave(this.ruleForm)
+        if (res.code === 0) {
+          this.$message.success('新增用户成功')
+          // 通知父组件更新
+          this.$emit('update')
+          this.btnX()
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 获取用户信息----让父组件调用
+    async getUserDetailById (id) {
+      const res = await getUserDetailById(id)
+      this.ruleForm = res.data
+      // console.log(999, res)
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+.hint{
+  color: red;
+  margin-left: 100px;
+}
+</style>

src/views/tab5/index.vue

@@ -18,14 +18,14 @@
           </el-date-picker>
 
           <span>输入搜索：</span>
-          <el-input v-model="form.name" placeholder="请输入"></el-input>
+          <el-input v-model="form.searchKey" placeholder="请输入"></el-input>
         </div>
         <div class="btn">搜 索</div>
       </div>
       <!-- 表格 -->
       <div class="table">
         <div class="title">
-          <div class="txt">数据列表</div>
+          <div class="txt">日志列表</div>
         </div>
         <el-table
           :header-cell-style="{ background: '#d8dadc' }"
@@ -47,7 +47,7 @@
       </div>
       <!-- 分页 -->
       <div class="paging">
-        <el-pagination layout="prev, pager, next,jumper" :total="50">
+        <el-pagination layout="prev, pager, next,sizes,jumper" :total="total">
         </el-pagination>
       </div>
     </div>
@@ -55,39 +55,22 @@
 </template>
 
 <script>
+import { getLogList } from '@/apis/tab4'
 export default {
   name: 'tab3',
   data () {
     // 这里存放数据
     return {
+      total: 0,
       time: '',
       form: {
         startTime: '',
         endTime: '',
         pageNum: 1,
         pageSize: 10,
-        name: '',
-        fenlei: '',
-        jishu: ''
+        searchKey: ''
       },
-      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概念
@@ -100,6 +83,12 @@ export default {
   },
   // 方法集合
   methods: {
+    // 封装获取列表方法
+    async getLogList (data) {
+      const res = await getLogList(data)
+      this.tableData = res.data.list
+      this.total = res.data.total
+    },
     // 时间处理----------------
     handleSelect (e) {
       const date = []
@@ -132,7 +121,9 @@ export default {
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created () {
+    this.getLogList(this.form)
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前