2 changed files with 336 additions and 17 deletions
@ -0,0 +1,285 @@ |
|||
<template> |
|||
<div class="app-container row-container"> |
|||
<div class="head-container"> |
|||
<div class="head-search"> |
|||
<el-input v-model="query.search" size="small" clearable placeholder="输入资产名称/编码/操作人搜索" prefix-icon="el-icon-search" style="width: 250px;" class="filter-item" @keyup.enter.native="crud.toQuery" /> |
|||
<el-select v-model="query.manageType" clearable size="small" placeholder="出入库类型" class="filter-item" style="width: 130px" @change="crud.toQuery"> |
|||
<i slot="prefix" class="iconfont icon-zhuangtai" /> |
|||
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
<date-range-picker v-model="blurryTime" class="date-item" /> |
|||
<el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button> |
|||
<el-button class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button> |
|||
</div> |
|||
<crudOperation :permission="permission"> |
|||
<template v-slot:middle> |
|||
<!-- @click="doExport(crud.selections)" --> |
|||
<el-button :loading="crud.downloadLoading" size="mini" disabled> |
|||
<i class="iconfont icon-daochu" /> |
|||
导出 |
|||
</el-button> |
|||
</template> |
|||
</crudOperation> |
|||
</div> |
|||
<div class="container-wrap"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<el-table |
|||
ref="table" |
|||
v-loading="crud.loading" |
|||
class="archives-table" |
|||
highlight-current-row |
|||
stripe |
|||
style="width: 100%;" |
|||
height="calc(100vh - 330px)" |
|||
:data="crud.data" |
|||
@selection-change="crud.selectionChangeHandler" |
|||
@row-click="clickRowHandler" |
|||
> |
|||
<!-- <el-table-column type="selection" align="center" width="55" /> --> |
|||
<el-table-column prop="manageType" label="类型"> |
|||
<template slot-scope="scope"> |
|||
<el-tag v-if="scope.row.manageType === 0" type="info" style="margin-left: 0;">待定</el-tag> |
|||
<el-tag v-if="scope.row.manageType === 1">入库</el-tag> |
|||
<el-tag v-if="scope.row.manageType === 2" type="success">出库</el-tag> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="mark" label="资产编号" min-width="180px" :show-overflow-tooltip="true" /> |
|||
<el-table-column prop="name" label="资产名称" min-width="180px" :show-overflow-tooltip="true" /> |
|||
<el-table-column prop="capitaltypename" label="资产类型" width="80px" :show-overflow-tooltip="true" /> |
|||
<el-table-column prop="startprice" label="价值" width="80px" align="right" :show-overflow-tooltip="true" :formatter="(row) => formatMoney(row.startprice)" /> |
|||
<el-table-column prop="unitname" label="计量单位" width="80px" align="center" :show-overflow-tooltip="true" /> |
|||
<el-table-column prop="departmentname" label="使用部门" :show-overflow-tooltip="true" /> |
|||
<el-table-column prop="blongdepartmentname" label="所属部门" min-width="140px" :show-overflow-tooltip="true" /> |
|||
<el-table-column prop="glrname" label="管理人" :show-overflow-tooltip="true" /> |
|||
<el-table-column prop="cfd" label="存放地" min-width="140px" :show-overflow-tooltip="true" /> |
|||
<el-table-column prop="departmentname" label="所属部门" min-width="100px" :show-overflow-tooltip="true" /> |
|||
<el-table-column prop="operatorName" label="操作人" min-width="100px"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.operatorName">{{ scope.row.operatorName }}</span> |
|||
<span v-else>——</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="taskTime" label="记录时间" width="150px"> |
|||
<template slot-scope="scope"> |
|||
<div>{{ scope.row.taskTime | parseTime }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="videoId" label="操作" align="center" width="100"> |
|||
<template slot-scope="scope"> |
|||
<el-button v-if="scope.row.videoId" size="mini" @click="handleViewVideo(scope.row)"> |
|||
<i class="iconfont icon-yulan" /> |
|||
查看 |
|||
</el-button> |
|||
<span v-else>——</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!--分页组件--> |
|||
<pagination v-if="crud.data.length!==0" /> |
|||
</div> |
|||
|
|||
<!-- 查看监控视频 --> |
|||
<el-dialog class="view-video" append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :visible="hkVideoVisible" title="查看监控视频" :before-close="handleClose"> |
|||
<span class="dialog-right-top" /> |
|||
<span class="dialog-left-bottom" /> |
|||
<div class="setting-dialog"> |
|||
<video |
|||
ref="video" |
|||
controls |
|||
:src="videoUrl" |
|||
controlslist="nodownload noremoteplayback noplaybackrate" |
|||
disablePictureInPicture |
|||
width="700" |
|||
autoplay |
|||
/> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import crudAsset from '@/api/asset/index' |
|||
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
|||
import DateRangePicker from '@/components/DateRangePicker' |
|||
import crudOperation from '@crud/CRUD.operation' |
|||
import pagination from '@crud/Pagination' |
|||
// import { exportFile } from '@/utils/index' |
|||
// import qs from 'qs' |
|||
import { mapGetters } from 'vuex' |
|||
|
|||
const defaultForm = { } |
|||
export default { |
|||
name: 'InOutLog', |
|||
components: { pagination, crudOperation, DateRangePicker }, |
|||
cruds() { |
|||
return CRUD({ title: '出入库日志', url: 'api/asset/getAbnormalDataCommitBySearch', crudMethod: { ...crudAsset }, optShow: { |
|||
add: false, |
|||
edit: false, |
|||
del: false, |
|||
reset: true, |
|||
download: false, |
|||
group: false |
|||
}}) |
|||
}, |
|||
mixins: [presenter(), header(), form(defaultForm), crud()], |
|||
data() { |
|||
return { |
|||
permission: { add: [], edit: [], del: [] }, |
|||
pageSize: 10, |
|||
statusOptions: [ |
|||
{ value: 0, label: '待定' }, |
|||
{ value: 1, label: '入库' }, |
|||
{ value: 2, label: '出库' } |
|||
], |
|||
query: { |
|||
search: '', |
|||
manageType: '' |
|||
}, |
|||
blurryTime: [], |
|||
hkVideoVisible: false, |
|||
videoUrl: '' |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters([ |
|||
'baseApi' |
|||
]) |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
formatMoney(money) { |
|||
if (!money && money !== 0) return '——' |
|||
return Number(money).toLocaleString('en-US') |
|||
}, |
|||
[CRUD.HOOK.beforeRefresh]() { |
|||
// 清空原有搜索参数,防止干扰 |
|||
delete this.crud.query.billNo |
|||
delete this.crud.query.manageType |
|||
|
|||
this.crud.query.search = this.query.search |
|||
// 状态筛选 |
|||
this.crud.params.manageType = this.query.manageType |
|||
|
|||
if (this.blurryTime) { |
|||
this.crud.query.startTime = this.blurryTime[0] |
|||
this.crud.query.endTime = this.blurryTime[1] |
|||
} |
|||
|
|||
// 分页参数(保留你原有逻辑) |
|||
this.originalPage = this.crud.page.page |
|||
this.originalSize = this.crud.page.size |
|||
this.crud.params.pageNo = this.crud.page.page |
|||
this.crud.params.pageSize = this.crud.page.size |
|||
this.crud.params.page = undefined |
|||
this.crud.params.size = undefined |
|||
}, |
|||
[CRUD.HOOK.afterRefresh]() { |
|||
// 恢复原始参数 |
|||
if (this.originalPage !== undefined) { |
|||
this.crud.page.page = this.originalPage |
|||
this.crud.page.size = this.originalSize |
|||
// 移除pageNo和pageSize参数 |
|||
delete this.crud.params.pageNo |
|||
delete this.crud.params.pageSize |
|||
delete this.crud.params.page |
|||
delete this.crud.params.size |
|||
} |
|||
}, |
|||
// 新增前 |
|||
[CRUD.HOOK.beforeToAdd](crud, form) { |
|||
}, |
|||
// 编辑前 |
|||
[CRUD.HOOK.beforeToEdit](crud, form) { |
|||
}, |
|||
// 提交前做的操作 |
|||
[CRUD.HOOK.afterValidateCU](crud) { |
|||
console.log(crud.form) |
|||
return true |
|||
}, |
|||
// 关闭弹框前的操作 |
|||
[CRUD.HOOK.beforeAddCancel](crud) { |
|||
}, |
|||
resetQuery() { |
|||
// 清空所有搜索条件 |
|||
this.query.search = '' |
|||
this.query.manageType = '' |
|||
this.blurryTime = [] |
|||
this.crud.query.startTime = '' |
|||
this.crud.query.endTime = '' |
|||
// 清空 crud 搜索参数 |
|||
delete this.crud.query.manageType |
|||
// 刷新查询 |
|||
this.crud.toQuery() |
|||
}, |
|||
// 触发单选 |
|||
clickRowHandler(row) { |
|||
this.$refs.table.clearSelection() |
|||
this.$refs.table.toggleRowSelection(row) |
|||
}, |
|||
handleViewVideo(data) { |
|||
const videoId = data.videoId |
|||
this.hkVideoVisible = true |
|||
// 测试用 |
|||
// this.videoUrl = this.baseApi + '/api/minio/video/play?fileName=ceshi20260602video.mp4' |
|||
this.videoUrl = this.baseApi + '/api/minio/video/play?fileName=' + videoId |
|||
}, |
|||
handleClose() { |
|||
this.hkVideoVisible = false |
|||
this.videoUrl = '' |
|||
} |
|||
// doExport(data) { |
|||
// crud.downloadLoading = true |
|||
// this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续?</span>', '提示', { |
|||
// confirmButtonText: '继续', |
|||
// cancelButtonText: '取消', |
|||
// type: 'warning', |
|||
// dangerouslyUseHTMLString: true |
|||
// }).then(() => { |
|||
// const ids = [] |
|||
// data.forEach(val => { |
|||
// ids.push(val.fondsId) |
|||
// }) |
|||
// const params = { |
|||
// 'fondsIds': ids |
|||
// } |
|||
// exportFile(this.baseApi + '/api/fonds/download?' + qs.stringify(params, { indices: false })) |
|||
// }).catch(() => { |
|||
// }) |
|||
// } |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::v-deep .el-tag{ |
|||
&.el-tag--small{ |
|||
color: #0348f3 !important; |
|||
background-color: #eef5fe !important; |
|||
border-color: #c1dbfc !important; |
|||
} |
|||
&.el-tag--success { |
|||
background-color: #e7faf0 !important; |
|||
border-color: #d0f5e0!important; |
|||
color: #13ce66!important; |
|||
} |
|||
&.el-tag--info { |
|||
background-color: #f4f4f5 !important; |
|||
border-color: #f4f4f5!important; |
|||
color: #909399!important; |
|||
} |
|||
&.el-tag--error { |
|||
background-color: #fbc0b5 !important; |
|||
border-color: #fcab9d !important; |
|||
color: #ed4a41!important; |
|||
} |
|||
} |
|||
|
|||
.el-table .el-button{ |
|||
padding: 7px 10px !important; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue