附件图片管理

server/api/urls.py

@@ -28,4 +28,5 @@ urlpatterns = [
     path('addMenu/', views.addMenu.as_view(), name='add_menu'),
     path('editMenu/', views.editMenu.as_view(), name='edit_menu'),
     path('deleteMenu/', views.deleteMenu.as_view(), name='delete_menu'),
+    path('upload/', views.FileUpload.as_view(), name='upload'),
 ]

server/api/views.py

@@ -132,6 +132,7 @@ class login(View):
         data = json.loads(request.body)
         user = User.objects.all().filter(username=data.get(
             'username'), password=data.get('password'))
+        print(user)
         if user:
             res = format_login_result(user)
             return JsonResponse({'code': 0, 'msg': 'success', 'result': res}, json_dumps_params={"ensure_ascii": False})
@@ -303,3 +304,19 @@ class deleteMenu(View):
         except Exception as e:
             print(e)
             return JsonResponse({'code': 1, 'type': 'error', 'message': 'server error'}, json_dumps_params={"ensure_ascii": False})
+
+
+class FileUpload(View):
+    def post(self, request):
+        # data = request.body
+        print('=====================sendPage==================')
+        img = request.FILES.get("file", None)
+        print(img)
+        print(img.name)   # 获取文件名称
+        print(img.chunks)  # 获取文件内容
+        # 创建文件
+        print('=====================sendPage==================')
+
+        # 报存到数据库
+        # FileUpload.objects.create(name=img.name)
+        return HttpResponse("ok")

src/api/sys/upload.ts

