| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch"> |
| | | <el-form-item label="部门名称" prop="deptName"> |
| | | <el-form-item label="机构名称" prop="deptName"> |
| | | <el-input |
| | | v-model="queryParams.deptName" |
| | | placeholder="请输入部门名称" |
| | | placeholder="请输入机构名称" |
| | | clearable |
| | | size="small" |
| | | @keyup.enter.native="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="状态" prop="status"> |
| | | <el-select v-model="queryParams.status" placeholder="部门状态" clearable size="small"> |
| | | <el-form-item label="机构状态" prop="status"> |
| | | <el-select v-model="queryParams.status" placeholder="机构状态" clearable size="small"> |
| | | <el-option |
| | | v-for="dict in dict.type.sys_normal_disable" |
| | | :key="dict.value" |
| | |
| | | size="mini" |
| | | @click="handleAdd" |
| | | v-hasPermi="['system:dept:add']" |
| | | >新增</el-button> |
| | | >新增 |
| | | </el-button> |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | |
| | | icon="el-icon-sort" |
| | | size="mini" |
| | | @click="toggleExpandAll" |
| | | >展开/折叠</el-button> |
| | | >展开/折叠 |
| | | </el-button> |
| | | </el-col> |
| | | <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
| | | </el-row> |
| | |
| | | :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="deptName" label="机构名称" width="260"></el-table-column> |
| | | <el-table-column prop="code" label="机构编号" width="200"></el-table-column> |
| | | <!-- <el-table-column prop="orderNum" label="排序" width="200"></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> |
| | | </el-table-column> |
| | | <el-table-column prop="leaderName" label="主负责人" width="200"></el-table-column> |
| | | <el-table-column prop="leaderAssistantName" label="副负责人" width="200"></el-table-column> |
| | | <el-table-column prop="remarks" label="机构职能" width="200"></el-table-column> |
| | | <el-table-column label="创建时间" align="center" prop="createTime" width="200"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ parseTime(scope.row.createTime) }}</span> |
| | |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-edit" |
| | | @click="handleUser(scope.row)" |
| | | >成员 |
| | | </el-button> |
| | | <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-edit" |
| | | @click="handleUpdate(scope.row)" |
| | | v-hasPermi="['system:dept:edit']" |
| | | >修改</el-button> |
| | | >修改 |
| | | </el-button> |
| | | <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-plus" |
| | | @click="handleAdd(scope.row)" |
| | | v-hasPermi="['system:dept:add']" |
| | | >新增</el-button> |
| | | >新增 |
| | | </el-button> |
| | | <el-button |
| | | v-if="scope.row.parentId != 0" |
| | | size="mini" |
| | |
| | | icon="el-icon-delete" |
| | | @click="handleDelete(scope.row)" |
| | | v-hasPermi="['system:dept:remove']" |
| | | >删除</el-button> |
| | | >删除 |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | |
| | | <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="上级机构" prop="parentId"> |
| | | <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门"/> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="部门名称" prop="deptName"> |
| | | <el-input v-model="form.deptName" placeholder="请输入部门名称" /> |
| | | <el-form-item label="机构名称" prop="deptName"> |
| | | <el-input v-model="form.deptName" placeholder="请输入机构名称"/> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="机构编号" prop="code"> |
| | | <el-input v-model="form.code" placeholder="请输入机构名称"/> |
| | | </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-input-number v-model="form.orderNum" controls-position="right" :min="0"/> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="负责人" prop="leader"> |
| | | <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" /> |
| | | <el-form-item label="主负责人" prop="leader"> |
| | | <el-select v-model="form.leader" placeholder="请选择主负责人" clearable size="small"> |
| | | <el-option |
| | | v-for="dict in userList" |
| | | :key="dict.userId" |
| | | :label="dict.nickName" |
| | | :value="dict.userId" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="联系电话" prop="phone"> |
| | | <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" /> |
| | | <el-form-item label="副负责人" prop="leaderAssistant"> |
| | | <el-select v-model="form.leaderAssistant" placeholder="请选择副负责人" clearable size="small"> |
| | | <el-option |
| | | v-for="dict in userList" |
| | | :key="dict.userId" |
| | | :label="dict.nickName" |
| | | :value="dict.userId" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <!-- <el-col :span="12">--> |
| | | <!-- <el-form-item label="联系电话" prop="phone">--> |
| | | <!-- <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />--> |
| | | <!-- </el-form-item>--> |
| | | <!-- </el-col>--> |
| | | <!-- <el-col :span="12">--> |
| | | <!-- <el-form-item label="邮箱" prop="email">--> |
| | | <!-- <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />--> |
| | | <!-- </el-form-item>--> |
| | | <!-- </el-col>--> |
| | | <el-col :span="12"> |
| | | <el-form-item label="邮箱" prop="email"> |
| | | <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="部门状态"> |
| | | <el-form-item label="机构状态"> |
| | | <el-radio-group v-model="form.status"> |
| | | <el-radio |
| | | v-for="dict in dict.type.sys_normal_disable" |
| | | :key="dict.value" |
| | | :label="dict.value" |
| | | >{{dict.label}}</el-radio> |
| | | >{{dict.label}} |
| | | </el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="机构职能" prop="remarks"> |
| | | <el-input v-model="form.remarks" type="textarea" placeholder="请输入机构职能" controls-position="right" :min="0"/> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <el-button @click="cancel">取 消</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | <!--机构成员--> |
| | | <el-drawer |
| | | title="机构成员" |
| | | :visible.sync="drawer" |
| | | direction="rtl" |
| | | size="50%"> |
| | | <el-table :data="userTable"> |
| | | <el-table-column property="nickName" label="姓名" width="150"></el-table-column> |
| | | <el-table-column property="phonenumber" label="电话" width="200"></el-table-column> |
| | | <el-table-column property="userName" label="账号"></el-table-column> |
| | | </el-table> |
| | | <pagination |
| | | v-show="tableTotal>0" |
| | | :total="tableTotal" |
| | | :page.sync="queryTable.pageNum" |
| | | :limit.sync="queryTable.pageSize" |
| | | @pagination="getList" |
| | | /> |
| | | </el-drawer> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept"; |
| | | import {listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild} from "@/api/system/dept"; |
| | | import {listUser, listUserDept} from "@/api/common/common"; |
| | | import Treeselect from "@riophae/vue-treeselect"; |
| | | import "@riophae/vue-treeselect/dist/vue-treeselect.css"; |
| | | |
| | | export default { |
| | | name: "Dept", |
| | | dicts: ['sys_normal_disable'], |
| | | components: { Treeselect }, |
| | | components: {Treeselect}, |
| | | data() { |
| | | return { |
| | | // 遮罩层 |
| | |
| | | // 表单校验 |
| | | rules: { |
| | | parentId: [ |
| | | { required: true, message: "上级部门不能为空", trigger: "blur" } |
| | | {required: true, message: "上级机构不能为空", trigger: "blur"} |
| | | ], |
| | | deptName: [ |
| | | { required: true, message: "部门名称不能为空", trigger: "blur" } |
| | | {required: true, message: "机构名称不能为空", trigger: "blur"} |
| | | ], |
| | | code: [ |
| | | {required: true, message: "机构编号不能为空", trigger: "blur"} |
| | | ], |
| | | orderNum: [ |
| | | { required: true, message: "显示排序不能为空", trigger: "blur" } |
| | | {required: true, message: "显示排序不能为空", trigger: "blur"} |
| | | ], |
| | | email: [ |
| | | { |
| | |
| | | trigger: "blur" |
| | | } |
| | | ] |
| | | }, |
| | | // 下拉用户 |
| | | userList: [], |
| | | // 成员抽屉 |
| | | drawer: false, |
| | | // 成员表格 |
| | | userTable: [], |
| | | tableTotal: 0, |
| | | queryTable: { |
| | | pageNum: 1, |
| | | pageSize: 10 |
| | | } |
| | | }; |
| | | }, |
| | |
| | | /** 新增按钮操作 */ |
| | | handleAdd(row) { |
| | | this.reset(); |
| | | this.getUserList() |
| | | if (row != undefined) { |
| | | this.form.parentId = row.deptId; |
| | | } |
| | |
| | | this.deptOptions = this.handleTree(response.data, "deptId"); |
| | | }); |
| | | }, |
| | | // 用户下拉列表 |
| | | getUserList() { |
| | | listUser().then(res => { |
| | | this.userList = res.data |
| | | }) |
| | | }, |
| | | /** 展开/折叠操作 */ |
| | | toggleExpandAll() { |
| | | this.refreshTable = false; |
| | |
| | | this.refreshTable = true; |
| | | }); |
| | | }, |
| | | // 机构成员 |
| | | handleUser(row) { |
| | | this.drawer = true |
| | | listUserDept(Object.assign({}, {deptId: row.deptId}, this.queryTable)).then(res => { |
| | | console.log(res) |
| | | this.userTable = res.data.records |
| | | this.tableTotal = res.data.total |
| | | }) |
| | | }, |
| | | /** 修改按钮操作 */ |
| | | handleUpdate(row) { |
| | | this.reset(); |
| | | this.getUserList() |
| | | getDept(row.deptId).then(response => { |
| | | this.form = response.data; |
| | | this.open = true; |
| | |
| | | }); |
| | | }, |
| | | /** 提交按钮 */ |
| | | submitForm: function() { |
| | | submitForm: function () { |
| | | this.$refs["form"].validate(valid => { |
| | | if (valid) { |
| | | if (this.form.deptId != undefined) { |
| | |
| | | }, |
| | | /** 删除按钮操作 */ |
| | | handleDelete(row) { |
| | | this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?').then(function() { |
| | | this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?').then(function () { |
| | | return delDept(row.deptId); |
| | | }).then(() => { |
| | | this.getList(); |
| | | this.$modal.msgSuccess("删除成功"); |
| | | }).catch(() => {}); |
| | | }).catch(() => { |
| | | }); |
| | | } |
| | | } |
| | | }; |