Files
laws_weilai/jero-web/src/views/projectManagement/components/certificationDirectory.vue
T
2022-05-23 16:05:04 +08:00

293 lines
7.4 KiB
Java

<template>
<div>
<a-drawer
:title="$t('CertificationDirectory')"
:maskClosable="false"
:width="1100"
placement="right"
:closable="true"
@close="handleCancel"
:visible="visible"
style="height: 100%;overflow: auto;padding-bottom: 53px;">
<div style="margin-bottom: 60px">
<div class="table-operator">
<div class="operator-text" @click="addData">
<a-icon type="plus"/>
{{$t('add')}}
</div>
</div>
<a-table
:columns="columns"
:scroll="{x: 900}"
:data-source="dataList"
:pagination="false"
:loading="loading">
<span slot="operation" slot-scope="text,record">
<a class="text" @click="edit(record)">
{{ $t('edit') }}
</a>
<a class="text" @click="deleteData(record)">
{{ $t('delete') }}
</a>
</span>
<span slot="operationFile" slot-scope="text,record">
<a @click="viewFileClick(text)" v-if="text">
{{$t('viewFile')}}
</a>
<span v-else>--</span>
</span>
</a-table>
<div class="page" v-if="dataList.length > 0">
<a-pagination
:show-total="total => $t('total')+`${total}`+$t('strip')"
show-quick-jumper
show-size-changer
:page-size.sync="pageSize"
:total="total"
@change="onChange"
@showSizeChange="SizeChange"
/>
</div>
</div>
<div class="drawer-bootom-button">
<!-- style="margin-right: 16px"-->
<a-button @click="handleCancel" type="danger">{{$t('cancel')}}</a-button>
<!-- <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">{{$t('submit')}}</a-button>-->
</div>
</a-drawer>
<certificationDirectoryAdd @certificationDirectoryList="certificationDirectoryList"
ref="certificationDirectoryAddRef"/>
<viewFileModel ref="viewFileModelRef"/>
</div>
</template>
<script>
import { getAction, postAction, deleteAction } from '@/api/manage'
import certificationDirectoryAdd from './certificationDirectoryAdd'
import viewFileModel from '@/components/viewFileModel/index'
export default {
name: 'certificationDirectory',
components: {
certificationDirectoryAdd,
viewFileModel
},
data() {
return {
visible: false,
queryParam: {},
confirmLoading: false,
selectedRowKeys: [],
columns: [
{
title: this.$t('directoryName'),
dataIndex: 'directoryName',
align: 'center',
ellipsis: true
},
{
title: this.$t('batch'),
dataIndex: 'lot',
align: 'center',
ellipsis: true
},
{
title: this.$t('catalogFile'),
dataIndex: 'directoryFile',
align: 'center',
ellipsis: true,
scopedSlots: { customRender: 'operationFile' }
},
{
title: this.$t('testScheme'),
dataIndex: 'experimentFile',
align: 'center',
ellipsis: true,
scopedSlots: { customRender: 'operationFile' }
},
{
title: this.$t('testReportLocation'),
dataIndex: 'detectionReportLocation',
align: 'center',
ellipsis: true
},
{
title: this.$t('explain'),
dataIndex: 'explainInfo',
align: 'center',
ellipsis: true
},
{
title: this.$t('uploadTime'),
dataIndex: 'uploadTime',
align: 'center',
ellipsis: true
},
{
title: this.$t('operation'),
align: 'center',
width: 130,
scopedSlots: { customRender: 'operation' }
}
],
dataList: [],
content: [],
loading: false,
pageNo: 1,
pageSize: 10,
total: 0,
url: {
page: '/project/projectCertificationDirectoryEO/page',
delete: '/project/projectCertificationDirectoryEO/delete'
}
}
},
mounted() {
},
methods: {
addModel() {
this.visible = true
this.queryParam = {}
this.selectedRowKeys = []
this.replacePage()
},
searchQuery() {
this.pageNo = 1
this.replacePage()
},
searchReset() {
this.pageNo = 1
this.queryParam = {}
this.replacePage()
},
onChange(page, pageSize) {
this.pageNo = page
this.replacePage()
},
SizeChange(page, pageSize) {
this.pageNo = 1
this.pageSize = pageSize
this.replacePage()
},
replacePage() {
let query = {
pageNo: this.pageNo,
pageSize: this.pageSize,
projectLibraryId: this.$route.query.id,
...this.queryParam
}
this.loading = true
getAction(this.url.page, query).then((res) => {
if (res.success) {
this.dataList = res.result.records || []
this.total = res.result.total
this.loading = false
} else {
this.loading = false
}
})
},
handleCancel() {
this.visible = false
},
handleSubmit() {
this.visible = false
},
edit(val) {
this.$refs.certificationDirectoryAddRef.edit(JSON.parse(JSON.stringify(val)))
},
deleteData(val) {
let _this = this
this.$confirm({
content: _this.$t('ConfirmDelete'),
onOk() {
deleteAction(_this.url.delete, { id: val.id }).then((res) => {
if (res.success) {
_this.$message.success(_this.$t('OperationSuccessful'))
_this.replacePage()
} else {
_this.$message.warning(_this.$t('operationFailed'))
}
})
}
})
},
addData() {
this.$refs.certificationDirectoryAddRef.add()
},
certificationDirectoryList() {
this.pageNo = 1
this.replacePage()
},
viewFileClick(item) {
this.$refs.viewFileModelRef.clickButtonToUpload(item)
}
}
}
</script>
<style scoped>
@import '~@assets/less/common.less';
.page {
text-align: right;
margin-top: 20px;
}
.drawer-bootom-button {
position: absolute;
bottom: 0;
width: 100%;
z-index: 100;
border-top: 1px solid #e8e8e8;
padding: 10px 16px;
text-align: right;
left: 0;
background: #fff;
border-radius: 0 0 2px 2px;
}
.box-title-text {
line-height: 1.4;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.title-text {
width: 20%;
min-width: 110px;
color: #000F16;
display: inline-block;
font-weight: 500;
font-size: 14px;
margin-right: 16px;
margin-top: 3px;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.box-input {
display: inline-block;
width: 70%;
height: 38px;
margin-top: 2px;
}
.box-button {
height: 38px;
}
.table-operator {
text-align: right;
margin-bottom: 20px;
}
.text {
margin-right: 8px;
}
</style>