add

src/api/oa_plan.ts

@@ -0,0 +1,26 @@
+import request from "@/utils/request";
+
+// 日程安排列表
+export function apiOaPlanLists(params: any) {
+  return request.get({ url: "/works.rcbg.oa_plan/lists", params });
+}
+
+// 添加日程安排
+export function apiOaPlanAdd(params: any) {
+  return request.post({ url: "/works.rcbg.oa_plan/add", params });
+}
+
+// 编辑日程安排
+export function apiOaPlanEdit(params: any) {
+  return request.post({ url: "/works.rcbg.oa_plan/edit", params });
+}
+
+// 删除日程安排
+export function apiOaPlanDelete(params: any) {
+  return request.post({ url: "/works.rcbg.oa_plan/delete", params });
+}
+
+// 日程安排详情
+export function apiOaPlanDetail(params: any) {
+  return request.get({ url: "/works.rcbg.oa_plan/detail", params });
+}

src/views/oa_car_cate/index.vue

@@ -1,116 +1,123 @@
 <template>
-    <el-calendar v-model="now">
-        <template #dateCell="{ data }">
-            <div class="content" @click="hdClick(data)">
-                {{ data.day.split('-').slice(1).join('-') }}
-                <div class="task-li" v-for="item in formData">
-                    <!-- <el-tooltip effect="dark" :content="item.title" placement="top-start"> -->
-                    <span v-if="item.date.includes(data.day)">
-                        {{ item.title }}
-                    </span>
-                    <!-- </el-tooltip> -->
-                </div>
+    <div>
+        <el-card class="!border-none mb-4" shadow="never">
+            <el-form class="mb-[-16px]" :model="queryParams" inline>
+                <el-form-item label="车辆名称" prop="title">
+                    <el-input class="w-[280px]" v-model="queryParams.title" clearable placeholder="请输入车辆名称" />
+                </el-form-item>
+                <el-form-item label="车辆号码" prop="name">
+                    <el-input class="w-[280px]" v-model="queryParams.name" clearable placeholder="请输入车辆号码" />
+                </el-form-item>
+                <el-form-item label="状态" prop="status">
+                    <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!flex-1">
+                        <el-option label="禁用" :value="0" />
+                        <el-option label="启用" :value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="resetPage">查询</el-button>
+                    <el-button @click="resetParams">重置</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
+        <el-card class="!border-none" v-loading="pager.loading" shadow="never">
+            <el-button v-perms="['works.xzgl.oa_car_cate/add']" type="primary" @click="handleAdd">
+                <template #icon>
+                    <icon name="el-icon-Plus" />
+                </template>
+                新增
+            </el-button>
+            <el-button v-perms="['works.xzgl.oa_car_cate/delete']" :disabled="!selectData.length"
+                @click="handleDelete(selectData)">
+                删除
+            </el-button>
+            <div class="mt-4">
+                <el-table :data="pager.lists" @selection-change="handleSelectionChange">
+                    <el-table-column type="selection" width="55" />
+                    <el-table-column label="车辆名称" prop="title" show-overflow-tooltip />
+                    <el-table-column label="车辆号码" prop="name" show-overflow-tooltip />
+                    <el-table-column label="状态" prop="status_text" show-overflow-tooltip />
+                    <el-table-column label="操作" width="120" fixed="right">
+                        <template #default="{ row }">
+                            <el-button v-perms="['works.xzgl.oa_car_cate/edit']" type="primary" link
+                                @click="handleEdit(row)">
+                                编辑
+                            </el-button>
+                            <el-button v-perms="['works.xzgl.oa_car_cate/delete']" type="danger" link
+                                @click="handleDelete(row.id)">
+                                删除
+                            </el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
             </div>
-        </template>
-    </el-calendar>
-    <!-- <el-dialog :visible.sync=" dialogVisible" :title="dialogTitle" width="50%" @close="handleClose">
-                    <el-form :model="form" ref="form" label-width="80px">
-                        <el-form-item label="日期" prop="date">
-                            <el-input v-model="form.date" readonly></el-input>
-                        </el-form-item>
-                        <el-form-item label="内容" prop="content">
-                            <el-input v-model="form.content"></el-input>
-                        </el-form-item>
-                    </el-form>
-                    </el-dialog> -->
+            <div class="flex mt-4 justify-end">
+                <pagination v-model="pager" @change="getLists" />
+            </div>
+        </el-card>
+        <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
+    </div>
 </template>
 
