From b21945e7dea2daa8b30bee3cdd4bca91277e3b5f Mon Sep 17 00:00:00 2001
From: jinlin <jinlin>
Date: 星期三, 29 十一月 2023 09:22:17 +0800
Subject: [PATCH] 6
---
web/packages/components/zt-dialog/src/zt-dialog.vue | 410 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 210 insertions(+), 200 deletions(-)
diff --git a/web/packages/components/zt-dialog/src/zt-dialog.vue b/web/packages/components/zt-dialog/src/zt-dialog.vue
index b636e20..3118d99 100644
--- a/web/packages/components/zt-dialog/src/zt-dialog.vue
+++ b/web/packages/components/zt-dialog/src/zt-dialog.vue
@@ -1,221 +1,231 @@
<template>
- <el-dialog
- v-dialogDrag
- :class="{'dialog-column-1': column === '1', 'dialog-column-2': column === '2', 'dialog-column-3': column === '3', 'dialog-column-4': column === '4'}"
- :visible.sync="visible"
- v-if="visible"
- :title="_title"
- :close-on-click-modal="false"
- :close-on-press-escape="false"
- :append-to-body="appendToBody"
- @open="onOpen"
- @close="onClose">
- <slot></slot>
- <template slot="footer">
- <el-button @click="visible = false" v-show="editAble">{{ $t('cancel') }}</el-button>
- <el-button type="primary" @click="formSubmit()" v-preventReClick v-show="editAble && hasConfirm">{{ $t('confirm') }}
- </el-button> <!-- 纭畾 -->
- <el-button type="warning" @click="formSubmit()" v-show="stepMarker">鎻愪氦
- </el-button>
- <el-button type="warning" @click="formSubmit()" v-show="!stepMarker">淇濆瓨
- </el-button>
- <el-button type="info" @click="close()" v-show="!editAble">{{ $t('close') }}</el-button>
- <slot name="footer"></slot>
- </template>
- </el-dialog>
+ <el-dialog
+ v-dialogDrag
+ :class="{'dialog-column-1': column === '1', 'dialog-column-2': column === '2', 'dialog-column-3': column === '3', 'dialog-column-4': column === '4'}"
+ :visible.sync="visible"
+ v-if="visible"
+ :title="_title"
+ :close-on-click-modal="false"
+ :close-on-press-escape="false"
+ :append-to-body="appendToBody"
+ @open="onOpen"
+ @close="onClose">
+ <slot></slot>
+ <template slot="footer">
+ <template v-if="stepMarker && stepMarker.indexOf('first')>0">
+ <el-button type="warning" @click="formSubmit('zc')">鏆傚瓨</el-button>
+ <el-button type="warning" @click="formSubmit('tj')" v-if="">鎻愪氦
+ </el-button>
+ </template>
+ <template v-else-if="stepMarker">
+ <el-button type="warning" @click="formSubmit('zc')">鏆傚瓨</el-button>
+ <el-button type="warning" @click="formSubmit('bl')">鍔炵悊</el-button>
+ </template>
+ <el-button type="primary" @click="formSubmit('qd')" v-preventReClick v-else-if="editAble && hasConfirm">{{
+ $t('confirm') }}
+ </el-button>
+ <el-button type="warning" @click="formSubmit('bc')" v-else-if="editAble">淇濆瓨
+ </el-button>
+ <el-button @click="visible = false" v-if="editAble||stepMarker">{{ $t('cancel') }}</el-button>
+ <el-button type="info" @click="close()" v-else>{{ $t('close') }}</el-button>
+
+ <slot name="footer"></slot>
+ </template>
+ </el-dialog>
</template>
<script>
- import cloneDeep from 'lodash/cloneDeep'
+ import cloneDeep from 'lodash/cloneDeep'
- export default {
- name: 'ZtDialog',
- props: {
- title: String,
- column: { // 鍑犲垪
- type: String,
- default: '1'
- },
- stepMarker:{
-
- },
- appendToBody: {
- type: Boolean,
- default: false
- },
- hasConfirm: {
- type: Boolean,
- default: true
- },
- editAble: {
- type: Boolean,
- default: true
- },
- hasSubmit:{
- type: Boolean,
- default: false
- },
- hasSave:{
- type: Boolean,
- default: false
- }
- },
- data() {
- return {
- dataFormBack: null,
- visible: false
- //editAble: true // 鏄惁鍙紪杈�
- }
- },
- computed: {
- _title() {
- if (this.title) {
- return this.title
- } else if (!this.editAble) {
- return this.$t('view')
- } else if(this.$parent.dataForm!==undefined) {
- return !this.$parent.dataForm.id ? this.$t('add') : this.$t('update')
- }
- }
- },
- mounted() {
- this.dataFormBack = cloneDeep(this.$parent.dataForm)
- },
- methods: {
- init(id, row, isView) {
- this.$nextTick(() => {
- // 娓呯┖琛ㄥ崟鏍￠獙
- console.log(this.$parent.$refs.dataForm,id, row, isView,'this.$parent.$refs.dataForm')
- if (this.$parent.$refs.dataForm) { // dialog閲岄潰鐨刦orm
- this.$parent.$refs.dataForm.resetFields()
- }
-
- this.editAble = isView !== true // 鏄惁鍙紪杈�
-
- // 璁剧疆dialog鐖堕〉闈㈠垵濮嬪寲琛ㄥ崟
- this.$parent.dataForm = cloneDeep(this.dataFormBack)
- if (this.$parent.dataForm) {
- this.$parent.dataForm.id = id
- this.$parent.dataForm.disabled = isView === true // 琛ㄥ崟鏄惁鍙紪杈�
- }
-
- if (this.$parent.init) {
- console.log(id,row,'id row')
- this.$parent.init(id, row)
- }
- if (id && this.$parent.getInfo) {
- this.$parent.getInfo()
- }
- })
- this.open()
- },
- // 琛ㄥ崟鎻愪氦
- formSubmit() {
- let dataForm = this.$parent.$refs.dataForm
- if (dataForm) {
- dataForm.validate(async valid => {
- if (valid) {
- this.$emit('confirm')
- } else {
- this.$nextTick(() => {
- let isError = document.getElementsByClassName('is-error')
- isError[0].scrollIntoView({
- // 婊氬姩鍒版寚瀹氳妭鐐�
- // 鍊兼湁start,center,end锛宯earest锛屽綋鍓嶆樉绀哄湪瑙嗗浘鍖哄煙涓棿
- block: 'center',
- // 鍊兼湁auto銆乮nstant,smooth锛岀紦鍔ㄥ姩鐢伙紙褰撳墠鏄參閫熺殑锛�
- behavior: 'smooth'
- })
- })
+ export default {
+ name: 'ZtDialog',
+ props: {
+ title: String,
+ column: { // 鍑犲垪
+ type: String,
+ default: '1'
+ },
+ stepMarker: {},
+ appendToBody: {
+ type: Boolean,
+ default: false
+ },
+ hasConfirm: {
+ type: Boolean,
+ default: false
+ },
+ editAble: {
+ type: Boolean,
+ default: true
+ },
+ hasSubmit: {
+ type: Boolean,
+ default: false
+ },
+ hasSave: {
+ type: Boolean,
+ default: false
}
- })
- } else {
- this.$emit('confirm')
+ },
+ data() {
+ return {
+ dataFormBack: null,
+ visible: false
+ //editAble: true // 鏄惁鍙紪杈�
+ }
+ },
+ computed: {
+ _title() {
+ if (this.title) {
+ return this.title
+ } else if (!this.editAble) {
+ return this.$t('view')
+ } else if (this.$parent.dataForm !== undefined) {
+ return !this.$parent.dataForm.id ? this.$t('add') : this.$t('update')
+ }
+ }
+ },
+ mounted() {
+ this.dataFormBack = cloneDeep(this.$parent.dataForm)
+ },
+ methods: {
+ init(id, row, isView) {
+ this.$nextTick(() => {
+ // 娓呯┖琛ㄥ崟鏍￠獙
+ console.log(this.$parent.$refs.dataForm, id, row, isView, 'this.$parent.$refs.dataForm')
+ if (this.$parent.$refs.dataForm) { // dialog閲岄潰鐨刦orm
+ this.$parent.$refs.dataForm.resetFields()
+ }
+
+ // this.editAble = isView !== true // 鏄惁鍙紪杈�
+
+ // 璁剧疆dialog鐖堕〉闈㈠垵濮嬪寲琛ㄥ崟
+ this.$parent.dataForm = cloneDeep(this.dataFormBack)
+ if (this.$parent.dataForm) {
+ this.$parent.dataForm.id = id
+ this.$parent.dataForm.disabled = isView === true // 琛ㄥ崟鏄惁鍙紪杈�
+ }
+
+ if (this.$parent.init) {
+ console.log(id, row, 'id row')
+ this.$parent.init(id, row)
+ }
+ if (id && this.$parent.getInfo) {
+ this.$parent.getInfo()
+ }
+ })
+ this.open()
+ },
+ // 琛ㄥ崟鎻愪氦
+ formSubmit(submitType) {
+ let dataForm = this.$parent.$refs.dataForm
+ if (dataForm) {
+ dataForm.validate(async valid => {
+ if (valid) {
+ this.$emit('confirm', submitType)
+ } else {
+ this.$nextTick(() => {
+ let isError = document.getElementsByClassName('is-error')
+ isError[0].scrollIntoView({
+ // 婊氬姩鍒版寚瀹氳妭鐐�
+ // 鍊兼湁start,center,end锛宯earest锛屽綋鍓嶆樉绀哄湪瑙嗗浘鍖哄煙涓棿
+ block: 'center',
+ // 鍊兼湁auto銆乮nstant,smooth锛岀紦鍔ㄥ姩鐢伙紙褰撳墠鏄參閫熺殑锛�
+ behavior: 'smooth'
+ })
+ })
+ }
+ })
+ } else {
+ this.$emit('confirm', submitType)
+ }
+ },
+ open() {
+ this.visible = true
+ },
+ close() {
+ this.visible = false
+ },
+ onOpen() {
+ this.$emit('open')
+ },
+ onClose() {
+ this.$emit('close')
+ }
}
- },
- open() {
- this.visible = true
- },
- close() {
- this.visible = false
- },
- onOpen() {
- this.$emit('open')
- },
- onClose() {
- this.$emit('close')
- }
}
- }
</script>
<style lang="scss" scoped>
- .dialog-column-1 {
- /deep/ .el-dialog {
- position: fixed;
- margin-top: 0 !important;
- top:50% !important;
- left: 50% !important;
- transform: translate(-50%, -50%);
- width: 50%;
- /*margin-top:7vh !important;*/
- .el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
- width: 75%;
- }
+ .dialog-column-1 {
+ /deep/ .el-dialog {
+ position: fixed;
+ margin-top: 0 !important;
+ top: 50% !important;
+ left: 50% !important;
+ transform: translate(-50%, -50%);
+ width: 50%;
+ /*margin-top:7vh !important;*/
+ .el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
+ width: 75%;
+ }
+ }
}
- }
- .dialog-column-2 {
- /deep/ .el-dialog {
- width: 60%;
- position: fixed;
- margin-top: 0 !important;
- top:50% !important;
- left: 50% !important;
- transform: translate(-50%, -50%);
- .el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
- width: 50%;
- float: left;
- }
+ .dialog-column-2 {
+ /deep/ .el-dialog {
+ width: 60%;
+ position: fixed;
+ margin-top: 0 !important;
+ top: 50% !important;
+ left: 50% !important;
+ transform: translate(-50%, -50%);
+
+ .el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
+ width: 50%;
+ float: left;
+ }
+ }
}
- }
- .dialog-column-3 {
- /deep/ .el-dialog {
- width: 75%;
- position: fixed;
- margin-top: 0 !important;
- top:50% !important;
- left: 50% !important;
- transform: translate(-50%, -50%);
- .el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
- //width: 33.33333%;
- float: left;
- }
+ .dialog-column-3 {
+ /deep/ .el-dialog {
+ width: 75%;
+ position: fixed;
+ margin-top: 0 !important;
+ top: 50% !important;
+ left: 50% !important;
+ transform: translate(-50%, -50%);
+
+ .el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
+ //width: 33.33333%;
+ float: left;
+ }
+ }
}
- }
- .dialog-column-4 {
- /deep/ .el-dialog {
- width: 90%;
- position: fixed;
- margin-top: 0 !important;
- top:50% !important;
- left: 50% !important;
- transform: translate(-50%, -50%);
- .el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
- //width: 33.33333%;
- float: left;
- }
+ .dialog-column-4 {
+ /deep/ .el-dialog {
+ width: 90%;
+ position: fixed;
+ margin-top: 0 !important;
+ top: 50% !important;
+ left: 50% !important;
+ transform: translate(-50%, -50%);
+
+ .el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
+ //width: 33.33333%;
+ float: left;
+ }
+ }
}
- }
- /deep/ .el-form {
- padding: 15px;
+ /deep/ .el-form {
+ padding: 15px;
- .item-line-divider {
- width: 100%;
- height: 0px;
- float: left;
+ .item-line-divider {
+ width: 100%;
+ height: 0px;
+ float: left;
+ }
}
- }
</style>
--
Gitblit v1.9.1