feat(任务管理): 添加油站新增任务抽屉组件

实现油站新增任务功能，包括创建任务表单组件和配置数据

.trae/rules/project_rules.md

@@ -0,0 +1,276 @@
+- 表单组件配置参考下面内容
+```
+[
+    {
+      // 组件需要在 #/adapter.ts内注册，并加上类型
+      component: 'Input',
+      // 对应组件的参数
+      componentProps: {
+        placeholder: '请输入用户名',
+      },
+      // 字段名
+      fieldName: 'username',
+      // 界面显示的label
+      label: '字符串',
+      rules: 'required',
+    },
+    {
+      // 组件需要在 #/adapter.ts内注册，并加上类型
+      component: 'ApiSelect',
+      // 对应组件的参数
+      componentProps: {
+        // 菜单接口转options格式
+        afterFetch: (data: { name: string; path: string }[]) => {
+          return data.map((item: any) => ({
+            label: item.name,
+            value: item.path,
+          }));
+        },
+        // 菜单接口
+        api: getAllMenusApi,
+      },
+      // 字段名
+      fieldName: 'api',
+      // 界面显示的label
+      label: 'ApiSelect',
+    },
+    {
+      component: 'ApiSelect',
+      // 对应组件的参数
+      componentProps: () => {
+        return {
+          api: fetchRemoteOptions,
+          // 禁止本地过滤
+          filterOption: false,
+          // 如果正在获取数据，使用插槽显示一个loading
+          notFoundContent: fetching.value ? undefined : null,
+          // 搜索词变化时记录下来， 使用useDebounceFn防抖。
+          onSearch: useDebounceFn((value: string) => {
+            keyword.value = value;
+          }, 300),
+          // 远程搜索参数。当搜索词变化时，params也会更新
+          params: {
+            keyword: keyword.value || undefined,
+          },
+          showSearch: true,
+        };
+      },
+      // 字段名
+      fieldName: 'remoteSearch',
+      // 界面显示的label
+      label: '远程搜索',
+      renderComponentContent: () => {
+        return {
+          notFoundContent: fetching.value ? h(Spin) : undefined,
+        };
+      },
+    },
+    {
+      component: 'ApiTreeSelect',
+      // 对应组件的参数
+      componentProps: {
+        // 菜单接口
+        api: getAllMenusApi,
+        childrenField: 'children',
+        // 菜单接口转options格式
+        labelField: 'name',
+        valueField: 'path',
+      },
+      // 字段名
+      fieldName: 'apiTree',
+      // 界面显示的label
+      label: 'ApiTreeSelect',
+    },
+    {
+      component: 'InputPassword',
+      componentProps: {
+        placeholder: '请输入密码',
+      },
+      fieldName: 'password',
+      label: '密码',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      fieldName: 'number',
+      label: '数字(带后缀)',
+      suffix: () => '¥',
+    },
+    {
+      component: 'IconPicker',
+      fieldName: 'icon',
+      label: '图标',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        filterOption: true,
+        options: [
+          {
+            label: '选项1',
+            value: '1',
+          },
+          {
+            label: '选项2',
+            value: '2',
+          },
+        ],
+        placeholder: '请选择',
+        showSearch: true,
+      },
+      fieldName: 'options',
+      label: '下拉选',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '选项1',
+            value: '1',
+          },
+          {
+            label: '选项2',
+            value: '2',
+          },
+        ],
+      },
+      fieldName: 'radioGroup',
+      label: '单选组',
+    },
+    {
+      component: 'Radio',
+      fieldName: 'radio',
+      label: '',
+      renderComponentContent: () => {
+        return {
+          default: () => ['Radio'],
+        };
+      },
+    },
+    {
+      component: 'CheckboxGroup',
+      componentProps: {
+        name: 'cname',
+        options: [
+          {
+            label: '选项1',
+            value: '1',
+          },
+          {
+            label: '选项2',
+            value: '2',
+          },
+        ],
+      },
+      fieldName: 'checkboxGroup',
+      label: '多选组',
+    },
+    {
+      component: 'Checkbox',
+      fieldName: 'checkbox',
+      label: '',
+      renderComponentContent: () => {
+        return {
+          default: () => ['我已阅读并同意'],
+        };
+      },
+    },
+    {
+      component: 'Mentions',
+      componentProps: {
+        options: [
+          {
+            label: 'afc163',
+            value: 'afc163',
+          },
+          {
+            label: 'zombieJ',
+            value: 'zombieJ',
+          },
+        ],
+        placeholder: '请输入',
+      },
+      fieldName: 'mentions',
+      label: '提及',
+    },
+    {
+      component: 'Rate',
+      fieldName: 'rate',
+      label: '评分',
+    },
+    {
+      component: 'Switch',
+      componentProps: {
+        class: 'w-auto',
+      },
+      fieldName: 'switch',
+      label: '开关',
+    },
+    {
+      component: 'DatePicker',
+      fieldName: 'datePicker',
+      label: '日期选择框',
+    },
+    {
+      component: 'RangePicker',
+      fieldName: 'rangePicker',
+      label: '范围选择器',
+    },
+    {
+      component: 'TimePicker',
+      fieldName: 'timePicker',
+      label: '时间选择框',
+    },
+    {
+      component: 'TreeSelect',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请选择',
+        showSearch: true,
+        treeData: [
+          {
+            label: 'root 1',
+            value: 'root 1',
+            children: [
+              {
+                label: 'parent 1',
+                value: 'parent 1',
+                children: [
+                  {
+                    label: 'parent 1-0',
+                    value: 'parent 1-0',
+                    children: [
+                      {
+                        label: 'my leaf',
+                        value: 'leaf1',
+                      },
+                      {
+                        label: 'your leaf',
+                        value: 'leaf2',
+                      },
+                    ],
+                  },
+                  {
+                    label: 'parent 1-1',
+                    value: 'parent 1-1',
+                  },
+                ],
+              },
+              {
+                label: 'parent 2',
+                value: 'parent 2',
+              },
+            ],
+          },
+        ],
+        treeNodeFilterProp: 'label',
+      },
+      fieldName: 'treeSelect',
+      label: '树选择',
+    },
+  ]
+```

