编辑窗口

src/components/common-form/index.vue

@@ -38,14 +38,26 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
+  submitLabel: {
+    type: String,
+    default: ''
+  },
   showReset: {
     type: Boolean,
     default: true
   },
+  resetLabel: {
+    type: String,
+    default: ''
+  },
   showBack: {
     type: Boolean,
     default: false
   },
+  backLabel: {
+    type: String,
+    default: ''
+  },
   backUrl: {
     type: String,
     default: ''
@@ -110,19 +122,19 @@ defineExpose({
         type="primary"
         @click="$emit('submitForm', form)"
       >
-        {{ $t('common.label.submit') }}
+        {{ submitLabel||$t('common.label.submit') }}
       </el-button>
       <el-button
         v-if="showReset"
         @click="form.resetFields()"
       >
-        {{ $t('common.label.reset') }}
+        {{ resetLabel||$t('common.label.reset') }}
       </el-button>
       <el-button
         v-if="showBack||backUrl"
         @click="backUrl?$router.push(backUrl):$router.go(-1)"
       >
-        {{ $t('common.label.back') }}
+        {{ backLabel||$t('common.label.back') }}
       </el-button>
       <slot
         :form="form"

src/components/common-window/index.vue

@@ -0,0 +1,149 @@
+<script setup>
+import { useVModel } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  draggable: {
+    type: Boolean,
+    default: true
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  height: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: String,
+    default: '800px'
+  },
+  buttons: {
+    type: Array,
+    default: () => []
+  },
+  showClose: {
+    type: Boolean,
+    default: true
+  },
+  beforeClose: {
+    type: Function,
+    default: null
+  },
+  showOk: {
+    type: Boolean,
+    default: true
+  },
+  showCancel: {
+    type: Boolean,
+    default: true
+  },
+  okLabel: {
+    type: String,
+    default: ''
+  },
+  cancelLabel: {
+    type: String,
+    default: ''
+  },
+  okClick: {
+    type: Function,
+    default: null
+  },
+  cancelClick: {
+    type: Function,
+    default: null
+  },
+  closeClick: {
+    type: Function,
+    default: null
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+const showDialog = useVModel(props, 'modelValue', emit) // 自动响应v-model
+
+const okButtonClick = $event => {
+  if (!props.okClick || props.okClick($event) !== false) {
+    showDialog.value = false
+  }
+}
+const cancelButtonClick = $event => {
+  if (!props.cancelClick || props.cancelClick($event) !== false) {
+    showDialog.value = false
+  }
+}
+
+const calcBeforeClose = computed(() => {
+  if (props.beforeClose) {
+    return props.beforeClose
+  } else if (props.closeClick) {
+    return done => {
+      if (props.closeClick() !== false) {
+        done()
+      }
+    }
+  }
+  return null
+})
+
+</script>
+
+<template>
+  <el-dialog
+    v-model="showDialog"
+    :title="title"
+    :before-close="calcBeforeClose"
+    :width="width"
+    :draggable="draggable"
+    v-bind="$attrs"
+  >
+    <el-container
+      :style="{ height:height }"
+    >
+      <slot
+        name="default"
+      />
+    </el-container>
+    <template #footer>
+      <span class="dialog-footer container-center">
+        <el-button
+          v-if="showOk"
+          type="primary"
+          @click="okButtonClick($event)"
+        >{{ okLabel||$t('common.label.confirm') }}</el-button>
+        <el-button
+          v-if="showCancel"
+          type="default"
+          @click="cancelButtonClick($event)"
+        >
+          {{ cancelLabel||$t('common.label.cancel') }}
+        </el-button>
+        <template v-for="(button, index) in buttons">
+          <el-button
+            v-if="!button.buttonIf||button.buttonIf()"
+            :key="index"
+            :type="button.type"
+            :icon="button.icon"
+            :size="button.size"
+            :disabled="button.disabled"
+            :round="button.round"
+            :circle="button.circle"
+            @click="button.click&&button.click($event)"
+          >
+            {{ button.label || $t(button.labelKey) }}
+          </el-button>
+        </template>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+
+</style>

src/components/index.js

@@ -7,6 +7,7 @@ import CommonMenuItem from '@/components/common-menu-item/index.vue'
 import CommonTabsView from '@/components/common-tabs-view/index.vue'
 import CommonTable from '@/components/common-table/index.vue'
 import CommonBreadcrumb from '@/components/common-breadcrumb/index.vue'
+import CommonWindow from '@/components/common-window/index.vue'
 
 /**
  * 自定义通用组件自动注册
@@ -25,5 +26,6 @@ export default {
     Vue.component('CommonTabsView', CommonTabsView)
     Vue.component('CommonTable', CommonTable)
     Vue.component('CommonBreadcrumb', CommonBreadcrumb)
+    Vue.component('CommonWindow', CommonWindow)
   }
 }