Merge branch 'master' of https://git.yunzer.cn/yunzerwebsite/yunzerwebsiteallinone
This commit is contained in:
@@ -1,459 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="title"
|
||||
width="600px"
|
||||
:close-on-click-modal="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
label-position="right"
|
||||
>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
placeholder="请输入姓名"
|
||||
maxlength="30"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="账号" prop="account">
|
||||
<el-input
|
||||
v-model="form.account"
|
||||
placeholder="请输入账号"
|
||||
maxlength="50"
|
||||
show-word-limit
|
||||
/>
|
||||
<div class="form-tip">
|
||||
账号用于登录系统，建议使用英文或数字
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
maxlength="64"
|
||||
show-word-limit
|
||||
v-if="!isEdit"
|
||||
/>
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
placeholder="留空表示不修改密码"
|
||||
maxlength="64"
|
||||
show-word-limit
|
||||
v-else
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="性别" prop="gender">
|
||||
<el-radio-group v-model="form.gender">
|
||||
<el-radio :label="1">男</el-radio>
|
||||
<el-radio :label="2">女</el-radio>
|
||||
<el-radio :label="0">未知</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="生日" prop="birthday">
|
||||
<el-date-picker
|
||||
v-model="form.birthday"
|
||||
type="date"
|
||||
placeholder="请选择生日"
|
||||
style="width: 100%"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="所属单位" prop="affiliate_unit">
|
||||
<el-tree-select
|
||||
v-model="form.affiliate_unit"
|
||||
:data="orgOptions"
|
||||
:props="treeProps"
|
||||
placeholder="请选择所属单位"
|
||||
clearable
|
||||
check-strictly
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="所属部门" prop="department">
|
||||
<el-tree-select
|
||||
v-model="form.department"
|
||||
:data="orgOptions"
|
||||
:props="treeProps"
|
||||
placeholder="请选择所属部门"
|
||||
clearable
|
||||
check-strictly
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="职位" prop="position">
|
||||
<el-select
|
||||
v-model="form.position"
|
||||
:loading="positionLoading"
|
||||
placeholder="请选择职位"
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
clearable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in positionOptions"
|
||||
:key="item.id"
|
||||
:label="item.position_name"
|
||||
:value="item.position_name"
|
||||
/>
|
||||
</el-select>
|
||||
<div class="form-tip">
|
||||
可下拉选择职位表中职位，也可直接输入新职位
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="学历" prop="education">
|
||||
<el-select
|
||||
v-model="form.education"
|
||||
placeholder="请选择学历"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="博士" value="博士" />
|
||||
<el-option label="硕士" value="硕士" />
|
||||
<el-option label="本科" value="本科" />
|
||||
<el-option label="专科" value="专科" />
|
||||
<el-option label="高中" value="高中" />
|
||||
<el-option label="其他" value="其他" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="民族" prop="nation">
|
||||
<el-input
|
||||
v-model="form.nation"
|
||||
placeholder="请输入民族"
|
||||
maxlength="20"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电话" prop="phone">
|
||||
<el-input
|
||||
v-model="form.phone"
|
||||
placeholder="请输入电话"
|
||||
maxlength="20"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="微信" prop="wechat">
|
||||
<el-input
|
||||
v-model="form.wechat"
|
||||
placeholder="请输入微信"
|
||||
maxlength="50"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input
|
||||
v-model="form.email"
|
||||
placeholder="请输入邮箱"
|
||||
maxlength="100"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="家庭住址" prop="home_address">
|
||||
<el-input
|
||||
v-model="form.home_address"
|
||||
placeholder="请输入家庭住址"
|
||||
maxlength="255"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态" prop="account_status">
|
||||
<el-radio-group v-model="form.account_status">
|
||||
<el-radio :label="1">正常</el-radio>
|
||||
<el-radio :label="0">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" :loading="loading">
|
||||
{{ isEdit ? '保存' : '创建' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { getOrganizationList, getPositionList } from '@/api/organization'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
formData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'save'])
|
||||
|
||||
const visible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit('update:modelValue', value)
|
||||
})
|
||||
|
||||
const formRef = ref()
|
||||
const loading = ref(false)
|
||||
|
||||
const treeProps = {
|
||||
value: 'id',
|
||||
label: 'org_name',
|
||||
children: 'children'
|
||||
}
|
||||
|
||||
const orgOptions = ref([])
|
||||
const positionOptions = ref([])
|
||||
const positionLoading = ref(false)
|
||||
|
||||
const emptyForm = () => ({
|
||||
name: '',
|
||||
account: '',
|
||||
gender: 0,
|
||||
birthday: '',
|
||||
affiliate_unit: '',
|
||||
department: '',
|
||||
position: '',
|
||||
education: '',
|
||||
nation: '',
|
||||
phone: '',
|
||||
wechat: '',
|
||||
email: '',
|
||||
home_address: '',
|
||||
account_status: 1
|
||||
})
|
||||
|
||||
const form = ref(emptyForm())
|
||||
|
||||
const rules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入姓名', trigger: 'blur' },
|
||||
{ min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
|
||||
],
|
||||
account: [
|
||||
{ required: true, message: '请输入账号', trigger: 'blur' },
|
||||
{ min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' },
|
||||
{ pattern: /^[a-zA-Z0-9_-]+$/, message: '只能包含英文、数字、下划线和横线', trigger: 'blur' }
|
||||
],
|
||||
gender: [
|
||||
{ required: true, message: '请选择性别', trigger: 'change' }
|
||||
],
|
||||
birthday: [
|
||||
{ required: false }
|
||||
],
|
||||
affiliate_unit: [
|
||||
{ required: false }
|
||||
],
|
||||
department: [
|
||||
{ required: false }
|
||||
],
|
||||
position: [
|
||||
{ required: false }
|
||||
],
|
||||
education: [
|
||||
{ required: false }
|
||||
],
|
||||
nation: [
|
||||
{ required: false }
|
||||
],
|
||||
phone: [
|
||||
{ required: false },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
||||
],
|
||||
wechat: [
|
||||
{ required: false }
|
||||
],
|
||||
email: [
|
||||
{ required: false },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
|
||||
],
|
||||
home_address: [
|
||||
{ required: false }
|
||||
],
|
||||
account_status: [
|
||||
{ required: true, message: '请选择状态', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
|
||||
const title = computed(() => props.isEdit ? '编辑员工' : '新建员工')
|
||||
|
||||
const loadOrgOptions = async () => {
|
||||
try {
|
||||
const res = await getOrganizationList()
|
||||
const data = res?.data || res || []
|
||||
orgOptions.value = buildOrgTree(data)
|
||||
} catch (error) {
|
||||
ElMessage.error(error?.message || '加载组织列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 收集部门自身及其所有上级组织ID（职位可挂在任意层级组织上，如集团级“总经理”）
|
||||
const collectOrgSelfAndAncestors = (deptId) => {
|
||||
const ids = new Set()
|
||||
if (!deptId) return ids
|
||||
const parentMap = {}
|
||||
const walk = (nodes) => {
|
||||
nodes.forEach((n) => {
|
||||
parentMap[n.id] = n.parent_id
|
||||
if (n.children?.length) walk(n.children)
|
||||
})
|
||||
}
|
||||
walk(orgOptions.value)
|
||||
let cur = Number(deptId)
|
||||
while (cur && !ids.has(cur)) {
|
||||
ids.add(cur)
|
||||
cur = parentMap[cur]
|
||||
}
|
||||
return ids
|
||||
}
|
||||
|
||||
// 根据所选部门加载职位选项
|
||||
const loadPositionOptions = async () => {
|
||||
const departmentId = parseInt(form.value.department, 10) || 0
|
||||
positionLoading.value = true
|
||||
try {
|
||||
const res = await getPositionList()
|
||||
const data = res?.data || res || []
|
||||
const list = Array.isArray(data) ? data : []
|
||||
const enabled = list.filter((p) => p.status === 1)
|
||||
if (!departmentId) {
|
||||
positionOptions.value = enabled
|
||||
} else {
|
||||
// 允许选择本部门及其上级组织的职位
|
||||
const allowed = collectOrgSelfAndAncestors(departmentId)
|
||||
positionOptions.value = enabled.filter((p) => allowed.has(Number(p.department_id)))
|
||||
}
|
||||
} catch (error) {
|
||||
positionOptions.value = []
|
||||
} finally {
|
||||
positionLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 部门变化时联动刷新职位并清空已选职位
|
||||
watch(() => form.value.department, (newVal, oldVal) => {
|
||||
if (!props.modelValue) return
|
||||
if (newVal !== oldVal) {
|
||||
if (oldVal !== undefined && oldVal !== '') {
|
||||
form.value.position = ''
|
||||
}
|
||||
loadPositionOptions()
|
||||
}
|
||||
})
|
||||
|
||||
const buildOrgTree = (data) => {
|
||||
const tree = []
|
||||
const map = {}
|
||||
|
||||
// 创建映射
|
||||
data.forEach(item => {
|
||||
map[item.id] = { ...item, children: [] }
|
||||
})
|
||||
|
||||
// 构建树形结构
|
||||
data.forEach(item => {
|
||||
const node = map[item.id]
|
||||
if (item.parent_id === 0) {
|
||||
tree.push(node)
|
||||
} else {
|
||||
const parent = map[item.parent_id]
|
||||
if (parent) {
|
||||
parent.children.push(node)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return tree
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return
|
||||
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
loading.value = true
|
||||
|
||||
const formData = { ...form.value }
|
||||
|
||||
emit('save', formData)
|
||||
loading.value = false
|
||||
} catch (error) {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
visible.value = false
|
||||
formRef.value?.resetFields()
|
||||
form.value = emptyForm()
|
||||
}
|
||||
|
||||
const initForm = () => {
|
||||
if (props.isEdit && props.formData) {
|
||||
// affiliate_unit/department 存组织ID（字符串），转数字以匹配树节点value；一次性赋值避免触发部门watch清空职位
|
||||
const toOrgId = (val) => (val === null || val === undefined || val === '' ? '' : Number(val))
|
||||
form.value = {
|
||||
...props.formData,
|
||||
affiliate_unit: toOrgId(props.formData.affiliate_unit),
|
||||
department: toOrgId(props.formData.department)
|
||||
}
|
||||
} else {
|
||||
form.value = emptyForm()
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => props.modelValue, async (newVal) => {
|
||||
if (newVal) {
|
||||
// 先加载下拉选项再回填表单，确保已有值能正确映射label
|
||||
await Promise.all([loadOrgOptions(), loadPositionOptions()])
|
||||
initForm()
|
||||
}
|
||||
}, { immediate: true })
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.form-tip {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,307 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="title"
|
||||
width="600px"
|
||||
:close-on-click-modal="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
label-position="right"
|
||||
>
|
||||
<el-form-item label="组织名称" prop="org_name">
|
||||
<el-input
|
||||
v-model="form.org_name"
|
||||
placeholder="请输入组织名称"
|
||||
maxlength="50"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="组织编码" prop="org_code">
|
||||
<el-input
|
||||
v-model="form.org_code"
|
||||
placeholder="请输入组织编码"
|
||||
maxlength="20"
|
||||
show-word-limit
|
||||
/>
|
||||
<div class="form-tip">
|
||||
组织编码用于系统内部标识，建议使用英文或数字
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="上级组织" prop="parent_id">
|
||||
<el-tree-select
|
||||
v-model="form.parent_id"
|
||||
:data="orgOptions"
|
||||
:props="treeProps"
|
||||
placeholder="请选择上级组织"
|
||||
clearable
|
||||
check-strictly
|
||||
style="width: 100%"
|
||||
/>
|
||||
<div class="form-tip">
|
||||
选择上级组织，顶级组织请留空
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="组织类型" prop="is_company">
|
||||
<el-radio-group v-model="form.is_company">
|
||||
<el-radio :label="1">企业单位</el-radio>
|
||||
<el-radio :label="0">部门</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="负责人" prop="leader_id">
|
||||
<el-select
|
||||
v-model="form.leader_id"
|
||||
placeholder="请选择负责人"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="employee in employeeOptions"
|
||||
:key="employee.id"
|
||||
:label="employee.name"
|
||||
:value="employee.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number
|
||||
v-model="form.sort"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
placeholder="请输入排序值"
|
||||
style="width: 100%"
|
||||
/>
|
||||
<div class="form-tip">
|
||||
数字越小，排序越靠前
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio :label="1">启用</el-radio>
|
||||
<el-radio :label="0">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入备注信息"
|
||||
maxlength="500"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" :loading="loading">
|
||||
{{ isEdit ? '保存' : '创建' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { getOrganizationList, getEmployeeList } from '@/api/organization'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
formData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'save'])
|
||||
|
||||
const visible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit('update:modelValue', value)
|
||||
})
|
||||
|
||||
const formRef = ref()
|
||||
const loading = ref(false)
|
||||
|
||||
const treeProps = {
|
||||
value: 'id',
|
||||
label: 'org_name',
|
||||
children: 'children'
|
||||
}
|
||||
|
||||
const orgOptions = ref([])
|
||||
const employeeOptions = ref([])
|
||||
|
||||
const emptyForm = () => ({
|
||||
org_name: '',
|
||||
org_code: '',
|
||||
parent_id: null,
|
||||
leader_id: null,
|
||||
is_company: 0,
|
||||
sort: 0,
|
||||
status: 1,
|
||||
remark: ''
|
||||
})
|
||||
|
||||
const form = ref(emptyForm())
|
||||
|
||||
const rules = {
|
||||
org_name: [
|
||||
{ required: true, message: '请输入组织名称', trigger: 'blur' },
|
||||
{ min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
|
||||
],
|
||||
org_code: [
|
||||
{ required: true, message: '请输入组织编码', trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
|
||||
{ pattern: /^[a-zA-Z0-9_-]+$/, message: '只能包含英文、数字、下划线和横线', trigger: 'blur' }
|
||||
],
|
||||
parent_id: [
|
||||
{ required: true, message: '请选择上级组织', trigger: 'change' }
|
||||
],
|
||||
is_company: [
|
||||
{ required: true, message: '请选择组织类型', trigger: 'change' }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: '请输入排序值', trigger: 'blur' }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: '请选择状态', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
|
||||
const title = computed(() => props.isEdit ? '编辑组织' : '新建组织')
|
||||
|
||||
const loadOrgOptions = async () => {
|
||||
try {
|
||||
const res = await getOrganizationList()
|
||||
const data = res?.data || res || []
|
||||
orgOptions.value = buildOrgTree(Array.isArray(data) ? data : [])
|
||||
} catch (error) {
|
||||
ElMessage.error(error?.message || '加载组织列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
const loadEmployeeOptions = async () => {
|
||||
try {
|
||||
const res = await getEmployeeList()
|
||||
const data = res?.data || res || []
|
||||
employeeOptions.value = (Array.isArray(data) ? data : []).map(item => ({
|
||||
id: item.id,
|
||||
name: item.name
|
||||
}))
|
||||
} catch (error) {
|
||||
ElMessage.error(error?.message || '加载员工列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
const buildOrgTree = (data) => {
|
||||
const tree = []
|
||||
const map = {}
|
||||
|
||||
// 创建映射
|
||||
data.forEach(item => {
|
||||
map[item.id] = { ...item, children: [] }
|
||||
})
|
||||
|
||||
// 构建树形结构
|
||||
data.forEach(item => {
|
||||
const node = map[item.id]
|
||||
if (item.parent_id === 0) {
|
||||
tree.push(node)
|
||||
} else {
|
||||
const parent = map[item.parent_id]
|
||||
if (parent) {
|
||||
parent.children.push(node)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return tree
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return
|
||||
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
loading.value = true
|
||||
|
||||
const formData = { ...form.value }
|
||||
if (formData.parent_id === 0) {
|
||||
formData.parent_id = null
|
||||
}
|
||||
|
||||
emit('save', formData)
|
||||
loading.value = false
|
||||
} catch (error) {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
visible.value = false
|
||||
formRef.value?.resetFields()
|
||||
form.value = emptyForm()
|
||||
}
|
||||
|
||||
const initForm = () => {
|
||||
if (props.isEdit && props.formData) {
|
||||
form.value = {
|
||||
...props.formData,
|
||||
parent_id: props.formData.parent_id || null,
|
||||
leader_id: props.formData.leader_id || null
|
||||
}
|
||||
} else {
|
||||
// 新建：保留父组件预填值（如添加子组织时预设的上级组织）
|
||||
form.value = {
|
||||
...emptyForm(),
|
||||
...props.formData
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => props.modelValue, async (newVal) => {
|
||||
if (newVal) {
|
||||
// 先加载下拉选项再回填表单，确保已有值能正确映射label
|
||||
await Promise.all([loadOrgOptions(), loadEmployeeOptions()])
|
||||
initForm()
|
||||
}
|
||||
}, { immediate: true })
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.form-tip {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,259 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
title="组织设置"
|
||||
width="600px"
|
||||
:close-on-click-modal="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
label-position="right"
|
||||
>
|
||||
<el-form-item label="默认组织类型" prop="default_org_type">
|
||||
<el-radio-group v-model="form.default_org_type">
|
||||
<el-radio :label="1">企业单位</el-radio>
|
||||
<el-radio :label="0">部门</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="form-tip">
|
||||
设置新建组织时的默认类型
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="自动生成编码" prop="auto_generate_code">
|
||||
<el-switch
|
||||
v-model="form.auto_generate_code"
|
||||
active-text="开启"
|
||||
inactive-text="关闭"
|
||||
/>
|
||||
<div class="form-tip">
|
||||
开启后系统将自动生成组织编码
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="编码前缀" prop="code_prefix">
|
||||
<el-input
|
||||
v-model="form.code_prefix"
|
||||
placeholder="请输入编码前缀"
|
||||
maxlength="10"
|
||||
show-word-limit
|
||||
:disabled="!form.auto_generate_code"
|
||||
/>
|
||||
<div class="form-tip">
|
||||
自动生成编码时的前缀，如：ORG、DEPT等
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="编码长度" prop="code_length">
|
||||
<el-input-number
|
||||
v-model="form.code_length"
|
||||
:min="4"
|
||||
:max="20"
|
||||
placeholder="请输入编码长度"
|
||||
:disabled="!form.auto_generate_code"
|
||||
/>
|
||||
<div class="form-tip">
|
||||
自动生成编码时的长度，包含前缀
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="默认排序" prop="default_sort">
|
||||
<el-input-number
|
||||
v-model="form.default_sort"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
placeholder="请输入默认排序值"
|
||||
/>
|
||||
<div class="form-tip">
|
||||
新建组织时的默认排序值
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="默认状态" prop="default_status">
|
||||
<el-radio-group v-model="form.default_status">
|
||||
<el-radio :label="1">启用</el-radio>
|
||||
<el-radio :label="0">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="显示层级" prop="max_level">
|
||||
<el-input-number
|
||||
v-model="form.max_level"
|
||||
:min="1"
|
||||
:max="10"
|
||||
placeholder="请输入最大显示层级"
|
||||
/>
|
||||
<div class="form-tip">
|
||||
组织树形结构最多显示的层级数
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="批量操作" prop="batch_operations">
|
||||
<el-switch
|
||||
v-model="form.batch_operations"
|
||||
active-text="开启"
|
||||
inactive-text="关闭"
|
||||
/>
|
||||
<div class="form-tip">
|
||||
开启后支持批量操作组织
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="导出功能" prop="export_enabled">
|
||||
<el-switch
|
||||
v-model="form.export_enabled"
|
||||
active-text="开启"
|
||||
inactive-text="关闭"
|
||||
/>
|
||||
<div class="form-tip">
|
||||
开启后支持导出组织架构数据
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="导入功能" prop="import_enabled">
|
||||
<el-switch
|
||||
v-model="form.import_enabled"
|
||||
active-text="开启"
|
||||
inactive-text="关闭"
|
||||
/>
|
||||
<div class="form-tip">
|
||||
开启后支持导入组织架构数据
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="同步员工" prop="sync_employee">
|
||||
<el-switch
|
||||
v-model="form.sync_employee"
|
||||
active-text="开启"
|
||||
inactive-text="关闭"
|
||||
/>
|
||||
<div class="form-tip">
|
||||
开启后创建组织时自动同步员工信息
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" :loading="loading">
|
||||
保存设置
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'changed'])
|
||||
|
||||
const visible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit('update:modelValue', value)
|
||||
})
|
||||
|
||||
const formRef = ref()
|
||||
const loading = ref(false)
|
||||
|
||||
const emptyForm = () => ({
|
||||
default_org_type: 1,
|
||||
auto_generate_code: true,
|
||||
code_prefix: 'ORG',
|
||||
code_length: 8,
|
||||
default_sort: 0,
|
||||
default_status: 1,
|
||||
max_level: 5,
|
||||
batch_operations: true,
|
||||
export_enabled: true,
|
||||
import_enabled: true,
|
||||
sync_employee: false
|
||||
})
|
||||
|
||||
const form = ref(emptyForm())
|
||||
|
||||
const rules = {
|
||||
default_org_type: [
|
||||
{ required: true, message: '请选择默认组织类型', trigger: 'change' }
|
||||
],
|
||||
auto_generate_code: [
|
||||
{ required: true, message: '请选择是否自动生成编码', trigger: 'change' }
|
||||
],
|
||||
code_prefix: [
|
||||
{ required: true, message: '请输入编码前缀', trigger: 'blur' },
|
||||
{ min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
|
||||
],
|
||||
code_length: [
|
||||
{ required: true, message: '请输入编码长度', trigger: 'blur' }
|
||||
],
|
||||
default_sort: [
|
||||
{ required: true, message: '请输入默认排序值', trigger: 'blur' }
|
||||
],
|
||||
default_status: [
|
||||
{ required: true, message: '请选择默认状态', trigger: 'change' }
|
||||
],
|
||||
max_level: [
|
||||
{ required: true, message: '请输入最大显示层级', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return
|
||||
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
loading.value = true
|
||||
|
||||
// 这里可以调用API保存设置
|
||||
// await saveOrgSettings(form.value)
|
||||
|
||||
ElMessage.success('设置保存成功')
|
||||
emit('changed')
|
||||
loading.value = false
|
||||
visible.value = false
|
||||
} catch (error) {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
visible.value = false
|
||||
formRef.value?.resetFields()
|
||||
form.value = emptyForm()
|
||||
}
|
||||
|
||||
// 监听自动生成编码开关
|
||||
watch(() => form.value.auto_generate_code, (newVal) => {
|
||||
if (!newVal) {
|
||||
form.value.code_prefix = ''
|
||||
form.value.code_length = 8
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.form-tip {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user