hir_web/src/views/system/hospital/components/form.vue

231 lines
9.3 KiB
Vue

<template>
<el-tabs v-model="activeTab" style="position: relative;height: 100%;">
<el-tab-pane name="hospital" :label="$t('system:hospital:tab:hospital')">
<div class="hospital">
<el-form ref="hospitalForm" size="small" :model="hospital" :rules="hospitalFormRules"
label-width="150px" style="width: 800px">
<el-card class="Basic" shadow="never" size="small">
<el-form-item :label="$t('system:hospital:name')" prop="HospitalName">
<el-input v-model.trim="hospital.HospitalName" :disabled="disabled" clearable />
</el-form-item>
<el-form-item :label="$t('system:hospital:code')" prop="HospitalCode">
<el-input v-model.trim="hospital.HospitalCode" :disabled="disabled || hasPermi(['role:oa'])"
clearable />
</el-form-item>
<el-form-item :label="$t('system:hospital:aliasName')" prop="HospitalAliasName">
<el-input v-model="hospital.HospitalAliasName" :disabled="disabled" clearable />
</el-form-item>
<el-form-item :label="$t('system:hospital:country')" prop="Country">
<el-input v-model="hospital.Country" :disabled="disabled" clearable />
</el-form-item>
<el-form-item :label="$t('system:hospital:province')" prop="Province">
<el-input v-model="hospital.Province" :disabled="disabled" clearable />
</el-form-item>
<el-form-item :label="$t('system:hospital:city')" prop="City">
<el-input v-model="hospital.City" :disabled="disabled" clearable />
</el-form-item>
<el-form-item :label="$t('system:hospital:address')" prop="Address">
<el-input v-model="hospital.Address" :disabled="disabled" clearable />
</el-form-item>
<el-form-item :label="$t('system:hospital:phone')" prop="Phone">
<el-input v-model="hospital.Phone" :disabled="disabled" clearable />
</el-form-item>
<el-form-item :label="$t('system:hospital:trialKeepCount')" prop="TrialKeepCount">
<el-input v-model="hospital.TrialKeepCount" :disabled="disabled || hasPermi(['role:oa'])"
type="number" clearable />
</el-form-item>
<el-form-item :label="$t('system:hospital:isCanConnectInternet')"
v-hasPermi="['system:hospital:connectInternet']">
<el-switch v-model="hospital.IsCanConnectInternet" active-color="#13ce66"
inactive-color="#ff4949" active-text="是" inactive-text="否" :disabled="disabled">
</el-switch>
</el-form-item>
<el-form-item :label="$t('system:hospital:logo')" prop="HospitalLogoPath">
<upload-logo :path.sync="hospital.HospitalLogoPath" :disabled="disabled" />
</el-form-item>
</el-card>
<el-form-item v-if="status === 'default' && hasPermi(['system:hospital:edit'])">
<el-button type="primary" size="small" style="margin: 10px 15px" :loading="btnLoading"
:disabled="btnLoading" @click="handleSave">{{ $t("system:hospital:save") }}</el-button>
</el-form-item>
</el-form>
<div class="btnBox" v-if="status !== 'default'">
<el-button type="primary" size="small" style="margin: 10px 15px" :loading="btnLoading"
:disabled="btnLoading" @click="handleSave">{{ $t("system:hospital:save") }}</el-button>
<el-button type="primary" size="small" style="margin: 10px 15px" @click="handleCancel">{{
$t("common:button:cancel") }}</el-button>
</div>
</div>
</el-tab-pane>
<el-tab-pane name="group" :label="$t('system:hospital:tab:group')">
<group-list v-if="activeTab === 'group'" />
</el-tab-pane>
</el-tabs>
</template>
<script>
import { getHospital } from "@/api/hospital.js";
import { addOrUpdateHIRHospital } from '@/api/admin'
import uploadLogo from "./uploadLogo.vue";
import groupList from "./groupList.vue";
export default {
name: "systemHospital",
components: { "upload-logo": uploadLogo, groupList },
props: {
status: {
type: String,
default: "default" // add edit default
},
rowData: {
type: Object,
default: () => {
return {}
}
}
},
data() {
return {
activeTab: 'hospital',
hospital: {
HospitalName: null,
HospitalAliasName: null,
HospitalCode: null,
Country: null,
City: null,
Province: null,
Address: null,
Phone: null,
IsCanConnectInternet: true,
Id: null,
TrialKeepCount: null,
HospitalLogoPath: null,
IsDefault: false
},
hospitalFormRules: {
HospitalName: [
{ required: true, message: "请输入医院名称", trigger: "blur" },
],
HospitalCode: [
{ required: true, message: "请输入医院编码", trigger: "blur" },
],
// HospitalLogoPath: [
// { required: true, message: "请上传医院logo", trigger: "blur" },
// ],
TrialKeepCount: [
{ required: true, message: "请输入未激活项目数", trigger: "blur" },
],
// HospitalAliasName: [
// { required: true, message: "请输入医院别称", trigger: "blur" },
// ],
// Country: [{ required: true, message: "请输入国家", trigger: "blur" }],
// City: [{ required: true, message: "请输入所在城市", trigger: "blur" }],
// Province: [
// { required: true, message: "请输入所在省份", trigger: "blur" },
// ],
// Address: [
// { required: true, message: "请输入医院地址", trigger: "blur" },
// ],
// Phone: [
// { required: true, message: "请输入医院联系方式", trigger: "blur" },
// ],
},
btnLoading: false,
};
},
mounted() {
if (this.status === 'default') {
this.getInfo();
}
if (this.status === 'edit') {
Object.keys(this.hospital).forEach(key => {
this.hospital[key] = this.rowData[key]
})
}
},
computed: {
disabled() {
return !this.hasPermi(["system:hospital:edit"]);
},
},
methods: {
clickTab(tab, event) {
this.activeTab = tab
console.log(this.activeTab)
// this.$router.push({ path: `/dictionary/template?tabActive=${tab.name}` });
},
async handleSave() {
if (this.btnLoading) return;
try {
let validate = await this.$refs.hospitalForm.validate();
if (!validate) return;
this.btnLoading = true;
let res = await addOrUpdateHIRHospital(this.hospital);
this.btnLoading = false;
if (res.IsSuccess) {
this.$message.success(this.$t("common:message:savedSuccessfully"));
if (this.status !== 'default') {
this.$emit("getList")
this.$emit("close")
}
}
} catch (err) {
this.btnLoading = false;
console.log(err);
}
},
// 获取医院信息
async getInfo() {
try {
let res = await getHospital();
if (res.IsSuccess) {
Object.keys(this.hospital).forEach((key) => {
this.hospital[key] = res.Result[key];
});
}
} catch (err) {
console.log(err);
}
},
handleCancel() {
this.$emit("close")
}
},
};
</script>
<style scoped>
::v-deep .is-error.my_new_pwd {
margin-bottom: 40px;
}
::v-deep .el-tabs__header {
position: absolute;
top: 0;
left: 0;
z-index: 999;
width: 100%;
}
::v-deep .el-tabs__content {
padding-top: 50px;
height: 100%;
}
::v-deep .el-tab-pane {
height: 100%;
}
.hospital {
width: 100%;
height: 100%;
overflow-y: auto;
}
.btnBox {
display: flex;
align-items: center;
justify-content: flex-end;
}
</style>