irc_web/src/views/trials/trials-panel/setting/personnel-manage/components/site.vue

719 lines
25 KiB
Vue

<template>
<div class="assign-site">
<div class="filter-box">
<el-form :inline="true">
<!-- 中心编号 -->
<el-form-item :label="$t('trials:sitesList:table:siteId')">
<el-input v-model="listQuery.TrialSiteCode" class="mr" clearable />
</el-form-item>
<!-- 中心名称 -->
<el-form-item :label="$t('trials:sitesList:table:siteName')">
<el-input v-model="listQuery.TrialSiteName" class="mr" clearable />
</el-form-item>
<!-- 中心别名 -->
<!-- <el-form-item :label="$t('trials:sitesList:table:siteAliasName')">
<el-input v-model="listQuery.TrialSiteAliasName" class="mr" clearable />
</el-form-item> -->
<!-- 关键词 -->
<el-form-item :label="$t('trials:sitesList:form:keyWord')">
<el-input v-model="listQuery.UserKeyInfo" style="width: 200px" class="mr" clearable
:placeholder="$t('trials:sitesList:formPlaceholder:keyWord')" />
</el-form-item>
<!-- 状态 -->
<el-form-item :label="$t('trials:sitesList:table:status')">
<el-select v-model="listQuery.IsDeleted" clearable class="mr">
<el-option v-for="item of $d.IsSiteDisable" :key="item.label" :label="item.label" :value="item.value" />
</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-button v-hasPermi="[
'trials:trials-panel:setting:personnel-manage:questionnaire-record',
]" type="primary" icon="el-icon-info" @click="handleResearchList">
{{ $t("trials:sitesList:button:siteResearch") }}
</el-button>
<!-- 添加中心 -->
<el-button v-hasPermi="[
'trials:trials-panel:setting:personnel-manage:add-site',
]" type="primary" icon="el-icon-plus" @click="handleAdd">
{{ $t("trials:sitesList:dialogTitle:assignSite") }}
</el-button>
<el-button type="primary" icon="el-icon-download" :disabled="list.length === 0"
@click="handleResearchListExport">
{{ $t("common:button:export") }}
</el-button>
<!-- 下载模板 -->
<el-button type="primary" icon="el-icon-download" @click="handleDownload">
{{ $t("common:button:downloadTpl") }}
</el-button>
<el-button v-hasPermi="[
'trials:trials-panel:setting:personnel-manage:add-site',
]" type="primary" icon="el-icon-upload2" @click="handleUpload">
{{ $t("common:button:upload") }}
</el-button>
</el-form-item>
</el-form>
</div>
<el-table v-loading="listLoading" :data="list" stripe @sort-change="handleSortByColumn">
<el-table-column type="index" width="50" />
<!-- 中心编号 -->
<el-table-column prop="TrialSiteCode" :label="$t('trials:sitesList:table:siteId')" show-overflow-tooltip
sortable="custom" width="120">
<template slot-scope="scope">
<span v-if="!!scope.row.TrialSiteCode">{{
scope.row.TrialSiteCode
}}</span>
<i v-else class="el-icon-warning" style="color: #f44336; font-size: 14px" />
</template>
</el-table-column>
<!-- 中心名称 -->
<el-table-column prop="TrialSiteName" :label="$t('trials:sitesList:table:siteName')" show-overflow-tooltip
sortable="custom" min-width="120" />
<!-- 中心别名 -->
<el-table-column prop="TrialSiteAliasName" :label="$t('trials:sitesList:table:siteAliasName')"
show-overflow-tooltip sortable="custom" min-width="120" />
<!-- 参与者 -->
<el-table-column prop="UserNameList" :label="$t('trials:sitesList:table:staff')" show-overflow-tooltip
min-width="100">
<template slot-scope="scope">
<el-button v-if="scope.row.UserCount > 0" size="small" type="text" @click="getCrcList(scope.row)">
{{
scope.row.UserNameList.length > 0
? scope.row.UserNameList.join(", ")
: ""
}}
</el-button>
</template>
</el-table-column>
<!-- Subjects -->
<el-table-column prop="SubjectCount" min-width="100" :label="$t('trials:site:table:subjects')"
show-overflow-tooltip sortable="custom" />
<!-- Visits -->
<el-table-column prop="VisitCount" min-width="100" :label="$t('trials:site:table:visits')" show-overflow-tooltip
sortable="custom" />
<!-- 状态 -->
<el-table-column prop="IsDeleted" :label="$t('trials:sitesList:table:status')" show-overflow-tooltip sortable
min-width="100">
<template slot-scope="scope">
<el-tag v-if="scope.row.IsDeleted" type="danger">{{
$fd("IsSiteDisable", scope.row.IsDeleted)
}}</el-tag>
<el-tag v-else>{{
$fd("IsSiteDisable", scope.row.IsDeleted)
}}</el-tag>
</template>
</el-table-column>
<!-- DICOM AE -->
<el-table-column prop="CallingAEList" :label="$t('trials:sitesList:table:AE')" show-overflow-tooltip sortable
min-width="100">
<template slot-scope="scope">
<el-button v-if="scope.row.CallingAEList.length > 0" size="small" type="text"
@click="handleConfig(scope.row, 'view')">
{{
scope.row.CallingAEList.length > 0
? scope.row.CallingAEList.join(", ")
: ""
}}
</el-button>
</template>
</el-table-column>
<!-- 授权时间 -->
<el-table-column prop="EnabledTime" :label="$t('trials:sitesList:table:timeAdded')" show-overflow-tooltip sortable
min-width="150" />
<el-table-column v-if="
hasPermi([
'trials:trials-panel:setting:personnel-manage:edit-site',
'trials:trials-panel:setting:personnel-manage:remove-site',
])
" :label="$t('common:action:action')" min-width="120">
<template slot-scope="scope">
<el-button circle :title="$t('trials:sitesList:action:assign')" icon="el-icon-user"
:disabled="scope.row.IsDeleted" @click="getCrcList(scope.row)" />
<!-- Edit -->
<el-button v-hasPermi="[
'trials:trials-panel:setting:personnel-manage:edit-site',
]" circle :title="$t('common:button:edit')" icon="el-icon-edit-outline" @click="handleEdit(scope.row)" />
<el-button circle :title="$t('common:button:config')" icon="el-icon-setting"
@click="handleConfig(scope.row, 'add')" />
</template>
</el-table-column>
</el-table>
<div class="pagination" style="text-align: right">
<pagination :total="total" :page.sync="listQuery.PageIndex" :limit.sync="listQuery.PageSize"
@pagination="getList" />
</div>
<!-- 给site分配crc -->
<base-model v-if="crc_model.visible" :config="crc_model">
<template slot="dialog-body">
<CRCForm :site-id="currentSiteId" @closeDialog="closeDialog" />
</template>
</base-model>
<!-- 修改site信息 -->
<base-model v-if="edit_model.visible" :config="edit_model">
<template slot="dialog-body">
<el-form ref="editForm" :model="form" label-width="100px" :rules="rules">
<!-- 中心编号 -->
<el-form-item :label="$t('trials:sitesList:table:siteId')" prop="TrialSiteCode">
<el-input v-model="form.TrialSiteCode" />
</el-form-item>
<!-- 中心名称 -->
<el-form-item :label="$t('trials:sitesList:table:siteName')" prop="TrialSiteName">
<el-autocomplete clearable class="inline-input" style="width: 100%" v-model="form.TrialSiteName"
:fetch-suggestions="querySearch" @select="handleSelect" placeholder=""></el-autocomplete>
</el-form-item>
<!-- 中心别称 -->
<el-form-item :label="$t('trials:sitesList:table:siteAliasName')" prop="TrialSiteAliasName">
<el-input v-model="form.TrialSiteAliasName" />
</el-form-item>
<!-- 状态 -->
<el-form-item :label="$t('trials:sitesList:table:status')">
<el-switch v-model="form.IsDeleted" :active-value="false" :inactive-value="true" />
</el-form-item>
</el-form>
</template>
<template slot="dialog-footer">
<el-button type="primary" size="small" :disabled="saveBtnLoading" @click="edit_model.visible = false">
{{ $t("common:button:cancel") }}
</el-button>
<el-button type="primary" size="small" :loading="saveBtnLoading" @click="handleUpdateSiteID">
{{ $t("common:button:save") }}
</el-button>
</template>
</base-model>
<!-- 修改参与者人员状态 -->
<base-model v-if="status_model.visible" :config="status_model">
<template slot="dialog-body">
<span>{{ $t("trials:internalStaff:table:status") }}:</span>
<el-radio-group v-model="staffStatus">
<el-radio v-for="item of $d.IsUserExitTrial" :key="item.label" :label="item.value">{{ item.label }}</el-radio>
</el-radio-group>
</template>
<template slot="dialog-footer">
<el-button :disabled="btnLoading" size="small" type="primary" @click="status_model.visible = false">
{{ $t("common:button:cancel") }}
</el-button>
<el-button size="small" type="primary" :loading="btnLoading" @click="saveStatus">
{{ $t("common:button:save") }}
</el-button>
</template>
</base-model>
<!-- site下的crc/cra -->
<base-model v-if="siteOfcrc_model.visible" :config="siteOfcrc_model">
<template slot="dialog-body">
<div style="text-align: right">
<el-button v-hasPermi="[
'trials:trials-panel:setting:personnel-manage:assign-staff',
]" type="primary" icon="el-icon-plus" size="small" @click="crc_model.visible = true">
{{ $t("common:button:add") }}
</el-button>
</div>
<el-table v-loading="userListLoading" :data="userList" height="400" size="small">
<!-- 姓名 -->
<el-table-column prop="UserRealName" :label="$t('trials:internalStaff:table:name')" min-width="100"
show-overflow-tooltip />
<!-- 用户名 -->
<el-table-column prop="UserName" :label="$t('trials:internalStaff:table:uid')" min-width="100"
show-overflow-tooltip />
<!-- 用户类型 -->
<el-table-column prop="UserType" :label="$t('trials:internalStaff:table:userType')" min-width="100"
show-overflow-tooltip />
<!-- 电话 -->
<el-table-column prop="Phone" :label="$t('trials:internalStaff:table:phone')" show-overflow-tooltip
min-width="100" />
<!-- 邮箱 -->
<el-table-column prop="EMail" :label="$t('trials:internalStaff:table:email')" show-overflow-tooltip
min-width="100" />
<!-- 单位 -->
<el-table-column prop="OrganizationName" :label="$t('trials:internalStaff:table:organization')" min-width="100" />
<!-- 状态 -->
<el-table-column prop="IsDeleted" :label="$t('trials:internalStaff:table:status')" show-overflow-tooltip
min-width="100">
<template slot-scope="scope">
<el-tag v-if="scope.row.IsDeleted" type="danger">{{
$fd("IsUserExitTrial", scope.row.IsDeleted)
}}</el-tag>
<el-tag v-else>{{
$fd("IsUserExitTrial", scope.row.IsDeleted)
}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="CreateTime" :label="$t('trials:internalStaff:table:authorizationTime')"
show-overflow-tooltip sortable="custom" min-width="210" />
<el-table-column prop="DeletedTime" :label="$t('trials:internalStaff:table:disableTime')"
show-overflow-tooltip sortable min-width="210" />
<el-table-column v-hasPermi="[
'trials:trials-panel:setting:personnel-manage:assign-staff',
]" :label="$t('common:action:action')" width="100">
<template slot-scope="scope">
<el-button v-hasPermi="[
'trials:trials-panel:setting:personnel-manage:assign-staff',
]" circle :title="$t('trials:internalStaff:action:status')" icon="el-icon-edit-outline"
@click="handleStatus(scope.row)" />
</template>
</el-table-column>
</el-table>
</template>
</base-model>
<!-- 导入 -->
<base-model v-if="upload_model.visible" :config="upload_model">
<template slot="dialog-body">
<UploadExcel @closeDialog="upload_model.visible = false" @getList="getList" />
</template>
</base-model>
<!--dicom AE-->
<dicomAEList ref="dicomAEList" @getList="getList" />
</div>
</template>
<script>
import {
getSiteCRCSimpleList,
deleteTrialSite,
deleteSiteCRC,
editTrialSite,
getTrialSiteCRCList,
trialSiteUserListExport,
addTrialSites,
getTrialSiteSelectList,
} from "@/api/trials";
import { DownloadCommonDoc } from "@/api/dictionary";
import Pagination from "@/components/Pagination";
import CRCForm from "./crcForm";
import BaseModel from "@/components/BaseModel";
import UploadExcel from "./uploadExcel";
import moment from "moment";
import dicomAEList from "./dicomAEList.vue";
const getListQueryDefault = () => {
return {
UserKeyInfo: "",
TrialSiteCode: "",
TrialSiteAliasName: "",
TrialSiteName: null,
IsDeleted: null,
SortField: "TrialSiteCode",
Asc: true,
PageIndex: 1,
PageSize: 20,
};
};
export default {
name: "Participant",
components: { Pagination, CRCForm, BaseModel, UploadExcel, dicomAEList },
data() {
return {
list: [],
listQuery: getListQueryDefault(),
listLoading: false,
total: 0,
currentSiteId: "",
site_model: {
visible: false,
title: this.$t("trials:sitesList:dialogTitle:assignSite"),
width: "60%",
},
crc_model: {
visible: false,
title: this.$t("trials:sitesList:dialogTitle:assignStaff").replace(
"xxx",
this.$route.query.trialCode
),
width: "60%",
},
edit_model: {
visible: false,
title: this.$t("trials:sitesList:dialogTitle:editSite"),
width: "600px",
model_type: "add",
},
status_model: {
visible: false,
title: this.$t("trials:sitesList:dialogTitle:editStaffStauts"),
width: "500px",
},
siteOfcrc_model: { visible: false, title: "", width: "70%" },
form: {
TrialSiteCode: "",
TrialSiteName: "",
TrialSiteAliasName: "",
IsDeleted: true,
},
upload_model: {
visible: false,
title: this.$t("common:button:upload"),
width: "500px",
},
saveBtnLoading: false,
staffStatus: null,
currentRow: {},
btnLoading: false,
userListLoading: false,
userList: [],
moment,
rules: {
TrialSiteCode: [
{
required: true,
message: this.$t("common:ruleMessage:specify"),
trigger: "blur",
},
{
max: 100,
message: `${this.$t("common:ruleMessage:maxLength")} 100`,
trigger: "blur",
},
],
TrialSiteName: [
{
required: true,
message: this.$t("common:ruleMessage:specify"),
trigger: ["blur", "change"],
},
{
max: 500,
message: `${this.$t("common:ruleMessage:maxLength")} 500`,
trigger: "blur",
},
],
TrialSiteAliasName: [
{
required: true,
message: this.$t("common:ruleMessage:specify"),
trigger: "blur",
},
{
max: 500,
message: `${this.$t("common:ruleMessage:maxLength")} 500`,
trigger: "blur",
},
],
},
trialId: "",
TrialSiteSelectList: [],
};
},
mounted() {
this.trialId = this.$route.query.trialId;
this.getList();
this.getTrialSiteSelectList();
},
methods: {
// 打开DICOMAE配置列表
handleConfig(row, status) {
this.$refs.dicomAEList.open(row, status);
},
handleSelect(item) {
this.form.TrialSiteName = item.SiteName;
this.form.TrialSiteAliasName = item.AliasName
? item.AliasName
: this.form.TrialSiteAliasName;
this.form.SiteId = item.SiteId;
},
querySearch(queryString, cb) {
var TrialSiteSelectList = this.TrialSiteSelectList;
var results = queryString
? TrialSiteSelectList.filter(this.createFilter(queryString))
: TrialSiteSelectList;
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
return (TrialSiteSelectList) => {
return (
TrialSiteSelectList.SiteName.toLowerCase().indexOf(
queryString.toLowerCase()
) >= 0 ||
TrialSiteSelectList.AliasName.toLowerCase().indexOf(
queryString.toLowerCase()
) >= 0
);
};
},
// 获取site可选列表
async getTrialSiteSelectList() {
try {
let res = await getTrialSiteSelectList();
if (res.IsSuccess) {
this.TrialSiteSelectList = res.Result.map((item) => {
return {
value: item.SiteName + " " + item.AliasName,
...item,
};
});
}
} catch (err) {
console.log(err);
}
},
// 获取site列表
getList() {
this.listLoading = true;
this.listQuery.TrialId = this.trialId;
getSiteCRCSimpleList(this.listQuery)
.then((res) => {
this.listLoading = false;
this.list = res.Result.CurrentPageData;
this.total = res.Result.TotalCount;
})
.catch(() => {
this.listLoading = false;
});
},
// 打开添加site弹窗
handleAdd() {
this.edit_model.title = this.$t(
"trials:sitesList:dialogTitle:assignSite"
);
this.edit_model.model_type = "add";
Object.keys(this.form).forEach((key) => {
this.form[key] = "";
if (key === "IsDeleted") {
this.form[key] = true;
}
});
this.edit_model.visible = true;
},
// 给site分配CRC
handleAssignCRC(row) {
if (!row.TrialSiteCode) {
this.$alert(this.$t("trials:sitesList:message:setSiteId"));
return;
}
this.currentSiteId = row.TrialSiteId;
var title = this.$t("trials:sitesList:dialogTitle:assignStaff");
console.log(title);
this.crc_model.title = title.replace("xxx", this.$route.query.trialCode);
this.crc_model.visible = true;
},
// 编辑site信息
handleEdit(row) {
if (Object.keys(row).length) {
this.form = { ...row };
}
this.edit_model.title = this.$t("trials:sitesList:dialogTitle:editSite");
this.edit_model.model_type = "edit";
this.edit_model.visible = true;
},
// 更新site信息
handleUpdateSiteID() {
this.$refs["editForm"].validate((valid) => {
if (!valid) return;
this.saveBtnLoading = true;
const param = {
trialId: this.trialId,
id: this.form.Id,
SiteId: this.form.SiteId,
TrialSiteName: this.form.TrialSiteName,
trialSiteCode: this.form.TrialSiteCode,
trialSiteAliasName: this.form.TrialSiteAliasName,
isDeleted: this.form.IsDeleted,
};
if (this.edit_model.model_type === "add") {
addTrialSites([param])
.then((res) => {
this.saveBtnLoading = false;
if (res.IsSuccess) {
this.edit_model.visible = false;
this.$message.success(
this.$t("common:message:savedSuccessfully")
);
this.getList();
this.getTrialSiteSelectList();
}
})
.catch(() => {
this.saveBtnLoading = false;
});
} else {
editTrialSite(param)
.then((res) => {
this.saveBtnLoading = false;
if (res.IsSuccess) {
this.edit_model.visible = false;
this.$message.success(
this.$t("common:message:savedSuccessfully")
);
this.getList();
this.getTrialSiteSelectList();
}
})
.catch(() => {
this.saveBtnLoading = false;
});
}
});
},
// 移除site
handleDelete(row) {
this.$confirm(this.$t("trials:sitesList:message:removeSite"), {
type: "warning",
distinguishCancelAndClose: true,
}).then(() => {
deleteTrialSite(row.Id, this.trialId).then((res) => {
if (res.IsSuccess) {
this.list.splice(
this.list.findIndex((item) => item.Id === row.Id),
1
);
this.$message.success(
this.$t("trials:sitesList:message:removedSuccessfully")
);
}
});
});
},
handleStatus(row) {
const { IsDeleted } = { ...row };
this.currentRow = { ...row };
this.staffStatus = IsDeleted;
this.status_model.visible = true;
},
// 修改某个site下的CRC状态
saveStatus() {
this.btnLoading = true;
deleteSiteCRC(this.currentRow.Id, this.trialId, this.staffStatus)
.then((res) => {
this.btnLoading = false;
if (res.IsSuccess) {
this.status_model.visible = false;
this.getTrialSiteCRCList();
this.getList();
this.$message.success(this.$t("common:message:savedSuccessfully"));
}
})
.catch(() => {
this.btnLoading = false;
});
},
// 获取某个site下的crc列表
getCrcList(row) {
this.currentRow = { ...row };
this.currentSiteId = row.TrialSiteId;
var title = this.$t("trials:sitesList:dialogTitle:staff");
this.siteOfcrc_model.title = title.replace("xxx", row.TrialSiteCode);
this.siteOfcrc_model.visible = true;
this.getTrialSiteCRCList();
},
getTrialSiteCRCList() {
this.userListLoading = true;
getTrialSiteCRCList(this.trialId, this.currentRow.TrialSiteId)
.then((res) => {
this.userListLoading = false;
this.userList = res.Result;
})
.catch(() => {
this.userListLoading = false;
});
},
// 导出
handleResearchListExport() {
this.listQuery.TrialId = this.trialId;
this.listLoading = true;
// eslint-disable-next-line no-unused-vars
const { SortField, Asc, PageIndex, PageSize, ...param } = {
...this.listQuery,
};
trialSiteUserListExport({ ...param })
.then((data) => {
this.listLoading = false;
})
.catch(() => {
this.listLoading = false;
});
},
handleResearchList() {
this.$router.push({
path: `/trials/trials-panel/attachments/site-research?trialId=${this.$route.query.trialId}&trialCode=${this.$route.query.trialCode}&researchProgramNo=${this.$route.query.researchProgramNo}`,
});
},
handleUpload() {
this.upload_model.visible = true;
},
handleDownload() {
this.loading = true;
DownloadCommonDoc("TrialSiteSurveyImportUser_Template")
.then((data) => {
this.loading = false;
})
.catch(() => {
this.loading = false;
});
},
// site列表排序
handleSortByColumn(column) {
if (column.order === "ascending") {
this.listQuery.Asc = true;
} else {
this.listQuery.Asc = false;
}
this.listQuery.SortField = column.prop;
this.listQuery.PageIndex = 1;
this.getList();
},
// 查询
handleSearch() {
this.listQuery.PageIndex = 1;
this.getList();
},
// 重置
handleReset() {
this.listQuery = getListQueryDefault();
this.getList();
},
// 关闭添加分配crc模态框
closeDialog(isReresh) {
this.crc_model.visible = false;
if (isReresh) {
this.listQuery = getListQueryDefault();
this.getList();
this.getTrialSiteCRCList();
}
},
// 关闭添加site模态框
closeSiteDialog() {
this.site_model.visible = false;
this.listQuery = getListQueryDefault();
this.getList();
},
},
};
</script>
<style lang="scss">
.assign-site {
.filter-box {
display: flex;
padding: 5px;
.base-search-form {
.el-form-item {
margin-bottom: 0px;
}
}
.mr {
margin-right: 5px;
width: 120px;
}
}
.el-dialog__header {
padding: 10px;
}
.el-dialog__body {
padding: 10px;
}
}
</style>