|
@@ -1,108 +1,18 @@
|
|
|
<template>
|
|
|
<div class="tab2">
|
|
|
- <div class="insideTop">
|
|
|
- 文物管理
|
|
|
- <div class="add">
|
|
|
- <el-button type="primary" @click="addGood">新增</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="insideTop">建筑可对话-发布</div>
|
|
|
<div class="obstruct"></div>
|
|
|
<div class="conten">
|
|
|
- <div class="con_left" v-show="0">
|
|
|
- <div class="cutJT">
|
|
|
- <i class="el-icon-menu"></i>
|
|
|
- 典藏管理
|
|
|
- </div>
|
|
|
- <ul>
|
|
|
- <li
|
|
|
- v-for="item in conLeftArr"
|
|
|
- :key="item.id"
|
|
|
- :class="{ active: formData.type === item.type }"
|
|
|
- @click="cutLeft(item.type)"
|
|
|
- >
|
|
|
- {{ item.name }}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
<!-- 右侧主要内容 -->
|
|
|
<div class="con_right" v-loading="loading">
|
|
|
- <div class="search" @keyup.enter="searchBtn">
|
|
|
- <span>  名称:</span>
|
|
|
- <el-input
|
|
|
- maxlength="25"
|
|
|
- show-word-limit
|
|
|
- v-model="formData.searchKey"
|
|
|
- placeholder="请输入关键字"
|
|
|
- style="width: 240px"
|
|
|
- ></el-input>
|
|
|
- <span class="search_k">  类别:</span>
|
|
|
- <el-select v-model="formData.dictTextureId" placeholder="请选择类别">
|
|
|
- <el-option
|
|
|
- v-for="i in dictTextureArr"
|
|
|
- :key="i.value"
|
|
|
- :label="i.label"
|
|
|
- :value="i.value"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <span class="search_k">年代:</span>
|
|
|
- <el-select v-model="formData.dictAgeId" placeholder="请选择类别">
|
|
|
- <el-option
|
|
|
- v-for="i in dictAgeArr"
|
|
|
- :key="i.value"
|
|
|
- :label="i.label"
|
|
|
- :value="i.value"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <span class="search_k">级别:</span>
|
|
|
- <el-select v-model="formData.dictLevelId" placeholder="请选择类别">
|
|
|
- <el-option
|
|
|
- v-for="i in dictLevelArr"
|
|
|
- :key="i.value"
|
|
|
- :label="i.label"
|
|
|
- :value="i.value"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
+ <div class="search">
|
|
|
+ <span class="search_k">审核状态:</span>
|
|
|
+ <el-select v-model="formData.dictTextureId" placeholder="请选择">
|
|
|
+ <el-option label="通过" :value="1"> </el-option>
|
|
|
+ <el-option label="不通过" :value="2"> </el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
- <div class="search" @keyup.enter="searchBtn">
|
|
|
- <span>总登记号:</span>
|
|
|
- <el-input
|
|
|
- maxlength="25"
|
|
|
- show-word-limit
|
|
|
- v-model="formData.registerNum"
|
|
|
- placeholder="请输入关键字"
|
|
|
- style="width: 240px"
|
|
|
- ></el-input>
|
|
|
-
|
|
|
- <span class="search_k">创建时间:</span>
|
|
|
- <el-date-picker
|
|
|
- style="width: 257px; padding-right: 0px"
|
|
|
- v-model="time"
|
|
|
- type="daterange"
|
|
|
- range-separator="-"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- >
|
|
|
- </el-date-picker>
|
|
|
|
|
|
- <!-- 右侧按钮 -->
|
|
|
- <div class="search_btn">
|
|
|
- <el-button type="primary" @click="searchBtn">查 询</el-button>
|
|
|
- <el-button @click="resetBtn">重 置</el-button>
|
|
|
- <download-excel
|
|
|
- :before-generate="derive"
|
|
|
- class="export-excel-wrapper"
|
|
|
- :data="json_data"
|
|
|
- :fields="json_fields"
|
|
|
- :name="`文物信息清单${nowTime}.xls`"
|
|
|
- >
|
|
|
- <!-- 上面可以自定义自己的样式,还可以引用其他组件button -->
|
|
|
- <el-button>批量导出</el-button>
|
|
|
- </download-excel>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
<!-- 表格 -->
|
|
|
<div class="table">
|
|
|
<el-table :data="tableData" style="width: 100%">
|
|
@@ -149,21 +59,7 @@
|
|
|
<span v-else>(空)</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="说明">
|
|
|
- <template #default="{ row }">
|
|
|
- <span
|
|
|
- style="cursor: pointer"
|
|
|
- :title="handTxt(row.description)"
|
|
|
- v-if="handTxt(row.description)"
|
|
|
- >{{
|
|
|
- handTxt(row.description).length > 10
|
|
|
- ? handTxt(row.description).substring(0, 10) + "..."
|
|
|
- : handTxt(row.description)
|
|
|
- }}</span
|
|
|
- >
|
|
|
- <span v-else>(空)</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+
|
|
|
<el-table-column label="图片" width="120">
|
|
|
<template #default="{ row }">
|
|
|
<img
|
|
@@ -177,15 +73,7 @@
|
|
|
<el-table-column prop="day" label="日期"> </el-table-column>
|
|
|
<el-table-column label="操作">
|
|
|
<template #default="{ row }">
|
|
|
- <el-button
|
|
|
- type="text"
|
|
|
- @click="lookQrCode(row.qrPath, row.fileName)"
|
|
|
- >二维码</el-button
|
|
|
- >
|
|
|
-
|
|
|
- <el-button type="text" @click="editGood(row.id)"
|
|
|
- >编辑</el-button
|
|
|
- >
|
|
|
+ <el-button type="text">查看</el-button>
|
|
|
<el-button
|
|
|
type="text"
|
|
|
style="color: #d9001b"
|
|
@@ -212,29 +100,12 @@
|
|
|
>
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
- <!-- 查看二维码的盒子 -->
|
|
|
- <div class="qrCodeBox" v-show="qrCodeSrc">
|
|
|
- <!-- 关闭 -->
|
|
|
- <div
|
|
|
- class="closeQrCode el-icon-circle-close"
|
|
|
- @click="qrCodeSrc = ''"
|
|
|
- ></div>
|
|
|
- <img v-if="qrCodeSrc" :src="baseURL + qrCodeSrc" alt="" />
|
|
|
- <!-- 下载二维码 -->
|
|
|
- <a
|
|
|
- target="blank"
|
|
|
- :href="baseURL + qrCodeSrc"
|
|
|
- :download="qrName"
|
|
|
- class="qrCodeDown"
|
|
|
- >保存二维码</a
|
|
|
- >
|
|
|
- </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import axios from '@/utils/request'
|
|
|
-import { goodsList, goodsRemove, goodsDisplay, dictGetTree } from '@/apis/tab2'
|
|
|
+import { goodsList, goodsRemove } from '@/apis/tab2'
|
|
|
import dayjs from 'dayjs'
|
|
|
import relativeTime from 'dayjs/plugin/relativeTime'
|
|
|
import 'dayjs/locale/zh-cn'
|
|
@@ -247,140 +118,26 @@ export default {
|
|
|
// 这里存放数据
|
|
|
return {
|
|
|
loading: false,
|
|
|
- nowTime: '',
|
|
|
- // 导出表格的数据
|
|
|
- json_fields: {
|
|
|
- 名称: 'name', // 常规字段
|
|
|
- 总登记号: 'registerNum', // 支持嵌套属性
|
|
|
- 类别: 'dictTextureName',
|
|
|
- 年代: 'dictAgeName',
|
|
|
- 级别: 'dictLevelName',
|
|
|
- 长: 'sizeLength',
|
|
|
- 宽: 'sizeWidth',
|
|
|
- 高: 'sizeHeight',
|
|
|
- 说明: 'description'
|
|
|
- },
|
|
|
- json_data: [],
|
|
|
- json_meta: [
|
|
|
- [
|
|
|
- {
|
|
|
- ' key ': ' charset ',
|
|
|
- ' value ': ' utf- 8 '
|
|
|
- }
|
|
|
- ]
|
|
|
- ],
|
|
|
|
|
|
baseURL: '',
|
|
|
total: 0,
|
|
|
- time: '',
|
|
|
- conLeftArr: [
|
|
|
- { name: '精品图片', type: 'img' },
|
|
|
- { name: '三维模型', type: 'model' }
|
|
|
- ],
|
|
|
+
|
|
|
formData: {
|
|
|
startTime: '',
|
|
|
endTime: '',
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
- searchKey: '',
|
|
|
- registerNum: '',
|
|
|
- dictTextureId: '',
|
|
|
- dictLevelId: '',
|
|
|
- dictAgeId: '',
|
|
|
- type: 'model'
|
|
|
+ dictTextureId: ''
|
|
|
},
|
|
|
- tableData: [],
|
|
|
- dictLevelArr: [],
|
|
|
- dictTextureArr: [],
|
|
|
- dictAgeArr: [],
|
|
|
- // 二维码查看
|
|
|
- qrCodeSrc: '',
|
|
|
- qrName: ''
|
|
|
+ tableData: []
|
|
|
}
|
|
|
},
|
|
|
// 监听属性 类似于data概念
|
|
|
computed: {},
|
|
|
// 监控data中的数据变化
|
|
|
- watch: {
|
|
|
- time (val) {
|
|
|
- this.handleSelect(val)
|
|
|
- }
|
|
|
- },
|
|
|
+ watch: {},
|
|
|
// 方法集合
|
|
|
methods: {
|
|
|
- // 点击二维码
|
|
|
- lookQrCode (url, name) {
|
|
|
- this.qrCodeSrc = url
|
|
|
- this.qrName = name.split('.')[0]
|
|
|
- },
|
|
|
-
|
|
|
- // 处理说明的文本
|
|
|
- handTxt (val) {
|
|
|
- let temp = val.replaceAll(' ', ' ')
|
|
|
- temp = temp.replaceAll('<br/>', '/')
|
|
|
- return temp
|
|
|
- },
|
|
|
- // 点击导出
|
|
|
- async derive () {
|
|
|
- this.searchBtn()
|
|
|
- this.json_data = []
|
|
|
- this.loading = true
|
|
|
- this.nowTime = dayjs().format('YYYYMMDD')
|
|
|
- // 封装获取列表的函数
|
|
|
- const res = await goodsList({
|
|
|
- ...this.formData,
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 9999
|
|
|
- })
|
|
|
- if (res.code === 0) {
|
|
|
- if (res.data.records.length === 0) {
|
|
|
- this.$message.warning('没有符合条件的数据')
|
|
|
- this.loading = false
|
|
|
- return
|
|
|
- }
|
|
|
- this.json_data = res.data.records.map((v) => {
|
|
|
- return {
|
|
|
- name: v.name,
|
|
|
- registerNum: v.registerNum,
|
|
|
- dictTextureName: v.dictTextureName,
|
|
|
- dictAgeName: v.dictAgeName,
|
|
|
- dictLevelName: v.dictLevelName,
|
|
|
- sizeLength: v.sizeLength.replace(',', ''),
|
|
|
- sizeWidth: v.sizeWidth.replace(',', ''),
|
|
|
- sizeHeight: v.sizeHeight.replace(',', ''),
|
|
|
- description: v.description
|
|
|
- }
|
|
|
- })
|
|
|
- this.loading = false
|
|
|
- } else this.$message.warning(res.msg)
|
|
|
- },
|
|
|
- // 点击重置
|
|
|
- resetBtn () {
|
|
|
- this.formData.searchKey = ''
|
|
|
- this.time = ''
|
|
|
- this.formData.pageNum = 1
|
|
|
- this.formData.startTime = this.formData.endTime = ''
|
|
|
- this.formData.registerNum =
|
|
|
- this.formData.dictTextureId =
|
|
|
- this.formData.dictLevelId =
|
|
|
- this.formData.dictAgeId =
|
|
|
- ''
|
|
|
- this.goodsList(this.formData)
|
|
|
- },
|
|
|
- // 点击查询
|
|
|
- searchBtn () {
|
|
|
- this.formData.pageNum = 1
|
|
|
- this.goodsList(this.formData)
|
|
|
- },
|
|
|
- // 点击开关
|
|
|
- async changeSwit (val, id) {
|
|
|
- const res = await goodsDisplay(id, val)
|
|
|
- if (res.code === 0) {
|
|
|
- this.$message.success('操作成功')
|
|
|
- this.goodsList(this.formData)
|
|
|
- } else this.$message.warning(res.msg)
|
|
|
- console.log(998, val, id)
|
|
|
- },
|
|
|
// 分页器方法
|
|
|
currentChange (val) {
|
|
|
// console.log('当前页改变了', val)
|
|
@@ -414,60 +171,7 @@ export default {
|
|
|
this.$message.info('已取消')
|
|
|
})
|
|
|
},
|
|
|
- // 点击编辑文物
|
|
|
- editGood (id) {
|
|
|
- this.$router.push({
|
|
|
- path: '/layout/tab2Add',
|
|
|
- query: { typeU: this.formData.type, id, k: this.formData.pageNum }
|
|
|
- })
|
|
|
- },
|
|
|
- // 点击新增文物
|
|
|
- addGood () {
|
|
|
- this.$router.push({
|
|
|
- path: '/layout/tab2Add',
|
|
|
- query: { typeU: this.formData.type, k: this.formData.pageNum }
|
|
|
- })
|
|
|
- },
|
|
|
- // 点击左侧的tab栏
|
|
|
- cutLeft (type) {
|
|
|
- if (type === this.formData.type) return
|
|
|
- this.formData.pageNum = 1
|
|
|
- this.formData.type = type
|
|
|
- this.goodsList(this.formData)
|
|
|
- },
|
|
|
- // 时间处理----------------
|
|
|
- handleSelect (e) {
|
|
|
- const date = []
|
|
|
- for (const i in e) {
|
|
|
- date.push(this.gettime(e[i]))
|
|
|
- }
|
|
|
- this.formData.startTime = date[0]
|
|
|
- if (date[1]) {
|
|
|
- this.formData.endTime = date[1].replace('00:00:00', '23:59:59')
|
|
|
- }
|
|
|
- if (e === null) this.formData.endTime = ''
|
|
|
- },
|
|
|
- gettime (data) {
|
|
|
- const value =
|
|
|
- data.getFullYear() +
|
|
|
- '-' +
|
|
|
- this.checkTime(data.getMonth() + 1) +
|
|
|
- '-' +
|
|
|
- this.checkTime(data.getDate()) +
|
|
|
- ' ' +
|
|
|
- this.checkTime(data.getHours()) +
|
|
|
- ':' +
|
|
|
- this.checkTime(data.getMinutes()) +
|
|
|
- ':' +
|
|
|
- this.checkTime(data.getSeconds())
|
|
|
- return value
|
|
|
- },
|
|
|
- checkTime (i) {
|
|
|
- if (i < 10) {
|
|
|
- i = '0' + i
|
|
|
- }
|
|
|
- return i
|
|
|
- },
|
|
|
+
|
|
|
// 封装获取列表的函数
|
|
|
async goodsList (data) {
|
|
|
const res = await goodsList(data)
|
|
@@ -488,29 +192,6 @@ export default {
|
|
|
const k = this.$route.query.k
|
|
|
if (k) this.formData.pageNum = Number(k)
|
|
|
this.goodsList(this.formData)
|
|
|
- // 几个下拉框的数据
|
|
|
- // --------年代
|
|
|
- const res = await dictGetTree({ type: 'age' })
|
|
|
- const temp = []
|
|
|
- res.data.forEach((v) => {
|
|
|
- v.children.forEach((p) => {
|
|
|
- temp.push({ value: p.id, label: p.name })
|
|
|
- })
|
|
|
- })
|
|
|
- temp.unshift({ value: '', label: '全部' })
|
|
|
- this.dictAgeArr = [...temp]
|
|
|
- // -------类别
|
|
|
- const res2 = await dictGetTree({ type: 'texture' })
|
|
|
- this.dictTextureArr = res2.data.map((v) => {
|
|
|
- return { value: v.id, label: v.name }
|
|
|
- })
|
|
|
- this.dictTextureArr.unshift({ value: '', label: '全部' })
|
|
|
- // -------级别
|
|
|
- const res3 = await dictGetTree({ type: 'level' })
|
|
|
- this.dictLevelArr = res3.data.map((v) => {
|
|
|
- return { value: v.id, label: v.name }
|
|
|
- })
|
|
|
- this.dictLevelArr.unshift({ value: '', label: '全部' })
|
|
|
},
|
|
|
// 生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
mounted () {},
|
|
@@ -526,43 +207,6 @@ export default {
|
|
|
<style lang='less' scoped>
|
|
|
.tab2 {
|
|
|
height: 100%;
|
|
|
- .qrCodeBox {
|
|
|
- z-index: 10;
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- background-color: rgba(0, 0, 0, 0.8);
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- .qrCodeDown {
|
|
|
- position: absolute;
|
|
|
- width: 120px;
|
|
|
- height: 40px;
|
|
|
- line-height: 36px;
|
|
|
- text-align: center;
|
|
|
- top: 24px;
|
|
|
- right: 90px;
|
|
|
- color: #fff;
|
|
|
- border-radius: 20px;
|
|
|
- border: 1px solid #fff;
|
|
|
- }
|
|
|
- .closeQrCode {
|
|
|
- cursor: pointer;
|
|
|
- color: #fff;
|
|
|
- position: absolute;
|
|
|
- right: 30px;
|
|
|
- top: 30px;
|
|
|
- font-size: 30px;
|
|
|
- }
|
|
|
- & > img {
|
|
|
- max-width: 500px;
|
|
|
- max-height: 500px;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
- }
|
|
|
.conten {
|
|
|
display: flex;
|
|
|
height: calc(100% - 52px);
|
|
@@ -611,11 +255,9 @@ export default {
|
|
|
padding-right: 50px;
|
|
|
}
|
|
|
/deep/.el-select {
|
|
|
- width: 150px;
|
|
|
- }
|
|
|
- .search_k {
|
|
|
- margin-left: 30px;
|
|
|
+ width: 250px;
|
|
|
}
|
|
|
+
|
|
|
.search_btn {
|
|
|
margin-left: 50px;
|
|
|
display: flex;
|
|
@@ -629,7 +271,7 @@ export default {
|
|
|
// max-width: 1370px;
|
|
|
// }
|
|
|
/deep/.el-table__body-wrapper {
|
|
|
- max-height: 440px;
|
|
|
+ max-height: 500px;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
.paging {
|