Browse Source

feat:[系统管理] [部门管理] 按照原型修改界面

luojie
memorylkf 3 weeks ago
parent
commit
a0be07a713
3 changed files with 117 additions and 61 deletions
  1. +15
    -0
      src/lang/en.js
  2. +15
    -0
      src/lang/zh.js
  3. +87
    -61
      src/views/system/dept/index.vue

+ 15
- 0
src/lang/en.js View File

@ -134,6 +134,21 @@ export default {
filterPlaceholder: 'name/mobile',
unauthorized: 'unauthorized',
authorized: 'authorized'
},
dept: {
name: 'name',
type: 'type',
parent: 'parent',
add: 'add',
edit: 'edit',
detail: 'view',
delete: 'delete',
dept: 'dept',
subject: 'subject',
team: 'team',
notEmpty: ' can not be empty',
addDept: 'addDept',
modifyDept: 'modifyDept'
}
},
business: {

+ 15
- 0
src/lang/zh.js View File

@ -134,6 +134,21 @@ export default {
filterPlaceholder: '姓名/手机号',
unauthorized: '未授权',
authorized: '已授权'
},
dept: {
name: '名称',
type: '组织类型',
parent: '上级部门',
add: '添加',
edit: '编辑',
detail: '查看',
delete: '删除',
dept: '部门',
subject: '学科',
team: '小组',
notEmpty: '不能为空',
addDept: '新增部门',
modifyDept: '编辑部门'
}
},
business: {

+ 87
- 61
src/views/system/dept/index.vue View File

@ -1,15 +1,15 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
<el-form-item label="部门名称" prop="deptName">
<el-form-item :label="$t('page.system.dept.name')+':'" prop="deptName">
<el-input
v-model="queryParams.deptName"
placeholder="请输入部门名称"
:placeholder="$t('form.placeholderInput')"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<!-- <el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="部门状态" clearable>
<el-option
v-for="dict in dict.type.sys_normal_disable"
@ -18,10 +18,10 @@
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-form-item> -->
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{$t('form.search')}}</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{$t('form.reset')}}</el-button>
</el-form-item>
</el-form>
@ -34,9 +34,9 @@
size="mini"
@click="handleAdd"
v-hasPermi="['system:dept:add']"
>新增</el-button>
>{{$t('form.add')}}</el-button>
</el-col>
<el-col :span="1.5">
<!-- <el-col :span="1.5">
<el-button
type="info"
plain
@ -45,7 +45,7 @@
@click="toggleExpandAll"
>展开/折叠</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
</el-row>
<el-table
@ -56,9 +56,15 @@
:default-expand-all="isExpandAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
<el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
<el-table-column prop="status" label="状态" width="100">
<el-table-column prop="deptName" :label="$t('page.system.dept.name')"></el-table-column>
<el-table-column prop="type" :label="$t('page.system.dept.type')" width="200">
<template slot-scope="scope">
<span v-if="scope.row.type===1">{{$t('page.system.dept.dept')}}</span>
<span v-if="scope.row.type===3">{{$t('page.system.dept.subject')}}</span>
<span v-if="scope.row.type===5">{{$t('page.system.dept.team')}}</span>
</template>
</el-table-column>
<!-- <el-table-column prop="status" label="状态" width="100">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
</template>
@ -67,31 +73,34 @@
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
</el-table-column> -->
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
@click="handleUpdate(scope.row,false)"
v-hasPermi="['system:dept:edit']"
>修改</el-button>
>{{$t('page.system.dept.edit')}}</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-plus"
@click="handleAdd(scope.row)"
v-hasPermi="['system:dept:add']"
>新增</el-button>
>{{$t('page.system.dept.add')}}</el-button>
<el-button
v-if="scope.row.parentId != 0"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:dept:remove']"
>删除</el-button>
>{{$t('page.system.dept.delete')}}</el-button>
<el-button
size="mini"
type="text"
@click="handleUpdate(scope.row,true)"
v-hasPermi="['system:dept:edit']"
>{{$t('page.system.dept.detail')}}</el-button>
</template>
</el-table-column>
</el-table>
@ -101,24 +110,34 @@
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="24" v-if="form.parentId !== 0">
<el-form-item label="上级部门" prop="parentId">
<treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />
<el-form-item :label="$t('page.system.dept.parent')+':'" prop="parentId">
<treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" :placeholder="$t('form.placeholderSelect')" :disabled="readonly" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="部门名称" prop="deptName">
<el-input v-model="form.deptName" placeholder="请输入部门名称" />
<el-col :span="24">
<el-form-item :label="$t('page.system.dept.name')+':'" prop="deptName">
<el-input v-model="form.deptName" :placeholder="$t('form.placeholderInput')" :readonly="readonly" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="24">
<el-form-item :label="$t('page.system.dept.type')+':'" prop="type">
<el-radio-group v-model="form.type" :disabled="readonly">
<el-radio :label="1" >{{$t('page.system.dept.dept')}}</el-radio>
<el-radio :label="3" >{{$t('page.system.dept.subject')}}</el-radio>
<el-radio :label="5" >{{$t('page.system.dept.team')}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="显示排序" prop="orderNum">
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
</el-form-item>
</el-col>
</el-col> -->
</el-row>
<el-row>
<!-- <el-row>
<el-col :span="12">
<el-form-item label="负责人" prop="leader">
<el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
@ -147,11 +166,11 @@
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-row> -->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
<div slot="footer" class="dialog-footer" v-if="!readonly">
<el-button type="primary" @click="submitForm">{{$t('form.saveConfirm')}}</el-button>
<el-button @click="cancel">{{$t('form.cancel')}}</el-button>
</div>
</el-dialog>
</div>
@ -194,29 +213,33 @@ export default {
//
rules: {
parentId: [
{ required: true, message: "上级部门不能为空", trigger: "blur" }
{ required: true, message: this.$t('page.system.dept.parent')+ this.$t('page.system.dept.notEmpty'), trigger: "change" }
],
deptName: [
{ required: true, message: "部门名称不能为空", trigger: "blur" }
],
orderNum: [
{ required: true, message: "显示排序不能为空", trigger: "blur" }
{ required: true, message: this.$t('page.system.dept.name')+ this.$t('page.system.dept.notEmpty'), trigger: "blur" }
],
email: [
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"]
}
type: [
{ required: true, message: this.$t('page.system.dept.type')+ this.$t('page.system.dept.notEmpty'), trigger: "change" }
],
phone: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
]
}
// orderNum: [
// { required: true, message: "", trigger: "blur" }
// ],
// email: [
// {
// type: "email",
// message: "",
// trigger: ["blur", "change"]
// }
// ],
// phone: [
// {
// pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
// message: "",
// trigger: "blur"
// }
// ]
},
readonly:false,
}
},
created() {
@ -253,11 +276,12 @@ export default {
deptId: undefined,
parentId: undefined,
deptName: undefined,
orderNum: undefined,
orderNum: 0,
leader: undefined,
phone: undefined,
email: undefined,
status: "0"
status: "0",
type:undefined
}
this.resetForm("form")
},
@ -272,12 +296,13 @@ export default {
},
/** 新增按钮操作 */
handleAdd(row) {
this.readonly = false
this.reset()
if (row != undefined) {
this.form.parentId = row.deptId
}
this.open = true
this.title = "添加部门"
this.title = this.$t('page.system.dept.addDept')
listDept().then(response => {
this.deptOptions = this.handleTree(response.data, "deptId")
})
@ -291,12 +316,13 @@ export default {
})
},
/** 修改按钮操作 */
handleUpdate(row) {
handleUpdate(row,readonly) {
this.readonly = readonly
this.reset()
getDept(row.deptId).then(response => {
this.form = response.data
this.open = true
this.title = "修改部门"
this.title = this.$t('page.system.dept.modifyDept')
listDeptExcludeChild(row.deptId).then(response => {
this.deptOptions = this.handleTree(response.data, "deptId")
if (this.deptOptions.length == 0) {
@ -312,13 +338,13 @@ export default {
if (valid) {
if (this.form.deptId != undefined) {
updateDept(this.form).then(response => {
this.$modal.msgSuccess("修改成功")
// this.$modal.msgSuccess("")
this.open = false
this.getList()
})
} else {
addDept(this.form).then(response => {
this.$modal.msgSuccess("新增成功")
// this.$modal.msgSuccess("")
this.open = false
this.getList()
})
@ -328,11 +354,11 @@ export default {
},
/** 删除按钮操作 */
handleDelete(row) {
this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?').then(function() {
this.$modal.confirm(this.$t('form.confirmDelete')).then(function() {
return delDept(row.deptId)
}).then(() => {
this.getList()
this.$modal.msgSuccess("删除成功")
// this.$modal.msgSuccess("")
}).catch(() => {})
}
}

Loading…
Cancel
Save