--no commit message
Showing
37 changed files
with
1251 additions
and
1176 deletions
| 1 | /* | 1 | /* |
| 2 | * @Description: | 2 | * @Description: |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-05-17 10:24:24 | 4 | * @LastEditTime: 2023-07-25 14:46:16 |
| 5 | */ | 5 | */ |
| 6 | import request from '@/utils/request' | 6 | import request from '@/utils/request' |
| 7 | let SERVER = window.config ? window.config : JSON.parse(localStorage.getItem('ApiUrl')) | 7 | let SERVER = window.config ? window.config : JSON.parse(localStorage.getItem('ApiUrl')) |
| ... | @@ -69,6 +69,18 @@ export function leftMenu (data) { | ... | @@ -69,6 +69,18 @@ export function leftMenu (data) { |
| 69 | data | 69 | data |
| 70 | }) | 70 | }) |
| 71 | } | 71 | } |
| 72 | /** | ||
| 73 | * @description: 进度查询获取左侧列表 | ||
| 74 | * @param {*} data | ||
| 75 | * @author: renchao | ||
| 76 | */ | ||
| 77 | export function jdcxLeftMenu (data) { | ||
| 78 | return request({ | ||
| 79 | url: SERVER.SERVERAPI + '/rest/business/workFlow/jdcxLeftMenu', | ||
| 80 | method: 'post', | ||
| 81 | data | ||
| 82 | }) | ||
| 83 | } | ||
| 72 | 84 | ||
| 73 | /** | 85 | /** |
| 74 | * @description: 获取下一环节信息 | 86 | * @description: 获取下一环节信息 | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: | 2 | * @Description: |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-07-20 10:22:20 | 4 | * @LastEditTime: 2023-07-25 16:06:03 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <label class="el-checkbox" :class="[ | 7 | <label class="el-checkbox" :class="[ |
| ... | @@ -46,9 +46,7 @@ | ... | @@ -46,9 +46,7 @@ |
| 46 | default: '' | 46 | default: '' |
| 47 | } | 47 | } |
| 48 | }, | 48 | }, |
| 49 | |||
| 50 | componentName: 'ElCheckbox', | 49 | componentName: 'ElCheckbox', |
| 51 | |||
| 52 | data () { | 50 | data () { |
| 53 | return { | 51 | return { |
| 54 | selfModel: false, | 52 | selfModel: false, |
| ... | @@ -56,7 +54,6 @@ | ... | @@ -56,7 +54,6 @@ |
| 56 | isLimitExceeded: false | 54 | isLimitExceeded: false |
| 57 | }; | 55 | }; |
| 58 | }, | 56 | }, |
| 59 | |||
| 60 | computed: { | 57 | computed: { |
| 61 | model: { | 58 | model: { |
| 62 | /** | 59 | /** |
| ... | @@ -129,7 +126,6 @@ | ... | @@ -129,7 +126,6 @@ |
| 129 | store () { | 126 | store () { |
| 130 | return this._checkboxGroup ? this._checkboxGroup.value : this.value; | 127 | return this._checkboxGroup ? this._checkboxGroup.value : this.value; |
| 131 | }, | 128 | }, |
| 132 | |||
| 133 | /** | 129 | /** |
| 134 | * @description: isLimitDisabled | 130 | * @description: isLimitDisabled |
| 135 | * @author: renchao | 131 | * @author: renchao | ... | ... |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-07-25 16:10:17 | ||
| 5 | --> | ||
| 1 | <template> | 6 | <template> |
| 2 | <transition name="el-loading-fade" @after-leave="handleAfterLeave"> | 7 | <transition name="el-loading-fade" @after-leave="handleAfterLeave"> |
| 3 | <div v-show="visible" class="el-loading-mask" :style="{ backgroundColor: background || '' }" | 8 | <div v-show="visible" class="el-loading-mask" :style="{ backgroundColor: background || '' }" |
| ... | @@ -9,37 +14,35 @@ | ... | @@ -9,37 +14,35 @@ |
| 9 | </div> | 14 | </div> |
| 10 | </transition> | 15 | </transition> |
| 11 | </template> | 16 | </template> |
| 12 | |||
| 13 | <script> | 17 | <script> |
| 14 | export default { | 18 | export default { |
| 15 | data () { | 19 | data () { |
| 16 | return { | 20 | return { |
| 17 | text: null, | 21 | text: null, |
| 18 | spinner: null, | 22 | spinner: null, |
| 19 | background: null, | 23 | background: null, |
| 20 | fullscreen: true, | 24 | fullscreen: true, |
| 21 | visible: false, | 25 | visible: false, |
| 22 | customClass: '' | 26 | customClass: '' |
| 23 | }; | 27 | }; |
| 24 | }, | ||
| 25 | |||
| 26 | methods: { | ||
| 27 | handleAfterLeave () { | ||
| 28 | this.$emit('after-leave'); | ||
| 29 | }, | 28 | }, |
| 30 | setText (text) { | 29 | methods: { |
| 31 | this.text = text; | 30 | handleAfterLeave () { |
| 31 | this.$emit('after-leave'); | ||
| 32 | }, | ||
| 33 | setText (text) { | ||
| 34 | this.text = text; | ||
| 35 | } | ||
| 32 | } | 36 | } |
| 33 | } | 37 | }; |
| 34 | }; | ||
| 35 | </script> | 38 | </script> |
| 36 | <style scoped lang="scss"> | 39 | <style scoped lang="scss"> |
| 37 | .el-loading-spinner { | 40 | .el-loading-spinner { |
| 38 | margin-top: -100px !important; | 41 | margin-top: -100px !important; |
| 39 | 42 | ||
| 40 | .img { | 43 | .img { |
| 41 | width: 80px; | 44 | width: 80px; |
| 42 | height: 80px; | 45 | height: 80px; |
| 46 | } | ||
| 43 | } | 47 | } |
| 44 | } | ||
| 45 | </style> | 48 | </style> |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-07-25 16:10:08 | ||
| 5 | --> | ||
| 1 | <template> | 6 | <template> |
| 2 | <transition name="fade"> | 7 | <transition name="fade"> |
| 3 | <!--主要内容--> | 8 | <!--主要内容--> |
| ... | @@ -18,163 +23,163 @@ | ... | @@ -18,163 +23,163 @@ |
| 18 | </transition> | 23 | </transition> |
| 19 | </template> | 24 | </template> |
| 20 | <script> | 25 | <script> |
| 21 | export default { | 26 | export default { |
| 22 | props: { | 27 | props: { |
| 23 | noticeList: { | 28 | noticeList: { |
| 24 | type: Array, | 29 | type: Array, |
| 25 | default: [] | 30 | default: [] |
| 26 | } | 31 | } |
| 27 | }, | ||
| 28 | data () { | ||
| 29 | return { | ||
| 30 | speed: 50, // 速度（单位px/s） | ||
| 31 | backWidth: '', // 父级宽度 | ||
| 32 | backHeight: '', // 父级高度 | ||
| 33 | wordLength: '', // 文本长度 | ||
| 34 | state: 1, | ||
| 35 | firstAnimationTime: '', // 状态一动画效果 | ||
| 36 | secondAnimationTime: '', // 状态二动画效果 | ||
| 37 | }; | ||
| 38 | }, | ||
| 39 | watch: { | ||
| 40 | noticeList: { | ||
| 41 | handler (newName, oldName) { | ||
| 42 | let that = this | ||
| 43 | this.Listener(); | ||
| 44 | setTimeout(res => { | ||
| 45 | that.getData(); | ||
| 46 | }, 100); | ||
| 47 | }, | ||
| 48 | deep: true | ||
| 49 | } | ||
| 50 | }, | ||
| 51 | methods: { | ||
| 52 | /** | ||
| 53 | * @description: handleNotice | ||
| 54 | * @param {*} item | ||
| 55 | * @author: renchao | ||
| 56 | */ | ||
| 57 | handleNotice (item) { | ||
| 58 | this.$alertMes(item.noticeTitle, item.noticeContent) | ||
| 59 | }, | ||
| 60 | /** | ||
| 61 | * @description: 获取数据 | ||
| 62 | * @author: renchao | ||
| 63 | */ | ||
| 64 | getData () { | ||
| 65 | let style = document.styleSheets[0]; | ||
| 66 | let text = this.$refs.text; | ||
| 67 | let back = this.$refs.back; | ||
| 68 | this.backWidth = back.offsetWidth; | ||
| 69 | this.backHeight = back.offsetHeight; | ||
| 70 | text.style.lineHeight = this.backHeight + 'px'; | ||
| 71 | this.wordLength = text.offsetWidth; | ||
| 72 | this.ComputationTime(); // 计算时间 | ||
| 73 | style.insertRule( | ||
| 74 | `@keyframes firstAnimation {0% {left:0px;}100% {left:-${this.wordLength}px;}}` | ||
| 75 | ); | ||
| 76 | style.insertRule( | ||
| 77 | `@keyframes secondAnimation {0% {left:${this.backWidth}px;}100% {left:-${this.wordLength}px;}}` | ||
| 78 | ); | ||
| 79 | setTimeout(res => { | ||
| 80 | this.changeState(); | ||
| 81 | }, 300); | ||
| 82 | }, | 32 | }, |
| 83 | /** | 33 | data () { |
| 84 | * @description: 用速度计算时间（想要保持速度一样，2种状态时间不同需算出） | 34 | return { |
| 85 | * @author: renchao | 35 | speed: 50, // 速度（单位px/s） |
| 86 | */ | 36 | backWidth: '', // 父级宽度 |
| 87 | ComputationTime () { | 37 | backHeight: '', // 父级高度 |
| 88 | this.firstAnimationTime = this.wordLength / this.speed; | 38 | wordLength: '', // 文本长度 |
| 89 | this.secondAnimationTime = | 39 | state: 1, |
| 90 | (this.wordLength + this.backWidth) / this.speed; | 40 | firstAnimationTime: '', // 状态一动画效果 |
| 41 | secondAnimationTime: '', // 状态二动画效果 | ||
| 42 | }; | ||
| 91 | }, | 43 | }, |
| 92 | /** | 44 | watch: { |
| 93 | * @description: 根据状态切换动画 | 45 | noticeList: { |
| 94 | * @author: renchao | 46 | handler (newName, oldName) { |
| 95 | */ | 47 | let that = this |
| 96 | changeState () { | 48 | this.Listener(); |
| 97 | let text = this.$refs.text; | 49 | setTimeout(res => { |
| 98 | if (this.state == 1) { | 50 | that.getData(); |
| 99 | text.style.animation = `firstAnimation ${this.firstAnimationTime}s linear`; | 51 | }, 100); |
| 100 | this.state = 2; | 52 | }, |
| 101 | } else { | 53 | deep: true |
| 102 | text.style.animation = `secondAnimation ${this.secondAnimationTime}s linear infinite`; | ||
| 103 | } | 54 | } |
| 104 | }, | 55 | }, |
| 105 | /** | 56 | methods: { |
| 106 | * @description: Listener | 57 | /** |
| 107 | * @author: renchao | 58 | * @description: handleNotice |
| 108 | */ | 59 | * @param {*} item |
| 109 | Listener () { | 60 | * @author: renchao |
| 110 | let text = this.$refs.text; | 61 | */ |
| 111 | text.addEventListener( | 62 | handleNotice (item) { |
| 112 | 'animationend', | 63 | this.$alertMes(item.noticeTitle, item.noticeContent) |
| 113 | res => { | 64 | }, |
| 65 | /** | ||
| 66 | * @description: 获取数据 | ||
| 67 | * @author: renchao | ||
| 68 | */ | ||
| 69 | getData () { | ||
| 70 | let style = document.styleSheets[0]; | ||
| 71 | let text = this.$refs.text; | ||
| 72 | let back = this.$refs.back; | ||
| 73 | this.backWidth = back.offsetWidth; | ||
| 74 | this.backHeight = back.offsetHeight; | ||
| 75 | text.style.lineHeight = this.backHeight + 'px'; | ||
| 76 | this.wordLength = text.offsetWidth; | ||
| 77 | this.ComputationTime(); // 计算时间 | ||
| 78 | style.insertRule( | ||
| 79 | `@keyframes firstAnimation {0% {left:0px;}100% {left:-${this.wordLength}px;}}` | ||
| 80 | ); | ||
| 81 | style.insertRule( | ||
| 82 | `@keyframes secondAnimation {0% {left:${this.backWidth}px;}100% {left:-${this.wordLength}px;}}` | ||
| 83 | ); | ||
| 84 | setTimeout(res => { | ||
| 114 | this.changeState(); | 85 | this.changeState(); |
| 115 | }, | 86 | }, 300); |
| 116 | false | 87 | }, |
| 117 | ) | 88 | /** |
| 118 | }, | 89 | * @description: 用速度计算时间（想要保持速度一样，2种状态时间不同需算出） |
| 119 | /** | 90 | * @author: renchao |
| 120 | * @description: mouseOver | 91 | */ |
| 121 | * @author: renchao | 92 | ComputationTime () { |
| 122 | */ | 93 | this.firstAnimationTime = this.wordLength / this.speed; |
| 123 | mouseOver () { | 94 | this.secondAnimationTime = |
| 124 | let text = this.$refs.text; | 95 | (this.wordLength + this.backWidth) / this.speed; |
| 125 | text.style.animationPlayState = 'paused' | 96 | }, |
| 126 | }, | 97 | /** |
| 127 | /** | 98 | * @description: 根据状态切换动画 |
| 128 | * @description: mouseLeave | 99 | * @author: renchao |
| 129 | * @author: renchao | 100 | */ |
| 130 | */ | 101 | changeState () { |
| 131 | mouseLeave () { | 102 | let text = this.$refs.text; |
| 132 | let text = this.$refs.text; | 103 | if (this.state == 1) { |
| 133 | text.style.animationPlayState = '' | 104 | text.style.animation = `firstAnimation ${this.firstAnimationTime}s linear`; |
| 105 | this.state = 2; | ||
| 106 | } else { | ||
| 107 | text.style.animation = `secondAnimation ${this.secondAnimationTime}s linear infinite`; | ||
| 108 | } | ||
| 109 | }, | ||
| 110 | /** | ||
| 111 | * @description: Listener | ||
| 112 | * @author: renchao | ||
| 113 | */ | ||
| 114 | Listener () { | ||
| 115 | let text = this.$refs.text; | ||
| 116 | text.addEventListener( | ||
| 117 | 'animationend', | ||
| 118 | res => { | ||
| 119 | this.changeState(); | ||
| 120 | }, | ||
| 121 | false | ||
| 122 | ) | ||
| 123 | }, | ||
| 124 | /** | ||
| 125 | * @description: mouseOver | ||
| 126 | * @author: renchao | ||
| 127 | */ | ||
| 128 | mouseOver () { | ||
| 129 | let text = this.$refs.text; | ||
| 130 | text.style.animationPlayState = 'paused' | ||
| 131 | }, | ||
| 132 | /** | ||
| 133 | * @description: mouseLeave | ||
| 134 | * @author: renchao | ||
| 135 | */ | ||
| 136 | mouseLeave () { | ||
| 137 | let text = this.$refs.text; | ||
| 138 | text.style.animationPlayState = '' | ||
| 139 | } | ||
| 134 | } | 140 | } |
| 135 | } | 141 | }; |
| 136 | }; | ||
| 137 | </script> | 142 | </script> |
| 138 | <style lang="scss" scoped> | 143 | <style lang="scss" scoped> |
| 139 | .noticebar { | 144 | .noticebar { |
| 140 | display: flex; | 145 | display: flex; |
| 141 | align-items: center; | 146 | align-items: center; |
| 142 | width: 100%; | 147 | width: 100%; |
| 143 | height: 28px; | 148 | height: 28px; |
| 144 | background: rgba(0, 0, 0, 0.1); | 149 | background: rgba(0, 0, 0, 0.1); |
| 145 | 150 | ||
| 146 | .icon { | 151 | .icon { |
| 147 | img { | 152 | img { |
| 148 | height: 100%; | 153 | height: 100%; |
| 149 | width: 100%; | 154 | width: 100%; |
| 155 | } | ||
| 150 | } | 156 | } |
| 151 | } | ||
| 152 | |||
| 153 | .back { | ||
| 154 | overflow: hidden; | ||
| 155 | white-space: nowrap; | ||
| 156 | margin: 0 auto; | ||
| 157 | height: 100%; | ||
| 158 | width: 100%; | ||
| 159 | cursor: pointer; | ||
| 160 | position: relative; | ||
| 161 | font-size: 14px; | ||
| 162 | color: #fff; | ||
| 163 | 157 | ||
| 164 | .text { | 158 | .back { |
| 165 | position: absolute; | 159 | overflow: hidden; |
| 166 | display: inline-block; | 160 | white-space: nowrap; |
| 167 | padding: 2px 0; | 161 | margin: 0 auto; |
| 168 | display: flex; | 162 | height: 100%; |
| 163 | width: 100%; | ||
| 164 | cursor: pointer; | ||
| 165 | position: relative; | ||
| 166 | font-size: 14px; | ||
| 167 | color: #fff; | ||
| 169 | 168 | ||
| 170 | p { | 169 | .text { |
| 171 | margin-right: 80px; | 170 | position: absolute; |
| 171 | display: inline-block; | ||
| 172 | padding: 2px 0; | ||
| 172 | display: flex; | 173 | display: flex; |
| 173 | align-items: center; | 174 | |
| 174 | height: 28px; | 175 | p { |
| 175 | line-height: 28px; | 176 | margin-right: 80px; |
| 177 | display: flex; | ||
| 178 | align-items: center; | ||
| 179 | height: 28px; | ||
| 180 | line-height: 28px; | ||
| 181 | } | ||
| 176 | } | 182 | } |
| 177 | } | 183 | } |
| 178 | } | 184 | } |
| 179 | } | ||
| 180 | </style> | 185 | </style> | ... | ... |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-07-25 16:09:59 | ||
| 5 | --> | ||
| 1 | <template> | 6 | <template> |
| 2 | <div style="width: 100%;height: 100%"> | 7 | <div style="width: 100%;height: 100%"> |
| 3 | <vue-photo-zoom-pro :width="bigWidth" :url="url" :type="type" :scale="scale" :out-show="showType" | 8 | <vue-photo-zoom-pro :width="bigWidth" :url="url" :type="type" :scale="scale" :out-show="showType" |
| ... | @@ -5,7 +10,6 @@ | ... | @@ -5,7 +10,6 @@ |
| 5 | </vue-photo-zoom-pro> | 10 | </vue-photo-zoom-pro> |
| 6 | </div> | 11 | </div> |
| 7 | </template> | 12 | </template> |
| 8 | |||
| 9 | <script> | 13 | <script> |
| 10 | import vuePhotoZoomPro from '@/components/PhotoZoom/vue-photo-zoom-pro' | 14 | import vuePhotoZoomPro from '@/components/PhotoZoom/vue-photo-zoom-pro' |
| 11 | export default { | 15 | export default { | ... | ... |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-07-25 16:06:21 | ||
| 5 | --> | ||
| 1 | <template> | 6 | <template> |
| 2 | <transition name="msgbox-fade" v-if="myShow"> | 7 | <transition name="msgbox-fade" v-if="myShow"> |
| 3 | <div class="ls-mask" v-loading="loading"> | 8 | <div class="ls-mask" v-loading="loading"> |
| ... | @@ -21,181 +26,179 @@ | ... | @@ -21,181 +26,179 @@ |
| 21 | </transition> | 26 | </transition> |
| 22 | </template> | 27 | </template> |
| 23 | <script> | 28 | <script> |
| 24 | export default { | 29 | export default { |
| 25 | name: 'index', | 30 | name: 'index', |
| 26 | data () { | 31 | data () { |
| 27 | return { | 32 | return { |
| 28 | title: '标题', | 33 | title: '标题', |
| 29 | editItem: "", | 34 | editItem: "", |
| 30 | formData: undefined,//父组件传递的参数 负责传给子组件 | 35 | formData: undefined,//父组件传递的参数 负责传给子组件 |
| 31 | btnShow: false, | 36 | btnShow: false, |
| 32 | cancel: function () { }, | 37 | cancel: function () { }, |
| 33 | confirm: function () { }, | 38 | confirm: function () { }, |
| 34 | cancelText: '取消', | 39 | cancelText: '取消', |
| 35 | confirmText: '确认', | 40 | confirmText: '确认', |
| 36 | isSync: false, | 41 | isSync: false, |
| 37 | isShow: false, | 42 | isShow: false, |
| 38 | myShow: false, | 43 | myShow: false, |
| 39 | titleStyle: 'center', | 44 | titleStyle: 'center', |
| 40 | width: "75%", | 45 | width: "75%", |
| 41 | height: "auto", | 46 | height: "auto", |
| 42 | contentHeight: "", | 47 | contentHeight: "", |
| 43 | iconClass: "", | 48 | iconClass: "", |
| 44 | key: 0 | 49 | key: 0 |
| 45 | } | 50 | } |
| 46 | }, | 51 | }, |
| 47 | props: { | 52 | props: { |
| 48 | loading: { type: Boolean, default: false }, | 53 | loading: { type: Boolean, default: false }, |
| 49 | }, | 54 | }, |
| 50 | watch: { | 55 | watch: { |
| 51 | isShow (newValue) { | 56 | isShow (newValue) { |
| 52 | this.editItem = this.loadViewFn(this.editItem) | 57 | this.editItem = this.loadViewFn(this.editItem) |
| 53 | document.body.appendChild(this.$el); | 58 | document.body.appendChild(this.$el); |
| 54 | this.myShow = newValue | 59 | this.myShow = newValue |
| 55 | } | 60 | } |
| 56 | }, | 61 | }, |
| 57 | mounted () { | 62 | mounted () { |
| 58 | /** | 63 | /** |
| 59 | * @description: 计算滚动条高度 | 64 | * @description: 计算滚动条高度 |
| 60 | * @author: renchao | 65 | * @author: renchao |
| 61 | */ | 66 | */ |
| 62 | setTimeout(() => { | 67 | setTimeout(() => { |
| 63 | if (this.btnShow) { | 68 | if (this.btnShow) { |
| 64 | if (this.height == 'auto') { | 69 | if (this.height == 'auto') { |
| 65 | this.contentHeight = (this.$refs.contentRef.offsetHeight) + 'px' | 70 | this.contentHeight = (this.$refs.contentRef.offsetHeight) + 'px' |
| 66 | } else { | 71 | } else { |
| 67 | this.contentHeight = this.height | 72 | this.contentHeight = this.height |
| 68 | } | 73 | } |
| 69 | } else { | ||
| 70 | if (this.height == 'auto') { | ||
| 71 | this.contentHeight = (this.$refs.contentRef.offsetHeight) + 'px' | ||
| 72 | } else { | 74 | } else { |
| 73 | this.contentHeight = this.height | 75 | if (this.height == 'auto') { |
| 76 | this.contentHeight = (this.$refs.contentRef.offsetHeight) + 'px' | ||
| 77 | } else { | ||
| 78 | this.contentHeight = this.height | ||
| 79 | } | ||
| 74 | } | 80 | } |
| 75 | } | 81 | }, 300) |
| 76 | }, 300) | ||
| 77 | }, | ||
| 78 | methods: { | ||
| 79 | /** | ||
| 80 | * @description: onCancel | ||
| 81 | * @author: renchao | ||
| 82 | */ | ||
| 83 | onCancel () { | ||
| 84 | this.isShow = false | ||
| 85 | this.cancel() | ||
| 86 | }, | 82 | }, |
| 87 | /** | 83 | methods: { |
| 88 | * @description: onConfirm | 84 | /** |
| 89 | * @author: renchao | 85 | * @description: onCancel |
| 90 | */ | 86 | * @author: renchao |
| 91 | onConfirm () { | 87 | */ |
| 92 | this.loading = true | 88 | onCancel () { |
| 93 | let res = new Promise((resolve, reject) => { | ||
| 94 | this.confirm() | ||
| 95 | resolve(true) | ||
| 96 | }) | ||
| 97 | if (res) { | ||
| 98 | this.isShow = false | 89 | this.isShow = false |
| 90 | this.cancel() | ||
| 91 | }, | ||
| 92 | /** | ||
| 93 | * @description: onConfirm | ||
| 94 | * @author: renchao | ||
| 95 | */ | ||
| 96 | onConfirm () { | ||
| 97 | this.loading = true | ||
| 98 | let res = new Promise((resolve, reject) => { | ||
| 99 | this.confirm() | ||
| 100 | resolve(true) | ||
| 101 | }) | ||
| 102 | if (res) { | ||
| 103 | this.isShow = false | ||
| 104 | } | ||
| 105 | }, | ||
| 106 | /** | ||
| 107 | * @description: loadingFn | ||
| 108 | * @param {*} e | ||
| 109 | * @author: renchao | ||
| 110 | */ | ||
| 111 | loadingFn (e) { //加载状态 | ||
| 112 | this.loading = e | ||
| 113 | }, | ||
| 114 | /** | ||
| 115 | * @description: loadViewFn | ||
| 116 | * @param {*} view | ||
| 117 | * @author: renchao | ||
| 118 | */ | ||
| 119 | loadViewFn (view) { | ||
| 120 | return (r) => | ||
| 121 | require.ensure([], () => | ||
| 122 | r(require(`@/views/${view}.vue`)) | ||
| 123 | ) | ||
| 99 | } | 124 | } |
| 100 | }, | 125 | }, |
| 101 | /** | 126 | destroyed () { |
| 102 | * @description: loadingFn | 127 | if (this.appendToBody && this.$el && this.$el.parentNode) { |
| 103 | * @param {*} e | 128 | this.$el.parentNode.removeChild(this.$el); |
| 104 | * @author: renchao | 129 | } |
| 105 | */ | ||
| 106 | loadingFn (e) { //加载状态 | ||
| 107 | this.loading = e | ||
| 108 | }, | ||
| 109 | /** | ||
| 110 | * @description: loadViewFn | ||
| 111 | * @param {*} view | ||
| 112 | * @author: renchao | ||
| 113 | */ | ||
| 114 | loadViewFn (view) { | ||
| 115 | return (r) => | ||
| 116 | require.ensure([], () => | ||
| 117 | r(require(`@/views/${view}.vue`)) | ||
| 118 | ) | ||
| 119 | } | ||
| 120 | }, | ||
| 121 | destroyed () { | ||
| 122 | if (this.appendToBody && this.$el && this.$el.parentNode) { | ||
| 123 | this.$el.parentNode.removeChild(this.$el); | ||
| 124 | } | 130 | } |
| 125 | } | 131 | } |
| 126 | } | ||
| 127 | </script> | 132 | </script> |
| 128 | <style scoped lang="scss" > | 133 | <style scoped lang="scss" > |
| 129 | .ls-mask { | 134 | .ls-mask { |
| 130 | width: 100%; | 135 | width: 100%; |
| 131 | height: 100%; | 136 | height: 100%; |
| 132 | z-index: 2000; | 137 | z-index: 2000; |
| 133 | position: fixed; | 138 | position: fixed; |
| 134 | left: 0; | 139 | left: 0; |
| 135 | top: 0; | 140 | top: 0; |
| 136 | background: rgba(0, 0, 0, 0.3); | 141 | background: rgba(0, 0, 0, 0.3); |
| 137 | 142 | } | |
| 138 | } | ||
| 139 | |||
| 140 | .ls-mask-window { | ||
| 141 | background: white; | ||
| 142 | position: relative; | ||
| 143 | left: 50%; | ||
| 144 | top: 50%; | ||
| 145 | min-height: 200px; | ||
| 146 | transform: translate(-50%, -50%); | ||
| 147 | border-radius: 5px; | ||
| 148 | overflow: hidden; | ||
| 149 | } | ||
| 150 | 143 | ||
| 151 | .ls-mask-window b { | 144 | .ls-mask-window { |
| 152 | padding-left: 5px; | 145 | background: white; |
| 153 | } | 146 | position: relative; |
| 147 | left: 50%; | ||
| 148 | top: 50%; | ||
| 149 | min-height: 200px; | ||
| 150 | transform: translate(-50%, -50%); | ||
| 151 | border-radius: 5px; | ||
| 152 | overflow: hidden; | ||
| 153 | } | ||
| 154 | 154 | ||
| 155 | .ls-title { | 155 | .ls-mask-window b { |
| 156 | padding: 16px; | 156 | padding-left: 5px; |
| 157 | color: #ffffff; | 157 | } |
| 158 | font-size: 16px; | ||
| 159 | background: linear-gradient(3deg, #409EFF, #a7cbee); | ||
| 160 | } | ||
| 161 | 158 | ||
| 162 | .ls-title .svg-icon { | 159 | .ls-title { |
| 163 | font-size: 18px; | 160 | padding: 16px; |
| 164 | } | 161 | color: #ffffff; |
| 162 | font-size: 16px; | ||
| 163 | background: linear-gradient(3deg, #409eff, #a7cbee); | ||
| 164 | } | ||
| 165 | 165 | ||
| 166 | .mask-content { | 166 | .ls-title .svg-icon { |
| 167 | padding: 20px; | 167 | font-size: 18px; |
| 168 | width: 100%; | 168 | } |
| 169 | min-height: 30%; | ||
| 170 | max-height: 90vh; | ||
| 171 | overflow-y: scroll; | ||
| 172 | } | ||
| 173 | 169 | ||
| 174 | .ls-mask-footer { | 170 | .mask-content { |
| 175 | height: 50px; | 171 | padding: 20px; |
| 176 | display: flex; | 172 | width: 100%; |
| 177 | justify-content: center; | 173 | min-height: 30%; |
| 178 | width: 100%; | 174 | max-height: 90vh; |
| 179 | position: absolute; | 175 | overflow-y: scroll; |
| 180 | border-top: 1px solid $borderColor; | 176 | } |
| 181 | bottom: 0; | ||
| 182 | background: #ffffff; | ||
| 183 | border-bottom-left-radius: 5px; | ||
| 184 | border-bottom-right-radius: 5px; | ||
| 185 | overflow: hidden; | ||
| 186 | } | ||
| 187 | 177 | ||
| 178 | .ls-mask-footer { | ||
| 179 | height: 50px; | ||
| 180 | display: flex; | ||
| 181 | justify-content: center; | ||
| 182 | width: 100%; | ||
| 183 | position: absolute; | ||
| 184 | border-top: 1px solid $borderColor; | ||
| 185 | bottom: 0; | ||
| 186 | background: #ffffff; | ||
| 187 | border-bottom-left-radius: 5px; | ||
| 188 | border-bottom-right-radius: 5px; | ||
| 189 | overflow: hidden; | ||
| 190 | } | ||
| 188 | 191 | ||
| 189 | /deep/.closeStyle { | 192 | /deep/.closeStyle { |
| 190 | position: absolute; | 193 | position: absolute; |
| 191 | top: 13px; | 194 | top: 13px; |
| 192 | right: 26px; | 195 | right: 26px; |
| 193 | font-size: 24px; | 196 | font-size: 24px; |
| 194 | cursor: pointer; | 197 | cursor: pointer; |
| 195 | color: #409EFF; | 198 | color: #409eff; |
| 196 | } | 199 | } |
| 197 | 200 | ||
| 198 | /deep/.el-loading-mask { | 201 | /deep/.el-loading-mask { |
| 199 | background: none; | 202 | background: none; |
| 200 | } | 203 | } |
| 201 | </style> | 204 | </style> | ... | ... |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-07-25 16:08:55 | ||
| 5 | --> | ||
| 1 | <!--显示svg文件图标--> | 6 | <!--显示svg文件图标--> |
| 2 | <template> | 7 | <template> |
| 3 | <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /> | 8 | <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /> |
| ... | @@ -5,59 +10,58 @@ | ... | @@ -5,59 +10,58 @@ |
| 5 | <use :xlink:href="iconName" /> | 10 | <use :xlink:href="iconName" /> |
| 6 | </svg> | 11 | </svg> |
| 7 | </template> | 12 | </template> |
| 8 | |||
| 9 | <script> | 13 | <script> |
| 10 | // doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage | 14 | // doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage |
| 11 | import { isExternal } from '@/utils/validate' | 15 | import { isExternal } from '@/utils/validate' |
| 12 | 16 | ||
| 13 | export default { | 17 | export default { |
| 14 | name: 'SvgIcon', | 18 | name: 'SvgIcon', |
| 15 | props: { | 19 | props: { |
| 16 | iconClass: { | 20 | iconClass: { |
| 17 | type: String, | 21 | type: String, |
| 18 | required: true | 22 | required: true |
| 19 | }, | 23 | }, |
| 20 | className: { | 24 | className: { |
| 21 | type: String, | 25 | type: String, |
| 22 | default: '' | 26 | default: '' |
| 23 | } | ||
| 24 | }, | ||
| 25 | computed: { | ||
| 26 | isExternal() { | ||
| 27 | return isExternal(this.iconClass) | ||
| 28 | }, | ||
| 29 | iconName() { | ||
| 30 | return `#icon-${this.iconClass}` | ||
| 31 | }, | ||
| 32 | svgClass() { | ||
| 33 | if (this.className) { | ||
| 34 | return 'svg-icon ' + this.className | ||
| 35 | } else { | ||
| 36 | return 'svg-icon' | ||
| 37 | } | 27 | } |
| 38 | }, | 28 | }, |
| 39 | styleExternalIcon() { | 29 | computed: { |
| 40 | return { | 30 | isExternal () { |
| 41 | mask: `url(${this.iconClass}) no-repeat 50% 50%`, | 31 | return isExternal(this.iconClass) |
| 42 | '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%` | 32 | }, |
| 33 | iconName () { | ||
| 34 | return `#icon-${this.iconClass}` | ||
| 35 | }, | ||
| 36 | svgClass () { | ||
| 37 | if (this.className) { | ||
| 38 | return 'svg-icon ' + this.className | ||
| 39 | } else { | ||
| 40 | return 'svg-icon' | ||
| 41 | } | ||
| 42 | }, | ||
| 43 | styleExternalIcon () { | ||
| 44 | return { | ||
| 45 | mask: `url(${this.iconClass}) no-repeat 50% 50%`, | ||
| 46 | '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%` | ||
| 47 | } | ||
| 43 | } | 48 | } |
| 44 | } | 49 | } |
| 45 | } | 50 | } |
| 46 | } | ||
| 47 | </script> | 51 | </script> |
| 48 | 52 | ||
| 49 | <style scoped> | 53 | <style scoped> |
| 50 | .svg-icon { | 54 | .svg-icon { |
| 51 | width: 1em; | 55 | width: 1em; |
| 52 | height: 1em; | 56 | height: 1em; |
| 53 | vertical-align: -0.15em; | 57 | vertical-align: -0.15em; |
| 54 | fill: currentColor; | 58 | fill: currentColor; |
| 55 | overflow: hidden; | 59 | overflow: hidden; |
| 56 | } | 60 | } |
| 57 | 61 | ||
| 58 | .svg-external-icon { | 62 | .svg-external-icon { |
| 59 | background-color: currentColor; | 63 | background-color: currentColor; |
| 60 | mask-size: cover!important; | 64 | mask-size: cover !important; |
| 61 | display: inline-block; | 65 | display: inline-block; |
| 62 | } | 66 | } |
| 63 | </style> | 67 | </style> | ... | ... |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-07-25 16:09:09 | ||
| 5 | --> | ||
| 1 | <template> | 6 | <template> |
| 2 | <el-color-picker v-model="theme" | 7 | <el-color-picker v-model="theme" |
| 3 | :predefine="['#409EFF', '#1890ff', '#304156', '#212121', '#11a983', '#13c2c2', '#6959CD', '#f5222d',]" | 8 | :predefine="['#409EFF', '#1890ff', '#304156', '#212121', '#11a983', '#13c2c2', '#6959CD', '#f5222d',]" |
| ... | @@ -5,137 +10,154 @@ | ... | @@ -5,137 +10,154 @@ |
| 5 | </template> | 10 | </template> |
| 6 | 11 | ||
| 7 | <script> | 12 | <script> |
| 8 | const version = require('element-ui/package.json').version // element-ui version from node_modules | 13 | const version = require('element-ui/package.json').version // element-ui version from node_modules |
| 9 | const ORIGINAL_THEME = '#409EFF' // default color | 14 | const ORIGINAL_THEME = '#409EFF' // default color |
| 10 | 15 | ||
| 11 | export default { | 16 | export default { |
| 12 | data () { | 17 | data () { |
| 13 | return { | 18 | return { |
| 14 | chalk: '', // content of theme-chalk css | 19 | chalk: '', // content of theme-chalk css |
| 15 | theme: '' | 20 | theme: '' |
| 16 | } | 21 | } |
| 17 | }, | ||
| 18 | computed: { | ||
| 19 | defaultTheme () { | ||
| 20 | return this.$store.state.app.theme | ||
| 21 | } | ||
| 22 | }, | ||
| 23 | watch: { | ||
| 24 | defaultTheme: { | ||
| 25 | handler: function (val, oldVal) { | ||
| 26 | this.theme = val | ||
| 27 | }, | ||
| 28 | immediate: true | ||
| 29 | }, | 22 | }, |
| 30 | async theme (val) { | 23 | computed: { |
| 31 | const oldVal = this.chalk ? this.theme : ORIGINAL_THEME | 24 | defaultTheme () { |
| 32 | if (typeof val !== 'string') return | 25 | return this.$store.state.app.theme |
| 33 | const themeCluster = this.getThemeCluster(val.replace('#', '')) | 26 | } |
| 34 | const originalCluster = this.getThemeCluster(oldVal.replace('#', '')) | 27 | }, |
| 35 | console.log(themeCluster, originalCluster) | 28 | watch: { |
| 36 | 29 | defaultTheme: { | |
| 37 | const $message = this.$message({ | 30 | handler: function (val, oldVal) { |
| 38 | message: ' Compiling the theme', | 31 | this.theme = val |
| 39 | customClass: 'theme-message', | 32 | }, |
| 40 | type: 'success', | 33 | immediate: true |
| 41 | duration: 0, | 34 | }, |
| 42 | iconClass: 'el-icon-loading' | 35 | async theme (val) { |
| 43 | }) | 36 | const oldVal = this.chalk ? this.theme : ORIGINAL_THEME |
| 44 | 37 | if (typeof val !== 'string') return | |
| 45 | const getHandler = (variable, id) => { | 38 | const themeCluster = this.getThemeCluster(val.replace('#', '')) |
| 46 | return () => { | 39 | const originalCluster = this.getThemeCluster(oldVal.replace('#', '')) |
| 47 | const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', '')) | 40 | console.log(themeCluster, originalCluster) |
| 48 | const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster) | 41 | |
| 49 | 42 | const $message = this.$message({ | |
| 50 | let styleTag = document.getElementById(id) | 43 | message: ' Compiling the theme', |
| 51 | if (!styleTag) { | 44 | customClass: 'theme-message', |
| 52 | styleTag = document.createElement('style') | 45 | type: 'success', |
| 53 | styleTag.setAttribute('id', id) | 46 | duration: 0, |
| 54 | document.head.appendChild(styleTag) | 47 | iconClass: 'el-icon-loading' |
| 48 | }) | ||
| 49 | |||
| 50 | const getHandler = (variable, id) => { | ||
| 51 | return () => { | ||
| 52 | const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', '')) | ||
| 53 | const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster) | ||
| 54 | |||
| 55 | let styleTag = document.getElementById(id) | ||
| 56 | if (!styleTag) { | ||
| 57 | styleTag = document.createElement('style') | ||
| 58 | styleTag.setAttribute('id', id) | ||
| 59 | document.head.appendChild(styleTag) | ||
| 60 | } | ||
| 61 | styleTag.innerText = newStyle | ||
| 55 | } | 62 | } |
| 56 | styleTag.innerText = newStyle | ||
| 57 | } | 63 | } |
| 58 | } | ||
| 59 | 64 | ||
| 60 | if (!this.chalk) { | 65 | if (!this.chalk) { |
| 61 | const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css` | 66 | const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css` |
| 62 | await this.getCSSString(url, 'chalk') | 67 | await this.getCSSString(url, 'chalk') |
| 63 | } | 68 | } |
| 64 | 69 | ||
| 65 | const chalkHandler = getHandler('chalk', 'chalk-style') | 70 | const chalkHandler = getHandler('chalk', 'chalk-style') |
| 66 | 71 | ||
| 67 | chalkHandler() | 72 | chalkHandler() |
| 68 | 73 | ||
| 69 | const styles = [].slice.call(document.querySelectorAll('style')) | 74 | const styles = [].slice.call(document.querySelectorAll('style')) |
| 70 | .filter(style => { | 75 | .filter(style => { |
| 71 | const text = style.innerText | 76 | const text = style.innerText |
| 72 | return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text) | 77 | return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text) |
| 78 | }) | ||
| 79 | styles.forEach(style => { | ||
| 80 | const { innerText } = style | ||
| 81 | if (typeof innerText !== 'string') return | ||
| 82 | style.innerText = this.updateStyle(innerText, originalCluster, themeCluster) | ||
| 73 | }) | 83 | }) |
| 74 | styles.forEach(style => { | ||
| 75 | const { innerText } = style | ||
| 76 | if (typeof innerText !== 'string') return | ||
| 77 | style.innerText = this.updateStyle(innerText, originalCluster, themeCluster) | ||
| 78 | }) | ||
| 79 | 84 | ||
| 80 | this.$emit('change', val) | 85 | this.$emit('change', val) |
| 81 | 86 | ||
| 82 | $message.close() | 87 | $message.close() |
| 83 | } | 88 | } |
| 84 | }, | ||
| 85 | |||
| 86 | methods: { | ||
| 87 | /** | ||
| 88 | * @description: updateStyle | ||
| 89 | * @param {*} style | ||
| 90 | * @param {*} oldCluster | ||
| 91 | * @param {*} newCluster | ||
| 92 | * @author: renchao | ||
| 93 | */ | ||
| 94 | updateStyle (style, oldCluster, newCluster) { | ||
| 95 | let newStyle = style | ||
| 96 | oldCluster.forEach((color, index) => { | ||
| 97 | newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index]) | ||
| 98 | }) | ||
| 99 | return newStyle | ||
| 100 | }, | 89 | }, |
| 101 | 90 | ||
| 102 | /** | 91 | methods: { |
| 103 | * @description: getCSSString | 92 | /** |
| 104 | * @param {*} url | 93 | * @description: updateStyle |
| 105 | * @param {*} variable | 94 | * @param {*} style |
| 106 | * @author: renchao | 95 | * @param {*} oldCluster |
| 107 | */ | 96 | * @param {*} newCluster |
| 108 | getCSSString (url, variable) { | 97 | * @author: renchao |
| 109 | return new Promise(resolve => { | 98 | */ |
| 110 | const xhr = new XMLHttpRequest() | 99 | updateStyle (style, oldCluster, newCluster) { |
| 111 | xhr.onreadystatechange = () => { | 100 | let newStyle = style |
| 112 | if (xhr.readyState === 4 && xhr.status === 200) { | 101 | oldCluster.forEach((color, index) => { |
| 113 | this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '') | 102 | newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index]) |
| 114 | resolve() | 103 | }) |
| 104 | return newStyle | ||
| 105 | }, | ||
| 106 | |||
| 107 | /** | ||
| 108 | * @description: getCSSString | ||
| 109 | * @param {*} url | ||
| 110 | * @param {*} variable | ||
| 111 | * @author: renchao | ||
| 112 | */ | ||
| 113 | getCSSString (url, variable) { | ||
| 114 | return new Promise(resolve => { | ||
| 115 | const xhr = new XMLHttpRequest() | ||
| 116 | xhr.onreadystatechange = () => { | ||
| 117 | if (xhr.readyState === 4 && xhr.status === 200) { | ||
| 118 | this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '') | ||
| 119 | resolve() | ||
| 120 | } | ||
| 121 | } | ||
| 122 | xhr.open('GET', url) | ||
| 123 | xhr.send() | ||
| 124 | }) | ||
| 125 | }, | ||
| 126 | |||
| 127 | /** | ||
| 128 | * @description: getThemeCluster | ||
| 129 | * @param {*} theme | ||
| 130 | * @author: renchao | ||
| 131 | */ | ||
| 132 | getThemeCluster (theme) { | ||
| 133 | const tintColor = (color, tint) => { | ||
| 134 | let red = parseInt(color.slice(0, 2), 16) | ||
| 135 | let green = parseInt(color.slice(2, 4), 16) | ||
| 136 | let blue = parseInt(color.slice(4, 6), 16) | ||
| 137 | |||
| 138 | if (tint === 0) { // when primary color is in its rgb space | ||
| 139 | return [red, green, blue].join(',') | ||
| 140 | } else { | ||
| 141 | red += Math.round(tint * (255 - red)) | ||
| 142 | green += Math.round(tint * (255 - green)) | ||
| 143 | blue += Math.round(tint * (255 - blue)) | ||
| 144 | |||
| 145 | red = red.toString(16) | ||
| 146 | green = green.toString(16) | ||
| 147 | blue = blue.toString(16) | ||
| 148 | |||
| 149 | return `#${red}${green}${blue}` | ||
| 115 | } | 150 | } |
| 116 | } | 151 | } |
| 117 | xhr.open('GET', url) | ||
| 118 | xhr.send() | ||
| 119 | }) | ||
| 120 | }, | ||
| 121 | 152 | ||
| 122 | /** | 153 | const shadeColor = (color, shade) => { |
| 123 | * @description: getThemeCluster | 154 | let red = parseInt(color.slice(0, 2), 16) |
| 124 | * @param {*} theme | 155 | let green = parseInt(color.slice(2, 4), 16) |
| 125 | * @author: renchao | 156 | let blue = parseInt(color.slice(4, 6), 16) |
| 126 | */ | 157 | |
| 127 | getThemeCluster (theme) { | 158 | red = Math.round((1 - shade) * red) |
| 128 | const tintColor = (color, tint) => { | 159 | green = Math.round((1 - shade) * green) |
| 129 | let red = parseInt(color.slice(0, 2), 16) | 160 | blue = Math.round((1 - shade) * blue) |
| 130 | let green = parseInt(color.slice(2, 4), 16) | ||
| 131 | let blue = parseInt(color.slice(4, 6), 16) | ||
| 132 | |||
| 133 | if (tint === 0) { // when primary color is in its rgb space | ||
| 134 | return [red, green, blue].join(',') | ||
| 135 | } else { | ||
| 136 | red += Math.round(tint * (255 - red)) | ||
| 137 | green += Math.round(tint * (255 - green)) | ||
| 138 | blue += Math.round(tint * (255 - blue)) | ||
| 139 | 161 | ||
| 140 | red = red.toString(16) | 162 | red = red.toString(16) |
| 141 | green = green.toString(16) | 163 | green = green.toString(16) |
| ... | @@ -143,48 +165,31 @@ export default { | ... | @@ -143,48 +165,31 @@ export default { |
| 143 | 165 | ||
| 144 | return `#${red}${green}${blue}` | 166 | return `#${red}${green}${blue}` |
| 145 | } | 167 | } |
| 146 | } | ||
| 147 | |||
| 148 | const shadeColor = (color, shade) => { | ||
| 149 | let red = parseInt(color.slice(0, 2), 16) | ||
| 150 | let green = parseInt(color.slice(2, 4), 16) | ||
| 151 | let blue = parseInt(color.slice(4, 6), 16) | ||
| 152 | |||
| 153 | red = Math.round((1 - shade) * red) | ||
| 154 | green = Math.round((1 - shade) * green) | ||
| 155 | blue = Math.round((1 - shade) * blue) | ||
| 156 | |||
| 157 | red = red.toString(16) | ||
| 158 | green = green.toString(16) | ||
| 159 | blue = blue.toString(16) | ||
| 160 | 168 | ||
| 161 | return `#${red}${green}${blue}` | 169 | const clusters = [theme] |
| 162 | } | 170 | for (let i = 0; i <= 9; i++) { |
| 163 | 171 | clusters.push(tintColor(theme, Number((i / 10).toFixed(2)))) | |
| 164 | const clusters = [theme] | 172 | } |
| 165 | for (let i = 0; i <= 9; i++) { | 173 | clusters.push(shadeColor(theme, 0.1)) |
| 166 | clusters.push(tintColor(theme, Number((i / 10).toFixed(2)))) | 174 | return clusters |
| 167 | } | 175 | } |
| 168 | clusters.push(shadeColor(theme, 0.1)) | ||
| 169 | return clusters | ||
| 170 | } | 176 | } |
| 171 | } | 177 | } |
| 172 | } | ||
| 173 | </script> | 178 | </script> |
| 174 | 179 | ||
| 175 | <style> | 180 | <style> |
| 176 | .theme-message, | 181 | .theme-message, |
| 177 | .theme-picker-dropdown { | 182 | .theme-picker-dropdown { |
| 178 | z-index: 99999 !important; | 183 | z-index: 99999 !important; |
| 179 | } | 184 | } |
| 180 | 185 | ||
| 181 | .theme-picker .el-color-picker__trigger { | 186 | .theme-picker .el-color-picker__trigger { |
| 182 | height: 26px !important; | 187 | height: 26px !important; |
| 183 | width: 26px !important; | 188 | width: 26px !important; |
| 184 | padding: 2px; | 189 | padding: 2px; |
| 185 | } | 190 | } |
| 186 | 191 | ||
| 187 | .theme-picker-dropdown .el-color-dropdown__link-btn { | 192 | .theme-picker-dropdown .el-color-dropdown__link-btn { |
| 188 | display: none; | 193 | display: none; |
| 189 | } | 194 | } |
| 190 | </style> | 195 | </style> | ... | ... |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-07-25 16:08:48 | ||
| 5 | --> | ||
| 1 | <template> | 6 | <template> |
| 2 | <el-image-viewer :on-close="closeViewer" :url-list="urlList"> | 7 | <el-image-viewer :on-close="closeViewer" :url-list="urlList"> |
| 3 | </el-image-viewer> | 8 | </el-image-viewer> |
| 4 | </template> | 9 | </template> |
| 5 | <script> | 10 | <script> |
| 6 | import ElImageViewer from 'element-ui/packages/image/src/image-viewer' | 11 | import ElImageViewer from 'element-ui/packages/image/src/image-viewer' |
| 7 | export default { | 12 | export default { |
| 8 | components: { | 13 | components: { |
| 9 | ElImageViewer, | 14 | ElImageViewer, |
| 10 | }, | 15 | }, |
| 11 | props: { | 16 | props: { |
| 12 | urlList: { | 17 | urlList: { |
| 13 | type: Array, | 18 | type: Array, |
| 14 | default: function () { | 19 | default: function () { |
| 15 | return [] | 20 | return [] |
| 16 | } | 21 | } |
| 17 | } | ||
| 18 | }, | ||
| 19 | data () { | ||
| 20 | return { | ||
| 21 | wrapperElem: null | ||
| 22 | } | ||
| 23 | }, | ||
| 24 | mounted () { | ||
| 25 | this.$nextTick(() => { | ||
| 26 | let wrapper = document.getElementsByClassName( | ||
| 27 | 'el-image-viewer__actions__inner' | ||
| 28 | ) | ||
| 29 | let downImg = document.createElement('i') | ||
| 30 | downImg.setAttribute('class', 'el-icon-download') | ||
| 31 | wrapper[0].appendChild(downImg) | ||
| 32 | if (wrapper.length > 0) { | ||
| 33 | this.wrapperElem = wrapper[0] | ||
| 34 | this.wrapperElem.addEventListener('click', this.hideCusBtn) | ||
| 35 | } | 22 | } |
| 36 | }) | ||
| 37 | }, | ||
| 38 | methods: { | ||
| 39 | /** | ||
| 40 | * @description: closeViewer | ||
| 41 | * @author: renchao | ||
| 42 | */ | ||
| 43 | closeViewer () { | ||
| 44 | this.$emit('close-viewer') | ||
| 45 | }, | 23 | }, |
| 46 | /** | 24 | data () { |
| 47 | * @description: hideCusBtn | 25 | return { |
| 48 | * @param {*} e | 26 | wrapperElem: null |
| 49 | * @author: renchao | ||
| 50 | */ | ||
| 51 | hideCusBtn (e) { | ||
| 52 | let className = e.target.className | ||
| 53 | if (className === 'el-icon-download') { | ||
| 54 | let imgUrl = document.getElementsByClassName( | ||
| 55 | 'el-image-viewer__canvas' | ||
| 56 | )[0].children[0].src | ||
| 57 | this.downloadImage(imgUrl) | ||
| 58 | } | 27 | } |
| 59 | }, | 28 | }, |
| 60 | /** | 29 | mounted () { |
| 61 | * @description: downloadImage | 30 | this.$nextTick(() => { |
| 62 | * @param {*} imgUrl | 31 | let wrapper = document.getElementsByClassName( |
| 63 | * @author: renchao | 32 | 'el-image-viewer__actions__inner' |
| 64 | */ | 33 | ) |
| 65 | downloadImage (imgUrl) { | 34 | let downImg = document.createElement('i') |
| 66 | let tmpArr = imgUrl.split('/') | 35 | downImg.setAttribute('class', 'el-icon-download') |
| 67 | let fileName = tmpArr[tmpArr.length - 1] | 36 | wrapper[0].appendChild(downImg) |
| 68 | window.URL = window.URL || window.webkitURL | 37 | if (wrapper.length > 0) { |
| 69 | let xhr = new XMLHttpRequest() | 38 | this.wrapperElem = wrapper[0] |
| 70 | xhr.open('get', imgUrl, true) | 39 | this.wrapperElem.addEventListener('click', this.hideCusBtn) |
| 71 | xhr.responseType = 'blob' | 40 | } |
| 72 | xhr.onload = function () { | 41 | }) |
| 73 | if (this.status == 200) { | 42 | }, |
| 74 | //得到一个blob对象 | 43 | methods: { |
| 75 | let blob = this.response | 44 | /** |
| 76 | let fileUrl = window.URL.createObjectURL(blob) | 45 | * @description: closeViewer |
| 77 | let a = document.createElement('a') | 46 | * @author: renchao |
| 78 | ; (document.body || document.documentElement).appendChild(a) | 47 | */ |
| 79 | a.href = fileUrl | 48 | closeViewer () { |
| 80 | if ('download' in a) { | 49 | this.$emit('close-viewer') |
| 81 | a.download = fileName | 50 | }, |
| 82 | } else { | 51 | /** |
| 83 | a.setAttribute('download', fileName) | 52 | * @description: hideCusBtn |
| 53 | * @param {*} e | ||
| 54 | * @author: renchao | ||
| 55 | */ | ||
| 56 | hideCusBtn (e) { | ||
| 57 | let className = e.target.className | ||
| 58 | if (className === 'el-icon-download') { | ||
| 59 | let imgUrl = document.getElementsByClassName( | ||
| 60 | 'el-image-viewer__canvas' | ||
| 61 | )[0].children[0].src | ||
| 62 | this.downloadImage(imgUrl) | ||
| 63 | } | ||
| 64 | }, | ||
| 65 | /** | ||
| 66 | * @description: downloadImage | ||
| 67 | * @param {*} imgUrl | ||
| 68 | * @author: renchao | ||
| 69 | */ | ||
| 70 | downloadImage (imgUrl) { | ||
| 71 | let tmpArr = imgUrl.split('/') | ||
| 72 | let fileName = tmpArr[tmpArr.length - 1] | ||
| 73 | window.URL = window.URL || window.webkitURL | ||
| 74 | let xhr = new XMLHttpRequest() | ||
| 75 | xhr.open('get', imgUrl, true) | ||
| 76 | xhr.responseType = 'blob' | ||
| 77 | xhr.onload = function () { | ||
| 78 | if (this.status == 200) { | ||
| 79 | //得到一个blob对象 | ||
| 80 | let blob = this.response | ||
| 81 | let fileUrl = window.URL.createObjectURL(blob) | ||
| 82 | let a = document.createElement('a') | ||
| 83 | ; (document.body || document.documentElement).appendChild(a) | ||
| 84 | a.href = fileUrl | ||
| 85 | if ('download' in a) { | ||
| 86 | a.download = fileName | ||
| 87 | } else { | ||
| 88 | a.setAttribute('download', fileName) | ||
| 89 | } | ||
| 90 | a.target = '_self' | ||
| 91 | a.click() | ||
| 92 | a.remove() | ||
| 84 | } | 93 | } |
| 85 | a.target = '_self' | ||
| 86 | a.click() | ||
| 87 | a.remove() | ||
| 88 | } | 94 | } |
| 89 | } | 95 | xhr.send() |
| 90 | xhr.send() | 96 | }, |
| 91 | }, | 97 | }, |
| 92 | }, | 98 | } |
| 93 | } | ||
| 94 | </script> | 99 | </script> |
| 95 | 100 | ||
| 96 | <style lang="scss" scoped> | 101 | <style lang="scss" scoped> |
| 97 | /deep/ .el-image-viewer__close { | 102 | /deep/ .el-image-viewer__close { |
| 98 | color: #ffffff; | 103 | color: #ffffff; |
| 99 | } | 104 | } |
| 100 | </style> | 105 | </style> | ... | ... |
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-07-25 16:10:52 | ||
| 5 | --> | ||
| 1 | <template> | 6 | <template> |
| 2 | <div class="app-wrapper"> | 7 | <div class="app-wrapper"> |
| 3 | <navbar /> | 8 | <navbar /> |
| ... | @@ -11,59 +16,59 @@ | ... | @@ -11,59 +16,59 @@ |
| 11 | </div> | 16 | </div> |
| 12 | </template> | 17 | </template> |
| 13 | <script> | 18 | <script> |
| 14 | import { AppMain, Navbar, Sidebar, TagsView } from './components' | 19 | import { AppMain, Navbar, Sidebar, TagsView } from './components' |
| 15 | import ResizeMixin from './mixin/ResizeHandler' | 20 | import ResizeMixin from './mixin/ResizeHandler' |
| 16 | import { mapState } from 'vuex' | 21 | import { mapState } from 'vuex' |
| 17 | export default { | 22 | export default { |
| 18 | name: 'Layout', | 23 | name: 'Layout', |
| 19 | components: { | 24 | components: { |
| 20 | AppMain, | 25 | AppMain, |
| 21 | Navbar, | 26 | Navbar, |
| 22 | Sidebar, | 27 | Sidebar, |
| 23 | TagsView | 28 | TagsView |
| 24 | }, | 29 | }, |
| 25 | mixins: [ResizeMixin], | 30 | mixins: [ResizeMixin], |
| 26 | computed: { | 31 | computed: { |
| 27 | ...mapState({ | 32 | ...mapState({ |
| 28 | sidebar: state => state.app.sidebar, | 33 | sidebar: state => state.app.sidebar, |
| 29 | needTagsView: state => state.settings.tagsView, | 34 | needTagsView: state => state.settings.tagsView, |
| 30 | fixedHeader: state => state.settings.fixedHeader | 35 | fixedHeader: state => state.settings.fixedHeader |
| 31 | }) | 36 | }) |
| 37 | } | ||
| 32 | } | 38 | } |
| 33 | } | ||
| 34 | </script> | 39 | </script> |
| 35 | <style lang="scss" scoped> | 40 | <style lang="scss" scoped> |
| 36 | @import "~@/styles/mixin.scss"; | 41 | @import "~@/styles/mixin.scss"; |
| 37 | 42 | ||
| 38 | .app-wrapper { | 43 | .app-wrapper { |
| 39 | @include clearfix; | 44 | @include clearfix; |
| 40 | position: relative; | 45 | position: relative; |
| 41 | height: 100%; | 46 | height: 100%; |
| 42 | width: 100%; | 47 | width: 100%; |
| 43 | 48 | ||
| 44 | &.mobile.openSidebar { | 49 | &.mobile.openSidebar { |
| 45 | position: fixed; | 50 | position: fixed; |
| 46 | top: 0; | 51 | top: 0; |
| 52 | } | ||
| 47 | } | 53 | } |
| 48 | } | ||
| 49 | 54 | ||
| 50 | .drawer-bg { | 55 | .drawer-bg { |
| 51 | background: #000; | 56 | background: #000; |
| 52 | opacity: 0.3; | 57 | opacity: 0.3; |
| 53 | width: 100%; | 58 | width: 100%; |
| 54 | top: 0; | 59 | top: 0; |
| 55 | height: 100%; | 60 | height: 100%; |
| 56 | position: absolute; | 61 | position: absolute; |
| 57 | z-index: 999; | 62 | z-index: 999; |
| 58 | } | 63 | } |
| 59 | 64 | ||
| 60 | .fixed-header { | 65 | .fixed-header { |
| 61 | width: 100%; | 66 | width: 100%; |
| 62 | transition: width 0.28s; | 67 | transition: width 0.28s; |
| 63 | } | 68 | } |
| 64 | 69 | ||
| 65 | .el-dropdown-menu--small { | 70 | .el-dropdown-menu--small { |
| 66 | padding: 0; | 71 | padding: 0; |
| 67 | width: 5px; | 72 | width: 5px; |
| 68 | } | 73 | } |
| 69 | </style> | 74 | </style> | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: | 2 | * @Description: |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-07-24 14:12:17 | 4 | * @LastEditTime: 2023-07-25 09:27:43 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <div class="from-clues"> | 7 | <div class="from-clues"> |
| ... | @@ -122,10 +122,10 @@ | ... | @@ -122,10 +122,10 @@ |
| 122 | this.$message({ | 122 | this.$message({ |
| 123 | type: 'info', | 123 | type: 'info', |
| 124 | message: '已取消删除' | 124 | message: '已取消删除' |
| 125 | }); | 125 | }) |
| 126 | }); | 126 | }) |
| 127 | }, | 127 | } |
| 128 | }, | 128 | } |
| 129 | }; | 129 | }; |
| 130 | </script> | 130 | </script> |
| 131 | <style scoped lang="scss"> | 131 | <style scoped lang="scss"> | ... | ... |
| ... | @@ -76,7 +76,6 @@ | ... | @@ -76,7 +76,6 @@ |
| 76 | * @author: renchao | 76 | * @author: renchao |
| 77 | */ | 77 | */ |
| 78 | handleSubmit () { | 78 | handleSubmit () { |
| 79 | debugger | ||
| 80 | this.$refs['ruleForm'].validate((valid) => { | 79 | this.$refs['ruleForm'].validate((valid) => { |
| 81 | if (valid) { | 80 | if (valid) { |
| 82 | this.$parent.addSave(this.ruleForm); | 81 | this.$parent.addSave(this.ruleForm); | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: 页面提供插件下载 | 2 | * @Description: 页面提供插件下载 |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-06-13 15:49:55 | 4 | * @LastEditTime: 2023-07-25 09:25:56 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <div class='downLoad'> | 7 | <div class='downLoad'> |
| ... | @@ -21,6 +21,10 @@ | ... | @@ -21,6 +21,10 @@ |
| 21 | } | 21 | } |
| 22 | }, | 22 | }, |
| 23 | methods: { | 23 | methods: { |
| 24 | /** | ||
| 25 | * @description: | ||
| 26 | * @author: renchao | ||
| 27 | */ | ||
| 24 | handleDown () { | 28 | handleDown () { |
| 25 | let a = document.createElement('a') | 29 | let a = document.createElement('a') |
| 26 | a.style.display = 'none' | 30 | a.style.display = 'none' | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: 流程图 | 2 | * @Description: 流程图 |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-07-19 16:04:34 | 4 | * @LastEditTime: 2023-07-25 09:26:01 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <div class='flowChart'> | 7 | <div class='flowChart'> |
| ... | @@ -9,7 +9,6 @@ | ... | @@ -9,7 +9,6 @@ |
| 9 | </div> | 9 | </div> |
| 10 | </template> | 10 | </template> |
| 11 | <script> | 11 | <script> |
| 12 | |||
| 13 | export default { | 12 | export default { |
| 14 | props: { | 13 | props: { |
| 15 | formData: { | 14 | formData: { | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: | 2 | * @Description: |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-07-24 10:15:01 | 4 | * @LastEditTime: 2023-07-25 09:26:10 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <div class="from-clues"> | 7 | <div class="from-clues"> |
| ... | @@ -79,6 +79,10 @@ | ... | @@ -79,6 +79,10 @@ |
| 79 | } | 79 | } |
| 80 | }) | 80 | }) |
| 81 | }, | 81 | }, |
| 82 | /** | ||
| 83 | * @description: | ||
| 84 | * @author: renchao | ||
| 85 | */ | ||
| 82 | zslqClick () { | 86 | zslqClick () { |
| 83 | this.$popupDialog("不动产权证领取", "workflow/components/dialog/zslq", {}, '80%', true) | 87 | this.$popupDialog("不动产权证领取", "workflow/components/dialog/zslq", {}, '80%', true) |
| 84 | } | 88 | } | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: workFrame左侧菜单列表-普通 | 2 | * @Description: workFrame左侧菜单列表-普通 |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-07-21 10:15:11 | 4 | * @LastEditTime: 2023-07-25 14:55:49 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <div class="leftmenu" :class="{ 'animation-map-drawer': isShowdrawer }"> | 7 | <div class="leftmenu" :class="{ 'animation-map-drawer': isShowdrawer }"> |
| ... | @@ -40,7 +40,7 @@ | ... | @@ -40,7 +40,7 @@ |
| 40 | </template> | 40 | </template> |
| 41 | <script> | 41 | <script> |
| 42 | import { mapGetters } from 'vuex' | 42 | import { mapGetters } from 'vuex' |
| 43 | import { leftMenu, deleteSlbdcdy } from "@/api/workFlow.js" | 43 | import { leftMenu, deleteSlbdcdy, jdcxLeftMenu } from "@/api/workFlow.js" |
| 44 | export default { | 44 | export default { |
| 45 | data () { | 45 | data () { |
| 46 | return { | 46 | return { |
| ... | @@ -85,26 +85,47 @@ | ... | @@ -85,26 +85,47 @@ |
| 85 | loadBdcdylist () { | 85 | loadBdcdylist () { |
| 86 | var formdata = new FormData(); | 86 | var formdata = new FormData(); |
| 87 | formdata.append("bsmSlsq", this.bsmSlsq); | 87 | formdata.append("bsmSlsq", this.bsmSlsq); |
| 88 | formdata.append("bestepid", this.bestepid); | 88 | if (this.$route.query.bestepid) { |
| 89 | formdata.append("bestepid", this.bestepid); | ||
| 90 | } | ||
| 89 | if (this.$route.query.bsmBusiness) { | 91 | if (this.$route.query.bsmBusiness) { |
| 90 | formdata.append("bsmBusiness", this.$route.query.bsmBusiness); | 92 | formdata.append("bsmBusiness", this.$route.query.bsmBusiness); |
| 91 | } | 93 | } |
| 92 | leftMenu(formdata).then((res) => { | 94 | if (this.$route.query.type == 'jdcx') { |
| 93 | if (res.code === 200 && res.result) { | 95 | jdcxLeftMenu(formdata).then((res) => { |
| 94 | this.unitData = res.result; | 96 | if (res.code === 200 && res.result) { |
| 95 | window.unitData = res.result; | 97 | this.unitData = res.result; |
| 96 | this.currentSelectProps = res.result[0]; | 98 | window.unitData = res.result; |
| 97 | this.$emit('getCurrentSelectProps', this.currentSelectProps); | 99 | this.currentSelectProps = res.result[0]; |
| 98 | this.judgeBatchShow(); | 100 | this.$emit('getCurrentSelectProps', this.currentSelectProps); |
| 99 | if (this.showBatch) { | 101 | this.judgeBatchShow(); |
| 100 | //满足批量查封/批量抵押按钮出现 即先展示批量表单 | 102 | if (this.showBatch) { |
| 101 | this.batchUnitClick(); | 103 | //满足批量查封/批量抵押按钮出现 即先展示批量表单 |
| 102 | } else { | 104 | this.batchUnitClick(); |
| 103 | //默认选择单元列表第一个 | 105 | } else { |
| 104 | this.unitClick(0); | 106 | //默认选择单元列表第一个 |
| 107 | this.unitClick(0); | ||
| 108 | } | ||
| 105 | } | 109 | } |
| 106 | } | 110 | }) |
| 107 | }) | 111 | } else { |
| 112 | leftMenu(formdata).then((res) => { | ||
| 113 | if (res.code === 200 && res.result) { | ||
| 114 | this.unitData = res.result; | ||
| 115 | window.unitData = res.result; | ||
| 116 | this.currentSelectProps = res.result[0]; | ||
| 117 | this.$emit('getCurrentSelectProps', this.currentSelectProps); | ||
| 118 | this.judgeBatchShow(); | ||
| 119 | if (this.showBatch) { | ||
| 120 | //满足批量查封/批量抵押按钮出现 即先展示批量表单 | ||
| 121 | this.batchUnitClick(); | ||
| 122 | } else { | ||
| 123 | //默认选择单元列表第一个 | ||
| 124 | this.unitClick(0); | ||
| 125 | } | ||
| 126 | } | ||
| 127 | }) | ||
| 128 | } | ||
| 108 | }, | 129 | }, |
| 109 | //批量按钮判断 | 130 | //批量按钮判断 |
| 110 | /** | 131 | /** |
| ... | @@ -177,9 +198,8 @@ | ... | @@ -177,9 +198,8 @@ |
| 177 | * @author: renchao | 198 | * @author: renchao |
| 178 | */ | 199 | */ |
| 179 | batchUnitClick () { | 200 | batchUnitClick () { |
| 180 | debugger | ||
| 181 | this.currentSelectProps.batchOperation = true; | 201 | this.currentSelectProps.batchOperation = true; |
| 182 | // this.activeIndex = "-1"; | 202 | this.activeIndex = "-1"; |
| 183 | this.$parent.stepForm(0); | 203 | this.$parent.stepForm(0); |
| 184 | 204 | ||
| 185 | }, | 205 | }, |
| ... | @@ -201,7 +221,7 @@ | ... | @@ -201,7 +221,7 @@ |
| 201 | * @author: renchao | 221 | * @author: renchao |
| 202 | */ | 222 | */ |
| 203 | unitClick (index) { | 223 | unitClick (index) { |
| 204 | if(this.unitData.length==0) return | 224 | if (this.unitData.length == 0) return |
| 205 | this.currentSelectProps = this.unitData[index]; | 225 | this.currentSelectProps = this.unitData[index]; |
| 206 | this.currentSelectProps.batchOperation = false; | 226 | this.currentSelectProps.batchOperation = false; |
| 207 | this.activeIndex = index.toString(); | 227 | this.activeIndex = index.toString(); | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: workFrame左侧菜单列表-分割 | 2 | * @Description: workFrame左侧菜单列表-分割 |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-07-17 16:21:24 | 4 | * @LastEditTime: 2023-07-25 14:52:40 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <div class="leftmenu" :class="{ 'animation-map-drawer': isShowdrawer }"> | 7 | <div class="leftmenu" :class="{ 'animation-map-drawer': isShowdrawer }"> |
| ... | @@ -53,7 +53,7 @@ | ... | @@ -53,7 +53,7 @@ |
| 53 | </template> | 53 | </template> |
| 54 | <script> | 54 | <script> |
| 55 | import { mapGetters } from 'vuex' | 55 | import { mapGetters } from 'vuex' |
| 56 | import { leftMenu, deleteFlow } from "@/api/workFlow.js" | 56 | import { leftMenu, deleteFlow, jdcxLeftMenu } from "@/api/workFlow.js" |
| 57 | export default { | 57 | export default { |
| 58 | data () { | 58 | data () { |
| 59 | return { | 59 | return { |
| ... | @@ -102,26 +102,47 @@ | ... | @@ -102,26 +102,47 @@ |
| 102 | loadBdcdylist () { | 102 | loadBdcdylist () { |
| 103 | var formdata = new FormData(); | 103 | var formdata = new FormData(); |
| 104 | formdata.append("bsmSlsq", this.bsmSlsq); | 104 | formdata.append("bsmSlsq", this.bsmSlsq); |
| 105 | formdata.append("bestepid", this.bestepid); | 105 | if (this.$route.query.bestepid) { |
| 106 | formdata.append("bestepid", this.bestepid); | ||
| 107 | } | ||
| 106 | if (this.$route.query.bsmBusiness) { | 108 | if (this.$route.query.bsmBusiness) { |
| 107 | formdata.append("bsmBusiness", this.$route.query.bsmBusiness); | 109 | formdata.append("bsmBusiness", this.$route.query.bsmBusiness); |
| 108 | } | 110 | } |
| 109 | leftMenu(formdata).then((res) => { | 111 | if (this.$route.query.type == 'jdcx') { |
| 110 | if (res.code === 200 && res.result) { | 112 | jdcxLeftMenu(formdata).then((res) => { |
| 111 | this.aroundUnitData = res.result.filter(item => item.bglx == '1') | 113 | if (res.code === 200 && res.result) { |
| 112 | this.afterUnitData = res.result.filter(item => item.bglx == '2') | 114 | this.aroundUnitData = res.result.filter(item => item.bglx == '1') |
| 113 | this.currentSelectProps = res.result[0]; | 115 | this.afterUnitData = res.result.filter(item => item.bglx == '2') |
| 114 | this.$emit('getCurrentSelectProps', this.currentSelectProps); | 116 | this.currentSelectProps = res.result[0]; |
| 115 | this.judgeBatchShow(); | 117 | this.$emit('getCurrentSelectProps', this.currentSelectProps); |
| 116 | if (this.showBatch) { | 118 | this.judgeBatchShow(); |
| 117 | //满足批量查封/批量抵押按钮出现 即先展示批量表单 | 119 | if (this.showBatch) { |
| 118 | this.batchUnitClick(); | 120 | //满足批量查封/批量抵押按钮出现 即先展示批量表单 |
| 119 | } else { | 121 | this.batchUnitClick(); |
| 120 | //默认选择单元列表第一个 | 122 | } else { |
| 121 | this.unitClick(0); | 123 | //默认选择单元列表第一个 |
| 124 | this.unitClick(0); | ||
| 125 | } | ||
| 122 | } | 126 | } |
| 123 | } | 127 | }) |
| 124 | }) | 128 | } else { |
| 129 | leftMenu(formdata).then((res) => { | ||
| 130 | if (res.code === 200 && res.result) { | ||
| 131 | this.aroundUnitData = res.result.filter(item => item.bglx == '1') | ||
| 132 | this.afterUnitData = res.result.filter(item => item.bglx == '2') | ||
| 133 | this.currentSelectProps = res.result[0]; | ||
| 134 | this.$emit('getCurrentSelectProps', this.currentSelectProps); | ||
| 135 | this.judgeBatchShow(); | ||
| 136 | if (this.showBatch) { | ||
| 137 | //满足批量查封/批量抵押按钮出现 即先展示批量表单 | ||
| 138 | this.batchUnitClick(); | ||
| 139 | } else { | ||
| 140 | //默认选择单元列表第一个 | ||
| 141 | this.unitClick(0); | ||
| 142 | } | ||
| 143 | } | ||
| 144 | }) | ||
| 145 | } | ||
| 125 | }, | 146 | }, |
| 126 | //批量按钮判断 | 147 | //批量按钮判断 |
| 127 | /** | 148 | /** |
| ... | @@ -178,7 +199,7 @@ | ... | @@ -178,7 +199,7 @@ |
| 178 | }); | 199 | }); |
| 179 | }, | 200 | }, |
| 180 | 201 | ||
| 181 | //批量按钮点击事件 | 202 | //批量按钮点击事件 |
| 182 | /** | 203 | /** |
| 183 | * @description: 批量按钮点击事件 | 204 | * @description: 批量按钮点击事件 |
| 184 | * @author: renchao | 205 | * @author: renchao | ... | ... |
| ... | @@ -10,8 +10,7 @@ | ... | @@ -10,8 +10,7 @@ |
| 10 | v-show="!isLoading" | 10 | v-show="!isLoading" |
| 11 | ref="processCanvas" | 11 | ref="processCanvas" |
| 12 | class="process-canvas" | 12 | class="process-canvas" |
| 13 | style="height: 280px" | 13 | style="height: 280px" /> |
| 14 | /> | ||
| 15 | <!-- 自定义箭头样式，用于成功状态下流程连线箭头 --> | 14 | <!-- 自定义箭头样式，用于成功状态下流程连线箭头 --> |
| 16 | <defs ref="customSuccessDefs"> | 15 | <defs ref="customSuccessDefs"> |
| 17 | <marker | 16 | <marker |
| ... | @@ -21,8 +20,7 @@ | ... | @@ -21,8 +20,7 @@ |
| 21 | ref-y="10" | 20 | ref-y="10" |
| 22 | marker-width="10" | 21 | marker-width="10" |
| 23 | marker-height="10" | 22 | marker-height="10" |
| 24 | orient="auto" | 23 | orient="auto"> |
| 25 | > | ||
| 26 | <path | 24 | <path |
| 27 | class="success-arrow" | 25 | class="success-arrow" |
| 28 | d="M 1 5 L 11 10 L 1 15 Z" | 26 | d="M 1 5 L 11 10 L 1 15 Z" |
| ... | @@ -30,8 +28,7 @@ | ... | @@ -30,8 +28,7 @@ |
| 30 | stroke-width: 1px; | 28 | stroke-width: 1px; |
| 31 | stroke-linecap: round; | 29 | stroke-linecap: round; |
| 32 | stroke-dasharray: 10000, 1; | 30 | stroke-dasharray: 10000, 1; |
| 33 | " | 31 | " /> |
| 34 | /> | ||
| 35 | </marker> | 32 | </marker> |
| 36 | <marker | 33 | <marker |
| 37 | id="conditional-flow-marker-white-success" | 34 | id="conditional-flow-marker-white-success" |
| ... | @@ -40,8 +37,7 @@ | ... | @@ -40,8 +37,7 @@ |
| 40 | ref-y="10" | 37 | ref-y="10" |
| 41 | marker-width="10" | 38 | marker-width="10" |
| 42 | marker-height="10" | 39 | marker-height="10" |
| 43 | orient="auto" | 40 | orient="auto"> |
| 44 | > | ||
| 45 | <path | 41 | <path |
| 46 | class="success-conditional" | 42 | class="success-conditional" |
| 47 | d="M 0 10 L 8 6 L 16 10 L 8 14 Z" | 43 | d="M 0 10 L 8 6 L 16 10 L 8 14 Z" |
| ... | @@ -49,8 +45,7 @@ | ... | @@ -49,8 +45,7 @@ |
| 49 | stroke-width: 1px; | 45 | stroke-width: 1px; |
| 50 | stroke-linecap: round; | 46 | stroke-linecap: round; |
| 51 | stroke-dasharray: 10000, 1; | 47 | stroke-dasharray: 10000, 1; |
| 52 | " | 48 | " /> |
| 53 | /> | ||
| 54 | </marker> | 49 | </marker> |
| 55 | </defs> | 50 | </defs> |
| 56 | <!-- 自定义箭头样式，用于失败状态下流程连线箭头 --> | 51 | <!-- 自定义箭头样式，用于失败状态下流程连线箭头 --> |
| ... | @@ -62,8 +57,7 @@ | ... | @@ -62,8 +57,7 @@ |
| 62 | ref-y="10" | 57 | ref-y="10" |
| 63 | marker-width="10" | 58 | marker-width="10" |
| 64 | marker-height="10" | 59 | marker-height="10" |
| 65 | orient="auto" | 60 | orient="auto"> |
| 66 | > | ||
| 67 | <path | 61 | <path |
| 68 | class="fail-arrow" | 62 | class="fail-arrow" |
| 69 | d="M 1 5 L 11 10 L 1 15 Z" | 63 | d="M 1 5 L 11 10 L 1 15 Z" |
| ... | @@ -71,8 +65,7 @@ | ... | @@ -71,8 +65,7 @@ |
| 71 | stroke-width: 1px; | 65 | stroke-width: 1px; |
| 72 | stroke-linecap: round; | 66 | stroke-linecap: round; |
| 73 | stroke-dasharray: 10000, 1; | 67 | stroke-dasharray: 10000, 1; |
| 74 | " | 68 | " /> |
| 75 | /> | ||
| 76 | </marker> | 69 | </marker> |
| 77 | <marker | 70 | <marker |
| 78 | id="conditional-flow-marker-white-fail" | 71 | id="conditional-flow-marker-white-fail" |
| ... | @@ -81,8 +74,7 @@ | ... | @@ -81,8 +74,7 @@ |
| 81 | ref-y="10" | 74 | ref-y="10" |
| 82 | marker-width="10" | 75 | marker-width="10" |
| 83 | marker-height="10" | 76 | marker-height="10" |
| 84 | orient="auto" | 77 | orient="auto"> |
| 85 | > | ||
| 86 | <path | 78 | <path |
| 87 | class="fail-conditional" | 79 | class="fail-conditional" |
| 88 | d="M 0 10 L 8 6 L 16 10 L 8 14 Z" | 80 | d="M 0 10 L 8 6 L 16 10 L 8 14 Z" |
| ... | @@ -90,8 +82,7 @@ | ... | @@ -90,8 +82,7 @@ |
| 90 | stroke-width: 1px; | 82 | stroke-width: 1px; |
| 91 | stroke-linecap: round; | 83 | stroke-linecap: round; |
| 92 | stroke-dasharray: 10000, 1; | 84 | stroke-dasharray: 10000, 1; |
| 93 | " | 85 | " /> |
| 94 | /> | ||
| 95 | </marker> | 86 | </marker> |
| 96 | </defs> | 87 | </defs> |
| 97 | 88 | ||
| ... | @@ -104,8 +95,7 @@ | ... | @@ -104,8 +95,7 @@ |
| 104 | :plain="true" | 95 | :plain="true" |
| 105 | :disabled="defaultZoom <= 0.3" | 96 | :disabled="defaultZoom <= 0.3" |
| 106 | icon="el-icon-zoom-out" | 97 | icon="el-icon-zoom-out" |
| 107 | @click="processZoomOut()" | 98 | @click="processZoomOut()" /> |
| 108 | /> | ||
| 109 | <el-button size="medium" type="default" style="width: 90px">{{ | 99 | <el-button size="medium" type="default" style="width: 90px">{{ |
| 110 | Math.floor(this.defaultZoom * 10 * 10) + "%" | 100 | Math.floor(this.defaultZoom * 10 * 10) + "%" |
| 111 | }}</el-button> | 101 | }}</el-button> |
| ... | @@ -115,14 +105,12 @@ | ... | @@ -115,14 +105,12 @@ |
| 115 | :plain="true" | 105 | :plain="true" |
| 116 | :disabled="defaultZoom >= 3.9" | 106 | :disabled="defaultZoom >= 3.9" |
| 117 | icon="el-icon-zoom-in" | 107 | icon="el-icon-zoom-in" |
| 118 | @click="processZoomIn()" | 108 | @click="processZoomIn()" /> |
| 119 | /> | ||
| 120 | <el-button | 109 | <el-button |
| 121 | size="medium" | 110 | size="medium" |
| 122 | type="default" | 111 | type="default" |
| 123 | icon="el-icon-c-scale-to-original" | 112 | icon="el-icon-c-scale-to-original" |
| 124 | @click="processReZoom()" | 113 | @click="processReZoom()" /> |
| 125 | /> | ||
| 126 | <slot /> | 114 | <slot /> |
| 127 | </el-button-group> | 115 | </el-button-group> |
| 128 | </el-row> | 116 | </el-row> |
| ... | @@ -135,8 +123,7 @@ | ... | @@ -135,8 +123,7 @@ |
| 135 | v-for="item in selectOptions" | 123 | v-for="item in selectOptions" |
| 136 | :key="item.value" | 124 | :key="item.value" |
| 137 | :label="item.label" | 125 | :label="item.label" |
| 138 | :value="item.value" | 126 | :value="item.value"> |
| 139 | > | ||
| 140 | </el-option> | 127 | </el-option> |
| 141 | </el-select> | 128 | </el-select> |
| 142 | <el-table | 129 | <el-table |
| ... | @@ -144,15 +131,13 @@ | ... | @@ -144,15 +131,13 @@ |
| 144 | :data="taskCommentList" | 131 | :data="taskCommentList" |
| 145 | size="mini" | 132 | size="mini" |
| 146 | border | 133 | border |
| 147 | header-cell-class-name="table-header-gray" | 134 | header-cell-class-name="table-header-gray"> |
| 148 | > | ||
| 149 | <el-table-column | 135 | <el-table-column |
| 150 | label="序号" | 136 | label="序号" |
| 151 | header-align="center" | 137 | header-align="center" |
| 152 | align="center" | 138 | align="center" |
| 153 | type="index" | 139 | type="index" |
| 154 | width="55px" | 140 | width="55px" /> |
| 155 | /> | ||
| 156 | <el-table-column label="流程状态" header-align="center" align="center"> | 141 | <el-table-column label="流程状态" header-align="center" align="center"> |
| 157 | <template slot-scope="scope"> | 142 | <template slot-scope="scope"> |
| 158 | <div v-if="scope.row.endTime">已完结</div> | 143 | <div v-if="scope.row.endTime">已完结</div> |
| ... | @@ -163,35 +148,30 @@ | ... | @@ -163,35 +148,30 @@ |
| 163 | label="环节名称" | 148 | label="环节名称" |
| 164 | prop="name" | 149 | prop="name" |
| 165 | minWidth="100" | 150 | minWidth="100" |
| 166 | align="center" | 151 | align="center" /> |
| 167 | /> | ||
| 168 | <el-table-column | 152 | <el-table-column |
| 169 | label="办理人" | 153 | label="办理人" |
| 170 | prop="agent" | 154 | prop="agent" |
| 171 | minWidth="120" | 155 | minWidth="120" |
| 172 | align="center" | 156 | align="center" /> |
| 173 | /> | ||
| 174 | <el-table-column | 157 | <el-table-column |
| 175 | label="转入时间" | 158 | label="转入时间" |
| 176 | prop="createTime" | 159 | prop="createTime" |
| 177 | :formatter="formatDate" | 160 | :formatter="formatDate" |
| 178 | width="160" | 161 | width="160" |
| 179 | align="center" | 162 | align="center" /> |
| 180 | /> | ||
| 181 | <el-table-column | 163 | <el-table-column |
| 182 | label="认领时间" | 164 | label="认领时间" |
| 183 | prop="claimTime" | 165 | prop="claimTime" |
| 184 | :formatter="formatDate" | 166 | :formatter="formatDate" |
| 185 | width="160" | 167 | width="160" |
| 186 | align="center" | 168 | align="center" /> |
| 187 | /> | ||
| 188 | <el-table-column | 169 | <el-table-column |
| 189 | label="转出时间" | 170 | label="转出时间" |
| 190 | prop="endTime" | 171 | prop="endTime" |
| 191 | :formatter="formatDate" | 172 | :formatter="formatDate" |
| 192 | width="160" | 173 | width="160" |
| 193 | align="center" | 174 | align="center" /> |
| 194 | /> | ||
| 195 | <el-table-column label="操作方式" prop="controls" align="center" /> | 175 | <el-table-column label="操作方式" prop="controls" align="center" /> |
| 196 | <el-table-column label="意见" prop="idea" align="center" /> | 176 | <el-table-column label="意见" prop="idea" align="center" /> |
| 197 | </el-table> | 177 | </el-table> |
| ... | @@ -199,386 +179,386 @@ | ... | @@ -199,386 +179,386 @@ |
| 199 | </div> | 179 | </div> |
| 200 | </template> | 180 | </template> |
| 201 | <script> | 181 | <script> |
| 202 | import "@/styles/package/theme/index.scss"; | 182 | import "@/styles/package/theme/index.scss"; |
| 203 | import BpmnViewer from "bpmn-js/lib/Viewer"; | 183 | import BpmnViewer from "bpmn-js/lib/Viewer"; |
| 204 | import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas"; | 184 | import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas"; |
| 205 | export default { | 185 | export default { |
| 206 | props: { | 186 | props: { |
| 207 | formData: { | 187 | formData: { |
| 208 | type: Object, | 188 | type: Object, |
| 209 | default: {}, | 189 | default: {}, |
| 210 | }, | 190 | }, |
| 211 | }, | ||
| 212 | data() { | ||
| 213 | return { | ||
| 214 | dlgTitle: undefined, | ||
| 215 | defaultZoom: 1, | ||
| 216 | // 是否正在加载流程图 | ||
| 217 | isLoading: true, | ||
| 218 | bpmnViewer: undefined, | ||
| 219 | // 已完成流程元素 | ||
| 220 | processNodeInfo: undefined, | ||
| 221 | // 当前任务id | ||
| 222 | selectTaskId: undefined, | ||
| 223 | // 任务节点审批记录 | ||
| 224 | taskList: [], | ||
| 225 | taskCommentList: [], | ||
| 226 | // 已完成任务悬浮延迟Timer | ||
| 227 | hoverTimer: null, | ||
| 228 | // 下拉 | ||
| 229 | selectValue: "", | ||
| 230 | selectOptions: [], | ||
| 231 | }; | ||
| 232 | }, | ||
| 233 | created() { | ||
| 234 | this.$nextTick(() => { | ||
| 235 | // 获取流程记录 | ||
| 236 | this.getCommentList(); | ||
| 237 | this.setProcessStatus(this.formData.finishedInfo); | ||
| 238 | this.importXML(this.formData.xml); | ||
| 239 | }); | ||
| 240 | }, | ||
| 241 | destroyed() { | ||
| 242 | this.clearViewer(); | ||
| 243 | }, | ||
| 244 | methods: { | ||
| 245 | /** | ||
| 246 | * @description: formatDate | ||
| 247 | * @param {*} row | ||
| 248 | * @param {*} column | ||
| 249 | * @author: renchao | ||
| 250 | */ | ||
| 251 | formatDate(row, column) { | ||
| 252 | let data = row[column.property]; | ||
| 253 | if (data == null) { | ||
| 254 | return null; | ||
| 255 | } | ||
| 256 | let dt = new Date(data); | ||
| 257 | return ( | ||
| 258 | dt.getFullYear() + | ||
| 259 | "-" + | ||
| 260 | (dt.getMonth() + 1) + | ||
| 261 | "-" + | ||
| 262 | dt.getDate() + | ||
| 263 | " " + | ||
| 264 | dt.getHours() + | ||
| 265 | ":" + | ||
| 266 | dt.getMinutes() + | ||
| 267 | ":" + | ||
| 268 | dt.getSeconds() | ||
| 269 | ); | ||
| 270 | }, | ||
| 271 | /** | ||
| 272 | * @description: processReZoom | ||
| 273 | * @author: renchao | ||
| 274 | */ | ||
| 275 | processReZoom() { | ||
| 276 | this.defaultZoom = 1; | ||
| 277 | this.bpmnViewer.get("canvas").zoom("fit-viewport", "auto"); | ||
| 278 | }, | ||
| 279 | /** | ||
| 280 | * @description: processZoomIn | ||
| 281 | * @param {*} zoomStep | ||
| 282 | * @author: renchao | ||
| 283 | */ | ||
| 284 | processZoomIn(zoomStep = 0.1) { | ||
| 285 | const newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100; | ||
| 286 | if (newZoom > 4) { | ||
| 287 | throw new Error( | ||
| 288 | "[Process Designer Warn ]: The zoom ratio cannot be greater than 4" | ||
| 289 | ); | ||
| 290 | } | ||
| 291 | this.defaultZoom = newZoom; | ||
| 292 | this.bpmnViewer.get("canvas").zoom(this.defaultZoom); | ||
| 293 | }, | ||
| 294 | /** | ||
| 295 | * @description: processZoomOut | ||
| 296 | * @param {*} zoomStep | ||
| 297 | * @author: renchao | ||
| 298 | */ | ||
| 299 | processZoomOut(zoomStep = 0.1) { | ||
| 300 | const newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100; | ||
| 301 | if (newZoom < 0.2) { | ||
| 302 | throw new Error( | ||
| 303 | "[Process Designer Warn ]: The zoom ratio cannot be scss than 0.2" | ||
| 304 | ); | ||
| 305 | } | ||
| 306 | this.defaultZoom = newZoom; | ||
| 307 | this.bpmnViewer.get("canvas").zoom(this.defaultZoom); | ||
| 308 | }, | ||
| 309 | /** | ||
| 310 | * @description: getOperationTagType | ||
| 311 | * @param {*} type | ||
| 312 | * @author: renchao | ||
| 313 | */ | ||
| 314 | getOperationTagType(type) { | ||
| 315 | return "success"; | ||
| 316 | }, | ||
| 317 | // 流程图预览清空 | ||
| 318 | /** | ||
| 319 | * @description: 流程图预览清空 | ||
| 320 | * @param {*} e | ||
| 321 | * @author: renchao | ||
| 322 | */ | ||
| 323 | clearViewer(a) { | ||
| 324 | if (this.$refs.processCanvas) { | ||
| 325 | this.$refs.processCanvas.innerHTML = ""; | ||
| 326 | } | ||
| 327 | if (this.bpmnViewer) { | ||
| 328 | this.bpmnViewer.destroy(); | ||
| 329 | } | ||
| 330 | this.bpmnViewer = null; | ||
| 331 | }, | 191 | }, |
| 332 | // 添加自定义箭头 | 192 | data () { |
| 333 | /** | 193 | return { |
| 334 | * @description: 添加自定义箭头 | 194 | dlgTitle: undefined, |
| 335 | * @author: renchao | 195 | defaultZoom: 1, |
| 336 | */ | 196 | // 是否正在加载流程图 |
| 337 | addCustomDefs() { | 197 | isLoading: true, |
| 338 | const canvas = this.bpmnViewer.get("canvas"); | 198 | bpmnViewer: undefined, |
| 339 | const svg = canvas._svg; | 199 | // 已完成流程元素 |
| 340 | const customSuccessDefs = this.$refs.customSuccessDefs; | 200 | processNodeInfo: undefined, |
| 341 | const customFailDefs = this.$refs.customFailDefs; | 201 | // 当前任务id |
| 342 | svg.appendChild(customSuccessDefs); | 202 | selectTaskId: undefined, |
| 343 | svg.appendChild(customFailDefs); | 203 | // 任务节点审批记录 |
| 204 | taskList: [], | ||
| 205 | taskCommentList: [], | ||
| 206 | // 已完成任务悬浮延迟Timer | ||
| 207 | hoverTimer: null, | ||
| 208 | // 下拉 | ||
| 209 | selectValue: "", | ||
| 210 | selectOptions: [], | ||
| 211 | }; | ||
| 344 | }, | 212 | }, |
| 345 | // 任务悬浮弹窗 | 213 | created () { |
| 346 | /** | 214 | this.$nextTick(() => { |
| 347 | * @description: 任务悬浮弹窗 | 215 | // 获取流程记录 |
| 348 | * @param {*} element | 216 | this.getCommentList(); |
| 349 | * @author: renchao | 217 | this.setProcessStatus(this.formData.finishedInfo); |
| 350 | */ | 218 | this.importXML(this.formData.xml); |
| 351 | onSelectElement(element) { | ||
| 352 | this.selectTaskId = undefined; | ||
| 353 | this.dlgTitle = undefined; | ||
| 354 | let allfinishedTaskSet = [ | ||
| 355 | ...this.processNodeInfo.finishedTaskSet, | ||
| 356 | ...this.processNodeInfo.unfinishedTaskSet, | ||
| 357 | ]; | ||
| 358 | if (this.processNodeInfo == null || allfinishedTaskSet == null) return; | ||
| 359 | if (element == null || allfinishedTaskSet.indexOf(element.id) === -1) { | ||
| 360 | return; | ||
| 361 | } | ||
| 362 | this.selectTaskId = element.id; | ||
| 363 | this.selectValue = element.id; | ||
| 364 | this.dlgTitle = element.businessObject | ||
| 365 | ? element.businessObject.name | ||
| 366 | : undefined; | ||
| 367 | // 计算当前悬浮任务审批记录，如果记录为空不显示弹窗 | ||
| 368 | this.taskCommentList = (this.taskList || []).filter((item) => { | ||
| 369 | return item.taskDefinitionKey === this.selectTaskId; | ||
| 370 | }); | 219 | }); |
| 371 | if (this.taskCommentList.length == 0) { | ||
| 372 | this.taskCommentList = this.taskList; | ||
| 373 | } | ||
| 374 | }, | 220 | }, |
| 375 | // 下拉列表切换 | 221 | destroyed () { |
| 376 | /** | 222 | this.clearViewer(); |
| 377 | * @description: 下拉列表切换 | ||
| 378 | * @param {*} val | ||
| 379 | * @author: renchao | ||
| 380 | */ | ||
| 381 | handleSelect(val) { | ||
| 382 | this.taskCommentList = (this.taskList || []).filter((item) => { | ||
| 383 | return item.taskDefinitionKey === val; | ||
| 384 | }); | ||
| 385 | if (this.taskCommentList.length == 0) { | ||
| 386 | this.taskCommentList = this.taskList; | ||
| 387 | } | ||
| 388 | }, | 223 | }, |
| 389 | // 显示流程图 | 224 | methods: { |
| 390 | /** | 225 | /** |
| 391 | * @description: 显示流程图 | 226 | * @description: formatDate |
| 392 | * @param {*} xml | 227 | * @param {*} row |
| 393 | * @author: renchao | 228 | * @param {*} column |
| 394 | */ | 229 | * @author: renchao |
| 395 | async importXML(xml) { | 230 | */ |
| 396 | let xmlData = this.$x2js.xml2js(xml).definitions.process; | 231 | formatDate (row, column) { |
| 397 | this.selectOptions = xmlData.userTask.map((item) => { | 232 | let data = row[column.property]; |
| 398 | return { value: item._id, label: item._name }; | 233 | if (data == null) { |
| 399 | }); | 234 | return null; |
| 400 | this.selectOptions = [ | ||
| 401 | { value: xmlData.startEvent._id, label: "浏览记录" }, | ||
| 402 | ...this.selectOptions, | ||
| 403 | ]; | ||
| 404 | this.selectOptions = this.selectOptions | ||
| 405 | .map((item) => { | ||
| 406 | if (this.formData.finishedInfo.finishedTaskSet.includes(item.value)) { | ||
| 407 | return item; | ||
| 408 | } | ||
| 409 | if ( | ||
| 410 | this.formData.finishedInfo.unfinishedTaskSet.includes(item.value) | ||
| 411 | ) { | ||
| 412 | return item; | ||
| 413 | } | ||
| 414 | }) | ||
| 415 | .filter(Boolean); | ||
| 416 | this.selectValue = xmlData.startEvent._id; | ||
| 417 | this.clearViewer("a"); | ||
| 418 | if (xml != null && xml !== "") { | ||
| 419 | try { | ||
| 420 | this.bpmnViewer = new BpmnViewer({ | ||
| 421 | additionalModules: [ | ||
| 422 | // 移动整个画布 | ||
| 423 | MoveCanvasModule, | ||
| 424 | ], | ||
| 425 | container: this.$refs.processCanvas, | ||
| 426 | }); | ||
| 427 | // 任务节点悬浮事件 | ||
| 428 | this.bpmnViewer.on("element.click", ({ element }) => { | ||
| 429 | this.onSelectElement(element); | ||
| 430 | }); | ||
| 431 | await this.bpmnViewer.importXML(xml); | ||
| 432 | this.isLoading = true; | ||
| 433 | this.addCustomDefs(); | ||
| 434 | } catch (e) { | ||
| 435 | this.clearViewer("b"); | ||
| 436 | } finally { | ||
| 437 | this.isLoading = false; | ||
| 438 | this.setProcessStatus(this.processNodeInfo); | ||
| 439 | this.$nextTick(() => { | ||
| 440 | this.processReZoom(); | ||
| 441 | }); | ||
| 442 | } | 235 | } |
| 443 | } | 236 | let dt = new Date(data); |
| 444 | }, | 237 | return ( |
| 445 | // 获取流程记录 | 238 | dt.getFullYear() + |
| 446 | /** | 239 | "-" + |
| 447 | * @description: 获取流程记录 | 240 | (dt.getMonth() + 1) + |
| 448 | * @author: renchao | 241 | "-" + |
| 449 | */ | 242 | dt.getDate() + |
| 450 | getCommentList() { | 243 | " " + |
| 451 | this.formData.allCommentList.forEach(async (item, index) => { | 244 | dt.getHours() + |
| 452 | // item.comments.forEach(element => { | 245 | ":" + |
| 453 | // if(element.type=="COMPLETE"){ | 246 | dt.getMinutes() + |
| 454 | // this.formData.allCommentList[index].idea=element.message | 247 | ":" + |
| 455 | // this.formData.allCommentList[index].controls="完成" | 248 | dt.getSeconds() |
| 456 | // } | 249 | ); |
| 457 | // }); | 250 | }, |
| 458 | let type = item.comments[item.comments.length - 1].type; | 251 | /** |
| 459 | this.formData.allCommentList[index].idea = | 252 | * @description: processReZoom |
| 460 | item.comments[item.comments.length - 1].message; | 253 | * @author: renchao |
| 461 | // 操作方式 | 254 | */ |
| 462 | let controls = ""; | 255 | processReZoom () { |
| 463 | switch (type) { | 256 | this.defaultZoom = 1; |
| 464 | case "COMPLETE": | 257 | this.bpmnViewer.get("canvas").zoom("fit-viewport", "auto"); |
| 465 | controls = "完成"; | 258 | }, |
| 466 | break; | 259 | /** |
| 467 | case "CLAIM": | 260 | * @description: processZoomIn |
| 468 | controls = "完成"; | 261 | * @param {*} zoomStep |
| 469 | break; | 262 | * @author: renchao |
| 470 | case "ASSIGN": | 263 | */ |
| 471 | controls = "转办"; | 264 | processZoomIn (zoomStep = 0.1) { |
| 472 | break; | 265 | const newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100; |
| 473 | case "DELEGATE": | 266 | if (newZoom > 4) { |
| 474 | controls = "委派"; | 267 | throw new Error( |
| 475 | break; | 268 | "[Process Designer Warn ]: The zoom ratio cannot be greater than 4" |
| 476 | case "UNCLAIM": | 269 | ); |
| 477 | controls = "取消认领"; | ||
| 478 | break; | ||
| 479 | case "STOP": | ||
| 480 | controls = "终止"; | ||
| 481 | break; | ||
| 482 | case "BACK": | ||
| 483 | controls = "退回"; | ||
| 484 | break; | ||
| 485 | } | 270 | } |
| 486 | this.formData.allCommentList[index].controls = controls; | 271 | this.defaultZoom = newZoom; |
| 487 | this.formData.allCommentList[index].agent = item.assignee.name; | 272 | this.bpmnViewer.get("canvas").zoom(this.defaultZoom); |
| 488 | }); | 273 | }, |
| 489 | this.formData.handlinglist.forEach(async (item, index) => { | 274 | /** |
| 490 | if (item.assignee.name) { | 275 | * @description: processZoomOut |
| 491 | this.formData.handlinglist[index].agent = item.assignee.name; | 276 | * @param {*} zoomStep |
| 492 | } else { | 277 | * @author: renchao |
| 493 | let str = ""; | 278 | */ |
| 494 | item.countersign.forEach((item) => { | 279 | processZoomOut (zoomStep = 0.1) { |
| 495 | str += item.name + ","; | 280 | const newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100; |
| 496 | }); | 281 | if (newZoom < 0.2) { |
| 497 | str = str.slice(0, -1); | 282 | throw new Error( |
| 498 | this.formData.allCommentList[index].agent = str; | 283 | "[Process Designer Warn ]: The zoom ratio cannot be scss than 0.2" |
| 284 | ); | ||
| 499 | } | 285 | } |
| 500 | }); | 286 | this.defaultZoom = newZoom; |
| 501 | this.taskList = [ | 287 | this.bpmnViewer.get("canvas").zoom(this.defaultZoom); |
| 502 | ...this.formData.allCommentList, | 288 | }, |
| 503 | ...this.formData.handlinglist, | 289 | /** |
| 504 | ]; | 290 | * @description: getOperationTagType |
| 505 | // this.taskList =this.formData.allCommentList; | 291 | * @param {*} type |
| 506 | // 处理数据之后赋值 | 292 | * @author: renchao |
| 507 | this.taskCommentList = this.taskList; | 293 | */ |
| 508 | }, | 294 | getOperationTagType (type) { |
| 509 | 295 | return "success"; | |
| 510 | // 设置流程图元素状态 | 296 | }, |
| 511 | /** | 297 | // 流程图预览清空 |
| 512 | * @description: 设置流程图元素状态 | 298 | /** |
| 513 | * @param {*} processNodeInfo | 299 | * @description: 流程图预览清空 |
| 514 | * @author: renchao | 300 | * @param {*} e |
| 515 | */ | 301 | * @author: renchao |
| 516 | setProcessStatus(processNodeInfo) { | 302 | */ |
| 517 | this.processNodeInfo = processNodeInfo; | 303 | clearViewer (a) { |
| 518 | if ( | 304 | if (this.$refs.processCanvas) { |
| 519 | this.isLoading || | 305 | this.$refs.processCanvas.innerHTML = ""; |
| 520 | this.processNodeInfo == null || | 306 | } |
| 521 | this.bpmnViewer == null | 307 | if (this.bpmnViewer) { |
| 522 | ) | 308 | this.bpmnViewer.destroy(); |
| 523 | return; | 309 | } |
| 524 | const { | 310 | this.bpmnViewer = null; |
| 525 | finishedTaskSet, | 311 | }, |
| 526 | rejectedTaskSet, | 312 | // 添加自定义箭头 |
| 527 | unfinishedTaskSet, | 313 | /** |
| 528 | finishedSequenceFlowSet, | 314 | * @description: 添加自定义箭头 |
| 529 | } = this.processNodeInfo; | 315 | * @author: renchao |
| 530 | const canvas = this.bpmnViewer.get("canvas"); | 316 | */ |
| 531 | const elementRegistry = this.bpmnViewer.get("elementRegistry"); | 317 | addCustomDefs () { |
| 532 | if (Array.isArray(finishedSequenceFlowSet)) { | 318 | const canvas = this.bpmnViewer.get("canvas"); |
| 533 | finishedSequenceFlowSet.forEach((item) => { | 319 | const svg = canvas._svg; |
| 534 | if (item != null) { | 320 | const customSuccessDefs = this.$refs.customSuccessDefs; |
| 535 | canvas.addMarker(item, "success"); | 321 | const customFailDefs = this.$refs.customFailDefs; |
| 536 | const element = elementRegistry.get(item); | 322 | svg.appendChild(customSuccessDefs); |
| 537 | const conditionExpression = | 323 | svg.appendChild(customFailDefs); |
| 538 | element.businessObject.conditionExpression; | 324 | }, |
| 539 | if (conditionExpression) { | 325 | // 任务悬浮弹窗 |
| 540 | canvas.addMarker(item, "condition-expression"); | 326 | /** |
| 327 | * @description: 任务悬浮弹窗 | ||
| 328 | * @param {*} element | ||
| 329 | * @author: renchao | ||
| 330 | */ | ||
| 331 | onSelectElement (element) { | ||
| 332 | this.selectTaskId = undefined; | ||
| 333 | this.dlgTitle = undefined; | ||
| 334 | let allfinishedTaskSet = [ | ||
| 335 | ...this.processNodeInfo.finishedTaskSet, | ||
| 336 | ...this.processNodeInfo.unfinishedTaskSet, | ||
| 337 | ]; | ||
| 338 | if (this.processNodeInfo == null || allfinishedTaskSet == null) return; | ||
| 339 | if (element == null || allfinishedTaskSet.indexOf(element.id) === -1) { | ||
| 340 | return; | ||
| 341 | } | ||
| 342 | this.selectTaskId = element.id; | ||
| 343 | this.selectValue = element.id; | ||
| 344 | this.dlgTitle = element.businessObject | ||
| 345 | ? element.businessObject.name | ||
| 346 | : undefined; | ||
| 347 | // 计算当前悬浮任务审批记录，如果记录为空不显示弹窗 | ||
| 348 | this.taskCommentList = (this.taskList || []).filter((item) => { | ||
| 349 | return item.taskDefinitionKey === this.selectTaskId; | ||
| 350 | }); | ||
| 351 | if (this.taskCommentList.length == 0) { | ||
| 352 | this.taskCommentList = this.taskList; | ||
| 353 | } | ||
| 354 | }, | ||
| 355 | // 下拉列表切换 | ||
| 356 | /** | ||
| 357 | * @description: 下拉列表切换 | ||
| 358 | * @param {*} val | ||
| 359 | * @author: renchao | ||
| 360 | */ | ||
| 361 | handleSelect (val) { | ||
| 362 | this.taskCommentList = (this.taskList || []).filter((item) => { | ||
| 363 | return item.taskDefinitionKey === val; | ||
| 364 | }); | ||
| 365 | if (this.taskCommentList.length == 0) { | ||
| 366 | this.taskCommentList = this.taskList; | ||
| 367 | } | ||
| 368 | }, | ||
| 369 | // 显示流程图 | ||
| 370 | /** | ||
| 371 | * @description: 显示流程图 | ||
| 372 | * @param {*} xml | ||
| 373 | * @author: renchao | ||
| 374 | */ | ||
| 375 | async importXML (xml) { | ||
| 376 | let xmlData = this.$x2js.xml2js(xml).definitions.process; | ||
| 377 | this.selectOptions = xmlData.userTask.map((item) => { | ||
| 378 | return { value: item._id, label: item._name }; | ||
| 379 | }); | ||
| 380 | this.selectOptions = [ | ||
| 381 | { value: xmlData.startEvent._id, label: "浏览记录" }, | ||
| 382 | ...this.selectOptions, | ||
| 383 | ]; | ||
| 384 | this.selectOptions = this.selectOptions | ||
| 385 | .map((item) => { | ||
| 386 | if (this.formData.finishedInfo.finishedTaskSet.includes(item.value)) { | ||
| 387 | return item; | ||
| 541 | } | 388 | } |
| 389 | if ( | ||
| 390 | this.formData.finishedInfo.unfinishedTaskSet.includes(item.value) | ||
| 391 | ) { | ||
| 392 | return item; | ||
| 393 | } | ||
| 394 | }) | ||
| 395 | .filter(Boolean); | ||
| 396 | this.selectValue = xmlData.startEvent._id; | ||
| 397 | this.clearViewer("a"); | ||
| 398 | if (xml != null && xml !== "") { | ||
| 399 | try { | ||
| 400 | this.bpmnViewer = new BpmnViewer({ | ||
| 401 | additionalModules: [ | ||
| 402 | // 移动整个画布 | ||
| 403 | MoveCanvasModule, | ||
| 404 | ], | ||
| 405 | container: this.$refs.processCanvas, | ||
| 406 | }); | ||
| 407 | // 任务节点悬浮事件 | ||
| 408 | this.bpmnViewer.on("element.click", ({ element }) => { | ||
| 409 | this.onSelectElement(element); | ||
| 410 | }); | ||
| 411 | await this.bpmnViewer.importXML(xml); | ||
| 412 | this.isLoading = true; | ||
| 413 | this.addCustomDefs(); | ||
| 414 | } catch (e) { | ||
| 415 | this.clearViewer("b"); | ||
| 416 | } finally { | ||
| 417 | this.isLoading = false; | ||
| 418 | this.setProcessStatus(this.processNodeInfo); | ||
| 419 | this.$nextTick(() => { | ||
| 420 | this.processReZoom(); | ||
| 421 | }); | ||
| 542 | } | 422 | } |
| 423 | } | ||
| 424 | }, | ||
| 425 | // 获取流程记录 | ||
| 426 | /** | ||
| 427 | * @description: 获取流程记录 | ||
| 428 | * @author: renchao | ||
| 429 | */ | ||
| 430 | getCommentList () { | ||
| 431 | this.formData.allCommentList.forEach(async (item, index) => { | ||
| 432 | // item.comments.forEach(element => { | ||
| 433 | // if(element.type=="COMPLETE"){ | ||
| 434 | // this.formData.allCommentList[index].idea=element.message | ||
| 435 | // this.formData.allCommentList[index].controls="完成" | ||
| 436 | // } | ||
| 437 | // }); | ||
| 438 | let type = item.comments[item.comments.length - 1].type; | ||
| 439 | this.formData.allCommentList[index].idea = | ||
| 440 | item.comments[item.comments.length - 1].message; | ||
| 441 | // 操作方式 | ||
| 442 | let controls = ""; | ||
| 443 | switch (type) { | ||
| 444 | case "COMPLETE": | ||
| 445 | controls = "完成"; | ||
| 446 | break; | ||
| 447 | case "CLAIM": | ||
| 448 | controls = "完成"; | ||
| 449 | break; | ||
| 450 | case "ASSIGN": | ||
| 451 | controls = "转办"; | ||
| 452 | break; | ||
| 453 | case "DELEGATE": | ||
| 454 | controls = "委派"; | ||
| 455 | break; | ||
| 456 | case "UNCLAIM": | ||
| 457 | controls = "取消认领"; | ||
| 458 | break; | ||
| 459 | case "STOP": | ||
| 460 | controls = "终止"; | ||
| 461 | break; | ||
| 462 | case "BACK": | ||
| 463 | controls = "退回"; | ||
| 464 | break; | ||
| 465 | } | ||
| 466 | this.formData.allCommentList[index].controls = controls; | ||
| 467 | this.formData.allCommentList[index].agent = item.assignee.name; | ||
| 543 | }); | 468 | }); |
| 544 | } | 469 | this.formData.handlinglist.forEach(async (item, index) => { |
| 545 | if (Array.isArray(finishedTaskSet)) { | 470 | if (item.assignee.name) { |
| 546 | finishedTaskSet.forEach((item) => canvas.addMarker(item, "success")); | 471 | this.formData.handlinglist[index].agent = item.assignee.name; |
| 547 | } | 472 | } else { |
| 548 | if (Array.isArray(unfinishedTaskSet)) { | 473 | let str = ""; |
| 549 | unfinishedTaskSet.forEach((item) => canvas.addMarker(item, "primary")); | 474 | item.countersign.forEach((item) => { |
| 550 | } | 475 | str += item.name + ","; |
| 551 | if (Array.isArray(rejectedTaskSet)) { | 476 | }); |
| 552 | rejectedTaskSet.forEach((item) => { | 477 | str = str.slice(0, -1); |
| 553 | if (item != null) { | 478 | this.formData.allCommentList[index].agent = str; |
| 554 | const element = elementRegistry.get(item); | ||
| 555 | if (element.type.includes("Task")) { | ||
| 556 | canvas.addMarker(item, "danger"); | ||
| 557 | } else { | ||
| 558 | canvas.addMarker(item, "warning"); | ||
| 559 | } | ||
| 560 | } | 479 | } |
| 561 | }); | 480 | }); |
| 562 | } | 481 | this.taskList = [ |
| 482 | ...this.formData.allCommentList, | ||
| 483 | ...this.formData.handlinglist, | ||
| 484 | ]; | ||
| 485 | // this.taskList =this.formData.allCommentList; | ||
| 486 | // 处理数据之后赋值 | ||
| 487 | this.taskCommentList = this.taskList; | ||
| 488 | }, | ||
| 489 | |||
| 490 | // 设置流程图元素状态 | ||
| 491 | /** | ||
| 492 | * @description: 设置流程图元素状态 | ||
| 493 | * @param {*} processNodeInfo | ||
| 494 | * @author: renchao | ||
| 495 | */ | ||
| 496 | setProcessStatus (processNodeInfo) { | ||
| 497 | this.processNodeInfo = processNodeInfo; | ||
| 498 | if ( | ||
| 499 | this.isLoading || | ||
| 500 | this.processNodeInfo == null || | ||
| 501 | this.bpmnViewer == null | ||
| 502 | ) | ||
| 503 | return; | ||
| 504 | const { | ||
| 505 | finishedTaskSet, | ||
| 506 | rejectedTaskSet, | ||
| 507 | unfinishedTaskSet, | ||
| 508 | finishedSequenceFlowSet, | ||
| 509 | } = this.processNodeInfo; | ||
| 510 | const canvas = this.bpmnViewer.get("canvas"); | ||
| 511 | const elementRegistry = this.bpmnViewer.get("elementRegistry"); | ||
| 512 | if (Array.isArray(finishedSequenceFlowSet)) { | ||
| 513 | finishedSequenceFlowSet.forEach((item) => { | ||
| 514 | if (item != null) { | ||
| 515 | canvas.addMarker(item, "success"); | ||
| 516 | const element = elementRegistry.get(item); | ||
| 517 | const conditionExpression = | ||
| 518 | element.businessObject.conditionExpression; | ||
| 519 | if (conditionExpression) { | ||
| 520 | canvas.addMarker(item, "condition-expression"); | ||
| 521 | } | ||
| 522 | } | ||
| 523 | }); | ||
| 524 | } | ||
| 525 | if (Array.isArray(finishedTaskSet)) { | ||
| 526 | finishedTaskSet.forEach((item) => canvas.addMarker(item, "success")); | ||
| 527 | } | ||
| 528 | if (Array.isArray(unfinishedTaskSet)) { | ||
| 529 | unfinishedTaskSet.forEach((item) => canvas.addMarker(item, "primary")); | ||
| 530 | } | ||
| 531 | if (Array.isArray(rejectedTaskSet)) { | ||
| 532 | rejectedTaskSet.forEach((item) => { | ||
| 533 | if (item != null) { | ||
| 534 | const element = elementRegistry.get(item); | ||
| 535 | if (element.type.includes("Task")) { | ||
| 536 | canvas.addMarker(item, "danger"); | ||
| 537 | } else { | ||
| 538 | canvas.addMarker(item, "warning"); | ||
| 539 | } | ||
| 540 | } | ||
| 541 | }); | ||
| 542 | } | ||
| 543 | }, | ||
| 563 | }, | 544 | }, |
| 564 | }, | 545 | }; |
| 565 | }; | ||
| 566 | </script> | 546 | </script> |
| 567 | <style scoped lang="scss"> | 547 | <style scoped lang="scss"> |
| 568 | .information-list { | 548 | .information-list { |
| 569 | height: 220px; | 549 | height: 220px; |
| 570 | margin-top: 10px; | 550 | margin-top: 10px; |
| 571 | 551 | ||
| 572 | p { | 552 | p { |
| 573 | font-size: 16px; | 553 | font-size: 16px; |
| 574 | line-height: 24px; | 554 | line-height: 24px; |
| 555 | } | ||
| 556 | } | ||
| 557 | /deep/.bjs-powered-by { | ||
| 558 | display: none; | ||
| 575 | } | 559 | } |
| 576 | } | 560 | // /deep/.information-list { |
| 577 | /deep/.bjs-powered-by { | 561 | // height: 170px; |
| 578 | display: none; | 562 | // overflow: visible; |
| 579 | } | 563 | // } |
| 580 | // /deep/.information-list { | ||
| 581 | // height: 170px; | ||
| 582 | // overflow: visible; | ||
| 583 | // } | ||
| 584 | </style> | 564 | </style> | ... | ... |
| ... | @@ -41,7 +41,7 @@ | ... | @@ -41,7 +41,7 @@ |
| 41 | <span>印刷序列号：{{ item.ysxlh }}</span> | 41 | <span>印刷序列号：{{ item.ysxlh }}</span> |
| 42 | </div> | 42 | </div> |
| 43 | </div> | 43 | </div> |
| 44 | <div class="card_padding"> | 44 | <div class="card_padding" v-if="ableOperation"> |
| 45 | <div class="top_line middle_margin"></div> | 45 | <div class="top_line middle_margin"></div> |
| 46 | <div class="text" v-if="item.ysxlh"> | 46 | <div class="text" v-if="item.ysxlh"> |
| 47 | <el-button class="operation_button" type="text" @click="openInvalidDiglog(item)">再次打印（{{ item.szcs | 47 | <el-button class="operation_button" type="text" @click="openInvalidDiglog(item)">再次打印（{{ item.szcs |
| ... | @@ -79,6 +79,8 @@ | ... | @@ -79,6 +79,8 @@ |
| 79 | props: {}, | 79 | props: {}, |
| 80 | data () { | 80 | data () { |
| 81 | return { | 81 | return { |
| 82 | //表单是否可操作 | ||
| 83 | ableOperation: true, | ||
| 82 | dialog: false, | 84 | dialog: false, |
| 83 | tableData: [], | 85 | tableData: [], |
| 84 | bdcqzlx: 1, | 86 | bdcqzlx: 1, |
| ... | @@ -100,7 +102,8 @@ | ... | @@ -100,7 +102,8 @@ |
| 100 | } | 102 | } |
| 101 | }, | 103 | }, |
| 102 | created () { | 104 | created () { |
| 103 | this.list(); | 105 | this.list() |
| 106 | this.ableOperation = this.$parent.currentSelectTab.ableOperation | ||
| 104 | }, | 107 | }, |
| 105 | methods: { | 108 | methods: { |
| 106 | //初始化列表 | 109 | //初始化列表 | ... | ... |
| ... | @@ -32,6 +32,7 @@ | ... | @@ -32,6 +32,7 @@ |
| 32 | v-model="tdyt" | 32 | v-model="tdyt" |
| 33 | :disabled="!ableOperation" | 33 | :disabled="!ableOperation" |
| 34 | noOptionsText="暂无数据" | 34 | noOptionsText="暂无数据" |
| 35 | placeholder='' | ||
| 35 | :show-count="true" | 36 | :show-count="true" |
| 36 | :options="dictData['tdyt']" | 37 | :options="dictData['tdyt']" |
| 37 | :normalizer="normalizer" | 38 | :normalizer="normalizer" |
| ... | @@ -315,5 +316,4 @@ | ... | @@ -315,5 +316,4 @@ |
| 315 | /deep/.el-table th { | 316 | /deep/.el-table th { |
| 316 | height: 30px !important; | 317 | height: 30px !important; |
| 317 | } | 318 | } |
| 318 | |||
| 319 | </style> | 319 | </style> | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: | 2 | * @Description: |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-06-09 16:55:31 | 4 | * @LastEditTime: 2023-07-25 16:15:46 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <div class="container"> | 7 | <div class="container"> |
| ... | @@ -93,7 +93,7 @@ | ... | @@ -93,7 +93,7 @@ |
| 93 | currentSelectProps: {}, | 93 | currentSelectProps: {}, |
| 94 | //是否开启材料分屏 | 94 | //是否开启材料分屏 |
| 95 | splitScreen: false, | 95 | splitScreen: false, |
| 96 | ableOperation:false, | 96 | ableOperation: false, |
| 97 | //材料分屏表单 | 97 | //材料分屏表单 |
| 98 | clxxForm: "", | 98 | clxxForm: "", |
| 99 | //材料信息选择卡索引 | 99 | //材料信息选择卡索引 |
| ... | @@ -125,8 +125,14 @@ | ... | @@ -125,8 +125,14 @@ |
| 125 | //获取单元对应的所有表单信息 | 125 | //获取单元对应的所有表单信息 |
| 126 | this.tabList = res.result; | 126 | this.tabList = res.result; |
| 127 | //默认加载第一个表单信息 | 127 | //默认加载第一个表单信息 |
| 128 | this.tabName = res.result[0].value; | 128 | //默认加载第一个表单信息 |
| 129 | this.ableOperation=this.tabList[0].ableOperation | 129 | let arr = res.result.filter(item => item.defaultForm) |
| 130 | if (arr.length > 0) { | ||
| 131 | this.tabName = arr[0].value; | ||
| 132 | } else { | ||
| 133 | this.tabName = res.result[0].value; | ||
| 134 | } | ||
| 135 | this.ableOperation = this.tabList[0].ableOperation | ||
| 130 | //批量操作无分屏按钮 | 136 | //批量操作无分屏按钮 |
| 131 | if (index != null) { | 137 | if (index != null) { |
| 132 | //处理分屏材料信息 | 138 | //处理分屏材料信息 | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: | 2 | * @Description: |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-07-24 15:03:20 | 4 | * @LastEditTime: 2023-07-25 09:21:53 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <div class="from-clues"> | 7 | <div class="from-clues"> |
| ... | @@ -264,10 +264,10 @@ | ... | @@ -264,10 +264,10 @@ |
| 264 | } else { | 264 | } else { |
| 265 | this.$message.error("用户任务权限判断失败，请联系管理员"); | 265 | this.$message.error("用户任务权限判断失败，请联系管理员"); |
| 266 | } | 266 | } |
| 267 | }); | 267 | }) |
| 268 | }, | 268 | } |
| 269 | }, | 269 | } |
| 270 | }; | 270 | } |
| 271 | </script> | 271 | </script> |
| 272 | <style scoped lang="scss"> | 272 | <style scoped lang="scss"> |
| 273 | @import "~@/styles/public.scss"; | 273 | @import "~@/styles/public.scss"; | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: 受理信息 | 2 | * @Description: 受理信息 |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-07-21 14:27:15 | 4 | * @LastEditTime: 2023-07-25 09:22:40 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <div class="slxx"> | 7 | <div class="slxx"> |
| ... | @@ -332,7 +332,6 @@ | ... | @@ -332,7 +332,6 @@ |
| 332 | upDateYwrxxList (val) { | 332 | upDateYwrxxList (val) { |
| 333 | this.ruleForm.ywrList = _.cloneDeep(val); | 333 | this.ruleForm.ywrList = _.cloneDeep(val); |
| 334 | }, | 334 | }, |
| 335 | |||
| 336 | /** | 335 | /** |
| 337 | * @description: onSubmit | 336 | * @description: onSubmit |
| 338 | * @author: renchao | 337 | * @author: renchao | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: | 2 | * @Description: |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-07-20 09:32:18 | 4 | * @LastEditTime: 2023-07-25 09:23:05 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <!-- 受理信息 --> | 7 | <!-- 受理信息 --> |
| ... | @@ -296,9 +296,9 @@ | ... | @@ -296,9 +296,9 @@ |
| 296 | console.log(res); | 296 | console.log(res); |
| 297 | //this.ruleForm = { ...res.result, ...res.result.zdjbxxdatas, ...res.result.qlxxdatas, ...res.result.jsydsyqdatas } | 297 | //this.ruleForm = { ...res.result, ...res.result.zdjbxxdatas, ...res.result.qlxxdatas, ...res.result.jsydsyqdatas } |
| 298 | } | 298 | } |
| 299 | }); | 299 | }) |
| 300 | }, | 300 | } |
| 301 | }, | 301 | } |
| 302 | }; | 302 | }; |
| 303 | </script> | 303 | </script> |
| 304 | <style scoped lang='scss'> | 304 | <style scoped lang='scss'> | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: | 2 | * @Description: |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-07-14 11:09:33 | 4 | * @LastEditTime: 2023-07-25 09:23:20 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <!-- 受理信息 --> | 7 | <!-- 受理信息 --> |
| ... | @@ -320,7 +320,10 @@ | ... | @@ -320,7 +320,10 @@ |
| 320 | }) | 320 | }) |
| 321 | } | 321 | } |
| 322 | } | 322 | } |
| 323 | console.log("this.ruleFormmmmmmmmm", this.ruleForm); | 323 | /** |
| 324 | * @description: saveData | ||
| 325 | * @author: renchao | ||
| 326 | */ | ||
| 324 | saveData(this.ruleForm).then((res) => { | 327 | saveData(this.ruleForm).then((res) => { |
| 325 | if (res.code === 200) { | 328 | if (res.code === 200) { |
| 326 | this.$message({ | 329 | this.$message({ | ... | ... |
| ... | @@ -2,7 +2,7 @@ | ... | @@ -2,7 +2,7 @@ |
| 2 | <!-- | 2 | <!-- |
| 3 | * @Description: | 3 | * @Description: |
| 4 | * @Autor: renchao | 4 | * @Autor: renchao |
| 5 | * @LastEditTime: 2023-05-25 08:59:49 | 5 | * @LastEditTime: 2023-07-25 09:23:42 |
| 6 | --> | 6 | --> |
| 7 | <template> | 7 | <template> |
| 8 | <!-- 受理信息 --> | 8 | <!-- 受理信息 --> |
| ... | @@ -336,10 +336,10 @@ export default { | ... | @@ -336,10 +336,10 @@ export default { |
| 336 | }, | 336 | }, |
| 337 | "80%", | 337 | "80%", |
| 338 | true | 338 | true |
| 339 | ); | 339 | ) |
| 340 | }, | 340 | } |
| 341 | }, | 341 | } |
| 342 | }; | 342 | } |
| 343 | </script> | 343 | </script> |
| 344 | <style scoped lang="scss"> | 344 | <style scoped lang="scss"> |
| 345 | @import "~@/styles/public.scss"; | 345 | @import "~@/styles/public.scss"; | ... | ... |
| ... | @@ -352,8 +352,8 @@ | ... | @@ -352,8 +352,8 @@ |
| 352 | }) | 352 | }) |
| 353 | this.ruleForm.nydsyq.ydyhflmc = itemLx.dname; | 353 | this.ruleForm.nydsyq.ydyhflmc = itemLx.dname; |
| 354 | } | 354 | } |
| 355 | }, | 355 | } |
| 356 | }; | 356 | } |
| 357 | </script> | 357 | </script> |
| 358 | <style scoped lang='scss'> | 358 | <style scoped lang='scss'> |
| 359 | @import "~@/styles/public.scss"; | 359 | @import "~@/styles/public.scss"; | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: | 2 | * @Description: |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-07-20 09:30:51 | 4 | * @LastEditTime: 2023-07-25 09:24:18 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <!-- 受理信息 --> | 7 | <!-- 受理信息 --> |
| ... | @@ -472,6 +472,10 @@ | ... | @@ -472,6 +472,10 @@ |
| 472 | }); | 472 | }); |
| 473 | } | 473 | } |
| 474 | } | 474 | } |
| 475 | /** | ||
| 476 | * @description: saveData | ||
| 477 | * @author: renchao | ||
| 478 | */ | ||
| 475 | saveData(this.ruleForm).then((res) => { | 479 | saveData(this.ruleForm).then((res) => { |
| 476 | if (res.code === 200) { | 480 | if (res.code === 200) { |
| 477 | this.$message({ | 481 | this.$message({ | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: | 2 | * @Description: |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-07-24 15:03:46 | 4 | * @LastEditTime: 2023-07-25 09:21:40 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <div class="from-clues"> | 7 | <div class="from-clues"> |
| ... | @@ -232,11 +232,9 @@ | ... | @@ -232,11 +232,9 @@ |
| 232 | ); | 232 | ); |
| 233 | window.open(href, `workFrameView${item.bsmSlsq}`); | 233 | window.open(href, `workFrameView${item.bsmSlsq}`); |
| 234 | } | 234 | } |
| 235 | 235 | } | |
| 236 | 236 | } | |
| 237 | }, | 237 | } |
| 238 | }, | ||
| 239 | }; | ||
| 240 | </script> | 238 | </script> |
| 241 | <style scoped lang="scss"> | 239 | <style scoped lang="scss"> |
| 242 | @import "~@/styles/public.scss"; | 240 | @import "~@/styles/public.scss"; | ... | ... |
| ... | @@ -391,7 +391,6 @@ | ... | @@ -391,7 +391,6 @@ |
| 391 | <style scoped lang='scss'> | 391 | <style scoped lang='scss'> |
| 392 | @import "~@/styles/mixin.scss"; | 392 | @import "~@/styles/mixin.scss"; |
| 393 | @import "./ywsq.scss"; | 393 | @import "./ywsq.scss"; |
| 394 | |||
| 395 | /deep/.el-collapse-item__content { | 394 | /deep/.el-collapse-item__content { |
| 396 | padding-bottom: 0; | 395 | padding-bottom: 0; |
| 397 | } | 396 | } | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: | 2 | * @Description: |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-07-24 14:04:15 | 4 | * @LastEditTime: 2023-07-25 14:47:41 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <div class="from-clues"> | 7 | <div class="from-clues"> |
| ... | @@ -195,23 +195,7 @@ | ... | @@ -195,23 +195,7 @@ |
| 195 | this.$popupDialog('楼盘表', 'lpb/index', { | 195 | this.$popupDialog('楼盘表', 'lpb/index', { |
| 196 | bsm: '' | 196 | bsm: '' |
| 197 | }, '85%') | 197 | }, '85%') |
| 198 | }, | 198 | } |
| 199 | // ywhClick (item) { | ||
| 200 | // const { href } = this.$router.resolve( | ||
| 201 | // "/djbworkFrame?bdcdyid=" + | ||
| 202 | // item.bdcdyid+ | ||
| 203 | // "&bdcdyh=" + | ||
| 204 | // item.bdcdyh+ | ||
| 205 | // "&qllx="+ | ||
| 206 | // item.qllx+ | ||
| 207 | // "&bsmQlxx="+ | ||
| 208 | // item.bsmQlxx+ | ||
| 209 | // "&viewtype=1" | ||
| 210 | // ); | ||
| 211 | // localStorage.setItem('ywbl', JSON.stringify(item)); | ||
| 212 | // window.open(href, `urlname${item.bdcdyid}`); | ||
| 213 | |||
| 214 | // }, | ||
| 215 | } | 199 | } |
| 216 | } | 200 | } |
| 217 | </script> | 201 | </script> | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: | 2 | * @Description: |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-07-24 14:02:07 | 4 | * @LastEditTime: 2023-07-25 16:34:27 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <div class="from-clues"> | 7 | <div class="from-clues"> |
| ... | @@ -151,7 +151,7 @@ | ... | @@ -151,7 +151,7 @@ |
| 151 | * @author: renchao | 151 | * @author: renchao |
| 152 | */ | 152 | */ |
| 153 | openDialog (item) { | 153 | openDialog (item) { |
| 154 | const { href } = this.$router.resolve('/workFrameView?bsmSlsq=' + item.bsmSlsq + '&bestepid=' + item.bestepid + '&bsmBusiness=' + item.bsmBusiness + '&viewtype=3') | 154 | const { href } = this.$router.resolve('/workFrameView?bsmSlsq=' + item.bsmSlsq + '&bestepid=' + item.bestepid + '&bsmBusiness=' + item.bsmBusiness + '&viewtype=3' + '&type=jdcx') |
| 155 | window.open(href, `urlname${item.bsmSlsq}`) | 155 | window.open(href, `urlname${item.bsmSlsq}`) |
| 156 | } | 156 | } |
| 157 | } | 157 | } | ... | ... |
-
Please register or sign in to post a comment