极客观点
项目管理
HarmonyOS
<template>
<!-- 编辑组织 -->
<div class="self-el-dialogs" v-dialogdrag>
<dialog-form v-model="selfshow" :rules="rules" :form.sync="form" :detail="detail" :request="organization"
:title="title" @close="close" @success="success" labelWidth="55px" size="custom" customClass="org-custom-class">
<!-- 添加校区 -->
<template v-if="detail.type == '3'">
<dialog-form-item label="上级">
<el-input v-model="form.pid_name" disabled autocomplete="off"></el-input>
</dialog-form-item>
<dialog-form-item label="名称" prop="name" :rules="{ required: true, message: '请输入校区名称', trigger: 'blur' }">
<el-input v-model="form.name" autocomplete="off" placeholder="请输入校区名称"></el-input>
</dialog-form-item>
<el-form-item label="区域" prop="province_id">
<area-cascader style="width: 100%" placeholder="请选择区域" :show-all-levels="true"
v-model:province_id="form.province_id" v-model:city_id="form.city_id" :leval="2" />
</el-form-item>
<dialog-form-item label="属性" prop="identity_id">
<select-options :request="classificationCode" :search="{ code: 'identity' }" v-model="form.identity_id"
placeholder="请选择校区属性"></select-options>
</dialog-form-item>
<dialog-form-item label="分类" prop="campus_type">
<el-select v-model="form.campus_type" placeholder="请选择校区分类">
<el-option :label="item.name" :value="item.id" v-for="(item, index) in campusType" :key="index"></el-option>
</el-select>
</dialog-form-item>
<!-- 地级市校区业绩统计(V1)待联调 -->
<dialog-form-item label="归属" v-if="detail.type == '3'" prop="area_belong_id">
<el-select v-model="form.area_belong_id" filterable placeholder="请选择归属" style="width: 240px">
<el-option v-for="item in areaArr" :key="item" :label="item.name" :value="item.id" />
</el-select>
</dialog-form-item>
<dialog-form-item label="激励业绩" prop="is_area_achievement" v-if="detail.type == '3'">
<el-radio-group v-model="form.is_area_achievement" class="ml-4" style="margin-left: 10px">
<el-radio label="1" size="large">核算</el-radio>
<el-radio label="2" size="large">不核算</el-radio>
</el-radio-group>
</dialog-form-item>
<dialog-form-item label="代码" prop="code" :rules="{ required: true, message: '请输入校区代码', trigger: 'blur' }">
<el-input v-model="form.code" autocomplete="off" placeholder="请输入校区代码"></el-input>
</dialog-form-item>
</template>
<!-- 添加部门 -->
<template v-if="detail.type == '4'">
<dialog-form-item label="上级">
<el-input v-model="form.pid_name" disabled autocomplete="off"></el-input>
</dialog-form-item>
<dialog-form-item label="名称" prop="dept_id" :rules="{ required: true, message: '请选择部门', trigger: 'change' }" v-if="type == '1'">
<select-options :request="dept" v-model="form.dept_id" :filterable="true" :remote="true" placeholder="请选择部门"
v-model:modelValueName="form.name" @change="deptChange"></select-options>
</dialog-form-item>
<dialog-form-item label="名称" prop="name" v-if="type == '2'">
<el-input class="name" v-model="form.name" autocomplete="off" :placeholder="'请输入部门名称'"></el-input>
</dialog-form-item>
<el-form-item label="区域" prop="province_id">
<area-cascader style="width: 100%" placeholder="请选择区域" :show-all-levels="true"
v-model:province_id="form.province_id" v-model:city_id="form.city_id" :leval="2" />
</el-form-item>
<dialog-form-item label="代码" prop="code" :rules="{ required: true, message: '请输入部门代码', trigger: 'blur' }">
<el-input v-model="form.code" autocomplete="off" placeholder="请输入部门代码"></el-input>
</dialog-form-item>
<!-- 地级市校区业绩统计(V1)待联调 -->
<dialog-form-item label="归属" v-if="detail?.is_schools == '为省级分校群'" prop="area_belong_id">
<el-select v-model="form.area_belong_id" filterable placeholder="请选择归属" style="width: 240px">
<el-option v-for="item in areaArr" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</dialog-form-item>
<dialog-form-item label="激励业绩" prop="is_area_achievement" v-if="detail?.is_schools == '为省级分校群'">
<el-radio-group v-model="form.is_area_achievement" class="ml-4" style="margin-left: 10px">
<el-radio label="1" size="large">核算</el-radio>
<el-radio label="2" size="large">不核算</el-radio>
</el-radio-group>
</dialog-form-item>
</template>
<!-- 添加岗位 -->
<template v-if="detail.type == '5'">
<dialog-form-item label="名称" prop="post_id" :rules="{ required: true, message: '请选择岗位', trigger: 'change' }">
<select-options :request="post" v-model="form.post_id" :filterable="true" placeholder="请选择岗位"
v-model:modelValueName="form.name"></select-options>
</dialog-form-item>
</template>
<!-- 结算单元 -->
<dialog-form-item label="结算单元" prop="" v-if="type == '2'">
<el-radio-group v-model="form.is_settle_cell" class="ml-4" style="margin-left: 10px">
<el-radio label="1" size="large">是</el-radio>
<el-radio label="2" size="large">否</el-radio>
</el-radio-group>
</dialog-form-item>
<dialog-form-item label="停用" prop="is_usable" v-if="type == '2' && detail.type != '5'">
<el-switch v-model="form.is_usable" active-value="2" inactive-value="1" inline-prompt></el-switch>
</dialog-form-item>
</dialog-form>
</div>
</template>
<script lang="ts">
import { campusType } from '../../config'
import { defineComponent, reactive, ref, toRef, toRefs, watchEffect, onMounted } from 'vue'
import { organization } from '../../api/organizationStructure'
import { asyncArea } from '../../api/index'
import { classificationCode } from '@/api/common'
import { post, dept, area } from '../../api/index'
import areaCascader from '@/components/BusinessCenter/baseSelects/area-cascader.vue'
interface prop {
show: boolean
type: string
detail?: any
}
export default defineComponent({
name: 'editOrganization',
components: {
areaCascader
},
props: {
show: {
type: Boolean,
default: false
},
type: {
type: String
},
detail: {
type: Object
}
},
setup(props: prop, { emit }) {
const option = ref<any>()
let close = () => {
emit('update:show', false)
}
let success = () => {
close()
emit('success')
}
const state = reactive({
selfshow: false,
areaArr: [],
form: {
pid: props.detail.pid,
type: props.detail.type,
sort: props.detail.sort,
name: '',
dept_id: '',
identity_id: '',
province_id: '',
city_id: '',
is_usable: '1',
is_area_achievement: '', // 是否激励
area_belong_id: '', // 归属id
area_belong_id_name: ''
} as any,
title: '',
rules: {
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
customer_code: [
{ required: false, message: '请输入客户编码', trigger: 'blur' }
],
identity_id: [
{ required: true, message: '请选择属性', trigger: 'change' }
],
campus_type: [
{
required: props.detail.type == '3' ? true : false,
message: '请选择校区分类',
trigger: 'change'
}
],
dept_type: [
{
required: props.detail.type == '4' ? true : false,
message: '请选择部门分类',
trigger: 'change'
}
],
province_id: [
{ required: true, message: '请选择区域', trigger: 'change' }
]
},
dept_type: [
{ name: '市场营销类', id: '2' },
{ name: '运营服务类', id: '1' },
{ name: '教学教研类', id: '3' },
{ name: '决策职能类', id: '4' },
{ name: '信息技术类', id: '5' }
],
postData: [] as Array<any>
})
//省份更改
const provideChange = (id: string) => {
setTimeout(() => {
option?.value?.getData && option.value.getData()
state.form.city_id = ''
}, 10)
}
watchEffect(() => {
state.selfshow = props.show
// 默认为'0'的时候
if (props.detail?.area_belong_id === '0') {
delete props.detail.area_belong_id
}
state.form = JSON.parse(JSON.stringify(props.detail))
console.log(state.form, '看看数据')
if (props.detail.type == '3') {
state.title = '校区'
} else if (props.detail.type == '4') {
state.title = '部门'
} else if (props.detail.type == '5') {
state.title = '岗位'
}
})
let deptChange = (val: any) => {
dept.getList({ name: '', page: 1, size: 50, noloading: true }).then(res => {
res.data.list.forEach((item: any) => {
if (item.id == val) {
state.form.dept_type = item.dept_type
}
})
})
}
let getArea = () =>
area.getList({}).then(({ data }) => {
if (data.length) state.areaArr = data
}).catch(error => {
console.error('获取归属列表失败:', error)
})
onMounted(() => {
getArea()
})
return {
deptChange,
getArea,
option,
close,
...toRefs(state),
organization,
success,
asyncArea,
classificationCode,
provideChange,
campusType: campusType,
dept,
post,
area
}
}
})
</script>
bug 修改
