50 changed files with 1821 additions and 1573 deletions
@ -1,13 +1,15 @@ |
|||
{ |
|||
"personnelId": "人员", |
|||
"personnelIdPlaceholder": "请输入人员", |
|||
"campusId": "校区", |
|||
"campusIdPlaceholder": "全部", |
|||
"performanceAmount": "绩效金额", |
|||
"performanceAmountPlaceholder": "请输入绩效金额", |
|||
"addMarketPerformance": "添加市场绩效", |
|||
"updateMarketPerformance": "编辑市场绩效", |
|||
"marketPerformanceDeleteTips": "确定要删除该数据吗？", |
|||
"startDate": "请选择开始时间", |
|||
"endDate": "请选择结束时间" |
|||
} |
|||
"personnelId":"人员", |
|||
"personnelIdPlaceholder":"请输入人员", |
|||
"campusId":"校区", |
|||
"campusIdPlaceholder":"全部", |
|||
"performanceAmount":"绩效金额", |
|||
"performanceAmountPlaceholder":"请输入绩效金额", |
|||
"createdAt":"创建时间", |
|||
"createdAtPlaceholder":"请输入创建时间", |
|||
"addMarketPerformance":"添加市场绩效", |
|||
"updateMarketPerformance":"编辑市场绩效", |
|||
"marketPerformanceDeleteTips":"确定要删除该数据吗？", |
|||
"startDate":"请选择开始时间", |
|||
"endDate":"请选择结束时间" |
|||
} |
|||
@ -1,19 +1,17 @@ |
|||
{ |
|||
"id": "关系编号", |
|||
"idPlaceholder": "请输入关系编号", |
|||
"personId": "人员或资源ID", |
|||
"personIdPlaceholder": "请输入人员或资源ID", |
|||
"personType": "人员类型: student-正式学员, customer_resource-客户资源", |
|||
"personTypePlaceholder": "请输入人员类型: student-正式学员, customer_resource-客户资源", |
|||
"scheduleId": "课程安排ID", |
|||
"scheduleIdPlaceholder": "请输入课程安排ID", |
|||
"courseDate": "上课日期", |
|||
"courseDatePlaceholder": "请输入上课日期", |
|||
"timeSlot": "上课时段", |
|||
"timeSlotPlaceholder": "请输入上课时段", |
|||
"addPersonCourseSchedule": "添加人员与课程安排关系", |
|||
"updatePersonCourseSchedule": "编辑人员与课程安排关系", |
|||
"personCourseScheduleDeleteTips": "确定要删除该数据吗？", |
|||
"startDate": "请选择开始时间", |
|||
"endDate": "请选择结束时间" |
|||
} |
|||
"personId":"资源", |
|||
"personIdPlaceholder":"全部", |
|||
"personType":"人员类型", |
|||
"personTypePlaceholder":"请输入人员类型", |
|||
"scheduleId":"课程类型", |
|||
"scheduleIdPlaceholder":"请输入课程类型", |
|||
"courseDate":"上课时间", |
|||
"courseDatePlaceholder":"请输入上课时间", |
|||
"timeSlot":"上课时段", |
|||
"timeSlotPlaceholder":"请输入上课时段", |
|||
"addPersonCourseSchedule":"添加人员与课程安排关系", |
|||
"updatePersonCourseSchedule":"编辑人员与课程安排关系", |
|||
"personCourseScheduleDeleteTips":"确定要删除该数据吗？", |
|||
"startDate":"请选择开始时间", |
|||
"endDate":"请选择结束时间" |
|||
} |
|||
@ -1,231 +1,189 @@ |
|||
<template> |
|||
<el-dialog |
|||
v-model="showDialog" |
|||
:title=" |
|||
formData.id ? t('updateMarketPerformance') : t('addMarketPerformance') |
|||
" |
|||
width="50%" |
|||
class="diy-dialog-wrap" |
|||
:destroy-on-close="true" |
|||
> |
|||
<el-form |
|||
:model="formData" |
|||
label-width="120px" |
|||
ref="formRef" |
|||
:rules="formRules" |
|||
class="page-form" |
|||
v-loading="loading" |
|||
> |
|||
<el-form-item :label="t('personnelId')"> |
|||
<el-select |
|||
class="input-width" |
|||
v-model="formData.personnel_id" |
|||
clearable |
|||
:placeholder="t('personnelIdPlaceholder')" |
|||
> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in personnelIdList" |
|||
:key="index" |
|||
:label="item['name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('campusId')"> |
|||
<el-select |
|||
class="input-width" |
|||
v-model="formData.campus_id" |
|||
clearable |
|||
:placeholder="t('campusIdPlaceholder')" |
|||
> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in campusIdList" |
|||
:key="index" |
|||
:label="item['campus_name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('performanceAmount')"> |
|||
<el-input |
|||
v-model="formData.performance_amount" |
|||
clearable |
|||
:placeholder="t('performanceAmountPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button @click="showDialog = false">{{ t('cancel') }}</el-button> |
|||
<el-button |
|||
type="primary" |
|||
:loading="loading" |
|||
@click="confirm(formRef)" |
|||
>{{ t('confirm') }}</el-button |
|||
> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, computed, watch } from 'vue' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { t } from '@/lang' |
|||
import type { FormInstance } from 'element-plus' |
|||
import { |
|||
addMarketPerformance, |
|||
editMarketPerformance, |
|||
getMarketPerformanceInfo, |
|||
getWithPersonnelList, |
|||
getWithCampusList, |
|||
} from '@/app/api/market_performance' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
personnel_id: '', |
|||
campus_id: '', |
|||
performance_amount: '', |
|||
} |
|||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
personnel_id: [ |
|||
{ required: true, message: t('personnelIdPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
campus_id: [ |
|||
{ required: true, message: t('campusIdPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
performance_amount: [ |
|||
{ |
|||
required: true, |
|||
message: t('performanceAmountPlaceholder'), |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl: FormInstance | undefined) => { |
|||
if (loading.value || !formEl) return |
|||
let save = formData.id ? editMarketPerformance : addMarketPerformance |
|||
|
|||
await formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
loading.value = true |
|||
|
|||
let data = formData |
|||
|
|||
save(data) |
|||
.then((res) => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}) |
|||
.catch((err) => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
|
|||
const personnelIdList = ref([] as any[]) |
|||
const setPersonnelIdList = async () => { |
|||
personnelIdList.value = await (await getWithPersonnelList({})).data |
|||
} |
|||
setPersonnelIdList() |
|||
const campusIdList = ref([] as any[]) |
|||
const setCampusIdList = async () => { |
|||
campusIdList.value = await (await getWithCampusList({})).data |
|||
} |
|||
setCampusIdList() |
|||
const setFormData = async (row: any = null) => { |
|||
Object.assign(formData, initialFormData) |
|||
loading.value = true |
|||
if (row) { |
|||
const data = await (await getMarketPerformanceInfo(row.id)).data |
|||
if (data) |
|||
Object.keys(formData).forEach((key: string) => { |
|||
if (data[key] != undefined) formData[key] = data[key] |
|||
}) |
|||
} |
|||
loading.value = false |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
const mobileVerify = (rule: any, value: any, callback: any) => { |
|||
if (value && !/^1[3-9]\d{9}$/.test(value)) { |
|||
callback(new Error(t('generateMobile'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证身份证号 |
|||
const idCardVerify = (rule: any, value: any, callback: any) => { |
|||
if ( |
|||
value && |
|||
!/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test( |
|||
value |
|||
) |
|||
) { |
|||
callback(new Error(t('generateIdCard'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证邮箱号 |
|||
const emailVerify = (rule: any, value: any, callback: any) => { |
|||
if (value && !/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value)) { |
|||
callback(new Error(t('generateEmail'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证请输入整数 |
|||
const numberVerify = (rule: any, value: any, callback: any) => { |
|||
if (!Number.isInteger(value)) { |
|||
callback(new Error(t('generateNumber'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
defineExpose({ |
|||
showDialog, |
|||
setFormData, |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
<style lang="scss"> |
|||
.diy-dialog-wrap .el-form-item__label { |
|||
height: auto !important; |
|||
} |
|||
</style> |
|||
<template> |
|||
<el-dialog v-model="showDialog" :title="formData.id ? t('updateMarketPerformance') : t('addMarketPerformance')" width="50%" class="diy-dialog-wrap" :destroy-on-close="true"> |
|||
<el-form :model="formData" label-width="120px" ref="formRef" :rules="formRules" class="page-form" v-loading="loading"> |
|||
<el-form-item :label="t('personnelId')" > |
|||
<el-select class="input-width" v-model="formData.personnel_id" clearable :placeholder="t('personnelIdPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in personnelIdList" |
|||
:key="index" |
|||
:label="item['name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('campusId')" > |
|||
<el-select class="input-width" v-model="formData.campus_id" clearable :placeholder="t('campusIdPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in campusIdList" |
|||
:key="index" |
|||
:label="item['campus_name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('performanceAmount')" > |
|||
<el-input v-model="formData.performance_amount" clearable :placeholder="t('performanceAmountPlaceholder')" class="input-width" /> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
|
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button @click="showDialog = false">{{ t('cancel') }}</el-button> |
|||
<el-button type="primary" :loading="loading" @click="confirm(formRef)">{{ |
|||
t('confirm') |
|||
}}</el-button> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, computed, watch } from 'vue' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { t } from '@/lang' |
|||
import type { FormInstance } from 'element-plus' |
|||
import { addMarketPerformance, editMarketPerformance, getMarketPerformanceInfo, getWithPersonnelList, getWithCampusList } from '@/app/api/market_performance' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
personnel_id: '', |
|||
campus_id: '', |
|||
performance_amount: '', |
|||
} |
|||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
personnel_id: [ |
|||
{ required: true, message: t('personnelIdPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
campus_id: [ |
|||
{ required: true, message: t('campusIdPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
performance_amount: [ |
|||
{ required: true, message: t('performanceAmountPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl: FormInstance | undefined) => { |
|||
if (loading.value || !formEl) return |
|||
let save = formData.id ? editMarketPerformance : addMarketPerformance |
|||
|
|||
await formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
loading.value = true |
|||
|
|||
let data = formData |
|||
|
|||
save(data).then(res => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}).catch(err => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
|
|||
|
|||
|
|||
const personnelIdList = ref([] as any[]) |
|||
const setPersonnelIdList = async () => { |
|||
personnelIdList.value = await (await getWithPersonnelList({})).data |
|||
} |
|||
setPersonnelIdList() |
|||
const campusIdList = ref([] as any[]) |
|||
const setCampusIdList = async () => { |
|||
campusIdList.value = await (await getWithCampusList({})).data |
|||
} |
|||
setCampusIdList() |
|||
const setFormData = async (row: any = null) => { |
|||
Object.assign(formData, initialFormData) |
|||
loading.value = true |
|||
if(row){ |
|||
const data = await (await getMarketPerformanceInfo(row.id)).data |
|||
if (data) Object.keys(formData).forEach((key: string) => { |
|||
if (data[key] != undefined) formData[key] = data[key] |
|||
}) |
|||
} |
|||
loading.value = false |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
const mobileVerify = (rule: any, value: any, callback: any) => { |
|||
if (value && !/^1[3-9]\d{9}$/.test(value)) { |
|||
callback(new Error(t('generateMobile'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证身份证号 |
|||
const idCardVerify = (rule: any, value: any, callback: any) => { |
|||
if (value && !/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)) { |
|||
callback(new Error(t('generateIdCard'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证邮箱号 |
|||
const emailVerify = (rule: any, value: any, callback: any) => { |
|||
if (value && !/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value)) { |
|||
callback(new Error(t('generateEmail'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证请输入整数 |
|||
const numberVerify = (rule: any, value: any, callback: any) => { |
|||
if (!Number.isInteger(value)) { |
|||
callback(new Error(t('generateNumber'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
defineExpose({ |
|||
showDialog, |
|||
setFormData |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
<style lang="scss"> |
|||
.diy-dialog-wrap .el-form-item__label{ |
|||
height: auto !important; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,240 +1,194 @@ |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{ pageName }}</span> |
|||
<!-- <el-button type="primary" @click="addEvent"> |
|||
{{ t('addMarketPerformance') }} |
|||
</el-button> --> |
|||
</div> |
|||
|
|||
<el-card |
|||
class="box-card !border-none my-[10px] table-search-wrap" |
|||
shadow="never" |
|||
> |
|||
<el-form |
|||
:inline="true" |
|||
:model="marketPerformanceTable.searchParam" |
|||
ref="searchFormRef" |
|||
> |
|||
<el-form-item :label="t('campusId')" prop="campus_id"> |
|||
<el-select |
|||
class="w-[280px]" |
|||
v-model="marketPerformanceTable.searchParam.campus_id" |
|||
clearable |
|||
:placeholder="t('campusIdPlaceholder')" |
|||
> |
|||
<el-option |
|||
v-for="(item, index) in campusIdList" |
|||
:key="index" |
|||
:label="item['campus_name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item |
|||
:label="t('performanceAmount')" |
|||
prop="performance_amount" |
|||
> |
|||
<el-input |
|||
v-model="marketPerformanceTable.searchParam.performance_amount" |
|||
:placeholder="t('performanceAmountPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadMarketPerformanceList()">{{ |
|||
t('search') |
|||
}}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ |
|||
t('reset') |
|||
}}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table |
|||
:data="marketPerformanceTable.data" |
|||
size="large" |
|||
v-loading="marketPerformanceTable.loading" |
|||
> |
|||
<template #empty> |
|||
<span>{{ |
|||
!marketPerformanceTable.loading ? t('emptyData') : '' |
|||
}}</span> |
|||
</template> |
|||
<el-table-column |
|||
prop="personnel_id_name" |
|||
:label="t('personnelId')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="campus_id_name" |
|||
:label="t('campusId')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="performance_amount" |
|||
:label="t('performanceAmount')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<!-- |
|||
<el-table-column :label="t('operation')" fixed="right" min-width="120"> |
|||
<template #default="{ row }"> |
|||
<el-button type="primary" link @click="editEvent(row)">{{ t('edit') }}</el-button> |
|||
<el-button type="primary" link @click="deleteEvent(row.id)">{{ t('delete') }}</el-button> |
|||
</template> |
|||
</el-table-column> --> |
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination |
|||
v-model:current-page="marketPerformanceTable.page" |
|||
v-model:page-size="marketPerformanceTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="marketPerformanceTable.total" |
|||
@size-change="loadMarketPerformanceList()" |
|||
@current-change="loadMarketPerformanceList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<edit |
|||
ref="editMarketPerformanceDialog" |
|||
@complete="loadMarketPerformanceList" |
|||
/> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { |
|||
getMarketPerformanceList, |
|||
deleteMarketPerformance, |
|||
getWithPersonnelList, |
|||
getWithCampusList, |
|||
} from '@/app/api/market_performance' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox, FormInstance } from 'element-plus' |
|||
import Edit from '@/app/views/market_performance/components/market-performance-edit.vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title |
|||
|
|||
let marketPerformanceTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam: { |
|||
campus_id: '', |
|||
performance_amount: '', |
|||
}, |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
|
|||
/** |
|||
* 获取市场绩效列表 |
|||
*/ |
|||
const loadMarketPerformanceList = (page: number = 1) => { |
|||
marketPerformanceTable.loading = true |
|||
marketPerformanceTable.page = page |
|||
|
|||
getMarketPerformanceList({ |
|||
page: marketPerformanceTable.page, |
|||
limit: marketPerformanceTable.limit, |
|||
...marketPerformanceTable.searchParam, |
|||
}) |
|||
.then((res) => { |
|||
marketPerformanceTable.loading = false |
|||
marketPerformanceTable.data = res.data.data |
|||
marketPerformanceTable.total = res.data.total |
|||
}) |
|||
.catch(() => { |
|||
marketPerformanceTable.loading = false |
|||
}) |
|||
} |
|||
loadMarketPerformanceList() |
|||
|
|||
const editMarketPerformanceDialog: Record<string, any> | null = ref(null) |
|||
|
|||
/** |
|||
* 添加市场绩效 |
|||
*/ |
|||
const addEvent = () => { |
|||
editMarketPerformanceDialog.value.setFormData() |
|||
editMarketPerformanceDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 编辑市场绩效 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
editMarketPerformanceDialog.value.setFormData(data) |
|||
editMarketPerformanceDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 删除市场绩效 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm(t('marketPerformanceDeleteTips'), t('warning'), { |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
}).then(() => { |
|||
deleteMarketPerformance(id) |
|||
.then(() => { |
|||
loadMarketPerformanceList() |
|||
}) |
|||
.catch(() => {}) |
|||
}) |
|||
} |
|||
|
|||
const personnelIdList = ref([]) |
|||
const setPersonnelIdList = async () => { |
|||
personnelIdList.value = await (await getWithPersonnelList({})).data |
|||
} |
|||
setPersonnelIdList() |
|||
const campusIdList = ref([]) |
|||
const setCampusIdList = async () => { |
|||
campusIdList.value = await (await getWithCampusList({})).data |
|||
} |
|||
setCampusIdList() |
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadMarketPerformanceList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
|
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{pageName}}</span> |
|||
<!-- <el-button type="primary" @click="addEvent"> |
|||
{{ t('addMarketPerformance') }} |
|||
</el-button> --> |
|||
</div> |
|||
|
|||
<el-card class="box-card !border-none my-[10px] table-search-wrap" shadow="never"> |
|||
<el-form :inline="true" :model="marketPerformanceTable.searchParam" ref="searchFormRef"> |
|||
|
|||
<el-form-item :label="t('campusId')" prop="campus_id"> |
|||
<el-select class="w-[280px]" v-model="marketPerformanceTable.searchParam.campus_id" clearable :placeholder="t('campusIdPlaceholder')"> |
|||
<el-option |
|||
v-for="(item, index) in campusIdList" |
|||
:key="index" |
|||
:label="item['campus_name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('performanceAmount')" prop="performance_amount"> |
|||
<el-input v-model="marketPerformanceTable.searchParam.performance_amount" :placeholder="t('performanceAmountPlaceholder')" /> |
|||
</el-form-item> |
|||
<el-form-item :label="t('createdAt')" prop="created_at"> |
|||
<el-date-picker v-model="marketPerformanceTable.searchParam.created_at" type="datetimerange" format="YYYY-MM-DD hh:mm:ss" |
|||
:start-placeholder="t('startDate')" :end-placeholder="t('endDate')" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadMarketPerformanceList()">{{ t('search') }}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ t('reset') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table :data="marketPerformanceTable.data" size="large" v-loading="marketPerformanceTable.loading"> |
|||
<template #empty> |
|||
<span>{{ !marketPerformanceTable.loading ? t('emptyData') : '' }}</span> |
|||
</template> |
|||
<el-table-column prop="personnel_id_name" :label="t('personnelId')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="campus_id_name" :label="t('campusId')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="performance_amount" :label="t('performanceAmount')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="created_at" :label="t('createdAt')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<!-- <el-table-column :label="t('operation')" fixed="right" min-width="120"> |
|||
<template #default="{ row }"> |
|||
<el-button type="primary" link @click="editEvent(row)">{{ t('edit') }}</el-button> |
|||
<el-button type="primary" link @click="deleteEvent(row.id)">{{ t('delete') }}</el-button> |
|||
</template> |
|||
</el-table-column> --> |
|||
|
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination v-model:current-page="marketPerformanceTable.page" v-model:page-size="marketPerformanceTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" :total="marketPerformanceTable.total" |
|||
@size-change="loadMarketPerformanceList()" @current-change="loadMarketPerformanceList" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<edit ref="editMarketPerformanceDialog" @complete="loadMarketPerformanceList" /> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { getMarketPerformanceList, deleteMarketPerformance, getWithPersonnelList, getWithCampusList } from '@/app/api/market_performance' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox,FormInstance } from 'element-plus' |
|||
import Edit from '@/app/views/market_performance/components/market-performance-edit.vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title; |
|||
|
|||
let marketPerformanceTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam:{ |
|||
"campus_id":"", |
|||
"performance_amount":"", |
|||
"created_at":[] |
|||
} |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
|
|||
|
|||
/** |
|||
* 获取市场绩效列表 |
|||
*/ |
|||
const loadMarketPerformanceList = (page: number = 1) => { |
|||
marketPerformanceTable.loading = true |
|||
marketPerformanceTable.page = page |
|||
|
|||
getMarketPerformanceList({ |
|||
page: marketPerformanceTable.page, |
|||
limit: marketPerformanceTable.limit, |
|||
...marketPerformanceTable.searchParam |
|||
}).then(res => { |
|||
marketPerformanceTable.loading = false |
|||
marketPerformanceTable.data = res.data.data |
|||
marketPerformanceTable.total = res.data.total |
|||
}).catch(() => { |
|||
marketPerformanceTable.loading = false |
|||
}) |
|||
} |
|||
loadMarketPerformanceList() |
|||
|
|||
const editMarketPerformanceDialog: Record<string, any> | null = ref(null) |
|||
|
|||
/** |
|||
* 添加市场绩效 |
|||
*/ |
|||
const addEvent = () => { |
|||
editMarketPerformanceDialog.value.setFormData() |
|||
editMarketPerformanceDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 编辑市场绩效 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
editMarketPerformanceDialog.value.setFormData(data) |
|||
editMarketPerformanceDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 删除市场绩效 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm(t('marketPerformanceDeleteTips'), t('warning'), |
|||
{ |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
} |
|||
).then(() => { |
|||
deleteMarketPerformance(id).then(() => { |
|||
loadMarketPerformanceList() |
|||
}).catch(() => { |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
|
|||
const personnelIdList = ref([]) |
|||
const setPersonnelIdList = async () => { |
|||
personnelIdList.value = await (await getWithPersonnelList({})).data |
|||
} |
|||
setPersonnelIdList() |
|||
const campusIdList = ref([]) |
|||
const setCampusIdList = async () => { |
|||
campusIdList.value = await (await getWithCampusList({})).data |
|||
} |
|||
setCampusIdList() |
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadMarketPerformanceList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,227 +1,209 @@ |
|||
<template> |
|||
<el-dialog |
|||
v-model="showDialog" |
|||
:title=" |
|||
formData.id |
|||
? t('updatePersonCourseSchedule') |
|||
: t('addPersonCourseSchedule') |
|||
" |
|||
width="50%" |
|||
class="diy-dialog-wrap" |
|||
:destroy-on-close="true" |
|||
> |
|||
<el-form |
|||
:model="formData" |
|||
label-width="120px" |
|||
ref="formRef" |
|||
:rules="formRules" |
|||
class="page-form" |
|||
v-loading="loading" |
|||
> |
|||
<el-form-item :label="t('personId')" prop="person_id"> |
|||
<el-input |
|||
v-model="formData.person_id" |
|||
clearable |
|||
:placeholder="t('personIdPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('personType')" prop="person_type"> |
|||
<el-input |
|||
v-model="formData.person_type" |
|||
clearable |
|||
:placeholder="t('personTypePlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('scheduleId')" prop="schedule_id"> |
|||
<el-input |
|||
v-model="formData.schedule_id" |
|||
clearable |
|||
:placeholder="t('scheduleIdPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('courseDate')" prop="course_date"> |
|||
<el-input |
|||
v-model="formData.course_date" |
|||
clearable |
|||
:placeholder="t('courseDatePlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('timeSlot')" prop="time_slot"> |
|||
<el-input |
|||
v-model="formData.time_slot" |
|||
clearable |
|||
:placeholder="t('timeSlotPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button @click="showDialog = false">{{ t('cancel') }}</el-button> |
|||
<el-button |
|||
type="primary" |
|||
:loading="loading" |
|||
@click="confirm(formRef)" |
|||
>{{ t('confirm') }}</el-button |
|||
> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, computed, watch } from 'vue' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { t } from '@/lang' |
|||
import type { FormInstance } from 'element-plus' |
|||
import { |
|||
addPersonCourseSchedule, |
|||
editPersonCourseSchedule, |
|||
getPersonCourseScheduleInfo, |
|||
} from '@/app/api/person_course_schedule' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
person_id: '', |
|||
person_type: '', |
|||
schedule_id: '', |
|||
course_date: '', |
|||
time_slot: '', |
|||
} |
|||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
person_id: [ |
|||
{ required: true, message: t('personIdPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
person_type: [ |
|||
{ required: true, message: t('personTypePlaceholder'), trigger: 'blur' }, |
|||
], |
|||
schedule_id: [ |
|||
{ required: true, message: t('scheduleIdPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
course_date: [ |
|||
{ required: true, message: t('courseDatePlaceholder'), trigger: 'blur' }, |
|||
], |
|||
time_slot: [ |
|||
{ required: true, message: t('timeSlotPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl: FormInstance | undefined) => { |
|||
if (loading.value || !formEl) return |
|||
let save = formData.id ? editPersonCourseSchedule : addPersonCourseSchedule |
|||
|
|||
await formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
loading.value = true |
|||
|
|||
let data = formData |
|||
|
|||
save(data) |
|||
.then((res) => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}) |
|||
.catch((err) => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
|
|||
const setFormData = async (row: any = null) => { |
|||
Object.assign(formData, initialFormData) |
|||
loading.value = true |
|||
if (row) { |
|||
const data = await (await getPersonCourseScheduleInfo(row.id)).data |
|||
if (data) |
|||
Object.keys(formData).forEach((key: string) => { |
|||
if (data[key] != undefined) formData[key] = data[key] |
|||
}) |
|||
} |
|||
loading.value = false |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
const mobileVerify = (rule: any, value: any, callback: any) => { |
|||
if (value && !/^1[3-9]\d{9}$/.test(value)) { |
|||
callback(new Error(t('generateMobile'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证身份证号 |
|||
const idCardVerify = (rule: any, value: any, callback: any) => { |
|||
if ( |
|||
value && |
|||
!/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test( |
|||
value |
|||
) |
|||
) { |
|||
callback(new Error(t('generateIdCard'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证邮箱号 |
|||
const emailVerify = (rule: any, value: any, callback: any) => { |
|||
if (value && !/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value)) { |
|||
callback(new Error(t('generateEmail'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证请输入整数 |
|||
const numberVerify = (rule: any, value: any, callback: any) => { |
|||
if (!Number.isInteger(value)) { |
|||
callback(new Error(t('generateNumber'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
defineExpose({ |
|||
showDialog, |
|||
setFormData, |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
<style lang="scss"> |
|||
.diy-dialog-wrap .el-form-item__label { |
|||
height: auto !important; |
|||
} |
|||
</style> |
|||
<template> |
|||
<el-dialog v-model="showDialog" :title="formData.id ? t('updatePersonCourseSchedule') : t('addPersonCourseSchedule')" width="50%" class="diy-dialog-wrap" :destroy-on-close="true"> |
|||
<el-form :model="formData" label-width="120px" ref="formRef" :rules="formRules" class="page-form" v-loading="loading"> |
|||
<el-form-item :label="t('personId')" prop="person_id"> |
|||
<el-select class="input-width" v-model="formData.person_id" clearable :placeholder="t('personIdPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in personIdList" |
|||
:key="index" |
|||
:label="item['name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('personType')" prop="person_type"> |
|||
<el-select class="input-width" v-model="formData.person_type" clearable :placeholder="t('personTypePlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in person_typeList" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('scheduleId')" prop="schedule_id"> |
|||
<el-input v-model="formData.schedule_id" clearable :placeholder="t('scheduleIdPlaceholder')" class="input-width" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('courseDate')" prop="course_date"> |
|||
<el-input v-model="formData.course_date" clearable :placeholder="t('courseDatePlaceholder')" class="input-width" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('timeSlot')" prop="time_slot"> |
|||
<el-input v-model="formData.time_slot" clearable :placeholder="t('timeSlotPlaceholder')" class="input-width" /> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
|
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button @click="showDialog = false">{{ t('cancel') }}</el-button> |
|||
<el-button type="primary" :loading="loading" @click="confirm(formRef)">{{ |
|||
t('confirm') |
|||
}}</el-button> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, computed, watch } from 'vue' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { t } from '@/lang' |
|||
import type { FormInstance } from 'element-plus' |
|||
import { addPersonCourseSchedule, editPersonCourseSchedule, getPersonCourseScheduleInfo, getWithCustomerResourcesList } from '@/app/api/person_course_schedule' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
person_id: '', |
|||
person_type: '', |
|||
schedule_id: '', |
|||
course_date: '', |
|||
time_slot: '', |
|||
} |
|||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
person_id: [ |
|||
{ required: true, message: t('personIdPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
person_type: [ |
|||
{ required: true, message: t('personTypePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
schedule_id: [ |
|||
{ required: true, message: t('scheduleIdPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
course_date: [ |
|||
{ required: true, message: t('courseDatePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
time_slot: [ |
|||
{ required: true, message: t('timeSlotPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl: FormInstance | undefined) => { |
|||
if (loading.value || !formEl) return |
|||
let save = formData.id ? editPersonCourseSchedule : addPersonCourseSchedule |
|||
|
|||
await formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
loading.value = true |
|||
|
|||
let data = formData |
|||
|
|||
save(data).then(res => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}).catch(err => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
let person_typeList = ref([]) |
|||
const person_typeDictList = async () => { |
|||
person_typeList.value = await (await useDictionary('person_type')).data.dictionary |
|||
} |
|||
person_typeDictList(); |
|||
watch(() => person_typeList.value, () => { formData.person_type = person_typeList.value[0].value }) |
|||
|
|||
|
|||
const personIdList = ref([] as any[]) |
|||
const setPersonIdList = async () => { |
|||
personIdList.value = await (await getWithCustomerResourcesList({})).data |
|||
} |
|||
setPersonIdList() |
|||
const setFormData = async (row: any = null) => { |
|||
Object.assign(formData, initialFormData) |
|||
loading.value = true |
|||
if(row){ |
|||
const data = await (await getPersonCourseScheduleInfo(row.id)).data |
|||
if (data) Object.keys(formData).forEach((key: string) => { |
|||
if (data[key] != undefined) formData[key] = data[key] |
|||
}) |
|||
} |
|||
loading.value = false |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
const mobileVerify = (rule: any, value: any, callback: any) => { |
|||
if (value && !/^1[3-9]\d{9}$/.test(value)) { |
|||
callback(new Error(t('generateMobile'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证身份证号 |
|||
const idCardVerify = (rule: any, value: any, callback: any) => { |
|||
if (value && !/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)) { |
|||
callback(new Error(t('generateIdCard'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证邮箱号 |
|||
const emailVerify = (rule: any, value: any, callback: any) => { |
|||
if (value && !/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value)) { |
|||
callback(new Error(t('generateEmail'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证请输入整数 |
|||
const numberVerify = (rule: any, value: any, callback: any) => { |
|||
if (!Number.isInteger(value)) { |
|||
callback(new Error(t('generateNumber'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
defineExpose({ |
|||
showDialog, |
|||
setFormData |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
<style lang="scss"> |
|||
.diy-dialog-wrap .el-form-item__label{ |
|||
height: auto !important; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,256 +1,213 @@ |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{ pageName }}</span> |
|||
<el-button type="primary" @click="addEvent"> |
|||
{{ t('addPersonCourseSchedule') }} |
|||
</el-button> |
|||
</div> |
|||
|
|||
<el-card |
|||
class="box-card !border-none my-[10px] table-search-wrap" |
|||
shadow="never" |
|||
> |
|||
<el-form |
|||
:inline="true" |
|||
:model="personCourseScheduleTable.searchParam" |
|||
ref="searchFormRef" |
|||
> |
|||
<el-form-item :label="t('personId')" prop="person_id"> |
|||
<el-input |
|||
v-model="personCourseScheduleTable.searchParam.person_id" |
|||
:placeholder="t('personIdPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('personType')" prop="person_type"> |
|||
<el-input |
|||
v-model="personCourseScheduleTable.searchParam.person_type" |
|||
:placeholder="t('personTypePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('scheduleId')" prop="schedule_id"> |
|||
<el-input |
|||
v-model="personCourseScheduleTable.searchParam.schedule_id" |
|||
:placeholder="t('scheduleIdPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('courseDate')" prop="course_date"> |
|||
<el-input |
|||
v-model="personCourseScheduleTable.searchParam.course_date" |
|||
:placeholder="t('courseDatePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('timeSlot')" prop="time_slot"> |
|||
<el-input |
|||
v-model="personCourseScheduleTable.searchParam.time_slot" |
|||
:placeholder="t('timeSlotPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadPersonCourseScheduleList()">{{ |
|||
t('search') |
|||
}}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ |
|||
t('reset') |
|||
}}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table |
|||
:data="personCourseScheduleTable.data" |
|||
size="large" |
|||
v-loading="personCourseScheduleTable.loading" |
|||
> |
|||
<template #empty> |
|||
<span>{{ |
|||
!personCourseScheduleTable.loading ? t('emptyData') : '' |
|||
}}</span> |
|||
</template> |
|||
<el-table-column |
|||
prop="person_id" |
|||
:label="t('personId')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="person_type" |
|||
:label="t('personType')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="schedule_id" |
|||
:label="t('scheduleId')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="course_date" |
|||
:label="t('courseDate')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="time_slot" |
|||
:label="t('timeSlot')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
:label="t('operation')" |
|||
fixed="right" |
|||
min-width="120" |
|||
> |
|||
<template #default="{ row }"> |
|||
<el-button type="primary" link @click="editEvent(row)">{{ |
|||
t('edit') |
|||
}}</el-button> |
|||
<el-button type="primary" link @click="deleteEvent(row.id)">{{ |
|||
t('delete') |
|||
}}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination |
|||
v-model:current-page="personCourseScheduleTable.page" |
|||
v-model:page-size="personCourseScheduleTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="personCourseScheduleTable.total" |
|||
@size-change="loadPersonCourseScheduleList()" |
|||
@current-change="loadPersonCourseScheduleList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<edit |
|||
ref="editPersonCourseScheduleDialog" |
|||
@complete="loadPersonCourseScheduleList" |
|||
/> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { |
|||
getPersonCourseScheduleList, |
|||
deletePersonCourseSchedule, |
|||
} from '@/app/api/person_course_schedule' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox, FormInstance } from 'element-plus' |
|||
import Edit from '@/app/views/person_course_schedule/components/person-course-schedule-edit.vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title |
|||
|
|||
let personCourseScheduleTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam: { |
|||
person_id: '', |
|||
person_type: '', |
|||
schedule_id: '', |
|||
course_date: '', |
|||
time_slot: '', |
|||
}, |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
|
|||
/** |
|||
* 获取人员与课程安排关系列表 |
|||
*/ |
|||
const loadPersonCourseScheduleList = (page: number = 1) => { |
|||
personCourseScheduleTable.loading = true |
|||
personCourseScheduleTable.page = page |
|||
|
|||
getPersonCourseScheduleList({ |
|||
page: personCourseScheduleTable.page, |
|||
limit: personCourseScheduleTable.limit, |
|||
...personCourseScheduleTable.searchParam, |
|||
}) |
|||
.then((res) => { |
|||
personCourseScheduleTable.loading = false |
|||
personCourseScheduleTable.data = res.data.data |
|||
personCourseScheduleTable.total = res.data.total |
|||
}) |
|||
.catch(() => { |
|||
personCourseScheduleTable.loading = false |
|||
}) |
|||
} |
|||
loadPersonCourseScheduleList() |
|||
|
|||
const editPersonCourseScheduleDialog: Record<string, any> | null = ref(null) |
|||
|
|||
/** |
|||
* 添加人员与课程安排关系 |
|||
*/ |
|||
const addEvent = () => { |
|||
editPersonCourseScheduleDialog.value.setFormData() |
|||
editPersonCourseScheduleDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 编辑人员与课程安排关系 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
editPersonCourseScheduleDialog.value.setFormData(data) |
|||
editPersonCourseScheduleDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 删除人员与课程安排关系 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm(t('personCourseScheduleDeleteTips'), t('warning'), { |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
}).then(() => { |
|||
deletePersonCourseSchedule(id) |
|||
.then(() => { |
|||
loadPersonCourseScheduleList() |
|||
}) |
|||
.catch(() => {}) |
|||
}) |
|||
} |
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadPersonCourseScheduleList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
|
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{pageName}}</span> |
|||
|
|||
</div> |
|||
|
|||
<el-card class="box-card !border-none my-[10px] table-search-wrap" shadow="never"> |
|||
<el-form :inline="true" :model="personCourseScheduleTable.searchParam" ref="searchFormRef"> |
|||
|
|||
<el-form-item label="资源名称" prop="name"> |
|||
<el-input v-model="personCourseScheduleTable.searchParam.name" |
|||
placeholder="请输入资源名称" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="资源手机号" prop="phone_number"> |
|||
<el-input v-model="personCourseScheduleTable.searchParam.phone_number" |
|||
placeholder="请输入资源手机号" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="校区" prop="campus_name"> |
|||
<el-input v-model="personCourseScheduleTable.searchParam.campus_name" |
|||
placeholder="请输入校区" /> |
|||
</el-form-item> |
|||
|
|||
|
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadPersonCourseScheduleList()">{{ t('search') }}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ t('reset') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table :data="personCourseScheduleTable.data" size="large" v-loading="personCourseScheduleTable.loading"> |
|||
<template #empty> |
|||
<span>{{ !personCourseScheduleTable.loading ? t('emptyData') : '' }}</span> |
|||
</template> |
|||
<el-table-column prop="name" label="资源名称" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column label="人员类型" min-width="180" align="center" :show-overflow-tooltip="true"> |
|||
<template #default="{ row }"> |
|||
<div v-for="(item, index) in person_typeList"> |
|||
<div v-if="item.value == row.person_type">{{ item.name }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="course_type" label="课程类型" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="course_date" :label="t('courseDate')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="time_slot" :label="t('timeSlot')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column :label="t('operation')" fixed="right" min-width="120"> |
|||
<template #default="{ row }"> |
|||
<el-button type="primary" link @click="deleteEvent(row.id)">请假</el-button> |
|||
<el-button type="primary" link @click="xkEvent(row.id)">消课</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination v-model:current-page="personCourseScheduleTable.page" v-model:page-size="personCourseScheduleTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" :total="personCourseScheduleTable.total" |
|||
@size-change="loadPersonCourseScheduleList()" @current-change="loadPersonCourseScheduleList" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<edit ref="editPersonCourseScheduleDialog" @complete="loadPersonCourseScheduleList" /> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { getPersonCourseScheduleList, deletePersonCourseSchedule, getWithCustomerResourcesList,xkPersonCourseSchedule} from '@/app/api/person_course_schedule' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox,FormInstance } from 'element-plus' |
|||
import Edit from '@/app/views/person_course_schedule/components/person-course-schedule-edit.vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title; |
|||
|
|||
let personCourseScheduleTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam:{ |
|||
"name":"", |
|||
"phone_number":"", |
|||
"campus_name":"" |
|||
} |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
const person_typeList = ref([] as any[]) |
|||
const person_typeDictList = async () => { |
|||
person_typeList.value = await (await useDictionary('person_type')).data.dictionary |
|||
} |
|||
person_typeDictList(); |
|||
|
|||
/** |
|||
* 获取人员与课程安排关系列表 |
|||
*/ |
|||
const loadPersonCourseScheduleList = (page: number = 1) => { |
|||
personCourseScheduleTable.loading = true |
|||
personCourseScheduleTable.page = page |
|||
|
|||
getPersonCourseScheduleList({ |
|||
page: personCourseScheduleTable.page, |
|||
limit: personCourseScheduleTable.limit, |
|||
...personCourseScheduleTable.searchParam |
|||
}).then(res => { |
|||
personCourseScheduleTable.loading = false |
|||
personCourseScheduleTable.data = res.data.data |
|||
personCourseScheduleTable.total = res.data.total |
|||
}).catch(() => { |
|||
personCourseScheduleTable.loading = false |
|||
}) |
|||
} |
|||
loadPersonCourseScheduleList() |
|||
|
|||
const editPersonCourseScheduleDialog: Record<string, any> | null = ref(null) |
|||
|
|||
/** |
|||
* 添加人员与课程安排关系 |
|||
*/ |
|||
const addEvent = () => { |
|||
editPersonCourseScheduleDialog.value.setFormData() |
|||
editPersonCourseScheduleDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 编辑人员与课程安排关系 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
editPersonCourseScheduleDialog.value.setFormData(data) |
|||
editPersonCourseScheduleDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 删除人员与课程安排关系 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm("确定请假吗", t('warning'), |
|||
{ |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
} |
|||
).then(() => { |
|||
deletePersonCourseSchedule(id).then(() => { |
|||
loadPersonCourseScheduleList() |
|||
}).catch(() => { |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
const xkEvent = (id: number) => { |
|||
ElMessageBox.confirm("确定销课吗", t('warning'), |
|||
{ |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
} |
|||
).then(() => { |
|||
xkPersonCourseSchedule(id).then(() => { |
|||
loadPersonCourseScheduleList() |
|||
}).catch(() => { |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
const personIdList = ref([]) |
|||
const setPersonIdList = async () => { |
|||
personIdList.value = await (await getWithCustomerResourcesList({})).data |
|||
} |
|||
setPersonIdList() |
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadPersonCourseScheduleList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,52 @@ |
|||
<template> |
|||
<div ref="chartRef" style="width: 100%; height: 300px;"></div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { onMounted, ref, watch } from 'vue' |
|||
import * as echarts from 'echarts' |
|||
|
|||
const props = defineProps({ |
|||
data: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}) |
|||
|
|||
const chartRef = ref(null) |
|||
let chartInstance = null |
|||
|
|||
const renderChart = () => { |
|||
if (!chartInstance) { |
|||
chartInstance = echarts.init(chartRef.value) |
|||
} |
|||
|
|||
const option = { |
|||
xAxis: { |
|||
type: 'category', |
|||
data: props.data.map(item => item.name) |
|||
}, |
|||
yAxis: { |
|||
type: 'value' |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: 'bar', |
|||
data: props.data.map(item => item.value), |
|||
itemStyle: { |
|||
color: '#3b82f6' |
|||
}, |
|||
barWidth: '40%' |
|||
} |
|||
] |
|||
} |
|||
|
|||
chartInstance.setOption(option) |
|||
} |
|||
|
|||
onMounted(() => { |
|||
renderChart() |
|||
}) |
|||
|
|||
watch(() => props.data, renderChart, { deep: true }) |
|||
</script> |
|||
@ -0,0 +1,17 @@ |
|||
<template> |
|||
<div class="bg-white rounded-lg shadow p-4 text-center"> |
|||
<div class="text-sm text-gray-500 mb-1">{{ title }}</div> |
|||
<div :class="['text-2xl font-semibold', color]">{{ value }}</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
defineProps({ |
|||
title: String, |
|||
value: String, |
|||
color: { |
|||
type: String, |
|||
default: 'text-gray-800' |
|||
} |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,69 @@ |
|||
<template> |
|||
<div ref="chartRef" style="width: 100%; height: 300px;"></div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { onMounted, ref, watch } from 'vue' |
|||
import * as echarts from 'echarts' |
|||
|
|||
const props = defineProps({ |
|||
data: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}) |
|||
|
|||
const chartRef = ref(null) |
|||
let chartInstance = null |
|||
|
|||
const renderChart = () => { |
|||
if (!chartInstance) { |
|||
chartInstance = echarts.init(chartRef.value) |
|||
} |
|||
|
|||
const option = { |
|||
tooltip: { |
|||
trigger: 'item' |
|||
}, |
|||
legend: { |
|||
bottom: 10 |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '资源来源', |
|||
type: 'pie', |
|||
radius: ['40%', '70%'], |
|||
avoidLabelOverlap: false, |
|||
itemStyle: { |
|||
borderRadius: 10, |
|||
borderColor: '#fff', |
|||
borderWidth: 2 |
|||
}, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
fontSize: '16', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
data: props.data |
|||
} |
|||
] |
|||
} |
|||
|
|||
chartInstance.setOption(option) |
|||
} |
|||
|
|||
onMounted(() => { |
|||
renderChart() |
|||
}) |
|||
|
|||
watch(() => props.data, renderChart, { deep: true }) |
|||
</script> |
|||
@ -0,0 +1,127 @@ |
|||
<template> |
|||
<div class="main-container"> |
|||
|
|||
<el-card shadow="never" class="!border-none"> |
|||
|
|||
<template #header> |
|||
<span class="text-sm text-[#a19f98]">业绩统计</span> |
|||
</template> |
|||
|
|||
<el-row :gutter="24"> |
|||
<el-col :span="4"> |
|||
<Card title="资源数量" :value="info.zysl" color="text-blue-600" /> |
|||
</el-col> |
|||
<el-col :span="5"> |
|||
<Card title="已沟通资源" :value="info.ygt" color="text-green-600" /> |
|||
</el-col> |
|||
<el-col :span="5"> |
|||
<Card title="未沟通资源" :value="info.wgt" color="text-orange-600" /> |
|||
</el-col> |
|||
<el-col :span="5"> |
|||
<Card title="市场人员数量" :value="info.scry" color="text-purple-600" /> |
|||
</el-col> |
|||
<el-col :span="5"> |
|||
<Card title="已核算绩效金额" :value="info.yhs" color="text-red-600" /> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</el-card> |
|||
|
|||
|
|||
<el-row :gutter="15" class="mt-[15px]"> |
|||
<el-col :span="24"> |
|||
<el-card shadow="never" class="!border-none"> |
|||
|
|||
<div class="flex items-center space-x-4"> |
|||
<el-date-picker |
|||
v-model="dateRange" |
|||
type="daterange" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
/> |
|||
|
|||
<el-button type="primary" @click="Init()">搜索</el-button> |
|||
<el-button @click="dateRange = []">重置</el-button> |
|||
</div> |
|||
|
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
|
|||
|
|||
<el-row :gutter="15" class="mt-[15px]"> |
|||
<el-col :span="12"> |
|||
<el-card shadow="never" class="!border-none"> |
|||
|
|||
<el-card shadow="hover"> |
|||
<h3 class="text-md font-bold mb-2">市场人员业绩统计</h3> |
|||
<BarChart :data="barData" /> |
|||
</el-card> |
|||
|
|||
</el-card> |
|||
</el-col> |
|||
|
|||
<el-col :span="12"> |
|||
<el-card shadow="never" class="!border-none"> |
|||
|
|||
<el-card shadow="hover"> |
|||
<h3 class="text-md font-bold mb-2">资源来源分布</h3> |
|||
<PieChart :data="pieData" /> |
|||
</el-card> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref,reactive } from 'vue' |
|||
import { ElDatePicker, ElButton, ElCard } from 'element-plus' |
|||
import Card from './components/Card.vue' |
|||
import BarChart from './components/BarChart.vue' |
|||
import PieChart from './components/PieChart.vue' |
|||
import { getScsjtj } from '@/app/api/sys' |
|||
|
|||
|
|||
const dateRange = ref([]) |
|||
|
|||
|
|||
const barData = ref([]) |
|||
|
|||
const pieData = ref([]) |
|||
|
|||
const info = reactive({ |
|||
zysl: 0, |
|||
ygt: 0, |
|||
wgt: 0, |
|||
scry: 0, |
|||
yhs: 0 |
|||
}) |
|||
|
|||
const Init = () => { |
|||
|
|||
getScsjtj({'dateRange':dateRange.value}) |
|||
.then((res) => { |
|||
console.log(res); |
|||
info.zysl = res.data.zysl |
|||
info.ygt = res.data.ygt |
|||
info.wgt = res.data.wgt |
|||
info.scry = res.data.scry |
|||
info.yhs = res.data.yhs |
|||
barData.value = res.data.barData |
|||
pieData.value = res.data.pieData |
|||
|
|||
}) |
|||
.catch(() => { |
|||
|
|||
}) |
|||
} |
|||
|
|||
Init(); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
</style> |
|||
Loading…
Reference in new issue