Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
587c5305 by renchao@pashanhoo.com
Options

docs:注释增加

1 parent ecb27d8c
Expand all
Inline Side-by-side
Showing 4 changed files with 271 additions and 256 deletions
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-07-20 13:33:07
5 -->
1 <template> 6 <template>
2 <el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" :width="width" :fullscreen="fullscreen" top="0" 7 <el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" :width="width" :fullscreen="fullscreen" top="0"
3 :append-to-body="appendToBody" :lock-scroll="true" :close-on-click-modal="false" @close="closeDialog" :key="key" 8 :append-to-body="appendToBody" :lock-scroll="true" :close-on-click-modal="false" @close="closeDialog" :key="key"
...@@ -23,117 +28,117 @@ ...@@ -23,117 +28,117 @@
23 </el-dialog> 28 </el-dialog>
24 </template> 29 </template>
25 <script> 30 <script>
26 export default { 31 export default {
27 props: { 32 props: {
28 value: { type: Boolean, default: false }, 33 value: { type: Boolean, default: false },
29 isMain: { 34 isMain: {
30 type: Boolean, 35 type: Boolean,
31 default: false 36 default: false
32 }, 37 },
33 appendToBody: { 38 appendToBody: {
34 type: Boolean, 39 type: Boolean,
35 default: true 40 default: true
36 }, 41 },
37 isButton: { 42 isButton: {
38 type: Boolean, 43 type: Boolean,
39 default: true, 44 default: true,
40 }, 45 },
41 width: { 46 width: {
42 type: String, 47 type: String,
43 default: '70%', 48 default: '70%',
44 }, 49 },
45 title: { 50 title: {
46 type: String, 51 type: String,
47 default: '', 52 default: '',
48 }, 53 },
49 isFullscreen: { 54 isFullscreen: {
50 type: Boolean, 55 type: Boolean,
51 default: true, 56 default: true,
52 }, 57 },
53 isSave: { 58 isSave: {
54 type: Boolean, 59 type: Boolean,
55 default: true, 60 default: true,
56 }, 61 },
57 saveButton: { 62 saveButton: {
58 type: String, 63 type: String,
59 default: '提交', 64 default: '提交',
60 }, 65 },
61 isReset: { 66 isReset: {
62 type: Boolean, 67 type: Boolean,
63 default: true, 68 default: true,
64 }, 69 },
65 saveloding: { 70 saveloding: {
66 type: Boolean, 71 type: Boolean,
67 default: false, 72 default: false,
73 },
74 btnDisabled: {
75 type: Boolean,
76 default: false
77 },
78 height: {
79 type: String,
80 default: ''
81 }
68 }, 82 },
69 btnDisabled: { 83 data () {
70 type: Boolean, 84 return {
71 default: false 85 key: 0,
86 dialogVisible: false,
87 fullscreen: false,
88 scrollerHeight: ''
89 }
72 }, 90 },
73 height: { 91 watch: {
74 type: String, 92 value (val) {
75 default: '' 93 this.$nextTick(() => {
76 } 94 this.dialogVisible = val
77 }, 95 })
78 data () { 96 this.height && (this.scrollerHeight = this.height + 'px')
79 return {
80 key: 0,
81 dialogVisible: false,
82 fullscreen: false,
83 scrollerHeight: ''
84 }
85 },
86 watch: {
87 value (val) {
88 this.$nextTick(() => {
89 this.dialogVisible = val
90 })
91 this.height && (this.scrollerHeight = this.height + 'px')
92 }
93 },
94 methods: {
95 /**
96 * @description: handleFullscreen
97 * @author: renchao
98 */
99 handleFullscreen () {
100 this.fullscreen = !this.fullscreen
101 if (!this.fullscreen) {
102 this.scrollerHeight = ''
103 } else {
104 this.scrollerHeight = (window.innerHeight - 120) + 'px'
105 } 97 }
106 }, 98 },
107 /** 99 methods: {
108 * @description: submitForm 100 /**
109 * @author: renchao 101 * @description: handleFullscreen
110 */ 102 * @author: renchao
111 submitForm () { 103 */
112 if (this.isButton) { 104 handleFullscreen () {
113 this.$emit('submitForm'); 105 this.fullscreen = !this.fullscreen
106 if (!this.fullscreen) {
107 this.scrollerHeight = ''
108 } else {
109 this.scrollerHeight = (window.innerHeight - 120) + 'px'
110 }
111 },
112 /**
113 * @description: submitForm
114 * @author: renchao
115 */
116 submitForm () {
117 if (this.isButton) {
118 this.$emit('submitForm');
119 }
120 },
121 /**
122 * @description: closeDialog
123 * @author: renchao
124 */
125 closeDialog () {
126 this.key++
127 this.$emit('input', false)
128 this.$emit('closeDialog')
114 } 129 }
115 }, 130 },
116 /** 131 }
117 * @description: closeDialog
118 * @author: renchao
119 */
120 closeDialog () {
121 this.key++
122 this.$emit('input', false)
123 this.$emit('closeDialog')
124 }
125 },
126 }
127 </script> 132 </script>
128 <style rel="stylesheet/scss" lang="scss" > 133 <style rel="stylesheet/scss" lang="scss" >
129 @import "~@/styles/mixin.scss"; 134 @import "~@/styles/mixin.scss";
130 @import "~@/styles/dialogBox.scss"; 135 @import "~@/styles/dialogBox.scss";
131 </style> 136 </style>
132 <style rel="stylesheet/scss" scoped lang="scss" > 137 <style rel="stylesheet/scss" scoped lang="scss" >
133 /deep/.is-fullscreen { 138 /deep/.is-fullscreen {
134 position: absolute; 139 position: absolute;
135 top: 50% !important; 140 top: 50% !important;
136 left: 50% !important; 141 left: 50% !important;
137 transform: translate(-50%, -50%) !important; 142 transform: translate(-50%, -50%) !important;
138 } 143 }
139 </style> 144 </style>
......
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-07-20 13:40:27
5 -->
1 <template> 6 <template>
2 <dialogBox title="配置常办项目" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="50%" 7 <dialogBox title="配置常办项目" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="50%"
3 @closeDialog="closeDialog" v-model="myValue"> 8 @closeDialog="closeDialog" v-model="myValue">
...@@ -6,103 +11,103 @@ ...@@ -6,103 +11,103 @@
6 </dialogBox> 11 </dialogBox>
7 </template> 12 </template>
8 <script> 13 <script>
9 import { getMenuInfo } from "@/api/user.js"; 14 import { getMenuInfo } from "@/api/user.js";
10 import Tree from "@/components/Tree/src/tree.vue" 15 import Tree from "@/components/Tree/src/tree.vue"
11 import { saveFrequentProjectsList, getHomeFrequentProjects } from "@/api/home.js"; 16 import { saveFrequentProjectsList, getHomeFrequentProjects } from "@/api/home.js";
12 export default { 17 export default {
13 components: { 18 components: {
14 Tree 19 Tree
15 }, 20 },
16 props: { 21 props: {
17 value: { type: Boolean, default: false }, 22 value: { type: Boolean, default: false },
18 bindItem: { type: Array, default: [] } 23 bindItem: { type: Array, default: [] }
19 }, 24 },
20 data () { 25 data () {
21 return { 26 return {
22 myValue: false, 27 myValue: false,
23 defaultCheckeds: [], 28 defaultCheckeds: [],
24 projectList: [], 29 projectList: [],
25 checkedItem: [], 30 checkedItem: [],
26 defaultProps: { 31 defaultProps: {
27 children: "children", 32 children: "children",
28 label: "name", 33 label: "name",
29 disabled: function (data, node) { 34 disabled: function (data, node) {
30 if (data.children && data.children.length > 0) { 35 if (data.children && data.children.length > 0) {
31 return true 36 return true
32 } else { 37 } else {
33 return false 38 return false
39 }
34 } 40 }
35 } 41 },
36 }, 42 uniqueValue: ''//最后拿到的唯一选择的moduldCode值,相当于id
37 uniqueValue: ''//最后拿到的唯一选择的moduldCode值,相当于id
38 }
39 },
40 watch: {
41 value (val) {
42 this.myValue = val
43 if (val) {
44 this.queryClick()
45 } 43 }
46 }
47 },
48 mounted () {
49 this.dealCheckedItem();
50 },
51 methods: {
52 submitForm () {
53 var checkedNodes = this.$refs.tree.getCheckedNodes();
54 if (checkedNodes.length > 6) {
55 this.$message.error("最多选择6个项目！");
56 return
57 }
58 saveFrequentProjectsList(checkedNodes).then(res => {
59 if (res.code == 200) {
60 this.$parent.queryProjectList();
61 this.$message.success("保存成功");
62 this.$emit("input", false);
63 } else {
64 this.$message.error(res.message);
65 }
66 })
67 }, 44 },
68 queryClick () { 45 watch: {
69 let that = this 46 value (val) {
70 getMenuInfo().then(res => { 47 this.myValue = val
71 this.projectList = res.result.slice(0, -2) 48 if (val) {
72 }) 49 this.queryClick()
73 function lookForAllId (arr = []) {
74 for (let item of that.bindItem) {
75 arr.push(item.id)
76 if (item.children && item.children.length) lookForAllId(item.children, arr)
77 } 50 }
78 return arr
79 } 51 }
80 this.defaultCheckeds = lookForAllId()
81 }, 52 },
82 dealCheckedItem () { 53 mounted () {
54 this.dealCheckedItem();
83 }, 55 },
84 //关闭窗口 56 methods: {
85 closeDialog () { 57 submitForm () {
86 this.$emit("input", false); 58 var checkedNodes = this.$refs.tree.getCheckedNodes();
87 }, 59 if (checkedNodes.length > 6) {
88 //节点选择状态发生改变时 60 this.$message.error("最多选择6个项目！");
89 handleClick (data, checked, node) { 61 return
90 var checkedNodes = this.$refs.tree.getCheckedNodes(); 62 }
91 if (checkedNodes.length > 6) { 63 saveFrequentProjectsList(checkedNodes).then(res => {
92 this.$message({ 64 if (res.code == 200) {
93 message: '最后选择6条数据', 65 this.$parent.queryProjectList();
94 type: 'warning', 66 this.$message.success("保存成功");
95 customClass: 'messageIndex' 67 this.$emit("input", false);
68 } else {
69 this.$message.error(res.message);
70 }
71 })
72 },
73 queryClick () {
74 let that = this
75 getMenuInfo().then(res => {
76 this.projectList = res.result.slice(0, -2)
96 }) 77 })
97 this.$refs.tree.setChecked(data, false) // 取消当前节点的选中状态 78 function lookForAllId (arr = []) {
79 for (let item of that.bindItem) {
80 arr.push(item.id)
81 if (item.children && item.children.length) lookForAllId(item.children, arr)
82 }
83 return arr
84 }
85 this.defaultCheckeds = lookForAllId()
86 },
87 dealCheckedItem () {
88 },
89 //关闭窗口
90 closeDialog () {
91 this.$emit("input", false);
92 },
93 //节点选择状态发生改变时
94 handleClick (data, checked, node) {
95 var checkedNodes = this.$refs.tree.getCheckedNodes();
96 if (checkedNodes.length > 6) {
97 this.$message({
98 message: '最后选择6条数据',
99 type: 'warning',
100 customClass: 'messageIndex'
101 })
102 this.$refs.tree.setChecked(data, false) // 取消当前节点的选中状态
103 }
98 } 104 }
99 } 105 }
100 } 106 }
101 }
102 </script> 107 </script>
103 <style scoped lang='scss'> 108 <style scoped lang='scss'>
104 /deep/.el-tree-node.is-expanded>.el-tree-node__children { 109 /deep/.el-tree-node.is-expanded > .el-tree-node__children {
105 display: flex; 110 display: flex;
106 flex-wrap: wrap; 111 flex-wrap: wrap;
107 } 112 }
108 </style> 113 </style>
......
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-07-20 13:40:32
5 -->
1 <template> 6 <template>
2 <div class="model"> 7 <div class="model">
3 <div class="mask">123</div> 8 <div class="mask">123</div>
...@@ -18,71 +23,71 @@ ...@@ -18,71 +23,71 @@
18 23
19 24
20 <style scoped lang='scss'> 25 <style scoped lang='scss'>
21 //css部分 26 //css部分
22 .mask { 27 .mask {
23 position: fixed; //这里用固定定位，后面设置动画时才不受影响 28 position: fixed; //这里用固定定位，后面设置动画时才不受影响
24 top: 0; 29 top: 0;
25 height: 100%; 30 height: 100%;
26 width: 100%; 31 width: 100%;
27 background-color: rgba(167, 165, 165, 0.486); 32 background-color: rgba(167, 165, 165, 0.486);
28 opacity: 0.5; 33 opacity: 0.5;
29 z-index: 9; 34 z-index: 9;
30 } 35 }
31 .model-dialog { 36 .model-dialog {
32 position: absolute; 37 position: absolute;
33 //让弹框居中显示 38 //让弹框居中显示
34 top: 50%; 39 top: 50%;
35 left: 50%; 40 left: 50%;
36 transform: translate(-50%, -50%); 41 transform: translate(-50%, -50%);
37 background-color: #fff; 42 background-color: #fff;
38 border-radius: 12px; 43 border-radius: 12px;
39 width: 600px; 44 width: 600px;
40 height: 300px; 45 height: 300px;
41 border: 1px solid #f5f5f5; 46 border: 1px solid #f5f5f5;
42 overflow: hidden; 47 overflow: hidden;
43 z-index: 10; //这里注意层级要比mask大，覆盖它 48 z-index: 10; //这里注意层级要比mask大，覆盖它
44 } 49 }
45 .model-header { 50 .model-header {
46 position: relative; 51 position: relative;
47 height: 50px; 52 height: 50px;
48 padding-left: 10px; 53 padding-left: 10px;
49 padding-top: 10px; 54 padding-top: 10px;
50 font-size: 20px; 55 font-size: 20px;
51 line-height: 50px; 56 line-height: 50px;
52 background-color: #f5f5f5; 57 background-color: #f5f5f5;
53 border-bottom: 1px solid rgb(177, 176, 176); 58 border-bottom: 1px solid rgb(177, 176, 176);
54 } 59 }
55 .model-body { 60 .model-body {
56 height: 150px; 61 height: 150px;
57 line-height: 150px; 62 line-height: 150px;
58 font-size: 28px; 63 font-size: 28px;
59 text-align: center; 64 text-align: center;
60 background-color: #fff; 65 background-color: #fff;
61 } 66 }
62 .model-footer { 67 .model-footer {
63 background-color: #f5f5f5; 68 background-color: #f5f5f5;
64 height: 100px; 69 height: 100px;
65 text-align: center; 70 text-align: center;
66 line-height: 100px; 71 line-height: 100px;
67 } 72 }
68 .btn { 73 .btn {
69 width: 180px; 74 width: 180px;
70 height: 40px; 75 height: 40px;
71 border-radius: 8px; 76 border-radius: 8px;
72 background-color: rgb(180, 103, 103); 77 background-color: rgb(180, 103, 103);
73 color: #fff; 78 color: #fff;
74 font-size: 18px; 79 font-size: 18px;
75 border: none; 80 border: none;
76 } 81 }
77 .icon-close { 82 .icon-close {
78 position: absolute; //如果不加绝对布局，图表显示不出来 83 position: absolute; //如果不加绝对布局，图表显示不出来
79 background-color: pink; 84 background-color: pink;
80 right: 15px; 85 right: 15px;
81 top: 16px; 86 top: 16px;
82 width: 30px; 87 width: 30px;
83 height: 30px; 88 height: 30px;
84 z-index: 10; 89 z-index: 10;
85 //background: url("../assets/icon-close.png") no-repeat; 90 //background: url("../assets/icon-close.png") no-repeat;
86 background-size: contain; 91 background-size: contain;
87 } 92 }
88 </style> 93 </style>
...\ No newline at end of file ...\ No newline at end of file
......