feat(安全教育培训): 页面

src/api/project/SaftyManage.ts → src/api/project/safetyEducation.ts

@@ -2,19 +2,19 @@ import { defHttp } from '@/utils/http/axios';
 import { ProjectModel, ProjectParams } from '@/api/project/model/projectModel';
 
 enum Api {
-  GetList = '/pro/dangerManagement/page',
-  UpdateProject = '/pro/dangerManagement/update',
-  DeleteProject = '/pro/dangerManagement/del',
+    GetList = '/pro/educationTraining/page',
+    UpdateProject = '/pro/educationTraining/update',
+    DeleteProject = '/pro/educationTraining/del',
 }
 
 export const getListByPage = (params?: ProjectParams) =>
-  defHttp.post<ProjectModel>({ url: Api.GetList, data: params });
+    defHttp.post<ProjectModel>({ url: Api.GetList, data: params });
 
 export const addItem = (params?: any) =>
-  defHttp.post<ProjectModel>({ url: Api.UpdateProject, data: params });
+    defHttp.post<ProjectModel>({ url: Api.UpdateProject, data: params });
 
 export const updateItem = (params?: any) =>
-  defHttp.post<ProjectModel>({ url: Api.UpdateProject, data: params });
+    defHttp.post<ProjectModel>({ url: Api.UpdateProject, data: params });
 
 export const deleteItem = (params?: any) =>
-  defHttp.delete<ProjectModel>({ url: Api.DeleteProject, params });
+    defHttp.delete<ProjectModel>({ url: Api.DeleteProject, params });

src/views/potentialSafety/data.ts

