钉钉demo-部门管理

src/api/test/dd/dd.js

@@ -20,14 +20,31 @@ export default {
 		return request({
 			url: prefix + "/test/attendance/getWorkListCord",
 			method: "get",
-			params: {userId:id},
+			params: { userId: id },
 		});
 	},
 	getByUserId(id) {
 		return request({
 			url: prefix + "/test/attendance/getByUserId",
 			method: "get",
-			params: {userId:id},
+			params: { userId: id },
+		});
+	},
+	// 删除部门
+	delDept(data) {
+		return request({
+			url: prefix + "/test/addressBook/delDept",
+			method: "post",
+			data: data,
+		});
+	},
+
+	// 新增部门
+	addDept(data) {
+		return request({
+			url: prefix + "/test/addressBook/addDept",
+			method: "post",
+			data: data,
 		});
 	},
 };

src/views/dd/DeptForm.vue

@@ -0,0 +1,184 @@
+<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
+	<div>
+		<el-dialog :title="title" :close-on-click-modal="false" width="50%" @close="close" @keyup.enter.native=""
+			v-model="visible" @open="handleOpen">
+			<el-form :model="inputForm" :rules="rules" ref="inputForm" v-loading="loading"
+				:class="method === 'view' ? 'readonly' : ''"
+				:disabled="status === 'audit' || status === 'taskFormDetail' || method === 'view'" label-width="100px"
+				@submit.native.prevent>
+				<el-row :gutter="15">
+					<el-col :span="24">
+						<el-form-item label="部门名称" prop="name">
+							<el-input placeholder="请填写部门名称" v-model="inputForm.name"></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :span="24">
+						<el-form-item label="所属部门" prop="parentId">
+							<el-tree-select v-model="inputForm.parentId" lazy :load="load" node-key="deptId"
+								:props="props" :data="deptList" check-strictly :render-after-expand="false"
+								show-checkbox check-on-click-node style="width: 240px" />
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="close()" icon="el-icon-circle-close">关闭</el-button>
+					<el-button type="primary" v-if="method != 'view'" @click="doSubmit()" icon="el-icon-circle-check"
+						v-noMoreClick>确定</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+import ddService from "@/api/test/dd/dd.js"
+import { ElDatePicker } from 'element-plus';
+// eslint-disable-next-line no-unused-vars
+import moment from 'moment'
+export default {
+	props: {
+		formReadOnly: {
+			type: Boolean,
+			default: false
+		},
+		status: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			props: {
+				isLeaf: 'isLeaf',
+				label: 'name',
+			},
+			title: '',
+			method: '',
+			loading: false,
+			visible: false,
+			inputForm: {
+				name: '',
+				parentId: ''
+			},
+			deptList: [],
+			rules: {
+				parentId: [
+					{ required: true, message: "请选择所属部门", trigger: "change" },
+				],
+				name: [
+					{ required: true, message: "请填写部门名称", trigger: "blur" },
+				],
+			},
+		}
+	},
+	created() {
+	},
+	mounted() {
+	},
+	activated() {
+	},
+	components: {
+		ElDatePicker,
+	},
+	methods: {
+		load(node, resolve) {
+			console.log(node);
+			ddService.deptList({
+				deptId: node.data.deptId
+			}).then(res => {
+				resolve(res.result)
+			})
+
+		},
+		init(method, id) {
+			this.method = method
+			this.visible = true
+			this.inputForm = {
+				classification: "",
+				fileDescription: "",
+				workAttachments: []
+			}
+			if (method === 'add') {
+				this.title = `创建部门`
+			} else if (method === 'edit') {
+				this.inputForm.id = id
+				this.title = '修改附件'
+			}
+			this.loading = false
+			this.visible = true
+			this.$nextTick(() => {
+				this.$refs.inputForm.resetFields()
+				this.loading = true
+				ddService.deptList().then(res => {
+					res.result.unshift({
+						deptId: 1,
+						name: "根部门",
+						isLeaf: true
+					})
+					this.deptList = res.result
+
+				})
+				if (this.commonJS.isNotEmpty(this.inputForm.id)) {
+
+				}
+				this.loading = false
+			})
+		},
+		// 表单提交
+		async doSubmit() {
+			this.loading = true
+			this.$refs['inputForm'].validate((valid) => {
+				if (valid) {
+					this.loading = true
+					if (this.inputForm.id) {
+						ddService.updateById(this.inputForm).then((data) => {
+							this.visible = false
+							this.$emit('refreshList')
+						}).catch(() => {
+							this.$refs.inputForm.resetFields()
+							this.loading = false
+						})
+					} else {
+						console.log(this.inputForm);
+
+						ddService.addDept(this.inputForm).then((data) => {
+							this.visible = false
+							this.$emit('refreshList')
+						}).catch(() => {
+							this.$refs.inputForm.resetFields()
+							this.loading = false
+						})
+					}
+				} else {
+					this.loading = false
+				}
+			})
+		},
+		close() {
+			this.inputForm = {
+				id: '',
+			}
+			this.visible = false
+		},
+		async updateStatusById(type, callback) {
+			this.loading = true
+			workCollectAccessoryService.updateStatusById(param).then(() => {
+				this.loading = false
+				callback()
+			})
+		},
+	}
+
+}
+</script>
+<style scoped>
+/deep/ .el-input-number .el-input__inner {
+	text-align: left;
+}
+
+/deep/ .vxe-footer--row .vxe-footer--column:nth-child(1) .vxe-cell--item {
+	font-weight: 700;
+}
+</style>