@@ -12,6 +12,11 @@ export function uploadApi(
   params: UploadFileParams,
   onUploadProgress: (progressEvent: ProgressEvent) => void
 ) {
+  console.log('====================');
+  console.log(params);
+  console.log(uploadUrl);
+  console.log('uploadUrl');
+  console.log('====================');
   return defHttp.uploadFile<UploadApiResult>(
     {
       url: uploadUrl,

src/locales/lang/en/component/upload.ts

@@ -21,10 +21,13 @@ export default {
 
   legend: 'Legend',
   fileName: 'File name',
+  imageName: 'Image name',
   fileSize: 'File size',
+  imageSize: 'Image size',
   fileStatue: 'File status',
 
   startUpload: 'Start upload',
+  uploadBtn: 'upload',
   uploadSuccess: 'Upload successfully',
   uploadError: 'Upload failed',
   uploading: 'Uploading',

src/locales/lang/zh_CN/component/upload.ts

@@ -21,9 +21,12 @@ export default {
 
   legend: '略缩图',
   fileName: '文件名',
+  imageName: '图片名',
+  imageSize: '图片大小',
   fileSize: '文件大小',
   fileStatue: '状态',
 
+  uploadBtn: '上传',
   startUpload: '开始上传',
   uploadSuccess: '上传成功',
   uploadError: '上传失败',

src/views/table/editTable/index.vue

@@ -10,6 +10,8 @@
       <template #action="{ record, column }">
         <TableAction :actions="createActions(record, column)" />
       </template>
+      <!-- <template #action="{ record, column }">
+      </template> -->
       <template #form-custom > custom-slot </template>
 
       <template #toolbar>
@@ -21,42 +23,28 @@
         </a-button>
       </template>
     </BasicTable>
-    <Add @register="addRegister" />
+    <Model @register="addRegister" :modelData="modelData" />
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, unref } from 'vue';
+  import { defineComponent, reactive, ref, unref } from 'vue';
   import { getFormConfig } from '../tableData';
-  import Add from './add.vue'
-import { useModal } from '/@/components/Modal';
+  import { useModal } from '/@/components/Modal';
   import {
     BasicTable,
     useTable,
     TableAction,
+    TableImg,
     BasicColumn,
     ActionItem,
     EditRecordRow,
     TableActionType
   } from '/@/components/Table';
+  import Model from './model.vue'
 
 
   const columns: BasicColumn[] = [
     {
-      title: '姓名',
-      dataIndex: 'name',
-      edit: true, // 点击修改当前单元格
-      editComponentProps: {
-        prefix: '$',
-      },
-      width: 200,
-    },
-    {
-      title: '地址',
-      dataIndex: 'addr',
-      editRow: true,
-      width: 200,
-    },
-    {
       title: 'id',
       dataIndex: 'id',
       editRow: true,
@@ -65,53 +53,24 @@ import { useModal } from '/@/components/Modal';
       width: 200,
     },
     {
-      title: '输入框函数校验',
-      dataIndex: 'name2',
-      editRow: true,
-      editRule: async (text) => {
-        if (text === '2') {
-          return '不能输入该值';
-        }
-        return '';
+      title: '姓名',
+      dataIndex: 'name',
+      edit: true, // 点击修改当前单元格
+      editComponentProps: {
+        prefix: '$',
       },
       width: 200,
     },
     {
-      title: '数字输入框',
-      dataIndex: 'id',
-      editRow: true,
-      editRule: true,
-      editComponent: 'InputNumber',
-      width: 200,
-    },
-    {
-      title: '下拉框',
-      dataIndex: 'name3',
+      title: '地址',
+      dataIndex: 'addr',
       editRow: true,
-      editComponent: 'Select',
-      editComponentProps: {
-        options: [
-          {
-            label: 'Option1',
-            value: '1',
-          },
-          {
-            label: 'Option2',
-            value: '2',
-          },
-        ],
-      },
       width: 200,
     },
     {
-      title: '勾选框',
-      dataIndex: 'name5',
+      title: '年龄',
+      dataIndex: 'age',
       editRow: true,
-
-      editComponent: 'Checkbox',
-      editValueMap: (value) => {
-        return value ? '是' : '否';
-      },
       width: 200,
     },
     {
@@ -126,9 +85,15 @@ import { useModal } from '/@/components/Modal';
     },
   ];
 
+  interface ModelData {
+    title: string,
+  }
   export default defineComponent({
-    components: { BasicTable, TableAction, Add },
+    components: { BasicTable, TableAction, TableImg, Model },
     setup() {
+       const modelData = reactive<ModelData>({
+        title: '',
+      })
       const tableRef = ref<Nullable<TableActionType>>(null);
       const currentEditKeyRef = ref('');
       const [registerTable] = useTable({
@@ -141,11 +106,11 @@ import { useModal } from '/@/components/Modal';
         // showTableSetting: true,
         formConfig: getFormConfig('hello'),
         // columns: [{title:'Id',dataIndex:'id',width:150},{title:'姓名',dataIndex:'name',width:200},{title:'地址',dataIndex:'addr',width:250}],
-        dataSource: [{id:1,name:'李白',addr:'新疆'},{id:2,name:'杜甫',addr:'北京'},{id:3,name:'贺知章',addr:'未知地点'}],
+        dataSource: [{id:1,name:'李白',addr:'新疆', age: 20},{id:2,name:'杜甫',addr:'北京', age: 32},{id:3,name:'贺知章',addr:'未知地点', age: 18}],
         showIndexColumn: false,
         actionColumn: {
           width: 160,
-          title: 'Action',
+          title: '操作',
           dataIndex: 'action',
           slots: { customRender: 'action' },
           fixed: undefined,
@@ -172,10 +137,11 @@ import { useModal } from '/@/components/Modal';
       }
 
       function addColumn() {
-        console.log('添加')
+        modelData.title = '添加'
         openAdd(true, {
-          data: '苏轼',
-          info: '苏州',
+          name: '',
+          age: '',
+          addr: '',
         });
       }
 
@@ -199,10 +165,11 @@ import { useModal } from '/@/components/Modal';
         console.log('end----------------')
       }
 
-      function handleEdit(record: EditRecordRow) {
-        currentEditKeyRef.value = record.id;  // record.key
-        record.onEdit?.(true);
-      }
+      // function handleEdit(record: EditRecordRow) {
+      //   currentEditKeyRef.value = record.id;  // record.key
+      //   record.onEdit?.(true);
+      // }
+
 
       function handleCancel(record: EditRecordRow) {
         currentEditKeyRef.value = '';
@@ -218,7 +185,14 @@ import { useModal } from '/@/components/Modal';
           currentEditKeyRef.value = '';
         }
       }
-       function handleDelete(record: Recordable) {
+      function handleEdit(record: EditRecordRow) {
+        console.log('编辑完成end')
+        console.log(record)
+        modelData.title = '编辑'
+        openAdd(true, record);
+        console.log('end----------------')
+      }
+      function handleDelete(record: Recordable) {
         console.log('点击了删除', record);
         const data = getTableAction().getDataSource()
         getTableAction().setTableData(data.filter(item => item.id !== record.id))
@@ -261,7 +235,7 @@ import { useModal } from '/@/components/Modal';
         ];
       }
       return {
-
+        modelData,
         // ...toRefs(state),
         tableRef,
         registerTable,

src/views/table/tableData.ts

@@ -222,12 +222,12 @@ export function getMergeHeaderColumns(): BasicColumn[] {
     },
   ];
 }
-export const getAdvanceSchema = (itemNumber = 6): FormSchema[] => {
+export const getAdvanceSchema = (itemNumber = 2): FormSchema[] => {
   const arr: any = [];
   for (let index = 0; index < itemNumber; index++) {
     arr.push({
-      field: `field${index}`,
-      label: `字段${index}`,
+      field: `field${index++}`,
+      label: `字段${index++}`,
       component: 'Input',
       colProps: {
         xl: 12,

src/views/test/index.vue

@@ -1,13 +1,14 @@
 <template>
+    <!-- content="目前mock了两组数据， id为1 和 2 具体返回的菜单可以在mock/sys/menu.ts内查看" -->
+
   <PageWrapper
     title="后台权限示例"
     contentBackground
     contentClass="p-4"
-    content="目前mock了两组数据， id为1 和 2 具体返回的菜单可以在mock/sys/menu.ts内查看"
   >
     <CurrentPermissionMode />
 
-    <Alert class="mt-4" type="info" message="点击后请查看左侧菜单变化" show-icon />
+    <!-- <Alert class="mt-4" type="info" message="点击后请查看左侧菜单变化" show-icon /> -->
 
     <!-- <div class="mt-4">
       权限切换(请先切换权限模式为后台权限模式):