备份删除
This commit is contained in:
XaoLi717
parent
5e2d926c0b
commit
ed0ea0a049
@ -1,729 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card shadow="never" style="margin-bottom: 10px;height: 300px">
|
||||
<el-carousel :interval="4000" type="card" height="300px">
|
||||
<el-carousel-item v-for="item in filteredList" :key="item.imgId">
|
||||
<el-image style="width: 100%; height: 100%" :src="imgUrl+item.imgImg" alt="无图片" :title="item.imgName"/>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<el-row class="mt-8px" :gutter="8" justify="space-between">
|
||||
<el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-8px">
|
||||
<el-card shadow="never" style="margin-bottom: 10px; margin-top: 10px">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<el-row :gutter="16" justify="space-between">
|
||||
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
<div class="flex items-center">
|
||||
<el-avatar :src="avatar" :size="70" class="mr-16px">
|
||||
<img src="@/assets/imgs/avatar.gif" alt="" />
|
||||
</el-avatar>
|
||||
<div>
|
||||
<div class="text-20px">
|
||||
{{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
|
||||
</div>
|
||||
<div class="mt-10px text-14px text-gray-500">
|
||||
{{ t('workplace.toady') }}，20℃ - 32℃！
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
<div class="h-70px flex items-center justify-end lt-sm:mt-10px">
|
||||
<div class="px-8px text-right">
|
||||
<div class="mb-16px text-14px text-gray-400">{{ t('workplace.project') }}</div>
|
||||
<CountTo
|
||||
class="text-20px"
|
||||
:start-val="0"
|
||||
:end-val="totalSate.project"
|
||||
:duration="2600"
|
||||
/>
|
||||
</div>
|
||||
<el-divider direction="vertical" />
|
||||
<div class="px-8px text-right">
|
||||
<div class="mb-16px text-14px text-gray-400">{{ t('workplace.toDo') }}</div>
|
||||
<CountTo
|
||||
class="text-20px"
|
||||
:start-val="0"
|
||||
:end-val="totalSate.todo"
|
||||
:duration="2600"
|
||||
/>
|
||||
</div>
|
||||
<el-divider direction="vertical" border-style="dashed" />
|
||||
<div class="px-8px text-right">
|
||||
<div class="mb-16px text-14px text-gray-400">{{ t('workplace.access') }}</div>
|
||||
<CountTo
|
||||
class="text-20px"
|
||||
:start-val="0"
|
||||
:end-val="totalSate.access"
|
||||
:duration="2600"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
<!-- <el-card shadow="never" style="margin-bottom: 10px; margin-top: 8px">-->
|
||||
<!-- <el-carousel :interval="4000" type="card" height="200px">-->
|
||||
<!-- <el-carousel-item v-for="item in image" :key="item.id">-->
|
||||
<!-- <el-image style="width: 100%; height: 100%" :src="item.src" alt="无图片" :title="item.name"/>-->
|
||||
<!-- </el-carousel-item>-->
|
||||
<!-- </el-carousel>-->
|
||||
<!-- </el-card>-->
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="h-3 flex justify-between">
|
||||
<!-- <span>{{ t('workplace.project') }}</span>-->
|
||||
<span>数据统计</span>
|
||||
<!-- <el-link-->
|
||||
<!-- type="primary"-->
|
||||
<!-- :underline="false"-->
|
||||
<!-- href="http://localhost/index"-->
|
||||
<!-- target="_blank"-->
|
||||
<!-- >-->
|
||||
<!-- {{ t('action.more') }}-->
|
||||
<!-- </el-link>-->
|
||||
</div>
|
||||
</template>
|
||||
<el-skeleton v-if="allData" :loading="loading" animated>
|
||||
<el-row>
|
||||
<el-col
|
||||
v-for="(item, index) in dataList"
|
||||
:key="`card-${index}`"
|
||||
:xl="8"
|
||||
:lg="8"
|
||||
:md="8"
|
||||
:sm="24"
|
||||
:xs="24"
|
||||
>
|
||||
<el-card shadow="hover" :style="{backgroundColor: item.color}" class="mr-5px mt-5px">
|
||||
<!-- <div class="flex items-center">-->
|
||||
<!-- <Icon :icon="item.icon" :size="25" class="mr-8px" />-->
|
||||
<!-- <span class="text-16px">{{ item.name }}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="mt-12px text-9px text-gray-400">{{ t(item.message) }}</div>-->
|
||||
<!-- <div class="mt-12px flex justify-between text-12px text-gray-400">-->
|
||||
<!-- <span>{{ item.personal }}</span>-->
|
||||
<!-- <span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>-->
|
||||
<!-- </div>-->
|
||||
<div class="flex items-center">
|
||||
<span class="text-20px">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="mt-12px text-16px text-gray-400">{{ item.infoCo2e }}</div>
|
||||
<div class="mt-12px flex justify-between text-12px text-gray-400">
|
||||
<span>{{ item.dAn }}</span>
|
||||
<span>{{ item.time }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="mt-8px">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<el-row :gutter="20" justify="space-between">
|
||||
<el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
|
||||
<el-card shadow="hover" class="mb-8px">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :options="pieOptionsData" :height="280" />
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
|
||||
<el-card shadow="hover" class="mb-8px">
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<Echart :options="barOptionsData" :height="280" />
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="h-3 flex justify-between">
|
||||
<!-- <span>{{ t('workplace.shortcutOperation') }}</span>-->
|
||||
<span>未完成项目</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<el-row>
|
||||
<!-- <el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-8px">-->
|
||||
<el-col>
|
||||
<div class="flex items-center">
|
||||
<!-- <Icon :icon="item.icon" class="mr-8px" />-->
|
||||
<!-- <el-link type="default" :underline="false" @click="setWatermark(item.name)">-->
|
||||
<!--<!– {{ item.name }}–>-->
|
||||
<!-- Test-->
|
||||
<!-- </el-link>-->
|
||||
<el-table
|
||||
:data="list2"
|
||||
:row-class-name="tableRowClassName"
|
||||
stripe
|
||||
style="width:100%"
|
||||
height="300"
|
||||
>
|
||||
<el-table-column
|
||||
fixed
|
||||
prop="pjEtime"
|
||||
label="预计日期"
|
||||
align="center"
|
||||
:formatter="dateFormatter2"
|
||||
style="width: 20%"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="pjName"
|
||||
label="标题"
|
||||
style="width: 30%"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="pjType"
|
||||
label="类别"
|
||||
style="width: 20%"
|
||||
>
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.HOME_PJ_TYPE || 'info'" :value="scope.row.pjType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="pjDept"
|
||||
label="部门"
|
||||
style="width: 20%">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.HOME_PJ_DEPT || 'info'" :value="scope.row.pjDept" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="pjNumber"
|
||||
label="人数"
|
||||
style="width: 10%"
|
||||
/>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
|
||||
|
||||
<el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
|
||||
<el-card shadow="never" class="mt-8px" style="margin-bottom: 10px">
|
||||
<template #header>
|
||||
<div class="h-3 flex justify-between">
|
||||
<span>{{ t('workplace.notice') }}</span>
|
||||
<!-- <el-link type="primary" :underline="false">{{ t('action.more') }}</el-link>-->
|
||||
</div>
|
||||
</template>
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<div v-for="(item, index) in filteredList2" :key="`dynamics-${index}`">
|
||||
<div class="flex items-center">
|
||||
<!-- <el-avatar :src="avatar" :size="35" class="mr-16px">-->
|
||||
<!-- <img src="@/assets/imgs/avatar.gif" alt="" />-->
|
||||
<!-- </el-avatar>-->
|
||||
<div>
|
||||
<div class="text-14px" @click="openDialog(item.contentType,item.imgId)">
|
||||
<dict-tag :type="DICT_TYPE.HOME_CONTENT_STATUS" :value="item.contentType" /> :
|
||||
{{ item.imgName }}
|
||||
</div>
|
||||
<div class="mt-16px text-12px text-gray-400">
|
||||
{{ formatTime(item.imgCreatetime, 'yyyy-MM-dd') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider />
|
||||
</div>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
<el-card shadow="never" style="margin-bottom: 10px">
|
||||
<template #header>
|
||||
<div class="h-3 flex justify-between">
|
||||
<!-- <span>{{ t('workplace.shortcutOperation') }}</span>-->
|
||||
<span>完成项目</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<el-row>
|
||||
<!-- <el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-8px">-->
|
||||
<el-col>
|
||||
<div class="flex items-center">
|
||||
<!-- <Icon :icon="item.icon" class="mr-8px" />-->
|
||||
<!-- <el-link type="default" :underline="false" @click="setWatermark(item.name)">-->
|
||||
<!--<!– {{ item.name }}–>-->
|
||||
<!-- Test-->
|
||||
<!-- </el-link>-->
|
||||
<el-table
|
||||
:data="list2"
|
||||
:row-class-name="tableRowClassName2"
|
||||
stripe
|
||||
style="width:100%"
|
||||
height="300"
|
||||
><el-table-column
|
||||
fixed
|
||||
prop="pjEtime"
|
||||
label="完成日期"
|
||||
align="center"
|
||||
:formatter="dateFormatter2"
|
||||
style="width: 20%"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="pjName"
|
||||
label="标题"
|
||||
style="width: 30%"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="pjType"
|
||||
label="类别"
|
||||
style="width: 20%"
|
||||
>
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.HOME_PJ_TYPE || 'info'" :value="scope.row.pjType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="pjDept"
|
||||
label="部门"
|
||||
style="width: 20%">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.HOME_PJ_DEPT || 'info'" :value="scope.row.pjDept" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="pjNumber"
|
||||
label="人数"
|
||||
style="width: 10%"
|
||||
/>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible" style="width: 85%">
|
||||
<el-form >
|
||||
<el-form-item >
|
||||
<span style="font-size: 20px; font-weight: bold;">{{formData.imgName}}</span>
|
||||
<el-divider style="border-top: none; margin: 0;"/>
|
||||
<span style="font-size: 12px">发布时间: {{formatTime(formData.imgCreatetime,'yyyy-MM-dd')}}</span>
|
||||
<el-divider style="margin-top: 10px"/>
|
||||
<span style="line-height: 1.2" v-html="formData.imgContent"></span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">确 定</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { set } from 'lodash-es'
|
||||
import { EChartsOption } from 'echarts'
|
||||
import { formatTime } from '@/utils'
|
||||
// import mn2 from '@/assets/imgs/Home-image/02.png'
|
||||
// import mn3 from '@/assets/imgs/Home-image/03.png'
|
||||
// import mn4 from '@/assets/imgs/Home-image/04.png'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
// import { useWatermark } from '@/hooks/web/useWatermark'
|
||||
import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
|
||||
import { pieOptions, barOptions } from './echarts-data'
|
||||
import {DataInfoApi, DataInfoVO} from "@/api/home/datainfo";
|
||||
import {pjApi, pjVO} from "@/api/home/homepj";
|
||||
import {dateFormatter, dateFormatter2} from "@/utils/formatTime";
|
||||
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
|
||||
import {imgApi, imgVO} from "@/api/home/homeimg";
|
||||
import a from "../../../dist/assets/a-Bqc4tEO8";
|
||||
|
||||
defineOptions({ name: 'Home' })
|
||||
|
||||
|
||||
const { t } = useI18n()
|
||||
const userStore = useUserStore()
|
||||
// const { setWatermark } = useWatermark()
|
||||
const loading = ref(false)
|
||||
const list = ref<DataInfoVO[]>([]) // 列表的数据
|
||||
const list2 = ref<pjVO[]>([]) // 列表的数据
|
||||
const list3 = ref<imgVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const avatar = userStore.getUser.avatar
|
||||
const username = userStore.getUser.nickname
|
||||
const allData = ref(null);
|
||||
const allData2 = ref({});
|
||||
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
|
||||
// 获取统计数
|
||||
let totalSate = reactive<WorkplaceTotal>({
|
||||
project: 0,
|
||||
access: 0,
|
||||
todo: 0
|
||||
})
|
||||
const formData = ref({
|
||||
imgId: undefined,
|
||||
imgName: undefined,
|
||||
imgCreatetime: undefined,
|
||||
imgImg: [],
|
||||
imgContent: undefined,
|
||||
contentType: undefined,
|
||||
imgStatus: undefined,
|
||||
contentStatus: undefined,
|
||||
})
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const openDialog = async (type:number,id?:number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = type===1?'公告':'通知'
|
||||
resetForm()
|
||||
if (id) {
|
||||
formData.value = await imgApi.getimg(id)
|
||||
}
|
||||
}
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
imgId: undefined,
|
||||
imgName: undefined,
|
||||
imgCreatetime: undefined,
|
||||
imgImg: undefined,
|
||||
imgContent: undefined,
|
||||
contentType: undefined,
|
||||
imgStatus: undefined,
|
||||
contentStatus: undefined,
|
||||
}
|
||||
}
|
||||
const filteredList = computed(() => {
|
||||
return list3.value.filter(item => item.imgStatus !== 0 && item.contentStatus!==0);
|
||||
});
|
||||
const filteredList2 = computed(() => {
|
||||
return list3.value.filter(item => item.contentStatus !== 0 );
|
||||
});
|
||||
const queryParams2 = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 50,
|
||||
pjName: undefined,
|
||||
pjDone: undefined,
|
||||
pjDescribe: undefined,
|
||||
pjContent: undefined,
|
||||
pjType: undefined,
|
||||
pjEtime: [],
|
||||
pjVtime: [],
|
||||
pjDept: undefined,
|
||||
pjNumber: undefined,
|
||||
createTime: [],
|
||||
})
|
||||
|
||||
const queryParams3 = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
imgId: undefined,
|
||||
imgName: undefined,
|
||||
imgCreatetime: [],
|
||||
imgImg: undefined,
|
||||
imgContent: undefined,
|
||||
contentType: undefined,
|
||||
imgStatus: undefined,
|
||||
contentStatus: undefined,
|
||||
createTime: [],
|
||||
})
|
||||
const tableRowClassName = ({ row }) => {
|
||||
return row.pjDone === 1 ? 'warning-row' : '';
|
||||
};
|
||||
const tableRowClassName2 = ({ row }) => {
|
||||
return row.pjDone === 0 ? 'warning-row' : '';
|
||||
};
|
||||
const imgUrl = "//images.weserv.nl/?url="
|
||||
// const image = [
|
||||
// {id: 1, src: mn2, name: '02'},
|
||||
// {id: 2, src: mn3, name: '03'},
|
||||
// {id: 3, src: mn4, name: '04'},
|
||||
// ]
|
||||
const dataList = computed(() => {
|
||||
return [
|
||||
{ name: '碳排放', infoCo2e: allData.value.infoCo2e || 0, dAn: '吨', time: '2024-07-05', color: '#e6eae3' },
|
||||
{ name: '用水量', infoCo2e: allData.value.infoWater || 0, dAn: '吨', time: '2024-07-05', color: '#ecf5ff' },
|
||||
{ name: '环保投入', infoCo2e: allData.value.infoEcom || 0, dAn: '万元', time: '2024-07-05', color: '#f0f9eb' },
|
||||
{ name: '技能培训', infoCo2e: allData.value.infoTraining || 0, dAn: '人', time: '2024-07-05', color: '#fef0f0' },
|
||||
{ name: '污染物质', infoCo2e: allData.value.infoPollution || 0, dAn: '吨', time: '2024-07-05', color: '#c0c4cc' },
|
||||
{ name: '研发费用', infoCo2e: allData.value.infoRd || 0, dAn: '万元', time: '2024-07-05', color: '#fdf6ec' }
|
||||
];
|
||||
});
|
||||
const dataList2 = computed(() => [
|
||||
{
|
||||
E: allData2.value[0]?.infoEnvironment || 70,
|
||||
S: allData2.value[0]?.infoSociety || 70,
|
||||
G: allData2.value[0]?.infoGovern || 70
|
||||
},
|
||||
{
|
||||
E: allData2.value[1]?.infoEnvironment || 70,
|
||||
S: allData2.value[1]?.infoSociety || 70,
|
||||
G: allData2.value[1]?.infoGovern || 70
|
||||
},
|
||||
{
|
||||
E: allData2.value[2]?.infoEnvironment || 70,
|
||||
S: allData2.value[2]?.infoSociety || 70,
|
||||
G: allData2.value[2]?.infoGovern || 70
|
||||
},
|
||||
]);
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await DataInfoApi.getDataInfoPage(queryParams)
|
||||
const data2 = await pjApi.getpjPage(queryParams2)
|
||||
const data3 = await imgApi.getimgPage(queryParams3)
|
||||
allData.value=data.list[0]
|
||||
allData2.value=data.list
|
||||
list.value = data.list
|
||||
list2.value = data2.list
|
||||
list3.value = data3.list
|
||||
total.value = data.total
|
||||
|
||||
await getWeeklyUserActivity()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 3,
|
||||
infoYear: undefined,
|
||||
infoCo2e: undefined,
|
||||
infoWater: undefined,
|
||||
infoPollution: undefined,
|
||||
infoEcom: undefined,
|
||||
infoTraining: undefined,
|
||||
infoRd: undefined,
|
||||
infoEnvironment: undefined,
|
||||
infoSociety: undefined,
|
||||
infoGovern: undefined,
|
||||
createTime: [],
|
||||
})
|
||||
const getCount = async () => {
|
||||
const data = {
|
||||
project: 40,
|
||||
access: 2340,
|
||||
todo: 10
|
||||
}
|
||||
totalSate = Object.assign(totalSate, data)
|
||||
}
|
||||
|
||||
// 获取项目数
|
||||
let projects = reactive<Project[]>([])
|
||||
const getProject = async () => {
|
||||
const data = [
|
||||
{
|
||||
name: 'ruoyi-vue-pro',
|
||||
icon: 'akar-icons:github-fill',
|
||||
message: 'https://github.com/YunaiV/ruoyi-vue-pro',
|
||||
personal: 'Spring Boot 单体架构',
|
||||
time: new Date()
|
||||
},
|
||||
{
|
||||
name: 'yudao-ui-admin-vue3',
|
||||
icon: 'logos:vue',
|
||||
message: 'https://github.com/yudaocode/yudao-ui-admin-vue3',
|
||||
personal: 'Vue3 + element-plus',
|
||||
time: new Date()
|
||||
},
|
||||
{
|
||||
name: 'yudao-ui-admin-vben',
|
||||
icon: 'logos:vue',
|
||||
message: 'https://github.com/yudaocode/yudao-ui-admin-vben',
|
||||
personal: 'Vue3 + vben(antd)',
|
||||
time: new Date()
|
||||
},
|
||||
{
|
||||
name: 'yudao-cloud',
|
||||
icon: 'akar-icons:github',
|
||||
message: 'https://github.com/YunaiV/yudao-cloud',
|
||||
personal: 'Spring Cloud 微服务架构',
|
||||
time: new Date()
|
||||
},
|
||||
{
|
||||
name: 'yudao-ui-mall-uniapp',
|
||||
icon: 'logos:vue',
|
||||
message: 'https://github.com/yudaocode/yudao-ui-admin-uniapp',
|
||||
personal: 'Vue3 + uniapp',
|
||||
time: new Date()
|
||||
},
|
||||
{
|
||||
name: 'yudao-ui-admin-vue2',
|
||||
icon: 'logos:vue',
|
||||
message: 'https://github.com/yudaocode/yudao-ui-admin-vue2',
|
||||
personal: 'Vue2 + element-ui',
|
||||
time: new Date()
|
||||
}
|
||||
]
|
||||
projects = Object.assign(projects, data)
|
||||
}
|
||||
|
||||
// 获取通知公告
|
||||
let notice = reactive<Notice[]>([])
|
||||
const getNotice = async () => {
|
||||
const data = [
|
||||
{
|
||||
title: '2024年4月7日，罗平县生态环境保护综合行政执法大队对你单位进行了调查，发现你单位实施了以下生态环境违法行为',
|
||||
// title: '系统支持 JDK 8/17/21，Vue 2/3',
|
||||
type: '通知',
|
||||
keys: ['通知'],
|
||||
date: new Date()
|
||||
},
|
||||
{
|
||||
title: '2024年4月7日，罗平县生态环境保护综合行政执法大队对你单位进行了调查，发现你单位实施了以下生态环境违法行为',
|
||||
// title: '后端提供 Spring Boot 2.7/3.2 + Cloud 双架构',
|
||||
type: '公告',
|
||||
keys: ['公告'],
|
||||
date: new Date()
|
||||
},
|
||||
{
|
||||
title: '2024年4月7日，罗平县生态环境保护综合行政执法大队对你单位进行了调查，发现你单位实施了以下生态环境违法行为',
|
||||
// title: '全部开源，个人与企业可 100% 直接使用，无需授权',
|
||||
type: '通知',
|
||||
keys: ['通知'],
|
||||
date: new Date()
|
||||
},
|
||||
{
|
||||
title: '2024年4月7日，罗平县生态环境保护综合行政执法大队对你单位进行了调查，发现你单位实施了以下生态环境违法行为',
|
||||
// title: '国内使用最广泛的快速开发平台，超 300+ 人贡献',
|
||||
type: '公告',
|
||||
keys: ['公告', '最广泛'],
|
||||
date: new Date()
|
||||
}
|
||||
]
|
||||
notice = Object.assign(notice, data)
|
||||
}
|
||||
|
||||
// 获取快捷入口
|
||||
let shortcut = reactive<Shortcut[]>([])
|
||||
|
||||
const getShortcut = async () => {
|
||||
const data = [
|
||||
{
|
||||
name: 'Github',
|
||||
icon: 'akar-icons:github-fill',
|
||||
url: 'github.io'
|
||||
},
|
||||
{
|
||||
name: 'Vue',
|
||||
icon: 'logos:vue',
|
||||
url: 'vuejs.org'
|
||||
},
|
||||
{
|
||||
name: 'Vite',
|
||||
icon: 'vscode-icons:file-type-vite',
|
||||
url: 'https://vitejs.dev/'
|
||||
},
|
||||
{
|
||||
name: 'Angular',
|
||||
icon: 'logos:angular-icon',
|
||||
url: 'github.io'
|
||||
},
|
||||
{
|
||||
name: 'React',
|
||||
icon: 'logos:react',
|
||||
url: 'github.io'
|
||||
},
|
||||
{
|
||||
name: 'Webpack',
|
||||
icon: 'logos:webpack',
|
||||
url: 'github.io'
|
||||
}
|
||||
]
|
||||
shortcut = Object.assign(shortcut, data)
|
||||
}
|
||||
|
||||
// 用户来源
|
||||
const getUserAccessSource = async () => {
|
||||
// const data = [
|
||||
// { value: 335, name: 'analysis.directAccess' },
|
||||
// ]
|
||||
const data = [
|
||||
{ value: 335, name: '社会' },
|
||||
{ value: 310, name: '环境' },
|
||||
{ value: 234, name: '治理' },
|
||||
]
|
||||
set(
|
||||
pieOptionsData,
|
||||
'legend.data',
|
||||
data.map((v) => t(v.name))
|
||||
)
|
||||
pieOptionsData!.series![0].data = data.map((v) => {
|
||||
return {
|
||||
name: t(v.name),
|
||||
value: v.value
|
||||
}
|
||||
})
|
||||
}
|
||||
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
|
||||
|
||||
// 周活跃量
|
||||
const getWeeklyUserActivity = async () => {
|
||||
// const data = [
|
||||
// { value: 13253, name: 'analysis.monday' },
|
||||
// ]
|
||||
const data = [
|
||||
{ name: '环境评分' },
|
||||
{ name: '社会评分' },
|
||||
{ name: '治理评分' },
|
||||
]
|
||||
set(
|
||||
barOptionsData,
|
||||
'xAxis.data',
|
||||
data.map((v) => t(v.name))
|
||||
)
|
||||
set(barOptionsData, 'series', [
|
||||
{
|
||||
name: '2022',
|
||||
data: [dataList2.value[0].E, dataList2.value[0].E, dataList2.value[0].E],
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
name: '2023',
|
||||
data: [dataList2.value[1].S, dataList2.value[1].S, dataList2.value[1].S],
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
name: '2024',
|
||||
data: [dataList2.value[2].G, dataList2.value[2].G, dataList2.value[2].G],
|
||||
type: 'bar'
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
const getAllApi = async () => {
|
||||
await Promise.all([
|
||||
getCount(),
|
||||
getProject(),
|
||||
getNotice(),
|
||||
getShortcut(),
|
||||
getUserAccessSource(),
|
||||
getWeeklyUserActivity()
|
||||
])
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
getAllApi()
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-carousel__item h3 {
|
||||
opacity: 0.75;
|
||||
line-height: 200px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.el-table .warning-row {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,204 +0,0 @@
|
||||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="formData.title" placeholder="请输入申请标题" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="时间" prop="usageDate">
|
||||
<el-date-picker
|
||||
v-model="formData.usageDate"
|
||||
type="date"
|
||||
value-format="x"
|
||||
placeholder="选择申请时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户" prop="userName">
|
||||
<el-input v-model="formData.userName" placeholder="请输入申请用户名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="部门" prop="deptName">
|
||||
<el-input v-model="formData.deptName" placeholder="请输入申请部门名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="物品名字" prop="usageName">
|
||||
<el-input v-model="formData.usageName" placeholder="请输入申请物品名字" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="申请物品" prop="usageId">
|
||||
<el-select v-model="formData.usageId" placeholder="请选择申请物品id">
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.BGYP_USAGE_NAME)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="物品数量" prop="usageQuantity">
|
||||
<el-input v-model="formData.usageQuantity" placeholder="请输入申请物品数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="物品分类" prop="unit">
|
||||
<el-select v-model="formData.unit" placeholder="请选择申请物品分类">
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.BGYP_UNIT)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <el-form-item label="申请部门id" prop="deptId">-->
|
||||
<!-- <el-input v-model="formData.deptId" placeholder="请输入申请部门id" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="用途" prop="usagePurpose">
|
||||
<el-input v-model="formData.usagePurpose" type="textarea" placeholder="请输入申请用途" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="审批状态" prop="status">-->
|
||||
<!-- <el-radio-group v-model="formData.status">-->
|
||||
<!-- <el-radio label="1">请选择字典生成</el-radio>-->
|
||||
<!-- </el-radio-group>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="申请人的用户编号" prop="userId">-->
|
||||
<!-- <el-input v-model="formData.userId" placeholder="请输入申请人的用户编号" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="流程实例的编号" prop="processInstanceId">-->
|
||||
<!-- <el-input v-model="formData.processInstanceId" placeholder="请输入流程实例的编号" />-->
|
||||
<!-- </el-form-item>-->
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { BgypApi, BgypVO } from '@/api/home/bgyp'
|
||||
|
||||
/** 办公用品管理 表单 */
|
||||
defineOptions({ name: 'BgypForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
title: undefined,
|
||||
userName: undefined,
|
||||
deptName: undefined,
|
||||
deptId: undefined,
|
||||
usageName: undefined,
|
||||
usageId: undefined,
|
||||
usageQuantity: undefined,
|
||||
unit: undefined,
|
||||
usagePurpose: undefined,
|
||||
usageDate: undefined,
|
||||
status: undefined,
|
||||
userId: undefined,
|
||||
processInstanceId: undefined,
|
||||
})
|
||||
const formRules = reactive({
|
||||
title: [{ required: true, message: '申请标题不能为空', trigger: 'blur' }],
|
||||
userName: [{ required: true, message: '申请用户名称不能为空', trigger: 'blur' }],
|
||||
deptName: [{ required: true, message: '申请部门名称不能为空', trigger: 'blur' }],
|
||||
deptId: [{ required: true, message: '申请部门id不能为空', trigger: 'blur' }],
|
||||
usageId: [{ required: true, message: '申请物品id不能为空', trigger: 'change' }],
|
||||
usageQuantity: [{ required: true, message: '申请物品数量不能为空', trigger: 'blur' }],
|
||||
usageDate: [{ required: true, message: '申请时间不能为空', trigger: 'blur' }],
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await BgypApi.getBgyp(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
await formRef.value.validate()
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as unknown as BgypVO
|
||||
if (formType.value === 'create') {
|
||||
await BgypApi.createBgyp(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await BgypApi.updateBgyp(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
title: undefined,
|
||||
userName: undefined,
|
||||
deptName: undefined,
|
||||
deptId: undefined,
|
||||
usageName: undefined,
|
||||
usageId: undefined,
|
||||
usageQuantity: undefined,
|
||||
unit: undefined,
|
||||
usagePurpose: undefined,
|
||||
usageDate: undefined,
|
||||
status: undefined,
|
||||
userId: undefined,
|
||||
processInstanceId: undefined,
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
@ -1,458 +0,0 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="id" prop="id">
|
||||
<el-input
|
||||
v-model="queryParams.id"
|
||||
placeholder="请输入id"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="物品名字" prop="itemName">
|
||||
<el-input
|
||||
v-model="queryParams.itemName"
|
||||
placeholder="请输入物品名字"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="物品分类" prop="categoryId">
|
||||
<el-select
|
||||
v-model="queryParams.categoryId"
|
||||
placeholder="请选择物品分类"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.BGYP_UNIT)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="物品状态" prop="itemStatus">
|
||||
<el-select
|
||||
v-model="queryParams.itemStatus"
|
||||
placeholder="请选择物品状态"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getStrDictOptions(DICT_TYPE.DRIVER_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="库存数量" prop="stockQuantity">
|
||||
<el-input
|
||||
v-model="queryParams.stockQuantity"
|
||||
placeholder="请输入库存数量"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单价" prop="unitPrice">
|
||||
<el-input
|
||||
v-model="queryParams.unitPrice"
|
||||
placeholder="请输入单价"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="入库时间" prop="stockDate">
|
||||
<el-date-picker
|
||||
v-model="queryParams.stockDate"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位" prop="unit">
|
||||
<el-input
|
||||
v-model="queryParams.unit"
|
||||
placeholder="请输入单位"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.createTime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['home:items:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['home:items:export']"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="id" align="center" prop="id" />
|
||||
<el-table-column label="物品名字" align="center" prop="itemName" />
|
||||
<el-table-column label="物品分类" align="center" prop="categoryId">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.BGYP_UNIT" :value="scope.row.categoryId" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="物品状态" align="center" prop="itemStatus">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.DRIVER_STATUS" :value="scope.row.itemStatus" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存数量" align="center" prop="stockQuantity" />
|
||||
<el-table-column label="单价" align="center" prop="unitPrice" />
|
||||
<el-table-column
|
||||
label="入库时间"
|
||||
align="center"
|
||||
prop="stockDate"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="详细描述" align="center" prop="itemDescription" />
|
||||
<el-table-column label="单位" align="center" prop="unit" />
|
||||
<el-table-column label="备注" align="center" prop="remarks" />
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="['home:items:update']"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['home:items:delete']"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<ItemsForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, getStrDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import download from '@/utils/download'
|
||||
import { ItemsApi, ItemsVO } from '@/api/home/items'
|
||||
import ItemsForm from './ItemsForm.vue'
|
||||
|
||||
/** 办公用品信息 列表 */
|
||||
defineOptions({ name: 'Items' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<ItemsVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
id: undefined,
|
||||
itemName: undefined,
|
||||
categoryId: undefined,
|
||||
itemStatus: undefined,
|
||||
stockQuantity: undefined,
|
||||
unitPrice: undefined,
|
||||
stockDate: [],
|
||||
itemDescription: undefined,
|
||||
unit: undefined,
|
||||
remarks: undefined,
|
||||
createTime: [],
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await ItemsApi.getItemsPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await ItemsApi.deleteItems(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
// 导出的二次确认
|
||||
await message.exportConfirm()
|
||||
// 发起导出
|
||||
exportLoading.value = true
|
||||
const data = await ItemsApi.exportItems(queryParams)
|
||||
download.excel(data, '办公用品信息.xls')
|
||||
} catch {
|
||||
} finally {
|
||||
exportLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
----------
|
||||
|
||||
|
||||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label="物品名字" prop="itemName">
|
||||
<el-input v-model="formData.itemName" placeholder="请输入物品名字" />
|
||||
</el-form-item>
|
||||
<el-form-item label="物品分类" prop="categoryId">
|
||||
<el-select v-model="formData.categoryId" placeholder="请选择物品分类">
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.BGYP_UNIT)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="物品状态" prop="itemStatus">
|
||||
<el-radio-group v-model="formData.itemStatus">
|
||||
<el-radio
|
||||
v-for="dict in getStrDictOptions(DICT_TYPE.DRIVER_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="库存数量" prop="stockQuantity">
|
||||
<el-input v-model="formData.stockQuantity" placeholder="请输入库存数量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单价" prop="unitPrice">
|
||||
<el-input v-model="formData.unitPrice" placeholder="请输入单价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="入库时间" prop="stockDate">
|
||||
<el-date-picker
|
||||
v-model="formData.stockDate"
|
||||
type="date"
|
||||
value-format="x"
|
||||
placeholder="选择入库时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="详细描述" prop="itemDescription">
|
||||
<el-input v-model="formData.itemDescription" type="textarea" placeholder="请输入详细描述" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单位" prop="unit">
|
||||
<el-input v-model="formData.unit" placeholder="请输入单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remarks">
|
||||
<el-input v-model="formData.remarks" type="textarea" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, getStrDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { ItemsApi, ItemsVO } from '@/api/home/items'
|
||||
|
||||
/** 办公用品信息 表单 */
|
||||
defineOptions({ name: 'ItemsForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
itemName: undefined,
|
||||
categoryId: undefined,
|
||||
itemStatus: undefined,
|
||||
stockQuantity: undefined,
|
||||
unitPrice: undefined,
|
||||
stockDate: undefined,
|
||||
itemDescription: undefined,
|
||||
unit: undefined,
|
||||
remarks: undefined,
|
||||
})
|
||||
const formRules = reactive({
|
||||
itemName: [{ required: true, message: '物品名字不能为空', trigger: 'blur' }],
|
||||
categoryId: [{ required: true, message: '物品分类不能为空', trigger: 'change' }],
|
||||
itemStatus: [{ required: true, message: '物品状态不能为空', trigger: 'blur' }],
|
||||
stockQuantity: [{ required: true, message: '库存数量不能为空', trigger: 'blur' }],
|
||||
unitPrice: [{ required: true, message: '单价不能为空', trigger: 'blur' }],
|
||||
stockDate: [{ required: true, message: '入库时间不能为空', trigger: 'blur' }],
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await ItemsApi.getItems(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
await formRef.value.validate()
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as unknown as ItemsVO
|
||||
if (formType.value === 'create') {
|
||||
await ItemsApi.createItems(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await ItemsApi.updateItems(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
itemName: undefined,
|
||||
categoryId: undefined,
|
||||
itemStatus: undefined,
|
||||
stockQuantity: undefined,
|
||||
unitPrice: undefined,
|
||||
stockDate: undefined,
|
||||
itemDescription: undefined,
|
||||
unit: undefined,
|
||||
remarks: undefined,
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
@ -1,479 +0,0 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="100px"
|
||||
>
|
||||
<!-- <el-form-item label="id" prop="id">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.id"-->
|
||||
<!-- placeholder="请输入id"-->
|
||||
<!-- clearable-->
|
||||
<!-- @keyup.enter="handleQuery"-->
|
||||
<!-- class="!w-240px"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="车牌号" prop="licensePlate">
|
||||
<el-input
|
||||
v-model="queryParams.licensePlate"
|
||||
placeholder="请输入车牌号"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称型号" prop="model">
|
||||
<el-input
|
||||
v-model="queryParams.model"
|
||||
placeholder="请输入名称型号"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆品牌" prop="brand">
|
||||
<el-input
|
||||
v-model="queryParams.brand"
|
||||
placeholder="请输入车辆品牌"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆状态" prop="carStatus">
|
||||
<el-select
|
||||
v-model="queryParams.carStatus"
|
||||
placeholder="请选择车辆状态"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.CLGL_CAR_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆类型" prop="carType">
|
||||
<el-select
|
||||
v-model="queryParams.carType"
|
||||
placeholder="请选择车辆类型"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.CLGL_CAR_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="发动机号" prop="engineNumber">
|
||||
<el-input
|
||||
v-model="queryParams.engineNumber"
|
||||
placeholder="请输入发动机号"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="车身主要颜色" prop="color">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.color"-->
|
||||
<!-- placeholder="请输入车身主要颜色"-->
|
||||
<!-- clearable-->
|
||||
<!-- @keyup.enter="handleQuery"-->
|
||||
<!-- class="!w-240px"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="购买日期" prop="purchaseDate">-->
|
||||
<!-- <el-date-picker-->
|
||||
<!-- v-model="queryParams.purchaseDate"-->
|
||||
<!-- value-format="YYYY-MM-DD HH:mm:ss"-->
|
||||
<!-- type="daterange"-->
|
||||
<!-- start-placeholder="开始日期"-->
|
||||
<!-- end-placeholder="结束日期"-->
|
||||
<!-- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
|
||||
<!-- class="!w-240px"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="购买金额(元)" prop="purchasePrice">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.purchasePrice"-->
|
||||
<!-- placeholder="请输入购买金额(元)"-->
|
||||
<!-- clearable-->
|
||||
<!-- @keyup.enter="handleQuery"-->
|
||||
<!-- class="!w-240px"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="创建时间" prop="createTime">-->
|
||||
<!-- <el-date-picker-->
|
||||
<!-- v-model="queryParams.createTime"-->
|
||||
<!-- value-format="YYYY-MM-DD HH:mm:ss"-->
|
||||
<!-- type="daterange"-->
|
||||
<!-- start-placeholder="开始日期"-->
|
||||
<!-- end-placeholder="结束日期"-->
|
||||
<!-- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
|
||||
<!-- class="!w-240px"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['home:carinfo:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['home:carinfo:export']"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="id" align="center" prop="id" />
|
||||
<el-table-column label="车牌号" align="center" prop="licensePlate" />
|
||||
<el-table-column label="具体名称型号" align="center" prop="model" />
|
||||
<el-table-column label="车辆品牌" align="center" prop="brand" />
|
||||
<el-table-column label="车辆状态" align="center" prop="carStatus">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.CLGL_CAR_STATUS" :value="scope.row.carStatus" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="车辆类型" align="center" prop="carType">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.CLGL_CAR_TYPE" :value="scope.row.carType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="车身主要颜色" align="center" prop="color" />
|
||||
<el-table-column
|
||||
label="购买日期"
|
||||
align="center"
|
||||
prop="purchaseDate"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="购买金额(元)" align="center" prop="purchasePrice" />
|
||||
<el-table-column label="发动机号" align="center" prop="engineNumber" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="['home:carinfo:update']"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['home:carinfo:delete']"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<CarinfoForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import download from '@/utils/download'
|
||||
import { CarinfoApi, CarinfoVO } from '@/api/home/carinfo'
|
||||
import CarinfoForm from './CarinfoForm.vue'
|
||||
|
||||
/** 车辆信息录入 列表 */
|
||||
defineOptions({ name: 'Carinfo' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<CarinfoVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
id: undefined,
|
||||
licensePlate: undefined,
|
||||
model: undefined,
|
||||
brand: undefined,
|
||||
carStatus: undefined,
|
||||
carType: undefined,
|
||||
color: undefined,
|
||||
purchaseDate: [],
|
||||
purchasePrice: undefined,
|
||||
engineNumber: undefined,
|
||||
remark: undefined,
|
||||
createTime: [],
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await CarinfoApi.getCarinfoPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await CarinfoApi.deleteCarinfo(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
// 导出的二次确认
|
||||
await message.exportConfirm()
|
||||
// 发起导出
|
||||
exportLoading.value = true
|
||||
const data = await CarinfoApi.exportCarinfo(queryParams)
|
||||
download.excel(data, '车辆信息录入.xls')
|
||||
} catch {
|
||||
} finally {
|
||||
exportLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label="车牌号" prop="licensePlate">
|
||||
<el-input v-model="formData.licensePlate" placeholder="请输入车牌号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="具体名称型号" prop="model">
|
||||
<el-input v-model="formData.model" placeholder="请输入具体名称型号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆品牌" prop="brand">
|
||||
<el-input v-model="formData.brand" placeholder="请输入车辆品牌" />
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆状态" prop="carStatus">
|
||||
<el-radio-group v-model="formData.carStatus">
|
||||
<el-radio
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.CLGL_CAR_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆类型" prop="carType">
|
||||
<el-select v-model="formData.carType" placeholder="请选择车辆类型">
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.CLGL_CAR_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="车身主要颜色" prop="color">
|
||||
<el-input v-model="formData.color" placeholder="请输入车身主要颜色" />
|
||||
</el-form-item>
|
||||
<el-form-item label="购买日期" prop="purchaseDate">
|
||||
<el-date-picker
|
||||
v-model="formData.purchaseDate"
|
||||
type="date"
|
||||
value-format="x"
|
||||
placeholder="选择购买日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="购买金额(元)" prop="purchasePrice">
|
||||
<el-input v-model="formData.purchasePrice" placeholder="请输入购买金额(元)" />
|
||||
</el-form-item>
|
||||
<el-form-item label="发动机号" prop="engineNumber">
|
||||
<el-input v-model="formData.engineNumber" placeholder="请输入发动机号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { CarinfoApi, CarinfoVO } from '@/api/home/carinfo'
|
||||
|
||||
/** 车辆信息录入 表单 */
|
||||
defineOptions({ name: 'CarinfoForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
licensePlate: undefined,
|
||||
model: undefined,
|
||||
brand: undefined,
|
||||
carStatus: undefined,
|
||||
carType: undefined,
|
||||
color: undefined,
|
||||
purchaseDate: undefined,
|
||||
purchasePrice: undefined,
|
||||
engineNumber: undefined,
|
||||
remark: undefined,
|
||||
})
|
||||
const formRules = reactive({
|
||||
licensePlate: [{ required: true, message: '车牌号不能为空', trigger: 'blur' }],
|
||||
model: [{ required: true, message: '具体名称型号不能为空', trigger: 'blur' }],
|
||||
carStatus: [{ required: true, message: '车辆状态不能为空', trigger: 'blur' }],
|
||||
carType: [{ required: true, message: '车辆类型不能为空', trigger: 'change' }],
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await CarinfoApi.getCarinfo(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
await formRef.value.validate()
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as unknown as CarinfoVO
|
||||
if (formType.value === 'create') {
|
||||
await CarinfoApi.createCarinfo(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await CarinfoApi.updateCarinfo(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
licensePlate: undefined,
|
||||
model: undefined,
|
||||
brand: undefined,
|
||||
carStatus: undefined,
|
||||
carType: undefined,
|
||||
color: undefined,
|
||||
purchaseDate: undefined,
|
||||
purchasePrice: undefined,
|
||||
engineNumber: undefined,
|
||||
remark: undefined,
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
@ -1,397 +0,0 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<!-- <el-form-item label="id" prop="id">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.id"-->
|
||||
<!-- placeholder="请输入id"-->
|
||||
<!-- clearable-->
|
||||
<!-- @keyup.enter="handleQuery"-->
|
||||
<!-- class="!w-240px"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="申请人" prop="carUser">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.carUser"-->
|
||||
<!-- placeholder="请输入申请人"-->
|
||||
<!-- clearable-->
|
||||
<!-- @keyup.enter="handleQuery"-->
|
||||
<!-- class="!w-240px"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="部门" prop="dept">
|
||||
<el-input
|
||||
v-model="queryParams.dept"
|
||||
placeholder="请输入部门"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用车类型" prop="carType">
|
||||
<el-select
|
||||
v-model="queryParams.carType"
|
||||
placeholder="请选择用车类型"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.CLGL_CAR_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="驾驶员" prop="carDriver">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.carDriver"-->
|
||||
<!-- placeholder="请输入驾驶员"-->
|
||||
<!-- clearable-->
|
||||
<!-- @keyup.enter="handleQuery"-->
|
||||
<!-- class="!w-240px"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="用车开始时间" prop="carStart">-->
|
||||
<!-- <el-date-picker-->
|
||||
<!-- v-model="queryParams.carStart"-->
|
||||
<!-- value-format="YYYY-MM-DD"-->
|
||||
<!-- type="date"-->
|
||||
<!-- placeholder="选择用车开始时间"-->
|
||||
<!-- clearable-->
|
||||
<!-- class="!w-240px"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="用车结束时间" prop="carEnd">-->
|
||||
<!-- <el-date-picker-->
|
||||
<!-- v-model="queryParams.carEnd"-->
|
||||
<!-- value-format="YYYY-MM-DD"-->
|
||||
<!-- type="date"-->
|
||||
<!-- placeholder="选择用车结束时间"-->
|
||||
<!-- clearable-->
|
||||
<!-- class="!w-240px"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="目的地" prop="carAddress">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.carAddress"-->
|
||||
<!-- placeholder="请输入目的地"-->
|
||||
<!-- clearable-->
|
||||
<!-- @keyup.enter="handleQuery"-->
|
||||
<!-- class="!w-240px"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="车辆开始里程" prop="carStartMileage">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.carStartMileage"-->
|
||||
<!-- placeholder="请输入车辆开始里程"-->
|
||||
<!-- clearable-->
|
||||
<!-- @keyup.enter="handleQuery"-->
|
||||
<!-- class="!w-240px"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="车辆结束里程" prop="carEndMileage">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.carEndMileage"-->
|
||||
<!-- placeholder="请输入车辆结束里程"-->
|
||||
<!-- clearable-->
|
||||
<!-- @keyup.enter="handleQuery"-->
|
||||
<!-- class="!w-240px"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="用车状态" prop="carStatus">
|
||||
<el-select
|
||||
v-model="queryParams.carStatus"
|
||||
placeholder="请选择用车状态"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.CLGL_CAR_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="创建时间" prop="createTime">-->
|
||||
<!-- <el-date-picker-->
|
||||
<!-- v-model="queryParams.createTime"-->
|
||||
<!-- value-format="YYYY-MM-DD HH:mm:ss"-->
|
||||
<!-- type="daterange"-->
|
||||
<!-- start-placeholder="开始日期"-->
|
||||
<!-- end-placeholder="结束日期"-->
|
||||
<!-- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
|
||||
<!-- class="!w-240px"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- plain-->
|
||||
<!-- @click="openForm('create')"-->
|
||||
<!-- v-hasPermi="['home:clgl:create']"-->
|
||||
<!-- >-->
|
||||
<!-- <Icon icon="ep:plus" class="mr-5px" /> 新增-->
|
||||
<!-- </el-button>-->
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['home:clgl:export']"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="handleCreate()"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['home:clgl:export']"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> 发起流程
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column width="70" label="序号" align="center" type="index" />
|
||||
<el-table-column label="申请人" align="center" prop="carUser" />
|
||||
<el-table-column label="部门" align="center" prop="dept" />
|
||||
<el-table-column label="用车类型" align="center" prop="carType">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.CLGL_CAR_TYPE" :value="scope.row.carType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="驾驶员" align="center" prop="carDriver" />
|
||||
<!-- <el-table-column-->
|
||||
<!-- label="用车开始时间"-->
|
||||
<!-- align="center"-->
|
||||
<!-- prop="carStart"-->
|
||||
<!-- :formatter="dateFormatter"-->
|
||||
<!-- width="180px"-->
|
||||
<!-- />-->
|
||||
<!-- <el-table-column-->
|
||||
<!-- label="用车结束时间"-->
|
||||
<!-- align="center"-->
|
||||
<!-- prop="carEnd"-->
|
||||
<!-- :formatter="dateFormatter"-->
|
||||
<!-- width="180px"-->
|
||||
<!-- />-->
|
||||
<!-- <el-table-column label="目的地" align="center" prop="carAddress" />-->
|
||||
<!-- <el-table-column label="车辆信息" align="center" prop="carInfo" />-->
|
||||
<!-- <el-table-column label="车辆开始里程" align="center" prop="carStartMileage" />-->
|
||||
<!-- <el-table-column label="车辆结束里程" align="center" prop="carEndMileage" />-->
|
||||
<el-table-column label="用车状态" align="center" prop="carStatus">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.CLGL_CAR_STATUS" :value="scope.row.carStatus" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="用车原因" align="center" prop="carReason" />-->
|
||||
<!-- <el-table-column label="备注" align="center" prop="carRemark" />-->
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-hasPermi="['bpm:oa-leave:query']"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleProcessDetail(scope.row)"
|
||||
>
|
||||
进度
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['bpm:oa-leave:query']"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleDetail(scope.row)"
|
||||
>
|
||||
详情
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="['home:clgl:update']"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['home:clgl:delete']"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<ClglForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import download from '@/utils/download'
|
||||
import { ClglApi, ClglVO } from '@/api/home/clgl'
|
||||
import ClglForm from './ClglForm.vue'
|
||||
import router from "@/router";
|
||||
import * as LeaveApi from '@/api/bpm/leave'
|
||||
|
||||
/** 车辆管理 列表 */
|
||||
defineOptions({ name: 'Clgl' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<ClglVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
id: undefined,
|
||||
carUser: undefined,
|
||||
dept: undefined,
|
||||
carType: undefined,
|
||||
carDriver: undefined,
|
||||
carStart: undefined,
|
||||
carStart: [],
|
||||
carEnd: undefined,
|
||||
carEnd: [],
|
||||
carAddress: undefined,
|
||||
carStartMileage: undefined,
|
||||
carEndMileage: undefined,
|
||||
carStatus: undefined,
|
||||
createTime: [],
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
|
||||
/** 添加操作 */
|
||||
const handleCreate = () => {
|
||||
router.push({ name: 'ClglCreate' })
|
||||
}
|
||||
/** 详情操作 */
|
||||
const handleDetail = (row: LeaveApi.LeaveVO) => {
|
||||
router.push({
|
||||
name: 'ClglDetail',
|
||||
query: {
|
||||
id: row.id
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/** 审批进度 */
|
||||
const handleProcessDetail = (row) => {
|
||||
router.push({
|
||||
name: 'BpmProcessInstanceDetail',
|
||||
query: {
|
||||
id: row.processInstanceId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// fix: 列表不刷新的问题。
|
||||
watch(
|
||||
() => router.currentRoute.value,
|
||||
() => {
|
||||
getList()
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await ClglApi.getClglPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await ClglApi.deleteClgl(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
// 导出的二次确认
|
||||
await message.exportConfirm()
|
||||
// 发起导出
|
||||
exportLoading.value = true
|
||||
const data = await ClglApi.exportClgl(queryParams)
|
||||
download.excel(data, '车辆管理.xls')
|
||||
} catch {
|
||||
} finally {
|
||||
exportLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
@ -1,454 +0,0 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="id" prop="id">
|
||||
<el-input
|
||||
v-model="queryParams.id"
|
||||
placeholder="请输入id"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="驾驶员名字" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入驾驶员名字"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="gender">
|
||||
<el-select
|
||||
v-model="queryParams.gender"
|
||||
placeholder="请选择性别"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.DRIVER_GENDER)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="驾驶员状态" prop="driverStatus">
|
||||
<el-select
|
||||
v-model="queryParams.driverStatus"
|
||||
placeholder="请选择驾驶员状态"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.DRIVER_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式" prop="contactInfo">
|
||||
<el-input
|
||||
v-model="queryParams.contactInfo"
|
||||
placeholder="请输入联系方式"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="驾驶证号" prop="license">
|
||||
<el-input
|
||||
v-model="queryParams.license"
|
||||
placeholder="请输入驾驶证号"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="驾驶证类型" prop="licenseType">
|
||||
<el-input
|
||||
v-model="queryParams.licenseType"
|
||||
placeholder="请输入驾驶证号"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="健康状态" prop="healthStatus">
|
||||
<el-input
|
||||
v-model="queryParams.healthStatus"
|
||||
placeholder="请输入健康状态"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="驾驶经验" prop="experience">
|
||||
<el-input
|
||||
v-model="queryParams.experience"
|
||||
placeholder="请输入驾驶经验"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.createTime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['home:driver:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['home:driver:export']"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="id" align="center" prop="id" />
|
||||
<el-table-column label="驾驶员名字" align="center" prop="name" />
|
||||
<el-table-column label="性别" align="center" prop="gender">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.DRIVER_GENDER" :value="scope.row.gender" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="驾驶员状态" align="center" prop="driverStatus">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.DRIVER_STATUS" :value="scope.row.driverStatus" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="联系方式" align="center" prop="contactInfo" />
|
||||
<el-table-column label="驾驶证号" align="center" prop="license" />
|
||||
<el-table-column label="驾驶证类型" align="center" prop="licenseType" />
|
||||
<el-table-column label="健康状态" align="center" prop="healthStatus" />
|
||||
<el-table-column label="驾驶经验" align="center" prop="experience" />
|
||||
<el-table-column label="备注" align="center" prop="remarks" />
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="['home:driver:update']"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['home:driver:delete']"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<DriverForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import download from '@/utils/download'
|
||||
import { DriverApi, DriverVO } from '@/api/home/driver'
|
||||
import DriverForm from './DriverForm.vue'
|
||||
|
||||
/** 驾驶员信息 列表 */
|
||||
defineOptions({ name: 'Driver' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<DriverVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
gender: undefined,
|
||||
driverStatus: undefined,
|
||||
contactInfo: undefined,
|
||||
license: undefined,
|
||||
licenseType: undefined,
|
||||
healthStatus: undefined,
|
||||
experience: undefined,
|
||||
remarks: undefined,
|
||||
createTime: [],
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await DriverApi.getDriverPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await DriverApi.deleteDriver(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
// 导出的二次确认
|
||||
await message.exportConfirm()
|
||||
// 发起导出
|
||||
exportLoading.value = true
|
||||
const data = await DriverApi.exportDriver(queryParams)
|
||||
download.excel(data, '驾驶员信息.xls')
|
||||
} catch {
|
||||
} finally {
|
||||
exportLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
--------------
|
||||
|
||||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label="驾驶员名字" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入驾驶员名字" />
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="gender">
|
||||
<el-radio-group v-model="formData.gender">
|
||||
<el-radio
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.DRIVER_GENDER)"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="驾驶员状态" prop="driverStatus">
|
||||
<el-radio-group v-model="formData.driverStatus">
|
||||
<el-radio
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.DRIVER_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式" prop="contactInfo">
|
||||
<el-input v-model="formData.contactInfo" placeholder="请输入联系方式" />
|
||||
</el-form-item>
|
||||
<el-form-item label="驾驶证号" prop="license">
|
||||
<el-input v-model="formData.license" placeholder="请输入驾驶证号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="驾驶证类型" prop="licenseType">
|
||||
<el-input v-model="formData.licenseType" placeholder="请输入驾驶证类型" />
|
||||
</el-form-item>
|
||||
<el-form-item label="健康状态" prop="healthStatus">
|
||||
<el-input v-model="formData.healthStatus" placeholder="请输入健康状态" />
|
||||
</el-form-item>
|
||||
<el-form-item label="驾驶经验" prop="experience">
|
||||
<el-input v-model="formData.experience" placeholder="请输入驾驶经验" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remarks">
|
||||
<el-input autosize v-model="formData.remarks" type="textarea" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { DriverApi, DriverVO } from '@/api/home/driver'
|
||||
|
||||
/** 驾驶员信息 表单 */
|
||||
defineOptions({ name: 'DriverForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
gender: undefined,
|
||||
driverStatus: undefined,
|
||||
contactInfo: undefined,
|
||||
license: undefined,
|
||||
licenseType: undefined,
|
||||
healthStatus: undefined,
|
||||
experience: undefined,
|
||||
remarks: undefined,
|
||||
})
|
||||
const formRules = reactive({
|
||||
name: [{ required: true, message: '驾驶员名字不能为空', trigger: 'blur' }],
|
||||
gender: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
|
||||
driverStatus: [{ required: true, message: '驾驶员状态不能为空', trigger: 'blur' }],
|
||||
contactInfo: [{ required: true, message: '联系方式不能为空', trigger: 'blur' }],
|
||||
license: [{ required: true, message: '驾驶证号不能为空', trigger: 'blur' }],
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await DriverApi.getDriver(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
await formRef.value.validate()
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as unknown as DriverVO
|
||||
if (formType.value === 'create') {
|
||||
await DriverApi.createDriver(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await DriverApi.updateDriver(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
gender: undefined,
|
||||
driverStatus: undefined,
|
||||
contactInfo: undefined,
|
||||
license: undefined,
|
||||
licenseType: undefined,
|
||||
healthStatus: undefined,
|
||||
experience: undefined,
|
||||
remarks: undefined,
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,720 +0,0 @@
|
||||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label="会议标题" prop="title">
|
||||
<el-input v-model="formData.title" placeholder="请输入会议标题" />
|
||||
</el-form-item>
|
||||
<el-form-item label="申请人名字" prop="userName">
|
||||
<el-input v-model="formData.userName" placeholder="请输入申请人名字" />
|
||||
</el-form-item>
|
||||
<el-form-item label="申请人id" prop="userId">
|
||||
<el-input v-model="formData.userId" placeholder="请输入申请人id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="申请部门名字" prop="deptName">
|
||||
<el-input v-model="formData.deptName" placeholder="请输入申请部门名字" />
|
||||
</el-form-item>
|
||||
<el-form-item label="申请部门id" prop="deptId">
|
||||
<el-input v-model="formData.deptId" placeholder="请输入申请部门id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="申请时间" prop="time">
|
||||
<el-date-picker
|
||||
v-model="formData.time"
|
||||
type="date"
|
||||
value-format="x"
|
||||
placeholder="选择申请时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="depict">
|
||||
<el-input v-model="formData.depict" placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
<el-form-item label="会议类型" prop="type">
|
||||
<el-select v-model="formData.type" placeholder="请选择会议类型">
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.HYGL_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="会议主题" prop="theme">
|
||||
<el-input v-model="formData.theme" placeholder="请输入会议主题" />
|
||||
</el-form-item>
|
||||
<el-form-item label="会议目标" prop="target">
|
||||
<el-input v-model="formData.target" placeholder="请输入会议目标" />
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="startDate">
|
||||
<el-date-picker
|
||||
v-model="formData.startDate"
|
||||
type="date"
|
||||
value-format="x"
|
||||
placeholder="选择开始时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endDate">
|
||||
<el-date-picker
|
||||
v-model="formData.endDate"
|
||||
type="date"
|
||||
value-format="x"
|
||||
placeholder="选择结束时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="持续时间" prop="duration">
|
||||
<el-input v-model="formData.duration" placeholder="请输入持续时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室id" prop="roomId">
|
||||
<el-input v-model="formData.roomId" placeholder="请输入会议室id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室名字" prop="roomName">
|
||||
<el-input v-model="formData.roomName" placeholder="请输入会议室名字" />
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室地址" prop="roomAddress">
|
||||
<el-input v-model="formData.roomAddress" placeholder="请输入会议室地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="组织者" prop="organizer">
|
||||
<el-input v-model="formData.organizer" placeholder="请输入组织者" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主讲人" prop="speaker">
|
||||
<el-input v-model="formData.speaker" placeholder="请输入主讲人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="记录人员" prop="meetingTaker">
|
||||
<el-input v-model="formData.meetingTaker" placeholder="请输入记录人员" />
|
||||
</el-form-item>
|
||||
<el-form-item label="参会人数" prop="number">
|
||||
<el-input v-model="formData.number" placeholder="请输入参会人数" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备需求" prop="equipmentList">
|
||||
<el-input v-model="formData.equipmentList" placeholder="请输入设备需求" />
|
||||
</el-form-item>
|
||||
<el-form-item label="网络需求" prop="network">
|
||||
<el-input v-model="formData.network" placeholder="请输入网络需求" />
|
||||
</el-form-item>
|
||||
<el-form-item label="审批状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio label="1">请选择字典生成</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程实例的编号" prop="processInstanceId">
|
||||
<el-input v-model="formData.processInstanceId" placeholder="请输入流程实例的编号" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { HyglApi, HyglVO } from '@/api/home/hygl'
|
||||
|
||||
/** 会议管理 表单 */
|
||||
defineOptions({ name: 'HyglForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
title: undefined,
|
||||
userName: undefined,
|
||||
userId: undefined,
|
||||
deptName: undefined,
|
||||
deptId: undefined,
|
||||
time: undefined,
|
||||
depict: undefined,
|
||||
type: undefined,
|
||||
theme: undefined,
|
||||
target: undefined,
|
||||
startDate: undefined,
|
||||
endDate: undefined,
|
||||
duration: undefined,
|
||||
roomId: undefined,
|
||||
roomName: undefined,
|
||||
roomAddress: undefined,
|
||||
organizer: undefined,
|
||||
speaker: undefined,
|
||||
meetingTaker: undefined,
|
||||
number: undefined,
|
||||
equipmentList: undefined,
|
||||
network: undefined,
|
||||
status: undefined,
|
||||
processInstanceId: undefined,
|
||||
})
|
||||
const formRules = reactive({
|
||||
title: [{ required: true, message: '会议标题不能为空', trigger: 'blur' }],
|
||||
userId: [{ required: true, message: '申请人id不能为空', trigger: 'blur' }],
|
||||
deptId: [{ required: true, message: '申请部门id不能为空', trigger: 'blur' }],
|
||||
time: [{ required: true, message: '申请时间不能为空', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '会议类型不能为空', trigger: 'change' }],
|
||||
startDate: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
|
||||
endDate: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
|
||||
roomId: [{ required: true, message: '会议室id不能为空', trigger: 'blur' }],
|
||||
roomAddress: [{ required: true, message: '会议室地址不能为空', trigger: 'blur' }],
|
||||
organizer: [{ required: true, message: '组织者不能为空', trigger: 'blur' }],
|
||||
number: [{ required: true, message: '参会人数不能为空', trigger: 'blur' }],
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await HyglApi.getHygl(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
await formRef.value.validate()
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as unknown as HyglVO
|
||||
if (formType.value === 'create') {
|
||||
await HyglApi.createHygl(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await HyglApi.updateHygl(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
title: undefined,
|
||||
userName: undefined,
|
||||
userId: undefined,
|
||||
deptName: undefined,
|
||||
deptId: undefined,
|
||||
time: undefined,
|
||||
depict: undefined,
|
||||
type: undefined,
|
||||
theme: undefined,
|
||||
target: undefined,
|
||||
startDate: undefined,
|
||||
endDate: undefined,
|
||||
duration: undefined,
|
||||
roomId: undefined,
|
||||
roomName: undefined,
|
||||
roomAddress: undefined,
|
||||
organizer: undefined,
|
||||
speaker: undefined,
|
||||
meetingTaker: undefined,
|
||||
number: undefined,
|
||||
equipmentList: undefined,
|
||||
network: undefined,
|
||||
status: undefined,
|
||||
processInstanceId: undefined,
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
|
||||
//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="会议标题" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入会议标题"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请人名字" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入申请人名字"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请人id" prop="userId">
|
||||
<el-input
|
||||
v-model="queryParams.userId"
|
||||
placeholder="请输入申请人id"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请部门名字" prop="deptName">
|
||||
<el-input
|
||||
v-model="queryParams.deptName"
|
||||
placeholder="请输入申请部门名字"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请部门id" prop="deptId">
|
||||
<el-input
|
||||
v-model="queryParams.deptId"
|
||||
placeholder="请输入申请部门id"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请时间" prop="time">
|
||||
<el-date-picker
|
||||
v-model="queryParams.time"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="depict">
|
||||
<el-input
|
||||
v-model="queryParams.depict"
|
||||
placeholder="请输入描述"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="会议类型" prop="type">
|
||||
<el-select
|
||||
v-model="queryParams.type"
|
||||
placeholder="请选择会议类型"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.HYGL_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="会议主题" prop="theme">
|
||||
<el-input
|
||||
v-model="queryParams.theme"
|
||||
placeholder="请输入会议主题"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="会议目标" prop="target">
|
||||
<el-input
|
||||
v-model="queryParams.target"
|
||||
placeholder="请输入会议目标"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="startDate">
|
||||
<el-date-picker
|
||||
v-model="queryParams.startDate"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endDate">
|
||||
<el-date-picker
|
||||
v-model="queryParams.endDate"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="持续时间" prop="duration">
|
||||
<el-input
|
||||
v-model="queryParams.duration"
|
||||
placeholder="请输入持续时间"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室id" prop="roomId">
|
||||
<el-input
|
||||
v-model="queryParams.roomId"
|
||||
placeholder="请输入会议室id"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室名字" prop="roomName">
|
||||
<el-input
|
||||
v-model="queryParams.roomName"
|
||||
placeholder="请输入会议室名字"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室地址" prop="roomAddress">
|
||||
<el-input
|
||||
v-model="queryParams.roomAddress"
|
||||
placeholder="请输入会议室地址"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="组织者" prop="organizer">
|
||||
<el-input
|
||||
v-model="queryParams.organizer"
|
||||
placeholder="请输入组织者"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="主讲人" prop="speaker">
|
||||
<el-input
|
||||
v-model="queryParams.speaker"
|
||||
placeholder="请输入主讲人"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="记录人员" prop="meetingTaker">
|
||||
<el-input
|
||||
v-model="queryParams.meetingTaker"
|
||||
placeholder="请输入记录人员"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="参会人数" prop="number">
|
||||
<el-input
|
||||
v-model="queryParams.number"
|
||||
placeholder="请输入参会人数"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备需求" prop="equipmentList">
|
||||
<el-input
|
||||
v-model="queryParams.equipmentList"
|
||||
placeholder="请输入设备需求"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="网络需求" prop="network">
|
||||
<el-input
|
||||
v-model="queryParams.network"
|
||||
placeholder="请输入网络需求"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="审批状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="请选择审批状态"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option label="请选择字典生成" value="" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程实例的编号" prop="processInstanceId">
|
||||
<el-input
|
||||
v-model="queryParams.processInstanceId"
|
||||
placeholder="请输入流程实例的编号"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.createTime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['home:hygl:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['home:hygl:export']"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="id" align="center" prop="id" />
|
||||
<el-table-column label="会议标题" align="center" prop="title" />
|
||||
<el-table-column label="申请人名字" align="center" prop="userName" />
|
||||
<el-table-column label="申请人id" align="center" prop="userId" />
|
||||
<el-table-column label="申请部门名字" align="center" prop="deptName" />
|
||||
<el-table-column label="申请部门id" align="center" prop="deptId" />
|
||||
<el-table-column
|
||||
label="申请时间"
|
||||
align="center"
|
||||
prop="time"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="描述" align="center" prop="depict" />
|
||||
<el-table-column label="会议类型" align="center" prop="type">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.HYGL_TYPE" :value="scope.row.type" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="会议主题" align="center" prop="theme" />
|
||||
<el-table-column label="会议目标" align="center" prop="target" />
|
||||
<el-table-column
|
||||
label="开始时间"
|
||||
align="center"
|
||||
prop="startDate"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column
|
||||
label="结束时间"
|
||||
align="center"
|
||||
prop="endDate"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="持续时间" align="center" prop="duration" />
|
||||
<el-table-column label="会议室id" align="center" prop="roomId" />
|
||||
<el-table-column label="会议室名字" align="center" prop="roomName" />
|
||||
<el-table-column label="会议室地址" align="center" prop="roomAddress" />
|
||||
<el-table-column label="组织者" align="center" prop="organizer" />
|
||||
<el-table-column label="主讲人" align="center" prop="speaker" />
|
||||
<el-table-column label="记录人员" align="center" prop="meetingTaker" />
|
||||
<el-table-column label="参会人数" align="center" prop="number" />
|
||||
<el-table-column label="设备需求" align="center" prop="equipmentList" />
|
||||
<el-table-column label="网络需求" align="center" prop="network" />
|
||||
<el-table-column label="审批状态" align="center" prop="status" />
|
||||
<el-table-column label="流程实例的编号" align="center" prop="processInstanceId" />
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="['home:hygl:update']"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['home:hygl:delete']"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<HyglForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import download from '@/utils/download'
|
||||
import { HyglApi, HyglVO } from '@/api/home/hygl'
|
||||
import HyglForm from './HyglDetail.vue'
|
||||
|
||||
/** 会议管理 列表 */
|
||||
defineOptions({ name: 'Hygl' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<HyglVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
title: undefined,
|
||||
userName: undefined,
|
||||
userId: undefined,
|
||||
deptName: undefined,
|
||||
deptId: undefined,
|
||||
time: [],
|
||||
depict: undefined,
|
||||
type: undefined,
|
||||
theme: undefined,
|
||||
target: undefined,
|
||||
startDate: [],
|
||||
endDate: [],
|
||||
duration: undefined,
|
||||
roomId: undefined,
|
||||
roomName: undefined,
|
||||
roomAddress: undefined,
|
||||
organizer: undefined,
|
||||
speaker: undefined,
|
||||
meetingTaker: undefined,
|
||||
number: undefined,
|
||||
equipmentList: undefined,
|
||||
network: undefined,
|
||||
status: undefined,
|
||||
processInstanceId: undefined,
|
||||
createTime: [],
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await HyglApi.getHyglPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await HyglApi.deleteHygl(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
// 导出的二次确认
|
||||
await message.exportConfirm()
|
||||
// 发起导出
|
||||
exportLoading.value = true
|
||||
const data = await HyglApi.exportHygl(queryParams)
|
||||
download.excel(data, '会议管理.xls')
|
||||
} catch {
|
||||
} finally {
|
||||
exportLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
@ -1,164 +0,0 @@
|
||||
|
||||
这是最原始展示一年工作日历的版本
|
||||
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<el-button-group style="display: flex; justify-content: space-between;">
|
||||
<el-button size="large" @click="selectDate2(-1)">上年</el-button>
|
||||
<el-button size="large" @click="toYear()">今年</el-button>
|
||||
<el-button size="large" @click="selectDate2(1)">下年</el-button>
|
||||
</el-button-group>
|
||||
<el-row :gutter="10">
|
||||
<el-col v-for="(month, index) in months" :key="index" :span="6" >
|
||||
<h5 class="month-title">{{ month }}</h5>
|
||||
<el-calendar
|
||||
ref="calendar"
|
||||
class="custom-calendar"
|
||||
:model-value="new Date(currentYear, index, 1)"
|
||||
>
|
||||
<template #header="{ date }">
|
||||
<el-row>
|
||||
<el-col :span="24" class="header-date">
|
||||
<span class="cl-title"> {{ date }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<template #date-cell="{ data }">
|
||||
<div @click="handleSelect(data)" :class="{ 'holiday': holidays2[data.day] }">
|
||||
{{ data.date.getDate()}}
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {CalendarDateType, CalendarInstance} from "element-plus";
|
||||
import {AgendaApi,CalendarDate} from "@/api/calendar/agenda";
|
||||
|
||||
defineOptions({ name: 'CalendarAgendaIndex' })
|
||||
|
||||
// const message = useMessage() // 消息弹窗
|
||||
|
||||
const calendar = ref<CalendarInstance>()
|
||||
const currentYear = ref(new Date().getFullYear()) // 获取当前年份
|
||||
const months = reactive(['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'])
|
||||
|
||||
const selectDate = (val: CalendarDateType) => {
|
||||
if (!calendar.value) return
|
||||
calendar.value.selectDate(val)
|
||||
console.log(calendar.value.selectDate(val))
|
||||
}
|
||||
const selectDate2 = (val:number) => {
|
||||
if (!val){
|
||||
return
|
||||
}
|
||||
currentYear.value += val
|
||||
}
|
||||
const toYear = () => {
|
||||
currentYear.value = new Date().getFullYear()
|
||||
}
|
||||
|
||||
// 处理日期选择
|
||||
const handleSelect = (date:CalendarDate) => {
|
||||
const date2 = date.date
|
||||
const da = `${date2.getFullYear()}-${(date2.getMonth() + 1).toString().padStart(2, '0')}-${date2.getDate().toString().padStart(2, '0')}`;
|
||||
holidays2[da] = !holidays2[da]
|
||||
console.log("da",da)
|
||||
console.log("holidays[da]",holidays2[da])
|
||||
console.log("date2",date2)
|
||||
console.log("holidays2",holidays2)
|
||||
};
|
||||
|
||||
// 节假日数据
|
||||
const holidays = reactive({
|
||||
'2024-01-01': 1,
|
||||
'2024-01-21': 1,
|
||||
'2024-02-10': 1,
|
||||
'2024-04-04': 1,
|
||||
'2024-05-01': 1,
|
||||
'2024-06-10': 1,
|
||||
'2024-08-10': 1,
|
||||
'2024-09-29': 1,
|
||||
'2024-10-01': 1,
|
||||
'2024-10-02': 1,
|
||||
'2024-10-03': 1,
|
||||
'2024-10-04': 1,
|
||||
'2024-10-05': 1,
|
||||
'2024-10-06': 0,
|
||||
'2024-10-07': 0,
|
||||
'2024-10-08': 0,
|
||||
'2024-10-09': 1,
|
||||
});
|
||||
const holidays2 = reactive({});
|
||||
const startDate = new Date('2024-01-01');
|
||||
const endDate = new Date('2024-12-31');
|
||||
|
||||
for (let d = startDate; d <= endDate; d.setDate(d.getDate() + 1)) {
|
||||
const formattedDate = d.toISOString().split('T')[0]; // 格式化日期为 YYYY-MM-DD
|
||||
holidays2[formattedDate] = Math.floor(Math.random() * 2); // 随机生成 0 或 1
|
||||
}
|
||||
|
||||
console.log(holidays2);
|
||||
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
id: undefined,
|
||||
date:[]
|
||||
})
|
||||
|
||||
const getDate = () => {
|
||||
const data = AgendaApi.getAgendaPage(queryParams)
|
||||
}
|
||||
onMounted(()=> {
|
||||
// getDate();
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
.custom-calendar .el-calendar-day {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.custom-calendar .is-today {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f56c6c;
|
||||
font-size: 16px;
|
||||
}
|
||||
.custom-calendar {
|
||||
border: 1px solid #1f1f1f !important; /* 使用 !important 确保样式生效 */
|
||||
border-radius: 10px; /* 可选：添加圆角 */
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.holiday {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #15bc83;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.schedule {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #CCFFCC;
|
||||
color: #3b3e55;
|
||||
font-size: 12px;
|
||||
}
|
||||
.month-title {
|
||||
text-align: center
|
||||
}
|
||||
.cl-title {
|
||||
display: inline-block;
|
||||
font-size: 12px
|
||||
}
|
||||
.header-date {
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,222 +0,0 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<el-form-item label="会议申请信息展示" prop="createTime">
|
||||
<!-- <el-date-picker-->
|
||||
<!-- v-model="queryParamsHysgl.createTime"-->
|
||||
<!-- value-format="YYYY-MM-DD HH:mm:ss"-->
|
||||
<!-- type="daterange"-->
|
||||
<!-- start-placeholder="开始日期"-->
|
||||
<!-- end-placeholder="结束日期"-->
|
||||
<!-- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
|
||||
<!-- class="!w-240px"-->
|
||||
<!-- />-->
|
||||
</el-form-item>
|
||||
<!-- <button @click="handleQuery">搜索</button>-->
|
||||
<el-calendar
|
||||
ref="calendar"
|
||||
class="custom-calendar"
|
||||
:model-value="new Date()"
|
||||
>
|
||||
<template #header="{ date }">
|
||||
<el-row>
|
||||
<el-col :span="24" class="header-date">
|
||||
<span class="cl-title"> {{ date }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<template #date-cell="{ data }">
|
||||
<div
|
||||
@click="handleSelect(data)"
|
||||
:class="'holiday'"
|
||||
style="max-height: 100px; overflow-y: auto; width: 100px;"
|
||||
>
|
||||
<span style="font-size: 12px">{{ data.date.getDate()}}</span>
|
||||
<br/>
|
||||
<span
|
||||
v-for="item in (holidays2[data.day] || [])"
|
||||
:key="item"
|
||||
style="font-size: 12px"
|
||||
>
|
||||
<span @click="getHygl(item.id)">记录:{{item.title}}</span>
|
||||
<br/>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {CalendarDateType, CalendarInstance} from 'element-plus';
|
||||
import {AgendaApi,CalendarDate} from '@/api/home/hysgl/hysinfo'
|
||||
import { HyglApi, HyglVO } from '@/api/home/hygl'
|
||||
import router from "@/router";
|
||||
|
||||
defineOptions({ name: 'CalendarAgendaIndex' })
|
||||
|
||||
// const message = useMessage() // 消息弹窗
|
||||
|
||||
const calendar = ref<CalendarInstance>()
|
||||
|
||||
// 获取当前日期和14天前的日期
|
||||
const endDate2 = new Date();
|
||||
const startDate2 = new Date();
|
||||
startDate2.setDate(endDate2.getDate() - 14); // 设置14天前的日期
|
||||
|
||||
//根据id获取数据
|
||||
const getHygl = async (id:number)=>{
|
||||
|
||||
}
|
||||
function formatDate(date: Date,time:boolean) {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours =time? '23' : '00';
|
||||
const minutes =time? '59' : '00';
|
||||
const seconds =time? '59' : '00';
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
function formatDate2(dat: number) {
|
||||
const date = new Date(dat)
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
// function formatDate(date: Date,time:boolean) {
|
||||
// const year = date.getFullYear();
|
||||
// const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
|
||||
// const day = String(date.getDate()).padStart(2, '0');
|
||||
// const hours =time? String(date.getHours()).padStart(2, '0') : '00';
|
||||
// const minutes =time? String(date.getMinutes()).padStart(2, '0') : '00';
|
||||
// const seconds =time? String(date.getSeconds()).padStart(2, '0') : '00';
|
||||
// return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
// }
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParamsHygl.pageNo = 1
|
||||
queryParamsHygl.createTime = [formatDate(startDate2,false),formatDate(endDate2,true)]
|
||||
getList()
|
||||
}
|
||||
// 处理日期选择
|
||||
const handleSelect = (date:CalendarDate) => {
|
||||
// const date2 = date.date
|
||||
// const da = `${date2.getFullYear()}-${(date2.getMonth() + 1).toString().padStart(2, '0')}-${date2.getDate().toString().padStart(2, '0')}`;
|
||||
// holidays2[da] = !holidays2[da]
|
||||
// console.log("da",da)
|
||||
// console.log("holidays[da]",holidays2[da])
|
||||
// console.log("holidays",holidays2)
|
||||
// console.log("date2",date2)
|
||||
};
|
||||
|
||||
const listHygl = ref<HyglVO[]>([]) // 列表的数据
|
||||
const queryParamsHygl = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
title: undefined,
|
||||
userName: undefined,
|
||||
userId: undefined,
|
||||
deptName: undefined,
|
||||
deptId: undefined,
|
||||
time: [],
|
||||
depict: undefined,
|
||||
type: undefined,
|
||||
theme: undefined,
|
||||
target: undefined,
|
||||
startDate: [],
|
||||
endDate: [],
|
||||
duration: undefined,
|
||||
roomId: undefined,
|
||||
roomName: undefined,
|
||||
roomAddress: undefined,
|
||||
organizer: undefined,
|
||||
speaker: undefined,
|
||||
meetingTaker: undefined,
|
||||
number: undefined,
|
||||
equipmentList: undefined,
|
||||
network: undefined,
|
||||
status: 2,
|
||||
processInstanceId: undefined,
|
||||
createTime: [] as string[],
|
||||
})
|
||||
const holidays2 = reactive({});
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
try {
|
||||
const hyglData = await HyglApi.getHyglPage(queryParamsHygl)
|
||||
listHygl.value = hyglData.list
|
||||
console.log("hysglData",hyglData.list)
|
||||
for(let item of listHygl.value){
|
||||
const formattedDate = formatDate2(item.createTime);
|
||||
// 如果 holidays2[formattedDate] 不存在或不是数组，初始化为数组
|
||||
if (!Array.isArray(holidays2[formattedDate])) {
|
||||
holidays2[formattedDate] = [];
|
||||
}
|
||||
// 将 title 添加到数组中
|
||||
holidays2[formattedDate].push({id:item.id,title:item.title});
|
||||
}
|
||||
console.log("holidays2",holidays2);
|
||||
} finally {
|
||||
}
|
||||
}
|
||||
// const startDate = new Date('2024-01-01');
|
||||
// const endDate = new Date('2024-12-31');
|
||||
|
||||
// for (let d = startDate; d <= endDate; d.setDate(d.getDate() + 1)) {
|
||||
// const formattedDate = d.toISOString().split('T')[0]; // 格式化日期为 YYYY-MM-DD
|
||||
// holidays2[formattedDate] = Math.floor(Math.random() * 2); // 随机生成 0 或 1
|
||||
// holidays2['2024-11-14'] = '123123123'
|
||||
// }
|
||||
|
||||
onMounted(()=> {
|
||||
handleQuery()
|
||||
})
|
||||
</script>
|
||||
.custom-calendar .el-calendar-day {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.holiday2 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #15bc83;
|
||||
font-size: 16px;
|
||||
}
|
||||
<style>
|
||||
.custom-calendar .is-today {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
.custom-calendar {
|
||||
border: 1px solid #1f1f1f !important; /* 使用 !important 确保样式生效 */
|
||||
border-radius: 5px; /* 可选：添加圆角 */
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.holiday {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
.schedule {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #CCFFCC;
|
||||
color: #3b3e55;
|
||||
font-size: 12px;
|
||||
}
|
||||
.month-title {
|
||||
text-align: center
|
||||
}
|
||||
.cl-title {
|
||||
display: inline-block;
|
||||
font-size: 12px
|
||||
}
|
||||
.header-date {
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,459 +0,0 @@
|
||||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="formData.title" placeholder="请输入标题" />
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室名" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入会议室名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室地址" prop="location">
|
||||
<el-input v-model="formData.location" type="textarea" placeholder="请输入会议室地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室类型" prop="roomType">
|
||||
<el-select v-model="formData.roomType" placeholder="请选择会议室类型">
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.HSGL_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室管理员" prop="manager">
|
||||
<el-input v-model="formData.manager" placeholder="请输入会议室管理员" />
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室大小" prop="roomMax">
|
||||
<el-input v-model="formData.roomMax" placeholder="请输入会议室大小" />
|
||||
</el-form-item>
|
||||
<el-form-item label="容纳人数" prop="capacity">
|
||||
<el-input v-model="formData.capacity" placeholder="请输入容纳人数" />
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室设备" prop="facilities">
|
||||
<el-input v-model="formData.facilities" type="textarea" placeholder="请输入会议室设备" />
|
||||
</el-form-item>
|
||||
<el-form-item label="使用状态" prop="roomStatus">
|
||||
<el-select v-model="formData.roomStatus" placeholder="请选择使用状态">
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.HSGL_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室照片" prop="photo">
|
||||
<UploadImg v-model="formData.photo" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { HysglApi, HysglVO } from '@/api/home/hysgl'
|
||||
|
||||
/** 会议室管理 表单 */
|
||||
defineOptions({ name: 'HysglForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
title: undefined,
|
||||
name: undefined,
|
||||
location: undefined,
|
||||
roomType: undefined,
|
||||
manager: undefined,
|
||||
roomMax: undefined,
|
||||
capacity: undefined,
|
||||
facilities: undefined,
|
||||
roomStatus: undefined,
|
||||
photo: undefined,
|
||||
remark: undefined,
|
||||
})
|
||||
const formRules = reactive({
|
||||
title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '会议室名不能为空', trigger: 'blur' }],
|
||||
location: [{ required: true, message: '会议室地址不能为空', trigger: 'blur' }],
|
||||
roomType: [{ required: true, message: '会议室类型不能为空', trigger: 'change' }],
|
||||
manager: [{ required: true, message: '会议室管理员不能为空', trigger: 'blur' }],
|
||||
roomStatus: [{ required: true, message: '使用状态不能为空', trigger: 'change' }],
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await HysglApi.getHysgl(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
await formRef.value.validate()
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as unknown as HysglVO
|
||||
if (formType.value === 'create') {
|
||||
await HysglApi.createHysgl(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await HysglApi.updateHysgl(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
title: undefined,
|
||||
name: undefined,
|
||||
location: undefined,
|
||||
roomType: undefined,
|
||||
manager: undefined,
|
||||
roomMax: undefined,
|
||||
capacity: undefined,
|
||||
facilities: undefined,
|
||||
roomStatus: undefined,
|
||||
photo: undefined,
|
||||
remark: undefined,
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
// --------------------------------------------------------
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="会议室管理id" prop="id">
|
||||
<el-input
|
||||
v-model="queryParams.id"
|
||||
placeholder="请输入会议室管理id"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入标题"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室名" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入会议室名"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室类型" prop="roomType">
|
||||
<el-select
|
||||
v-model="queryParams.roomType"
|
||||
placeholder="请选择会议室类型"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.HSGL_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室管理员" prop="manager">
|
||||
<el-input
|
||||
v-model="queryParams.manager"
|
||||
placeholder="请输入会议室管理员"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室大小" prop="roomMax">
|
||||
<el-input
|
||||
v-model="queryParams.roomMax"
|
||||
placeholder="请输入会议室大小"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="容纳人数" prop="capacity">
|
||||
<el-input
|
||||
v-model="queryParams.capacity"
|
||||
placeholder="请输入容纳人数"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="使用状态" prop="roomStatus">
|
||||
<el-select
|
||||
v-model="queryParams.roomStatus"
|
||||
placeholder="请选择使用状态"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.HSGL_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.createTime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['home:hysgl:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['home:hysgl:export']"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="会议室管理id" align="center" prop="id" />
|
||||
<el-table-column label="标题" align="center" prop="title" />
|
||||
<el-table-column label="会议室名" align="center" prop="name" />
|
||||
<el-table-column label="会议室地址" align="center" prop="location" />
|
||||
<el-table-column label="会议室类型" align="center" prop="roomType">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.HSGL_TYPE" :value="scope.row.roomType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="会议室管理员" align="center" prop="manager" />
|
||||
<el-table-column label="会议室大小" align="center" prop="roomMax" />
|
||||
<el-table-column label="容纳人数" align="center" prop="capacity" />
|
||||
<el-table-column label="会议室设备" align="center" prop="facilities" />
|
||||
<el-table-column label="使用状态" align="center" prop="roomStatus">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.HSGL_STATUS" :value="scope.row.roomStatus" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="会议室照片" align="center" prop="photo" >
|
||||
<template #default="scope">
|
||||
<el-image :src="scope.row.photo"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="['home:hysgl:update']"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['home:hysgl:delete']"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<HysglForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import download from '@/utils/download'
|
||||
import { HysglApi, HysglVO } from '@/api/home/hysgl'
|
||||
import HysglForm from './HysglForm.vue'
|
||||
|
||||
/** 会议室管理 列表 */
|
||||
defineOptions({ name: 'Hysgl' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<HysglVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
id: undefined,
|
||||
title: undefined,
|
||||
name: undefined,
|
||||
location: undefined,
|
||||
roomType: undefined,
|
||||
manager: undefined,
|
||||
roomMax: undefined,
|
||||
capacity: undefined,
|
||||
facilities: undefined,
|
||||
roomStatus: undefined,
|
||||
photo: undefined,
|
||||
remark: undefined,
|
||||
createTime: [],
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await HysglApi.getHysglPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await HysglApi.deleteHysgl(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
// 导出的二次确认
|
||||
await message.exportConfirm()
|
||||
// 发起导出
|
||||
exportLoading.value = true
|
||||
const data = await HysglApi.exportHysgl(queryParams)
|
||||
download.excel(data, '会议室管理.xls')
|
||||
} catch {
|
||||
} finally {
|
||||
exportLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
@ -1,543 +0,0 @@
|
||||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label="申请标题" prop="title">
|
||||
<el-input v-model="formData.title" placeholder="请输入申请标题" />
|
||||
</el-form-item>
|
||||
<el-form-item label="申请人名字" prop="userName">
|
||||
<el-input v-model="formData.userName" placeholder="请输入申请人名字" />
|
||||
</el-form-item>
|
||||
<el-form-item label="申请人id" prop="userId">
|
||||
<el-input v-model="formData.userId" placeholder="请输入申请人id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="申请部门名字" prop="deptName">
|
||||
<el-input v-model="formData.deptName" placeholder="请输入申请部门名字" />
|
||||
</el-form-item>
|
||||
<el-form-item label="申请部门id" prop="deptId">
|
||||
<el-input v-model="formData.deptId" placeholder="请输入申请部门id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="申请时间" prop="usageDate">
|
||||
<el-date-picker
|
||||
v-model="formData.usageDate"
|
||||
type="date"
|
||||
value-format="x"
|
||||
placeholder="选择申请时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="加班类型" prop="type">
|
||||
<el-select v-model="formData.type" placeholder="请选择加班类型">
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.JBGL_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="加班开始时间" prop="startDate">
|
||||
<el-date-picker
|
||||
v-model="formData.startDate"
|
||||
type="date"
|
||||
value-format="x"
|
||||
placeholder="选择加班开始时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="加班结束时间" prop="endDate">
|
||||
<el-date-picker
|
||||
v-model="formData.endDate"
|
||||
type="date"
|
||||
value-format="x"
|
||||
placeholder="选择加班结束时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="加班总时长" prop="duration">
|
||||
<el-input v-model="formData.duration" placeholder="请输入加班总时长" />
|
||||
</el-form-item>
|
||||
<el-form-item label="加班原因" prop="reason">
|
||||
<el-input v-model="formData.reason" type="textarea" placeholder="请输入加班原因" />
|
||||
</el-form-item>
|
||||
<el-form-item label="审批状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio label="1">请选择字典生成</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程实例的编号" prop="processInstanceId">
|
||||
<el-input v-model="formData.processInstanceId" placeholder="请输入流程实例的编号" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { JbglApi, JbglVO } from '@/api/home/jbgl'
|
||||
|
||||
/** 加班管理 表单 */
|
||||
defineOptions({ name: 'JbglForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
title: undefined,
|
||||
userName: undefined,
|
||||
userId: undefined,
|
||||
deptName: undefined,
|
||||
deptId: undefined,
|
||||
usageDate: undefined,
|
||||
type: undefined,
|
||||
startDate: undefined,
|
||||
endDate: undefined,
|
||||
duration: undefined,
|
||||
reason: undefined,
|
||||
status: undefined,
|
||||
processInstanceId: undefined,
|
||||
})
|
||||
const formRules = reactive({
|
||||
title: [{ required: true, message: '申请标题不能为空', trigger: 'blur' }],
|
||||
userId: [{ required: true, message: '申请人id不能为空', trigger: 'blur' }],
|
||||
deptId: [{ required: true, message: '申请部门id不能为空', trigger: 'blur' }],
|
||||
usageDate: [{ required: true, message: '申请时间不能为空', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '加班类型不能为空', trigger: 'change' }],
|
||||
startDate: [{ required: true, message: '加班开始时间不能为空', trigger: 'blur' }],
|
||||
endDate: [{ required: true, message: '加班结束时间不能为空', trigger: 'blur' }],
|
||||
duration: [{ required: true, message: '加班总时长不能为空', trigger: 'blur' }],
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await JbglApi.getJbgl(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
await formRef.value.validate()
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as unknown as JbglVO
|
||||
if (formType.value === 'create') {
|
||||
await JbglApi.createJbgl(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await JbglApi.updateJbgl(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
title: undefined,
|
||||
userName: undefined,
|
||||
userId: undefined,
|
||||
deptName: undefined,
|
||||
deptId: undefined,
|
||||
usageDate: undefined,
|
||||
type: undefined,
|
||||
startDate: undefined,
|
||||
endDate: undefined,
|
||||
duration: undefined,
|
||||
reason: undefined,
|
||||
status: undefined,
|
||||
processInstanceId: undefined,
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
|
||||
//--------------------------------------------------------------------------------------------------
|
||||
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="id" prop="id">
|
||||
<el-input
|
||||
v-model="queryParams.id"
|
||||
placeholder="请输入id"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请标题" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入申请标题"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请人名字" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入申请人名字"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请人id" prop="userId">
|
||||
<el-input
|
||||
v-model="queryParams.userId"
|
||||
placeholder="请输入申请人id"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请部门名字" prop="deptName">
|
||||
<el-input
|
||||
v-model="queryParams.deptName"
|
||||
placeholder="请输入申请部门名字"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请部门id" prop="deptId">
|
||||
<el-input
|
||||
v-model="queryParams.deptId"
|
||||
placeholder="请输入申请部门id"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请时间" prop="usageDate">
|
||||
<el-date-picker
|
||||
v-model="queryParams.usageDate"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="加班类型" prop="type">
|
||||
<el-select
|
||||
v-model="queryParams.type"
|
||||
placeholder="请选择加班类型"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.JBGL_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="加班开始时间" prop="startDate">
|
||||
<el-date-picker
|
||||
v-model="queryParams.startDate"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="加班结束时间" prop="endDate">
|
||||
<el-date-picker
|
||||
v-model="queryParams.endDate"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="加班总时长" prop="duration">
|
||||
<el-input
|
||||
v-model="queryParams.duration"
|
||||
placeholder="请输入加班总时长"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="审批状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="请选择审批状态"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option label="请选择字典生成" value="" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程实例的编号" prop="processInstanceId">
|
||||
<el-input
|
||||
v-model="queryParams.processInstanceId"
|
||||
placeholder="请输入流程实例的编号"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.createTime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['home:jbgl:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['home:jbgl:export']"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="id" align="center" prop="id" />
|
||||
<el-table-column label="申请标题" align="center" prop="title" />
|
||||
<el-table-column label="申请人名字" align="center" prop="userName" />
|
||||
<el-table-column label="申请人id" align="center" prop="userId" />
|
||||
<el-table-column label="申请部门名字" align="center" prop="deptName" />
|
||||
<el-table-column label="申请部门id" align="center" prop="deptId" />
|
||||
<el-table-column
|
||||
label="申请时间"
|
||||
align="center"
|
||||
prop="usageDate"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="加班类型" align="center" prop="type">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.JBGL_TYPE" :value="scope.row.type" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="加班开始时间"
|
||||
align="center"
|
||||
prop="startDate"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column
|
||||
label="加班结束时间"
|
||||
align="center"
|
||||
prop="endDate"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="加班总时长" align="center" prop="duration" />
|
||||
<el-table-column label="加班原因" align="center" prop="reason" />
|
||||
<el-table-column label="审批状态" align="center" prop="status" />
|
||||
<el-table-column label="流程实例的编号" align="center" prop="processInstanceId" />
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="['home:jbgl:update']"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['home:jbgl:delete']"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<JbglForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import download from '@/utils/download'
|
||||
import { JbglApi, JbglVO } from '@/api/home/jbgl'
|
||||
import JbglForm from './JbglForm.vue'
|
||||
|
||||
/** 加班管理 列表 */
|
||||
defineOptions({ name: 'Jbgl' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<JbglVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
id: undefined,
|
||||
title: undefined,
|
||||
userName: undefined,
|
||||
userId: undefined,
|
||||
deptName: undefined,
|
||||
deptId: undefined,
|
||||
usageDate: [],
|
||||
type: undefined,
|
||||
startDate: [],
|
||||
endDate: [],
|
||||
duration: undefined,
|
||||
reason: undefined,
|
||||
status: undefined,
|
||||
processInstanceId: undefined,
|
||||
createTime: [],
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await JbglApi.getJbglPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await JbglApi.deleteJbgl(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
// 导出的二次确认
|
||||
await message.exportConfirm()
|
||||
// 发起导出
|
||||
exportLoading.value = true
|
||||
const data = await JbglApi.exportJbgl(queryParams)
|
||||
download.excel(data, '加班管理.xls')
|
||||
} catch {
|
||||
} finally {
|
||||
exportLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
@ -1,160 +0,0 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<span style="font-size: 16px">创建考勤管理流程</span>
|
||||
</template>
|
||||
<el-form label-width="70">
|
||||
<el-form-item label="申请人" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入申请人名字"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请部门" prop="deptName">
|
||||
<el-input
|
||||
v-model="queryParams.deptName"
|
||||
placeholder="请输入申请部门"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请时间" prop="date">
|
||||
<el-date-picker
|
||||
v-model="queryParams.date"
|
||||
placeholder="申请时间"
|
||||
disabled
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="考勤表单">
|
||||
<el-table :data="queryParams.attendanceData" border style="width: 100%">
|
||||
<!-- 固定姓名和部门列 -->
|
||||
<el-table-column fixed prop="employeeName" label="姓名" width="100" />
|
||||
<!-- 动态生成 1-31 天的列 -->
|
||||
<el-table-column
|
||||
v-for="day in 31"
|
||||
:key="day"
|
||||
:label="day.toString()+'号'"
|
||||
width="80"
|
||||
>
|
||||
<template #default="{$index, row}">
|
||||
<span :style="{
|
||||
color
|
||||
: row.dailyStatus[day - 1] === 1 ? 'green'
|
||||
: row.dailyStatus[day - 1] === 2 ? 'orange'
|
||||
: row.dailyStatus[day - 1] === 3 ? 'yellow'
|
||||
: row.dailyStatus[day - 1] === 4 ? 'red'
|
||||
: row.dailyStatus[day - 1] === 5 ? 'lime'
|
||||
: row.dailyStatus[day - 1] === 6 ? 'violet'
|
||||
: 'gray'
|
||||
}"
|
||||
>
|
||||
<el-popover placement="bottom" width="Min" trigger="click">
|
||||
<template #reference>
|
||||
{{workType[row.dailyStatus[day - 1]]}}
|
||||
</template>
|
||||
<el-row style="padding-bottom: 5px;" :gutter="5" >
|
||||
<el-col :span="12">
|
||||
<el-button @click="changeDay($index,day,1)" color="green">上班</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button @click="changeDay($index,day,2)" color="orange">缺勤</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding-bottom: 5px;" :gutter="5" >
|
||||
<el-col :span="12">
|
||||
<el-button @click="changeDay($index,day,4)" color="lime" >加班</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button @click="changeDay($index,day,5)" color="violet" >年班</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-popover>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="工作日" prop="workDay"/>
|
||||
<el-table-column label="加班" prop="Overtime"/>
|
||||
<el-table-column label="年班" prop="yOvertime"/>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<!-- @click="submitForm"-->
|
||||
<el-button type="primary">确 定</el-button>
|
||||
</template>
|
||||
</el-card>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" >
|
||||
const workType = ref(
|
||||
{
|
||||
undefined:'选择',
|
||||
1:'正常',
|
||||
2:'缺勤',
|
||||
3:'休息',
|
||||
4:'加班',
|
||||
5:'年班',
|
||||
}
|
||||
)
|
||||
//改变状态后更改对应缩影为对应值
|
||||
const changeDay = async (index:number,day:number,val:number)=>{
|
||||
queryParams.value.attendanceData[index].dailyStatus[day - 1] = val
|
||||
await getWorkDay(index)
|
||||
}
|
||||
//根据现有索引来更新相应的加班年班
|
||||
const getWorkDay = async (index?:number)=>{
|
||||
if (index != undefined){
|
||||
const date = queryParams.value.attendanceData[index]
|
||||
date.workDay = date.dailyStatus.filter(_ => _ === 1).length
|
||||
date.Overtime = date.dailyStatus.filter(_ => _ === 4).length
|
||||
date.yOvertime = date.dailyStatus.filter(_ => _ === 5).length
|
||||
//date为引用类型所以不需要再赋值回去了
|
||||
}else {
|
||||
for (let item of queryParams.value.attendanceData){
|
||||
item.workDay = item.dailyStatus.filter(_ => _ === 1).length
|
||||
item.Overtime = item.dailyStatus.filter(_ => _ === 4).length
|
||||
item.yOvertime = item.dailyStatus.filter(_ => _ === 5).length
|
||||
}
|
||||
}
|
||||
}
|
||||
const queryParams = ref({
|
||||
userName: undefined,
|
||||
userId: undefined,
|
||||
deptName: undefined,
|
||||
deptId: undefined,
|
||||
date: new Date(),
|
||||
attendanceData: [
|
||||
{
|
||||
employeeName: "张三",
|
||||
dailyStatus: [
|
||||
1, 1, 4, 2, 2, 3, 1,
|
||||
1, 1, 1, 4, 1, 1, 1,
|
||||
1, 1, 1, 1, 3, 1, 2,
|
||||
1, 1, 1, 1, 3, 1, 1,
|
||||
2,2,2,
|
||||
],
|
||||
workDay: 0,
|
||||
Overtime: 0,
|
||||
yOvertime:0,
|
||||
},
|
||||
{
|
||||
employeeName: "李四",
|
||||
dailyStatus: [
|
||||
1, 1, 4, 2, 1, 3, 1,
|
||||
1, 1, 1, 4, 1, 1, 1,
|
||||
2, 2, 1, 1, 1, 1, 2,
|
||||
1, 1, 1, 1, 3, 1, 1,
|
||||
2,2,2,
|
||||
],
|
||||
workDay:0,
|
||||
Overtime: 0,
|
||||
yOvertime:0,
|
||||
},
|
||||
],
|
||||
})
|
||||
onMounted(async ()=>{
|
||||
await getWorkDay()
|
||||
})
|
||||
</script>
|
||||
@ -1,496 +0,0 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="id" prop="id">
|
||||
<el-input
|
||||
v-model="queryParams.id"
|
||||
placeholder="请输入id"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="员工名字" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入员工名字"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="员工id" prop="userId">
|
||||
<el-input
|
||||
v-model="queryParams.userId"
|
||||
placeholder="请输入员工id"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门名字" prop="deptName">
|
||||
<el-input
|
||||
v-model="queryParams.deptName"
|
||||
placeholder="请输入部门名字"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门id" prop="deptId">
|
||||
<el-input
|
||||
v-model="queryParams.deptId"
|
||||
placeholder="请输入部门id"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="年假总天数" prop="annualDays">
|
||||
<el-input
|
||||
v-model="queryParams.annualDays"
|
||||
placeholder="请输入年假总天数"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="已用年假天数" prop="usedDays">
|
||||
<el-input
|
||||
v-model="queryParams.usedDays"
|
||||
placeholder="请输入已用年假天数"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="剩余年假天数" prop="remainingDays">
|
||||
<el-input
|
||||
v-model="queryParams.remainingDays"
|
||||
placeholder="请输入剩余年假天数"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="年假开始日期" prop="startDate">
|
||||
<el-date-picker
|
||||
v-model="queryParams.startDate"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="年假结束日期" prop="endDate">
|
||||
<el-date-picker
|
||||
v-model="queryParams.endDate"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否锁定年假信息" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="请选择是否锁定年假信息"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.NJGL_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.createTime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['home:njgl:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['home:njgl:export']"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="序号" align="center" type="index" width="70" />
|
||||
<el-table-column label="员工名字" align="center" prop="userName" />
|
||||
<el-table-column label="员工id" align="center" prop="userId" />
|
||||
<el-table-column label="部门名字" align="center" prop="deptName" />
|
||||
<el-table-column label="部门id" align="center" prop="deptId" />
|
||||
<el-table-column label="年假总天数" align="center" prop="annualDays" />
|
||||
<el-table-column label="已用年假天数" align="center" prop="usedDays" />
|
||||
<el-table-column label="剩余年假天数" align="center" prop="remainingDays" />
|
||||
<el-table-column
|
||||
label="年假开始日期"
|
||||
align="center"
|
||||
prop="startDate"
|
||||
:formatter="dateFormatter2"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column
|
||||
label="年假结束日期"
|
||||
align="center"
|
||||
prop="endDate"
|
||||
:formatter="dateFormatter2"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="是否锁定年假信息" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.NJGL_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="['home:njgl:update']"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['home:njgl:delete']"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<NjglForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import {dateFormatter, dateFormatter2} from '@/utils/formatTime'
|
||||
import download from '@/utils/download'
|
||||
import { NjglApi, NjglVO } from '@/api/home/njgl'
|
||||
import NjglForm from './NjglForm.vue'
|
||||
|
||||
/** 年假管理 列表 */
|
||||
defineOptions({ name: 'Njgl' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<NjglVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
id: undefined,
|
||||
userName: undefined,
|
||||
userId: undefined,
|
||||
deptName: undefined,
|
||||
deptId: undefined,
|
||||
annualDays: undefined,
|
||||
usedDays: undefined,
|
||||
remainingDays: undefined,
|
||||
startDate: [],
|
||||
endDate: [],
|
||||
status: undefined,
|
||||
remark: undefined,
|
||||
createTime: []
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await NjglApi.getNjglPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await NjglApi.deleteNjgl(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
// 导出的二次确认
|
||||
await message.exportConfirm()
|
||||
// 发起导出
|
||||
exportLoading.value = true
|
||||
const data = await NjglApi.exportNjgl(queryParams)
|
||||
download.excel(data, '年假管理.xls')
|
||||
} catch {
|
||||
} finally {
|
||||
exportLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
-------------------------------------------------
|
||||
|
||||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label="员工名字" prop="userName">
|
||||
<el-input v-model="formData.userName" placeholder="请输入员工名字" />
|
||||
</el-form-item>
|
||||
<el-form-item label="员工id" prop="userId">
|
||||
<el-input v-model="formData.userId" placeholder="请输入员工id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="部门名字" prop="deptName">
|
||||
<el-input v-model="formData.deptName" placeholder="请输入部门名字" />
|
||||
</el-form-item>
|
||||
<el-form-item label="部门id" prop="deptId">
|
||||
<el-input v-model="formData.deptId" placeholder="请输入部门id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="年假总天数" prop="annualDays">
|
||||
<el-input v-model="formData.annualDays" placeholder="请输入年假总天数" />
|
||||
</el-form-item>
|
||||
<el-form-item label="已用年假天数" prop="usedDays">
|
||||
<el-input v-model="formData.usedDays" placeholder="请输入已用年假天数" />
|
||||
</el-form-item>
|
||||
<el-form-item label="剩余年假天数" prop="remainingDays">
|
||||
<el-input v-model="formData.remainingDays" placeholder="请输入剩余年假天数" />
|
||||
</el-form-item>
|
||||
<el-form-item label="年假开始日期" prop="startDate">
|
||||
<el-date-picker
|
||||
v-model="formData.startDate"
|
||||
type="date"
|
||||
value-format="x"
|
||||
placeholder="选择年假开始日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="年假结束日期" prop="endDate">
|
||||
<el-date-picker
|
||||
v-model="formData.endDate"
|
||||
type="date"
|
||||
value-format="x"
|
||||
placeholder="选择年假结束日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否锁定年假信息" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.NJGL_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { NjglApi, NjglVO } from '@/api/home/njgl'
|
||||
|
||||
/** 年假管理 表单 */
|
||||
defineOptions({ name: 'NjglForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
userName: undefined,
|
||||
userId: undefined,
|
||||
deptName: undefined,
|
||||
deptId: undefined,
|
||||
annualDays: undefined,
|
||||
usedDays: undefined,
|
||||
remainingDays: undefined,
|
||||
startDate: undefined,
|
||||
endDate: undefined,
|
||||
status: undefined,
|
||||
remark: undefined
|
||||
})
|
||||
const formRules = reactive({
|
||||
userId: [{ required: true, message: '员工id不能为空', trigger: 'blur' }],
|
||||
deptId: [{ required: true, message: '部门id不能为空', trigger: 'blur' }],
|
||||
annualDays: [{ required: true, message: '年假总天数不能为空', trigger: 'blur' }],
|
||||
usedDays: [{ required: true, message: '已用年假天数不能为空', trigger: 'blur' }],
|
||||
remainingDays: [{ required: true, message: '剩余年假天数不能为空', trigger: 'blur' }],
|
||||
startDate: [{ required: true, message: '年假开始日期不能为空', trigger: 'blur' }],
|
||||
endDate: [{ required: true, message: '年假结束日期不能为空', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '是否锁定年假信息不能为空', trigger: 'blur' }]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await NjglApi.getNjgl(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
await formRef.value.validate()
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as unknown as NjglVO
|
||||
if (formType.value === 'create') {
|
||||
await NjglApi.createNjgl(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await NjglApi.updateNjgl(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
userName: undefined,
|
||||
userId: undefined,
|
||||
deptName: undefined,
|
||||
deptId: undefined,
|
||||
annualDays: undefined,
|
||||
usedDays: undefined,
|
||||
remainingDays: undefined,
|
||||
startDate: undefined,
|
||||
endDate: undefined,
|
||||
status: undefined,
|
||||
remark: undefined
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user