web/src/views/settings/index.vue

<template>
  <div class="container-wrapper">
    <Panel title="基础信息">
      <div class="form">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto"
                 class="demo-ruleForm" status-icon label-position="top">
          <el-descriptions
              direction="vertical"
              :column="3"
              :label-width="100"
              :label-position="'top'"
              :border="false"
              style="width: 100%"
          >
            <el-descriptions-item label="机构名称">
              <el-form-item prop="common_name">
                <el-input v-model="ruleForm.common_name"/>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="机构简称">
              <el-form-item>
                <el-input v-model="ruleForm.common_sortName" style="margin: 0 24px"/>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="定点机构编码">
              <el-form-item prop="social_fixmedinsCode">
                <el-input v-model="ruleForm.social_fixmedinsCode"/>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="定点机构名称">
              <el-form-item prop="social_fixmedinsName">
                <el-input v-model="ruleForm.social_fixmedinsName"/>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="就医区域划分">
              <el-form-item prop="social_mdtrtareaAdmvs">
                <el-input v-model="ruleForm.social_mdtrtareaAdmvs" style="margin: 0 24px"/>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="医保接口">
              <el-form-item prop="social_url">
                <el-input v-model="ruleForm.social_url"/>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="电子凭证接口">
              <el-form-item prop="social_certUrl">
                <el-input v-model="ruleForm.social_certUrl"/>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="数字签名">
              <el-form-item prop="social_cainfo">
                <el-input v-model="ruleForm.social_cainfo" style="margin:0 24px"/>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item
                :rowspan="2"
                label="logo上传">
              <el-form-item>
                <UpLoad v-model="uploadURL" ref="uploadRef" @uploadSuccess="uploadSuccess"
                        style="margin-left: 24px"></UpLoad>
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
      </div>
      <div style="display: flex;justify-content: flex-end;padding: 0 24px">
        <span class="default-btn" @click="submitForm(ruleFormRef)">保存</span>
      </div>
    </Panel>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import {ElMessage, type FormInstance, type FormRules} from 'element-plus'
import {post} from "@/utils/request.ts";
import Panel from "@/components/common/Panel.vue";
import UpLoad from "@/components/UpLoad.vue";
import {loadConfig} from "@/utils/config.ts";

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<any>({
  common_name: '',
  common_sortName: '',
  social_fixmedinsCode: '',
  social_fixmedinsName: '',
  social_insuplcAdmdvs: '',
  social_cainfo: '',
  social_url: "",
  social_certUrl: "",
  logoUrl: "",
})
const uploadRef = ref<any>()
onMounted(async () => {
  loadConfig().then((res: any) => {
    uploadURL.value = res.base_url + "file/upload";
  })
  post("common/config/list", null).then((list: any) => {
    for (let i = 0; i < list.length; i++) {
      ruleForm[list[i].k] = list[i].val
    }
  })
})
const rules = reactive<FormRules<any>>({
  common_name: {required: true, message: '机构名称不能为空', trigger: 'blur'},
  common_sortName: {required: true, message: '机构简称不能为空', trigger: 'blur'},
  social_fixmedinsCode: {required: true, message: '定点机构编码不能为空', trigger: 'blur'},
  social_fixmedinsName: {required: true, message: '定点机构名称不能为空', trigger: 'blur'},
  social_mdtrtareaAdmvs: {required: true, message: '就医区域划分不能为空', trigger: 'blur'},
  social_cainfo: {required: true, message: '数字签名不能为空', trigger: 'blur'},
  social_url: {required: true, message: '医保接口不能为空', trigger: 'blur'},
  social_certUrl: {required: true, message: '电子平转增接口不能为空', trigger: 'blur'},
})
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      post("common/config/edit", ruleForm).then((res: any) => {
        ElMessage.success("保存成功")
      })
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({length: 10000}).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
//上传图片
const uploadURL = ref<any>()
const uploadSuccess = (url: any) => {
  ruleForm.logoUrl = url
  post("common/config/edit", ruleForm).then(() => {
    ElMessage.success("保存图片成功")
  })
}
</script>
<style scoped lang="scss">
.container-wrapper {
  padding: 0 24px;
  background: #fff;
}

.form {
  width: 100%;
  padding: 0 24px;
}

:deep(.el-descriptions__label.el-descriptions__cell:not(.is-bordered-label).is-vertical-label) {
  padding-left: 24px;
}
</style>