增加人像页面

apps/web-antd/src/views/sis/personLibImg/data.ts

@@ -1,84 +1,33 @@
 import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
+import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
+
+import { getDictOptions } from '#/utils/dict';
+
 export const querySchema: FormSchemaGetter = () => [
-  {
-    component: 'Input',
-    fieldName: 'libCode',
-    label: '人员库编码',
-  },
   {
     component: 'Input',
     fieldName: 'imgName',
     label: '人像名称',
   },
-  {
-    component: 'Input',
-    fieldName: 'imgCode',
-    label: '图片编码',
-  },
-  {
-    component: 'Input',
-    fieldName: 'imgUrl',
-    label: '图片的存储地址',
-  },
   {
     component: 'Select',
-    componentProps: {},
+    componentProps: {
+      getPopupContainer,
+      options: getDictOptions(DictEnum.SYS_USER_SEX),
+    },
     fieldName: 'sex',
     label: '性别',
   },
-  {
-    component: 'Input',
-    fieldName: 'email',
-    label: '邮箱',
-  },
-  {
-    component: 'Input',
-    fieldName: 'tel',
-    label: '联系方式',
-  },
-  {
-    component: 'Select',
-    componentProps: {},
-    fieldName: 'certificateType',
-    label: '证件类型',
-  },
-  {
-    component: 'Input',
-    fieldName: 'certificateNo',
-    label: '证件号码',
-  },
-  {
-    component: 'Input',
-    fieldName: 'birthDate',
-    label: '出生日期',
-  },
-  {
-    component: 'Input',
-    fieldName: 'createById',
-    label: '创建人id',
-  },
-  {
-    component: 'Input',
-    fieldName: 'updateById',
-    label: '更新人id',
-  },
-  {
-    component: 'Input',
-    fieldName: 'searchValue',
-    label: '搜索值',
-  },
 ];
 
 // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
 // export const columns: () => VxeGridProps['columns'] = () => [
 export const columns: VxeGridProps['columns'] = [
   { type: 'checkbox', width: 60 },
-  {
-    title: '主键id',
-    field: 'id',
-  },
+
   {
     title: '人员库编码',
     field: 'libCode',
@@ -87,16 +36,9 @@ export const columns: VxeGridProps['columns'] = [
     title: '人像名称',
     field: 'imgName',
   },
-  {
-    title: '图片编码',
-    field: 'imgCode',
-  },
-  {
-    title: '图片的存储地址',
-    field: 'imgUrl',
-  },
   {
     title: '性别',
+    field: 'sex',
   },
   {
     title: '邮箱',
@@ -118,45 +60,16 @@ export const columns: VxeGridProps['columns'] = [
     title: '出生日期',
     field: 'birthDate',
   },
-  {
-    title: '创建人id',
-    field: 'createById',
-  },
-  {
-    title: '更新人id',
-    field: 'updateById',
-  },
-  {
-    title: '搜索值',
-    field: 'searchValue',
-  },
   {
     field: 'action',
     fixed: 'right',
-    slots: {
-      default: 'action',
-    },
+    slots: { default: 'action' },
     title: '操作',
     width: 180,
   },
 ];
 
 export const modalSchema: FormSchemaGetter = () => [
-  {
-    label: '主键id',
-    fieldName: 'id',
-    component: 'Input',
-    dependencies: {
-      show: () => false,
-      triggerFields: [''],
-    },
-  },
-  {
-    label: '人员库编码',
-    fieldName: 'libCode',
-    component: 'Input',
-    rules: 'required',
-  },
   {
     label: '人像名称',
     fieldName: 'imgName',
@@ -164,21 +77,13 @@ export const modalSchema: FormSchemaGetter = () => [
     rules: 'required',
   },
   {
-    label: '图片编码',
-    fieldName: 'imgCode',
-    component: 'Input',
-  },
-  {
-    label: '图片的存储地址',
-    fieldName: 'imgUrl',
-    component: 'Input',
-    rules: 'required',
-  },
-  {
-    label: '性别 1：男',
+    label: '性别',
     fieldName: 'sex',
     component: 'Select',
-    componentProps: {},
+    componentProps: {
+      getPopupContainer,
+      options: getDictOptions(DictEnum.SYS_USER_SEX),
+    },
   },
   {
     label: '邮箱',
@@ -194,7 +99,10 @@ export const modalSchema: FormSchemaGetter = () => [
     label: '证件类型',
     fieldName: 'certificateType',
     component: 'Select',
-    componentProps: {},
+    componentProps: {
+      getPopupContainer,
+      options: getDictOptions(DictEnum.SYS_CERTIFICATE_TYPE),
+    },
   },
   {
     label: '证件号码',
@@ -207,18 +115,13 @@ export const modalSchema: FormSchemaGetter = () => [
     component: 'Input',
   },
   {
-    label: '创建人id',
-    fieldName: 'createById',
-    component: 'Input',
-  },
-  {
-    label: '更新人id',
-    fieldName: 'updateById',
-    component: 'Input',
-  },
-  {
-    label: '搜索值',
-    fieldName: 'searchValue',
-    component: 'Input',
+    label: '人像图片',
+    fieldName: 'img',
+    component: 'ImageUpload',
+    componentProps: {
+      // accept: 'image/*', // 可选拓展名或者mime类型 ,拼接
+      maxCount: 1, // 最大上传文件数 默认为1 为1会绑定为string而非string[]类型
+    },
+    formItemClass: 'col-span-2',
   },
 ];

apps/web-antd/src/views/sis/personLibImg/index.vue

@@ -1,30 +1,24 @@
 <script setup lang="ts">
-import type { Recordable } from '@vben/types';
+import type { VbenFormProps } from '@vben/common-ui';
 
-import { ref } from 'vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { PersonLibImgForm } from '#/api/sis/personLibImg/model';
 
-import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { Page, useVbenModal } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
-import dayjs from 'dayjs';
-
-import {   
-  useVbenVxeGrid,
-  vxeCheckboxChecked,
-  type VxeGridProps 
-} from '#/adapter/vxe-table';
 
+import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
 import {
   personLibImgExport,
   personLibImgList,
   personLibImgRemove,
 } from '#/api/sis/personLibImg';
-import type { PersonLibImgForm } from '#/api/sis/personLibImg/model';
 import { commonDownloadExcel } from '#/utils/file/download';
 
-import personLibImgModal from './personLibImg-modal.vue';
 import { columns, querySchema } from './data';
+import personLibImgModal from './personLibImg-modal.vue';
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -76,7 +70,7 @@ const gridOptions: VxeGridProps = {
     keyField: 'id',
   },
   // 表格全局唯一表示 保存列配置需要用到
-  id: 'sis-personLibImg-index'
+  id: 'system-personLibImg-index',
 };
 
 const [BasicTable, tableApi] = useVbenVxeGrid({
@@ -118,9 +112,14 @@ function handleMultiDelete() {
 }
 
 function handleDownloadExcel() {
-  commonDownloadExcel(personLibImgExport, '人像信息数据', tableApi.formApi.form.values, {
-    fieldMappingTime: formOptions.fieldMappingTime,
-  });
+  commonDownloadExcel(
+    personLibImgExport,
+    '人像信息数据',
+    tableApi.formApi.form.values,
+    {
+      fieldMappingTime: formOptions.fieldMappingTime,
+    },
+  );
 }
 </script>
 
@@ -130,7 +129,7 @@ function handleDownloadExcel() {
       <template #toolbar-tools>
         <Space>
           <a-button
-            v-access:code="['sis:personLibImg:export']"
+            v-access:code="['system:personLibImg:export']"
             @click="handleDownloadExcel"
           >
             {{ $t('pages.common.export') }}
@@ -138,14 +137,15 @@ function handleDownloadExcel() {
           <a-button
             :disabled="!vxeCheckboxChecked(tableApi)"
             danger
-            type="primary" 
-            v-access:code="['sis:personLibImg:remove']" 
-            @click="handleMultiDelete">
+            type="primary"
+            v-access:code="['system:personLibImg:remove']"
+            @click="handleMultiDelete"
+          >
             {{ $t('pages.common.delete') }}
           </a-button>
           <a-button
             type="primary"
-            v-access:code="['sis:personLibImg:add']"
+            v-access:code="['system:personLibImg:add']"
             @click="handleAdd"
           >
             {{ $t('pages.common.add') }}
@@ -155,7 +155,7 @@ function handleDownloadExcel() {
       <template #action="{ row }">
         <Space>
           <ghost-button
-            v-access:code="['sis:personLibImg:edit']"
+            v-access:code="['system:personLibImg:edit']"
             @click.stop="handleEdit(row)"
           >
             {{ $t('pages.common.edit') }}
@@ -168,7 +168,7 @@ function handleDownloadExcel() {
           >
             <ghost-button
               danger
-              v-access:code="['sis:personLibImg:remove']"
+              v-access:code="['system:personLibImg:remove']"
               @click.stop=""
             >
               {{ $t('pages.common.delete') }}

apps/web-antd/src/views/sis/personLibImg/personLibImg-modal.vue

@@ -6,7 +6,11 @@ import { $t } from '@vben/locales';
 import { cloneDeep } from '@vben/utils';
 
 import { useVbenForm } from '#/adapter/form';
-import { personLibImgAdd, personLibImgInfo, personLibImgUpdate } from '#/api/sis/personLibImg';
+import {
+  personLibImgAdd,
+  personLibImgInfo,
+  personLibImgUpdate,
+} from '#/api/sis/personLibImg';
 import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { modalSchema } from './data';
@@ -21,13 +25,13 @@ const title = computed(() => {
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
     // 默认占满两列
-    formItemClass: 'col-span-2',
+    formItemClass: 'col-span-1',
     // 默认label宽度 px
     labelWidth: 80,
     // 通用配置项 会影响到所有表单项
     componentProps: {
       class: 'w-full',
-    }
+    },
   },
   schema: modalSchema(),
   showDefaultActions: false,
@@ -43,7 +47,7 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
 
 const [BasicModal, modalApi] = useVbenModal({
   // 在这里更改宽度
-  class: 'w-[550px]',
+  class: 'w-[700px]',
   fullscreenButton: false,
   onBeforeClose,
   onClosed: handleClosed,
@@ -98,4 +102,3 @@ async function handleClosed() {
     <BasicForm />
   </BasicModal>
 </template>
-