search表单

src/views/tools/Forms.vue

@@ -1,125 +1,154 @@
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useCityAutocompleteConfig, useCitySelectPageConfig } from '@/services/city/CityService'
+import { $i18nMsg } from '@/messages'
+
+const defaultCity = ref({})
+
+setTimeout(() => {
+  defaultCity.value = {
+    code: 'SHA',
+    nameCn: '上海',
+    nameEn: 'Shanghai'
+  }
+}, 1000)
+
 /**
  * @type {[CommonFormOption]}
  */
-const formOptions = ref([{
-  label: '用户名',
-  prop: 'userName',
-  value: '',
-  placeholder: '请输入用户名',
-  required: true,
-  rules: [
-    {
-      min: 2,
-      max: 6,
-      message: '用户名在2-6位之间'
+const formOptions = computed(() => {
+  return [{
+    label: '用户名',
+    prop: 'userName',
+    value: '',
+    placeholder: '请输入用户名',
+    required: true,
+    rules: [
+      {
+        min: 2,
+        max: 6,
+        message: '用户名在2-6位之间'
+      }
+    ]
+  }, {
+    label: '密码',
+    prop: 'userPassword',
+    value: '',
+    placeholder: '请输入密码',
+    required: true,
+    pattern: /.{2,6}/,
+    attrs: {
+      showPassword: true
     }
-  ]
-}, {
-  label: '密码',
-  prop: 'userPassword',
-  value: '',
-  placeholder: '请输入密码',
-  required: true,
-  pattern: /.{2,6}/,
-  attrs: {
-    showPassword: true
-  }
-}, {
-  label: '出生日期',
-  type: 'date-picker',
-  prop: 'birthday',
-  value: '',
-  placeholder: '选择出生日期',
-  required: true
-}, {
-  label: '兴趣爱好',
-  type: 'checkbox-group',
-  prop: 'hobby',
-  value: '',
-  required: true,
-  children: [
-    {
-      label: '编程',
-      value: 'program'
+  }, {
+    label: '出生日期',
+    type: 'date-picker',
+    prop: 'birthday',
+    value: '',
+    placeholder: '选择出生日期',
+    required: true
+  }, {
+    label: '兴趣爱好',
+    type: 'checkbox-group',
+    prop: 'hobby',
+    value: '',
+    required: true,
+    children: [
+      {
+        label: '编程',
+        value: 'program'
+      },
+      {
+        label: '吃饭',
+        value: 'eat'
+      },
+      {
+        label: '睡觉',
+        value: 'sleep'
+      }
+    ]
+  }, {
+    label: '职业',
+    type: 'select',
+    prop: 'career',
+    value: '',
+    required: true,
+    children: [
+      {
+        label: '程序员',
+        value: 'programer'
+      },
+      {
+        label: '无业游民',
+        value: 'none'
+      },
+      {
+        label: '教师',
+        value: 'teacher'
+      }
+    ]
+  }, {
+    label: '性别',
+    type: 'radio-group',
+    prop: 'gender',
+    value: '',
+    required: true,
+    children: [
+      {
+        label: '男',
+        value: 'male'
+      },
+      {
+        label: '女',
+        value: 'female'
+      },
+      {
+        label: '保密',
+        value: 'unknown'
+      }
+    ]
+  }, {
+    label: '图标',
+    prop: 'icon',
+    value: '',
+    type: 'common-icon-select',
+    required: true
+  }, {
+    label: '城市',
+    prop: 'city',
+    value: defaultCity.value?.code,
+    type: 'common-autocomplete',
+    required: true,
+    placeholder: '请选择城市',
+    change: (city) => {
+      defaultCity.value = city
     },
-    {
-      label: '吃饭',
-      value: 'eat'
-    },
-    {
-      label: '睡觉',
-      value: 'sleep'
+    attrs: {
+      defaultLabel: $i18nMsg(defaultCity.value?.nameCn, defaultCity.value?.nameEn),
+      autocompleteConfig: useCityAutocompleteConfig(),
+      selectPageConfig: useCitySelectPageConfig()
     }
-  ]
-}, {
-  label: '职业',
-  type: 'select',
-  prop: 'career',
-  value: '',
-  required: true,
-  children: [
-    {
-      label: '程序员',
-      value: 'programer'
-    },
-    {
-      label: '无业游民',
-      value: 'none'
-    },
-    {
-      label: '教师',
-      value: 'teacher'
+  }, {
+    label: '城市1',
+    prop: 'city1',
+    value: defaultCity,
+    type: 'common-autocomplete',
+    required: true,
+    placeholder: '请选择城市1',
+    attrs: {
+      useIdModel: false,
+      autocompleteConfig: useCityAutocompleteConfig(),
+      selectPageConfig: useCitySelectPageConfig()
     }
-  ]
-}, {
-  label: '性别',
-  type: 'radio-group',
-  prop: 'gender',
-  value: '',
-  required: true,
-  children: [
-    {
-      label: '男',
-      value: 'male'
-    },
-    {
-      label: '女',
-      value: 'female'
-    },
-    {
-      label: '保密',
-      value: 'unknown'
+  }, {
+    label: '地址',
+    prop: 'address',
+    value: '',
+    attrs: {
+      type: 'textarea'
     }
-  ]
-}, {
-  label: '图标',
-  prop: 'icon',
-  value: '',
-  type: 'common-icon-select',
-  required: true
-}, {
-  label: '城市',
-  prop: 'city',
-  value: 'SHA',
-  type: 'common-autocomplete',
-  required: true,
-  placeholder: '请选择城市',
-  attrs: {
-    defaultLabel: '上海市',
-    autocompleteConfig: useCityAutocompleteConfig(),
-    selectPageConfig: useCitySelectPageConfig()
-  }
-}, {
-  label: '地址',
-  prop: 'address',
-  value: '',
-  attrs: {
-    type: 'textarea'
-  }
-}])
+  }]
+})
 const userDto = ref({
   userName: '',
   userPassword: ''

src/views/tools/Tables.vue

@@ -82,20 +82,22 @@ const searchFormOptions = computed(() => {
     {
       label: '用户名',
       prop: 'nameCn'
+    },
+    {
+      label: '关键字',
+      prop: 'keywords'
+    },
+    {
+      label: '地址',
+      prop: 'address'
     }, {
       label: $i18nMsg('性别', 'Gender'),
       type: 'select',
       prop: 'gender',
       children: [{
-        type: 'option',
-        value: '',
-        label: '请选择'
-      }, {
-        type: 'option',
         value: 'male',
         label: $i18nMsg('男', 'Male')
       }, {
-        type: 'option',
         value: 'female',
         label: $i18nMsg('女', 'Female')
       }]
@@ -106,9 +108,9 @@ const doSearch = form => {
   console.info('=================searchParam', searchParam.value)
 }
 /** *************用户编辑**************/
-const currentUser = ref({})
+const currentUser = ref(null)
 const showEdit = ref(false)
-const userFormOptions = ref(useUserFormOptions())
+const userFormOptions = computed(() => useUserFormOptions())
 const toEditUser = user => {
   currentUser.value = { ...user }
   showEdit.value = true
@@ -171,6 +173,7 @@ const submitForm = () => {
       title="用户编辑"
     >
       <common-form
+        v-if="currentUser"
         ref="formRef"
         class="form-edit-width-100"
         :model="currentUser"