@@ -1,76 +1,129 @@
< template >
< Dialog v-model = "dialogVisible" :title="dialogTitle" width="800px" >
< el -form
ref = "formRef"
v-loading = "formLoading"
:model = "formData "
:rules = "formRules "
label -width = " 80px "
>
< el-row :gutter = "20" >
< el-col :span = "12" :offset = "0" >
< el-form-item label = "上级部门" prop = "parentId " >
< el-tree-select
v-model = "formData. parentId"
:data = "deptTree"
:props = "defaultProps "
check -strictly
default -expand -all
placeholder = "请选择上级部门"
value -key = " deptId "
< el -tabs v-model = "tabIndex" >
< el -tab -pane label = "基础信息" :name = "1" >
< el-form
ref = "formRef "
v-loading = "formLoading "
:model = "formData "
:rules = "formRules"
label -width = " 80px "
>
< el-row :gutter = "20 " >
< el-col :span = "12" :offset = "0" >
< el-form-item label = "上级部门" prop = " parentId">
< el-tree-select
v-model = "formData.parentId "
:data = "deptTree"
:props = "defaultProps"
check -strictly
default -expand -all
placeholder = "请选择上级部门"
value -key = " deptId "
/ >
< / el-form-item >
< / el-col >
< el-col :span = "12" :offset = "0" >
< el-form-item label = "部门名称" prop = "name" >
< el-input v-model = "formData.name" placeholder="请输入部门名称" / >
< / el-form-item >
< / el-col >
< / el-row >
< el-row :gutter = "20" >
< el-col :span = "12" :offset = "0" >
< el-form-item label = "负责人" prop = "leaderUserId" >
< el-select v-model = "formData.leaderUserId" clearable placeholder="请输入负责人" >
< el -option
v-for = "item in userList"
:key = "item.id"
:label = "item.nickname"
:value = "item.id"
/ >
< / el-select >
< / el-form-item >
< / el-col >
< el-col :span = "12" :offset = "0" >
< el-form-item label = "状态" prop = "status" >
< el-radio-group v-model = "formData.status" >
< el -radio :label = "0" > 启用 < / el-radio >
< el-radio :label = "1" > 禁用 < / el-radio >
< / el-radio-group >
< / el-form-item >
< / el-col >
< / el-row >
< el-row :gutter = "20" >
< el-col :span = "12" :offset = "0" >
< el-form-item label = "排序" prop = "sort" >
< el-input-number v-model = "formData.sort" :min="0" / >
< / el-form-item >
< / el-col >
< / el-row >
< el-row :gutter = "20" >
< el-col :span = "24" :offset = "0" >
< el-form-item label = "备注" prop = "remark" >
< Editor v -model :modelValue = "formData.remark" / >
< / el-form-item >
< / el-col >
< / el-row >
< / el-form >
< / el-tab-pane >
< el-tab-pane label = "业务指标" :name = "2" >
< el-form :model = "formData" label -width = " auto " >
< el-form-item label = "每日跟进指标数" >
< el-input-number
v-model = "formData.followDaliyNum"
:controls = "false"
style = "width: 150px"
/ >
< / el-form-item >
< / el-col >
< el-col :span = "12" :offset = "0" >
< el-form-item label = "部门名称" prop = "name" >
< el-input v-model = "formData.name" placeholder="请输入部门名称" / >
< el-form-item label = "跟进指标生效日期" >
< el-date-picker
v-model = "formData.effectDate"
type = "date"
placeholder = "选择日期时间"
format = "YYYY-MM-DD"
value -format = " YYYY -MM -DD "
style = "width: 150px"
/ >
< / el-form-item >
< / el-col >
< / el-row >
< el-row :gutter = "20" >
< el-col :span = "12" :offset = "0" >
< el-form-item label = "负责人 " prop = "leaderUserId " >
< el-select v-model = "formData.leaderUserId" clearable placeholder="请输入负责人" >
< el-option
v-for = "item in userList "
:key = "item.id "
:label = "item.nickname "
:valu e= "item.id "
< / el-form >
< el-divider direction = "horizontal" content -position = " left " > 成交额指标 < / el-divider >
< el-button class = "mb-10px" type = "primary" @click ="taskList.push({})" > 添加年份 < / el -button >
< el-table :data = "taskList" border >
< el-table-column label = "年份 " width = "120 " >
< template # default = "{ row }" >
< el-date-picker
v-model = "row.year "
type = "year "
placeholder = "选择年份 "
siz e= "small "
format = "YYYY"
value -format = " YYYY "
style = "width: 100%"
/ >
< / el-select >
< / el-form-item >
< / el-col >
< el-col :span = "12" :offset = "0 ">
< el-form-item label = "状态" prop = "status" >
< el-radio-group v-model = "formData.status ">
< el -radio :label = "0" > 启用 < / el-radio >
< el-radio :label = "1" > 禁用 < / el-radio >
< / el-radio-group >
< / el-form-item >
< / el-col >
< / el-row >
< el-row :gutter = "20" >
< el-col :span = "12" :offset = "0" >
< el-form-item label = "排序" prop = "sort" >
< el-input-number v-model = "formData.sort" :min="0" / >
< / el-form-item >
< / el-col >
< / el-row >
< el-row :gutter = "20" >
< el-col :span = "24" :offset = "0" >
< el-form-item label = "备注" prop = "remark" >
< Editor v -model :modelValue = "formData.remark" / >
< / el-form-item >
< / el-col >
< / el-row >
< / el-form >
< / template >
< / el-table-column >
< el-table-column v-for = "col in 12" :key="col" :label="`${col}月`" width="100px" >
< template # default = "{ row } " >
< el-input-number
v-model = "row[`month${col}`] "
size = "small"
:controls = "false"
style = "width: 100%"
/ >
< / template >
< / el-table-column >
< / el-table >
< / el-tab-pane >
< / el-tabs >
< template # footer >
< el-button type = "primary" @click ="submitForm" > 确 定 < / el -button >
< el-button @click ="dialogVisible = false" > 取 消 < / el -button >
< / template >
< / Dialog >
< / template >
< script lang = "ts" name= "SystemDeptForm" setup >
< script name = "SystemDeptForm" setup >
import { defaultProps , handleTree } from '@/utils/tree'
import * as DeptApi from '@/api/system/dept'
import * as UserApi from '@/api/system/user'
@@ -81,6 +134,9 @@ const message = useMessage() // 消息弹窗
const dialogVisible = ref ( false ) // 弹窗的是否展示
const dialogTitle = ref ( '' ) // 弹窗的标题
const tabIndex = ref ( 1 )
const formLoading = ref ( false ) // 表单的加载中: 1) 修改时的数据加载; 2) 提交的按钮禁用
const formType = ref ( '' ) // 表单的类型: create - 新增; update - 修改
const formData = ref ( {
@@ -92,7 +148,7 @@ const formData = ref({
status : CommonStatusEnum . ENABLE ,
remark : undefined
} )
const formRules = reactive < any > ({
const formRules = reactive ( {
parentId : [ { required : true , message : '上级部门不能为空' , trigger : 'blur' } ] ,
name : [ { required : true , message : '部门名称不能为空' , trigger : 'blur' } ] ,
sort : [ { required : true , message : '显示排序不能为空' , trigger : 'blur' } ] ,
@@ -104,10 +160,10 @@ const formRules = reactive<any>({
} )
const formRef = ref ( ) // 表单 Ref
const deptTree = ref ( ) // 树形结构
const userList = ref < UserApi .UserVO [ ] > ([ ] ) // 用户列表
const userList = ref ( [ ] ) // 用户列表
/** 打开弹窗 */
const open = async ( type : string , id ? : number ) => {
const open = async ( type , id ) => {
dialogVisible . value = true
dialogTitle . value = t ( 'action.' + type )
formType . value = type
@@ -138,7 +194,7 @@ const submitForm = async () => {
// 提交请求
formLoading . value = true
try {
const data = formData . value as unknown as DeptApi . DeptVO
const data = formData . value
if ( formType . value === 'create' ) {
await DeptApi . createDept ( data )
message . success ( t ( 'common.createSuccess' ) )
@@ -172,8 +228,10 @@ const resetForm = () => {
const getTree = async ( ) => {
deptTree . value = [ ]
const data = await DeptApi . getSimpleDeptList ( )
let dept : Tree = { id : 0 , name : '顶级部门' , children : [ ] }
let dept = { id : 0 , name : '顶级部门' , children : [ ] }
dept . children = handleTree ( data )
deptTree . value . push ( dept )
}
const taskList = ref ( [ ] )
< / script >