qiushanhe
/
ss-crm-manage-web
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ch

Browse Source
dev-cjl
qsh 3 months ago
parent efe4cf000c
commit 9ebd81cc2c
1 changed files with 124 additions and 66 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 190
      src/views/Basic/Dept/DeptForm.vue

190
src/views/Basic/Dept/DeptForm.vue
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save