apps/web-ele/src/views/schedule/view/components/create/config-data.tsx

@@ -0,0 +1,114 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+
+export const drawerFormSchema: FormSchemaGetter = () => [
+  {
+    component: 'Select',
+    fieldName: 'executivePost',
+    label: '执行岗位',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请选择执行岗位',
+      allowClear: true,
+      options: [],
+    },
+  },
+  {
+    component: 'ApiSelect',
+    fieldName: 'executor',
+    label: '执行人',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请选择执行人',
+      allowClear: true,
+      showSearch: true,
+      filterOption: false,
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'taskName',
+    label: '任务名称',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入任务名称',
+      maxlength: 100,
+    },
+  },
+  {
+    component: 'DatePicker',
+    fieldName: 'startTime',
+    label: '开始时间',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请选择开始时间',
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    component: 'DatePicker',
+    fieldName: 'endTime',
+    label: '截至时间',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请选择截至时间',
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    component: 'Select',
+    fieldName: 'taskType',
+    label: '任务类型',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请选择任务类型',
+      allowClear: true,
+      options: [],
+    },
+  },
+  {
+    component: 'ApiSelect',
+    fieldName: 'ccPerson',
+    label: '抄送人',
+    componentProps: {
+      placeholder: '请选择抄送人',
+      allowClear: true,
+      showSearch: true,
+      filterOption: false,
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'taskDescription',
+    label: '任务描述',
+    componentProps: {
+      type: 'textarea',
+      placeholder: '请输入任务描述',
+      maxlength: 500,
+      showWordLimit: true,
+      rows: 4,
+    },
+  },
+  {
+    component: 'Upload',
+    fieldName: 'descriptionImage',
+    label: '描述图片',
+    componentProps: {
+      accept: 'image/*',
+      listType: 'picture-card',
+      maxCount: 1,
+    },
+  },
+  {
+    component: 'Upload',
+    fieldName: 'attachment',
+    label: '附件',
+    componentProps: {
+      // accept: 'image/*',
+      listType: 'text',
+      limit: 5,
+      multiple: true,
+    },
+  },
+];

apps/web-ele/src/views/schedule/view/components/create/index.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+
+import { drawerFormSchema } from './config-data';
+
+defineOptions({
+  name: 'CreateTaskDrawer',
+});
+
+const [Form, formApi] = useVbenForm({
+  schema: drawerFormSchema(),
+  showDefaultActions: false,
+});
+const [Drawer, drawerApi] = useVbenDrawer({
+  onCancel() {
+    drawerApi.close();
+  },
+  onConfirm: async () => {
+    await formApi.submitForm();
+    drawerApi.close();
+  },
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const { values } = drawerApi.getData<Record<string, any>>();
+      if (values) {
+        formApi.setValues(values);
+      }
+    }
+  },
+  title: '油站新增任务',
+});
+</script>
+<template>
+  <Drawer>
+    <Form>
+      <!-- <template #attachment="scope">
+        <ElUpload
+          v-model:file-list="scope.attachment"
+          action="#"
+          accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx"
+          list-type="text"
+          show-file-list
+          :auto-upload="true"
+          :drag="false"
+          :limit="5"
+          :multiple="true"
+          class="mb-4"
+        >
+          <div class="flex items-center justify-center">
+            <ElIcon class="el-upload__icon">
+              <Plus size="18" />
+            </ElIcon>
+            <div class="el-upload__text">
+              <div>上传附件</div>
+              <div class="text-xs text-gray-500">最多上传5个附件</div>
+            </div>
+          </div>
+        </ElUpload>
+      </template> -->
+    </Form>
+  </Drawer>
+</template>

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

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
 
-import { Page } from '@vben/common-ui';
+import { Page, useVbenDrawer } from '@vben/common-ui';
 
 import dayjs from 'dayjs';
 import { ElRadioButton, ElRadioGroup } from 'element-plus';
 
+import CreateTasK from './components/create/index.vue';
 import Day from './components/day/index.vue';
 import Month from './components/month/index.vue';
 import Week from './components/week/index.vue';
@@ -47,6 +48,16 @@ const year = computed(() => {
 const weekNumber = computed(() => {
   return dayjs(searchParams.value.date).week();
 });
+
+const [CreateTaskDrawer, createTaskDrawerApi] = useVbenDrawer({
+  // 连接抽离的组件
+  connectedComponent: CreateTasK,
+  // placement: 'left',
+});
+
+const createTaskDrawerEvent = () => {
+  createTaskDrawerApi.setData({ isUpdate: false }).open();
+};
 </script>
 
 <template>
@@ -105,7 +116,9 @@ const weekNumber = computed(() => {
         </div>
 
         <div class="flex items-center space-x-4">
-          <ElButton type="primary"> 油站新增任务 </ElButton>
+          <ElButton type="primary" @click="createTaskDrawerEvent">
+            油站新增任务
+          </ElButton>
           <ElButton type="primary"> 访客新增任务 </ElButton>
           <ElButton type="primary"> 任务转接 </ElButton>
         </div>
@@ -120,5 +133,6 @@ const weekNumber = computed(() => {
       />
       <Month v-if="searchParams.timeType === 'month'" :year="year" />
     </ElCard>
+    <CreateTaskDrawer />
   </Page>
 </template>