1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- <template>
- <cip-dialog v-model="visible"
- :title="title"
- :width="width"
- :destroy-on-close="true"
- :show-close="showClose"
- :show-cancel="showCancel"
- :confirmText="confirmText"
- :fullscreen="fullscreen"
- :close-on-press-escape="closeOnPressEscape"
- :on-confirm="confirm">
- <cip-form ref="formRef"
- :label-width="labelWidth"
- v-model:model="innerModel"
- :grid="grid"
- :field-list="formFieldList" />
- </cip-dialog>
- </template>
- <script>
- import { defineComponent, ref, watch, toRefs } from 'vue'
- import CipDialog from '../cip-dialog'
- import CipForm from '../cip-form'
- export default defineComponent({
- name: 'CipFormDialog',
- components: { CipDialog, CipForm },
- inheritAttrs: false,
- props: {
- title: { type: String, required: true },
- model: { type: Object, default: () => ({}) },
- width: { type: String },
- formFieldList: { type: Array, default: () => [] },
- labelWidth: { type: String },
- onConfirm: { type: Function, default: () => {} },
- confirmText: String,
- showClose: { },
- showCancel: {},
- fullscreen: {},
- grid: {},
- closeOnPressEscape: { type: Boolean, default: true }
- },
- emits: ['update:model', 'action', 'vanish'],
- setup (props, { emit }) {
- const visible = ref(false)
- const confirm = (resolve, reject) => {
- props.onConfirm(() => {
- onAction('resolve')
- resolve() // 关闭弹窗
- unwatch() // 取消监听事件
- onVanish() // 销毁组件
- }, (err) => {
- reject(err)
- }, innerModel.value)
- }
- const unwatch = watch(visible, (val) => {
- if (val === false) {
- onAction('close')
- onVanish()
- }
- })
- const innerModel = ref({ ...props.model })
- // 如果这样写,会导致即使取消外层传入的model数据依然被修改的问题
- // const { model: innerModel } = toRefs(props)
- const onAction = (action) => {
- emit('action', action)
- }
- const onVanish = () => {
- emit('vanish')
- }
- return {
- innerModel,
- visible,
- confirm
- }
- }
- })
- </script>
|