mod: 添加剂库存

apps/web-ele/src/api/task/index.ts

@@ -1,6 +1,7 @@
 import { requestClient } from '#/api/request';
 
 enum Api {
+  additiveInventoryHandle = '/formAdditiveInventory/inventory/handle',
   emergencyWySubmit = '/formEmergencyDrill/drill/submit',
   emergencyWySubmitReport = '/formEmergencyDrill/drill/submitReport',
   groupLogBase = '/formTeamShiftLog/log/handle',
@@ -92,3 +93,12 @@ export function handleTurnInRateSurvey(params: any) {
 export function handleMarketingSurvey(params: any) {
   return requestClient.put(`${Api.marketingSurveyHandle}`, params);
 }
+
+/**
+ * 添加剂库存处理
+ * @param params 处理参数
+ * @returns
+ */
+export function handleAdditiveInventory(params: any) {
+  return requestClient.put(`${Api.additiveInventoryHandle}`, params);
+}

apps/web-ele/src/views/schedule/detail/components/additive.vue

@@ -0,0 +1,188 @@
+<script lang="ts" setup>
+// @ts-ignore
+import { computed, ref } from 'vue';
+
+import { ElCard } from 'element-plus';
+
+// @ts-ignore
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+// 定义组件的Props接口
+interface AdditiveProps {
+  taskDetail: any;
+}
+
+// 接收父组件传递的任务详情数据
+const props = defineProps<AdditiveProps>();
+
+// 计算属性，获取添加剂库存数据
+const additiveInventoryData = computed(() => {
+  return props.taskDetail || [];
+});
+
+// 格式化数值，保留两位小数
+const formatNumber = (value: number | string) => {
+  if (value === undefined || value === null || value === '') return '-';
+  const num = Number(value);
+  if (isNaN(num)) return '-';
+  return num.toFixed(2);
+};
+
+// 表格列配置
+const tableColumns: any = [
+  {
+    field: 'additiveType',
+    title: '添加剂类型',
+    width: 120,
+    fixed: 'left',
+    formatter: ({ row }) => {
+      return row.additiveType || '-';
+    },
+  },
+  {
+    field: 'initialInventory',
+    title: '期初库存',
+    width: 120,
+    formatter: ({ row }) => {
+      return formatNumber(row.initialInventory);
+    },
+  },
+  {
+    field: 'purchase',
+    title: '进货',
+    width: 100,
+    formatter: ({ row }) => {
+      return formatNumber(row.purchase);
+    },
+  },
+  {
+    field: 'useAmount',
+    title: '使用',
+    width: 100,
+    formatter: ({ row }) => {
+      return formatNumber(row.useAmount);
+    },
+  },
+  {
+    field: 'expectedInventory',
+    title: '期末应存',
+    width: 120,
+    formatter: ({ row }) => {
+      return formatNumber(row.expectedInventory);
+    },
+  },
+  {
+    field: 'actualInventory',
+    title: '期末实存',
+    width: 120,
+    formatter: ({ row }) => {
+      return formatNumber(row.actualInventory);
+    },
+  },
+  {
+    field: 'registerDate',
+    title: '登记日期',
+    width: 180,
+    formatter: ({ row }) => {
+      return row.registerDate || '-';
+    },
+  },
+];
+
+// 初始化表格配置
+const gridOptions: any = {
+  size: 'medium',
+  toolbarConfig: {
+    custom: false,
+    refresh: false,
+    zoom: false,
+  },
+  pagerConfig: {
+    enabled: false,
+  },
+  proxyConfig: {
+    ajax: {
+      query: async () => {
+        return {
+          items: props.taskDetail || [],
+        };
+      },
+    },
+  },
+  columns: tableColumns,
+};
+
+// 表格数据
+const tableDatas = ref<any>([]);
+// 使用BasicTable组件
+const [BasicTable, basicTableApi] = useVbenVxeGrid({
+  gridOptions,
+});
+</script>
+
+<template>
+  <ElCard>
+    <template #header>
+      <div class="flex items-center gap-4">
+        <div style="width: 4px; height: 12px; background-color: #215acd"></div>
+        <span
+          class="text-lg font-bold text-gray-800"
+          style="font-size: 14px; font-weight: 600"
+        >
+          添加剂库存详情
+        </span>
+      </div>
+    </template>
+
+    <div class="task-info">
+      <!-- 添加剂库存表格 -->
+
+      <div class="mb-6">
+        <BasicTable table-title="" class="w-full" />
+      </div>
+    </div>
+  </ElCard>
+</template>
+
+<style scoped lang="scss">
+.task-info {
+  .section-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 20px 0 12px 0;
+
+    .section-bar {
+      width: 4px;
+      height: 12px;
+      background-color: #215acd;
+    }
+
+    .section-text {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--text-color-primary);
+    }
+  }
+
+  :deep(.el-descriptions) {
+    margin-bottom: 0 !important;
+  }
+
+  :deep(.el-descriptions__label) {
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--text-color-secondary);
+  }
+
+  :deep(.el-descriptions__content) {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-color-primary);
+  }
+
+  :deep(.el-descriptions__table) {
+    background: transparent !important;
+  }
+}
+</style>

