generated from Leo_Ding/web-template
11
This commit is contained in:
qiuyuan
parent
3917c607aa
commit
e2ddb86645
@ -1,449 +0,0 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:width="800"
|
||||
:open="modal.open"
|
||||
:title="modal.title"
|
||||
:confirm-loading="modal.confirmLoading"
|
||||
:after-close="onAfterClose"
|
||||
:cancel-text="isViewMode ? '关闭' : '取消'"
|
||||
:ok-text="okText"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
:ok-button-props="{ hidden: isViewMode }"
|
||||
>
|
||||
<a-form layout="vertical" ref="formRef" :model="formData" :rules="formRules">
|
||||
<!-- 基本信息 -->
|
||||
<a-card title="基本信息" class="mb-4">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="服务组织名称" name="orgName">
|
||||
<a-input v-model:value="formData.orgName" :disabled="true" placeholder="系统生成或上级指定" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="组织编号" name="orgCode">
|
||||
<a-input v-model:value="formData.orgCode" :disabled="true" placeholder="系统自动生成" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="组织机构代码" name="orgIdentityCode" :required="!isViewMode">
|
||||
<a-input
|
||||
v-model:value="formData.orgIdentityCode"
|
||||
:disabled="isViewMode"
|
||||
placeholder="请输入统一社会信用代码等"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="等级" name="level" :required="!isViewMode">
|
||||
<a-select
|
||||
v-model:value="formData.level"
|
||||
:disabled="isViewMode"
|
||||
placeholder="请选择等级"
|
||||
>
|
||||
<a-select-option value="1">一级</a-select-option>
|
||||
<a-select-option value="2">二级</a-select-option>
|
||||
<a-select-option value="3">三级</a-select-option>
|
||||
<a-select-option value="4">四级</a-select-option>
|
||||
<a-select-option value="5">五级</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="负责人姓名" name="manager" :required="!isViewMode">
|
||||
<a-input
|
||||
v-model:value="formData.manager"
|
||||
:disabled="isViewMode"
|
||||
placeholder="请输入负责人姓名"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="联系电话" name="phone" :required="!isViewMode">
|
||||
<a-input
|
||||
v-model:value="formData.phone"
|
||||
:disabled="isViewMode"
|
||||
placeholder="请输入联系电话"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="法人姓名">
|
||||
<a-input
|
||||
v-model:value="formData.legalPerson"
|
||||
:disabled="isViewMode"
|
||||
placeholder="请输入法人姓名"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="法人联系电话">
|
||||
<a-input
|
||||
v-model:value="formData.legalPhone"
|
||||
:disabled="isViewMode"
|
||||
placeholder="请输入法人联系电话"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="营业执照名称">
|
||||
<a-input
|
||||
v-model:value="formData.businessLicenseName"
|
||||
:disabled="isViewMode"
|
||||
placeholder="请输入营业执照上的全称"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="登记机关">
|
||||
<a-input
|
||||
v-model:value="formData.registrationAuthority"
|
||||
:disabled="isViewMode"
|
||||
placeholder="如：南通市通州区市场监督管理局"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="登记证号">
|
||||
<a-input
|
||||
v-model:value="formData.registrationNumber"
|
||||
:disabled="isViewMode"
|
||||
placeholder="社会组织登记证号"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="中标组织">
|
||||
<a-select
|
||||
v-model:value="formData.isWinningOrg"
|
||||
:disabled="isViewMode"
|
||||
placeholder="请选择是否为中标组织"
|
||||
>
|
||||
<a-select-option value="yes">是</a-select-option>
|
||||
<a-select-option value="no">否</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
|
||||
<!-- 钱包设置 -->
|
||||
<a-card title="钱包设置" class="mb-4">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="使用钱包" name="useWallet">
|
||||
<a-switch v-model:checked="formData.useWallet" :disabled="isViewMode" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="可用钱包" name="availableWallets">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
v-model:value="formData.availableWallets"
|
||||
placeholder="选择可接入的钱包"
|
||||
:disabled="isViewMode || !formData.useWallet"
|
||||
>
|
||||
<a-select-option value="wallet_a">通用助餐钱包</a-select-option>
|
||||
<a-select-option value="wallet_b">居家服务钱包</a-select-option>
|
||||
<a-select-option value="wallet_c">康复辅具钱包</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
|
||||
<!-- 地址信息 -->
|
||||
<a-card title="地址信息" class="mb-4">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="24">
|
||||
<a-form-item label="服务组织地址" name="address" :required="!isViewMode">
|
||||
<a-cascader
|
||||
v-model:value="formData.address"
|
||||
:options="addressOptions"
|
||||
:disabled="isViewMode"
|
||||
placeholder="请选择省/市/区/街道"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="详细地址" name="detailAddress" :required="!isViewMode">
|
||||
<a-input
|
||||
v-model:value="formData.detailAddress"
|
||||
:disabled="isViewMode"
|
||||
placeholder="请输入街道门牌号等详细信息"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="地图定位地址">
|
||||
<a-input
|
||||
v-model:value="formData.location"
|
||||
placeholder="点击右侧按钮选择地图位置"
|
||||
readonly
|
||||
addon-after-icon="environment"
|
||||
:disabled="isViewMode"
|
||||
>
|
||||
<template #addonAfter>
|
||||
<a-button
|
||||
v-if="!isViewMode"
|
||||
type="link"
|
||||
@click="openMapSelector"
|
||||
>
|
||||
选择位置
|
||||
</a-button>
|
||||
<span v-else>已定位</span>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
|
||||
<!-- 资质上传 -->
|
||||
<a-card title="资质材料" class="mb-4">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="24">
|
||||
<a-form-item label="上传资质附件">
|
||||
<a-upload
|
||||
v-model:file-list="formData.qualificationFiles"
|
||||
:before-upload="beforeUploadFile"
|
||||
accept=".pdf,.doc,.docx"
|
||||
:max-count="3"
|
||||
:disabled="isViewMode"
|
||||
>
|
||||
<a-button v-if="!isViewMode" type="primary" ghost>
|
||||
<plus-outlined /> 上传文件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="上传资质图片">
|
||||
<a-upload
|
||||
list-type="picture-card"
|
||||
v-model:file-list="formData.qualificationImages"
|
||||
:before-upload="beforeUploadImage"
|
||||
:max-count="5"
|
||||
:disabled="isViewMode"
|
||||
>
|
||||
<div v-if="!isViewMode && formData.qualificationImages.length < 5">
|
||||
<plus-outlined />
|
||||
<div class="ant-upload-text">上传图片</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="上传营业执照">
|
||||
<a-upload
|
||||
list-type="picture-card"
|
||||
v-model:file-list="formData.businessLicenseImage"
|
||||
:before-upload="beforeUploadImage"
|
||||
:max-count="1"
|
||||
:disabled="isViewMode"
|
||||
>
|
||||
<div v-if="!isViewMode && !formData.businessLicenseImage.length">
|
||||
<plus-outlined />
|
||||
<div class="ant-upload-text">上传执照</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
|
||||
<!-- 其他信息 -->
|
||||
<a-card title="其他信息" class="mb-4">
|
||||
<a-form-item label="备注">
|
||||
<a-textarea
|
||||
v-model:value="formData.remark"
|
||||
rows="4"
|
||||
:disabled="isViewMode"
|
||||
placeholder="请输入备注信息"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-card>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, defineEmits, defineExpose, computed } from 'vue' // ✅ 补充 computed
|
||||
import { PlusOutlined } from '@ant-design/icons-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { useModal, useForm } from '@/hooks'
|
||||
|
||||
const emit = defineEmits(['ok'])
|
||||
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
|
||||
const { formData, formRef, formRules, resetForm } = useForm()
|
||||
|
||||
// 初始化数据模型
|
||||
formData.value = {
|
||||
orgName: '',
|
||||
orgCode: '',
|
||||
orgIdentityCode: '',
|
||||
level: '',
|
||||
manager: '',
|
||||
phone: '',
|
||||
legalPerson: '',
|
||||
legalPhone: '',
|
||||
businessLicenseName: '',
|
||||
registrationAuthority: '',
|
||||
registrationNumber: '',
|
||||
isWinningOrg: '',
|
||||
useWallet: false,
|
||||
availableWallets: [],
|
||||
address: [],
|
||||
detailAddress: '',
|
||||
location: '',
|
||||
qualificationFiles: [],
|
||||
qualificationImages: [],
|
||||
businessLicenseImage: [],
|
||||
remark: '',
|
||||
mode: 'edit' // 默认编辑模式
|
||||
}
|
||||
|
||||
// 表单验证规则：查看模式下无需验证
|
||||
formRules.value = {
|
||||
orgIdentityCode: [{ required: true, message: '请输入组织机构代码' }],
|
||||
level: [{ required: true, message: '请选择等级' }],
|
||||
manager: [{ required: true, message: '请输入负责人姓名' }],
|
||||
phone: [
|
||||
{ required: true, message: '请输入联系电话' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' }
|
||||
],
|
||||
address: [{ required: true, message: '请选择服务组织地址' }],
|
||||
detailAddress: [{ required: true, message: '请输入详细地址' }]
|
||||
}
|
||||
|
||||
// 地址选项
|
||||
const addressOptions = ref([
|
||||
{
|
||||
value: 'jiangsu',
|
||||
label: '江苏省',
|
||||
children: [
|
||||
{
|
||||
value: 'nantong',
|
||||
label: '南通市',
|
||||
children: [
|
||||
{
|
||||
value: 'tongzhou',
|
||||
label: '通州区',
|
||||
children: [
|
||||
{ value: 'liuqiao', label: '刘桥镇' },
|
||||
{ value: 'pingchao', label: '平潮镇' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
// ✅ 计算属性：是否为查看模式
|
||||
const isViewMode = computed(() => formData.value.mode === 'view')
|
||||
const okText = ref('确定')
|
||||
|
||||
/**
|
||||
* 打开地图选择器
|
||||
*/
|
||||
function openMapSelector() {
|
||||
formData.value.location = '江苏省南通市通州区刘桥镇人民政府附近 (经纬度: 32.1234, 120.5678)'
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件上传前校验（文件）
|
||||
*/
|
||||
function beforeUploadFile(file) {
|
||||
const isPdfOrDoc = [
|
||||
'application/pdf',
|
||||
'application/msword',
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
|
||||
].includes(file.type)
|
||||
if (!isPdfOrDoc) {
|
||||
message.error('仅支持上传 PDF 或 Word 文档!')
|
||||
return Upload.LIST_IGNORE
|
||||
}
|
||||
const isLt5M = file.size / 1024 / 1024 < 5
|
||||
if (!isLt5M) {
|
||||
message.error('文件大小不能超过 5MB!')
|
||||
return Upload.LIST_IGNORE
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* 图片上传前校验
|
||||
*/
|
||||
function beforeUploadImage(file) {
|
||||
const isImg = file.type.startsWith('image/')
|
||||
if (!isImg) {
|
||||
message.error('只能上传图片文件!')
|
||||
return false
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2
|
||||
if (!isLt2M) {
|
||||
message.error('图片大小不能超过 2MB!')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open({ record, mode = 'edit' }) {
|
||||
showModal({
|
||||
type: mode,
|
||||
title: mode === 'edit' ? '编辑服务组织' : '服务组织详情'
|
||||
})
|
||||
Object.assign(formData.value, record || {})
|
||||
formData.value.mode = mode
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* 提交处理（仅编辑模式触发）
|
||||
*/
|
||||
function handleOk() {
|
||||
if (isViewMode.value) return // 安全兜底
|
||||
|
||||
formRef.value
|
||||
.validateFields()
|
||||
.then((values) => {
|
||||
showLoading()
|
||||
try {
|
||||
console.log('提交数据:', values)
|
||||
setTimeout(() => {
|
||||
hideLoading()
|
||||
hideModal()
|
||||
emit('ok')
|
||||
message.success('操作成功')
|
||||
}, 800)
|
||||
} catch (e) {
|
||||
hideLoading()
|
||||
}
|
||||
})
|
||||
.catch(() => hideLoading())
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
hideModal()
|
||||
}
|
||||
|
||||
function onAfterClose() {
|
||||
resetForm()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mb-4 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.ant-upload-list-picture-card .ant-upload-list-item,
|
||||
.ant-upload-list-picture .ant-upload-list-item {
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
}
|
||||
</style>
|
||||
@ -1,42 +0,0 @@
|
||||
export default {
|
||||
welcome: '欢迎',
|
||||
home: '首页',
|
||||
system: '系统设置',
|
||||
menu: '菜单管理',
|
||||
user: '用户管理',
|
||||
setting: '信息设置',
|
||||
role: '角色管理',
|
||||
logger: '日志管理',
|
||||
'menu.account.settings': '个人设置',
|
||||
add: '添加',
|
||||
edit: '修改',
|
||||
delete: '删除',
|
||||
search: '搜索',
|
||||
login: '登录',
|
||||
register: '注册',
|
||||
dashboard: 'Dashboard',
|
||||
'dashboard.analysis': '分析页',
|
||||
'dashboard.monitor': '监控页',
|
||||
'dashboard.workplace': '工作台',
|
||||
'exception.403': '403',
|
||||
'exception.404': '404',
|
||||
'exception.500': '500',
|
||||
result: '结果页',
|
||||
'result.success': '成功页',
|
||||
'result.fail': '失败页',
|
||||
exception: '异常页',
|
||||
'exception.not-permission': '403',
|
||||
'exception.not-find': '404',
|
||||
'exception.server-error': '500',
|
||||
'exception.trigger': '触发错误',
|
||||
account: '个人页',
|
||||
'account.trigger': '触发报错',
|
||||
'account.logout': '退出登录',
|
||||
'dict': '字典管理',
|
||||
'dict-detail': '字典数据',
|
||||
workorderMenu: '工单管理',
|
||||
mineWorderOrder: '我下的工单',
|
||||
invalidWzorkOrder: '无效工单',
|
||||
abnormalWorkOrder: '异常工单',
|
||||
serviceWorkOrder: '服务工单'
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user