|
|
|
@ -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" |
|
|
|
|
:value="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="选择年份" |
|
|
|
|
size="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> |
|
|
|
|