irc_web/src/views/trials/trials-panel/setting/attachment/index.vue

427 lines
12 KiB
Vue

<template>
<box-content style="height: 100%; background: #fff">
<!-- 搜索框 -->
<div class="search">
<el-form :inline="true" class="base-search-form">
<!-- 文件类型 -->
<el-form-item :label="$t('trials:attachment:table:fileType')">
<el-select
v-model="searchData.FileTypeId"
clearable
style="width: 150px"
>
<el-option
v-for="item of $d.Trial_Document"
:key="item.id"
:label="item.label"
:value="item.id"
/>
</el-select>
</el-form-item>
<!-- 文件名称 -->
<el-form-item :label="$t('trials:attachment:table:fileName')">
<el-input v-model="searchData.Name" style="width: 100px" />
</el-form-item>
<!-- 培训状态 -->
<el-form-item :label="$t('trials:attachment:table:isDeleted')">
<el-select
clearable
v-model="searchData.IsDeleted"
style="width: 150px"
>
<el-option
v-for="item of $d.TrainingStatus"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<!-- 培训角色 -->
<el-form-item :label="$t('trials:attachment:table:userType')">
<el-select
v-model="searchData.UserTypeId"
clearable
style="width: 100%"
>
<el-option
v-for="item of userTypeOptions"
v-show="
item.UserTypeEnum !== 1 &&
item.UserTypeEnum !== 8 &&
item.UserTypeEnum !== 20 &&
item.UserTypeEnum !== 26 &&
item.UserTypeEnum !== 27 &&
item.UserTypeEnum !== 31
"
:key="item.Id"
:label="item.UserTypeShortName"
:value="item.Id"
>
<span>{{ item.UserType }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<!-- 查询 -->
<el-button type="primary" icon="el-icon-search" @click="handleSearch">
{{ $t('common:button:search') }}
</el-button>
<!-- 重置 -->
<el-button
type="primary"
icon="el-icon-refresh-left"
@click="handleReset"
>
{{ $t('common:button:reset') }}
</el-button>
</el-form-item>
</el-form>
<span style="margin-left: auto">
<!-- 新增 -->
<el-button
v-hasPermi="['trials:trials-panel:setting:attachment:add']"
type="primary"
icon="el-icon-plus"
@click="handleAdd"
>
{{ $t('common:button:add') }}
</el-button>
</span>
</div>
<!-- 系统文件列表 -->
<el-table
ref="attachmentList"
v-loading="loading"
v-adaptive="{ bottomOffset: 60 }"
:data="list"
stripe
height="100"
@sort-change="handleSortByColumn"
>
<el-table-column type="index" width="40" />
<!-- 文件类型 -->
<el-table-column
prop="FileType"
:label="$t('trials:attachment:table:fileType')"
show-overflow-tooltip
sortable="custom"
min-width="160"
/>
<!-- 文件名称 -->
<el-table-column
prop="Name"
:label="$t('trials:attachment:table:fileName')"
show-overflow-tooltip
sortable="custom"
min-width="160"
/>
<!-- 查看最短时间(分钟) -->
<el-table-column
prop="SignViewMinimumMinutes"
:label="$t('trials:attachment:table:min')"
show-overflow-tooltip
sortable="custom"
min-width="150"
/>
<!-- 是否废除 -->
<el-table-column
prop="IsDeleted"
:label="$t('trials:attachment:table:isDeleted')"
show-overflow-tooltip
sortable="custom"
min-width="100"
>
<template slot-scope="scope">
<el-tag v-if="scope.row.IsDeleted" type="danger">{{
$fd('TrainingStatus', scope.row.IsDeleted)
}}</el-tag>
<el-tag v-else type="primary">{{
$fd('TrainingStatus', scope.row.IsDeleted)
}}</el-tag>
</template>
</el-table-column>
<!-- 需要签署的用户类型 -->
<el-table-column
prop="NeedConfirmedUserTypes"
:label="$t('trials:attachment:table:userType')"
show-overflow-tooltip
min-width="100"
>
<template slot-scope="scope">
{{
scope.row.NeedConfirmedUserTypes
? scope.row.NeedConfirmedUserTypes.join(', ')
: ''
}}
</template>
</el-table-column>
<!-- 描述 -->
<!-- <el-table-column
prop="Description"
:label="$t('trials:attachment:table:description')"
show-overflow-tooltip
min-width="300"
/> -->
<!-- 更新时间 -->
<!-- <el-table-column
prop="UpdateTime"
:label="$t('trials:attachment:table:updateTime')"
show-overflow-tooltip
sortable="custom"
min-width="160"
/> -->
<!--创建时间-->
<el-table-column
prop="CreateTime"
:label="$t('trials:attachment:table:CreateTime')"
show-overflow-tooltip
sortable="custom"
min-width="160"
/>
<el-table-column
:label="$t('common:action:action')"
min-width="140"
fixed="right"
>
<template slot-scope="scope">
<!-- -->
<el-button
icon="el-icon-view"
circle
:title="$t('trials:attachment:action:preview')"
@click="handlePreview(scope.row)"
/>
<!-- 编辑 -->
<el-button
v-hasPermi="['trials:trials-panel:setting:attachment:edit']"
circle
:title="$t('trials:attachment:action:edit')"
icon="el-icon-edit-outline"
:disabled="scope.row.IsSomeUserSigned || scope.row.IsDeleted"
@click="handleEdit(scope.row)"
/>
<!-- 废除 -->
<el-button
v-hasPermi="['trials:trials-panel:setting:attachment:abolish']"
:disabled="scope.row.IsDeleted"
circle
:title="$t('trials:attachment:action:apolish')"
icon="el-icon-delete"
@click="handleRepeal(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination
class="page"
:total="total"
:page.sync="searchData.PageIndex"
:limit.sync="searchData.PageSize"
@pagination="getList"
/>
<!-- 新增/编辑 -->
<el-dialog
v-if="editVisible"
:visible.sync="editVisible"
:close-on-click-modal="false"
:title="title"
width="800px"
custom-class="base-dialog-wrapper"
>
<AttachmentForm
:data="currentRow"
@closeDialog="closeDialog"
@getList="getList"
/>
</el-dialog>
<!-- 预览文件 -->
<el-dialog
v-if="previewVisible"
:visible.sync="previewVisible"
:title="$t('trials:attachment:dialogTitle:preview')"
:fullscreen="true"
append-to-body
custom-class="base-dialog-wrapper"
>
<div
class="base-modal-body"
style="border: 2px solid #ccc; padding: 10px"
>
<PreviewFile
v-if="previewVisible"
:file-path="currentPath"
:file-type="currentType"
/>
</div>
</el-dialog>
</box-content>
</template>
<script>
import {
getTrialDocumentList,
userAbandonDoc,
getTrialUserTypeList,
} from '@/api/trials'
import BoxContent from '@/components/BoxContent'
import Pagination from '@/components/Pagination'
import AttachmentForm from './components/attachmentForm'
import PreviewFile from './components/previewFile'
const searchDataDefault = () => {
return {
FileTypeId: '',
Name: '',
PageIndex: 1,
PageSize: 20,
SortField: '',
Asc: false,
IsDeleted: null,
UserTypeId: null,
}
}
export default {
name: 'TrialAttachmentList',
components: { BoxContent, Pagination, AttachmentForm, PreviewFile },
dicts: ['Trial_Document'],
data() {
return {
searchData: searchDataDefault(),
loading: false,
list: [],
total: 0,
editVisible: false,
previewVisible: false,
title: '',
currentRow: {},
currentPath: '',
currentType: '',
trialId: '',
userTypeOptions: [],
}
},
mounted() {
this.trialId = this.$route.query.trialId
this.getList()
this.getUserType()
},
methods: {
// 获取系统文件数据
getList() {
this.loading = true
this.searchData.TrialId = this.trialId
getTrialDocumentList(this.searchData)
.then((res) => {
this.loading = false
const { CurrentPageData, TotalCount } = res.Result
CurrentPageData.forEach((item) => {
item.NeedConfirmedUserTypes = []
item.NeedConfirmedUserTypeeIds = []
item.NeedConfirmedUserTypeList.forEach((i) => {
item.NeedConfirmedUserTypes.push(i.UserTypeShortName)
item.NeedConfirmedUserTypeeIds.push(i.NeedConfirmUserTypeId)
})
})
this.list = CurrentPageData
this.total = TotalCount
})
.catch(() => {
this.loading = false
})
},
// 获取用户类型下拉数据
getUserType() {
getTrialUserTypeList()
.then((res) => {
this.userTypeOptions = res.Result
if (this.form.Id) {
this.form.NeedConfirmedUserTypeIdList =
this.data.NeedConfirmedUserTypeeIds
}
})
.catch(() => {
this.loading = false
})
},
// 新增
handleAdd() {
this.title = this.$t('common:button:add')
this.currentRow = {}
this.editVisible = true
},
// 预览
handlePreview(row) {
const { Name, FullFilePath } = row
this.currentPath = FullFilePath
this.currentType = row.Name
? Name.substring(Name.lastIndexOf('.') + 1).toLocaleLowerCase()
: ''
this.previewVisible = true
},
// 编辑
handleEdit(row) {
this.title = this.$t('common:button:edit')
this.currentRow = { ...row }
this.editVisible = true
},
// 废除
handleRepeal(row) {
this.$confirm(this.$t('trials:attachment:message:abolish'), {
type: 'warning',
distinguishCancelAndClose: true,
})
.then(() => {
this.loading = true
userAbandonDoc(row.Id, false)
.then((res) => {
this.loading = false
if (res.IsSuccess) {
this.getList()
this.$message.success(
this.$t('trials:trials-list:message:abolitionSuccessfully')
)
}
})
.catch(() => {
this.loading = false
})
})
.catch(() => {})
},
// 关闭编辑弹窗
closeDialog() {
this.editVisible = false
},
// 重置
handleReset() {
this.searchData = searchDataDefault()
this.getList()
this.$nextTick(() => {
this.$refs.attachmentList.clearSort()
})
},
// 查询
handleSearch() {
this.searchData.PageIndex = 1
this.getList()
},
// 排序
handleSortByColumn(column) {
if (column.order === 'ascending') {
this.searchData.Asc = true
} else {
this.searchData.Asc = false
}
this.searchData.SortField = column.prop
this.searchData.PageIndex = 1
this.getList()
},
},
}
</script>