From c523e2267a47b67930ef6485ccde8489a69df7c9 Mon Sep 17 00:00:00 2001
From: yijiusmile <253281376@qq.com>
Date: 星期五, 29 一月 2021 00:27:38 +0800
Subject: [PATCH] 员工管理字段调整,用户管理按钮修改,部门管理表单增加字段,岗位管理增加表单
---
src/views/febs/system/dept/Index.vue | 397 +++++++++++++++++++++++++++++++++-----------------------
1 files changed, 236 insertions(+), 161 deletions(-)
diff --git a/src/views/febs/system/dept/Index.vue b/src/views/febs/system/dept/Index.vue
index c91f6c9..947f603 100644
--- a/src/views/febs/system/dept/Index.vue
+++ b/src/views/febs/system/dept/Index.vue
@@ -22,16 +22,16 @@
</el-dropdown-menu>
</el-dropdown>
</div>
- <el-tree
- ref="deptTree"
- :data="deptTree"
- :check-strictly="true"
- show-checkbox
- accordion
+ <el-tree
+ ref="deptTree"
+ :data="deptTree"
+ :check-strictly="true"
+ show-checkbox
+ accordion
node-key="id"
- highlight-current
- :filter-node-method="filterNode"
- @node-click="nodeClick"
+ highlight-current
+ :filter-node-method="filterNode"
+ @node-click="nodeClick"
/>
</div>
</el-col>
@@ -45,13 +45,13 @@
<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"
+ <treeselect
+ v-model="dept.parentId"
+ :multiple="false"
+ :options="deptTree"
:clear-value-text="$t('common.clear')"
- placeholder=" "
- style="width:100%"
+ placeholder=" "
+ style="width:100%"
/>
</el-form-item>
<el-form-item :label="$t('table.dept.deptName')" prop="deptName">
@@ -59,6 +59,29 @@
</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-item label="部门性质">
+ <el-select v-model="bmxz" placeholder="请选择">
+ <el-option label="分公司" value="1" />
+ <el-option label="部门" value="2" />
+ <el-option label="驻点" value="3" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="部门负责人">
+ <el-input />
+ </el-form-item>
+ <el-form-item label="联系电话">
+ <el-input />
+ </el-form-item>
+ <el-form-item label="部门智能">
+ <el-select v-model="bmzn" placeholder="请选择">
+ <el-option label="保安" value="1" />
+ <el-option label="后勤" value="2" />
+ <el-option label="管理" value="3" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="部门职责">
+ <el-input type="textarea" :rows="4" />
</el-form-item>
</el-form>
</div>
@@ -72,7 +95,7 @@
</el-card>
</el-tab-pane>
<el-tab-pane label="岗位信息" name="second">
- <el-button type="danger">添加岗位</el-button>
+ <el-button type="danger" @click="showXzgw">添加岗位</el-button>
<el-button type="primary">删除岗位</el-button>
<el-table :data="jobData" style="width: 100%">
<el-table-column prop="prop0" label="" width="180" />
@@ -84,160 +107,212 @@
</el-tabs>
</el-col>
- </el-row>
+ </el-row>
+ <el-dialog title="新增岗位" :visible.sync="dialogShowXzgw" width="50%">
+ <el-form :model="baseicInformationForm" label-position="right" label-width="120px">
+ <el-row>
+ <el-col span="24">
+ <el-form-item label="岗位名称">
+ <el-input v-model="name" />
+ </el-form-item>
+ <el-form-item label="岗位描述">
+ <el-input v-model="name" type="textarea" :rows="4" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="dialogIsShow()">取 消</el-button>
+ <el-button type="primary" @click="dialogIsShow()">确 定</el-button>
+ </div>
+ </el-dialog>
</div>
</template>
<script>
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+ 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() {
+ export default {
+ name: 'DeptManager',
+ components: {
+ Treeselect
+ },
+ data() {
return {
- deptId: '',
+ dialogShowXzgw: false,
+ activeName: 'first',
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
+ 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'
+ }
+ ]
}
- })
+ }
},
- resetForm() {
- this.$refs.form.clearValidate()
- this.$refs.form.resetFields()
- this.dept = this.initDept()
+ 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()
+ },
+ showXzgw() {
+ this.dialogShowXzgw = true
+ }
}
}
-}
</script>
<style lang="scss" scoped>
.dept {
@@ -266,4 +341,4 @@
.vue-treeselect__menu {
max-height: 165px !important;
}
-</style>
+</style>
--
Gitblit v1.8.0