From a94cc24363a6b6a210c0a3598c6745e2e4c1ae0b Mon Sep 17 00:00:00 2001
From: yijiusmile <253281376@qq.com>
Date: 星期四, 28 一月 2021 00:11:51 +0800
Subject: [PATCH] 增加岗位管理
---
src/views/febs/system/dept/Index.vue | 488 ++++++++++++++++++++++++++++--------------------------
1 files changed, 253 insertions(+), 235 deletions(-)
diff --git a/src/views/febs/system/dept/Index.vue b/src/views/febs/system/dept/Index.vue
index 44c43d6..c669c77 100644
--- a/src/views/febs/system/dept/Index.vue
+++ b/src/views/febs/system/dept/Index.vue
@@ -1,236 +1,254 @@
-<template>
- <div class="dept">
- <el-row :gutter="10">
- <el-col :xs="24" :sm="12">
- <div class="app-container">
- <div class="filter-container">
- <el-input v-model="deptName" :placeholder="$t('table.dept.deptName')" class="filter-item search-item" />
- <el-button class="filter-item" type="primary" @click="search">
- {{ $t('table.search') }}
- </el-button>
- <el-button class="filter-item" type="success" @click="reset">
- {{ $t('table.reset') }}
- </el-button>
- <el-dropdown v-has-any-permission="['dept:add','dept:delete','dept:export']" trigger="click" class="filter-item">
- <el-button>
- {{ $t('table.more') }}<i class="el-icon-arrow-down el-icon--right" />
- </el-button>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item v-has-permission="['dept:add']" @click.native="add">{{ $t('table.add') }}</el-dropdown-item>
- <el-dropdown-item v-has-permission="['dept:delete']" @click.native="deleteDept">{{ $t('table.delete') }}</el-dropdown-item>
- <el-dropdown-item v-has-permission="['dept:export']" @click.native="exportExcel">{{ $t('table.export') }}</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- </div>
- <el-tree
- ref="deptTree"
- :data="deptTree"
- :check-strictly="true"
- show-checkbox
- accordion
- node-key="id"
- highlight-current
- :filter-node-method="filterNode"
- @node-click="nodeClick"
- />
- </div>
- </el-col>
- <el-col :xs="24" :sm="12">
- <el-card class="box-card">
- <div slot="header" class="clearfix">
- <span>{{ dept.deptId === '' ? this.$t('common.add') : this.$t('common.edit') }}</span>
- </div>
- <div>
- <el-form ref="form" :model="dept" :rules="rules" label-position="right" label-width="100px">
- <el-form-item :label="$t('table.dept.parentId')" prop="parentId">
- <treeselect
- v-model="dept.parentId"
- :multiple="false"
- :options="deptTree"
- :clear-value-text="$t('common.clear')"
- placeholder=" "
- style="width:100%"
- />
- </el-form-item>
- <el-form-item :label="$t('table.dept.deptName')" prop="deptName">
- <el-input v-model="dept.deptName" />
- </el-form-item>
- <el-form-item :label="$t('table.dept.orderNum')" prop="orderNum">
- <el-input-number v-model="dept.orderNum" :min="0" :max="100" @change="handleNumChange" />
- </el-form-item>
- </el-form>
- </div>
- </el-card>
- <el-card class="box-card" style="margin-top: -2rem;">
- <el-row>
- <el-col :span="24" style="text-align: right">
- <el-button type="primary" plain :loading="buttonLoading" @click="submit">{{ dept.deptId === '' ? this.$t('common.add') : this.$t('common.edit') }}</el-button>
- </el-col>
- </el-row>
- </el-card>
- </el-col>
- </el-row>
- </div>
-</template>
-<script>
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-
-export default {
- name: 'DeptManager',
- components: { Treeselect },
- data() {
- return {
- deptName: '',
- buttonLoading: false,
- deptTree: [],
- dept: this.initDept(),
- rules: {
- deptName: [
- { required: true, message: this.$t('rules.require'), trigger: 'blur' },
- { min: 3, max: 10, message: this.$t('rules.range3to10'), trigger: 'blur' }
- ]
- }
- }
- },
- mounted() {
- this.initDeptTree()
- },
- methods: {
- initDept() {
- return {
- deptId: '',
- deptName: '',
- parentId: null,
- orderNum: 0
- }
- },
- initDeptTree() {
- this.$get('system/dept').then((r) => {
- this.deptTree = r.data.data.rows
- })
- },
- exportExcel() {
- this.$download('system/dept/excel', {
- deptName: this.deptName
- }, `dept_${new Date().getTime()}.xlsx`)
- },
- handleNumChange(val) {
- this.dept.orderNum = val
- },
- filterNode(value, data) {
- if (!value) return true
- return data.label.indexOf(value) !== -1
- },
- nodeClick(data) {
- this.dept.parentId = data.parentId
- if (this.dept.parentId === '0') {
- this.dept.parentId = null
- }
- this.dept.orderNum = data.orderNum
- this.dept.deptName = data.label
- this.dept.deptId = data.id
- this.$refs.form.clearValidate()
- },
- add() {
- this.resetForm()
- this.$message({
- message: this.$t('tips.createTips'),
- type: 'info'
- })
- },
- deleteDept() {
- const checked = this.$refs.deptTree.getCheckedKeys()
- if (checked.length === 0) {
- this.$message({
- message: this.$t('tips.noNodeSelected'),
- type: 'warning'
- })
- } else {
- this.$confirm(this.$t('tips.confirmDeleteNode'), this.$t('common.tips'), {
- confirmButtonText: this.$t('common.confirm'),
- cancelButtonText: this.$t('common.cancel'),
- type: 'warning'
- }).then(() => {
- this.dept.deptIds = checked.join(',')
- this.$delete(`system/dept/${this.dept.deptIds}`).then(() => {
- this.$message({
- message: this.$t('tips.deleteSuccess'),
- type: 'success'
- })
- this.reset()
- })
- }).catch(() => {
- this.$refs.deptTree.setCheckedKeys([])
- })
- }
- },
- search() {
- this.$refs.deptTree.filter(this.deptName)
- },
- reset() {
- this.initDeptTree()
- this.deptName = ''
- this.resetForm()
- },
- submit() {
- this.$refs.form.validate((valid) => {
- if (valid) {
- this.buttonLoading = true
- this.dept.createTime = this.dept.modifyTime = null
- if (this.dept.deptId) {
- this.$put('system/dept', { ...this.dept }).then(() => {
- this.buttonLoading = false
- this.$message({
- message: this.$t('tips.updateSuccess'),
- type: 'success'
- })
- this.reset()
- })
- } else {
- this.$post('system/dept', { ...this.dept }).then(() => {
- this.buttonLoading = false
- this.$message({
- message: this.$t('tips.createSuccess'),
- type: 'success'
- })
- this.reset()
- })
- }
- } else {
- return false
- }
- })
- },
- resetForm() {
- this.$refs.form.clearValidate()
- this.$refs.form.resetFields()
- this.dept = this.initDept()
- }
- }
-}
-</script>
-<style lang="scss" scoped>
- .dept {
- margin: 10px;
- .app-container {
- margin: 0 0 10px 0 !important;
- }
- }
- .el-card.is-always-shadow {
- box-shadow: none;
- }
- .el-card {
- border-radius: 0;
- border: none;
- .el-card__header {
- padding: 10px 20px !important;
- border-bottom: 1px solid #f1f1f1 !important;
- }
- }
-</style>
-<style lang="scss">
- .vue-treeselect__menu {
- max-height: 165px !important;
- }
+<template>
+ <div class="dept">
+ <el-row :gutter="10">
+ <el-col :xs="24" :sm="12">
+ <div class="app-container">
+ <div class="filter-container">
+ <el-input v-model="deptName" :placeholder="$t('table.dept.deptName')" class="filter-item search-item" />
+ <el-button class="filter-item" type="primary" @click="search">
+ {{ $t('table.search') }}
+ </el-button>
+ <el-button class="filter-item" type="success" @click="reset">
+ {{ $t('table.reset') }}
+ </el-button>
+ <el-dropdown v-has-any-permission="['dept:add','dept:delete','dept:export']" trigger="click" class="filter-item">
+ <el-button>
+ {{ $t('table.more') }}<i class="el-icon-arrow-down el-icon--right" />
+ </el-button>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item v-has-permission="['dept:add']" @click.native="add">{{ $t('table.add') }}</el-dropdown-item>
+ <el-dropdown-item v-has-permission="['dept:delete']" @click.native="deleteDept">{{ $t('table.delete') }}</el-dropdown-item>
+ <el-dropdown-item v-has-permission="['dept:export']" @click.native="exportExcel">{{ $t('table.export') }}</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+ </div>
+ <el-tree ref="deptTree" :data="deptTree" :check-strictly="true" show-checkbox accordion node-key="id"
+ highlight-current :filter-node-method="filterNode" @node-click="nodeClick" />
+ </div>
+ </el-col>
+ <el-col :xs="24" :sm="12">
+ <el-tabs v-model="activeName">
+ <el-tab-pane label="部门信息" name="first">
+ <el-card class="box-card">
+ <div slot="header" class="clearfix">
+ <span>{{ dept.deptId === '' ? this.$t('common.add') : this.$t('common.edit') }}</span>
+ </div>
+ <div>
+ <el-form ref="form" :model="dept" :rules="rules" label-position="right" label-width="100px">
+ <el-form-item :label="$t('table.dept.parentId')" prop="parentId">
+ <treeselect v-model="dept.parentId" :multiple="false" :options="deptTree" :clear-value-text="$t('common.clear')"
+ placeholder=" " style="width:100%" />
+ </el-form-item>
+ <el-form-item :label="$t('table.dept.deptName')" prop="deptName">
+ <el-input v-model="dept.deptName" />
+ </el-form-item>
+ <el-form-item :label="$t('table.dept.orderNum')" prop="orderNum">
+ <el-input-number v-model="dept.orderNum" :min="0" :max="100" @change="handleNumChange" />
+ </el-form-item>
+ </el-form>
+ </div>
+ </el-card>
+ <el-card class="box-card" style="margin-top: -2rem;">
+ <el-row>
+ <el-col :span="24" style="text-align: right">
+ <el-button type="primary" plain :loading="buttonLoading" @click="submit">{{ dept.deptId === '' ? this.$t('common.add') : this.$t('common.edit') }}</el-button>
+ </el-col>
+ </el-row>
+ </el-card>
+ </el-tab-pane>
+ <el-tab-pane label="岗位信息" name="second">
+ <el-button type="danger">添加岗位</el-button>
+ <el-button type="primary">删除岗位</el-button>
+ <el-table :data="jobData" style="width: 100%">
+ <el-table-column prop="prop0" label="" width="180" />
+ <el-table-column prop="prop1" label="序号" width="180" />
+ <el-table-column prop="prop2" label="岗位名称" width="180" />
+ <el-table-column prop="prop3" label="在岗人数" width="180" />
+ </el-table>
+ </el-tab-pane>
+ </el-tabs>
+
+ </el-col>
+ </el-row>
+ </div>
+</template>
+<script>
+ import Treeselect from '@riophae/vue-treeselect'
+ import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+
+ export default {
+ name: 'DeptManager',
+ components: {
+ Treeselect
+ },
+ data() {
+ return {
+ activeName: 'first',
+ deptName: '',
+ buttonLoading: false,
+ deptTree: [],
+ dept: this.initDept(),
+ jobData:[{"prop0":"","prop1":"1","prop2":"市场部总监","prop3":"1"},{"prop0":"","prop1":"2","prop2":"市场部经理","prop3":"2"},{"prop0":"","prop1":"3","prop2":"高级客户经理","prop3":"5"},{"prop0":"","prop1":"4","prop2":"客户经理","prop3":"10"},{"prop0":"","prop1":"5","prop2":"销售内勤","prop3":"1"},{"prop0":"","prop1":"6","prop2":"销售助理","prop3":"1"}],
+ rules: {
+ deptName: [{
+ required: true,
+ message: this.$t('rules.require'),
+ trigger: 'blur'
+ },
+ {
+ min: 3,
+ max: 10,
+ message: this.$t('rules.range3to10'),
+ trigger: 'blur'
+ }
+ ]
+ }
+ }
+ },
+ mounted() {
+ this.initDeptTree()
+ },
+ methods: {
+ initDept() {
+ return {
+ deptId: '',
+ deptName: '',
+ parentId: null,
+ orderNum: 0
+ }
+ },
+ initDeptTree() {
+ this.$get('system/dept').then((r) => {
+ this.deptTree = r.data.data.rows
+ })
+ },
+ exportExcel() {
+ this.$download('system/dept/excel', {
+ deptName: this.deptName
+ }, `dept_${new Date().getTime()}.xlsx`)
+ },
+ handleNumChange(val) {
+ this.dept.orderNum = val
+ },
+ filterNode(value, data) {
+ if (!value) return true
+ return data.label.indexOf(value) !== -1
+ },
+ nodeClick(data) {
+ this.dept.parentId = data.parentId
+ if (this.dept.parentId === '0') {
+ this.dept.parentId = null
+ }
+ this.dept.orderNum = data.orderNum
+ this.dept.deptName = data.label
+ this.dept.deptId = data.id
+ this.$refs.form.clearValidate()
+ },
+ add() {
+ this.resetForm()
+ this.$message({
+ message: this.$t('tips.createTips'),
+ type: 'info'
+ })
+ },
+ deleteDept() {
+ const checked = this.$refs.deptTree.getCheckedKeys()
+ if (checked.length === 0) {
+ this.$message({
+ message: this.$t('tips.noNodeSelected'),
+ type: 'warning'
+ })
+ } else {
+ this.$confirm(this.$t('tips.confirmDeleteNode'), this.$t('common.tips'), {
+ confirmButtonText: this.$t('common.confirm'),
+ cancelButtonText: this.$t('common.cancel'),
+ type: 'warning'
+ }).then(() => {
+ this.dept.deptIds = checked.join(',')
+ this.$delete(`system/dept/${this.dept.deptIds}`).then(() => {
+ this.$message({
+ message: this.$t('tips.deleteSuccess'),
+ type: 'success'
+ })
+ this.reset()
+ })
+ }).catch(() => {
+ this.$refs.deptTree.setCheckedKeys([])
+ })
+ }
+ },
+ search() {
+ this.$refs.deptTree.filter(this.deptName)
+ },
+ reset() {
+ this.initDeptTree()
+ this.deptName = ''
+ this.resetForm()
+ },
+ submit() {
+ this.$refs.form.validate((valid) => {
+ if (valid) {
+ this.buttonLoading = true
+ this.dept.createTime = this.dept.modifyTime = null
+ if (this.dept.deptId) {
+ this.$put('system/dept', { ...this.dept
+ }).then(() => {
+ this.buttonLoading = false
+ this.$message({
+ message: this.$t('tips.updateSuccess'),
+ type: 'success'
+ })
+ this.reset()
+ })
+ } else {
+ this.$post('system/dept', { ...this.dept
+ }).then(() => {
+ this.buttonLoading = false
+ this.$message({
+ message: this.$t('tips.createSuccess'),
+ type: 'success'
+ })
+ this.reset()
+ })
+ }
+ } else {
+ return false
+ }
+ })
+ },
+ resetForm() {
+ this.$refs.form.clearValidate()
+ this.$refs.form.resetFields()
+ this.dept = this.initDept()
+ }
+ }
+ }
+</script>
+<style lang="scss" scoped>
+ .dept {
+ margin: 10px;
+
+ .app-container {
+ margin: 0 0 10px 0 !important;
+ }
+ }
+
+ .el-card.is-always-shadow {
+ box-shadow: none;
+ }
+
+ .el-card {
+ border-radius: 0;
+ border: none;
+
+ .el-card__header {
+ padding: 10px 20px !important;
+ border-bottom: 1px solid #f1f1f1 !important;
+ }
+ }
+</style>
+<style lang="scss">
+ .vue-treeselect__menu {
+ max-height: 165px !important;
+ }
</style>
--
Gitblit v1.8.0