朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 20fda315862747ae8ef02ddcc19d9df6b6368b4e 1 个父辈 e8c8469f

入库业务录入部分完善

内嵌 并排对比
正在显示 5 个修改的文件 包含 989 行增加 和 31 行删除
  1 +import http from './http'
  2 +
  3 +let base = '/cloud-user-center/crm';
  4 +// let baseUrl = '/cloud-kako-user-center/role'
  5 +
  6 +
  7 +export const getList = (params,pageNum,pageSize) => { return http.post(`${base}/list?pageNum=${pageNum}&pageSize=${pageSize}`,params); };
  8 +
@@ -5,6 +5,7 @@ import HomeNew from './views/HomeNew.vue' @@ -5,6 +5,7 @@ import HomeNew from './views/HomeNew.vue'
5 import Main from './views/dashboard/index' 5 import Main from './views/dashboard/index'
6 // import Table from './views/nav1/Table.vue' 6 // import Table from './views/nav1/Table.vue'
7 import Role from './views/nav1/role.vue' 7 import Role from './views/nav1/role.vue'
  8 +import CRM from './views/nav1/crm.vue'
8 import Perm from './views/nav1/perm.vue' 9 import Perm from './views/nav1/perm.vue'
9 import LOG from './views/nav1/Log.vue' 10 import LOG from './views/nav1/Log.vue'
10 import PreManifest from './views/agent/PreManifest.vue' 11 import PreManifest from './views/agent/PreManifest.vue'
@@ -263,6 +264,7 @@ let routes = [ @@ -263,6 +264,7 @@ let routes = [
263 children: [ 264 children: [
264 { path: '/user', component: User, name: '用户管理' }, 265 { path: '/user', component: User, name: '用户管理' },
265 { path: '/role', component: Role, name: '组织机构' }, 266 { path: '/role', component: Role, name: '组织机构' },
  267 + { path: '/crm', component: CRM, name: '组织机构' },
266 { path: '/perm', component: Perm, name: '权限管理' }, 268 { path: '/perm', component: Perm, name: '权限管理' },
267 { path: '/log', component: LOG, name: '系统日志' }, 269 { path: '/log', component: LOG, name: '系统日志' },
268 { path: '/department', component: Department, name: '部门管理' }, 270 { path: '/department', component: Department, name: '部门管理' },
@@ -533,7 +535,7 @@ let routes = [ @@ -533,7 +535,7 @@ let routes = [
533 {path:'/locations',component:locations,name:'库位管理'}, 535 {path:'/locations',component:locations,name:'库位管理'},
534 {path:'/inventroy',component:inventroy,name:'库存管理'}, 536 {path:'/inventroy',component:inventroy,name:'库存管理'},
535 {path:'/area',component:area,name:'库区管理'}, 537 {path:'/area',component:area,name:'库区管理'},
536 - {path:'/houserecord',component:houseRecord,name:'出入库'}, 538 + {path:'/houserecord',component:houseRecord,name:'仓库入库'},
537 ] 539 ]
538 }, 540 },
539 { 541 {
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <el-row> 2 <el-row>
3 <el-card style="background-color: #F5F7FA"> 3 <el-card style="background-color: #F5F7FA">
4 <el-row class="toolbar" style="height:auto"> 4 <el-row class="toolbar" style="height:auto">
5 - <el-form :model="addForm" :rules="rules" ref="addForm"> 5 + <el-form :model="addForm" :rules="rules" ref="addForm" :inline="true">
6 <el-divider content-position="left"><i class="el-icon-document"></i> 货物信息</el-divider> 6 <el-divider content-position="left"><i class="el-icon-document"></i> 货物信息</el-divider>
7 <el-row> 7 <el-row>
8 <el-col :span="6"> 8 <el-col :span="6">
@@ -64,41 +64,81 @@ @@ -64,41 +64,81 @@
64 </el-row> 64 </el-row>
65 <el-divider content-position="left"><i class="el-icon-s-home"></i> 入库相关</el-divider> 65 <el-divider content-position="left"><i class="el-icon-s-home"></i> 入库相关</el-divider>
66 <el-row> 66 <el-row>
67 - <el-col :span="7"> 67 + <el-col :span="6">
68 <el-form-item label="" :label-width="formLabelWidth" prop="area"> 68 <el-form-item label="" :label-width="formLabelWidth" prop="area">
69 - <el-input v-model="addForm.area" autocomplete="off" style="width: 300px"> 69 + <el-autocomplete
  70 + v-model="addForm.area"
  71 + :fetch-suggestions="areaQuerySearch"
  72 + placeholder="请输入库区编号"
  73 + :trigger-on-focus="false"
  74 + value-key = "areano"
  75 + clearable
  76 + highlight-first-item
  77 + style="width: 100%"
  78 + >
70 <template slot="prepend">库&emsp;&emsp;区</template> 79 <template slot="prepend">库&emsp;&emsp;区</template>
71 - </el-input> 80 + <template slot-scope="{ item }">
  81 + <div class="name" style="float: left">{{ item.areano }}</div>
  82 + <div class="addr" style="float: right">{{ item.areaname }}</div>
  83 + </template>
  84 + </el-autocomplete>
72 </el-form-item> 85 </el-form-item>
73 </el-col> 86 </el-col>
74 - <el-col :span="7"> 87 + <el-col :span="6">
75 <el-form-item label="" :label-width="formLabelWidth" prop="location"> 88 <el-form-item label="" :label-width="formLabelWidth" prop="location">
76 - <el-input v-model="addForm.location" autocomplete="off" style="width: 300px"> 89 + <el-autocomplete
  90 + v-model="addForm.location"
  91 + :fetch-suggestions="locationQuerySearch"
  92 + placeholder="请输入库位编号"
  93 + :trigger-on-focus="false"
  94 + value-key = "locationno"
  95 + clearable
  96 + highlight-first-item
  97 + style="width: 100%"
  98 + >
77 <template slot="prepend">库&emsp;&emsp;位</template> 99 <template slot="prepend">库&emsp;&emsp;位</template>
78 - </el-input> 100 + <template slot-scope="{ item }">
  101 + <div class="name" style="float: left">{{ item.locationno }}</div>
  102 + <div class="addr" style="float: right">{{ item.locationname }}</div>
  103 + </template>
  104 + </el-autocomplete>
79 </el-form-item> 105 </el-form-item>
80 </el-col> 106 </el-col>
81 - <el-col :span="8"> 107 + <el-col :span="6">
82 <el-form-item label="" :label-width="formLabelWidth" prop="transcar"> 108 <el-form-item label="" :label-width="formLabelWidth" prop="transcar">
83 - <el-input v-model="addForm.transcar" autocomplete="off" style="width: 300px"> 109 + <el-input v-model="addForm.transcar" autocomplete="off">
84 <template slot="prepend">运输车辆</template> 110 <template slot="prepend">运输车辆</template>
85 </el-input> 111 </el-input>
86 </el-form-item> 112 </el-form-item>
87 </el-col> 113 </el-col>
88 - <el-col :span="7">  
89 - <el-form-item label="" :label-width="formLabelWidth" prop="opter">  
90 - <el-input v-model="addForm.opter" autocomplete="off" style="width: 300px" disabled>  
91 - <template slot="prepend">经&nbsp;办&nbsp;人</template>  
92 - </el-input>  
93 - </el-form-item>  
94 - </el-col>  
95 - <el-col :span="8"> 114 + <el-col :span="6">
96 <el-form-item label="" :label-width="formLabelWidth" prop="customername"> 115 <el-form-item label="" :label-width="formLabelWidth" prop="customername">
97 - <el-input v-model="addForm.customername" autocomplete="off" style="width: 300px"> 116 + <el-autocomplete
  117 + v-model="addForm.customername"
  118 + :fetch-suggestions="crmQuerySearch"
  119 + placeholder="请输入货主名称"
  120 + :trigger-on-focus="false"
  121 + value-key = "roleName"
  122 + clearable
  123 + highlight-first-item
  124 + style="width: 100%"
  125 + >
98 <template slot="prepend">货主名称</template> 126 <template slot="prepend">货主名称</template>
  127 + <template slot-scope="{ item }">
  128 + <div class="name" style="float: left">{{ item.departmentid }}</div>
  129 + <div class="addr" style="float: right">{{ item.roleName }}</div>
  130 + </template>
  131 + </el-autocomplete>
  132 + </el-form-item>
  133 + </el-col>
  134 + <el-col :span="6">
  135 + <el-form-item label="" :label-width="formLabelWidth" prop="opter">
  136 + <el-input v-model="addForm.opter" autocomplete="off" disabled>
  137 + <template slot="prepend">经&nbsp;办&nbsp;人</template>
99 </el-input> 138 </el-input>
100 </el-form-item> 139 </el-form-item>
101 </el-col> 140 </el-col>
  141 +
102 </el-row> 142 </el-row>
103 <!-- <el-row> 143 <!-- <el-row>
104 <el-col :span="7"> 144 <el-col :span="7">
@@ -373,10 +413,18 @@ @@ -373,10 +413,18 @@
373 </template> 413 </template>
374 414
375 <script> 415 <script>
376 - import {selectInventroyrecords,delInventoryrecord,addInventoryrecord,ediInventroyrecord} from '../../api/consigner/station'; 416 + import {
  417 + selectInventroyrecords,
  418 + delInventoryrecord,
  419 + addInventoryrecord,
  420 + ediInventroyrecord,
  421 + selectAreas, selectLocations
  422 + } from '../../api/consigner/station';
377 import dateUtil from "@/utils/index" 423 import dateUtil from "@/utils/index"
378 import jsutil from "@/common/js/util"; 424 import jsutil from "@/common/js/util";
379 import {mapActions, mapGetters} from 'vuex' 425 import {mapActions, mapGetters} from 'vuex'
  426 + import { getList as getCRMList } from '@/api/crm_api';
  427 +
380 428
381 export default { 429 export default {
382 name: "inventroyrecord", 430 name: "inventroyrecord",
@@ -391,6 +439,9 @@ @@ -391,6 +439,9 @@
391 }, 439 },
392 total: 0, 440 total: 0,
393 tableData:[], 441 tableData:[],
  442 + areaData:[],
  443 + locationData:[],
  444 + roles:[],
394 dialogMap: { 445 dialogMap: {
395 update: '编辑', 446 update: '编辑',
396 create: '新增' 447 create: '新增'
@@ -610,10 +661,125 @@ @@ -610,10 +661,125 @@
610 let serialDate= new Date(); 661 let serialDate= new Date();
611 let serialCode = serialDate.format("yyyyMMddhhmmssS") 662 let serialCode = serialDate.format("yyyyMMddhhmmssS")
612 return serialCode 663 return serialCode
613 - } 664 + },
  665 + getAreaList() {
  666 + const _this = this
  667 + let para = {
  668 + // 当前页数
  669 + pageNum: 1,
  670 + // 每页大小
  671 + pageSize: 1000,
  672 + }
  673 + let ld = this.$loading({
  674 + text:"库区数加载中..."
  675 + })
  676 + selectAreas(para).then((response) => {
  677 + const res = response.data
  678 + if (res.code !== '200') {
  679 + return _this.$message.error('获取库区记录，失败！')
  680 + }
  681 + // 获取列表数据
  682 + _this.areaData = res.data.list
  683 + _this.$message.success('获取库区记录，成功！')
  684 + }).catch(error => {
  685 + // 关闭加载
  686 + _this.$message.error(error.toString())
  687 + }).finally(()=>{
  688 + ld.close()
  689 + })
  690 + },
  691 + areaQuerySearch(queryString, cb) {
  692 + var restaurants = this.areaData;
  693 + var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
  694 + // 调用 callback 返回建议列表的数据
  695 + cb(results);
  696 + },
  697 + createFilter(queryString) {
  698 + return (restaurant) => {
  699 + return (restaurant.areano.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
  700 + };
  701 + },
  702 + getLocationList() {
  703 + const _this = this
  704 + let para = {
  705 + // 当前页数
  706 + pageNum: 1,
  707 + // 每页大小
  708 + pageSize: 1000,
  709 + }
  710 + let ld = this.$loading({
  711 + text:"库位数加载中..."
  712 + })
  713 + selectLocations(para).then((response) => {
  714 + const res = response.data
  715 + if (res.code !== '200') {
  716 + return _this.$message.error('获取库位记录，失败！')
  717 + }
  718 + // 获取列表数据
  719 + _this.locationData = res.data.list
  720 + _this.$message.success('获取库位记录，成功！')
  721 + }).catch(error => {
  722 + // 关闭加载
  723 + _this.$message.error(error.toString())
  724 + }).finally(()=>{
  725 + ld.close()
  726 + })
  727 + },
  728 + locationQuerySearch(queryString, cb){
  729 + var restaurants = this.locationData;
  730 + var results = queryString ? restaurants.filter(this.locationFilter(queryString)) : restaurants;
  731 + // 调用 callback 返回建议列表的数据
  732 + cb(results);
  733 + },
  734 + locationFilter(queryString) {
  735 + return (restaurant) => {
  736 + return (restaurant.locationno.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
  737 + };
  738 + },
  739 + getRoles() {
  740 + let _this= this;
  741 + let ld = this.$loading({
  742 + text:"客户数据加载中..."
  743 + })
  744 + getCRMList({},1,2000).then((response) => {
  745 + const res = response.data
  746 + if (res.code !== '200') {
  747 + return _this.$message.error('获取库位记录，失败！')
  748 + }
  749 + // 获取列表数据
  750 + _this.roles = res.data.list
  751 + _this.$message.success('获取客户数据，成功！')
  752 + }).catch((error) => {
  753 + if(null!= error.response && error.response!==undefined){
  754 + let status= error.response.status;
  755 + let msg = error.response.statusText;
  756 + return _this.$message.error(status+msg)
  757 + }else {
  758 + return _this.$message.error(error.toString())
  759 + }
  760 + }).finally(()=>{
  761 + ld.close()
  762 + });
  763 +
  764 + },
  765 + crmQuerySearch(queryString, cb){
  766 + var restaurants = this.roles;
  767 + var results = queryString ? restaurants.filter(this.crmFilter(queryString)) : restaurants;
  768 + // 调用 callback 返回建议列表的数据
  769 + cb(results);
  770 + },
  771 + crmFilter(queryString) {
  772 + return (restaurant) => {
  773 + if (restaurant.departmentid){
  774 + return (restaurant.departmentid.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
  775 + }
  776 + };
  777 + },
614 }, 778 },
615 mounted() { 779 mounted() {
616 - // this.getList(); 780 + this.getAreaList();
  781 + this.getLocationList();
  782 + this.getRoles();
617 this.addForm.serialnumber = this.serialNumber() 783 this.addForm.serialnumber = this.serialNumber()
618 if (!jsutil.checkNull(this.getUserInfoStore) && !jsutil.checkNull(this.getUserInfoStore.username)){ 784 if (!jsutil.checkNull(this.getUserInfoStore) && !jsutil.checkNull(this.getUserInfoStore.username)){
619 this.$message.error("获取用户信息出错") 785 this.$message.error("获取用户信息出错")
  1 +<template>
  2 + <section>
  3 + <!--工具条-->
  4 + <el-form :inline="true" :model="filters">
  5 + <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
  6 + <el-form-item>
  7 + <el-input v-model="filters.roleName" placeholder="客户名称" clearable>
  8 + <template slot="prepend">客户名称</template>
  9 + </el-input>
  10 + </el-form-item>
  11 + <el-form-item>
  12 + <div class="my-text-area">
  13 + <div class="el-input-group__prepend prepand">业务类型</div>
  14 + <el-select
  15 + v-model="filters.orgtype"
  16 + filterable
  17 + allow-create
  18 + clearable
  19 + default-first-option
  20 + placeholder="业务类型">
  21 + <el-option
  22 + v-for="item in orgtypeOption"
  23 + :key="item.value"
  24 + :label="item.label"
  25 + :value="item.value">
  26 + </el-option>
  27 + </el-select>
  28 + </div>
  29 + </el-form-item>
  30 + <el-form-item>
  31 + <el-input v-model="filters.departmentid" placeholder="客户简码" clearable>
  32 + <template slot="prepend">简&emsp;&emsp;码</template>
  33 + </el-input>
  34 + </el-form-item>
  35 +
  36 + <el-form-item>
  37 + <el-button type="primary" v-on:click="getRoles()" icon="el-icon-search">查&emsp;&emsp;询</el-button>
  38 + </el-form-item>
  39 + <el-form-item>
  40 + <el-button type="success" @click="handleAdd" icon="el-icon-document">新&emsp;&emsp;增</el-button>
  41 + </el-form-item>
  42 + <el-form-item>
  43 + <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0" icon="el-icon-delete">批量删除</el-button>
  44 + </el-form-item>
  45 + <el-form-item>
  46 + <el-button type="warning" @click="toggleRowExpansion" icon="el-icon-sort" size="mini">
  47 + 全部{{ isExpansion ? "折叠" : "展开" }}
  48 + </el-button>
  49 + </el-form-item>
  50 + </el-col>
  51 + </el-form>
  52 +
  53 + <el-col :gutter="0" class="toolbar toobar_analysis" style="padding-top:0">
  54 + <el-col :span="7">
  55 + <div class="analysis_title">机构数量:</div>
  56 + <div class="analysis_text">{{total}}</div>
  57 + </el-col>
  58 + <el-col :span="1">
  59 + <el-divider direction="vertical"></el-divider>
  60 + </el-col>
  61 + <el-col :span="7">
  62 + <div class="analysis_title">公司数量:</div>
  63 + <div class="analysis_text">{{total}}</div>
  64 + </el-col>
  65 + <el-col :span="1">
  66 + <el-divider direction="vertical"></el-divider>
  67 + </el-col>
  68 + <el-col :span="8">
  69 + <div class="analysis_title">数据量共:</div>
  70 + <div class="analysis_text">150</div>
  71 + </el-col>
  72 + </el-col>
  73 +
  74 + <!--列表-->
  75 + <el-table :data="roles" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
  76 + default-expand-all
  77 + ref="dataTreeList"
  78 + row-key="roleId"
  79 + border
  80 + tooltip-effect="dark"
  81 + style="border-radius: 10px 10px 0px 0px;line-height: 25px;min-height: 500px"
  82 + :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
  83 + :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
  84 + <el-table-column type="selection" width="55">
  85 + </el-table-column>
  86 + <!--<el-table-column type="index" width="60">-->
  87 + <!--</el-table-column>-->
  88 + <el-table-column prop="roleId" label="ID" width="120">
  89 + </el-table-column>
  90 + <el-table-column prop="roleName" label="岗位/角色名称" min-width="200" sortable>
  91 + </el-table-column>
  92 + <!--<el-table-column prop="departmentName" label="部门名称" min-width="200" sortable>-->
  93 + <!--</el-table-column>-->
  94 + <el-table-column prop="description" label="描述" min-width="160" >
  95 + </el-table-column>
  96 + <el-table-column prop="type" label="类型" min-width="80" sortable>
  97 + </el-table-column>
  98 + <el-table-column prop="businessLicense" label="工商代码" min-width="180" >
  99 + </el-table-column>
  100 + <el-table-column prop="orgtype" label="业务类型" min-width="150" >
  101 + <template slot-scope="scope">
  102 + <el-tag type="" v-if="scope.row.orgtype==='M'">{{busnessType[scope.row.orgtype]}}</el-tag>
  103 + <el-tag type="success" v-if="scope.row.orgtype==='C'">{{busnessType[scope.row.orgtype]}}</el-tag>
  104 + <el-tag type="warning" v-if="scope.row.orgtype==='S'">{{busnessType[scope.row.orgtype]}}</el-tag>
  105 + </template>
  106 + </el-table-column>
  107 + <el-table-column prop="departmentid" label="简码" min-width="150" >
  108 + </el-table-column>
  109 + <el-table-column label="操作" min-width="260" fixed="right">
  110 + <template slot-scope="scope">
  111 +<!-- <el-row>-->
  112 +<!-- <el-button type="success" @click="handleAdd(scope.$index, scope.row)">新增下级</el-button>-->
  113 +<!-- <el-button @click="setPerm(scope.$index, scope.row)">设置权限</el-button>-->
  114 +<!-- </el-row>-->
  115 + <el-row>
  116 + <el-button @click="handleEdit(scope.$index, scope.row)">编&emsp;&emsp;辑</el-button>
  117 + <el-button type="danger" @click="handleDel(scope.$index, scope.row)">删&emsp;&emsp;除</el-button>
  118 + </el-row>
  119 + </template>
  120 + </el-table-column>
  121 + </el-table>
  122 + <!--工具条-->
  123 + <el-col :span="24" class="toolbar">
  124 + <el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
  125 + </el-pagination>
  126 + </el-col>
  127 +
  128 + <!--新增界面-->
  129 + <el-dialog :title="dialogMap[dialogStatus]" :visible.sync="addFormVisible" :close-on-click-modal="false">
  130 + <el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm">
  131 + <el-form-item label="上级组织机构">
  132 + <span>{{addForm.parentName}}</span>
  133 + </el-form-item>
  134 + <el-form-item label=" " prop="type">
  135 + <el-select
  136 + v-model="addForm.type"
  137 + filterable
  138 + allow-create
  139 + default-first-option
  140 + placeholder="组织机构类型">
  141 + <el-option
  142 + v-for="item in companyOption"
  143 + :key="item.value"
  144 + :label="item.label"
  145 + :value="item.value">
  146 + </el-option>
  147 + </el-select>
  148 + </el-form-item>
  149 + <el-form-item label=" " prop="roleName">
  150 + <el-input v-model="addForm.roleName" auto-complete="off" placeholder="请输入组织机构名称：例如:公司名称">
  151 + <template slot="prepend">组织机构名称</template>
  152 + </el-input>
  153 + </el-form-item>
  154 + <el-form-item label=" " prop="description">
  155 + <el-input v-model="addForm.description" auto-complete="off" placeholder="组织机构描述：例如:组织机构简介">
  156 + <template slot="prepend">组织机构描述</template>
  157 + </el-input>
  158 + </el-form-item>
  159 + <el-form-item label=" " prop="businessLicense">
  160 + <el-input v-model="addForm.businessLicense" auto-complete="off" placeholder="社会信用代码或者组织机构代码">
  161 + <template slot="prepend">企业信用代码</template>
  162 + </el-input>
  163 + </el-form-item>
  164 + <el-form-item label=" " prop="customsRegCode">
  165 + <el-input v-model="addForm.customsRegCode" auto-complete="off" placeholder="海关备案后返回的备案代码">
  166 + <template slot="prepend">海关备案代码</template>
  167 + </el-input>
  168 + </el-form-item>
  169 + <el-form-item label=" " prop="mqcode">
  170 + <el-input v-model="addForm.mqcode" auto-complete="off" placeholder="海关通道编号">
  171 + <template slot="prepend">海关通道编号</template>
  172 + </el-input>
  173 + </el-form-item>
  174 + <el-form-item label=" " prop="departmentid">
  175 + <el-input v-model="addForm.departmentid" auto-complete="off" placeholder="航司承运人代码,组织机构为航司时必填">
  176 + <template slot="prepend"> 承运人代码&nbsp;&nbsp;&nbsp; </template>
  177 + </el-input>
  178 + </el-form-item>
  179 + </el-form>
  180 + <div slot="footer" class="dialog-footer">
  181 + <el-button @click.native="addFormVisible = false">取消</el-button>
  182 + <el-button type="primary" @click="dialogStatus==='create'?addSubmit():editSubmit()" :loading="addLoading" >提交</el-button>
  183 + </div>
  184 + </el-dialog>
  185 +
  186 + <!--权限设置界面-->
  187 + <el-dialog title="岗位的权限设置"
  188 + :visible.sync="PermFormVisible"
  189 + :close-on-click-modal="false"
  190 + top="5vh"
  191 + >
  192 + <el-row>
  193 + <el-col :span="4" >
  194 + <el-button type="primary" @click.native="treeMerge(false)">合并节点</el-button>
  195 + </el-col>
  196 + <el-col :span="4">
  197 + <el-button type="success" @click.native="treeMerge(true)">展开节点</el-button>
  198 + </el-col>
  199 + </el-row>
  200 + <el-divider></el-divider>
  201 + <el-form :model="permForm" label-width="80px" ref="permForm">
  202 + <el-tree :data="permissons" :props="treeDefaultProps"
  203 + @check="clickDeal"
  204 + :default-expand-all = "treeExpand"
  205 + show-checkbox highlight-current check-on-click-node check-strictly
  206 + node-key="permissionId" ref="tree">
  207 + </el-tree>
  208 + </el-form>
  209 + <div slot="footer" class="dialog-footer">
  210 + <el-button @click.native="PermFormVisible = false">取消</el-button>
  211 + <el-button type="primary" @click.native="setPermSubmit" :loading="addLoading">提交</el-button>
  212 + </div>
  213 + </el-dialog>
  214 + </section>
  215 +</template>
  216 +
  217 +<script>
  218 + import util from '../../common/js/util'
  219 + import NProgress from 'nprogress'
  220 + import { getList, remove, batchRemove, edit, add, updateRolePerm } from '../../api/role_api';
  221 + import { getList as getCRMList } from '@/api/crm_api';
  222 + import { getList as getDepartmentList} from '../../api/department';
  223 + import { getList as permList } from '../../api/perm_api';
  224 + import moment from 'moment'
  225 + export default {
  226 + name:'Role',
  227 + data() {
  228 + return {
  229 + filters: {
  230 + roleName: '',
  231 + orgtype:'',
  232 + departmentid:''
  233 + },
  234 + companyOption: [
  235 + {
  236 + label: "集团",
  237 + value: "集团",
  238 + },
  239 + {
  240 + label: "公司",
  241 + value: "公司"
  242 + },
  243 + {
  244 + label: "部门",
  245 + value: "部门"
  246 + },
  247 + {
  248 + label: "航司",
  249 + value: "航司"
  250 + },
  251 + {
  252 + label: "货代",
  253 + value: "货代"
  254 + },
  255 + {
  256 + label: "货主",
  257 + value: "货主"
  258 + }
  259 + ],
  260 + treeDefaultProps: {
  261 + children: 'children',
  262 + label: 'name',
  263 + },
  264 + treeExpand: false,
  265 + departmentNameList:[],
  266 + roles: [],
  267 + permissons: [],
  268 + permIds: [],
  269 + total: 0,
  270 + pageNum: 1,
  271 + pageSize: 10,
  272 + listLoading: false,
  273 + sels: [],//列表选中列
  274 + dialogMap: {
  275 + update: '编辑',
  276 + create: '新增',
  277 + },
  278 + dialogStatus: 'create',
  279 + //新增界面是否显示
  280 + addFormVisible: false,
  281 + //设置权限界面是否显示
  282 + PermFormVisible: false,
  283 + addLoading: false,
  284 + addFormRules: {
  285 + roleName: [
  286 + { required: true, message: '请输入岗位/角色名称', trigger: 'blur' }
  287 + ],
  288 + type: [
  289 + { required: true, message: '请选择组织机构类型', trigger: 'blur' }
  290 + ]
  291 + },
  292 + //新增界面数据
  293 + addForm: {
  294 + description: '',
  295 + roleName: '',
  296 + roleSign: 1,
  297 + departmentid:'',
  298 + type: '',
  299 + businessLicense: '',
  300 + customsRegCode: '',
  301 + parentName: '',
  302 + mqcode: ''
  303 +
  304 + },
  305 + isExpansion:true,
  306 + permForm: {
  307 + roleId: 1,
  308 + description: '',
  309 + roleName: '',
  310 + roleSign: 1,
  311 + permissions: []
  312 + },
  313 + busnessType: {
  314 + 'M':'自身',
  315 + 'C':'客户',
  316 + 'S':'供应商'
  317 + },
  318 + orgtypeOption:[
  319 + {
  320 + label: "客户",
  321 + value: "C",
  322 + },
  323 + {
  324 + label: "供应商",
  325 + value: "S",
  326 + },
  327 + {
  328 + label: "自身",
  329 + value: "M",
  330 + }
  331 + ]
  332 +
  333 + }
  334 + },
  335 + methods: {
  336 + toggleRowExpansion() {
  337 + this.isExpansion = !this.isExpansion;
  338 + this.toggleRowExpansionAll(this.roles, this.isExpansion);
  339 + },
  340 + toggleRowExpansionAll(data, isExpansion) {
  341 + data.forEach((item) => {
  342 + this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion);
  343 + if (item.children !== undefined && item.children !== null) {
  344 + this.toggleRowExpansionAll(item.children, isExpansion);
  345 + }
  346 + });
  347 + },
  348 + treeMerge: function (expand) {
  349 + this.treeExpand = expand;
  350 + for(var i=0;i<this.$refs.tree.store._getAllNodes().length;i++){
  351 + this.$refs.tree.store._getAllNodes()[i].expanded=this.treeExpand;
  352 + }
  353 + },
  354 + handleCurrentChange(val) {
  355 + this.pageNum = val;
  356 + this.getRoles();
  357 + },
  358 + //获取角色列表
  359 + getRoles() {
  360 + let _this= this;
  361 + this.listLoading = true;
  362 + getCRMList(this.filters,this.pageNum,this.pageSize).then((res) => {
  363 + this.total = res.data.data.total;
  364 + this.roles = res.data.data.list;
  365 + }).catch((error) => {
  366 + if(null!= error.response && error.response!==undefined){
  367 + let status= error.response.status;
  368 + let msg = error.response.statusText;
  369 + return _this.$message.error(status+msg)
  370 + }else {
  371 + return _this.$message.error(error.toString())
  372 + }
  373 + }).finally(()=>{
  374 + this.listLoading = false;
  375 + });
  376 +
  377 + },
  378 +
  379 + //获取部门列表
  380 + getdepartmentNames() {
  381 +
  382 + this.listLoading = true;
  383 + //NProgress.start();
  384 + getDepartmentList().then((res) => {
  385 + this.total = res.data.total;
  386 + this.departmentNameList = res.data.list;
  387 + this.listLoading = false;
  388 + //NProgress.done();
  389 + }).catch((error) => {
  390 +
  391 + this.listLoading = false;
  392 + if(null!= error.response && error.response!==undefined){
  393 + let status= error.response.status;
  394 + let msg = error.response.statusText;
  395 + alert(status+msg);
  396 + }else {
  397 + alert(error);
  398 + }
  399 +
  400 + });
  401 +
  402 + },
  403 +
  404 + //获取权限列表
  405 + getPermList() {
  406 + let para = {
  407 + pageNum: 1,
  408 + pageSize: 700
  409 + };
  410 + NProgress.start();
  411 + permList(para).then((res) => {
  412 + this.permissons = res.data.list;
  413 + NProgress.done();
  414 + }).catch((error) => {
  415 + if(null!= error.response && error.response!==undefined){
  416 + let status= error.response.status;
  417 + let msg = error.response.statusText;
  418 + message({
  419 + // 饿了么的消息弹窗组件
  420 + message: status+msg,
  421 + type: "error"
  422 + });
  423 + }else {
  424 + alert(error);
  425 + }
  426 + });
  427 +
  428 + },
  429 + //删除
  430 + handleDel: function (index, row) {
  431 + this.$confirm('确认删除该记录吗?', '提示', {
  432 + type: 'warning'
  433 + }).then(() => {
  434 + this.listLoading = true;
  435 + //NProgress.start();
  436 + let para = { roleId: row.roleId };
  437 + remove(para).then((res) => {
  438 + this.listLoading = false;
  439 + //NProgress.done();
  440 + this.$message({
  441 + message: '删除成功',
  442 + type: 'success'
  443 + });
  444 + this.getRoles();
  445 + }).catch((error) => {
  446 + this.listLoading = false;
  447 + alert(error);
  448 + });
  449 + }).catch();
  450 + },
  451 + /**
  452 + * 显示编辑界面
  453 + * @param index
  454 + * @param row 为这行的数据对象
  455 + */
  456 + handleEdit: function (index, row) {
  457 + this.addFormVisible = true;
  458 + this.dialogStatus= 'update',
  459 + this.addForm = Object.assign({}, row);
  460 + // this.getdepartmentNames();
  461 + },
  462 + setPerm: function (index, row) {
  463 + this.PermFormVisible = true;
  464 + this.getPermList();
  465 + var _this = this;
  466 + this.permIds = [];
  467 + this.permForm = Object.assign({}, row);
  468 + let rolePerms = this.permForm.permissions;
  469 + if (util.checkNull(rolePerms)){
  470 + rolePerms.forEach(function (perm,v_index,v_arr) {
  471 + if(util.checkNull(perm)){
  472 + _this.permIds[v_index] = perm.permissionId;
  473 + }
  474 + });
  475 + }
  476 +
  477 + this.$nextTick(() => {
  478 +
  479 + //反向适配
  480 + this.$refs.tree.setCheckedKeys(this.permIds);
  481 + });
  482 + },
  483 + //显示新增界面，每次点开初始化数据
  484 + handleAdd: function (index,row) {
  485 + this.addFormVisible = true;
  486 + this.dialogStatus= 'create';
  487 + this.addForm = {
  488 + description: '',
  489 + roleName: '',
  490 + roleSign: 1,
  491 + departmentid:'',
  492 + type: '',
  493 + businessLicense: '',
  494 + customsRegCode: '',
  495 + mqcode: '',
  496 + parentid: 0,
  497 +
  498 + };
  499 + //如果新增下级
  500 + if(util.checkNull(row)){
  501 + //传递上级ID
  502 + let parentRole = Object.assign({}, row);
  503 + this.addForm.parentid = parentRole.roleId;
  504 + this.addForm.parentName = parentRole.roleName;
  505 + }
  506 +
  507 +// this.getdepartmentNames();
  508 + },
  509 + //编辑
  510 + editSubmit: function () {
  511 + this.$refs.addForm.validate((valid) => {
  512 + if (valid) {
  513 + this.$confirm('确认提交吗？', '提示', {}).then(() => {
  514 + this.addLoading = true;
  515 + //NProgress.start();
  516 + let para = Object.assign({}, this.addForm);
  517 + //不需要提交的 去掉，后端不好接收
  518 + para.authorities = null;
  519 + para.permissions = null;
  520 + para.roles = null;
  521 + para.children = null;
  522 +// para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
  523 + /*
  524 + 查询之后格式this.filters.column.create_start_date中日期发生变化;
  525 + Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) 变成了 "2017-08-08T16:00:00.000Z";
  526 + 所以使用 moment 日期格式化插件将时间转换成 [ Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) ] 格
  527 + 式;
  528 + */
  529 + /*moment 安装 npm install moment --save*/
  530 + // para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
  531 + this.addLoading = false;
  532 + edit(para).then((res) => {
  533 +
  534 + //NProgress.done();
  535 + this.$message({
  536 + message: '提交成功',
  537 + type: 'success'
  538 + });
  539 + this.$refs['addForm'].resetFields();
  540 + this.addFormVisible = false;
  541 + this.getRoles();
  542 + }).catch(error => alert(error));
  543 + });
  544 + }
  545 + });
  546 + },
  547 + //新增
  548 + addSubmit: function () {
  549 + this.$refs.addForm.validate((valid) => {
  550 + if (valid) {
  551 + this.$confirm('确认提交吗？', '提示', {}).then(() => {
  552 + this.addLoading = true;
  553 + //NProgress.start();
  554 + let para = Object.assign({}, this.addForm);
  555 + add(para).then((res) => {
  556 + this.addLoading = false;
  557 + //NProgress.done();
  558 + this.$message({
  559 + message: '提交成功',
  560 + type: 'success'
  561 + });
  562 + this.$refs['addForm'].resetFields();
  563 + this.addFormVisible = false;
  564 + this.getRoles();
  565 + }).catch(error => alert(error));
  566 + });
  567 + }
  568 + });
  569 + },
  570 + //设置角色提交
  571 + setPermSubmit: function () {
  572 + this.$refs.permForm.validate((valid) => {
  573 + if (valid) {
  574 + this.$confirm('确认提交吗？', '提示', {}).then(() => {
  575 + this.addLoading = true;
  576 + //NProgress.start();
  577 + let role = Object.assign({}, this.permForm);
  578 + let roleId = role.roleId;
  579 + let permissionIds = this.$refs.tree.getCheckedKeys();
  580 + let para = {roleId,permissionIds};
  581 + updateRolePerm(para).then((res) => {
  582 + this.addLoading = false;
  583 + if (res.status ===200) {
  584 + this.$message({
  585 + message: '提交成功',
  586 + type: 'success'
  587 + });
  588 + this.$refs['permForm'].resetFields();
  589 + }
  590 + //NProgress.done();
  591 + this.PermFormVisible = false;
  592 + this.getRoles();
  593 + }).catch(error => alert(error))
  594 + .finally(()=>{
  595 + this.addLoading = false
  596 + });
  597 + });
  598 + }
  599 + });
  600 + },
  601 + selsChange: function (sels) {
  602 + this.sels = sels;
  603 + },
  604 + //批量删除
  605 + batchRemove: function () {
  606 + var ids = this.sels.map(item => item.roleId).toString();
  607 + this.$confirm('确认删除选中记录吗？', '提示', {
  608 + type: 'warning'
  609 + }).then(() => {
  610 + this.listLoading = true;
  611 + //NProgress.start();
  612 + let para = { ids: ids };
  613 + batchRemove(para).then((res) => {
  614 + this.listLoading = false;
  615 + //NProgress.done();
  616 + this.$message({
  617 + message: '删除成功',
  618 + type: 'success'
  619 + });
  620 + this.getRoles();
  621 + });
  622 + }).catch(() => {
  623 +
  624 + });
  625 + },
  626 + treeHandleCheckChange: function (data, checked, indeterminate) {
  627 + if(checked) {
  628 + this.permIds.push(data.permissionId);
  629 + }else {
  630 + this.permIds.splice(this.permIds.contains(data.permissionId),1);
  631 + }
  632 + console.log(data, checked, indeterminate);
  633 +
  634 + },
  635 + uniteParentSame(id,treeStatus){//当子节点全为未选中时父节点也变为未选中状态
  636 + let node = this.$refs.tree.getNode(permissionId);//获取当前节点的节点树
  637 + if (node.parent !== null && node.parent !== undefined) {
  638 + let parentNode = node.parent.data;//获取当前节点的父节点树
  639 + if (parentNode != undefined){//判断父节点是否存在
  640 + for (let i = 0; i < parentNode.children.length; i++) {
  641 + let checkedKeys = this.$refs.tree.getCheckedKeys();
  642 + let hafCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
  643 + let selectNodes = checkedKeys.concat(hafCheckedKeys);//获取已选择树节点
  644 + let selected = selectNodes.indexOf(parentNode.children[i].permissionId); // -1当前节点的同级节点是否全部未选中
  645 + if (selected !== -1){
  646 + return;
  647 + }
  648 + }
  649 + }else {
  650 + return;
  651 + }
  652 + this.$refs.tree.setChecked(parentNode.permissionId, false);//修改节点为未选择
  653 + if(node.level>2){//判断是否是最上级节点
  654 + this.uniteParentSame(parentNode.permissionId,treeStatus)
  655 + }
  656 + }else {
  657 + return;
  658 + }
  659 + },
  660 +
  661 + // 统一处理子节点为相同的勾选状态
  662 + uniteChildSame(treeList, isSelected){
  663 + this.$refs.tree.setChecked(treeList.permissionId, isSelected);
  664 + if (treeList.children !== undefined){
  665 + for (let i = 0; i < treeList.children.length; i++) {
  666 + this.uniteChildSame(treeList.children[i], isSelected)
  667 + }
  668 + }
  669 + },
  670 + // 统一处理父节点为选中
  671 + selectedParent(currentObj){
  672 + let currentNode = this.$refs.tree.getNode(currentObj);
  673 + if (currentNode.parent.key !== undefined) {
  674 + this.$refs.tree.setChecked(currentNode.parent, true);
  675 + this.selectedParent(currentNode.parent)
  676 + }
  677 + },
  678 + clickDeal: function (currentObj, treeStatus){
  679 + // 用于：父子节点严格互不关联时，父节点勾选变化时通知子节点同步变化，实现单向关联。
  680 + let selected = treeStatus.checkedKeys.indexOf(currentObj.permissionId); // -1未选中
  681 + // 选中
  682 + if (selected !== -1) {
  683 + // 子节点只要被选中父节点就被选中
  684 + // this.selectedParent(currentObj);
  685 + // 统一处理子节点为相同的勾选状态
  686 + this.uniteChildSame(currentObj, true)
  687 + } else {
  688 + // 未选中 处理子节点全部未选中
  689 + if (currentObj.children !== undefined){
  690 + if (currentObj.children.length !== 0) {
  691 + this.uniteChildSame(currentObj, false)
  692 + }
  693 + //放开时为当子节点全为未选中时父节点也变为未选中状态 注释后就是父节点不和子节点强制绑定
  694 + // this.uniteParentSame(currentObj.id,treeStatus)//当子节点全为未选中时父节点也变为未选中状态
  695 + }
  696 + // else {
  697 + // this.uniteParentSame(currentObj.id,treeStatus)
  698 + // }
  699 + }
  700 + }
  701 + },
  702 + mounted() {
  703 + this.getRoles();
  704 + let _this = this;
  705 + document.onkeydown = function (e) {
  706 + let key = window.event.keyCode;
  707 + if (key == 13) {
  708 + _this.getRoles();
  709 + }
  710 + };
  711 + this.isExpansion=true;
  712 + }
  713 + }
  714 +
  715 +</script>
  716 +
  717 +<style>
  718 +
  719 +</style>
  720 +
  721 +<style lang="scss">
  722 + .grid-content {
  723 + height: 36px;
  724 + line-height: 36px;
  725 + }
  726 + .toobar_analysis{
  727 + padding-top: 0;
  728 + .el-col{
  729 + margin-right: 0;
  730 + }
  731 + .analysis_title{
  732 + color: #a6b6c6;
  733 + font-size: 12px;
  734 + height: 34px;
  735 + line-height: 34px;
  736 + }
  737 + .analysis_text{
  738 + color: #5473E8;
  739 + font-size: 16px;
  740 + height: 16px;
  741 + line-height: 16px;
  742 + }
  743 + .el-divider--vertical{
  744 + height:2em;
  745 + }
  746 + }
  747 +
  748 +</style>
  749 +<style scoped>
  750 + .my-text-area .prepand{
  751 + float: left;
  752 + width:89px;
  753 + height: 28px;
  754 + font-size: 12px;
  755 + line-height: 28px;
  756 + }
  757 +</style>
  758 +<style>
  759 + .my-text-area .el-input__inner{
  760 + min-height: 28px;
  761 + height: 28px;
  762 + border-bottom-left-radius: 0;
  763 + border-top-left-radius: 0;
  764 + }
  765 +</style>
@@ -72,9 +72,9 @@ @@ -72,9 +72,9 @@
72 </el-table-column> 72 </el-table-column>
73 <el-table-column prop="businessLicense" label="工商代码" min-width="180" > 73 <el-table-column prop="businessLicense" label="工商代码" min-width="180" >
74 </el-table-column> 74 </el-table-column>
75 - <el-table-column prop="customsRegCode" label="海关备案代码" min-width="150" > 75 + <el-table-column prop="orgtype" label="业务类型" min-width="150" :formatter="formatState">
76 </el-table-column> 76 </el-table-column>
77 - <el-table-column prop="mqcode" label="海关通道编号" min-width="150" > 77 + <el-table-column prop="departmentid" label="简码" min-width="150" >
78 </el-table-column> 78 </el-table-column>
79 <el-table-column label="操作" min-width="260" fixed="right"> 79 <el-table-column label="操作" min-width="260" fixed="right">
80 <template slot-scope="scope"> 80 <template slot-scope="scope">
@@ -277,6 +277,21 @@ @@ -277,6 +277,21 @@
277 } 277 }
278 }, 278 },
279 methods: { 279 methods: {
  280 + formatState: function (row, column) {
  281 + switch (row.orgtype) {
  282 + case "M":
  283 + return '自身'
  284 + break;
  285 + case "C":
  286 + return '客户'
  287 + break;
  288 + case "S":
  289 + return '供应商'
  290 + break;
  291 + default:
  292 + return ""
  293 + }
  294 + },
280 toggleRowExpansion() { 295 toggleRowExpansion() {
281 this.isExpansion = !this.isExpansion; 296 this.isExpansion = !this.isExpansion;
282 this.toggleRowExpansionAll(this.roles, this.isExpansion); 297 this.toggleRowExpansionAll(this.roles, this.isExpansion);
@@ -301,6 +316,7 @@ @@ -301,6 +316,7 @@
301 }, 316 },
302 //获取角色列表 317 //获取角色列表
303 getRoles() { 318 getRoles() {
  319 + let _this= this;
304 let para = { 320 let para = {
305 pageNum: this.pageNum, 321 pageNum: this.pageNum,
306 pageSize: this.pageSize, 322 pageSize: this.pageSize,
@@ -311,19 +327,17 @@ @@ -311,19 +327,17 @@
311 getList(para).then((res) => { 327 getList(para).then((res) => {
312 this.total = res.data.total; 328 this.total = res.data.total;
313 this.roles = res.data.list; 329 this.roles = res.data.list;
314 - this.listLoading = false;  
315 //NProgress.done(); 330 //NProgress.done();
316 }).catch((error) => { 331 }).catch((error) => {
317 -  
318 - this.listLoading = false;  
319 if(null!= error.response && error.response!==undefined){ 332 if(null!= error.response && error.response!==undefined){
320 let status= error.response.status; 333 let status= error.response.status;
321 let msg = error.response.statusText; 334 let msg = error.response.statusText;
322 - alert(status+msg); 335 + return _this.$message.error(status+msg)
323 }else { 336 }else {
324 - alert(error); 337 + return _this.$message.error(error.toString())
325 } 338 }
326 - 339 + }).finally(()=>{
  340 + this.listLoading = false;
327 }); 341 });
328 342
329 }, 343 },
@@ -542,7 +556,10 @@ @@ -542,7 +556,10 @@
542 //NProgress.done(); 556 //NProgress.done();
543 this.PermFormVisible = false; 557 this.PermFormVisible = false;
544 this.getRoles(); 558 this.getRoles();
545 - }).catch(error => alert(error)); 559 + }).catch(error => alert(error))
  560 + .finally(()=>{
  561 + this.addLoading = false
  562 + });
546 }); 563 });
547 } 564 }
548 }); 565 });