-<script setup>
-const now = ref(new Date())
-const dialogVisible = ref(true)
+<script lang="ts" setup name="oaCarCateLists">
+import { usePaging } from '@/hooks/usePaging'
+import { useDictData } from '@/hooks/useDictOptions'
+import { apiOaCarCateLists, apiOaCarCateDelete } from '@/api/oa_car_cate'
+import { timeFormat } from '@/utils/util'
+import feedback from '@/utils/feedback'
+import EditPopup from './edit.vue'
 
-const hdClick = (data) => {
-    console.log(data)
-}
-
-let data = [
-    {
-        "id": 13,
-        "type": "4",
-        "remind_type": 0,
-        "backgroundColor": "#CCEBCC",
-        "borderColor": "#99CC99",
-        "title": "综合系统售后工单删除失败",
-        "start": "2024-05-15 09:00:00",
-        "end": "2024-05-31 12:00:00"
-    },
-    {
-        "id": 14,
-        "type": "4",
-        "remind_type": 0,
-        "backgroundColor": "#CCEBCC",
-        "borderColor": "#99CC99",
-        "title": "1212",
-        "start": "2024-05-25 09:00:00",
-        "end": "2024-05-28 18:00:00"
-    }
-]
-
-function getDatesBetween(startDate, endDate) {
-    const dates = [];
-    let currentDate = new Date(startDate);
-
-    while (currentDate <= new Date(endDate)) {
-        dates.push(new Date(currentDate));
-        currentDate.setDate(currentDate.getDate() + 1);
-    }
-    let list = dates.map(item => {
-        return item.toISOString().split('T')[0];
-    })
-    return list
-}
+const editRef = shallowRef<InstanceType<typeof EditPopup>>()
+// 是否显示编辑框
+const showEdit = ref(false)
 
 
-let formData = data.map(item => {
-    return {
-        id: item.id,
-        title: item.title,
-        date: getDatesBetween(item.start, item.end),
-    }
+// 查询条件
+const queryParams = reactive({
+    title: '',
+    name: '',
+    status: ''
 })
 
-console.log(formData)
+// 选中数据
+const selectData = ref<any[]>([])
 
+// 表格选择后回调事件
+const handleSelectionChange = (val: any[]) => {
+    selectData.value = val.map(({ id }) => id)
+}
 
+// 获取字典数据
+const { dictData } = useDictData('')
+
+// 分页相关
+const { pager, getLists, resetParams, resetPage } = usePaging({
+    fetchFun: apiOaCarCateLists,
+    params: queryParams
+})
+
+// 添加
+const handleAdd = async () => {
+    showEdit.value = true
+    await nextTick()
+    editRef.value?.open('add')
+}
+
+// 编辑
+const handleEdit = async (data: any) => {
+    showEdit.value = true
+    await nextTick()
+    editRef.value?.open('edit')
+    editRef.value?.setFormData(data)
+}
+
+// 删除
+const handleDelete = async (id: number | any[]) => {
+    await feedback.confirm('确定要删除？')
+    await apiOaCarCateDelete({ id })
+    getLists()
+}
+
+getLists()
 </script>
 
-
-<style lang="scss" scoped>
-// ::v-deep .el-calendar-day {
-//     padding: 0
-// }
-
-.content {
-    height: 100%;
-    overflow: hidden;
-    overflow-y: auto; // 取消滚动条
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-        display: none;
-    }
-
-    .task-li {
-        background-color: #2D8CF0;
-        color: white;
-        border-radius: 10px;
-        margin-bottom: 5px;
-        box-sizing: border-box;
-        padding: 0 15px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-}
-</style>

src/views/oa_plan/edit.vue

@@ -0,0 +1,165 @@
+<template>
+    <div class="edit-popup">
+        <popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit" @close="handleClose">
+            <el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
+                <el-form-item label="工作安排主题" prop="title">
+                    <el-input v-model="formData.title" clearable placeholder="请输入工作安排主题" />
+                </el-form-item>
+                <el-form-item label="日程优先级" prop="type">
+                    <el-select v-model="formData.type" clearable placeholder="请选择日程优先级" class="flex-1">
+                        <el-option label="紧急" :value="4" />
+                        <el-option label="重要" :value="3" />
+                        <el-option label="次要" :value="2" />
+                        <el-option label="不重要" :value="1" />
+                        <el-option label="无优先级" :value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label=" 开始时间" prop="start_time">
+                    <el-date-picker class="flex-1 !flex" v-model="formData.start_time" clearable type="datetime"
+                        value-format="YYYY-MM-DD HH:mm" placeholder="选择开始时间">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item label="结束时间" prop="end_time">
+                    <el-date-picker class="flex-1 !flex" v-model="formData.end_time" clearable type="datetime"
+                        value-format="YYYY-MM-DD HH:mm" placeholder="选择结束时间">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item label="提醒类型" prop="remind_type">
+                    <el-select v-model="formData.remind_type" clearable placeholder="请选择提醒类型" class="flex-1">
+                        <el-option label="不提醒" :value="0" />
+                        <el-option label="提前5分钟" :value="1" />
+                        <el-option label="提前15分钟" :value="2" />
+                        <el-option label="提前30分钟" :value="3" />
+                        <el-option label="提前1小时" :value="4" />
+                        <el-option label="提前2小时" :value="5" />
+                        <el-option label="提前1天" :value="6" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="描述">
+                    <el-input v-model="formData.remark" clearable placeholder="请输入描述" type="textarea" />
+                </el-form-item>
+            </el-form>
+        </popup>
+    </div>
+</template>
+
+<script lang="ts" setup name="oaPlanEdit">
+import type { FormInstance } from 'element-plus'
+import Popup from '@/components/popup/index.vue'
+import { apiOaPlanAdd, apiOaPlanEdit, apiOaPlanDetail } from '@/api/oa_plan'
+import { timeFormat } from '@/utils/util'
+import type { PropType } from 'vue'
+defineProps({
+    dictData: {
+        type: Object as PropType<Record<string, any[]>>,
+        default: () => ({})
+    }
+})
+const emit = defineEmits(['success', 'close'])
+const formRef = shallowRef<FormInstance>()
+const popupRef = shallowRef<InstanceType<typeof Popup>>()
+const mode = ref('add')
+
+
+// 弹窗标题
+const popupTitle = computed(() => {
+    return mode.value == 'edit' ? '编辑日程安排' : '新增日程安排'
+})
+
+// 表单数据
+const formData = reactive({
+    id: '',
+    title: '',
+    type: '',
+    start_time: '',
+    end_time: '',
+    remind_type: '',
+    remark: '',
+})
+
+
+// 表单验证
+const formRules = reactive<any>({
+    title: [{
+        required: true,
+        message: '请输入工作安排主题',
+        trigger: ['blur']
+    }],
+    type: [{
+        required: true,
+        message: '请输入日程优先级',
+        trigger: ['blur']
+    }],
+    start_time: [{
+        required: true,
+        message: '请输入开始时间',
+        trigger: ['blur']
+    }],
+    end_time: [{
+        required: true,
+        message: '请输入结束时间',
+        trigger: ['blur']
+    }],
+    remind_type: [{
+        required: true,
+        message: '请输入提醒类型',
+        trigger: ['blur']
+    }],
+    remind_time: [{
+        required: true,
+        message: '请输入提醒时间',
+        trigger: ['blur']
+    }]
+})
+
+
+// 获取详情
+const setFormData = async (data: Record<any, any>) => {
+    for (const key in formData) {
+        if (data[key] != null && data[key] != undefined) {
+            //@ts-ignore
+            formData[key] = data[key]
+        }
+    }
+
+
+}
+
+const getDetail = async (row: Record<string, any>) => {
+    const data = await apiOaPlanDetail({
+        id: row.id
+    })
+    setFormData(data)
+}
+
+
+// 提交按钮
+const handleSubmit = async () => {
+    await formRef.value?.validate()
+    const data = { ...formData, }
+    mode.value == 'edit'
+        ? await apiOaPlanEdit(data)
+        : await apiOaPlanAdd(data)
+    popupRef.value?.close()
+    emit('success')
+}
+
+//打开弹窗
+const open = (type = 'add') => {
+    mode.value = type
+    popupRef.value?.open()
+}
+
+// 关闭回调
+const handleClose = () => {
+    emit('close')
+}
+
+
+
+defineExpose({
+    open,
+    setFormData,
+    getDetail
+})
+</script>

src/views/oa_plan/index.vue

@@ -2,16 +2,16 @@
     <div>
         <el-card class="!border-none mb-4" shadow="never">
             <el-form class="mb-[-16px]" :model="queryParams" inline>
-                <el-form-item label="车辆名称" prop="title">
-                    <el-input class="w-[280px]" v-model="queryParams.title" clearable placeholder="请输入车辆名称" />
+                <el-form-item label="工作安排主题" prop="title">
+                    <el-input class="w-[280px]" v-model="queryParams.title" clearable placeholder="请输入工作安排主题" />
                 </el-form-item>
-                <el-form-item label="车辆号码" prop="name">
-                    <el-input class="w-[280px]" v-model="queryParams.name" clearable placeholder="请输入车辆号码" />
-                </el-form-item>
-                <el-form-item label="状态" prop="status">
-                    <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!flex-1">
-                        <el-option label="禁用" :value="0" />
-                        <el-option label="启用" :value="1" />
+                <el-form-item label="日程优先级" prop="type">
+                    <el-select v-model="queryParams.type" clearable placeholder="请选择日程优先级" class="flex-1">
+                        <el-option label="紧急" :value="4" />
+                        <el-option label="重要" :value="3" />
+                        <el-option label="次要" :value="2" />
+                        <el-option label="不重要" :value="1" />
+                        <el-option label="无优先级" :value="1" />
                     </el-select>
                 </el-form-item>
                 <el-form-item>
@@ -21,29 +21,31 @@
             </el-form>
         </el-card>
         <el-card class="!border-none" v-loading="pager.loading" shadow="never">
-            <el-button v-perms="['works.xzgl.oa_car_cate/add']" type="primary" @click="handleAdd">
+            <el-button v-perms="['works.rcbg.oa_plan/add']" type="primary" @click="handleAdd">
                 <template #icon>
                     <icon name="el-icon-Plus" />
                 </template>
                 新增
             </el-button>
-            <el-button v-perms="['works.xzgl.oa_car_cate/delete']" :disabled="!selectData.length"
+            <el-button v-perms="['works.rcbg.oa_plan/delete']" :disabled="!selectData.length"
                 @click="handleDelete(selectData)">
                 删除
             </el-button>
             <div class="mt-4">
                 <el-table :data="pager.lists" @selection-change="handleSelectionChange">
                     <el-table-column type="selection" width="55" />
-                    <el-table-column label="车辆名称" prop="title" show-overflow-tooltip />
-                    <el-table-column label="车辆号码" prop="name" show-overflow-tooltip />
-                    <el-table-column label="状态" prop="status_text" show-overflow-tooltip />
+                    <el-table-column label="工作安排主题" prop="title" show-overflow-tooltip />
+                    <el-table-column label="日程优先级" prop="type_text" show-overflow-tooltip />
+                    <el-table-column label="开始时间" prop="start_time" show-overflow-tooltip />
+                    <el-table-column label="结束时间" prop="end_time" show-overflow-tooltip />
+                    <el-table-column label="提醒类型" prop="remind_type_text" show-overflow-tooltip />
+                    <el-table-column label="描述" prop="remark" show-overflow-tooltip />
                     <el-table-column label="操作" width="120" fixed="right">
                         <template #default="{ row }">
-                            <el-button v-perms="['works.xzgl.oa_car_cate/edit']" type="primary" link
-                                @click="handleEdit(row)">
+                            <el-button v-perms="['works.rcbg.oa_plan/edit']" type="primary" link @click="handleEdit(row)">
                                 编辑
                             </el-button>
-                            <el-button v-perms="['works.xzgl.oa_car_cate/delete']" type="danger" link
+                            <el-button v-perms="['works.rcbg.oa_plan/delete']" type="danger" link
                                 @click="handleDelete(row.id)">
                                 删除
                             </el-button>
@@ -59,10 +61,10 @@
     </div>
 </template>
 
-<script lang="ts" setup name="oaCarCateLists">
+<script lang="ts" setup name="oaPlanLists">
 import { usePaging } from '@/hooks/usePaging'
 import { useDictData } from '@/hooks/useDictOptions'
-import { apiOaCarCateLists, apiOaCarCateDelete } from '@/api/oa_car_cate'
+import { apiOaPlanLists, apiOaPlanDelete } from '@/api/oa_plan'
 import { timeFormat } from '@/utils/util'
 import feedback from '@/utils/feedback'
 import EditPopup from './edit.vue'
@@ -75,8 +77,7 @@ const showEdit = ref(false)
 // 查询条件
 const queryParams = reactive({
     title: '',
-    name: '',
-    status: ''
+    type: ''
 })
 
 // 选中数据
@@ -92,7 +93,7 @@ const { dictData } = useDictData('')
 
 // 分页相关
 const { pager, getLists, resetParams, resetPage } = usePaging({
-    fetchFun: apiOaCarCateLists,
+    fetchFun: apiOaPlanLists,
     params: queryParams
 })
 
@@ -114,7 +115,7 @@ const handleEdit = async (data: any) => {
 // 删除
 const handleDelete = async (id: number | any[]) => {
     await feedback.confirm('确定要删除？')
-    await apiOaCarCateDelete({ id })
+    await apiOaPlanDelete({ id })
     getLists()
 }
 

src/views/oa_plan_calendar/index.vue

@@ -0,0 +1,135 @@
+<template>
+    <el-calendar v-model="now">
+        <template #dateCell="{ data }">
+            <div class="content" @click="handleEdit(data)">
+                {{ data.day.split('-').slice(1).join('-') }}
+                <div class="task-li" v-for="item in  formData" @click.stop="handleEdit(item)">
+                    <div v-if="item.date.includes(data.day)">
+                        <span v-if="item.date[0] == data.day"> {{ item.start + item.title }} </span>
+                        <span v-else-if="item.date[item.date.length - 1] == data.day">{{ item.end + item.title }}</span>
+                        <span v-else> {{ item.title }} </span>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </el-calendar>
+    <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
+</template>
+
+<script setup>
+import { apiOaPlanLists, apiOaPlanDetail } from '@/api/oa_plan'
+import EditPopup from '../oa_plan/edit.vue'
+
+const now = ref(new Date())
+const dialogVisible = ref(true)
+const formData = ref([])
+const editRef = ref(null)
+const showEdit = ref(false)
+
+
+let data = [
+    {
+        "id": 13,
+        "type": "4",
+        "remind_type": 0,
+        "backgroundColor": "#CCEBCC",
+        "borderColor": "#99CC99",
+        "title": "综合系统售后工单删除失败",
+        "start": "2024-05-15 09:00:00",
+        "end": "2024-05-31 12:00:00"
+    },
+    {
+        "id": 14,
+        "type": "4",
+        "remind_type": 0,
+        "backgroundColor": "#CCEBCC",
+        "borderColor": "#99CC99",
+        "title": "1212",
+        "start": "2024-05-25 09:00:00",
+        "end": "2024-05-28 18:00:00"
+    }
+]
+
+function timeToDay(time) {
+    const dateTime = new Date(time);
+    const year = dateTime.getFullYear();
+    const month = dateTime.getMonth() + 1;
+    const day = dateTime.getDate();
+    const dateOnlyString = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
+    return dateOnlyString;
+}
+
+function getDatesBetween(startDate, endDate) {
+    const dates = [];
+    let currentDate = new Date(startDate);
+    while (currentDate <= new Date(endDate)) {
+        dates.push(new Date(currentDate));
+        currentDate.setDate(currentDate.getDate() + 1);
+    }
+    let list = dates.map(item => {
+        return timeToDay(item)
+    })
+    return list
+}
+
+
+// 编辑
+const handleEdit = async (data) => {
+    showEdit.value = true
+    await nextTick()
+    console.log(data)
+    if (data.id) {
+        let res = await apiOaPlanDetail({ id: data.id })
+        editRef.value?.setFormData(res)
+        editRef.value?.open('edit')
+    } else {
+        editRef.value?.open('add')
+
+    }
+}
+
+const getLists = async () => {
+    let res = await apiOaPlanLists()
+    formData.value = res.lists.map(item => {
+        return {
+            id: item.id,
+            title: item.title,
+            date: getDatesBetween(item.start_time, item.end_time),
+            start: item.start_time.substring(item.start_time.length - 5),
+            end: item.end_time.substring(item.end_time.length - 5),
+        }
+    })
+}
+
+getLists()
+
+
+
+</script>
+
+
+<style lang="scss" scoped>
+.content {
+    height: 100%;
+    overflow: hidden;
+    overflow-y: auto; // 取消滚动条
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    .task-li {
+        background-color: #2D8CF0;
+        color: white;
+        border-radius: 10px;
+        margin-bottom: 5px;
+        box-sizing: border-box;
+        padding: 0 15px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+</style>