apps/web-ele/src/views/schedule/detail/drawer/additive/config-data.tsx

@@ -0,0 +1,192 @@
+// @ts-ignore: 忽略
+import type { FormSchemaGetter } from '#/adapter/form';
+// @ts-ignore: 忽略
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { ElDatePicker, ElInputNumber } from 'element-plus';
+
+// 抽屉表单配置
+export const drawerFormSchema: any | FormSchemaGetter = () => [
+  {
+    fieldName: 'additiveInventoryTable',
+    label: '添加剂库存表格',
+    hideLabel: true,
+    renderComponentContent: () => {
+      return {
+        default: () => [],
+      };
+    },
+  },
+];
+
+// 默认表格列配置
+export const defautTableColumns: VxeGridProps['columns'] = [
+  {
+    field: 'additiveType',
+    title: '添加剂类型',
+    width: 120,
+    fixed: 'left',
+    formatter: ({ row }) => {
+      return row.additiveType || '-';
+    },
+  },
+  {
+    field: 'additiveModel ',
+    title: '添加剂型号',
+    width: 120,
+    editRender: { name: 'input' },
+    // formatter: ({ row }) => {
+    //   return row.additiveModel || '-';
+    // },
+  },
+  {
+    field: 'initialInventory',
+    title: '期初库存',
+    width: 120,
+    editRender: { name: 'input' },
+    formatter: ({ row }) => {
+      return row.initialInventory || '-';
+    },
+    slots: {
+      default: (data: any) => {
+        return data.row.initialInventory || '-';
+      },
+      edit: (data: any) => {
+        return (
+          <ElInputNumber
+            controls-position="right"
+            max={1_000_000}
+            min={0}
+            step={1}
+            v-model={data.row.initialInventory}
+          />
+        );
+      },
+    },
+  },
+  {
+    field: 'purchase',
+    title: '进货',
+    width: 100,
+    editRender: { name: 'input' },
+    formatter: ({ row }) => {
+      return row.purchase || '-';
+    },
+    slots: {
+      default: (data: any) => {
+        return data.row.purchase || '-';
+      },
+      edit: (data: any) => {
+        return (
+          <ElInputNumber
+            controls-position="right"
+            max={1_000_000}
+            min={0}
+            step={1}
+            v-model={data.row.purchase}
+          />
+        );
+      },
+    },
+  },
+  {
+    field: 'useAmount',
+    title: '使用',
+    width: 100,
+    editRender: { name: 'input' },
+    formatter: ({ row }) => {
+      return row.useAmount || '-';
+    },
+    slots: {
+      default: (data: any) => {
+        return data.row.useAmount || '-';
+      },
+      edit: (data: any) => {
+        return (
+          <ElInputNumber
+            controls-position="right"
+            max={1_000_000}
+            min={0}
+            step={1}
+            v-model={data.row.useAmount}
+          />
+        );
+      },
+    },
+  },
+  {
+    field: 'expectedInventory',
+    title: '期末应存',
+    width: 120,
+    editRender: { name: 'input' },
+    formatter: ({ row }) => {
+      return row.expectedInventory || '-';
+    },
+    slots: {
+      default: (data: any) => {
+        return data.row.expectedInventory || '-';
+      },
+      edit: (data: any) => {
+        return (
+          <ElInputNumber
+            controls-position="right"
+            max={1_000_000}
+            min={0}
+            step={1}
+            v-model={data.row.expectedInventory}
+          />
+        );
+      },
+    },
+  },
+  {
+    field: 'actualInventory',
+    title: '期末实存',
+    width: 120,
+    editRender: { name: 'input' },
+    formatter: ({ row }) => {
+      return row.actualInventory || '-';
+    },
+    slots: {
+      default: (data: any) => {
+        return data.row.actualInventory || '-';
+      },
+      edit: (data: any) => {
+        return (
+          <ElInputNumber
+            controls-position="right"
+            max={1_000_000}
+            min={0}
+            step={1}
+            v-model={data.row.actualInventory}
+          />
+        );
+      },
+    },
+  },
+  {
+    field: 'registerDate',
+    title: '登记日期',
+    width: 180,
+    editRender: {
+      name: 'input',
+    },
+    formatter: ({ row }) => {
+      return row.registerDate || '-';
+    },
+    slots: {
+      default: (data: any) => {
+        return data.row.registerDate || '-';
+      },
+      edit: (data: any) => {
+        return (
+          <ElDatePicker
+            format="YYYY-MM-DD"
+            v-model={data.row.registerDate}
+            valueFormat="YYYY-MM-DD"
+          />
+        );
+      },
+    },
+  },
+];

