|
|
@@ -0,0 +1,237 @@
|
|
|
+<template>
|
|
|
+ <el-dialog title="添加藏品" :visible="dialogFormVisible" @close="cancel()">
|
|
|
+ <div class="query">
|
|
|
+ <span>藏品名称：</span>
|
|
|
+ <el-input
|
|
|
+ v-model="myData.searchKey"
|
|
|
+ placeholder="请输入"
|
|
|
+ style="width: 280px; margin-right: 40px"
|
|
|
+ ></el-input>
|
|
|
+ <el-button @click="search">查 询</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <el-table
|
|
|
+ ref="multipleTable"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="55"> </el-table-column>
|
|
|
+ <el-table-column label="缩略图" width="140">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div class="smimg">
|
|
|
+ <img :src="baseURL + row.thumb" alt="" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="registerNum" label="总登记号" width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="藏品名称"> </el-table-column>
|
|
|
+ <el-table-column prop="goodsTypeName" label="类别" width="180">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页器 -->
|
|
|
+ <div class="paging">
|
|
|
+ <el-pagination
|
|
|
+ :current-page='myData.pageNum'
|
|
|
+ @current-change="currentChange"
|
|
|
+ background
|
|
|
+ layout="prev, pager, next,jumper"
|
|
|
+ :total="total"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="btnOK">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import axios from '@/utils/request'
|
|
|
+import { getListTow } from '@/apis/holding1'
|
|
|
+export default {
|
|
|
+ name: 'Holding0_Dialog',
|
|
|
+ components: {},
|
|
|
+ props: {
|
|
|
+ dialogFormVisible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ myTemp: {
|
|
|
+ type: Array,
|
|
|
+ default: function () {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ // 存储全部表格信息的数据
|
|
|
+ tableGather: {},
|
|
|
+ // 表格数据的筛选
|
|
|
+ myData: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ searchKey: ''
|
|
|
+ },
|
|
|
+ // 分页器总数
|
|
|
+ total: 0,
|
|
|
+ // 服务器前缀地址
|
|
|
+ baseURL: '',
|
|
|
+ // 表格数据
|
|
|
+ tableData: [],
|
|
|
+ // 传递给父元素的表格数据
|
|
|
+ fatabList: [],
|
|
|
+ tableObj: {}
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ // 监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ // 方法集合
|
|
|
+ methods: {
|
|
|
+ // 分页器页码改变
|
|
|
+ currentChange (val) {
|
|
|
+ // console.log(val)
|
|
|
+ this.tableData = this.tableGather[val]
|
|
|
+ // this.myData.pageNum = val
|
|
|
+ // this.getListTow(this.myData)
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // // 所有dom加载完毕之后---要执行的代码
|
|
|
+ // setTimeout(() => {
|
|
|
+ // if (this.tableData.length === 0) {
|
|
|
+ // this.myData.pageNum = 1
|
|
|
+ // this.getListTow(this.myData)
|
|
|
+ // }
|
|
|
+ // }, 100)
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ // 每一页显示条数改变
|
|
|
+ // sizeChange (val) {
|
|
|
+ // this.myData.pageSize = val
|
|
|
+ // this.getListAll()
|
|
|
+ // },
|
|
|
+ // 点击查询
|
|
|
+ search () {
|
|
|
+ this.myData.pageNum = 1
|
|
|
+ this.getListTow(this.myData)
|
|
|
+ },
|
|
|
+ // 表格的多选
|
|
|
+ handleSelectionChange (rows) {
|
|
|
+ // console.log(this.myData.pageNum)
|
|
|
+ // const temp = []
|
|
|
+ // this.tableObj[this.myData.pageNum] = rows
|
|
|
+ // // console.log(666, this.tableObj)
|
|
|
+ // for (const k in this.tableObj) {
|
|
|
+ // this.tableObj[k].forEach(v => {
|
|
|
+ // temp.push(v)
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // this.fatabList = temp
|
|
|
+ // console.log(99999999, this.fatabList)
|
|
|
+ },
|
|
|
+ // 点击确定
|
|
|
+ btnOK () {
|
|
|
+ // 把选中的数据传给父组件
|
|
|
+
|
|
|
+ this.$emit('getSonList', this.fatabList)
|
|
|
+
|
|
|
+ this.cancel()
|
|
|
+ },
|
|
|
+ // 点击取消
|
|
|
+ cancel () {
|
|
|
+ this.$emit('update:dialogFormVisible', false)
|
|
|
+ this.myData.searchKey = ''
|
|
|
+ this.myData.pageNum = 1
|
|
|
+ },
|
|
|
+ // 获取藏品列表---让父组件调用
|
|
|
+ async getListTow (data) {
|
|
|
+ const res = await getListTow(data)
|
|
|
+ this.tableData = res.data.list
|
|
|
+ // console.log(66666666, res.data.list.length / 10)
|
|
|
+ // console.log(66666, this.tableData)
|
|
|
+ // this.tableGather[1]=
|
|
|
+
|
|
|
+ // 表格的默认选中
|
|
|
+ this.myTemp.forEach(v => {
|
|
|
+ this.tableData.forEach((i, ind) => {
|
|
|
+ if (v.id === i.id) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.multipleTable.toggleRowSelection(this.tableData[ind], true)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ // 表格的默认选中
|
|
|
+ // this.myTemp.forEach(v => {
|
|
|
+ // console.log(666, v)
|
|
|
+ // })
|
|
|
+
|
|
|
+ this.total = res.data.total
|
|
|
+ },
|
|
|
+ // 获取所有藏品列表信息的函数
|
|
|
+ async getListAll () {
|
|
|
+ const res = await getListTow({ pageNum: 1, pageSize: 999999 })
|
|
|
+ this.total = res.data.total
|
|
|
+ // console.log(res.data.list)
|
|
|
+ const totle = res.data.list.length / this.myData.pageSize
|
|
|
+ // console.log(999999999, Math.ceil(totle))
|
|
|
+ for (let i = 1; i <= Math.ceil(totle); i++) {
|
|
|
+ this.tableGather[i] = res.data.list.slice(i * this.myData.pageSize - this.myData.pageSize, i * this.myData.pageSize)
|
|
|
+ }
|
|
|
+ this.tableData = this.tableGather[1]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ // 获取服务器前缀地址
|
|
|
+ this.baseURL = axios.defaults.baseURL
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.getListAll()
|
|
|
+ },
|
|
|
+ beforeCreate () {}, // 生命周期 - 创建之前
|
|
|
+ beforeMount () {}, // 生命周期 - 挂载之前
|
|
|
+ beforeUpdate () {}, // 生命周期 - 更新之前
|
|
|
+ updated () {}, // 生命周期 - 更新之后
|
|
|
+ beforeDestroy () {}, // 生命周期 - 销毁之前
|
|
|
+ destroyed () {}, // 生命周期 - 销毁完成
|
|
|
+ activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.paging {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+}
|
|
|
+.query {
|
|
|
+ height: 85px;
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+/deep/.el-dialog__body {
|
|
|
+ padding: 0px 20px 20px;
|
|
|
+ overflow: auto;
|
|
|
+ max-height: 556px;
|
|
|
+}
|
|
|
+.row {
|
|
|
+ display: flex;
|
|
|
+ /deep/& > div {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+.smimg {
|
|
|
+ height: 60px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border: 3px solid #ccc;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
