编辑窗口

src/assets/main.css

@@ -92,10 +92,14 @@ html, body, #app, .index-container {
     padding-top: 20px;
 }
 
-.form-edit-width {
+.form-edit-width-70 {
     width:70%
 }
 
+.form-edit-width-100 {
+    width:100%
+}
+
 /**
  * slide-fade动画
  */

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)
   }
 }

src/messages/common_cn.js

@@ -5,7 +5,10 @@ common.label.title = '简单Element+模板'
 common.label.login = '登录'
 common.label.index = '首页'
 common.label.settings = '设置'
+common.label.confirm = '确认'
+common.label.save = '保存'
 common.label.close = '关闭'
+common.label.cancel = '取消'
 common.label.refresh = '刷新'
 common.label.closeOther = '关闭其他'
 common.label.closeRight = '关闭右侧'

src/messages/common_en.js

@@ -5,7 +5,10 @@ common.label.title = 'Simple Element+'
 common.label.login = 'Login'
 common.label.index = 'Home'
 common.label.settings = 'Settings'
+common.label.confirm = 'Confirm'
+common.label.save = 'Save'
 common.label.close = 'Close'
+common.label.cancel = 'Cancel'
 common.label.refresh = 'Refresh'
 common.label.closeOther = 'Close Others'
 common.label.closeRight = 'Close Right'

src/services/user/UserService.js

@@ -27,3 +27,50 @@ export const loadUserResult = async (id, config) => {
   console.info('==================', usersResult)
   return usersResult
 }
+
+/**
+ * @return {[CommonFormOption]}
+ */
+export const useUserFormOptions = () => {
+  return [{
+    label: '中文名',
+    prop: 'nameCn',
+    placeholder: '请输入中文名',
+    required: true
+  }, {
+    label: '英文名',
+    prop: 'nameEn',
+    placeholder: '请输入英文名',
+    required: true
+  }, {
+    label: '出生日期',
+    type: 'date-picker',
+    prop: 'birthday',
+    value: '',
+    placeholder: '选择出生日期',
+    required: true
+  }, {
+    label: '性别',
+    type: 'radio-group',
+    prop: 'gender',
+    value: '',
+    required: true,
+    children: [
+      {
+        label: '男',
+        value: 'male'
+      },
+      {
+        label: '女',
+        value: 'female'
+      }
+    ]
+  }, {
+    label: '地址',
+    prop: 'address',
+    value: '',
+    attrs: {
+      type: 'textarea'
+    }
+  }]
+}

src/views/tools/TableEdit.vue

@@ -1,60 +1,17 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { loadUserResult } from '@/services/user/UserService'
+import { loadUserResult, useUserFormOptions } from '@/services/user/UserService'
 
 const route = useRoute()
 
 const userDto = ref({
   id: route.params.id
 })
-/**
+
- * @type {[CommonFormOption]}
+const userFormOptions = ref(useUserFormOptions())
- */
-const userFormOptions = [{
-  label: '中文名',
-  prop: 'nameCn',
-  placeholder: '请输入中文名',
-  required: true
-}, {
-  label: '英文名',
-  prop: 'nameEn',
-  placeholder: '请输入英文名',
-  required: true
-}, {
-  label: '出生日期',
-  type: 'date-picker',
-  prop: 'birthday',
-  value: '',
-  placeholder: '选择出生日期',
-  required: true
-}, {
-  label: '性别',
-  type: 'radio-group',
-  prop: 'gender',
-  value: '',
-  required: true,
-  children: [
-    {
-      label: '男',
-      value: 'male'
-    },
-    {
-      label: '女',
-      value: 'female'
-    }
-  ]
-}, {
-  label: '地址',
-  prop: 'address',
-  value: '',
-  attrs: {
-    type: 'textarea'
-  }
-}]
 
 const loadUser = async () => {
-  console.info('============', route)
   const id = route.params.id
   if (id) {
     const userResult = await loadUserResult(id)
@@ -81,7 +38,7 @@ const submitForm = form => {
 <template>
   <el-container class="container-center">
     <common-form
-      class="form-edit-width"
+      class="form-edit-width-70"
       :model="userDto"
       :options="userFormOptions"
       label-width="120px"

src/views/tools/Tables.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted, ref } from 'vue'
-import { loadUsersResult } from '@/services/user/UserService'
+import { loadUsersResult, useUserFormOptions } from '@/services/user/UserService'
 import { useDefaultPage } from '@/config'
 import { useRouter } from 'vue-router'
 
@@ -57,7 +57,7 @@ const buttons = ref([{
   labelKey: 'common.label.edit',
   type: 'primary',
   click: item => {
-    console.info('编辑=============', item)
+    toEditUser(item)
   },
   buttonIf (item) {
     return !!item.id
@@ -71,9 +71,26 @@ const buttons = ref([{
   buttonIf (item) {
     return !!item.id
   }
-}, {
-  label: '其他操作'
 }])
+/** *************用户编辑**************/
+const currentUser = ref({})
+const showEdit = ref(false)
+const userFormOptions = ref(useUserFormOptions())
+const toEditUser = user => {
+  currentUser.value = { ...user }
+  showEdit.value = true
+}
+const formRef = ref()
+const submitForm = () => {
+  formRef.value.form.validate(valid => {
+    if (valid) {
+      console.log('submit', currentUser.value)
+      showEdit.value = false
+    }
+  })
+  return false
+}
+
 </script>
 
 <template>
@@ -84,7 +101,7 @@ const buttons = ref([{
       :columns="columns"
       :buttons="buttons"
       buttons-slot="buttons"
-      :buttons-column-attrs="{width:'300px'}"
+      :buttons-column-attrs="{width:'200px'}"
       @page-size-change="loadUsers()"
       @current-page-change="loadUsers()"
     >
@@ -104,6 +121,21 @@ const buttons = ref([{
         </el-button>
       </template>
     </common-table>
+    <common-window
+      v-model="showEdit"
+      :width="'600px'"
+      :ok-click="submitForm"
+      title="用户编辑"
+    >
+      <common-form
+        ref="formRef"
+        class="form-edit-width-100"
+        :model="currentUser"
+        :options="userFormOptions"
+        label-width="100px"
+        :show-buttons="false"
+      />
+    </common-window>
   </el-container>
 </template>