@@ -50,6 +50,9 @@ export const formSchema: FormSchema[] = [
     field: 'planCost',
     required: true,
     component: 'Input',
+    componentProps: {
+      addonAfter: '万元',
+    },
   },
   {
     label: '实际费用(万元)',
@@ -57,6 +60,9 @@ export const formSchema: FormSchema[] = [
     field: 'planCost',
     required: true,
     component: 'Input',
+    componentProps: {
+      addonAfter: '万元',
+    },
   },
   {
     field: 'actualTime',

src/views/potentialSafety/index.vue

@@ -35,14 +35,14 @@
 </template>
 <script setup lang="ts">
 import { BasicTable, useTable, TableAction } from '@/components/Table';
-import { getListByPage } from '@/api/project/SaftyManage';
+import { getListByPage } from '@/api/project/saftyManage';
 import {
   columns,
   searchFormSchema,
 } from '@/views/potentialSafety/data';
 import {useDrawer} from "@/components/Drawer";
 import SafetyDrawer from "@/views/potentialSafety/safetyDrawer.vue";
-import {deleteItem} from "@/api/project/SaftyManage";
+import {deleteItem} from "@/api/project/saftyManage";
 const [registerDrawer, { openDrawer }] = useDrawer();
 const [registerTable, { reload }] = useTable({
   api: getListByPage,
@@ -56,7 +56,7 @@ const [registerTable, { reload }] = useTable({
   bordered: true,
   showIndexColumn: false,
   actionColumn: {
-    width: 80,
+    width: 150,
     title: '操作',
     dataIndex: 'action',
     fixed: undefined,

src/views/potentialSafety/safetyDrawer.vue

@@ -17,7 +17,7 @@
   import { BasicForm, useForm, FormActionType } from '@/components/Form';
   import { formSchema } from './data';
   import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
-  import { addItem, updateItem } from '@/api/project/SaftyManage';
+  import { addItem, updateItem } from '@/api/project/saftyManage';
 
   const emit = defineEmits(['success', 'register']);
   const isUpdate = ref(true);

src/views/safetyEducation/data.ts

+import { BasicColumn, FormSchema } from '@/components/Table';
+
+export const formSchema: FormSchema[] = [
+    {
+        field: 'fillingPeriod',
+        labelWidth: '140px',
+        label: '填报周期',
+        required: true,
+        component: 'DatePicker',
+        componentProps: {
+            placeholder: '选择填报周期',
+            style: { width: '100%' },
+            valueFormat: 'YYYY-MM-DD',
+            format: 'YYYY-MM-DD',
+        },
+    },
+    {
+        field: 'trainingTime',
+        labelWidth: '140px',
+        label: '培训时间',
+        required: true,
+        component: 'DatePicker',
+        componentProps: {
+            placeholder: '选择培训时间',
+            style: { width: '100%' },
+            valueFormat: 'YYYY-MM-DD',
+            format: 'YYYY-MM-DD',
+        },
+    },
+    {
+        label: '培训主题',
+        labelWidth: '140px',
+        field: 'trainingTheme',
+        required: true,
+        component: 'Input',
+    },
+    {
+        label: '培训类型',
+        labelWidth: '140px',
+        field: 'trainingType',
+        required: true,
+        component: 'Select',
+        componentProps: {
+            options: [
+                {
+                    label: '类型一',
+                    value: '类型一',
+                },
+                {
+                    label: '类型二',
+                    value: '类型二',
+                },
+            ],
+        },
+    },
+    {
+        label: '培训形式',
+        labelWidth: '140px',
+        field: 'trainingFormat',
+        required: true,
+        component: 'Input'
+    },
+    {
+        field: 'trainingMeet',
+        labelWidth: '140px',
+        label: '培训会议',
+        required: true,
+        component: 'Input'
+    },
+    {
+        field: 'trainers',
+        labelWidth: '140px',
+        label: '培训人员',
+        required: true,
+        component: 'Select',
+        componentProps: {
+            options: [
+                {
+                    label: '人员一',
+                    value: '人员一',
+                },
+                {
+                    label: '人员二',
+                    value: '人员二',
+                },
+            ],
+        },
+    },
+    {
+        label: '学时(合计)',
+        labelWidth: '140px',
+        field: 'knowledge',
+        required: true,
+        component: 'Input',
+    },
+    {
+        label: '人数(人)',
+        labelWidth: '140px',
+        field: 'numberOfPeople',
+        required: true,
+        component: 'Input',
+    },
+    {
+        label: '备注',
+        labelWidth: '140px',
+        field: 'remark',
+        required: true,
+        component: 'Input',
+    },
+];
+export const columns: BasicColumn[] = [
+    {
+        title: '填报周期',
+        dataIndex: 'fillingPeriod',
+        width: 150,
+    },
+    {
+        title: '培训时间',
+        dataIndex: 'trainingTime',
+        width: 150,
+    },
+    {
+        title: '培训主题',
+        dataIndex: 'trainingTheme',
+        width: 150,
+    },
+    {
+        title: '培训类型',
+        dataIndex: 'trainingType',
+        width: 180,
+    },
+    {
+        title: '培训形式',
+        dataIndex: 'trainingFormat',
+        width: 180,
+    },
+    {
+        title: '计划会议',
+        dataIndex: 'trainingMeet',
+        width: 180,
+    },
+    {
+        title: '培训人员',
+        dataIndex: 'trainers',
+        width: 180,
+    },
+    {
+        title: '学识(合计)',
+        dataIndex: 'knowledge',
+        width: 180,
+    },
+    {
+        title: '人数',
+        dataIndex: 'numberOfPeople',
+        width: 180,
+    },
+    {
+        title: '备注',
+        dataIndex: 'remark',
+        width: 180,
+    },
+];
+
+export const searchFormSchema: FormSchema[] = [
+    {
+        field: 'fillingPeriod',
+        label: '',
+        component: 'DatePicker',
+        componentProps: {
+            placeholder: '选择填报周期',
+            style: { width: '100%' },
+            valueFormat: 'YYYY-MM-DD',
+            format: 'YYYY-MM-DD',
+        },
+        colProps: { span: 4 },
+    },
+    {
+        field: 'trainers',
+        label: '',
+        component: 'Select',
+        componentProps: {
+            options: [
+                { label: '人员一', value: '人员一' },
+                { label: '人员二', value: '人员二' },
+            ],
+            placeholder: '培训人员',
+        },
+        colProps: { span: 4 },
+    },
+];

src/views/safetyEducation/educationDrawer.vue

+<template>
+  <BasicDrawer
+      v-bind="$attrs"
+      @register="registerDrawer"
+      showFooter
+      :title="getTitle"
+      width="700px"
+      @ok="handleSubmit"
+  >
+    <BasicForm ref="formElRef" @register="registerForm">
+      <!-- <template #menu="{ model, field }"> </template> -->
+    </BasicForm>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+import { ref, unref } from 'vue';
+import { BasicForm, useForm, FormActionType } from '@/components/Form';
+import { formSchema } from './data';
+import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
+import { addItem, updateItem } from '@/api/project/safetyEducation';
+
+const emit = defineEmits(['success', 'register']);
+const isUpdate = ref(true);
+const detailId = ref(0);
+const formElRef = ref<Nullable<FormActionType>>(null);
+const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+  labelWidth: 90,
+  baseColProps: { span: 24 },
+  schemas: formSchema,
+  showActionButtonGroup: false,
+});
+
+const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+  resetFields();
+  setDrawerProps({ confirmLoading: false });
+  isUpdate.value = !!data?.isUpdate;
+  if (isUpdate.value) {
+    detailId.value = data.record.id;
+    getTitle.value = '编辑安全教育';
+  } else {
+    getTitle.value = '创建安全教育';
+  }
+  if (data.disabled == true) {
+    getTitle.value = '查看安全教育';
+    const formEl = unref(formElRef);
+    if (!formEl) return;
+    await formEl.setProps({
+      disabled: true,
+    });
+  }
+
+  if (unref(isUpdate)) {
+    setFieldsValue({
+      ...data.record,
+    });
+  }
+});
+
+const getTitle = ref('');
+async function handleSubmit() {
+  try {
+    const values = await validate();
+    setDrawerProps({ confirmLoading: true });
+    if (isUpdate.value) {
+      values.id = detailId.value;
+    }
+    // TODO custom api
+    console.log(values);
+    let res = isUpdate.value ? await updateItem(values) : await addItem(values);
+    console.log(res);
+
+    closeDrawer();
+    emit('success', res);
+  } finally {
+    setDrawerProps({ confirmLoading: false });
+  }
+}
+</script>

src/views/safetyEducation/index.vue

 <template>
   <div>
-    <BasicTable @register="registerTable" :title="'变更签证管理'">
+    <BasicTable @register="registerTable" :title="'安全教育培训'">
       <template #toolbar>
-        <a-button type="primary" icon=""> 新建变更签证管理 </a-button>
+        <a-button type="primary" icon="" @click="handleCreate"> 新建安全教育 </a-button>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
           <TableAction
               :actions="[
               {
-                icon: 'clarity:note-edit-line',
-                onClick: handleEdit.bind(null, record),
+                label: '详情',
+                onClick: handleDetails.bind(null, record, true),
               },
               {
-                icon: 'ant-design:delete-outlined',
+                label: '编辑',
+                onClick: handleEdit.bind(null, record, false),
+              },
+              {
+                label: '删除',
                 color: 'error',
                 popConfirm: {
                   title: '是否确认删除',
@@ -26,16 +30,20 @@
         </template>
       </template>
     </BasicTable>
+    <safety-drawer @register="registerDrawer" @success="handleSuccess" />
   </div>
 </template>
 <script setup lang="ts">
 import { BasicTable, useTable, TableAction } from '@/components/Table';
-import { getListByPage } from '@/api/project/biddingPlan';
+import { getListByPage } from '@/api/project/safetyEducation';
 import {
   columns,
   searchFormSchema,
-} from '@/views/changeSignature/changeSignatrue.data';
-
+} from '@/views/potentialSafety/data';
+import {useDrawer} from "@/components/Drawer";
+import SafetyDrawer from "@/views/safetyEducation/educationDrawer.vue" ;
+import {deleteItem} from "@/api/project/safetyEducation";
+const [registerDrawer, { openDrawer }] = useDrawer();
 const [registerTable, { reload }] = useTable({
   api: getListByPage,
   columns,
@@ -48,23 +56,37 @@ const [registerTable, { reload }] = useTable({
   bordered: true,
   showIndexColumn: false,
   actionColumn: {
-    width: 80,
+    width: 150,
     title: '操作',
     dataIndex: 'action',
-    // slots: { customRender: 'action' },
     fixed: undefined,
   },
 });
 
-function handleEdit(record: Recordable) {
+async function handleEdit(record: Recordable, disabled: boolean) {
   openDrawer(true, {
     record,
     isUpdate: true,
   });
 }
 
+async function handleDetails(record: Recordable, disabled: boolean) {
+  openDrawer(true, {
+    record,
+    isUpdate: true,
+    disabled,
+  });
+}
+
 function handleDelete(record: Recordable) {
-  console.log(record);
+  deleteItem({ id: record.id });
+  reload();
+}
+
+function handleCreate() {
+  openDrawer(true, {
+    isUpdate: false,
+  });
 }
 </script>