192484ff by 任超
2 parents 55995cd5 9dd5c4b0
...@@ -19,8 +19,8 @@ ...@@ -19,8 +19,8 @@
19 }, 19 },
20 props: { 20 props: {
21 cdata: { 21 cdata: {
22 type: Object, 22 type: Array,
23 default: () => ({}), 23 default: () => ([]),
24 }, 24 },
25 }, 25 },
26 watch: { 26 watch: {
...@@ -47,6 +47,7 @@ ...@@ -47,6 +47,7 @@
47 { 47 {
48 name: "Access From", 48 name: "Access From",
49 type: "pie", 49 type: "pie",
50 radius: '60%',
50 avoidLabelOverlap: true, 51 avoidLabelOverlap: true,
51 label: { 52 label: {
52 formatter: (params) => { 53 formatter: (params) => {
...@@ -54,10 +55,17 @@ ...@@ -54,10 +55,17 @@
54 }, 55 },
55 position: "outer", 56 position: "outer",
56 alignTo: "edge", 57 alignTo: "edge",
57 margin: 5 58 margin: 10,
59 normal: {
60 show: true,
61 textStyle: {
62 fontSize: 12
63 }
64 },
58 }, 65 },
59 66
60 data: newData.seriesData, 67
68 data: newData,
61 } 69 }
62 ], 70 ],
63 }; 71 };
......
...@@ -10,9 +10,7 @@ ...@@ -10,9 +10,7 @@
10 export default { 10 export default {
11 data () { 11 data () {
12 return { 12 return {
13 cdata: { 13 cdata: [],
14 seriesData: [],
15 },
16 getdata: [], 14 getdata: [],
17 }; 15 };
18 }, 16 },
...@@ -22,44 +20,44 @@ ...@@ -22,44 +20,44 @@
22 mounted () { 20 mounted () {
23 this.addhousetotal(); 21 this.addhousetotal();
24 window.addEventListener("resize", () => { 22 window.addEventListener("resize", () => {
25 this.getdata = []; 23 this.cdata = [];
26 this.addhousetotal(); 24 this.addhousetotal();
27 }); 25 });
28 26
29 }, 27 },
30 methods: { 28 methods: {
31 async addhousetotal () { 29 async addhousetotal () {
32 if (this.getdata.length == 0) { 30 if (this.cdata == 0) {
33 this.getdata = []; 31 this.getdata = [];
34 try { 32 try {
35 let { result: res } = await work.addhousetotal(); 33 let { result: res } = await work.addhousetotal();
36 res.map((item) => { 34 res.map((item) => {
37 return this.cdata.seriesData.push({ 35 return this.cdata.push({
38 name: `${item.fwyt + '(' + item.fwxz})`, 36 name: `${item.fwyt + '(' + item.fwxz})`,
39 value: item.mj, 37 value: item.mj,
40 }); 38 });
41 39
42 }); 40 });
43 41 let delarr = this.cdata.sort(this.up)
42 this.setadat(delarr)
44 43
45 } catch (error) { 44 } catch (error) {
46 console.log("error", error); 45 console.log("error", error);
47 } 46 }
48 } 47 }
49 let delarr = this.cdata.seriesData.sort(this.up) 48
50 this.setadat(delarr)
51 49
52 }, 50 },
53 // 处理数据方法 51 // 处理数据方法
54 setadat (delarr) { 52 setadat (delarr) {
55 53
56 this.cdata.seriesData = delarr.splice(0, 6); 54 this.cdata = delarr.splice(0, 6);
57 let sum = 0 55 let sum = 0
58 for (var i = 0; i < delarr.length; i++) { 56 for (var i = 0; i < delarr.length; i++) {
59 sum = sum + delarr[i].value 57 sum = sum + delarr[i].value
60 } 58 }
61 sum = sum.toFixed(2) 59 sum = sum.toFixed(2)
62 this.cdata.seriesData.push({ 60 this.cdata.push({
63 name: "其他(其他种类)", 61 name: "其他(其他种类)",
64 values: "其他种类", 62 values: "其他种类",
65 value: sum, 63 value: sum,
......
...@@ -360,7 +360,27 @@ aside { ...@@ -360,7 +360,27 @@ aside {
360 border-radius: 16px; 360 border-radius: 16px;
361 color: #0097FF; 361 color: #0097FF;
362 } 362 }
363 363 .configurationbtnColor {
364 width: 64px;
365 height: 28px;
366 background: rgba(255, 255, 255, 0.1);
367 border-radius: 16px;
368 color: #04c0a7;
369 }
370 .resetbtnColor {
371 width: 64px;
372 height: 28px;
373 background: rgba(255, 255, 255, 0.1);
374 border-radius: 16px;
375 color: #04c0a7;
376 }
377 .movebtnColor {
378 width: 64px;
379 height: 28px;
380 background: rgba(255, 255, 255, 0.1);
381 border-radius: 16px;
382 color: #0097FF;
383 }
364 .successColor:hover { 384 .successColor:hover {
365 width: 64px; 385 width: 64px;
366 height: 28px; 386 height: 28px;
...@@ -472,4 +492,4 @@ aside { ...@@ -472,4 +492,4 @@ aside {
472 @font-face { 492 @font-face {
473 font-family: AliBold; 493 font-family: AliBold;
474 src: url('../image/font/Alibaba_PuHuiTi_2.0_55_Regular_85_Bold.ttf') 494 src: url('../image/font/Alibaba_PuHuiTi_2.0_55_Regular_85_Bold.ttf')
475 }
...\ No newline at end of file ...\ No newline at end of file
495 }
......
...@@ -444,4 +444,4 @@ ...@@ -444,4 +444,4 @@
444 } 444 }
445 } 445 }
446 } 446 }
447 }
...\ No newline at end of file ...\ No newline at end of file
447 }
......
...@@ -19,157 +19,160 @@ ...@@ -19,157 +19,160 @@
19 </template> 19 </template>
20 20
21 <script> 21 <script>
22 import columnarsmat from "@/components/Echart/Columnarsmat"; 22 import columnarsmat from "@/components/Echart/Columnarsmat";
23 import Rose from "@/components/Echart/Rose"; 23 import Rose from "@/components/Echart/Rose";
24 import work from "@/api/work"; 24 import work from "@/api/work";
25 export default { 25 export default {
26 data () { 26 data () {
27 return { 27 return {
28 config: { 28 config: {
29 headerBGC: '#016AC5', 29 headerBGC: '#016AC5',
30 oddRowBGC: '#154295', 30 oddRowBGC: '#154295',
31 evenRowBGC: '#154295', 31 evenRowBGC: '#154295',
32 header: ['序号', '业务名称', '登记业务量'], 32 header: ['序号', '业务名称', '登记业务量'],
33 columnWidth: [120, 270, 140], 33 columnWidth: [120, 270, 140],
34 data: [], 34 data: [],
35 key: 0 35 key: 0
36 }
36 } 37 }
37 } 38 },
38 }, 39 components: { columnarsmat, Rose },
39 components: { columnarsmat, Rose }, 40 mounted () {
40 mounted () {
41 this.getdjywltotal();
42 window.addEventListener("resize", () => {
43 this.cdata.seriesData = [];
44 this.getdjywltotal(); 41 this.getdjywltotal();
45 }); 42 window.addEventListener("resize", () => {
46 // scroll(tableref.value.$refs.bodyWrapper);//设置滚动 43 this.cdata.seriesData = [];
47 }, 44 this.getdjywltotal();
48 methods: { 45 window.addEventListener("resize", () => {
49 // 获取登记业务量玫瑰图数据 46 this.getdjywltotal();
50 async getdjywltotal () {
51 try {
52 let p = {
53 DJLX: "",
54 QLLX: "",
55 XZQDM: "",
56 };
57
58 let res = await work.getdjywltotal(p);
59 res.result.map((item, index) => {
60 this.config.data.push([index, item.AREACODE, item.ywtotal])
61
62 }); 47 });
48 // scroll(tableref.value.$refs.bodyWrapper);//设置滚动
49 })
50 },
51 methods: {
52 // 获取登记业务量玫瑰图数据
53 async getdjywltotal () {
54 try {
55 let p = {
56 DJLX: "",
57 QLLX: "",
58 XZQDM: "",
59 };
63 60
64 // 遍历修改数组键,作为echars图表的参数 61 let res = await work.getdjywltotal(p);
62 res.result.map((item, index) => {
63 this.config.data.push([index, item.AREACODE, item.ywtotal])
65 64
65 });
66 66
67 } catch (error) { 67 // 遍历修改数组键,作为echars图表的参数
68 console.log(error); 68
69 } 69
70 } catch (error) {
71 console.log(error);
72 }
70 73
74 },
71 }, 75 },
72 }, 76 }
73 }
74 </script> 77 </script>
75 <style lang="scss" scoped> 78 <style lang="scss" scoped>
76 /deep/.row-item:not(:last-child) { 79 /deep/.row-item:not(:last-child) {
77 margin-bottom: 0.026rem; 80 margin-bottom: 0.026rem;
78 }
79
80 .rightcard {
81 width: 30%;
82 display: flex;
83 height: calc(100vh - 114px);
84 flex-direction: column;
85
86 .cardhead {
87 font-size: 0.1042rem;
88 font-weight: bold;
89 color: #02d9fd;
90 text-align: center;
91 position: absolute;
92 left: 0;
93 right: 0;
94 top: 0.0625rem;
95 text-align: center;
96 } 81 }
97 82
98 .cardcontent { 83 .rightcard {
99 width: 100%; 84 width: 30%;
100 height: 100%; 85 display: flex;
101 display: -webkit-box; 86 height: calc(100vh - 114px);
102 overflow: hidden; 87 flex-direction: column;
103 88
104 .nodata { 89 .cardhead {
105 font-size: 0.1042rem; 90 font-size: 0.1042rem;
106 color: #02d9fd;
107 font-weight: bold; 91 font-weight: bold;
108 margin: auto; 92 color: #02d9fd;
109 margin-top: 120px; 93 text-align: center;
94 position: absolute;
95 left: 0;
96 right: 0;
97 top: 0.0625rem;
98 text-align: center;
110 } 99 }
111 }
112
113 .cardCon {
114 padding: 0.0521rem 0.026rem;
115 position: relative;
116 text-align: center;
117 width: 100%;
118 }
119 100
120 .card1 { 101 .cardcontent {
121 height: 33%; 102 width: 100%;
122 background: url("~@/image/xjgyfwxx.png") no-repeat; 103 height: 100%;
123 background-size: 100% 100%; 104 display: -webkit-box;
124 105 overflow: hidden;
125 /deep/.dv-scroll-board { 106
126 .header { 107 .nodata {
127 height: 0.1875rem; 108 font-size: 0.1042rem;
128 align-items: center; 109 color: #02d9fd;
110 font-weight: bold;
111 margin: auto;
112 margin-top: 120px;
129 } 113 }
130 } 114 }
131 115
132 .board { 116 .cardCon {
133 width: 90%; 117 padding: 0.0521rem 0.026rem;
134 margin: 0 auto; 118 position: relative;
135 height: 1.1031rem; 119 text-align: center;
136 margin-top: 0.0521rem; 120 width: 100%;
121 }
122
123 .card1 {
124 height: 33%;
125 background: url("~@/image/xjgyfwxx.png") no-repeat;
126 background-size: 100% 100%;
137 127
138 /deep/.header { 128 /deep/.dv-scroll-board {
139 font-size: 0.0738rem; 129 .header {
130 height: 0.1875rem;
131 align-items: center;
132 }
140 } 133 }
141 134
142 /deep/.rows { 135 .board {
143 .ceil { 136 width: 90%;
137 margin: 0 auto;
138 height: 1.1031rem;
139 margin-top: 0.0521rem;
140
141 /deep/.header {
144 font-size: 0.0738rem; 142 font-size: 0.0738rem;
145 color: #6bc1fc; 143 }
144
145 /deep/.rows {
146 .ceil {
147 font-size: 0.0738rem;
148 color: #6bc1fc;
149 }
146 } 150 }
147 } 151 }
148 } 152 }
149 }
150 153
151 .card2 { 154 .card2 {
152 height: 33%; 155 height: 33%;
153 background: url("~@/image/djywl.png") no-repeat; 156 background: url("~@/image/djywl.png") no-repeat;
154 background-size: 100% 100%; 157 background-size: 100% 100%;
155 padding: 0.3825rem 0 0 0; 158 padding: 0.3825rem 0 0 0;
156 overflow: hidden; 159 overflow: hidden;
157 } 160 }
158 161
159 .card3 { 162 .card3 {
160 height: 33%; 163 height: 33%;
161 flex: 1; 164 flex: 1;
162 background: url("~@/image/djlxzl.png") no-repeat; 165 background: url("~@/image/djlxzl.png") no-repeat;
163 background-size: 100% 100%; 166 background-size: 100% 100%;
164 padding-bottom: 0; 167 padding-bottom: 0;
165 168
166 .cardhead { 169 .cardhead {
167 top: 0.0417rem; 170 top: 0.0417rem;
171 }
168 } 172 }
169 }
170 173
171 .cardhead { 174 .cardhead {
172 position: absolute; 175 position: absolute;
176 }
173 } 177 }
174 }
175 </style> 178 </style>
......
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
35 </el-form-item> 35 </el-form-item>
36 </el-form> 36 </el-form>
37 <div class="bottom-wrapper"> 37 <div class="bottom-wrapper">
38 <el-button type="primary" @click="updateInfo">更新信息</el-button> 38 <btn nativeType="cx" type="primary" @click="updateInfo">更新信息</btn>
39 </div> 39 </div>
40 </div> 40 </div>
41 </div> 41 </div>
......
1 <!-- 1 <!--
2 * @Author: xiaomiao 1158771342@qq.com 2 * @Author: xiaomiao 1158771342@qq.com
3 * @Date: 2023-03-08 15:30:43 3 * @Date: 2023-03-09 20:54:28
4 * @LastEditors: yangwei 4 * @LastEditors: xiaomiao 1158771342@qq.com
5 * @LastEditTime: 2023-03-13 17:19:46 5 * @LastEditTime: 2023-03-15 15:45:01
6 * @FilePath: \bdcjg-web\src\views\system\information\index.vue 6 * @FilePath: \上报\bdcjg-web\src\views\system\information\index.vue
7 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE 7 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
8 --> 8 -->
9 <template> 9 <template>
...@@ -14,19 +14,13 @@ ...@@ -14,19 +14,13 @@
14 <Breadcrumb /> 14 <Breadcrumb />
15 </el-form-item> 15 </el-form-item>
16 <el-row class="mb-5"> 16 <el-row class="mb-5">
17 <el-col :span="3" class="btnColRight"> 17 <el-col :span="4" class="btnColRight">
18 <!-- <btn nativeType="cx" @click="information" 18 <btn nativeType="cx" type="primary" @click="information">
19 >基本信息</btn
20 >
21 <btn nativeType="cx" :class="isshow ? '' : ''" @click="password"
22 >修改密码</btn
23 > -->
24 <button @click="information" :class="isshow ? 'button choosed' : 'button'">
25 基本信息 19 基本信息
26 </button> 20 </btn>
27 <button @click="password" :class="isshow ? 'button' : 'button choosed'"> 21 <btn nativeType="cz" @click="password">
28 修改密码 22 修改密码
29 </button> 23 </btn>
30 </el-col> 24 </el-col>
31 </el-row> 25 </el-row>
32 </el-form> 26 </el-form>
...@@ -40,69 +34,68 @@ ...@@ -40,69 +34,68 @@
40 </div> 34 </div>
41 </template> 35 </template>
42 <script> 36 <script>
43 import "@/utils/flexible.js"; 37 import "@/utils/flexible.js";
44 import BaseSet from "./base-set.vue"; 38 import BaseSet from "./base-set.vue";
45 import PasswordEdit from "./password-edit.vue"; 39 import PasswordEdit from "./password-edit.vue";
46 export default { 40 export default {
47 components: { 41 components: {
48 BaseSet, 42 BaseSet,
49 PasswordEdit, 43 PasswordEdit,
50 },
51 data() {
52 return {
53 isshow: true,
54 };
55 },
56 computed: {
57 userData() {
58 return this.$store.state.user.userInfo;
59 }, 44 },
60 }, 45 data () {
61 watch: {}, 46 return {
62 created() {}, 47 isshow: true,
63 mounted() {}, 48 };
64 methods: {
65 information() {
66 this.isshow = true;
67 }, 49 },
68 password() { 50 computed: {
69 this.isshow = false; 51 userData () {
52 return this.$store.state.user.userInfo;
53 },
70 }, 54 },
71 }, 55 watch: {},
72 }; 56 created () { },
57 mounted () { },
58 methods: {
59 information () {
60 this.isshow = true;
61 },
62 password () {
63 this.isshow = false;
64 },
65 },
66 };
73 </script> 67 </script>
74 68
75 <style scoped lang="scss"> 69 <style scoped lang="scss">
76 @import "~@/styles/mixin.scss"; 70 @import "~@/styles/mixin.scss";
77 @import "~@/styles/public.scss"; 71 @import "~@/styles/public.scss";
78 .information { 72 .information {
79 display: flex; 73 display: flex;
80 flex-direction: column; 74 flex-direction: column;
81 .btnColRight { 75 .btnColRight {
82 .button { 76 // background-color: cadetblue;
83 width: 76px; 77 height: 60px;
84 height: 32px; 78 .button:nth-child(1) {
85 color: #ffffff; 79 position: absolute;
86 margin: 0 5px; 80 left: 30px;
87 cursor: pointer; 81 top: 20px;
88 border: 0; 82 }
89 background: url('../../../image/btn.png') no-repeat 0 0; 83 .button:nth-child(2) {
90 background-size: cover; 84 position: absolute;
91 } 85 top: 20px;
92 .choosed{ 86 left: 120px;
93 background: url('../../../image/btn.png') no-repeat 0 -34px; 87 }
94 } 88 }
95 } 89 /deep/.content {
96 /deep/.content { 90 .el-input__inner {
97 .el-input__inner { 91 background: none;
98 background: none; 92 }
93 .user-info {
94 background: none;
95 }
99 } 96 }
100 .user-info { 97 .boxin {
101 background: none; 98 flex: 1;
102 } 99 }
103 } 100 }
104 .boxin {
105 flex: 1;
106 }
107 }
108 </style> 101 </style>
......
...@@ -6,135 +6,131 @@ ...@@ -6,135 +6,131 @@
6 label-width="100px" 6 label-width="100px"
7 :model="form" 7 :model="form"
8 class="form-wrapper" 8 class="form-wrapper"
9 :rules="rules" 9 :rules="rules">
10 >
11 <el-form-item label="旧密码:" prop="oldPassword"> 10 <el-form-item label="旧密码:" prop="oldPassword">
12 <el-input 11 <el-input
13 v-model="form.oldPassword" 12 v-model="form.oldPassword"
14 clearable 13 clearable
15 type="password" 14 type="password"
16 show-password 15 show-password />
17 />
18 </el-form-item> 16 </el-form-item>
19 <el-form-item label="新密码:" prop="newPassword"> 17 <el-form-item label="新密码:" prop="newPassword">
20 <el-input 18 <el-input
21 v-model="form.newPassword" 19 v-model="form.newPassword"
22 clearable 20 clearable
23 type="password" 21 type="password"
24 show-password 22 show-password />
25 />
26 </el-form-item> 23 </el-form-item>
27 <el-form-item label="确认密码:" prop="confirmPassword"> 24 <el-form-item label="确认密码:" prop="confirmPassword">
28 <el-input 25 <el-input
29 v-model="form.confirmPassword" 26 v-model="form.confirmPassword"
30 clearable 27 clearable
31 type="password" 28 type="password"
32 show-password 29 show-password />
33 />
34 </el-form-item> 30 </el-form-item>
35 </el-form> 31 </el-form>
36 <div class="bottom-wrapper"> 32 <div class="bottom-wrapper">
37 <el-button type="primary" @click="updatePassword">确认修改</el-button> 33 <btn nativeType="cx" type="primary" @click="updatePassword">确认修改</btn>
38 </div> 34 </div>
39 </div> 35 </div>
40 </div> 36 </div>
41 </template> 37 </template>
42 38
43 <script> 39 <script>
44 import { updateUserPassword } from "@/api/personnelManage"; 40 import { updateUserPassword } from "@/api/personnelManage";
45 export default { 41 export default {
46 props: { 42 props: {
47 userInfo: { 43 userInfo: {
48 type: Object, 44 type: Object,
49 default: null, 45 default: null,
50 },
51 },
52 data() {
53 return {
54 form: {},
55 sexList: [],
56 userId: "",
57 rules: {
58 oldPassword: [
59 { required: true, message: "旧密码不能为空", trigger: "blur" },
60 ],
61 newPassword: [
62 { required: true, message: "新密码不能为空", trigger: "blur" },
63 ],
64 confirmPassword: [
65 { required: true, message: "确认密码不能为空", trigger: "blur" },
66 { validator: this.validatorConfirmPassword, trigger: "blur" },
67 ],
68 },
69 };
70 },
71 computed: {},
72 watch: {
73 userInfo: {
74 handler: function (val) {
75 if (val) {
76 this.getid(val);
77 }
78 }, 46 },
79 }, 47 },
80 }, 48 data () {
81 mounted() { 49 return {
82 if (this.userInfo) { 50 form: {},
83 this.getid(this.userInfo); 51 sexList: [],
84 } 52 userId: "",
85 }, 53 rules: {
86 methods: { 54 oldPassword: [
87 getid(val) { 55 { required: true, message: "旧密码不能为空", trigger: "blur" },
88 this.userId = val.id; 56 ],
57 newPassword: [
58 { required: true, message: "新密码不能为空", trigger: "blur" },
59 ],
60 confirmPassword: [
61 { required: true, message: "确认密码不能为空", trigger: "blur" },
62 { validator: this.validatorConfirmPassword, trigger: "blur" },
63 ],
64 },
65 };
89 }, 66 },
90 validatorConfirmPassword(rule, value, callback) { 67 computed: {},
91 const { newPassword } = this.form; 68 watch: {
92 if (value !== newPassword) { 69 userInfo: {
93 callback("两次输入密码不一致"); 70 handler: function (val) {
94 } else { 71 if (val) {
95 callback(); 72 this.getid(val);
73 }
74 },
75 },
76 },
77 mounted () {
78 if (this.userInfo) {
79 this.getid(this.userInfo);
96 } 80 }
97 }, 81 },
98 updatePassword() { 82 methods: {
99 this.$refs.form.validate((valid) => { 83 getid (val) {
100 if (valid) { 84 this.userId = val.id;
101 const params = Object.assign({}, this.form, { id: this.userId }); 85 },
102 updateUserPassword(params).then((res) => { 86 validatorConfirmPassword (rule, value, callback) {
103 if (res.status === 1) { 87 const { newPassword } = this.form;
104 this.$message.success({ message: res.message, showClose: true }); 88 if (value !== newPassword) {
105 } else { 89 callback("两次输入密码不一致");
106 this.$message.error({ message: res.message, showClose: true }); 90 } else {
107 } 91 callback();
108 });
109 } 92 }
110 }); 93 },
94 updatePassword () {
95 this.$refs.form.validate((valid) => {
96 if (valid) {
97 const params = Object.assign({}, this.form, { id: this.userId });
98 updateUserPassword(params).then((res) => {
99 if (res.status === 1) {
100 this.$message.success({ message: res.message, showClose: true });
101 } else {
102 this.$message.error({ message: res.message, showClose: true });
103 }
104 });
105 }
106 });
107 },
111 }, 108 },
112 }, 109 };
113 };
114 </script> 110 </script>
115 111
116 <style scoped lang="scss"> 112 <style scoped lang="scss">
117 .user-info { 113 .user-info {
118 margin: 36px 200px; 114 margin: 36px 200px;
119 overflow-y: auto; 115 overflow-y: auto;
120 .form-wrapper { 116 .form-wrapper {
121 padding: 24px 120px 0px; 117 padding: 24px 120px 0px;
122 /deep/.el-form-item { 118 /deep/.el-form-item {
123 margin-bottom: 24px; 119 margin-bottom: 24px;
124 .el-form-item__label { 120 .el-form-item__label {
125 color: #ffffff; 121 color: #ffffff;
126 } 122 }
127 .el-input .el-input__inner { 123 .el-input .el-input__inner {
128 padding: 0 8px; 124 padding: 0 8px;
129 height: 40px; 125 height: 40px;
130 line-height: 40px; 126 line-height: 40px;
131 border: 1px solid #6bc1fc; 127 border: 1px solid #6bc1fc;
128 }
132 } 129 }
133 } 130 }
131 .bottom-wrapper {
132 padding: 32px 120px 24px;
133 text-align: center;
134 }
134 } 135 }
135 .bottom-wrapper {
136 padding: 32px 120px 24px;
137 text-align: center;
138 }
139 }
140 </style> 136 </style>
......
1 <template> 1 <template>
2 <dialogBox class="modifydialog" :isMain="true" :title="2222" @closeDialog="close" @submitForm="submitForm" 2 <dialogBox class="modifydialog" :isMain="true" width="40%" :title="title" @closeDialog="close" @submitForm="submitForm"
3 v-model="myValue"> 3 v-model="myValue">
4 <div class="dialogCon"> 4 <div class="dialogCon">
5 <el-form ref="form" :model="form" :rules="rules"> 5 <el-form ref="form" :model="form" :rules="rules">
...@@ -19,15 +19,15 @@ ...@@ -19,15 +19,15 @@
19 </el-col> 19 </el-col>
20 20
21 </el-row> 21 </el-row>
22 <el-row :gutter="24"> 22 <el-row :gutter="23">
23 <el-col :span="24"> 23 <el-col :span="23">
24 <el-form-item label="代码:" prop="code" label-width="124px"> 24 <el-form-item label="代码:" prop="code" label-width="124px">
25 <el-input v-model="codeComputed" placeholder="请输入菜单代码" :disabled="type === 1" /> 25 <el-input v-model="codeComputed" placeholder="请输入菜单代码" :disabled="type === 1" />
26 </el-form-item> 26 </el-form-item>
27 </el-col> 27 </el-col>
28 </el-row> 28 </el-row>
29 <el-row :gutter="24"> 29 <el-row :gutter="23">
30 <el-col :span="24"> 30 <el-col :span="23">
31 <el-form-item label="链接路径:" label-width="124px"> 31 <el-form-item label="链接路径:" label-width="124px">
32 <el-input v-model="form.uri" placeholder="请输入链接路径" /> 32 <el-input v-model="form.uri" placeholder="请输入链接路径" />
33 </el-form-item> 33 </el-form-item>
...@@ -56,170 +56,197 @@ ...@@ -56,170 +56,197 @@
56 </template> 56 </template>
57 57
58 <script> 58 <script>
59 import { getParentMenuListAction } from '@/api/authorityManage' 59 import { getParentMenuListAction } from '@/api/authorityManage'
60 import JsonEditor from '@/components/JsonEditors' 60 import JsonEditor from '@/components/JsonEditors'
61 import { validateCode } from '@/utils/validate'; 61 import { validateCode } from '@/utils/validate';
62 import { api, httpAction } from '@/api/manageApi' 62 import { api, httpAction } from '@/api/manageApi'
63 export default { 63 export default {
64 name: 'MenuModal', 64 name: 'MenuModal',
65 components: { 65 components: {
66 JsonEditor, 66 JsonEditor,
67 },
68 props: {
69 value: { type: Boolean, default: false },
70 productId: {
71 type: String,
72 default: ''
73 }
74 },
75 data () {
76 return {
77 myValue: this.value,
78 form: {
79 icon: '',
80 code: ''
81 },
82 rules: {
83 name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
84 code: [
85 { required: true, message: '必填', trigger: 'blur' },
86 { validator: validateCode, trigger: 'blur' }
87 ]
88 },
89 title: '',
90 type: '',
91 visible: false,
92 parentMenuList: [],
93 menuKey: 0,
94 jumpModeList: [
95 { name: '在当前页面显示', value: 1 },
96 { name: '跳转到新页面', value: 2 }
97 ],
98 setProps: {
99 value: 'id',
100 label: 'name',
101 children: 'children',
102 expandTrigger: 'hover',
103 checkStrictly: true, // 可取消关联,选择任意一级选项
104 emitPath: false
105 },
106 dataUrl: api.menus
107 }
108 },
109 computed: {
110 codeComputed: {
111 get: function () {
112 return this.form.code
113 },
114 set: function (val) {
115 this.form.code = val.toUpperCase()
116 }
117 }
118 },
119 watch: {
120 value (val) {
121 this.myValue = val
122 }
123 },
124 methods: {
125 // 获取父级菜单
126 getParentMenuList (id) {
127
128 getParentMenuListAction(id).then((res) => {
129 if (res.status === 1) {
130 const list = this.$dealArrChildren(res.content)
131 if (id) {
132 this.parentMenuList = this.$dealArrDisabled(
133 this.$deepCopy(list),
134 id
135 )
136 this.menuKey++
137 } else {
138 this.parentMenuList = list
139 }
140 } else {
141 this.$message.error({ message: res.message, showClose: true })
142 }
143 })
144 },
145 getIconList () {
146 this.$refs.iconList.show(true)
147 }, 67 },
148 getIconName (data) { 68 props: {
149 this.form.icon = data 69 value: { type: Boolean, default: false },
150 }, 70 productId: {
151 // 配置参数 71 type: String,
152 getJsonString (data) { 72 default: ''
153 this.form.metadata = data 73 }
154 }, 74 },
155 // 新增菜单 75 data () {
156 add () { 76 return {
157 this.getParentMenuList(this.productId) 77 myValue: this.value,
158 this.type = 0 78 form: {
159 this.form.jumpMode = 1 79 icon: '',
80 code: ''
81 },
82 rules: {
83 name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
84 code: [
85 { required: true, message: '必填', trigger: 'blur' },
86 { validator: validateCode, trigger: 'blur' }
87 ]
88 },
89 title: '',
90 type: '',
91 visible: false,
92 parentMenuList: [],
93 menuKey: 0,
94 jumpModeList: [
95 { name: '在当前页面显示', value: 1 },
96 { name: '跳转到新页面', value: 2 }
97 ],
98 setProps: {
99 value: 'id',
100 label: 'name',
101 children: 'children',
102 expandTrigger: 'hover',
103 checkStrictly: true, // 可取消关联,选择任意一级选项
104 emitPath: false
105 },
106 dataUrl: api.menus
107 }
160 }, 108 },
161 // 编辑菜单 109 computed: {
162 edit (record) { 110 codeComputed: {
163 this.type = 1 111 get: function () {
164 // 若有id为编辑 112 return this.form.code
165 if (record.id) { 113 },
166 this.$nextTick(() => { 114 set: function (val) {
167 this.form = Object.assign({}, record) 115 this.form.code = val.toUpperCase()
168 this.getParentMenuList(this.productId) 116 }
169 })
170 } 117 }
171 }, 118 },
172 // 选择上级菜单 119 watch: {
173 handleChange (value) { 120 value (val) {
174 this.form.parentId = value 121 this.myValue = val
122 }
175 }, 123 },
176 // 保存 124 methods: {
177 submitForm (submitType) { 125 // 获取父级菜单
178 this.$refs.form.validate((valid) => { 126 getParentMenuList (id) {
179 if (valid) { 127
180 let method = '' 128 getParentMenuListAction(id).then((res) => {
181 let url = '' 129 if (res.status === 1) {
182 const formData = this.form 130 const list = this.$dealArrChildren(res.content)
183 formData.productId = this.productId 131 if (id) {
184 if (!formData.id) { 132 this.parentMenuList = this.$dealArrDisabled(
185 method = 'post' 133 this.$deepCopy(list),
186 url = this.dataUrl 134 id
135 )
136 this.menuKey++
137 } else {
138 this.parentMenuList = list
139 }
187 } else { 140 } else {
188 method = 'put' 141 this.$message.error({ message: res.message, showClose: true })
189 url = `${this.dataUrl}/${formData.id}`
190 } 142 }
191 debugger 143 })
192 httpAction(url, formData, method) 144 },
193 .then((res) => { 145 getIconList () {
194 if (res.status === 1) { 146 this.$refs.iconList.show(true)
195 this.$message.success({ 147 },
196 message: res.message, 148 getIconName (data) {
197 showClose: true 149 this.form.icon = data
198 }) 150 },
151 // 配置参数
152 getJsonString (data) {
153 this.form.metadata = data
154 },
155 // 新增菜单
156 add () {
157 this.getParentMenuList(this.productId)
158 this.type = 0
159 this.form.jumpMode = 1
160 },
161 // 编辑菜单
162 edit (record) {
163 this.type = 1
164 // 若有id为编辑
165 if (record.id) {
166 this.$nextTick(() => {
167 this.form = Object.assign({}, record)
168 this.getParentMenuList(this.productId)
169 })
170 }
171 },
172 // 选择上级菜单
173 handleChange (value) {
174 this.form.parentId = value
175 },
176 // 保存
177 submitForm (submitType) {
178 this.$refs.form.validate((valid) => {
179 if (valid) {
180 let method = ''
181 let url = ''
182 const formData = this.form
183 formData.productId = this.productId
184 if (!formData.id) {
185 method = 'post'
186 url = this.dataUrl
187 } else {
188 method = 'put'
189 url = `${this.dataUrl}/${formData.id}`
190 }
191 debugger
192 httpAction(url, formData, method)
193 .then((res) => {
194 if (res.status === 1) {
195 this.$message.success({
196 message: res.message,
197 showClose: true
198 })
199 199
200 this.resetForm() 200 this.resetForm()
201 this.$emit('ok') 201 this.$emit('ok')
202 } else { 202 } else {
203 this.$message.error({ message: res.message, showClose: true }) 203 this.$message.error({ message: res.message, showClose: true })
204 } 204 }
205 }) 205 })
206 .catch((err) => { 206 .catch((err) => {
207 console.log(err) 207 console.log(err)
208 }) 208 })
209 }
210 })
211 },
212 resetForm () {
213 this.$refs.form.resetFields()
214 this.form = {
215 icon: '',
216 code: ''
209 } 217 }
210 }) 218 },
211 }, 219 close () {
212 resetForm () { 220 this.resetForm()
213 this.$refs.form.resetFields() 221 this.$emit('input', false)
214 this.form = {
215 icon: '',
216 code: ''
217 } 222 }
218 },
219 close () {
220 this.resetForm()
221 this.$emit('input', false)
222 } 223 }
223 } 224 }
224 }
225 </script> 225 </script>
226 <style scoped lang="scss">
227 .modifydialog {
228 &-con {
229 background: #031a46;
230 }
231 /deep/.el-dialog__header {
232 .dialog_title {
233 display: -webkit-box;
234 display: -ms-flexbox;
235 display: flex;
236 position: relative;
237 top: -8px;
238 width: 28%;
239 height: 40px;
240 margin-left: 28px;
241 -webkit-box-pack: center;
242 -ms-flex-pack: center;
243 justify-content: center;
244 white-space: nowrap;
245 b {
246 font-size: 16px;
247 font-weight: 600;
248 }
249 }
250 }
251 }
252 </style>
......
1 <!-- 新增 & 修改角色 --> 1 <!-- 新增 & 修改角色 -->
2 <template> 2 <template>
3 <Dialog 3 <dialogBox
4 class="modifydialog" 4 class="modifydialog"
5 :title="dialogTitle" 5 :title="title"
6 :show.sync="showAddEditDialog" 6 :width="'567px'"
7 :width="'767px'" 7 :isMain="true"
8 @close="handleCloseDialog()"> 8 @closeDialog="close"
9 <template slot="content"> 9 @submitForm="submitForm"
10 v-model="myValue">
11 <div class="dialogCon">
10 <el-form ref="form" :model="dialogForm" :rules="rules" label-width="82px"> 12 <el-form ref="form" :model="dialogForm" :rules="rules" label-width="82px">
11 <el-row :gutter="24"> 13 <el-row :gutter="24">
12 <el-col :span="15"> 14 <el-col :span="23">
13 <el-form-item label="角色名称:" prop="roleName"> 15 <el-form-item label="角色名称:" prop="roleName">
14 <el-input 16 <el-input
15 v-model="dialogForm.roleName" 17 v-model="dialogForm.roleName"
...@@ -19,18 +21,20 @@ ...@@ -19,18 +21,20 @@
19 </el-col> 21 </el-col>
20 </el-row> 22 </el-row>
21 <el-row> 23 <el-row>
22 <el-col :span="24"> 24 <el-col :span="23">
23 <el-form-item label="备注:" class="form-item-mb0"> 25 <el-form-item label="备注:" class="form-item-mb0">
24 <el-input 26 <el-input
25 v-model="dialogForm.roleTextArea" 27 v-model="dialogForm.roleTextArea"
28 clearable
29 :rows="10"
26 type="textarea" 30 type="textarea"
27 placeholder="备注" /> 31 placeholder="备注" />
28 </el-form-item> 32 </el-form-item>
29 </el-col> 33 </el-col>
30 </el-row> 34 </el-row>
31 </el-form> 35 </el-form>
32 </template> 36 </div>
33 <template slot="footer"> 37 <!-- <template slot="footer">
34 <el-button 38 <el-button
35 class="cancel-button" 39 class="cancel-button"
36 @click="handleCloseDialog">取消</el-button> 40 @click="handleCloseDialog">取消</el-button>
...@@ -38,8 +42,8 @@ ...@@ -38,8 +42,8 @@
38 <el-button 42 <el-button
39 type="primary" 43 type="primary"
40 @click="handleSaveRole()">保存</el-button> 44 @click="handleSaveRole()">保存</el-button>
41 </template> 45 </template> -->
42 </Dialog> 46 </dialogBox>
43 </template> 47 </template>
44 48
45 <script> 49 <script>
...@@ -49,9 +53,13 @@ ...@@ -49,9 +53,13 @@
49 components: { 53 components: {
50 Dialog 54 Dialog
51 }, 55 },
56 props: {
57 value: { type: Boolean, default: false },
58 },
52 data () { 59 data () {
53 return { 60 return {
54 dialogTitle: '', 61 myValue: this.value,
62 title: '',
55 showAddEditDialog: false, 63 showAddEditDialog: false,
56 menuType: '', 64 menuType: '',
57 roleId: '', 65 roleId: '',
...@@ -72,9 +80,14 @@ ...@@ -72,9 +80,14 @@
72 ] 80 ]
73 } 81 }
74 }, 82 },
83 watch: {
84 value (val) {
85 this.myValue = val
86 }
87 },
75 methods: { 88 methods: {
76 // 保存新增或关闭事件 89 // 保存新增或关闭事件
77 handleSaveRole (val) { 90 submitForm () {
78 this.$refs.form.validate((valid) => { 91 this.$refs.form.validate((valid) => {
79 if (valid) { 92 if (valid) {
80 try { 93 try {
...@@ -97,8 +110,8 @@ ...@@ -97,8 +110,8 @@
97 this.dialogForm = { 110 this.dialogForm = {
98 roleName: '', 111 roleName: '',
99 } 112 }
100 this.showAddEditDialog = val 113 // this.showAddEditDialog = val
101 this.$emit('ok', this.menuType) 114 this.$emit('ok')
102 } else { 115 } else {
103 this.$message.error({ 116 this.$message.error({
104 message: res.message, 117 message: res.message,
...@@ -114,10 +127,10 @@ ...@@ -114,10 +127,10 @@
114 message: '新增成功', 127 message: '新增成功',
115 showClose: true 128 showClose: true
116 }) 129 })
117 this.dialogForm = { 130 this.close()
118 roleName: '', 131
119 } 132 this.$emit('ok')
120 this.showAddEditDialog = val 133 // this.showAddEditDialog = val
121 this.$emit('ok', this.menuType) 134 this.$emit('ok', this.menuType)
122 } else { 135 } else {
123 this.$message.error({ 136 this.$message.error({
...@@ -133,16 +146,40 @@ ...@@ -133,16 +146,40 @@
133 } 146 }
134 }) 147 })
135 }, 148 },
136 // 取消事件 149 resetForm () {
137 handleCloseDialog () {
138 this.$refs.form.resetFields()
139 this.dialogForm = { 150 this.dialogForm = {
140 roleName: '', 151 roleName: '',
141 } 152 }
142 this.showAddEditDialog = false 153 this.$refs.form.resetFields()
154 },
155 close () {
156 this.resetForm()
157 this.$emit('input', false)
143 } 158 }
144 } 159 }
145 } 160 }
146 </script> 161 </script>
147 <style scoped lang="scss"> 162 <style scoped lang="scss">
163 .modifydialog {
164 /deep/.el-dialog__header {
165 .dialog_title {
166 display: -webkit-box;
167 display: -ms-flexbox;
168 display: flex;
169 position: relative;
170 top: -8px;
171 width: 24%;
172 height: 40px;
173 margin-left: 28px;
174 -webkit-box-pack: center;
175 -ms-flex-pack: center;
176 justify-content: center;
177 white-space: nowrap;
178 b {
179 font-size: 16px;
180 font-weight: 600;
181 }
182 }
183 }
184 }
148 </style> 185 </style>
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 :column="tableData.columns" :data="listdata" :expand-row-keys="keyList" row-key="dictid"> 17 :column="tableData.columns" :data="listdata" :expand-row-keys="keyList" row-key="dictid">
18 </lb-table> 18 </lb-table>
19 </div> 19 </div>
20 <EditDialog ref="addEditDialog" @ok="reloadTableData" /> 20 <EditDialog ref="addEditDialog" v-model="isDialog" @ok="reloadTableData" />
21 <Roleslistdiglog ref="rolesForm" /> 21 <Roleslistdiglog ref="rolesForm" />
22 </div> 22 </div>
23 </template> 23 </template>
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
38 import EditDialog from "./edit-dialog.vue"; 38 import EditDialog from "./edit-dialog.vue";
39 import Roleslistdiglog from "./roleslistdiglog.vue"; 39 import Roleslistdiglog from "./roleslistdiglog.vue";
40 import { mapGetters } from "vuex"; 40 import { mapGetters } from "vuex";
41 import {updateOrder} from "@/api/orders" 41 import { updateOrder } from "@/api/orders"
42 export default { 42 export default {
43 name: "menus", 43 name: "menus",
44 mixins: [tableMixin], 44 mixins: [tableMixin],
...@@ -48,6 +48,7 @@ ...@@ -48,6 +48,7 @@
48 }, 48 },
49 data () { 49 data () {
50 return { 50 return {
51 isDialog: false,
51 personlist: null, 52 personlist: null,
52 waitMemberList: [], 53 waitMemberList: [],
53 keyList: [], 54 keyList: [],
...@@ -108,42 +109,46 @@ ...@@ -108,42 +109,46 @@
108 .concat([ 109 .concat([
109 { 110 {
110 label: "排序", 111 label: "排序",
111 width: 200, 112 width: 300,
112 render: (h, scope) => { 113 render: (h, scope) => {
113 return ( 114 return (
114 <div> 115 <div>
115 <el-button 116 <el-button
116 type="text" 117 type="text"
118 class='movebtnColor'
117 disabled={scope.row.isTop} 119 disabled={scope.row.isTop}
118 onClick={() => { 120 onClick={() => {
119 this.updateOrder(scope.row,'TOP'); 121 this.updateOrder(scope.row, 'TOP');
120 }} 122 }}
121 > 123 >
122 置顶 124 置顶
123 </el-button> 125 </el-button>
124 <el-button 126 <el-button
125 type="text" 127 type="text"
128 class='movebtnColor'
126 disabled={scope.row.isTop} 129 disabled={scope.row.isTop}
127 onClick={() => { 130 onClick={() => {
128 this.updateOrder(scope.row,'UP'); 131 this.updateOrder(scope.row, 'UP');
129 }} 132 }}
130 > 133 >
131 上移 134 上移
132 </el-button> 135 </el-button>
133 <el-button 136 <el-button
134 type="text" 137 type="text"
138 class='movebtnColor'
135 disabled={scope.row.isBottom} 139 disabled={scope.row.isBottom}
136 onClick={() => { 140 onClick={() => {
137 this.updateOrder(scope.row,'DOWN'); 141 this.updateOrder(scope.row, 'DOWN');
138 }} 142 }}
139 > 143 >
140 下移 144 下移
141 </el-button> 145 </el-button>
142 <el-button 146 <el-button
143 type="text" 147 type="text"
148 class='movebtnColor'
144 disabled={scope.row.isBottom} 149 disabled={scope.row.isBottom}
145 onClick={() => { 150 onClick={() => {
146 this.updateOrder(scope.row,'BOTTOM'); 151 this.updateOrder(scope.row, 'BOTTOM');
147 }} 152 }}
148 > 153 >
149 置底 154 置底
...@@ -172,6 +177,7 @@ ...@@ -172,6 +177,7 @@
172 disabled={scope.row.type === "Everyone"} 177 disabled={scope.row.type === "Everyone"}
173 type="text" 178 type="text"
174 size="mini" 179 size="mini"
180 class="configurationbtnColor"
175 icon="el-icon-video-pause" 181 icon="el-icon-video-pause"
176 onClick={() => { 182 onClick={() => {
177 this.getUserList(scope.row); 183 this.getUserList(scope.row);
...@@ -193,6 +199,7 @@ ...@@ -193,6 +199,7 @@
193 disabled={scope.row.category === 1} 199 disabled={scope.row.category === 1}
194 type="text" 200 type="text"
195 size="mini" 201 size="mini"
202 class='successColor'
196 icon="el-icon-edit" 203 icon="el-icon-edit"
197 onClick={() => { 204 onClick={() => {
198 this.handleAddEdit(scope.row); 205 this.handleAddEdit(scope.row);
...@@ -214,6 +221,7 @@ ...@@ -214,6 +221,7 @@
214 type="text" 221 type="text"
215 disabled={scope.row.category === 1} 222 disabled={scope.row.category === 1}
216 size="mini" 223 size="mini"
224 class='delColor'
217 icon="el-icon-delete" 225 icon="el-icon-delete"
218 // style="color:#F56C6C" 226 // style="color:#F56C6C"
219 onClick={() => { 227 onClick={() => {
...@@ -244,7 +252,7 @@ ...@@ -244,7 +252,7 @@
244 methods: { 252 methods: {
245 // 获取角色列表 253 // 获取角色列表
246 getTableData () { 254 getTableData () {
247 getRolesById([1,2]) 255 getRolesById([1, 2])
248 .then((res) => { 256 .then((res) => {
249 this.listdata = res.content; 257 this.listdata = res.content;
250 this.listdata = judgeSort(this.listdata); 258 this.listdata = judgeSort(this.listdata);
...@@ -394,6 +402,7 @@ ...@@ -394,6 +402,7 @@
394 }, 402 },
395 // 新增、修改角色 403 // 新增、修改角色
396 handleAddEdit (value) { 404 handleAddEdit (value) {
405 this.isDialog = true
397 this.$refs.addEditDialog.menuType = this.menuType; 406 this.$refs.addEditDialog.menuType = this.menuType;
398 this.$refs.addEditDialog.roleId = value.id; 407 this.$refs.addEditDialog.roleId = value.id;
399 this.roleSort = value.sort ? value.sort : 0; 408 this.roleSort = value.sort ? value.sort : 0;
...@@ -404,10 +413,10 @@ ...@@ -404,10 +413,10 @@
404 this.$refs.addEditDialog.dialogForm.roleTextArea = value.description; 413 this.$refs.addEditDialog.dialogForm.roleTextArea = value.description;
405 } 414 }
406 this.$refs.addEditDialog.showAddEditDialog = true; 415 this.$refs.addEditDialog.showAddEditDialog = true;
407 this.$refs.addEditDialog.dialogTitle = value.id ? "修改" : "新增"; 416 this.$refs.addEditDialog.title = value.id ? "修改" : "新增";
408 }, 417 },
409 //排序 418 //排序
410 updateOrder(record, operate){ 419 updateOrder (record, operate) {
411 const findIndex = this.listdata.findIndex(item => item.id === record.id) 420 const findIndex = this.listdata.findIndex(item => item.id === record.id)
412 let swapId = '' 421 let swapId = ''
413 if (operate === 'UP') { 422 if (operate === 'UP') {
...@@ -476,7 +485,17 @@ ...@@ -476,7 +485,17 @@
476 485
477 // @import "~@/styles/public.scss"; 486 // @import "~@/styles/public.scss";
478 .btnColRight { 487 .btnColRight {
479 margin-left: -30px; 488 height: 60px;
480 margin-top: 20px; 489 .button {
490 position: absolute;
491 left: 30px;
492 top: 20px;
493 }
494 }
495 /deep/.el-button.is-disabled.el-button--text {
496 width: 64px;
497 height: 28px;
498 background: rgba(255, 255, 255, 0.1);
499 border-radius: 16px;
481 } 500 }
482 </style> 501 </style>
......
...@@ -37,8 +37,8 @@ ...@@ -37,8 +37,8 @@
37 </lb-table> 37 </lb-table>
38 </div> 38 </div>
39 <template slot="footer"> 39 <template slot="footer">
40 <el-button type="primary" class="save" @click="handleSaveMember()">保存</el-button> 40 <btn nativeType="cx" type="primary" @click="handleSaveMember()">保存</btn>
41 <el-button class="cancel-button" @click="close()">取消</el-button> 41 <btn nativeType="cz" @click="close()">取消</btn>
42 </template> 42 </template>
43 </el-dialog> 43 </el-dialog>
44 </template> 44 </template>
......
1 <template> 1 <template>
2 <dialogBox :title="title" class="modifydialog" @closeDialog="close" :isMain="true" @submitForm="submitForm" 2 <dialogBox :title="title" :width="'867px'" class="modifydialog" @closeDialog="close" :isMain="true" @submitForm="submitForm"
3 v-model="myValue"> 3 v-model="myValue">
4 <div class="dialogCon"> 4 <div class="dialogCon">
5 <el-form ref="form" :model="form" :rules="rules"> 5 <el-form ref="form" :model="form" :rules="rules">
6 <el-row :gutter="24"> 6 <el-row :gutter="24">
7 <el-col :span="11"> 7 <el-col :span="12">
8 <el-form-item label="姓名:" prop="name" label-width="100px"> 8 <el-form-item label="姓名:" prop="name" label-width="100px">
9 <el-input v-model="form.name" placeholder="姓名" /> 9 <el-input v-model="form.name" placeholder="姓名" />
10 </el-form-item> 10 </el-form-item>
11 </el-col> 11 </el-col>
12 <el-col :span="13"> 12 <el-col :span="23">
13 <el-col :span="18" class="col-pd0"> 13 <el-col :span="18" class="col-pd0">
14 <el-form-item label="性别:" label-width="72px"> 14 <el-form-item label="性别:" label-width="88px">
15 <el-radio v-for="(item, index) in sexList" :key="index" v-model="form.sex" :label="item.value">{{ 15 <el-radio v-for="(item, index) in sexList" :key="index" v-model="form.sex" :label="item.value">{{
16 item.name }}</el-radio> 16 item.name }}</el-radio>
17 </el-form-item> 17 </el-form-item>
...@@ -22,38 +22,38 @@ ...@@ -22,38 +22,38 @@
22 </el-col> 22 </el-col>
23 </el-row> 23 </el-row>
24 <el-row :gutter="24"> 24 <el-row :gutter="24">
25 <el-col :span="11"> 25 <el-col :span="12">
26 <el-form-item label="工号:" prop="code" label-width="100px"> 26 <el-form-item label="工号:" prop="code" label-width="100px">
27 <el-input v-model="form.code" placeholder="工号" /> 27 <el-input v-model="form.code" placeholder="工号" />
28 </el-form-item> 28 </el-form-item>
29 </el-col> 29 </el-col>
30 <el-col :span="13"> 30 <el-col :span="12">
31 <el-form-item label="用户名:" prop="loginName" label-width="72px"> 31 <el-form-item label="用户名:" prop="loginName" label-width="72px">
32 <el-input v-model="form.loginName" :disabled="showLoginName" placeholder="用户名" /> 32 <el-input v-model="form.loginName" :disabled="showLoginName" placeholder="用户名" />
33 </el-form-item> 33 </el-form-item>
34 </el-col> 34 </el-col>
35 </el-row> 35 </el-row>
36 <el-row :gutter="24"> 36 <el-row :gutter="24">
37 <el-col :span="11"> 37 <el-col :span="12">
38 <el-form-item label="身份证号码:" label-width="100px"> 38 <el-form-item label="身份证号码:" label-width="100px">
39 <el-input v-model="form.idCard" placeholder="身份证号码" /> 39 <el-input v-model="form.idCard" placeholder="身份证号码" />
40 </el-form-item> 40 </el-form-item>
41 </el-col> 41 </el-col>
42 <el-col :span="13"> 42 <el-col :span="12">
43 <el-form-item label="手机号码:" prop="mobilePhone" label-width="72px"> 43 <el-form-item label="手机号码:" prop="mobilePhone" label-width="72px">
44 <el-input v-model="form.mobilePhone" placeholder="手机号码" /> 44 <el-input v-model="form.mobilePhone" placeholder="手机号码" />
45 </el-form-item> 45 </el-form-item>
46 </el-col> 46 </el-col>
47 </el-row> 47 </el-row>
48 <el-row :gutter="24"> 48 <el-row :gutter="24">
49 <el-col :span="11"> 49 <el-col :span="12">
50 <el-form-item label="最高职务级别:" label-width="100px"> 50 <el-form-item label="最高职务级别:" label-width="100px">
51 <el-select v-model="form.jobLevel" placeholder="最高职务级别"> 51 <el-select v-model="form.jobLevel" placeholder="最高职务级别">
52 <el-option v-for="item in levelList" :key="item.value" :label="item.name" :value="item.value" /> 52 <el-option v-for="item in levelList" :key="item.value" :label="item.name" :value="item.value" />
53 </el-select> 53 </el-select>
54 </el-form-item> 54 </el-form-item>
55 </el-col> 55 </el-col>
56 <el-col :span="13"> 56 <el-col :span="12">
57 <el-form-item label="办公电话:" prop="telephone" label-width="72px"> 57 <el-form-item label="办公电话:" prop="telephone" label-width="72px">
58 <el-input v-model="form.telephone" placeholder="办公电话" /> 58 <el-input v-model="form.telephone" placeholder="办公电话" />
59 </el-form-item> 59 </el-form-item>
...@@ -72,107 +72,128 @@ ...@@ -72,107 +72,128 @@
72 </template> 72 </template>
73 73
74 <script> 74 <script>
75 import { api, httpAction } from '@/api/manageApi' 75 import { api, httpAction } from '@/api/manageApi'
76 export default { 76 export default {
77 name: "", 77 name: "",
78 props: { 78 props: {
79 value: { type: Boolean, default: false }, 79 value: { type: Boolean, default: false },
80 },
81 data () {
82 return {
83 myValue: this.value,
84 form: {
85 sex: "0",
86 },
87 rules: {
88 name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
89 code: [{ required: true, message: "请输入工号", trigger: "blur" }],
90 mobilePhone: [{ validator: "sddd", trigger: "blur" }],
91 loginName: [
92 { required: true, message: "请输入用户名", trigger: "blur" },
93 ],
94 },
95 title: "修改",
96 showLoginName: false,
97 sexList: [{ lable: "0", value: "0", name: "男" }, { lable: "1", value: "1", name: "女" }],
98 levelList: [{ lable: "0", value: "0", name: "干事" }, { lable: "1", value: "1", name: "经理" }],
99 dataUrl: api.users
100 };
101 },
102 computed: {
103 departmentid () {
104 return this.$store.state.user.userInfo;
105 }, 80 },
106 }, 81 data () {
107 watch: { 82 return {
108 value (val) { 83 myValue: this.value,
109 this.myValue = val 84 form: {
110 } 85 sex: "0",
111 }, 86 },
112 methods: { 87 rules: {
113 // 添加人员 88 name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
114 adds () { 89 code: [{ required: true, message: "请输入工号", trigger: "blur" }],
115 this.showLoginName = false 90 mobilePhone: [{ validator: "sddd", trigger: "blur" }],
91 loginName: [
92 { required: true, message: "请输入用户名", trigger: "blur" },
93 ],
94 },
95 title: "",
96 showLoginName: false,
97 sexList: [{ lable: "0", value: "0", name: "男" }, { lable: "1", value: "1", name: "女" }],
98 levelList: [{ lable: "0", value: "0", name: "干事" }, { lable: "1", value: "1", name: "经理" }],
99 dataUrl: api.users
100 };
116 }, 101 },
117 // 编辑 102 computed: {
118 edit (record) { 103 departmentid () {
119 this.showLoginName = true 104 return this.$store.state.user.userInfo;
120 // 若有id为编辑 105 },
121 if (record) {
122 this.$nextTick(() => {
123 this.form = Object.assign({}, record)
124 })
125 }
126 }, 106 },
127 handleChange (value) { 107 watch: {
128 this.form.departmentId = value; 108 value (val) {
109 this.myValue = val
110 }
129 }, 111 },
130 // 保存 112 methods: {
131 submitForm (submitType) { 113 // 添加人员
132 this.$refs.form.validate((valid) => { 114 adds () {
133 if (valid) { 115 this.showLoginName = false
134 let method = '' 116 },
135 let url = '' 117 // 编辑
136 this.form.organizationId = this.departmentid.organizationId; 118 edit (record) {
137 this.form.departmentId = this.departmentid.departmentId; 119 this.showLoginName = true
138 const formData = this.form 120 // 若有id为编辑
139 if (!formData.id) { 121 if (record) {
140 method = 'post' 122 this.$nextTick(() => {
141 url = this.dataUrl 123 this.form = Object.assign({}, record)
142 } else { 124 })
143 method = 'put' 125 }
144 url = `${this.dataUrl}/${formData.id}` 126 },
145 } 127 handleChange (value) {
146 128 this.form.departmentId = value;
147 httpAction(url, formData, method).then((res) => { 129 },
148 if (res.status === 1) { 130 // 保存
149 this.$message.success({ message: res.message, showClose: true }) 131 submitForm () {
132 this.$refs.form.validate((valid) => {
133 if (valid) {
134 let method = ''
135 let url = ''
136 this.form.organizationId = this.departmentid.organizationId;
137 this.form.departmentId = this.departmentid.departmentId;
138 const formData = this.form
139 if (!formData.id) {
140 method = 'post'
141 url = this.dataUrl
142 } else {
143 method = 'put'
144 url = `${this.dataUrl}/${formData.id}`
145 }
150 146
151 this.resetForm() 147 httpAction(url, formData, method).then((res) => {
148 if (res.status === 1) {
149 this.$message.success({ message: res.message, showClose: true })
152 150
153 this.close() 151 this.close()
154 152
155 this.$emit('ok') 153 this.$emit('ok')
156 } else { 154 } else {
157 this.$message.error({ message: res.message, showClose: true }) 155 this.$message.error({ message: res.message, showClose: true })
158 } 156 }
159 }) 157 })
160 } else { 158 } else {
161 return false 159 return false
160 }
161 })
162 },
163 resetForm () {
164 this.form = {
165 sex: '0'
162 } 166 }
163 }) 167 this.$refs.form.resetFields()
164 }, 168 },
165 resetForm () { 169 close () {
166 this.form = { 170 this.resetForm()
167 sex: '0' 171 this.$emit('input', false)
168 } 172 }
169 this.$refs.form.resetFields()
170 },
171 close () {
172 this.resetForm()
173 this.$emit('input', false)
174 } 173 }
175 } 174 }
176 }
177 </script> 175 </script>
178 <style scoped lang="scss"></style> 176 <style scoped lang="scss">
177 .modifydialog {
178 /deep/.el-dialog__header {
179 .dialog_title {
180 display: -webkit-box;
181 display: -ms-flexbox;
182 display: flex;
183 position: relative;
184 top: -7px;
185 width: 29%;
186 height: 40px;
187 margin-left: 28px;
188 -webkit-box-pack: center;
189 -ms-flex-pack: center;
190 justify-content: center;
191 white-space: nowrap;
192 b {
193 font-size: 16px;
194 font-weight: 600;
195 }
196 }
197 }
198 }
199 </style>
......