hir_web/src/views/system/dicomAE/components/edit-dicom.vue

226 lines
6.0 KiB
Vue

<template>
<el-dialog
:visible.sync="visible"
:close-on-click-modal="false"
:title="title"
width="500px"
custom-class="base-dialog-wrapper"
append-to-body
:before-close="handleCancel"
v-dialogDrag
>
<el-form
ref="editVisitForm"
:model="form"
:rules="rules"
size="small"
label-width="100px"
>
<div class="base-dialog-body">
<!--AE Title-->
<el-form-item :label="$t('system:dicom:form:AETitle')" prop="CalledAE">
<el-input v-model.trim="form.CalledAE" clearable maxlength="16" />
</el-form-item>
<!--IP-->
<el-form-item :label="$t('system:dicom:form:IP')" prop="IP">
<el-input v-model.trim="form.IP" clearable />
</el-form-item>
<!--Port-->
<el-form-item :label="$t('system:dicom:form:Port')" prop="Port">
<el-input v-model.number="form.Port" type="number" clearable />
</el-form-item>
<!--Modality-->
<el-form-item :label="$t('system:dicom:form:Modality')" prop="Modality">
<el-input v-model="form.Modality" clearable />
</el-form-item>
<!--Description-->
<el-form-item
:label="$t('system:dicom:form:Description')"
prop="Description"
>
<el-input v-model="form.Description" clearable />
</el-form-item>
</div>
<div
class="base-dialog-footer"
style="text-align: right; margin-top: 10px"
>
<el-form-item style="text-align: right">
<el-button
size="small"
type="primary"
:disabled="btnLoading"
@click="handleCancel"
>
{{ $t("common:button:cancel") }}
</el-button>
<el-button
size="small"
type="primary"
:loading="btnLoading"
@click="setAE"
>
{{ $t("common:button:save") }}
</el-button>
</el-form-item>
</div>
</el-form>
</el-dialog>
</template>
<script>
import { setDiicomAE } from "@/api/dicomAE.js";
export default {
name: "editDicom",
props: {
visible: {
require: true,
default: false,
},
title: {
require: true,
default: "",
},
dicom: {
type: Object,
default: () => {
return {};
},
},
},
data() {
return {
form: {
CalledAE: null,
IP: null,
Port: null,
Modality: null,
Description: null,
Id: null,
},
rules: {
CalledAE: [
{
required: true,
message: this.$t("common:ruleMessage:specify"),
trigger: "blur",
},
{
pattern: /[a-zA-Z0-9]/,
message: this.$t("common:ruleMessage:CalledAEPattern"),
trigger: "blur",
},
{
min: 1,
max: 16,
message: this.$t("common:ruleMessage:CalledAEPattern"),
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:portPattern"),
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",
},
],
},
btnLoading: false,
};
},
watch: {
dicom: {
handler() {
Object.keys(this.form).forEach((key) => {
this.form[key] = this.dicom[key];
});
},
deep: true,
immediate: true,
},
},
methods: {
handleCancel() {
Object.keys(this.form).forEach((key) => {
this.form[key] = null;
});
this.$refs.editVisitForm.clearValidate();
this.$emit("update:visible", false);
},
// 新增或修改
async setAE() {
try {
let validate = await this.$refs.editVisitForm.validate();
if (!validate) return;
this.btnLoading = true;
let res = await setDiicomAE(this.form);
if (res.IsSuccess) {
if (this.form.Id) {
this.$message.success(
this.$t("common:message:updatedSuccessfully")
);
} else {
this.$message.success(this.$t("common:message:addedSuccessfully"));
}
this.btnLoading = false;
this.handleCancel();
this.$emit("getList");
} else {
this.$message.error(res.errorMessage);
}
} catch (err) {
this.btnLoading = false;
console.log(err);
}
},
},
};
</script>