apps/web-ele/src/views/schedule/detail/drawer/additive/index.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+// @ts-ignore: 忽略
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+// @ts-ignore: 忽略
+import { useVbenDrawer, useVbenForm } from '@vben/common-ui';
+
+// @ts-ignore: 忽略
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+// @ts-ignore: 忽略
+import { handleAdditiveInventory } from '#/api/task';
+
+// @ts-ignore: 忽略
+import { defautTableColumns, drawerFormSchema } from './config-data.tsx';
+
+// 定义事件
+const emit = defineEmits<{ reload: [] }>();
+
+// 初始化表单配置
+const [Form, formApi] = useVbenForm({
+  showDefaultActions: false,
+  schema: drawerFormSchema(),
+});
+
+// 初始化任务参数
+const taskParams = ref({
+  taskId: '',
+  taskName: '',
+  taskList: '',
+});
+
+// 初始化抽屉组件
+const [Drawer, drawerApi] = useVbenDrawer({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    try {
+      drawerApi.drawerLoading(true);
+      const { taskId, taskName, taskList } = drawerApi.getData();
+      taskParams.value.taskId = taskId;
+      taskParams.value.taskName = taskName;
+      taskParams.value.taskList = taskList;
+    } catch (error) {
+      console.error(error);
+    } finally {
+      drawerApi.drawerLoading(false);
+    }
+  },
+  onClosed() {
+    formApi.resetForm();
+  },
+  async onConfirm() {
+    try {
+      this.confirmLoading = true;
+      const { valid } = await formApi.validate();
+      if (!valid) {
+        return;
+      }
+
+      const list = basicTableApi.grid.getData();
+      const params: any = [];
+      list.forEach((item: any) => {
+        params.push({
+          ...item,
+          taskId: taskParams.value.taskId,
+        });
+      });
+
+      // 这里可以调用API提交数据
+      await handleAdditiveInventory(params);
+
+      emit('reload');
+      drawerApi.close();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      this.confirmLoading = false;
+    }
+  },
+});
+
+// 初始化表格配置
+const gridOptions: VxeGridProps = {
+  size: 'medium',
+  toolbarConfig: {
+    custom: false,
+    refresh: false,
+    zoom: false,
+  },
+  pagerConfig: {
+    enabled: false,
+  },
+  proxyConfig: {
+    ajax: {
+      query: async () => {
+        // 这里可以调用API获取表格数据
+        // const list = taskParams.value.taskList;
+        // if (list.)
+        return {
+          items: taskParams.value.taskList, // 初始数据为空
+        };
+      },
+    },
+  },
+  columns: defautTableColumns,
+  editConfig: {
+    mode: 'cell',
+    trigger: 'click',
+  },
+};
+
+// 初始化表格组件
+const [BasicTable, basicTableApi] = useVbenVxeGrid({
+  gridOptions,
+});
+</script>
+
+<template>
+  <Drawer :title="taskParams.taskName">
+    <Form>
+      <!-- 添加剂库存表格插槽 -->
+      <template #additiveInventoryTable>
+        <BasicTable table-title="" class="w-full" />
+      </template>
+    </Form>
+  </Drawer>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-input-number) {
+  width: 100%;
+}
+</style>

apps/web-ele/src/views/schedule/detail/drawer/index.ts

@@ -1,5 +1,7 @@
+export { default as AdditiveDrawer } from './additive/index.vue';
 export { default as CompetitionDrawer } from './competition/index.vue';
 export { default as EmergencyWyDrawer } from './emergency/index.vue';
+
 export { default as EntranceDrawer } from './entrance/index.vue';
 
 export { default as GroupLogDrawer } from './groupLog/index.vue';

apps/web-ele/src/views/schedule/detail/index.vue

@@ -36,6 +36,8 @@ import firstaidkitInfoPage from '#/views/oilstation/firstaidkit/index.vue';
 // @ts-ignore: 证照档案
 import idPhotoInfoPage from '#/views/oilstation/idphoto/index.vue';
 
+import AdditiveComponent from './components/additive.vue';
+// @ts-ignore
 // @ts-ignore
 import BiddingComponent from './components/bidding.vue';
 // @ts-ignore
@@ -64,6 +66,7 @@ import WeeklyEvaluationComponent from './components/weekly-evaluation.vue';
 import WeeklyComponent from './components/weekly.vue';
 import { mobileTaskTypes } from './config-data';
 import {
+  AdditiveDrawer,
   CompetitionDrawer,
   EmergencyWyDrawer,
   EntranceDrawer,
@@ -276,6 +279,11 @@ const DynamicDrawerComponent = defineComponent({
         Component = UploadDrawer;
       } else if (taskInfo.value.formType === 'form') {
         switch (taskInfo.value.subFormType) {
+          case 'additive_inventory':
+          case 'additive_inventory2': {
+            Component = AdditiveDrawer;
+            break;
+          }
           case 'competition_price_survey': {
             Component = CompetitionDrawer;
             break;
@@ -760,6 +768,17 @@ onMounted(async () => {
         />
 
         <!-- 处理信息组件 -->
+        <AdditiveComponent
+          :task-detail="taskInfo.taskList"
+          v-if="
+            taskInfo.formType === 'form' &&
+            ['additive_inventory', 'additive_inventory2'].includes(
+              taskInfo.subFormType,
+            )
+          "
+        />
+
+        <!-- 处理信息组件 -->
         <!-- <ElCard v-if="taskInfo.status === 3">
           <template #header>
             <div class="flex items-center gap-4">