ch

src/views/Basic/Dept/DeptForm.vue

@@ -1,76 +1,129 @@
 <template>
   <Dialog v-model="dialogVisible" :title="dialogTitle" width="800px">
-    <el-form
+    <el-tabs v-model="tabIndex">
-      ref="formRef"
+      <el-tab-pane label="基础信息" :name="1">
-      v-loading="formLoading"
+        <el-form
-      :model="formData"
+          ref="formRef"
-      :rules="formRules"
+          v-loading="formLoading"
-      label-width="80px"
+          :model="formData"
-    >
+          :rules="formRules"
-      <el-row :gutter="20">
+          label-width="80px"
-        <el-col :span="12" :offset="0">
+        >
-          <el-form-item label="上级部门" prop="parentId">
+          <el-row :gutter="20">
-            <el-tree-select
+            <el-col :span="12" :offset="0">
-              v-model="formData.parentId"
+              <el-form-item label="上级部门" prop="parentId">
-              :data="deptTree"
+                <el-tree-select
-              :props="defaultProps"
+                  v-model="formData.parentId"
-              check-strictly
+                  :data="deptTree"
-              default-expand-all
+                  :props="defaultProps"
-              placeholder="请选择上级部门"
+                  check-strictly
-              value-key="deptId"
+                  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-form-item label="跟进指标生效日期">
-        <el-col :span="12" :offset="0">
+            <el-date-picker
-          <el-form-item label="部门名称" prop="name">
+              v-model="formData.effectDate"
-            <el-input v-model="formData.name" placeholder="请输入部门名称" />
+              type="date"
+              placeholder="选择日期时间"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              style="width: 150px"
+            />
           </el-form-item>
-        </el-col>
+        </el-form>
-      </el-row>
+        <el-divider direction="horizontal" content-position="left">成交额指标</el-divider>
-      <el-row :gutter="20">
+        <el-button class="mb-10px" type="primary" @click="taskList.push({})">添加年份</el-button>
-        <el-col :span="12" :offset="0">
+        <el-table :data="taskList" border>
-          <el-form-item label="负责人" prop="leaderUserId">
+          <el-table-column label="年份" width="120">
-            <el-select v-model="formData.leaderUserId" clearable placeholder="请输入负责人">
+            <template #default="{ row }">
-              <el-option
+              <el-date-picker
-                v-for="item in userList"
+                v-model="row.year"
-                :key="item.id"
+                type="year"
-                :label="item.nickname"
+                placeholder="选择年份"
-                :value="item.id"
+                size="small"
+                format="YYYY"
+                value-format="YYYY"
+                style="width: 100%"
               />
-            </el-select>
+            </template>
-          </el-form-item>
+          </el-table-column>
-        </el-col>
+          <el-table-column v-for="col in 12" :key="col" :label="`${col}月`" width="100px">
-        <el-col :span="12" :offset="0">
+            <template #default="{ row }">
-          <el-form-item label="状态" prop="status">
+              <el-input-number
-            <el-radio-group v-model="formData.status">
+                v-model="row[`month${col}`]"
-              <el-radio :label="0"> 启用 </el-radio>
+                size="small"
-              <el-radio :label="1"> 禁用 </el-radio>
+                :controls="false"
-            </el-radio-group>
+                style="width: 100%"
-          </el-form-item>
+              />
-        </el-col>
+            </template>
-      </el-row>
+          </el-table-column>
-      <el-row :gutter="20">
+        </el-table>
-        <el-col :span="12" :offset="0">
+      </el-tab-pane>
-          <el-form-item label="排序" prop="sort">
+    </el-tabs>
-            <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 #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>