src/views/dd/DeptList.vue

@@ -0,0 +1,223 @@
+<template>
+    <div class="page">
+        <el-form :inline="true" class="query-form m-b-10" v-if="searchVisible" ref="searchForm" :model="searchForm"
+            @keyup.enter="refreshList()" @submit.prevent>
+            <!-- 搜索框-->
+            <el-form-item prop="fileName" label="部门名称:">
+                <el-input style="width: 200px;" v-model="searchForm.fileName" placeholder="请输入附件名称"
+                    clearable></el-input>
+            </el-form-item>
+            <el-form-item prop="userName" label="上传人:">
+                <el-input style="width: 200px;" v-model="searchForm.userName" placeholder="请输入上传人" clearable></el-input>
+            </el-form-item>
+            <el-form-item prop="userName" label="收藏分类:">
+                <el-select v-model="searchForm.classification" clearable placeholder="请选择收藏分类">
+                    <el-option v-for="(item, index) in dictList" :key="index" :label="item.label" :value="item.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="refreshList()" icon="search">查询</el-button>
+                <el-button type="default" @click="resetSearch()" icon="refresh-right">重置</el-button>
+            </el-form-item>
+        </el-form>
+
+        <div class="jp-table">
+            <vxe-toolbar ref="dataSetToolbar" :refresh="{ query: refreshList }" export print custom>
+                <template #buttons>
+                    <el-button v-if="hasPermission('attachment:add')" type="primary" icon="plus"
+                        @click="add()">新增部门</el-button>
+                </template>
+                <template #tools>
+                    <vxe-button type="text" :title="searchVisible ? '收起检索' : '展开检索'" icon="vxe-icon-search"
+                        class="tool-btn" @click="searchVisible = !searchVisible"></vxe-button>
+                </template>
+            </vxe-toolbar>
+            <div class="jp-table-body">
+                <vxe-table border="inner" :row-config="{ keyField: 'deptId' }" :column-config="{ resizable: true }"
+                    :tree-config="treeConfig" auto-resize resizable height="auto" :loading="loading" size="small"
+                    ref="dataSetTable" show-header-overflow show-overflow highlight-hover-row :menu-config="{}"
+                    :print-config="{}" :import-config="{}" :export-config="{}" @sort-change="sortChangeHandle"
+                    :sort-config="{ remote: true }" :data="dataList" :checkbox-config="{}">
+                    <vxe-column type="seq" width="40"></vxe-column>
+                    <vxe-column tree-node field="name" title="部门名称">
+                    </vxe-column>
+                    <vxe-column fixed="right" align="center" width="320" title="操作">
+                        <template #default="scope">
+                            <el-button type="danger" text @click="handleDel(scope.row)">删除</el-button>
+                        </template>
+                    </vxe-column>
+                </vxe-table>
+                <vxe-pager background size="small" :current-page="tablePage.currentPage" :page-size="tablePage.pageSize"
+                    :total="tablePage.total" :page-sizes="[
+                        10,
+                        20,
+                        100,
+                        1000,
+                        { label: '全量数据', value: 1000000 },
+                    ]" :layouts="[
+                        'PrevPage',
+                        'JumpNumber',
+                        'NextPage',
+                        'FullJump',
+                        'Sizes',
+                        'Total',
+                    ]" @page-change="currentChangeHandle">
+                </vxe-pager>
+            </div>
+        </div>
+
+
+        <DeptForm ref="deptRef" @refreshList="refreshList"></DeptForm>
+    </div>
+</template>
+
+<script>
+import ddService from "@/api/test/dd/dd.js"
+import DeptForm from "./DeptForm.vue"
+const treeConfig = {
+    transform: true,
+    rowField: 'deptId',
+    parentField: 'parentId',
+    lazy: true,
+    hasChild: 'hasChild',
+    loadMethod({ row }) {
+        // 异步加载子节点
+        return fetchChildListApi(row)
+    }
+}
+// 模拟后台
+const fetchChildListApi = (parentRow) => {
+    return new Promise(resolve => {
+        ddService.deptList({
+            deptId: parentRow.deptId
+        }).then(res => {
+            res.result.forEach(item => {
+                item.hasChild = true
+            })
+            resolve(res.result)
+        })
+    })
+}
+export default {
+    components: {
+        DeptForm
+    },
+    data() {
+        return {
+            treeConfig,
+            url: "",
+            showViewer: false,
+            activeName: "",
+            searchVisible: true,
+            searchForm: {
+                companyId: '',
+                officeId: '',
+                createById: '',
+            },
+            dataList: [],
+            tablePage: {
+                total: 0,
+                currentPage: 1,
+                pageSize: 10,
+                orders: [],
+            },
+            isImportCollapse: false,
+            dialogInterfaceVisible: false,
+            interfaceTable: [],
+            loading: false,
+            userInfo: {},
+            dictList: [],
+
+        };
+    },
+    activated() {
+        this.userInfo = this.$TOOL.data.get("USER_INFO");
+        this.searchForm.createById = this.userInfo.id
+        this.$nextTick(() => {
+            // 将表格和工具栏进行关联
+            const $table = this.$refs.dataSetTable;
+            const $toolbar = this.$refs.dataSetToolbar;
+            $table.connect($toolbar);
+        });
+        this.refreshList();
+    },
+    methods: {
+        // 获取数据列表
+        refreshList() {
+            this.loading = true;
+            ddService
+                .deptList()
+                .then((data) => {
+                    this.dataList = data.result;
+                    this.dataList.forEach(item => {
+                        item.hasChild = true
+                    })
+                    // this.tablePage.total = data.total;
+                    this.loading = false;
+                    // 获取分类去重的数据
+                });
+        },
+        // 当前页
+        currentChangeHandle({ currentPage, pageSize }) {
+            this.tablePage.currentPage = currentPage;
+            this.tablePage.pageSize = pageSize;
+            this.refreshList();
+        },
+        // 排序
+        sortChangeHandle(column) {
+            this.tablePage.orders = [];
+            if (column.order != null) {
+                this.tablePage.orders.push({
+                    column: this.$utils.toLine(column.property),
+                    asc: column.order === "asc",
+                });
+            }
+            this.refreshList();
+        },
+        handleDel(row) {
+            this.$confirm(`确定删除当前部门吗?`, "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            }).then(() => {
+                this.loading = true;
+                ddService
+                    .delDept({
+                        deptId: row.deptId
+                    }).then(res => {
+                        console.log(res);
+
+                        this.$message.success("操作成功");
+                        this.loading = false;
+                        this.refreshList();
+                    })
+            });
+        },
+        // 新增
+        add() {
+            this.$refs.deptRef.init("add")
+        },
+        // 编辑
+        edit(id) {
+            console.log(id);
+            this.$refs.workCollectAccessoryRef.init("edit", id)
+        },
+        // 查看
+        view(id) {
+            id =
+                id ||
+                this.$refs.dataSetTable.getCheckboxRecords().map((item) => {
+                    return item.id;
+                })[0];
+            this.$router.push({
+                path: `/database/datamodel/DataSetForm`,
+                query: { method: "view", id: id, title: "数据模型配置" },
+            });
+        },
+        resetSearch() {
+            this.$refs.searchForm.resetFields();
+            this.refreshList();
+        },
+    },
+};
+</script>