| | |
| | | export function queryMenuTree() { |
| | | return request.get('/Menu/selectMenuAll'); |
| | | } |
| | | |
| | | //新增单条菜单 |
| | | export function insertMenu(params) { |
| | | return request.post('/menu/insertMenu', params); |
| | | } |
| | | //删除多条菜单 |
| | | export function deleteMenu(params) { |
| | | return request.get('/menu/deleteMenus', { params: params }); |
| | | } |
| | | //更新单条菜单栏 |
| | | export function updateMenuTree(params) { |
| | | return request.post('/Menu/updateMenu', params); |
| | |
| | | export function updateMenuTrees(params) { |
| | | return request.post('/Menu/updateMenus', params); |
| | | } |
| | | |
| | | |
| | | |
| | | //请求目录树数据 |
| | | export function queryDirTree() { |
| | |
| | | } |
| | | //删除多条目录 |
| | | export function deleteDir(params) { |
| | | return request.get('/dir/deleteDirs?' + params); |
| | | return request.get('/dir/deleteDirs', { params: params }); |
| | | } |
| | | //更新单条目录树 |
| | | export function updateDirTree(params) { |
| | |
| | | export function queryDepTree() { |
| | | return request.get('/dep/selectDepAll'); |
| | | } |
| | | //新增单条目录 |
| | | export function insertDep(params) { |
| | | return request.post('/dep/insertDep', params); |
| | | } |
| | | //删除多条目录 |
| | | export function deleteDep(params) { |
| | | return request.get('/dep/deleteDeps', { params: params }); |
| | | } |
| | | //更新单条单位数据 |
| | | export function updateDepTree(params) { |
| | | return request.post('/dep/updateDep', params); |
| | |
| | | } |
| | | |
| | | // 请求用户管理数据 |
| | | export function queryPageUser(pageIndex, pageSize) { |
| | | return request.get( |
| | | '/user/selectByPageAndCount?pageIndex=' + |
| | | pageIndex + |
| | | '&pageSize=' + |
| | | pageSize |
| | | ); |
| | | export function queryPageUser(params) { |
| | | return request.get('/user/selectByPageAndCount', { params: params }); |
| | | } |
| | | // 新增用户管理数据 |
| | | export function insertUser(params) { |
| | | return request.post('/user/insertUser', params); |
| | | } |
| | | // 删除用户管理数据 |
| | | export function deleteUser(params) { |
| | | return request.get('/user/deleteUser', { params: params }); |
| | | } |
| | | |
| | | // 用户管理数据 |
| | | export function updateUser(params) { |
| | | return request.post('/user/updateUser', params); |
| | | } |
| | | // 用户管理数据 |
| | | export function updateUserPwd(params) { |
| | | return request.post('/user/updateUserPwd', params); |
| | | } |
| | |
| | | delete: '删除', |
| | | apply: '申请', |
| | | rejection: '拒批', |
| | | depName: '单位名称', |
| | | userexport: 'Excel用户导出', |
| | | userinput: 'Excel用户导入', |
| | | userStatus: "用户状态", |
| | |
| | | pwd: "密码", |
| | | sex: "性别", |
| | | natives: "籍贯", |
| | | depName: '单位名称', |
| | | idcard: "证件号", |
| | | job: "工作", |
| | | edu: "教育", |
| | |
| | | } |
| | | |
| | | .btnBox { |
| | | margin-left: 5px; |
| | | |
| | | margin: 0 10px 0 5px; |
| | | .el-button + .el-button { |
| | | margin-left: 5px; |
| | | } |
| | |
| | | <el-menu-item |
| | | v-else |
| | | :key="item.id" |
| | | :index="item.url == null ? null : item.url + ''" |
| | | :index="item.url == null ? item.id.toString() : item.url + ''" |
| | | > |
| | | <span slot="title">{{ |
| | | $store.state.lang == "zh" ? item.cnName : item.enName |
| | |
| | | <div class="cataSettings_box"> |
| | | <div class="cataSettings_tree"> |
| | | <My-bread :list="['数据管理', '目录管理']"></My-bread> |
| | | <el-button class="saveBtn" type="primary" size="mini" @click="sendChange" |
| | | >保存</el-button |
| | | > |
| | | <!-- <el-button class="saveBtn" type="primary" size="mini" @click="sendChange" --> |
| | | <!-- >保存</el-button --> |
| | | <!-- > --> |
| | | <el-divider /> |
| | | <div class="cataTreeBox"> |
| | | <el-tree |
| | |
| | | <h4>详细信息</h4> |
| | | </div> |
| | | <div class="form_box"> |
| | | <el-form :model="itemdetail"> |
| | | <el-form :model="itemdetail" ref="itemdetail" :rules="rules"> |
| | | <!-- <el-form-item label="目录编码" :label-width="formLabelWidth"> |
| | | <el-input v-model="itemdetail.id" disabled /> |
| | | </el-form-item> --> |
| | | <el-form-item label="目录名称" :label-width="formLabelWidth"> |
| | | <el-form-item |
| | | prop="name" |
| | | label="目录名称" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input v-model="itemdetail.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="目录说明" :label-width="formLabelWidth"> |
| | |
| | | <el-input v-model="itemdetail.bak" type="textarea" resize="none" /> |
| | | </el-form-item> |
| | | <div class="btnBox"> |
| | | <el-button type="primary" @click="updMenu">保存</el-button> |
| | | <el-button type="primary" @click="reset">取消</el-button> |
| | | <el-button type="primary" @click="updCata('itemdetail')" |
| | | >保存</el-button |
| | | > |
| | | <el-button type="primary" @click="reset('itemdetail')" |
| | | >取消</el-button |
| | | > |
| | | </div> |
| | | </el-form> |
| | | </div> |
| | |
| | | > |
| | | <el-input v-model="ruleForm.name" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item |
| | | prop="descr" |
| | | label="目录说明" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-form-item label="目录说明" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.descr" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="bak" label="目录备注" :label-width="formLabelWidth"> |
| | | <el-form-item label="目录备注" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.bak" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | |
| | | import { |
| | | queryDirTree, |
| | | queryMaxId, |
| | | updateDirTree, |
| | | updateDirTrees, |
| | | insertDir, |
| | | deleteDir, |
| | |
| | | }, |
| | | data() { |
| | | let validName = (rule, value, callback) => { |
| | | if (value === "") { |
| | | if (value === "" || value === null || value === undefined) { |
| | | return callback(new Error("目录名称不能为空")); |
| | | } else { |
| | | callback(); |
| | |
| | | old_dirDat: [], //el树数据(拖动前) |
| | | newData: [], //拖动后原始数据 |
| | | itemdetail: {}, |
| | | backUpData: {}, |
| | | formLabelWidth: "170px", |
| | | delChildIDs: "", |
| | | backUpData: "", |
| | | formLabelWidth: "130px", |
| | | delChildID: "", |
| | | delChildIDs: [], |
| | | dialogFormVisible: false, |
| | | ruleForm: { |
| | | level: null, |
| | |
| | | bak: "", |
| | | }, |
| | | rules: { |
| | | name: [{ validator: validName, trigger: "blur" }], |
| | | name: [{ required: true, validator: validName, trigger: "blur" }], |
| | | }, |
| | | }; |
| | | }, |
| | |
| | | this.ruleForm.pid = data.id; |
| | | this.ruleForm.orderNum = node.childNodes.length + 1; |
| | | this.ruleForm.level = data.level + 1; |
| | | // console.log(data); |
| | | // console.log(node); |
| | | }, |
| | | resetForm(formName) { |
| | | this.dialogFormVisible = false; |
| | | this.$nextTick(() => { |
| | | this.ruleForm = {}; |
| | | this.$refs[formName].resetFields(); |
| | | }); |
| | | }, |
| | |
| | | message: "添加成功", |
| | | type: "success", |
| | | }); |
| | | this.itemdetail = {}; |
| | | this.ruleForm = {}; |
| | | this.dialogFormVisible = false; |
| | | this.$refs[formName].resetFields(); |
| | | } |
| | | }, 2000); |
| | | }, 500); |
| | | }) |
| | | .catch((res) => { |
| | | console.log(res); |
| | | this.itemdetail = {}; |
| | | this.$message.error("添加失败"); |
| | | this.fullscreenLoading = false; |
| | | console.log(res); |
| | | }); |
| | | } else { |
| | | // alert("目录名称不能为空"); |
| | |
| | | type: "warning", |
| | | }) |
| | | .then(() => { |
| | | // console.log(node); |
| | | // console.log(data); |
| | | |
| | | //兄弟重新排序 |
| | | const parent = node.parent; |
| | | const children = parent.data.children || parent.data; |
| | |
| | | }); |
| | | |
| | | this.traverseArr(data); //获取删除的子ID |
| | | let delIDs = this.delChildIDs + "id=" + data.id; //要删除的全部ID |
| | | console.log(delIDs); |
| | | Promise.all([deleteDir(delIDs), updateDirTrees(children)]) |
| | | this.delChildIDs.push(data.id); //要删除的全部ID |
| | | let delIDs = this.delChildIDs; |
| | | Promise.all([ |
| | | deleteDir({ ids: delIDs.toString() }), |
| | | updateDirTrees(children), |
| | | ]) |
| | | .then((res) => { |
| | | console.log(res); |
| | | if (res[0].code == 200 && res[1].code == 200) { |
| | |
| | | type: "success", |
| | | message: "删除成功!", |
| | | }); |
| | | this.itemdetail = {}; |
| | | } else if (res[0].code == 200) { |
| | | this.$message.error("删除成功,位置调整失败"); |
| | | } else if (res[1].code == 200) { |
| | | this.$message.error("删除失败,位置调整成功"); |
| | | } else { |
| | | this.$message.error("删除失败"); |
| | | } |
| | | }) |
| | | .catch(() => { |
| | | this.$message({ |
| | | type: "error", |
| | | message: "删除失败", |
| | | }); |
| | | this.$message.error("删除失败"); |
| | | this.itemdetail = {}; |
| | | }); |
| | | |
| | | //重置要删除的子ID |
| | | this.delChildIDs = ""; |
| | | this.delChildIDs = []; |
| | | }) |
| | | .catch(() => { |
| | | this.$message({ |
| | | type: "info", |
| | | message: "已取消删除", |
| | | }); |
| | | this.$message("已取消删除"); |
| | | }); |
| | | // this.dialogMessage="是否删除" |
| | | // this.dialogFlag = 1; |
| | |
| | | if (obj.children) { |
| | | return obj.children.forEach((item) => { |
| | | // console.log(item.id + "---" + item.name); |
| | | this.delChildIDs += "id=" + item.id + "&"; |
| | | // this.delChildID += "id=" + item.id + "&"; |
| | | this.delChildIDs.push(item.id); |
| | | this.traverseArr(item); |
| | | }); |
| | | } |
| | |
| | | let arr = []; |
| | | this.oriData.forEach((e) => { |
| | | nodeData.forEach((item) => { |
| | | if (item.id === e.id) { |
| | | e = item; |
| | | } |
| | | if (item.id === e.id) e = item; |
| | | }); |
| | | arr.push(e); |
| | | }); |
| | | this.newData = arr; |
| | | this.sendChange(); |
| | | }) |
| | | .catch(() => { |
| | | this.$message({ |
| | | type: "info", |
| | | message: "已取消更改", |
| | | }); |
| | | this.$message("已取消更改"); |
| | | this.dirList = this.old_dirDat; //将备份的dir重新赋值 |
| | | }); |
| | | }, |
| | | sendChange() { |
| | | updateDirTrees(this.newData).then((res) => { |
| | | // console.log(res); |
| | | updateDirTrees(this.newData) |
| | | .then((res) => { |
| | | if (res.code == 200) { |
| | | this.$message({ |
| | | type: "success", |
| | | message: "更新成功!", |
| | | }); |
| | | alert("调整完成。请及时刷新页面!"); |
| | | return; |
| | | } else { |
| | | alert("调整失败,请重试!"); |
| | | } |
| | | }) |
| | | .catch(() => { |
| | | alert("修改失败,请重试!"); |
| | | }); |
| | | }, |
| | | handleNodeClick(data) { |
| | |
| | | this.backUpData = JSON.stringify(data); |
| | | this.itemdetail = JSON.parse(JSON.stringify(data)); |
| | | }, |
| | | updMenu() { |
| | | this.$message({ |
| | | message: "修改成功", |
| | | type: "success", |
| | | updCata(formName) { |
| | | this.$nextTick(() => { |
| | | this.$refs[formName].validate((valid) => { |
| | | if (valid) { |
| | | this.fullscreenLoading = true; |
| | | updateDirTree(this.itemdetail) |
| | | .then((res) => { |
| | | setTimeout(() => { |
| | | this.fullscreenLoading = false; |
| | | if (res.code == 200) { |
| | | alert("修改完成,请及时刷新页面!"); |
| | | this.itemdetail = {}; |
| | | this.dialogFormVisible = false; |
| | | } |
| | | }, 500); |
| | | }) |
| | | .catch((res) => { |
| | | alert("修改失败,请重试!"); |
| | | this.fullscreenLoading = false; |
| | | }); |
| | | } else { |
| | | return false; |
| | | } |
| | | }); |
| | | }); |
| | | }, |
| | | reset() { |
| | | this.$message("已取消"); |
| | | reset(formName) { |
| | | this.$refs[formName].resetFields(); |
| | | if (this.backUpData != "") { |
| | | this.itemdetail = JSON.parse(this.backUpData); |
| | | } |
| | | }, |
| | | }, |
| | | mounted() { |
| | |
| | | background-color: rgb(153, 153, 153); |
| | | } |
| | | .btnBox { |
| | | margin-left: 5px; |
| | | margin: 0 10px 0 5px; |
| | | .el-button + .el-button { |
| | | margin-left: 5px; |
| | | } |
| | |
| | | } |
| | | } |
| | | } |
| | | /deep/ .el-dialog__body { |
| | | padding: 0 30px 0 0; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | <div class="menuSettings_box"> |
| | | <div class="menuSettings_tree"> |
| | | <My-bread :list="['运维管理', '菜单设置']"></My-bread> |
| | | <el-button class="saveBtn" type="primary" size="mini" @click="sendChange" |
| | | <!-- <el-button class="saveBtn" type="primary" size="mini" @click="sendChange" |
| | | >保存</el-button |
| | | > |
| | | > --> |
| | | <el-divider /> |
| | | <div class="menuTreeBox"> |
| | | <el-tree |
| | |
| | | > |
| | | <span class="custom-tree-node" slot-scope="{ node, data }"> |
| | | <span>{{ node.label }}</span> |
| | | <span class="btnBox"> |
| | | <el-button |
| | | type="text" |
| | | size="mini" |
| | | @click="() => append(node, data)" |
| | | > |
| | | <i class="el-icon-circle-plus"></i> |
| | | </el-button> |
| | | <el-button |
| | | type="text" |
| | | size="mini" |
| | | @click="() => remove(node, data)" |
| | | > |
| | | <i class="el-icon-delete-solid"></i> |
| | | </el-button> |
| | | </span> |
| | | </span> |
| | | </el-tree> |
| | | </div> |
| | |
| | | <h4>详细信息</h4> |
| | | </div> |
| | | <div class="form_box"> |
| | | <el-form :model="itemdetail"> |
| | | <el-form-item label="英文名称" :label-width="formLabelWidth"> |
| | | <el-form :model="itemdetail" ref="itemdetail" :rules="rules"> |
| | | <el-form-item |
| | | prop="enName" |
| | | label="英文名称" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input v-model="itemdetail.enName" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="中文名称" :label-width="formLabelWidth"> |
| | | <el-form-item |
| | | prop="cnName" |
| | | label="中文名称" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input v-model="itemdetail.cnName" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="图标" :label-width="formLabelWidth"> |
| | | <el-input v-model="itemdetail.icon" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="是否显示" :label-width="formLabelWidth"> |
| | | <el-input v-model="itemdetail.isShow" autocomplete="off"></el-input> |
| | | <el-form-item |
| | | prop="isShow" |
| | | label="是否显示" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-select v-model="itemdetail.isShow" placeholder=""> |
| | | <el-option |
| | | v-for="item in options1" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="菜单Url" :label-width="formLabelWidth"> |
| | | <el-form-item |
| | | prop="url" |
| | | label="菜单Url" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input v-model="itemdetail.url" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="授权" :label-width="formLabelWidth"> |
| | | <el-input v-model="itemdetail.perms" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="类型" :label-width="formLabelWidth"> |
| | | <el-input v-model="itemdetail.type" autocomplete="off"></el-input> |
| | | <el-form-item label="类型" prop="type" :label-width="formLabelWidth"> |
| | | <el-select v-model="itemdetail.type" placeholder="请选择类型"> |
| | | <el-option |
| | | v-for="item in options2" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="备注" :label-width="formLabelWidth"> |
| | | <el-input v-model="itemdetail.bak" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <div class="btnBox"> |
| | | <el-button type="primary" @click="updMenu">保存</el-button> |
| | | <el-button type="primary" @click="reset">取消</el-button> |
| | | <el-button type="primary" @click="updMenu('itemdetail')" |
| | | >保存</el-button |
| | | > |
| | | <el-button type="primary" @click="reset('itemdetail')" |
| | | >取消</el-button |
| | | > |
| | | </div> |
| | | </el-form> |
| | | </div> |
| | | </div> |
| | | <el-dialog title="新增子菜单" :visible.sync="dialogFormVisible"> |
| | | <el-form :model="ruleForm" ref="ruleForm" :rules="rules"> |
| | | <el-form-item |
| | | prop="enName" |
| | | label="英文名称" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input v-model="ruleForm.enName" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item |
| | | prop="cnName" |
| | | label="中文名称" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input v-model="ruleForm.cnName" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="图标" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.icon" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item |
| | | prop="isShow" |
| | | label="是否显示" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-select v-model="ruleForm.isShow" placeholder=""> |
| | | <el-option |
| | | v-for="item in options1" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item prop="url" label="菜单Url" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.url" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="授权" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.perms" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="类型" prop="type" :label-width="formLabelWidth"> |
| | | <el-select v-model="ruleForm.type" placeholder="请选择类型"> |
| | | <el-option |
| | | v-for="item in options2" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="备注" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.bak" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button @click="resetForm('ruleForm')">取消</el-button> |
| | | <el-button |
| | | type="primary" |
| | | @click="submitForm('ruleForm')" |
| | | v-loading.fullscreen.lock="fullscreenLoading" |
| | | >提交</el-button |
| | | > |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | updateMenuTree, |
| | | updateMenuTrees, |
| | | queryMaxId, |
| | | insertMenu, |
| | | deleteMenu, |
| | | } from "../../api/api"; |
| | | export default { |
| | | //import引入的组件需要注入到对象中才能使用 |
| | | components: { |
| | | MyBread, |
| | | }, |
| | | |
| | | data() { |
| | | return { |
| | | defaultProps: { |
| | | children: "children", |
| | | label: "cnName", |
| | | }, |
| | | fullscreenLoading: false, |
| | | oriData: [], //原始树数据 |
| | | menuList: [], //el树数据 |
| | | old_dirDat: [], //el树数据(拖动前) |
| | |
| | | type: null, |
| | | bak: "", |
| | | }, |
| | | backUpData: {}, |
| | | formLabelWidth: "170px", |
| | | backUpData: "", |
| | | formLabelWidth: "130px", |
| | | delChildID: "", |
| | | delChildIDs: [], |
| | | dialogFormVisible: false, |
| | | ruleForm: { |
| | | level: null, |
| | | orderNum: null, |
| | | pid: null, |
| | | enName: "", |
| | | cnName: "", |
| | | icon: "", |
| | | isShow: null, |
| | | url: "", |
| | | perms: null, |
| | | type: null, |
| | | bak: "", |
| | | }, |
| | | rules: { |
| | | enName: [ |
| | | { required: true, message: "请输入英文名称", trigger: "blur" }, |
| | | ], |
| | | cnName: [ |
| | | { required: true, message: "请输入中文名称", trigger: "blur" }, |
| | | ], |
| | | url: [ |
| | | { required: true, message: "请输入菜单跳转的地址", trigger: "blur" }, |
| | | ], |
| | | isShow: [ |
| | | { |
| | | required: true, |
| | | message: "请选择是否显示", |
| | | trigger: "change", |
| | | }, |
| | | ], |
| | | type: [ |
| | | { |
| | | required: true, |
| | | message: "请选择节点类型", |
| | | trigger: "change", |
| | | }, |
| | | ], |
| | | }, |
| | | // 下拉的option里面的value定义成0,1,不能定义成’0’,'1’字符串, |
| | | // 如果要定义成字符串,后台需要返回的也是字符串 |
| | | options1: [ |
| | | { |
| | | value: 0, |
| | | label: "隐藏", |
| | | }, |
| | | { |
| | | value: 1, |
| | | label: "显示", |
| | | }, |
| | | ], |
| | | options2: [ |
| | | { |
| | | value: 0, |
| | | label: "根目录", |
| | | }, |
| | | { |
| | | value: 1, |
| | | label: "菜单", |
| | | }, |
| | | { |
| | | value: 2, |
| | | label: "按钮", |
| | | }, |
| | | ], |
| | | }; |
| | | }, |
| | | methods: { |
| | |
| | | // 循环所有项 |
| | | let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID,分别上下级菜单,并返回数据 |
| | | branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性,并赋值 |
| | | return father.pid == 1; // 返回一级菜单 |
| | | return father.pid == 0; // 返回一级菜单 |
| | | }); |
| | | }, |
| | | append(data) { |
| | | this.$prompt("请输入名称", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | }) |
| | | .then(({ value }) => { |
| | | const newChild = { |
| | | id: this.id + 1, |
| | | name: value, |
| | | pid: data.id, |
| | | // children: [], |
| | | orderNum: data.children ? data.children.length + 1 : 1, |
| | | }; |
| | | this.id = newChild.id; //修改新的最大I |
| | | console.log(newChild); |
| | | |
| | | if (!data.children) { |
| | | this.$set(data, "children", []); |
| | | } |
| | | data.children.push(newChild); |
| | | this.newData.push(newChild); |
| | | // this.sendChange(); |
| | | }) |
| | | .catch(() => { |
| | | append(node, data) { |
| | | this.dialogFormVisible = true; |
| | | this.ruleForm.pid = data.id; |
| | | this.ruleForm.orderNum = node.childNodes.length + 1; |
| | | this.ruleForm.level = data.level + 1; |
| | | }, |
| | | resetForm(formName) { |
| | | this.dialogFormVisible = false; |
| | | this.$nextTick(() => { |
| | | this.$refs[formName].resetFields(); |
| | | this.ruleForm = {}; |
| | | }); |
| | | }, |
| | | submitForm(formName) { |
| | | this.$nextTick(() => { |
| | | this.$refs[formName].validate((valid) => { |
| | | if (valid) { |
| | | this.fullscreenLoading = true; |
| | | insertMenu(this.ruleForm) |
| | | .then((res) => { |
| | | setTimeout(() => { |
| | | this.fullscreenLoading = false; |
| | | if (res.code == 200) { |
| | | this.$message({ |
| | | type: "info", |
| | | message: "取消输入", |
| | | message: "添加成功", |
| | | type: "success", |
| | | }); |
| | | this.itemdetail = {}; |
| | | this.ruleForm = {}; |
| | | this.dialogFormVisible = false; |
| | | this.$refs[formName].resetFields(); |
| | | } |
| | | }, 500); |
| | | }) |
| | | .catch((res) => { |
| | | this.itemdetail = {}; |
| | | this.$message.error("添加失败"); |
| | | this.fullscreenLoading = false; |
| | | console.log(res); |
| | | }); |
| | | } else { |
| | | // alert("目录名称不能为空"); |
| | | return false; |
| | | } |
| | | }); |
| | | }); |
| | | }, |
| | |
| | | type: "warning", |
| | | }) |
| | | .then(() => { |
| | | //兄弟重新排序 |
| | | const parent = node.parent; |
| | | const children = parent.data.children || parent.data; |
| | | const index = children.findIndex((d) => d.id === data.id); |
| | | let res = children.splice(index, 1); |
| | | var std = []; |
| | | for (var i in res) { |
| | | std.push(res[i].id); |
| | | } |
| | | // deleteDirTree(std); |
| | | this.getDirTree(); |
| | | children.splice(data.orderNum - 1, 1); |
| | | children.forEach((item, index) => { |
| | | item.orderNum = index + 1; |
| | | }); |
| | | |
| | | this.traverseArr(data); //获取删除的子ID |
| | | this.delChildIDs.push(data.id); //要删除的全部ID |
| | | let delIDs = this.delChildIDs; |
| | | Promise.all([ |
| | | deleteMenu({ ids: delIDs.toString() }), |
| | | updateMenuTrees(children), |
| | | ]) |
| | | .then((res) => { |
| | | console.log(res); |
| | | if (res[0].code == 200 && res[1].code == 200) { |
| | | this.$message({ |
| | | type: "success", |
| | | message: "删除成功!", |
| | | }); |
| | | this.itemdetail = {}; |
| | | } else if (res[0].code == 200) { |
| | | this.$message.error("删除成功,位置调整失败"); |
| | | } else if (res[1].code == 200) { |
| | | this.$message.error("删除失败,位置调整成功"); |
| | | } else { |
| | | this.$message.error("删除失败"); |
| | | } |
| | | }) |
| | | .catch(() => { |
| | | this.$message({ |
| | | type: "info", |
| | | message: "已取消删除", |
| | | type: "error", |
| | | message: "删除失败", |
| | | }); |
| | | }); |
| | | // this.dialogMessage="是否删除" |
| | | // this.dialogFlag = 1; |
| | | // this.dialogFrom ={ |
| | | // node:node, |
| | | // val:data |
| | | // } |
| | | // this.dialogVisible=true;//目录树更改弹窗 |
| | | // const parent = node.parent; |
| | | // const children = parent.data.children || parent.data; |
| | | // const index = children.findIndex((d) => d.id === data.id); |
| | | // let res = children.splice(index, 1); |
| | | // // console.log(res); |
| | | // // console.log(data); |
| | | // console.log(this.flaten(res)); |
| | | |
| | | //重置要删除的子ID |
| | | this.delChildIDs = []; |
| | | }) |
| | | .catch(() => { |
| | | this.$message("已取消删除"); |
| | | }); |
| | | }, |
| | | traverseArr(obj) { |
| | | if (obj.children) { |
| | | return obj.children.forEach((item) => { |
| | | // console.log(item.id + "---" + item.name); |
| | | // this.delChildID += "id=" + item.id + "&"; |
| | | this.delChildIDs.push(item.id); |
| | | this.traverseArr(item); |
| | | }); |
| | | } |
| | | return; |
| | | }, |
| | | flaten(arr) { |
| | | return arr.reduce((p, v, i) => { |
| | |
| | | this.old_dirDat = JSON.parse(JSON.stringify(this.menuList)); //将备份的dir重新赋值 |
| | | }, |
| | | handleDrop(draggingNode, dropNode, dropType, ev) { |
| | | this.$confirm("是否调整至该位置?", "提示", { |
| | | this.$confirm("此操作将保存目录更改, 是否继续?", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | |
| | | } |
| | | item.orderNum = i + 1; |
| | | }); |
| | | console.log(nodeData); |
| | | // console.log(nodeData); |
| | | //更新原始整体数据 |
| | | let arr = []; |
| | | this.oriData.forEach((e) => { |
| | |
| | | arr.push(e); |
| | | }); |
| | | this.newData = arr; |
| | | this.sendChange(); |
| | | }) |
| | | .catch(() => { |
| | | this.$message({ |
| | |
| | | }); |
| | | }, |
| | | sendChange() { |
| | | updateMenuTrees(this.newData).then((res) => { |
| | | this.newData.forEach((item) => { |
| | | if (item.pid == 0) { |
| | | item.type = 0; |
| | | } |
| | | }); |
| | | updateMenuTrees(this.newData) |
| | | .then((res) => { |
| | | if (res.code == 200) { |
| | | alert("更改完成。请及时刷新页面!"); |
| | | alert("调整完成。请及时刷新页面!"); |
| | | return; |
| | | } else { |
| | | alert("修改失败,请重试!"); |
| | | alert("调整失败,请重试!"); |
| | | } |
| | | }) |
| | | .catch(() => { |
| | | alert("修改失败,请重试!"); |
| | | }); |
| | | }, |
| | | handleNodeClick(data) { |
| | |
| | | this.backUpData = JSON.stringify(data); |
| | | this.itemdetail = JSON.parse(JSON.stringify(data)); |
| | | }, |
| | | updMenu() { |
| | | updateMenuTree(this.itemdetail).then((res) => { |
| | | // console.log(res); |
| | | updMenu(formName) { |
| | | this.$nextTick(() => { |
| | | this.$refs[formName].validate((valid) => { |
| | | if (valid) { |
| | | this.fullscreenLoading = true; |
| | | updateMenuTree(this.itemdetail) |
| | | .then((res) => { |
| | | setTimeout(() => { |
| | | this.fullscreenLoading = false; |
| | | if (res.code == 200) { |
| | | alert("修改完成,请及时刷新页面!"); |
| | | return; |
| | | } else { |
| | | this.itemdetail = {}; |
| | | this.dialogFormVisible = false; |
| | | this.$refs[formName].resetFields(); |
| | | } |
| | | }, 500); |
| | | }) |
| | | .catch((res) => { |
| | | alert("修改失败,请重试!"); |
| | | this.fullscreenLoading = false; |
| | | }); |
| | | } else { |
| | | return false; |
| | | } |
| | | }); |
| | | }); |
| | | }, |
| | | reset() { |
| | | reset(formName) { |
| | | this.$refs[formName].resetFields(); |
| | | if (this.backUpData != "") { |
| | | this.itemdetail = JSON.parse(this.backUpData); |
| | | } |
| | | }, |
| | | }, |
| | | mounted() { |
| | |
| | | background-color: rgb(153, 153, 153); |
| | | } |
| | | .btnBox { |
| | | margin-left: 5px; |
| | | margin: 0 10px 0 5px; |
| | | .el-button + .el-button { |
| | | margin-left: 5px; |
| | | } |
| | |
| | | >保存</el-button |
| | | > |
| | | <el-divider /> |
| | | <div class="menuTreeBox"> |
| | | <div class="depTreeBox"> |
| | | <el-tree |
| | | ref="tree" |
| | | :props="defaultProps" |
| | |
| | | <h4>详细信息</h4> |
| | | </div> |
| | | <div class="form_box"> |
| | | <el-form :model="itemdetail"> |
| | | <el-form :model="itemdetail" ref="itemdetail" :rules="rules"> |
| | | <el-form-item label="名称" :label-width="formLabelWidth"> |
| | | <el-input v-model="itemdetail.name" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | |
| | | <el-input v-model="itemdetail.bak" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <div class="btnBox"> |
| | | <el-button type="primary" @click="updDep">保存</el-button> |
| | | <el-button type="primary" @click="reset">取消</el-button> |
| | | <el-button type="primary" @click="updDep('itemdetail')" |
| | | >保存</el-button |
| | | > |
| | | <el-button type="primary" @click="reset('itemdetail')" |
| | | >取消</el-button |
| | | > |
| | | </div> |
| | | </el-form> |
| | | </div> |
| | | </div> |
| | | <el-dialog title="新增子目录" :visible.sync="dialogFormVisible"> |
| | | <el-form :model="ruleForm" ref="ruleForm" :rules="rules"> |
| | | <el-form-item |
| | | label="目录名称" |
| | | prop="name" |
| | | :label-width="formLabelWidth" |
| | | <el-dialog |
| | | width="30%" |
| | | top="5vh" |
| | | title="新增子目录" |
| | | :visible.sync="dialogFormVisible" |
| | | > |
| | | <el-form :model="ruleForm" ref="ruleForm" :rules="rules"> |
| | | <el-form-item prop="name" label="名称" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.name" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="目录说明" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.descr" autocomplete="off"></el-input> |
| | | <el-form-item label="简称" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.sname" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="目录备注" :label-width="formLabelWidth"> |
| | | <el-form-item label="编码" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.code" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="机构代码" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.uncode" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="地址" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.addr" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="联系方式" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.contact" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="传真" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.fax" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="电子邮件" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.email" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="邮政编码" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.post" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="网站地址" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.website" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="备注" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.bak" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | |
| | | updateDepTree, |
| | | updateDepTrees, |
| | | queryMaxId, |
| | | insertDep, |
| | | deleteDep, |
| | | } from "../../api/api"; |
| | | export default { |
| | | //import引入的组件需要注入到对象中才能使用 |
| | |
| | | }, |
| | | data() { |
| | | let validName = (rule, value, callback) => { |
| | | if (value === "") { |
| | | return callback(new Error("目录名称不能为空")); |
| | | if (value === "" || value === null || value === undefined) { |
| | | return callback(new Error("名称不能为空")); |
| | | } else { |
| | | callback(); |
| | | } |
| | |
| | | uncode: "", |
| | | website: "", |
| | | }, |
| | | backUpData: {}, |
| | | formLabelWidth: "170px", |
| | | deleteIDs: "", |
| | | backUpData: "", |
| | | formLabelWidth: "130px", |
| | | delChildID: "", |
| | | delChildIDs: [], |
| | | dialogFormVisible: false, |
| | | ruleForm: { |
| | | level: null, |
| | | orderNum: null, |
| | | pid: null, |
| | | name: "", |
| | | descr: "", |
| | | addr: "", |
| | | bak: "", |
| | | code: "", |
| | | contact: "", |
| | | email: "", |
| | | fax: "", |
| | | name: "", |
| | | post: "", |
| | | sname: "", |
| | | uncode: "", |
| | | website: "", |
| | | }, |
| | | rules: { |
| | | name: [{ validator: validName, trigger: "blur" }], |
| | | name: [{ required: true, validator: validName, trigger: "blur" }], |
| | | }, |
| | | }; |
| | | }, |
| | |
| | | this.newData = res.result; |
| | | this.depList = this.treeData(res.result); |
| | | } else { |
| | | console.log("接口报错"); |
| | | this.$notify.error({ |
| | | title: res.code, |
| | | message: "无法获取单位列表", |
| | | }); |
| | | } |
| | | }); |
| | | }, |
| | |
| | | // 循环所有项 |
| | | let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID,分别上下级菜单,并返回数据 |
| | | branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性,并赋值 |
| | | return father.pid == 1; // 返回一级菜单 |
| | | return father.pid == 0; // 返回一级菜单 |
| | | }); |
| | | }, |
| | | append(node, data) { |
| | |
| | | }, |
| | | resetForm(formName) { |
| | | this.dialogFormVisible = false; |
| | | this.$nextTick(() => { |
| | | this.ruleForm = {}; |
| | | this.$refs[formName].resetFields(); |
| | | }); |
| | | }, |
| | | submitForm(formName) { |
| | | this.$refs[formName].validate((valid) => { |
| | | if (valid) { |
| | | this.fullscreenLoading = true; |
| | | // console.log(this.ruleForm); |
| | | // insertDir(this.ruleForm) |
| | | // .then((res) => { |
| | | // setTimeout(() => { |
| | | // this.fullscreenLoading = false; |
| | | // if (res.code == 200) { |
| | | // this.$message({ |
| | | // message: "添加成功", |
| | | // type: "success", |
| | | // }); |
| | | // } |
| | | // }, 2000); |
| | | // }) |
| | | // .catch((res) => { |
| | | // console.log(res); |
| | | // this.fullscreenLoading = false; |
| | | // }); |
| | | |
| | | // this.validCode = ""; //清空验证码输入框的内容 |
| | | this.fullscreenLoading = true; |
| | | insertDep(this.ruleForm) |
| | | .then((res) => { |
| | | setTimeout(() => { |
| | | this.fullscreenLoading = false; |
| | | if (res.code == 200) { |
| | | this.$message({ |
| | | message: "添加成功", |
| | | type: "success", |
| | | }); |
| | | this.itemdetail = {}; |
| | | this.ruleForm = {}; |
| | | this.dialogFormVisible = false; |
| | | this.$refs[formName].resetFields(); |
| | | } |
| | | }, 500); |
| | | }) |
| | | .catch((res) => { |
| | | this.itemdetail = {}; |
| | | this.$message.error("添加失败"); |
| | | this.fullscreenLoading = false; |
| | | console.log(res); |
| | | }); |
| | | } else { |
| | | // alert("目录名称不能为空"); |
| | | return false; |
| | |
| | | type: "warning", |
| | | }) |
| | | .then(() => { |
| | | // console.log(node); |
| | | // console.log(data); |
| | | |
| | | //兄弟重新排序 |
| | | const parent = node.parent; |
| | | const children = parent.data.children || parent.data; |
| | | children.splice(data.orderNum - 1, 1); |
| | |
| | | item.orderNum = index + 1; |
| | | }); |
| | | |
| | | this.traverseArr(data); |
| | | console.log(this.deleteIDs); |
| | | this.traverseArr(data); //获取删除的子ID |
| | | this.delChildIDs.push(data.id); //要删除的全部ID |
| | | let delIDs = this.delChildIDs; |
| | | Promise.all([ |
| | | deleteDep({ ids: delIDs.toString() }), |
| | | updateDepTrees(children), |
| | | ]) |
| | | .then((res) => { |
| | | console.log(res); |
| | | if (res[0].code == 200 && res[1].code == 200) { |
| | | this.$message({ |
| | | type: "success", |
| | | message: "删除成功!", |
| | | }); |
| | | this.itemdetail = {}; |
| | | } else if (res[0].code == 200) { |
| | | this.$message.error("删除成功,位置调整失败"); |
| | | } else if (res[1].code == 200) { |
| | | this.$message.error("删除失败,位置调整成功"); |
| | | } else { |
| | | this.$message.error("删除失败"); |
| | | } |
| | | }) |
| | | .catch(() => { |
| | | this.$message({ |
| | | type: "info", |
| | | message: "已取消删除", |
| | | this.$message.error("删除失败"); |
| | | this.itemdetail = {}; |
| | | }); |
| | | |
| | | //重置要删除的子ID |
| | | this.delChildIDs = []; |
| | | }) |
| | | .catch(() => { |
| | | this.$message("已取消删除"); |
| | | }); |
| | | // this.dialogMessage="是否删除" |
| | | // this.dialogFlag = 1; |
| | |
| | | if (obj.children) { |
| | | return obj.children.forEach((item) => { |
| | | // console.log(item.id + "---" + item.name); |
| | | this.deleteIDs += "id=" + item.id + "&"; |
| | | // this.delChildID += "id=" + item.id + "&"; |
| | | this.delChildIDs.push(item.id); |
| | | this.traverseArr(item); |
| | | }); |
| | | } |
| | |
| | | arr.push(e); |
| | | }); |
| | | this.newData = arr; |
| | | this.sendChange(); |
| | | }) |
| | | .catch(() => { |
| | | this.$message({ |
| | |
| | | sendChange() { |
| | | updateDepTrees(this.newData) |
| | | .then((res) => { |
| | | // console.log(res); |
| | | if (res.code == 200) { |
| | | this.$message({ |
| | | type: "success", |
| | | message: "更新成功!", |
| | | }); |
| | | alert("调整完成。请及时刷新页面!"); |
| | | return; |
| | | } else { |
| | | alert("调整失败,请重试!"); |
| | | } |
| | | }) |
| | | .catch(() => { |
| | |
| | | this.backUpData = JSON.stringify(data); |
| | | this.itemdetail = JSON.parse(JSON.stringify(data)); |
| | | }, |
| | | updDep() { |
| | | updateDepTree(this.itemdetail).then((res) => { |
| | | console.log(res); |
| | | updDep(formName) { |
| | | this.$nextTick(() => { |
| | | this.$refs[formName].validate((valid) => { |
| | | if (valid) { |
| | | this.fullscreenLoading = true; |
| | | updateDepTree(this.itemdetail) |
| | | .then((res) => { |
| | | setTimeout(() => { |
| | | this.fullscreenLoading = false; |
| | | if (res.code == 200) { |
| | | alert("修改完成,请及时刷新页面!"); |
| | | this.itemdetail = {}; |
| | | this.dialogFormVisible = false; |
| | | } |
| | | }, 500); |
| | | }) |
| | | .catch((res) => { |
| | | alert("修改失败,请重试!"); |
| | | this.fullscreenLoading = false; |
| | | }); |
| | | } else { |
| | | return false; |
| | | } |
| | | }); |
| | | }); |
| | | }, |
| | | reset() { |
| | | this.$refs[formName].resetFields(); |
| | | if (this.backUpData != "") { |
| | | this.itemdetail = JSON.parse(this.backUpData); |
| | | } |
| | | }, |
| | | }, |
| | | mounted() { |
| | |
| | | left: 250px; |
| | | top: 23px; |
| | | } |
| | | .menuTreeBox { |
| | | .depTreeBox { |
| | | height: 88%; |
| | | width: 100%; |
| | | overflow: auto; |
| | |
| | | background-color: rgb(153, 153, 153); |
| | | } |
| | | .btnBox { |
| | | margin-left: 5px; |
| | | margin: 0 10px 0 5px; |
| | | .el-button + .el-button { |
| | | margin-left: 5px; |
| | | } |
| | |
| | | } |
| | | } |
| | | } |
| | | /deep/ .el-dialog__body { |
| | | padding: 0 30px 0 0; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | <template> |
| | | <div class="logLog_box"> |
| | | <div class="userInfo_box"> |
| | | <My-bread |
| | | :list="[ |
| | | `${$t('userManage.userManage')}`, |
| | |
| | | :placeholder="$t('operatManage.ELM.usernameInfo')" |
| | | /> |
| | | </el-form-item> |
| | | <!-- <el-form-item |
| | | :label="$t('userManage.userInfoObj.userStatus')" |
| | | prop="userStatus" |
| | | > |
| | | <el-select |
| | | v-model="form.userStatus" |
| | | :placeholder="$t('userManage.userInfoObj.userStatus')" |
| | | > |
| | | <el-option :label="$t('userManage.userInfoObj.all')" value="all" /> |
| | | <el-option |
| | | :label="$t('userManage.userInfoObj.normal')" |
| | | value="normal" |
| | | /> |
| | | <el-option |
| | | :label="$t('userManage.userInfoObj.disable')" |
| | | value="disable" |
| | | /> |
| | | <el-option |
| | | :label="$t('userManage.userInfoObj.delete')" |
| | | value="delete" |
| | | /> |
| | | <el-option |
| | | :label="$t('userManage.userInfoObj.apply')" |
| | | value="apply" |
| | | /> |
| | | <el-option |
| | | :label="$t('userManage.userInfoObj.rejection')" |
| | | value="rejection" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> --> |
| | | <el-form-item |
| | | :label="$t('userManage.userInfoObj.depName')" |
| | | prop="depName" |
| | |
| | | <el-input |
| | | v-model="form.depName" |
| | | :placeholder="$t('common.pleaseInput')" |
| | | /> |
| | | /> </el-form-item |
| | | ><el-form-item> |
| | | <el-button @click="onSubmit" |
| | | ><i class="el-icon-search"></i> {{ |
| | | $t("operatManage.ELM.search") |
| | | }}</el-button |
| | | > |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button @click="resetForm('ruleForm')" |
| | | ><i class="el-icon-delete"></i> {{ |
| | | $t("operatManage.ELM.reset") |
| | | }}</el-button |
| | | > |
| | | </el-form-item> |
| | | <br /> |
| | | <el-form-item> |
| | |
| | | }}</el-button |
| | | > |
| | | </el-form-item> |
| | | <el-form-item style="margin-left: 60%"> |
| | | <el-button @click="onSubmit" size="mini" |
| | | ><i class="el-icon-search"></i> {{ |
| | | $t("operatManage.ELM.search") |
| | | }}</el-button |
| | | > |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button @click="resetForm('ruleForm')" size="mini" |
| | | <el-button type="danger" size="small" @click="showAddDialog" |
| | | ><i class="el-icon-delete"></i> {{ |
| | | $t("operatManage.ELM.reset") |
| | | $t("common.delete") |
| | | }}</el-button |
| | | > |
| | | </el-form-item> |
| | |
| | | stripe |
| | | border |
| | | style="width: 100%" |
| | | max-height="99%" |
| | | height="99%" |
| | | > |
| | | <el-table-column |
| | | align="center" |
| | | type="index" |
| | | :label="$t('common.index')" |
| | | width="70px" |
| | | fixed |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="uname" |
| | | width="150px" |
| | | :label="$t('userManage.userInfoObj.uname')" |
| | | fixed |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="pwd" |
| | | :label="$t('userManage.userInfoObj.pwd')" |
| | | /> |
| | | |
| | | <el-table-column |
| | | align="center" |
| | | prop="sex" |
| | | width="80px" |
| | | :label="$t('userManage.userInfoObj.sex')" |
| | | > |
| | | <template slot-scope="scope"> |
| | |
| | | <el-table-column |
| | | align="center" |
| | | prop="natives" |
| | | width="100px" |
| | | :label="$t('userManage.userInfoObj.natives')" |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="depName" |
| | | width="200px" |
| | | :label="$t('userManage.userInfoObj.depName')" |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="idcard" |
| | | width="200px" |
| | | :label="$t('userManage.userInfoObj.idcard')" |
| | | /><el-table-column |
| | | align="center" |
| | | prop="job" |
| | | width="200px" |
| | | :label="$t('userManage.userInfoObj.job')" |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="edu" |
| | | width="200px" |
| | | :label="$t('userManage.userInfoObj.edu')" |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="addr" |
| | | width="200px" |
| | | :label="$t('userManage.userInfoObj.addr')" |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="email" |
| | | width="200px" |
| | | :label="$t('userManage.userInfoObj.email')" |
| | | /> |
| | | <el-table-column |
| | | align="center" |
| | | prop="contact" |
| | | width="200px" |
| | | :label="$t('userManage.userInfoObj.contact')" |
| | | /> |
| | | |
| | |
| | | <el-table-column |
| | | align="center" |
| | | prop="bak" |
| | | width="200px" |
| | | :label="$t('userManage.userInfoObj.bak')" |
| | | /> |
| | | <el-table-column :label="$t('common.operate')" fixed="right"> |
| | | <template #default> |
| | | <el-table-column |
| | | :label="$t('common.operate')" |
| | | width="200px" |
| | | fixed="right" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <!-- <el-button type="primary" size="small">修改</el-button> --> |
| | | |
| | | <el-button type="warning" size="mini">{{ |
| | | $t("common.edit") |
| | | }}</el-button> |
| | | <el-button type="danger" size="mini">{{ |
| | | $t("common.delete") |
| | | }}</el-button> |
| | | <el-button |
| | | type="warning" |
| | | @click="editInfo(scope.row)" |
| | | size="mini" |
| | | >{{ $t("common.edit") }}</el-button |
| | | > |
| | | <el-button type="danger" @click="editPwd(scope.row)" size="mini"> |
| | | 重置密码 |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <div style="margin-top: 40px" class="pagination_box"> |
| | | <div style="margin-top: 25px" class="pagination_box"> |
| | | <el-pagination |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | |
| | | :page-sizes="[10, 20, 30, 40]" |
| | | :page-size="10" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="1" |
| | | :total="count" |
| | | > |
| | | </el-pagination> |
| | | </div> |
| | | </div> |
| | | <el-dialog |
| | | width="500px" |
| | | top="7vh" |
| | | title="修改信息" |
| | | :visible.sync="dialogFormVisible" |
| | | :before-close="handleClose" |
| | | > |
| | | <el-form :model="ruleForm" ref="ruleForm" :rules="rules"> |
| | | <el-form-item prop="name" label="用户名" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.uname" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="性别" :label-width="formLabelWidth"> |
| | | <!-- <el-input v-model="ruleForm.sex" autocomplete="off"></el-input> --> |
| | | <el-select v-model="ruleForm.sex" clearable placeholder="请选择"> |
| | | <el-option |
| | | v-for="item in sexOpt" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="籍贯" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.natives" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="单位名称" :label-width="formLabelWidth"> |
| | | <el-input |
| | | v-model="ruleForm.depName" |
| | | disabled |
| | | autocomplete="off" |
| | | ></el-input> |
| | | |
| | | <el-button type="primary" size="mini" @click="showDep" |
| | | >选择</el-button |
| | | > |
| | | <el-card v-if="showDepTree" shadow="hover" class="box-card"> |
| | | <div slot="header" class="clearfix"> |
| | | <span>请选择部门</span> |
| | | <el-button |
| | | style="float: right; padding: 3px 0" |
| | | type="text" |
| | | @click="sendNode" |
| | | >确定</el-button |
| | | > |
| | | </div> |
| | | <div class="depTreeBox"> |
| | | <el-tree |
| | | ref="tree" |
| | | :props="defaultProps" |
| | | node-key="id" |
| | | :data="depList" |
| | | :expand-on-click-node="false" |
| | | :default-expand-all="true" |
| | | @node-click="handleNodeClick" |
| | | > |
| | | <span class="custom-tree-node" slot-scope="{ node, data }"> |
| | | <span>{{ node.label }}</span> |
| | | </span> |
| | | </el-tree> |
| | | </div> |
| | | </el-card> |
| | | </el-form-item> |
| | | <el-form-item label="证件号" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.idcard" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="工作" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.job" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="教育" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.edu" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="地址" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.addr" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="电子邮件" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.email" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="联系方式" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.contact" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="状态" :label-width="formLabelWidth"> |
| | | <el-select v-model="ruleForm.status" clearable placeholder="请选择"> |
| | | <el-option |
| | | v-for="item in statusOpt" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="备注" :label-width="formLabelWidth"> |
| | | <el-input v-model="ruleForm.bak" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button size="medium" @click="cancelEdit('ruleForm')" |
| | | >取消</el-button |
| | | > |
| | | <el-button |
| | | size="medium" |
| | | type="primary" |
| | | @click="sendEdit('ruleForm')" |
| | | v-loading.fullscreen.lock="fullscreenLoading" |
| | | >提交</el-button |
| | | > |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import MyBread from "../../components/MyBread.vue"; |
| | | import { queryPageUser } from "../../api/api"; |
| | | import { |
| | | queryDepTree, |
| | | queryPageUser, |
| | | insertUser, |
| | | deleteUser, |
| | | updateUser, |
| | | updateUserPwd, |
| | | } from "../../api/api"; |
| | | export default { |
| | | //import引入的组件需要注入到对象中才能使用 |
| | | components: { |
| | |
| | | }, |
| | | data() { |
| | | let validName = (rule, value, callback) => { |
| | | if (value === "") { |
| | | return callback(new Error("目录名称不能为空")); |
| | | if (value === "" || value === null || value === undefined) { |
| | | return callback(new Error("名称不能为空")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | return { |
| | | currentPage: 1, |
| | | defaultProps: { |
| | | children: "children", |
| | | label: "name", |
| | | }, |
| | | form: { |
| | | username: "", |
| | | userStatus: "all", |
| | | requestIp: "", |
| | | // userStatus: "all", |
| | | depName: "", |
| | | }, |
| | | showDepTree: true, |
| | | tableData: [], |
| | | fullscreenLoading: false, |
| | | itemdetail: {}, |
| | | formLabelWidth: "170px", |
| | | newDep: { |
| | | name: "", |
| | | id: null, |
| | | }, |
| | | count: 0, |
| | | formLabelWidth: "100px", |
| | | dialogFormVisible: false, |
| | | ruleForm: { |
| | | level: null, |
| | | orderNum: null, |
| | | pid: null, |
| | | name: "", |
| | | descr: "", |
| | | uname: "", |
| | | pwd: "", |
| | | sex: "", |
| | | natives: "", |
| | | depName: "", |
| | | idcard: "", |
| | | job: "", |
| | | edu: "", |
| | | addr: "", |
| | | email: "", |
| | | contact: "", |
| | | status: "", |
| | | bak: "", |
| | | depid: null, |
| | | }, |
| | | statusOpt: [ |
| | | { |
| | | value: 0, |
| | | label: "正常", |
| | | }, |
| | | { |
| | | value: 1, |
| | | label: "禁用", |
| | | }, |
| | | { |
| | | value: 2, |
| | | label: "删除", |
| | | }, |
| | | { |
| | | value: 3, |
| | | label: "申请", |
| | | }, |
| | | { |
| | | value: 4, |
| | | label: "拒批", |
| | | }, |
| | | ], |
| | | depList: [], |
| | | sexOpt: [ |
| | | { |
| | | value: 0, |
| | | label: "女", |
| | | }, |
| | | { |
| | | value: 1, |
| | | label: "男", |
| | | }, |
| | | { |
| | | value: -1, |
| | | label: "未知", |
| | | }, |
| | | ], |
| | | rules: { |
| | | name: [{ validator: validName, trigger: "blur" }], |
| | | }, |
| | |
| | | // queryMaxId().then((res) => { |
| | | // this.id = res.data; |
| | | // }); |
| | | queryDepTree().then((res) => { |
| | | if (res.code == 200) { |
| | | this.depList = this.treeData(res.result); |
| | | } else { |
| | | this.$notify.error({ |
| | | title: res.code, |
| | | message: "无法获取单位列表", |
| | | }); |
| | | } |
| | | }); |
| | | queryPageUser({ |
| | | pageIndex: 1, |
| | | pageSize: 10, |
| | | }).then((res) => { |
| | | if (res.code == 200) { |
| | | this.tableData = res.result; |
| | | this.count = res.count; |
| | | } else { |
| | | console.log("接口报错"); |
| | | } |
| | | }); |
| | | }, |
| | | // getUserInfo() { |
| | | // //获取目录树最大ID,新建节点使用 |
| | | // // queryMaxId().then((res) => { |
| | | // // this.id = res.data; |
| | | // // }); |
| | | // queryDepTree().then((res) => { |
| | | // if (res.status == 200) { |
| | | // this.depList = this.treeData(res.data.result); |
| | | // this.oriData = res.data.result; |
| | | // this.newData = res.data.result; |
| | | // } else { |
| | | // console.log("接口报错"); |
| | | // } |
| | | // }); |
| | | // }, |
| | | |
| | | treeData(source) { |
| | | let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆 |
| | | return cloneData.filter((father) => { |
| | | // 循环所有项 |
| | | let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID,分别上下级菜单,并返回数据 |
| | | branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性,并赋值 |
| | | return father.pid == 0; // 返回一级菜单 |
| | | }); |
| | | }, |
| | | showDep() { |
| | | this.showDepTree = true; |
| | | }, |
| | | handleNodeClick(data) { |
| | | this.newDep.name = data.name; |
| | | this.newDep.id = data.id; |
| | | }, |
| | | handleSizeChange(val) { |
| | | console.log(`每页 ${val} 条`); |
| | | }, |
| | |
| | | }, |
| | | resetForm(formName) { |
| | | this.$refs[formName].resetFields(); |
| | | }, |
| | | editInfo(row) { |
| | | delete row.updateTime; |
| | | delete row.updateUser; |
| | | this.ruleForm = row; |
| | | this.dialogFormVisible = true; |
| | | }, |
| | | editPwd(row) { |
| | | console.log(row.id + "---" + row.pwd); |
| | | }, |
| | | sendNode() { |
| | | this.showDepTree = false; |
| | | this.ruleForm.depName = this.newDep.name; |
| | | this.ruleForm.depid = this.newDep.id; |
| | | }, |
| | | handleClose(done) { |
| | | this.$confirm("确认关闭?") |
| | | .then((_) => { |
| | | done(); |
| | | }) |
| | | .catch((_) => {}); |
| | | }, |
| | | sendEdit(){ |
| | | |
| | | }, |
| | | showAddDialog() { |
| | | this.dialogTableVisible = true; |
| | |
| | | </style> |
| | | <style lang="less" scoped> |
| | | //@import url(); 引入公共css类 |
| | | .logLog_box { |
| | | .userInfo_box { |
| | | background: rgb(240, 242, 245); |
| | | border-radius: 10px; |
| | | height: 100%; |
| | |
| | | } |
| | | } |
| | | .table_box { |
| | | height: 65%; |
| | | height: 70%; |
| | | padding: 10px; |
| | | background: #fff; |
| | | border-radius: 5px; |
| | | border: 1px solid rgb(202, 201, 204); |
| | | } |
| | | .text-center { |
| | | text-align: center; |
| | | .el-dialog { |
| | | .el-form-item { |
| | | margin-bottom: 12px; |
| | | width: 100%; |
| | | } |
| | | .select { |
| | | width: 300px; |
| | | .box-card { |
| | | position: absolute; |
| | | z-index: 100; |
| | | top: -243px; |
| | | left: 450px; |
| | | height: 800px; |
| | | width: 350px; |
| | | /deep/ .el-card__body { |
| | | height: 85%; |
| | | overflow: auto; |
| | | } |
| | | |
| | | // background-color: #bfa; |
| | | } |
| | | .depTreeBox { |
| | | overflow: hidden; |
| | | |
| | | .el-tree { |
| | | background: transparent; |
| | | font-size: 15px; |
| | | font-family: Microsoft YaHei; |
| | | font-weight: 400; |
| | | color: #000000; |
| | | /deep/ .el-tree-node { |
| | | padding-top: 10px; |
| | | // padding-bottom: 10px; |
| | | } |
| | | /deep/ .el-tree-node:focus > .el-tree-node__content { |
| | | background-color: #b9b9b9; |
| | | } |
| | | /deep/ .el-tree-node__content:hover { |
| | | background-color: rgb(153, 153, 153); |
| | | } |
| | | .btnBox { |
| | | margin: 0 10px 0 5px; |
| | | .el-button + .el-button { |
| | | margin-left: 5px; |
| | | } |
| | | } |
| | | /deep/ .el-card__header { |
| | | padding: 10px 10px !important; |
| | | } |
| | | /deep/ .el-dialog { |
| | | margin-top: 2vh !important; |
| | | } |
| | | /deep/ .el-dialog__wrapper { |
| | | overflow: hidden !important; |
| | | } |
| | | /deep/ .el-dialog__body { |
| | | padding: 30px 0 0 0; |
| | | } |
| | | } |
| | | |
| | | // /deep/ .el-card__header { |
| | | // padding: 10px 10px !important; |
| | | // } |
| | | // /deep/ .el-dialog { |
| | | // margin-top: 2vh !important; |
| | | // } |
| | | // /deep/ .el-dialog__wrapper { |
| | | // overflow: hidden !important; |
| | | // } |
| | | </style> |