|
|
@@ -1,182 +1,206 @@
|
|
|
-<template>
|
|
|
- <a-modal
|
|
|
- :width="modalWidth"
|
|
|
- :visible="visible"
|
|
|
- title="部门搜索"
|
|
|
- :confirmLoading="confirmLoading"
|
|
|
- @ok="handleSubmit"
|
|
|
- @cancel="handleCancel"
|
|
|
- cancelText="关闭"
|
|
|
- wrapClassName="ant-modal-cust-warp"
|
|
|
- >
|
|
|
- <!--部门树-->
|
|
|
- <template>
|
|
|
- <a-form :form="form">
|
|
|
- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级部门">
|
|
|
- <a-tree
|
|
|
- :multiple="multipe"
|
|
|
- treeCheckable="tree"
|
|
|
- checkable
|
|
|
- :checkedKeys="checkedKeys"
|
|
|
- allowClear="true"
|
|
|
- :checkStrictly="true"
|
|
|
- @check="onCheck"
|
|
|
- :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
|
|
|
- :treeData="departTree"
|
|
|
- placeholder="请选择上级部门"
|
|
|
- >
|
|
|
- </a-tree>
|
|
|
- </a-form-item>
|
|
|
- </a-form>
|
|
|
- </template>
|
|
|
- </a-modal>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import pick from 'lodash.pick'
|
|
|
- import { getAction } from '@/api/manage'
|
|
|
- import { queryIdTree } from '@/api/api'
|
|
|
- import userModal from './UserModal'
|
|
|
- export default {
|
|
|
- name: "DepartWindow",
|
|
|
- components: {
|
|
|
- userModal,
|
|
|
- },
|
|
|
- data () {
|
|
|
- return {
|
|
|
- multipe: false,
|
|
|
- checkedKeys:[], // 存储选中的部门id
|
|
|
- userId:"", // 存储用户id
|
|
|
- model:{}, // 存储SysUserDepartsVO表
|
|
|
- userDepartModel:{userId:'',departIdList:[]}, // 存储用户id一对多部门信息的对象
|
|
|
- departList:[], // 存储部门信息
|
|
|
- modalWidth:400,
|
|
|
- departTree:[],
|
|
|
- title:"操作",
|
|
|
- visible: false,
|
|
|
- labelCol: {
|
|
|
- xs: { span: 24 },
|
|
|
- sm: { span: 5 },
|
|
|
- },
|
|
|
- wrapperCol: {
|
|
|
- xs: { span: 24 },
|
|
|
- sm: { span: 16 },
|
|
|
- },
|
|
|
- confirmLoading: false,
|
|
|
- headers:{},
|
|
|
- form:this.$form.createForm(this),
|
|
|
- url: {
|
|
|
- userId:"/sys/user/generateUserId", // 引入生成添加用户情况下的url
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- add (checkedDepartKeys,userId) {
|
|
|
- this.checkedKeys = checkedDepartKeys;
|
|
|
- this.userId = userId;
|
|
|
- this.edit({});
|
|
|
- },
|
|
|
- edit (record) {
|
|
|
- this.departList = [];
|
|
|
- this.queryDepartTree();
|
|
|
- this.form.resetFields();
|
|
|
- this.visible = true;
|
|
|
- this.model = Object.assign({}, record);
|
|
|
- let filedsVal = pick(this.model,'id','userId','departIdList');
|
|
|
- this.$nextTick(() => {
|
|
|
- this.form.setFieldsValue(filedsVal);
|
|
|
- });
|
|
|
- },
|
|
|
- close () {
|
|
|
- this.$emit('close');
|
|
|
- this.visible = false;
|
|
|
- this.departList = [];
|
|
|
- this.checkedKeys = [];
|
|
|
- },
|
|
|
- handleSubmit () {
|
|
|
- const that = this;
|
|
|
- // 触发表单验证
|
|
|
- this.form.validateFields((err) => {
|
|
|
- if (!err) {
|
|
|
- that.confirmLoading = true;
|
|
|
- if(this.userId == null){
|
|
|
- getAction(this.url.userId).then((res)=>{
|
|
|
- if(res.success){
|
|
|
- let formData = {userId:res.result,
|
|
|
- departIdList:this.departList}
|
|
|
- console.log(formData)
|
|
|
- that.$emit('ok', formData);
|
|
|
- }
|
|
|
- }).finally(() => {
|
|
|
- that.departList = [];
|
|
|
- that.confirmLoading = false;
|
|
|
- that.close();
|
|
|
- })
|
|
|
- }else {
|
|
|
- let formData = {userId:this.userId,
|
|
|
- departIdList:this.departList}
|
|
|
- console.log(formData)
|
|
|
- that.departList = [];
|
|
|
- that.$emit('ok', formData);
|
|
|
- that.confirmLoading = false;
|
|
|
- that.close();
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- handleCancel () {
|
|
|
- this.close()
|
|
|
- },
|
|
|
-
|
|
|
- // 选择部门时作用的API
|
|
|
- onCheck(checkedKeys, info){
|
|
|
- this.departList = [];
|
|
|
- if(!this.multipe) {//单选
|
|
|
- let arr = checkedKeys.checked.filter(item=>{
|
|
|
- return this.checkedKeys.indexOf(item)<0
|
|
|
- })
|
|
|
- this.checkedKeys = [...arr]
|
|
|
- let checkedNodes = info.checkedNodes
|
|
|
- for (let i = 0; i < checkedNodes.length; i++) {
|
|
|
- let de = checkedNodes[i].data.props;
|
|
|
- let depart = {key:"",value:"",title:""};
|
|
|
- depart.key = de.value;
|
|
|
- depart.value = de.value;
|
|
|
- depart.title = de.title;
|
|
|
- this.departList[0] = depart;
|
|
|
- }
|
|
|
- }else{//多选
|
|
|
- this.checkedKeys = checkedKeys.checked;
|
|
|
- let checkedNodes = info.checkedNodes;
|
|
|
- for (let i = 0; i < checkedNodes.length; i++) {
|
|
|
- let de = checkedNodes[i].data.props;
|
|
|
- let depart = {key:"",value:"",title:""};
|
|
|
- depart.key = de.value;
|
|
|
- depart.value = de.value;
|
|
|
- depart.title = de.title;
|
|
|
- this.departList.push(depart);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- console.log('onCheck', checkedKeys, info);
|
|
|
- },
|
|
|
- queryDepartTree(){
|
|
|
- queryIdTree().then((res)=>{
|
|
|
- if(res.success){
|
|
|
- this.departTree = res.result;
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- modalFormOk(){
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
- .ant-table-tbody .ant-table-row td{
|
|
|
- padding-top:10px;
|
|
|
- padding-bottom:10px;
|
|
|
- }
|
|
|
+<template>
|
|
|
+ <a-modal
|
|
|
+ :width="modalWidth"
|
|
|
+ :visible="visible"
|
|
|
+ :bodyStyle ="bodyStyle"
|
|
|
+ title="部门搜索"
|
|
|
+ :confirmLoading="confirmLoading"
|
|
|
+ @ok="handleSubmit"
|
|
|
+ @cancel="handleCancel"
|
|
|
+ cancelText="关闭"
|
|
|
+ wrapClassName="ant-modal-cust-warp"
|
|
|
+ >
|
|
|
+ <!--部门树-->
|
|
|
+ <template>
|
|
|
+ <a-form :form="form">
|
|
|
+ <a-input-search style="margin-bottom: 8px" placeholder="请输入部门名称" @search="onSearch" />
|
|
|
+ <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级部门">
|
|
|
+ <a-tree
|
|
|
+ :multiple="multipe"
|
|
|
+ treeCheckable="tree"
|
|
|
+ checkable
|
|
|
+ :checkedKeys="checkedKeys"
|
|
|
+ allowClear="true"
|
|
|
+ :checkStrictly="true"
|
|
|
+ @check="onCheck"
|
|
|
+ :treeData="departTree"
|
|
|
+ placeholder="请选择上级部门"
|
|
|
+ >
|
|
|
+ </a-tree>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </template>
|
|
|
+ </a-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import pick from 'lodash.pick'
|
|
|
+ import { getAction } from '@/api/manage'
|
|
|
+ import { queryIdTree,searchByKeywords } from '@/api/api'
|
|
|
+ import userModal from './UserModal'
|
|
|
+ export default {
|
|
|
+ name: "DepartWindow",
|
|
|
+ components: {
|
|
|
+ userModal,
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ multipe: false,
|
|
|
+ checkedKeys:[], // 存储选中的部门id
|
|
|
+ userId:"", // 存储用户id
|
|
|
+ model:{}, // 存储SysUserDepartsVO表
|
|
|
+ userDepartModel:{userId:'',departIdList:[]}, // 存储用户id一对多部门信息的对象
|
|
|
+ departList:[], // 存储部门信息
|
|
|
+ modalWidth:400,
|
|
|
+ bodyStyle:{
|
|
|
+ maxHeight:"400px",
|
|
|
+ "overflow-y":"auto",
|
|
|
+ },
|
|
|
+ departTree:[],
|
|
|
+ title:"操作",
|
|
|
+ visible: false,
|
|
|
+ labelCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 5 },
|
|
|
+ },
|
|
|
+ wrapperCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 16 },
|
|
|
+ },
|
|
|
+ confirmLoading: false,
|
|
|
+ headers:{},
|
|
|
+ form:this.$form.createForm(this),
|
|
|
+ url: {
|
|
|
+ userId:"/sys/user/generateUserId", // 引入生成添加用户情况下的url
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ add (checkedDepartKeys,userId) {
|
|
|
+ this.checkedKeys = checkedDepartKeys;
|
|
|
+ this.userId = userId;
|
|
|
+ this.edit({});
|
|
|
+ },
|
|
|
+ edit (record) {
|
|
|
+ this.departList = [];
|
|
|
+ this.queryDepartTree();
|
|
|
+ this.form.resetFields();
|
|
|
+ this.visible = true;
|
|
|
+ this.model = Object.assign({}, record);
|
|
|
+ let filedsVal = pick(this.model,'id','userId','departIdList');
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.form.setFieldsValue(filedsVal);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ close () {
|
|
|
+ this.$emit('close');
|
|
|
+ this.visible = false;
|
|
|
+ this.departList = [];
|
|
|
+ this.checkedKeys = [];
|
|
|
+ },
|
|
|
+ handleSubmit () {
|
|
|
+ const that = this;
|
|
|
+ // 触发表单验证
|
|
|
+ this.form.validateFields((err) => {
|
|
|
+ if (!err) {
|
|
|
+ that.confirmLoading = true;
|
|
|
+ if(this.userId == null){
|
|
|
+ getAction(this.url.userId).then((res)=>{
|
|
|
+ if(res.success){
|
|
|
+ let formData = {userId:res.result,
|
|
|
+ departIdList:this.departList}
|
|
|
+ console.log(formData)
|
|
|
+ that.$emit('ok', formData);
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ that.departList = [];
|
|
|
+ that.confirmLoading = false;
|
|
|
+ that.close();
|
|
|
+ })
|
|
|
+ }else {
|
|
|
+ let formData = {userId:this.userId,
|
|
|
+ departIdList:this.departList}
|
|
|
+ console.log(formData)
|
|
|
+ that.departList = [];
|
|
|
+ that.$emit('ok', formData);
|
|
|
+ that.confirmLoading = false;
|
|
|
+ that.close();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleCancel () {
|
|
|
+ this.close()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选择部门时作用的API
|
|
|
+ onCheck(checkedKeys, info){
|
|
|
+ this.departList = [];
|
|
|
+ if(!this.multipe) {//单选
|
|
|
+ let arr = checkedKeys.checked.filter(item=>{
|
|
|
+ return this.checkedKeys.indexOf(item)<0
|
|
|
+ })
|
|
|
+ this.checkedKeys = [...arr]
|
|
|
+ let checkedNodes = info.checkedNodes
|
|
|
+ for (let i = 0; i < checkedNodes.length; i++) {
|
|
|
+ let de = checkedNodes[i].data.props;
|
|
|
+ let depart = {key:"",value:"",title:""};
|
|
|
+ depart.key = de.value;
|
|
|
+ depart.value = de.value;
|
|
|
+ depart.title = de.title;
|
|
|
+ this.departList[0] = depart;
|
|
|
+ }
|
|
|
+ }else{//多选
|
|
|
+ this.checkedKeys = checkedKeys.checked;
|
|
|
+ let checkedNodes = info.checkedNodes;
|
|
|
+ for (let i = 0; i < checkedNodes.length; i++) {
|
|
|
+ let de = checkedNodes[i].data.props;
|
|
|
+ let depart = {key:"",value:"",title:""};
|
|
|
+ depart.key = de.value;
|
|
|
+ depart.value = de.value;
|
|
|
+ depart.title = de.title;
|
|
|
+ this.departList.push(depart);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log('onCheck', checkedKeys, info);
|
|
|
+ },
|
|
|
+ queryDepartTree(){
|
|
|
+ queryIdTree().then((res)=>{
|
|
|
+ if(res.success){
|
|
|
+ this.departTree = res.result;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ modalFormOk(){
|
|
|
+
|
|
|
+ },
|
|
|
+ onSearch(value) {
|
|
|
+ let that = this
|
|
|
+ if (value) {
|
|
|
+ searchByKeywords({keyWord: value}).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ that.departTree = []
|
|
|
+ for (let i = 0; i < res.result.length; i++) {
|
|
|
+ let temp = res.result[i]
|
|
|
+ that.departTree.push(temp)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ that.$message.warning(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ that.queryDepartTree()
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .ant-table-tbody .ant-table-row td{
|
|
|
+ padding-top:10px;
|
|
|
+ padding-bottom:10px;
|
|
|
+ }
|
|
|
</style>
|
LiFei