irc_web/src/views/trials/trials-panel/setting/trial-config/components/dicomConfig.vue

577 lines
17 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div>
<el-form
ref="dicomConfigForm"
v-loading="loading"
:model="form"
label-width="300px"
style="width: 800px"
:rules="rules"
size="small"
>
<!-- pacs直连 -->
<el-form-item
:label="$t('trials:dicomCfg:form:pacsLine')"
prop="IsPACSConnect"
>
<el-radio-group
v-model="form.IsPACSConnect"
:disabled="form.IsTrialPACSConfirmed && !isEdit"
@change="changeConnect"
>
<el-radio
v-for="item of $d.PACSConnectMode"
:key="item.id"
:label="item.value"
>
{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="form.IsPACSConnect">
<!--AE名称-->
<el-form-item
:label="$t('trials:dicomCfg:form:CalledAE')"
prop="CalledAE"
>
<el-input
v-model="form.CalledAE"
style="width: 80%"
:disabled="form.IsTrialPACSConfirmed && !isEdit"
clearable
maxlength="16"
/>
</el-form-item>
<!-- IP地址 -->
<el-form-item :label="$t('trials:dicomCfg:form:Ip')" prop="Ip">
<el-input
v-model="form.Ip"
style="width: 80%"
:disabled="form.IsTrialPACSConfirmed && !isEdit"
clearable
/>
</el-form-item>
<!-- 端口 -->
<el-form-item :label="$t('trials:dicomCfg:form:Port')" prop="Port">
<el-input
v-model.number="form.Port"
type="number"
clearable
style="width: 80%"
:disabled="form.IsTrialPACSConfirmed && !isEdit"
/>
</el-form-item>
<!--状态-->
<el-form-item
:label="$t('trials:dicomCfg:form:IsTestOK')"
prop="IsTestOK"
style="position: relative"
>
<el-tag
:type="form.IsTestOK ? 'success' : 'danger'"
effect="plain"
v-if="form.IsTestOK !== null"
>
{{ $fd("DicomTest", form.IsTestOK) }}
</el-tag>
<!-- 测试DICOM AE -->
<el-button
v-if="
isEdit &&
hasPermi(['trials:trials-panel:setting:trial-config:save']) &&
form.IsPACSConnect
"
type="primary"
style="position: absolute; right: 100px; top: 0"
@click.stop="testSCPServerConnect"
>
{{ $t("common:button:DicomTest") }}
</el-button>
</el-form-item>
</template>
<el-form-item>
<!-- 保存 -->
<el-button
v-if="
form.IsTrialPACSConfirmed === false &&
hasPermi(['trials:trials-panel:setting:trial-config:save'])
"
type="primary"
@click="addOrUpdateDicomAE"
>
{{ $t("common:button:save") }}
</el-button>
<!-- 配置确认:disabled="!form.IsTestOK" -->
<el-button
v-if="
form.IsTrialPACSConfirmed === false &&
hasPermi(['trials:trials-panel:setting:trial-config:save'])
"
type="primary"
@click="handleConfirm"
>
{{ $t("trials:trialCfg:button:confirm") }}
</el-button>
<!-- 配置更新 -->
<el-button
v-if="
form.IsTrialPACSConfirmed === true &&
!isEdit &&
hasPermi(['trials:trials-panel:setting:trial-config:save'])
"
type="primary"
@click="isEdit = true"
>
{{ $t("trials:trialCfg:button:update") }}
</el-button>
<!-- 配置更新确认:disabled="!form.IsTestOK" -->
<el-button
v-if="
form.IsTrialPACSConfirmed === true &&
isEdit &&
hasPermi(['trials:trials-panel:setting:trial-config:save'])
"
type="primary"
@click="handleUpdate"
>
{{ $t("trials:trialCfg:button:updateAndConfirm") }}
</el-button>
<!-- 取消 -->
<el-button
v-if="
form.IsTrialPACSConfirmed === true &&
isEdit &&
hasPermi(['trials:trials-panel:setting:trial-config:save'])
"
type="primary"
@click.stop="confirmCancel"
>
{{ $t("common:button:cancel") }}
</el-button>
</el-form-item>
</el-form>
<!-- 配置信息签名框 -->
<el-dialog
v-if="signVisible"
:visible.sync="signVisible"
:close-on-click-modal="false"
width="600px"
custom-class="base-dialog-wrapper"
>
<div slot="title">
<span style="font-size: 18px">{{ $t("common:dialogTitle:sign") }}</span>
<span style="font-size: 12px; margin-left: 5px">{{
`(${$t("common:label:sign")}${currentUser})`
}}</span>
</div>
<SignForm
ref="signForm"
:sign-code-enum="signCode"
@closeDialog="closeSignDialog"
/>
</el-dialog>
<!-- 配置信息确认框 -->
<el-dialog
v-if="confirmVisible"
:visible.sync="confirmVisible"
:close-on-click-modal="false"
width="600px"
:title="$t('trials:trialCfg:dialogTitle:cfgConfirm')"
custom-class="base-dialog-wrapper"
>
<div class="base-dialog-body">
<el-table :data="confirmData" border style="width: 100%" size="small">
<!-- 配置项 -->
<el-table-column
prop="Name"
:label="$t('trials:trialCfg:table:cfgItem')"
show-overflow-tooltip
/>
<!-- 配置值 -->
<el-table-column
prop="NewVal"
:label="$t('trials:trialCfg:table:cfgVal')"
show-overflow-tooltip
/>
</el-table>
</div>
<div
class="base-dialog-footer"
style="text-align: right; margin-top: 10px"
>
<!-- 确认 -->
<el-button size="small" type="primary" @click="handleConfirmConfigData">
{{ $t("trials:trialCfg:button:confirmCfg") }}
</el-button>
</div>
</el-dialog>
<!-- 配置信息更新框 -->
<el-dialog
v-if="updateVisible"
:visible.sync="updateVisible"
:close-on-click-modal="false"
width="600px"
:title="$t('trials:trialCfg:dialogTitle:cfgConfirm')"
custom-class="base-dialog-wrapper"
>
<div class="base-dialog-body">
<el-table :data="confirmData" border style="width: 100%" size="small">
<!-- 配置项 -->
<el-table-column
prop="Name"
:label="$t('trials:trialCfg:table:cfgItem')"
show-overflow-tooltip
/>
<!-- 配置值(更改前) -->
<el-table-column
prop="OldVal"
:label="`${$t('trials:trialCfg:table:cfgVal')} ${$t(
'trials:trialCfg:table:beforeChange'
)}`"
show-overflow-tooltip
/>
<!-- 配置值(更改后) -->
<el-table-column
prop="NewVal"
:label="`${$t('trials:trialCfg:table:cfgVal')} ${$t(
'trials:trialCfg:table:updated'
)}`"
show-overflow-tooltip
>
<template slot-scope="scope">
<span
:class="{ fontColor: scope.row.NewVal !== scope.row.OldVal }"
>{{ scope.row.NewVal }}</span
>
</template>
</el-table-column>
</el-table>
</div>
<div
class="base-dialog-footer"
style="text-align: right; margin-top: 10px"
>
<!-- 确认 -->
<el-button size="small" type="primary" @click="handleUpdateConfigData">
{{ $t("trials:trialCfg:button:confirmCfg") }}
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
getTrialDicomAE,
addOrUpdateDicomAE,
testSCPServerConnect,
ConfigTrialPACSInfoConfirm,
} from "@/api/trials";
import SignForm from "@/views/trials/components/newSignForm";
import const_ from "@/const/sign-code";
export default {
name: "dicomConfig",
components: { SignForm },
data() {
return {
loading: false,
form: {
IsTestOK: null,
IsPACSConnect: true,
IsTrialPACSConfirmed: false,
CalledAE: null,
Ip: null,
Port: null,
Modality: null,
},
initialForm: {},
rules: {
IsPACSConnect: [
{
required: true,
message: this.$t("common:ruleMessage:specify"),
trigger: "blur",
},
],
CalledAE: [
{
required: true,
message: this.$t("common:ruleMessage:specify"),
trigger: "blur",
},
{
pattern: /[a-zA-Z0-9]/,
message: this.$t("common:ruleMessage:CallingAEPattern"),
trigger: "blur",
},
{
min: 1,
max: 16,
message: this.$t("common:ruleMessage:CallingAEPattern"),
trigger: "blur",
},
],
Ip: [
{
required: true,
message: this.$t("common:ruleMessage:specify"),
trigger: "blur",
},
{
validator: (rule, value, callback) => {
if (
value === "" ||
typeof value === "undefined" ||
value == null
) {
callback(new Error(this.$t("common:ruleMessage:ipPattern")));
} else {
const reg =
/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
if (!reg.test(value) && value !== "") {
callback(new Error(this.$t("common:ruleMessage:ipPattern")));
} else {
callback();
}
}
},
message: this.$t("common:ruleMessage:ipPattern"),
trigger: "blur",
},
],
Port: [
{
required: true,
message: this.$t("common:ruleMessage:specify"),
trigger: "blur",
},
{
type: "number",
min: 0,
max: 65535,
message: this.$t("common:ruleMessage:portPattern"),
trigger: "blur",
},
{
validator: (rule, value, callback) => {
if (
value &&
(String(value).includes(".") ||
new RegExp(/\D/g).test(String(value)))
) {
callback(new Error(this.$t("common:ruleMessage:portPattern")));
} else {
callback();
}
},
trigger: "blur",
},
],
},
isEdit: false,
Id: null,
signVisible: false,
signCode: null,
currentUser: zzSessionStorage.getItem("userName"),
confirmData: [],
confirmVisible: false,
updateVisible: false,
};
},
methods: {
changeConnect(val) {
if (!val) {
this.form.CalledAE = null;
this.form.Ip = null;
this.form.Port = null;
this.form.Modality = null;
this.form.IsTestOK = null;
}
},
initForm(res) {
this.getInfo();
},
// 取消配置更新
confirmCancel() {
this.isEdit = false;
this.form = { ...this.initialForm };
},
// 测试dicomAE
async testSCPServerConnect() {
try {
let res = await this.addOrUpdateDicomAE();
if (!res) return;
this.loading = true;
let d = await testSCPServerConnect(res);
this.loading = false;
if (d.IsSuccess) {
this.form.IsTestOK = d.Result;
}
} catch (err) {
console.log(err);
this.loading = false;
}
},
// 获取配置
async getInfo() {
try {
let data = {
TrialId: this.$route.query.trialId,
};
this.loading = true;
let res = await getTrialDicomAE(data);
this.loading = false;
if (res.IsSuccess) {
this.form.IsPACSConnect = res.OtherInfo.IsPACSConnect;
this.form.IsTrialPACSConfirmed = res.OtherInfo.IsTrialPACSConfirmed;
if (!res.OtherInfo.IsTrialPACSConfirmed) {
this.isEdit = true;
}
this.form.IsTestOK = res.Result.IsTestOK;
this.form.CalledAE = res.Result.CalledAE;
this.form.Ip = res.Result.IP;
this.form.Port = res.Result.Port;
this.Id = res.Result.Id;
this.initialForm.IsPACSConnect = res.OtherInfo.IsPACSConnect;
this.initialForm.IsTrialPACSConfirmed =
res.OtherInfo.IsTrialPACSConfirmed;
this.initialForm.IsTestOK = res.Result.IsTestOK;
this.initialForm.CalledAE = res.Result.CalledAE;
this.initialForm.Ip = res.Result.IP;
this.initialForm.Port = res.Result.Port;
}
} catch (err) {
console.log(err);
this.loading = false;
}
},
// 新增或修改配置
async addOrUpdateDicomAE() {
try {
let validate = await this.$refs.dicomConfigForm.validate();
if (!validate) return;
if (this.Id) {
this.form.Id = this.Id;
}
this.form.TrialId = this.$route.query.trialId;
this.loading = true;
let res = await addOrUpdateDicomAE(this.form);
this.loading = false;
if (res.IsSuccess) {
// this.$emit("refresh");
return res.Result;
}
return false;
} catch (err) {
console.log(err);
this.loading = false;
return false;
}
},
// 关闭签名框
closeSignDialog(isSign, signInfo) {
if (isSign) {
this.signConfirm(signInfo);
} else {
this.signVisible = false;
}
},
async signConfirm(signInfo) {
try {
let data = {
data: {
TrialId: this.$route.query.trialId,
IsPACSConnect: this.form.IsPACSConnect,
IsTrialPACSConfirmed: true,
},
signInfo,
};
let res = await ConfigTrialPACSInfoConfirm(data);
if (res.IsSuccess) {
this.signVisible = false;
this.confirmVisible = false;
this.updateVisible = false;
this.isEdit = false;
res = await this.addOrUpdateDicomAE();
if (res) this.$emit("refresh");
}
} catch (err) {
console.log(err);
}
},
// 配置更新
handleUpdateConfigData() {
const { DicomConfigUpdates } = const_.processSignature;
this.signCode = DicomConfigUpdates;
this.signVisible = true;
},
// 配置确认
handleConfirmConfigData() {
const { DicomConfigConfirmation } = const_.processSignature;
this.signCode = DicomConfigConfirmation;
this.signVisible = true;
},
// 打开配置信息确认框
handleConfirm() {
this.$refs["dicomConfigForm"].validate(async (valid) => {
if (!valid) return;
if (!this.form.IsTestOK)
return this.$message.warning(
this.$t("trials:dicomCfg:message:IsTestNo")
);
this.getConfigArr();
this.confirmVisible = true;
});
},
// 打开配置信息更新框
handleUpdate() {
this.$refs["dicomConfigForm"].validate(async (valid) => {
if (!valid) return;
if (!this.form.IsTestOK)
return this.$message.warning(
this.$t("trials:dicomCfg:message:IsTestNo")
);
this.getConfigArr();
this.updateVisible = true;
});
},
// 配置信息数组结构
getConfigArr() {
this.confirmData = [
{
Name: this.$t("trials:dicomCfg:form:pacsLine"), // pacs直连
NewVal: this.$fd("PACSConnectMode", this.form.IsPACSConnect),
OldVal: this.$fd("PACSConnectMode", this.initialForm.IsPACSConnect),
},
{
Name: this.$t("trials:dicomCfg:form:CalledAE"), // AE名称
NewVal: this.form.CalledAE,
OldVal: this.initialForm.CalledAE,
},
{
Name: this.$t("trials:dicomCfg:form:Ip"), // IP地址
NewVal: this.form.Ip,
OldVal: this.initialForm.Ip,
},
{
Name: this.$t("trials:dicomCfg:form:Port"),
NewVal: this.form.Port,
OldVal: this.initialForm.Port,
},
{
Name: this.$t("trials:dicomCfg:form:IsTestOK"), // 状态
NewVal: this.$fd("DicomTest", this.form.IsTestOK),
OldVal: this.$fd("DicomTest", this.initialForm.IsTestOK),
},
];
},
},
};
</script>
<style lang="scss" scoped>
.fontColor {
color: red;
}
</style>