chenhaodong
260 lines
8.0 KiB
Vue
260 lines
8.0 KiB
Vue
<!--
|
||
@description 图书管理页面，实现图书信息的增删改查与列表展示
|
||
@author D吕贺034244311
|
||
@date 20260618
|
||
-->
|
||
<template>
|
||
<div class="app-container">
|
||
|
||
<data-table ref="pagingTable" :options="options" :list-query="listQuery" @multi-actions="handleMultiAction">
|
||
<template #filter-content>
|
||
<el-input v-model="listQuery.params.isbn" style="width: 200px" placeholder="搜索ISBN书号" class="filter-item"/>
|
||
<el-input v-model="listQuery.params.bName" style="width: 200px" placeholder="搜索书名" class="filter-item"/>
|
||
<el-input v-model="listQuery.params.bAuthor" style="width: 200px" placeholder="搜索作者" class="filter-item"/>
|
||
<el-select v-model="listQuery.params.bType" style="width: 200px" placeholder="搜索图书种类" class="filter-item">
|
||
<el-option
|
||
v-for="item in tszlDicData"
|
||
:key="item.value"
|
||
:label="item.text"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
<el-select v-model="listQuery.params.bState" style="width: 200px" placeholder="搜索图书状态" class="filter-item">
|
||
<el-option
|
||
v-for="item in stateDicData"
|
||
:key="item.value"
|
||
:label="item.text"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
<el-button class="filter-item" type="primary" @click="handleAdd">
|
||
<el-icon><Plus /></el-icon> 添加
|
||
</el-button>
|
||
</template>
|
||
<template #data-columns>
|
||
<el-table-column type="selection" width="55"/>
|
||
|
||
<el-table-column align="center" label="ISBN书号" prop="isbn">
|
||
<template #default="scope">
|
||
<a style="color: #1890ff" @click="handleUpdate(scope.row)">{{ scope.row.isbn }}</a>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="书名" prop="bName" />
|
||
<el-table-column :formatter="dataFormatter" align="center" label="图书种类" prop="bType" class-name="DIC_TSZL"/>
|
||
|
||
<el-table-column align="center" label="价格" prop="bPrice" />
|
||
<el-table-column align="center" label="作者" prop="bAuthor" />
|
||
<el-table-column align="center" label="出版商" prop="bPublisher" />
|
||
<el-table-column align="center" label="封面" >
|
||
<template #default="scope">
|
||
<el-popover placement="right" trigger="hover">
|
||
<template #reference>
|
||
<el-image :src="scope.row.bPath" width="80" height="80"/>
|
||
</template>
|
||
<el-image style="width: 250px; height: 250px" :src="scope.row.bPath" fit="cover"/>
|
||
</el-popover>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="出版日期">
|
||
<template #default="scope">
|
||
{{ $filters.xmDateFormat(scope.row.bPublicationTime) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="库存数量" prop="bNum" />
|
||
<el-table-column align="center" label="介绍" prop="bIntroduce" />
|
||
<el-table-column align="center" label="借阅次数" prop="bLendNum" />
|
||
<el-table-column :formatter="dataFormatter" align="center" label="状态" prop="bState" class-name="STATE"/>
|
||
|
||
<el-table-column align="center" label="操作">
|
||
<template #default="scope">
|
||
<a style="color: #1890ff" @click="handleUpdate(scope.row)">
|
||
<el-button link type="primary" size="small"
|
||
>编辑
|
||
</el-button>
|
||
</a>
|
||
</template>
|
||
|
||
</el-table-column>
|
||
|
||
</template>
|
||
</data-table>
|
||
|
||
<el-dialog v-model="dialogVisible" title="书籍信息" width="500px">
|
||
<el-form :model="formData" label-position="left" label-width="100px">
|
||
<el-form-item label="Isbn书号">
|
||
<el-input v-model="formData.isbn" />
|
||
</el-form-item>
|
||
<el-form-item label="书名">
|
||
<el-input v-model="formData.bName" />
|
||
</el-form-item>
|
||
<el-form-item label="图书类型">
|
||
<el-select v-model="formData.bType" placeholder="请选图书类型" >
|
||
<el-option
|
||
v-for="item in tszlDicData"
|
||
:key="item.value"
|
||
:label="item.text"
|
||
:value="item.value" >
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="价格">
|
||
<el-input type="number" v-model="formData.bPrice"/>
|
||
</el-form-item>
|
||
<el-form-item label="作者">
|
||
<el-input v-model="formData.bAuthor" />
|
||
</el-form-item>
|
||
<el-form-item label="出版商">
|
||
<el-input v-model="formData.bPublisher" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="出版日期">
|
||
<el-date-picker
|
||
v-model="formData.bPublicationTime"
|
||
type="datetime"
|
||
placeholder="选择日期时间"
|
||
format="YYYY-MM-DD">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="数量">
|
||
<el-input type="number" v-model="formData.bNum" />
|
||
</el-form-item>
|
||
<el-form-item label="封面图片地址">
|
||
<el-input v-model="formData.bPath" />
|
||
</el-form-item>
|
||
<el-form-item label="介绍">
|
||
<el-input v-model="formData.bIntroduce" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="handleUpCancel">取 消</el-button>
|
||
<el-button type="primary" @click="handleSave">确 认</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import DataTable from '@/components/DataTable/index.vue'
|
||
import MeetRole from '@/components/MeetRole/index.vue'
|
||
import DepartTreeSelect from '@/components/DepartTreeSelect/index.vue'
|
||
import {getSelectOptions} from '@/api/sys/dict/dict.js'
|
||
import {dataFormatter} from '@/utils'
|
||
import {saveData} from '@/api/sys/bookgl/bookgl.js'
|
||
import {getBjList, getZyList} from "@/api/sys/grxxgl/grxxgl.js";
|
||
|
||
|
||
export default {
|
||
name: 'BysxxglList',
|
||
components: {
|
||
DepartTreeSelect,
|
||
DataTable,
|
||
MeetRole
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
|
||
defaultProps: {
|
||
value: 'value',
|
||
text: 'text',
|
||
label: 'deptName',
|
||
children: 'children'
|
||
},
|
||
qcglData: {},
|
||
dialogVisible: false,
|
||
|
||
listQuery: {
|
||
current: 1,
|
||
size: 10,
|
||
total: 0,
|
||
params: {}
|
||
},
|
||
|
||
formData: {
|
||
avatar: ''
|
||
},
|
||
|
||
stateDicData:[],
|
||
tszlDicData:[],
|
||
|
||
|
||
options: {
|
||
listUrl: '/tsjxxb/controller/paging',
|
||
stateUrl: '/tsjxxb/controller/state',
|
||
deleteUrl: '/tsjxxb/controller/delete',
|
||
multiActions: [
|
||
{
|
||
value: 'enable',
|
||
label: '启用'
|
||
}, {
|
||
value: 'disable',
|
||
label: '禁用'
|
||
},
|
||
{
|
||
value: 'delete',
|
||
label: '删除'
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
|
||
created() {
|
||
getSelectOptions('DIC_TSZL').then(response => {
|
||
this.tszlDicData = response.data
|
||
})
|
||
|
||
getSelectOptions('STATE').then(response => {
|
||
this.stateDicData = response.data
|
||
})
|
||
|
||
|
||
},
|
||
|
||
methods: {
|
||
dataFormatter,
|
||
|
||
handleAdd() {
|
||
this.formData = {}
|
||
this.dialogVisible = true
|
||
console.log('新增')
|
||
},
|
||
|
||
handleUpdate(row) {
|
||
this.dialogVisible = true
|
||
this.formData = row
|
||
},
|
||
|
||
handleUpCancel() {
|
||
this.dialogVisible = false;
|
||
},
|
||
|
||
departSelected(data) {
|
||
this.formData.id = data.id
|
||
console.log(data + "----depart")
|
||
},
|
||
|
||
handleSave() {
|
||
saveData(this.formData).then((response) => {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '编辑成功!'
|
||
})
|
||
this.dialogVisible = false
|
||
this.$refs.pagingTable.getList()
|
||
})
|
||
},
|
||
|
||
handleMultiAction(obj) {
|
||
if (obj.opt === 'cancel') {
|
||
this.handleCancelOrder(obj.ids)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|