50 changed files with 1821 additions and 1573 deletions
@ -1,13 +1,15 @@ |
|||||
{ |
{ |
||||
"personnelId": "人员", |
"personnelId":"人员", |
||||
"personnelIdPlaceholder": "请输入人员", |
"personnelIdPlaceholder":"请输入人员", |
||||
"campusId": "校区", |
"campusId":"校区", |
||||
"campusIdPlaceholder": "全部", |
"campusIdPlaceholder":"全部", |
||||
"performanceAmount": "绩效金额", |
"performanceAmount":"绩效金额", |
||||
"performanceAmountPlaceholder": "请输入绩效金额", |
"performanceAmountPlaceholder":"请输入绩效金额", |
||||
"addMarketPerformance": "添加市场绩效", |
"createdAt":"创建时间", |
||||
"updateMarketPerformance": "编辑市场绩效", |
"createdAtPlaceholder":"请输入创建时间", |
||||
"marketPerformanceDeleteTips": "确定要删除该数据吗？", |
"addMarketPerformance":"添加市场绩效", |
||||
"startDate": "请选择开始时间", |
"updateMarketPerformance":"编辑市场绩效", |
||||
"endDate": "请选择结束时间" |
"marketPerformanceDeleteTips":"确定要删除该数据吗？", |
||||
} |
"startDate":"请选择开始时间", |
||||
|
"endDate":"请选择结束时间" |
||||
|
} |
||||
@ -1,19 +1,17 @@ |
|||||
{ |
{ |
||||
"id": "关系编号", |
"personId":"资源", |
||||
"idPlaceholder": "请输入关系编号", |
"personIdPlaceholder":"全部", |
||||
"personId": "人员或资源ID", |
"personType":"人员类型", |
||||
"personIdPlaceholder": "请输入人员或资源ID", |
"personTypePlaceholder":"请输入人员类型", |
||||
"personType": "人员类型: student-正式学员, customer_resource-客户资源", |
"scheduleId":"课程类型", |
||||
"personTypePlaceholder": "请输入人员类型: student-正式学员, customer_resource-客户资源", |
"scheduleIdPlaceholder":"请输入课程类型", |
||||
"scheduleId": "课程安排ID", |
"courseDate":"上课时间", |
||||
"scheduleIdPlaceholder": "请输入课程安排ID", |
"courseDatePlaceholder":"请输入上课时间", |
||||
"courseDate": "上课日期", |
"timeSlot":"上课时段", |
||||
"courseDatePlaceholder": "请输入上课日期", |
"timeSlotPlaceholder":"请输入上课时段", |
||||
"timeSlot": "上课时段", |
"addPersonCourseSchedule":"添加人员与课程安排关系", |
||||
"timeSlotPlaceholder": "请输入上课时段", |
"updatePersonCourseSchedule":"编辑人员与课程安排关系", |
||||
"addPersonCourseSchedule": "添加人员与课程安排关系", |
"personCourseScheduleDeleteTips":"确定要删除该数据吗？", |
||||
"updatePersonCourseSchedule": "编辑人员与课程安排关系", |
"startDate":"请选择开始时间", |
||||
"personCourseScheduleDeleteTips": "确定要删除该数据吗？", |
"endDate":"请选择结束时间" |
||||
"startDate": "请选择开始时间", |
} |
||||
"endDate": "请选择结束时间" |
|
||||
} |
|
||||
@ -1,231 +1,189 @@ |
|||||
<template> |
<template> |
||||
<el-dialog |
<el-dialog v-model="showDialog" :title="formData.id ? t('updateMarketPerformance') : t('addMarketPerformance')" width="50%" class="diy-dialog-wrap" :destroy-on-close="true"> |
||||
v-model="showDialog" |
<el-form :model="formData" label-width="120px" ref="formRef" :rules="formRules" class="page-form" v-loading="loading"> |
||||
:title=" |
<el-form-item :label="t('personnelId')" > |
||||
formData.id ? t('updateMarketPerformance') : t('addMarketPerformance') |
<el-select class="input-width" v-model="formData.personnel_id" clearable :placeholder="t('personnelIdPlaceholder')"> |
||||
" |
<el-option label="请选择" value=""></el-option> |
||||
width="50%" |
<el-option |
||||
class="diy-dialog-wrap" |
v-for="(item, index) in personnelIdList" |
||||
:destroy-on-close="true" |
:key="index" |
||||
> |
:label="item['name']" |
||||
<el-form |
:value="item['id']" |
||||
:model="formData" |
/> |
||||
label-width="120px" |
</el-select> |
||||
ref="formRef" |
</el-form-item> |
||||
:rules="formRules" |
|
||||
class="page-form" |
<el-form-item :label="t('campusId')" > |
||||
v-loading="loading" |
<el-select class="input-width" v-model="formData.campus_id" clearable :placeholder="t('campusIdPlaceholder')"> |
||||
> |
<el-option label="请选择" value=""></el-option> |
||||
<el-form-item :label="t('personnelId')"> |
<el-option |
||||
<el-select |
v-for="(item, index) in campusIdList" |
||||
class="input-width" |
:key="index" |
||||
v-model="formData.personnel_id" |
:label="item['campus_name']" |
||||
clearable |
:value="item['id']" |
||||
:placeholder="t('personnelIdPlaceholder')" |
/> |
||||
> |
</el-select> |
||||
<el-option label="请选择" value=""></el-option> |
</el-form-item> |
||||
<el-option |
|
||||
v-for="(item, index) in personnelIdList" |
<el-form-item :label="t('performanceAmount')" > |
||||
:key="index" |
<el-input v-model="formData.performance_amount" clearable :placeholder="t('performanceAmountPlaceholder')" class="input-width" /> |
||||
:label="item['name']" |
</el-form-item> |
||||
:value="item['id']" |
|
||||
/> |
</el-form> |
||||
</el-select> |
|
||||
</el-form-item> |
<template #footer> |
||||
|
<span class="dialog-footer"> |
||||
<el-form-item :label="t('campusId')"> |
<el-button @click="showDialog = false">{{ t('cancel') }}</el-button> |
||||
<el-select |
<el-button type="primary" :loading="loading" @click="confirm(formRef)">{{ |
||||
class="input-width" |
t('confirm') |
||||
v-model="formData.campus_id" |
}}</el-button> |
||||
clearable |
</span> |
||||
:placeholder="t('campusIdPlaceholder')" |
</template> |
||||
> |
</el-dialog> |
||||
<el-option label="请选择" value=""></el-option> |
</template> |
||||
<el-option |
|
||||
v-for="(item, index) in campusIdList" |
<script lang="ts" setup> |
||||
:key="index" |
import { ref, reactive, computed, watch } from 'vue' |
||||
:label="item['campus_name']" |
import { useDictionary } from '@/app/api/dict' |
||||
:value="item['id']" |
import { t } from '@/lang' |
||||
/> |
import type { FormInstance } from 'element-plus' |
||||
</el-select> |
import { addMarketPerformance, editMarketPerformance, getMarketPerformanceInfo, getWithPersonnelList, getWithCampusList } from '@/app/api/market_performance' |
||||
</el-form-item> |
|
||||
|
let showDialog = ref(false) |
||||
<el-form-item :label="t('performanceAmount')"> |
const loading = ref(false) |
||||
<el-input |
|
||||
v-model="formData.performance_amount" |
/** |
||||
clearable |
* 表单数据 |
||||
:placeholder="t('performanceAmountPlaceholder')" |
*/ |
||||
class="input-width" |
const initialFormData = { |
||||
/> |
id: '', |
||||
</el-form-item> |
personnel_id: '', |
||||
</el-form> |
campus_id: '', |
||||
|
performance_amount: '', |
||||
<template #footer> |
} |
||||
<span class="dialog-footer"> |
const formData: Record<string, any> = reactive({ ...initialFormData }) |
||||
<el-button @click="showDialog = false">{{ t('cancel') }}</el-button> |
|
||||
<el-button |
const formRef = ref<FormInstance>() |
||||
type="primary" |
|
||||
:loading="loading" |
// 表单验证规则 |
||||
@click="confirm(formRef)" |
const formRules = computed(() => { |
||||
>{{ t('confirm') }}</el-button |
return { |
||||
> |
personnel_id: [ |
||||
</span> |
{ required: true, message: t('personnelIdPlaceholder'), trigger: 'blur' }, |
||||
</template> |
|
||||
</el-dialog> |
] |
||||
</template> |
, |
||||
|
campus_id: [ |
||||
<script lang="ts" setup> |
{ required: true, message: t('campusIdPlaceholder'), trigger: 'blur' }, |
||||
import { ref, reactive, computed, watch } from 'vue' |
|
||||
import { useDictionary } from '@/app/api/dict' |
] |
||||
import { t } from '@/lang' |
, |
||||
import type { FormInstance } from 'element-plus' |
performance_amount: [ |
||||
import { |
{ required: true, message: t('performanceAmountPlaceholder'), trigger: 'blur' }, |
||||
addMarketPerformance, |
|
||||
editMarketPerformance, |
] |
||||
getMarketPerformanceInfo, |
, |
||||
getWithPersonnelList, |
} |
||||
getWithCampusList, |
}) |
||||
} from '@/app/api/market_performance' |
|
||||
|
const emit = defineEmits(['complete']) |
||||
let showDialog = ref(false) |
|
||||
const loading = ref(false) |
/** |
||||
|
* 确认 |
||||
/** |
* @param formEl |
||||
* 表单数据 |
*/ |
||||
*/ |
const confirm = async (formEl: FormInstance | undefined) => { |
||||
const initialFormData = { |
if (loading.value || !formEl) return |
||||
id: '', |
let save = formData.id ? editMarketPerformance : addMarketPerformance |
||||
personnel_id: '', |
|
||||
campus_id: '', |
await formEl.validate(async (valid) => { |
||||
performance_amount: '', |
if (valid) { |
||||
} |
loading.value = true |
||||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
|
||||
|
let data = formData |
||||
const formRef = ref<FormInstance>() |
|
||||
|
save(data).then(res => { |
||||
// 表单验证规则 |
loading.value = false |
||||
const formRules = computed(() => { |
showDialog.value = false |
||||
return { |
emit('complete') |
||||
personnel_id: [ |
}).catch(err => { |
||||
{ required: true, message: t('personnelIdPlaceholder'), trigger: 'blur' }, |
loading.value = false |
||||
], |
}) |
||||
campus_id: [ |
} |
||||
{ required: true, message: t('campusIdPlaceholder'), trigger: 'blur' }, |
}) |
||||
], |
} |
||||
performance_amount: [ |
|
||||
{ |
// 获取字典数据 |
||||
required: true, |
|
||||
message: t('performanceAmountPlaceholder'), |
|
||||
trigger: 'blur', |
|
||||
}, |
const personnelIdList = ref([] as any[]) |
||||
], |
const setPersonnelIdList = async () => { |
||||
} |
personnelIdList.value = await (await getWithPersonnelList({})).data |
||||
}) |
} |
||||
|
setPersonnelIdList() |
||||
const emit = defineEmits(['complete']) |
const campusIdList = ref([] as any[]) |
||||
|
const setCampusIdList = async () => { |
||||
/** |
campusIdList.value = await (await getWithCampusList({})).data |
||||
* 确认 |
} |
||||
* @param formEl |
setCampusIdList() |
||||
*/ |
const setFormData = async (row: any = null) => { |
||||
const confirm = async (formEl: FormInstance | undefined) => { |
Object.assign(formData, initialFormData) |
||||
if (loading.value || !formEl) return |
loading.value = true |
||||
let save = formData.id ? editMarketPerformance : addMarketPerformance |
if(row){ |
||||
|
const data = await (await getMarketPerformanceInfo(row.id)).data |
||||
await formEl.validate(async (valid) => { |
if (data) Object.keys(formData).forEach((key: string) => { |
||||
if (valid) { |
if (data[key] != undefined) formData[key] = data[key] |
||||
loading.value = true |
}) |
||||
|
} |
||||
let data = formData |
loading.value = false |
||||
|
} |
||||
save(data) |
|
||||
.then((res) => { |
// 验证手机号格式 |
||||
loading.value = false |
const mobileVerify = (rule: any, value: any, callback: any) => { |
||||
showDialog.value = false |
if (value && !/^1[3-9]\d{9}$/.test(value)) { |
||||
emit('complete') |
callback(new Error(t('generateMobile'))) |
||||
}) |
} else { |
||||
.catch((err) => { |
callback() |
||||
loading.value = false |
} |
||||
}) |
} |
||||
} |
|
||||
}) |
// 验证身份证号 |
||||
} |
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 { |
||||
const personnelIdList = ref([] as any[]) |
callback() |
||||
const setPersonnelIdList = async () => { |
} |
||||
personnelIdList.value = await (await getWithPersonnelList({})).data |
} |
||||
} |
|
||||
setPersonnelIdList() |
// 验证邮箱号 |
||||
const campusIdList = ref([] as any[]) |
const emailVerify = (rule: any, value: any, callback: any) => { |
||||
const setCampusIdList = async () => { |
if (value && !/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value)) { |
||||
campusIdList.value = await (await getWithCampusList({})).data |
callback(new Error(t('generateEmail'))) |
||||
} |
} else { |
||||
setCampusIdList() |
callback() |
||||
const setFormData = async (row: any = null) => { |
} |
||||
Object.assign(formData, initialFormData) |
} |
||||
loading.value = true |
|
||||
if (row) { |
// 验证请输入整数 |
||||
const data = await (await getMarketPerformanceInfo(row.id)).data |
const numberVerify = (rule: any, value: any, callback: any) => { |
||||
if (data) |
if (!Number.isInteger(value)) { |
||||
Object.keys(formData).forEach((key: string) => { |
callback(new Error(t('generateNumber'))) |
||||
if (data[key] != undefined) formData[key] = data[key] |
} else { |
||||
}) |
callback() |
||||
} |
} |
||||
loading.value = false |
} |
||||
} |
|
||||
|
defineExpose({ |
||||
// 验证手机号格式 |
showDialog, |
||||
const mobileVerify = (rule: any, value: any, callback: any) => { |
setFormData |
||||
if (value && !/^1[3-9]\d{9}$/.test(value)) { |
}) |
||||
callback(new Error(t('generateMobile'))) |
</script> |
||||
} else { |
|
||||
callback() |
<style lang="scss" scoped></style> |
||||
} |
<style lang="scss"> |
||||
} |
.diy-dialog-wrap .el-form-item__label{ |
||||
|
height: auto !important; |
||||
// 验证身份证号 |
} |
||||
const idCardVerify = (rule: any, value: any, callback: any) => { |
</style> |
||||
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> |
<template> |
||||
<div class="main-container"> |
<div class="main-container"> |
||||
<el-card class="box-card !border-none" shadow="never"> |
<el-card class="box-card !border-none" shadow="never"> |
||||
<div class="flex justify-between items-center"> |
|
||||
<span class="text-lg">{{ pageName }}</span> |
<div class="flex justify-between items-center"> |
||||
<!-- <el-button type="primary" @click="addEvent"> |
<span class="text-lg">{{pageName}}</span> |
||||
{{ t('addMarketPerformance') }} |
<!-- <el-button type="primary" @click="addEvent"> |
||||
</el-button> --> |
{{ t('addMarketPerformance') }} |
||||
</div> |
</el-button> --> |
||||
|
</div> |
||||
<el-card |
|
||||
class="box-card !border-none my-[10px] table-search-wrap" |
<el-card class="box-card !border-none my-[10px] table-search-wrap" shadow="never"> |
||||
shadow="never" |
<el-form :inline="true" :model="marketPerformanceTable.searchParam" ref="searchFormRef"> |
||||
> |
|
||||
<el-form |
<el-form-item :label="t('campusId')" prop="campus_id"> |
||||
:inline="true" |
<el-select class="w-[280px]" v-model="marketPerformanceTable.searchParam.campus_id" clearable :placeholder="t('campusIdPlaceholder')"> |
||||
:model="marketPerformanceTable.searchParam" |
<el-option |
||||
ref="searchFormRef" |
v-for="(item, index) in campusIdList" |
||||
> |
:key="index" |
||||
<el-form-item :label="t('campusId')" prop="campus_id"> |
:label="item['campus_name']" |
||||
<el-select |
:value="item['id']" |
||||
class="w-[280px]" |
/> |
||||
v-model="marketPerformanceTable.searchParam.campus_id" |
</el-select> |
||||
clearable |
</el-form-item> |
||||
:placeholder="t('campusIdPlaceholder')" |
|
||||
> |
<el-form-item :label="t('performanceAmount')" prop="performance_amount"> |
||||
<el-option |
<el-input v-model="marketPerformanceTable.searchParam.performance_amount" :placeholder="t('performanceAmountPlaceholder')" /> |
||||
v-for="(item, index) in campusIdList" |
</el-form-item> |
||||
:key="index" |
<el-form-item :label="t('createdAt')" prop="created_at"> |
||||
:label="item['campus_name']" |
<el-date-picker v-model="marketPerformanceTable.searchParam.created_at" type="datetimerange" format="YYYY-MM-DD hh:mm:ss" |
||||
:value="item['id']" |
:start-placeholder="t('startDate')" :end-placeholder="t('endDate')" /> |
||||
/> |
</el-form-item> |
||||
</el-select> |
|
||||
</el-form-item> |
<el-form-item> |
||||
|
<el-button type="primary" @click="loadMarketPerformanceList()">{{ t('search') }}</el-button> |
||||
<el-form-item |
<el-button @click="resetForm(searchFormRef)">{{ t('reset') }}</el-button> |
||||
:label="t('performanceAmount')" |
</el-form-item> |
||||
prop="performance_amount" |
</el-form> |
||||
> |
</el-card> |
||||
<el-input |
|
||||
v-model="marketPerformanceTable.searchParam.performance_amount" |
<div class="mt-[10px]"> |
||||
:placeholder="t('performanceAmountPlaceholder')" |
<el-table :data="marketPerformanceTable.data" size="large" v-loading="marketPerformanceTable.loading"> |
||||
/> |
<template #empty> |
||||
</el-form-item> |
<span>{{ !marketPerformanceTable.loading ? t('emptyData') : '' }}</span> |
||||
|
</template> |
||||
<el-form-item> |
<el-table-column prop="personnel_id_name" :label="t('personnelId')" min-width="120" :show-overflow-tooltip="true"/> |
||||
<el-button type="primary" @click="loadMarketPerformanceList()">{{ |
|
||||
t('search') |
<el-table-column prop="campus_id_name" :label="t('campusId')" min-width="120" :show-overflow-tooltip="true"/> |
||||
}}</el-button> |
|
||||
<el-button @click="resetForm(searchFormRef)">{{ |
<el-table-column prop="performance_amount" :label="t('performanceAmount')" min-width="120" :show-overflow-tooltip="true"/> |
||||
t('reset') |
|
||||
}}</el-button> |
<el-table-column prop="created_at" :label="t('createdAt')" min-width="120" :show-overflow-tooltip="true"/> |
||||
</el-form-item> |
|
||||
</el-form> |
<!-- <el-table-column :label="t('operation')" fixed="right" min-width="120"> |
||||
</el-card> |
<template #default="{ row }"> |
||||
|
<el-button type="primary" link @click="editEvent(row)">{{ t('edit') }}</el-button> |
||||
<div class="mt-[10px]"> |
<el-button type="primary" link @click="deleteEvent(row.id)">{{ t('delete') }}</el-button> |
||||
<el-table |
</template> |
||||
:data="marketPerformanceTable.data" |
</el-table-column> --> |
||||
size="large" |
|
||||
v-loading="marketPerformanceTable.loading" |
</el-table> |
||||
> |
<div class="mt-[16px] flex justify-end"> |
||||
<template #empty> |
<el-pagination v-model:current-page="marketPerformanceTable.page" v-model:page-size="marketPerformanceTable.limit" |
||||
<span>{{ |
layout="total, sizes, prev, pager, next, jumper" :total="marketPerformanceTable.total" |
||||
!marketPerformanceTable.loading ? t('emptyData') : '' |
@size-change="loadMarketPerformanceList()" @current-change="loadMarketPerformanceList" /> |
||||
}}</span> |
</div> |
||||
</template> |
</div> |
||||
<el-table-column |
|
||||
prop="personnel_id_name" |
<edit ref="editMarketPerformanceDialog" @complete="loadMarketPerformanceList" /> |
||||
:label="t('personnelId')" |
</el-card> |
||||
min-width="120" |
</div> |
||||
:show-overflow-tooltip="true" |
</template> |
||||
/> |
|
||||
|
<script lang="ts" setup> |
||||
<el-table-column |
import { reactive, ref, watch } from 'vue' |
||||
prop="campus_id_name" |
import { t } from '@/lang' |
||||
:label="t('campusId')" |
import { useDictionary } from '@/app/api/dict' |
||||
min-width="120" |
import { getMarketPerformanceList, deleteMarketPerformance, getWithPersonnelList, getWithCampusList } from '@/app/api/market_performance' |
||||
:show-overflow-tooltip="true" |
import { img } from '@/utils/common' |
||||
/> |
import { ElMessageBox,FormInstance } from 'element-plus' |
||||
|
import Edit from '@/app/views/market_performance/components/market-performance-edit.vue' |
||||
<el-table-column |
import { useRoute } from 'vue-router' |
||||
prop="performance_amount" |
const route = useRoute() |
||||
:label="t('performanceAmount')" |
const pageName = route.meta.title; |
||||
min-width="120" |
|
||||
:show-overflow-tooltip="true" |
let marketPerformanceTable = reactive({ |
||||
/> |
page: 1, |
||||
|
limit: 10, |
||||
<!-- |
total: 0, |
||||
<el-table-column :label="t('operation')" fixed="right" min-width="120"> |
loading: true, |
||||
<template #default="{ row }"> |
data: [], |
||||
<el-button type="primary" link @click="editEvent(row)">{{ t('edit') }}</el-button> |
searchParam:{ |
||||
<el-button type="primary" link @click="deleteEvent(row.id)">{{ t('delete') }}</el-button> |
"campus_id":"", |
||||
</template> |
"performance_amount":"", |
||||
</el-table-column> --> |
"created_at":[] |
||||
</el-table> |
} |
||||
<div class="mt-[16px] flex justify-end"> |
}) |
||||
<el-pagination |
|
||||
v-model:current-page="marketPerformanceTable.page" |
const searchFormRef = ref<FormInstance>() |
||||
v-model:page-size="marketPerformanceTable.limit" |
|
||||
layout="total, sizes, prev, pager, next, jumper" |
// 选中数据 |
||||
:total="marketPerformanceTable.total" |
const selectData = ref<any[]>([]) |
||||
@size-change="loadMarketPerformanceList()" |
|
||||
@current-change="loadMarketPerformanceList" |
// 字典数据 |
||||
/> |
|
||||
</div> |
|
||||
</div> |
/** |
||||
|
* 获取市场绩效列表 |
||||
<edit |
*/ |
||||
ref="editMarketPerformanceDialog" |
const loadMarketPerformanceList = (page: number = 1) => { |
||||
@complete="loadMarketPerformanceList" |
marketPerformanceTable.loading = true |
||||
/> |
marketPerformanceTable.page = page |
||||
</el-card> |
|
||||
</div> |
getMarketPerformanceList({ |
||||
</template> |
page: marketPerformanceTable.page, |
||||
|
limit: marketPerformanceTable.limit, |
||||
<script lang="ts" setup> |
...marketPerformanceTable.searchParam |
||||
import { reactive, ref, watch } from 'vue' |
}).then(res => { |
||||
import { t } from '@/lang' |
marketPerformanceTable.loading = false |
||||
import { useDictionary } from '@/app/api/dict' |
marketPerformanceTable.data = res.data.data |
||||
import { |
marketPerformanceTable.total = res.data.total |
||||
getMarketPerformanceList, |
}).catch(() => { |
||||
deleteMarketPerformance, |
marketPerformanceTable.loading = false |
||||
getWithPersonnelList, |
}) |
||||
getWithCampusList, |
} |
||||
} from '@/app/api/market_performance' |
loadMarketPerformanceList() |
||||
import { img } from '@/utils/common' |
|
||||
import { ElMessageBox, FormInstance } from 'element-plus' |
const editMarketPerformanceDialog: Record<string, any> | null = ref(null) |
||||
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 |
*/ |
||||
|
const addEvent = () => { |
||||
let marketPerformanceTable = reactive({ |
editMarketPerformanceDialog.value.setFormData() |
||||
page: 1, |
editMarketPerformanceDialog.value.showDialog = true |
||||
limit: 10, |
} |
||||
total: 0, |
|
||||
loading: true, |
/** |
||||
data: [], |
* 编辑市场绩效 |
||||
searchParam: { |
* @param data |
||||
campus_id: '', |
*/ |
||||
performance_amount: '', |
const editEvent = (data: any) => { |
||||
}, |
editMarketPerformanceDialog.value.setFormData(data) |
||||
}) |
editMarketPerformanceDialog.value.showDialog = true |
||||
|
} |
||||
const searchFormRef = ref<FormInstance>() |
|
||||
|
/** |
||||
// 选中数据 |
* 删除市场绩效 |
||||
const selectData = ref<any[]>([]) |
*/ |
||||
|
const deleteEvent = (id: number) => { |
||||
// 字典数据 |
ElMessageBox.confirm(t('marketPerformanceDeleteTips'), t('warning'), |
||||
|
{ |
||||
/** |
confirmButtonText: t('confirm'), |
||||
* 获取市场绩效列表 |
cancelButtonText: t('cancel'), |
||||
*/ |
type: 'warning', |
||||
const loadMarketPerformanceList = (page: number = 1) => { |
} |
||||
marketPerformanceTable.loading = true |
).then(() => { |
||||
marketPerformanceTable.page = page |
deleteMarketPerformance(id).then(() => { |
||||
|
loadMarketPerformanceList() |
||||
getMarketPerformanceList({ |
}).catch(() => { |
||||
page: marketPerformanceTable.page, |
}) |
||||
limit: marketPerformanceTable.limit, |
}) |
||||
...marketPerformanceTable.searchParam, |
} |
||||
}) |
|
||||
.then((res) => { |
|
||||
marketPerformanceTable.loading = false |
const personnelIdList = ref([]) |
||||
marketPerformanceTable.data = res.data.data |
const setPersonnelIdList = async () => { |
||||
marketPerformanceTable.total = res.data.total |
personnelIdList.value = await (await getWithPersonnelList({})).data |
||||
}) |
} |
||||
.catch(() => { |
setPersonnelIdList() |
||||
marketPerformanceTable.loading = false |
const campusIdList = ref([]) |
||||
}) |
const setCampusIdList = async () => { |
||||
} |
campusIdList.value = await (await getWithCampusList({})).data |
||||
loadMarketPerformanceList() |
} |
||||
|
setCampusIdList() |
||||
const editMarketPerformanceDialog: Record<string, any> | null = ref(null) |
|
||||
|
const resetForm = (formEl: FormInstance | undefined) => { |
||||
/** |
if (!formEl) return |
||||
* 添加市场绩效 |
formEl.resetFields() |
||||
*/ |
loadMarketPerformanceList() |
||||
const addEvent = () => { |
} |
||||
editMarketPerformanceDialog.value.setFormData() |
</script> |
||||
editMarketPerformanceDialog.value.showDialog = true |
|
||||
} |
<style lang="scss" scoped> |
||||
|
/* 多行超出隐藏 */ |
||||
/** |
.multi-hidden { |
||||
* 编辑市场绩效 |
word-break: break-all; |
||||
* @param data |
text-overflow: ellipsis; |
||||
*/ |
overflow: hidden; |
||||
const editEvent = (data: any) => { |
display: -webkit-box; |
||||
editMarketPerformanceDialog.value.setFormData(data) |
-webkit-line-clamp: 2; |
||||
editMarketPerformanceDialog.value.showDialog = true |
-webkit-box-orient: vertical; |
||||
} |
} |
||||
|
</style> |
||||
/** |
|
||||
* 删除市场绩效 |
|
||||
*/ |
|
||||
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> |
<template> |
||||
<el-dialog |
<el-dialog v-model="showDialog" :title="formData.id ? t('updatePersonCourseSchedule') : t('addPersonCourseSchedule')" width="50%" class="diy-dialog-wrap" :destroy-on-close="true"> |
||||
v-model="showDialog" |
<el-form :model="formData" label-width="120px" ref="formRef" :rules="formRules" class="page-form" v-loading="loading"> |
||||
:title=" |
<el-form-item :label="t('personId')" prop="person_id"> |
||||
formData.id |
<el-select class="input-width" v-model="formData.person_id" clearable :placeholder="t('personIdPlaceholder')"> |
||||
? t('updatePersonCourseSchedule') |
<el-option label="请选择" value=""></el-option> |
||||
: t('addPersonCourseSchedule') |
<el-option |
||||
" |
v-for="(item, index) in personIdList" |
||||
width="50%" |
:key="index" |
||||
class="diy-dialog-wrap" |
:label="item['name']" |
||||
:destroy-on-close="true" |
:value="item['id']" |
||||
> |
/> |
||||
<el-form |
</el-select> |
||||
:model="formData" |
</el-form-item> |
||||
label-width="120px" |
|
||||
ref="formRef" |
<el-form-item :label="t('personType')" prop="person_type"> |
||||
:rules="formRules" |
<el-select class="input-width" v-model="formData.person_type" clearable :placeholder="t('personTypePlaceholder')"> |
||||
class="page-form" |
<el-option label="请选择" value=""></el-option> |
||||
v-loading="loading" |
<el-option |
||||
> |
v-for="(item, index) in person_typeList" |
||||
<el-form-item :label="t('personId')" prop="person_id"> |
:key="index" |
||||
<el-input |
:label="item.name" |
||||
v-model="formData.person_id" |
:value="item.value" |
||||
clearable |
/> |
||||
:placeholder="t('personIdPlaceholder')" |
</el-select> |
||||
class="input-width" |
</el-form-item> |
||||
/> |
|
||||
</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 :label="t('personType')" prop="person_type"> |
</el-form-item> |
||||
<el-input |
|
||||
v-model="formData.person_type" |
<el-form-item :label="t('courseDate')" prop="course_date"> |
||||
clearable |
<el-input v-model="formData.course_date" clearable :placeholder="t('courseDatePlaceholder')" class="input-width" /> |
||||
:placeholder="t('personTypePlaceholder')" |
</el-form-item> |
||||
class="input-width" |
|
||||
/> |
<el-form-item :label="t('timeSlot')" prop="time_slot"> |
||||
</el-form-item> |
<el-input v-model="formData.time_slot" clearable :placeholder="t('timeSlotPlaceholder')" class="input-width" /> |
||||
|
</el-form-item> |
||||
<el-form-item :label="t('scheduleId')" prop="schedule_id"> |
|
||||
<el-input |
</el-form> |
||||
v-model="formData.schedule_id" |
|
||||
clearable |
<template #footer> |
||||
:placeholder="t('scheduleIdPlaceholder')" |
<span class="dialog-footer"> |
||||
class="input-width" |
<el-button @click="showDialog = false">{{ t('cancel') }}</el-button> |
||||
/> |
<el-button type="primary" :loading="loading" @click="confirm(formRef)">{{ |
||||
</el-form-item> |
t('confirm') |
||||
|
}}</el-button> |
||||
<el-form-item :label="t('courseDate')" prop="course_date"> |
</span> |
||||
<el-input |
</template> |
||||
v-model="formData.course_date" |
</el-dialog> |
||||
clearable |
</template> |
||||
:placeholder="t('courseDatePlaceholder')" |
|
||||
class="input-width" |
<script lang="ts" setup> |
||||
/> |
import { ref, reactive, computed, watch } from 'vue' |
||||
</el-form-item> |
import { useDictionary } from '@/app/api/dict' |
||||
|
import { t } from '@/lang' |
||||
<el-form-item :label="t('timeSlot')" prop="time_slot"> |
import type { FormInstance } from 'element-plus' |
||||
<el-input |
import { addPersonCourseSchedule, editPersonCourseSchedule, getPersonCourseScheduleInfo, getWithCustomerResourcesList } from '@/app/api/person_course_schedule' |
||||
v-model="formData.time_slot" |
|
||||
clearable |
let showDialog = ref(false) |
||||
:placeholder="t('timeSlotPlaceholder')" |
const loading = ref(false) |
||||
class="input-width" |
|
||||
/> |
/** |
||||
</el-form-item> |
* 表单数据 |
||||
</el-form> |
*/ |
||||
|
const initialFormData = { |
||||
<template #footer> |
id: '', |
||||
<span class="dialog-footer"> |
person_id: '', |
||||
<el-button @click="showDialog = false">{{ t('cancel') }}</el-button> |
person_type: '', |
||||
<el-button |
schedule_id: '', |
||||
type="primary" |
course_date: '', |
||||
:loading="loading" |
time_slot: '', |
||||
@click="confirm(formRef)" |
} |
||||
>{{ t('confirm') }}</el-button |
const formData: Record<string, any> = reactive({ ...initialFormData }) |
||||
> |
|
||||
</span> |
const formRef = ref<FormInstance>() |
||||
</template> |
|
||||
</el-dialog> |
// 表单验证规则 |
||||
</template> |
const formRules = computed(() => { |
||||
|
return { |
||||
<script lang="ts" setup> |
person_id: [ |
||||
import { ref, reactive, computed, watch } from 'vue' |
{ required: true, message: t('personIdPlaceholder'), trigger: 'blur' }, |
||||
import { useDictionary } from '@/app/api/dict' |
|
||||
import { t } from '@/lang' |
] |
||||
import type { FormInstance } from 'element-plus' |
, |
||||
import { |
person_type: [ |
||||
addPersonCourseSchedule, |
{ required: true, message: t('personTypePlaceholder'), trigger: 'blur' }, |
||||
editPersonCourseSchedule, |
|
||||
getPersonCourseScheduleInfo, |
] |
||||
} from '@/app/api/person_course_schedule' |
, |
||||
|
schedule_id: [ |
||||
let showDialog = ref(false) |
{ required: true, message: t('scheduleIdPlaceholder'), trigger: 'blur' }, |
||||
const loading = ref(false) |
|
||||
|
] |
||||
/** |
, |
||||
* 表单数据 |
course_date: [ |
||||
*/ |
{ required: true, message: t('courseDatePlaceholder'), trigger: 'blur' }, |
||||
const initialFormData = { |
|
||||
id: '', |
] |
||||
person_id: '', |
, |
||||
person_type: '', |
time_slot: [ |
||||
schedule_id: '', |
{ required: true, message: t('timeSlotPlaceholder'), trigger: 'blur' }, |
||||
course_date: '', |
|
||||
time_slot: '', |
] |
||||
} |
, |
||||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
} |
||||
|
}) |
||||
const formRef = ref<FormInstance>() |
|
||||
|
const emit = defineEmits(['complete']) |
||||
// 表单验证规则 |
|
||||
const formRules = computed(() => { |
/** |
||||
return { |
* 确认 |
||||
person_id: [ |
* @param formEl |
||||
{ required: true, message: t('personIdPlaceholder'), trigger: 'blur' }, |
*/ |
||||
], |
const confirm = async (formEl: FormInstance | undefined) => { |
||||
person_type: [ |
if (loading.value || !formEl) return |
||||
{ required: true, message: t('personTypePlaceholder'), trigger: 'blur' }, |
let save = formData.id ? editPersonCourseSchedule : addPersonCourseSchedule |
||||
], |
|
||||
schedule_id: [ |
await formEl.validate(async (valid) => { |
||||
{ required: true, message: t('scheduleIdPlaceholder'), trigger: 'blur' }, |
if (valid) { |
||||
], |
loading.value = true |
||||
course_date: [ |
|
||||
{ required: true, message: t('courseDatePlaceholder'), trigger: 'blur' }, |
let data = formData |
||||
], |
|
||||
time_slot: [ |
save(data).then(res => { |
||||
{ required: true, message: t('timeSlotPlaceholder'), trigger: 'blur' }, |
loading.value = false |
||||
], |
showDialog.value = false |
||||
} |
emit('complete') |
||||
}) |
}).catch(err => { |
||||
|
loading.value = false |
||||
const emit = defineEmits(['complete']) |
}) |
||||
|
} |
||||
/** |
}) |
||||
* 确认 |
} |
||||
* @param formEl |
|
||||
*/ |
// 获取字典数据 |
||||
const confirm = async (formEl: FormInstance | undefined) => { |
let person_typeList = ref([]) |
||||
if (loading.value || !formEl) return |
const person_typeDictList = async () => { |
||||
let save = formData.id ? editPersonCourseSchedule : addPersonCourseSchedule |
person_typeList.value = await (await useDictionary('person_type')).data.dictionary |
||||
|
} |
||||
await formEl.validate(async (valid) => { |
person_typeDictList(); |
||||
if (valid) { |
watch(() => person_typeList.value, () => { formData.person_type = person_typeList.value[0].value }) |
||||
loading.value = true |
|
||||
|
|
||||
let data = formData |
const personIdList = ref([] as any[]) |
||||
|
const setPersonIdList = async () => { |
||||
save(data) |
personIdList.value = await (await getWithCustomerResourcesList({})).data |
||||
.then((res) => { |
} |
||||
loading.value = false |
setPersonIdList() |
||||
showDialog.value = false |
const setFormData = async (row: any = null) => { |
||||
emit('complete') |
Object.assign(formData, initialFormData) |
||||
}) |
loading.value = true |
||||
.catch((err) => { |
if(row){ |
||||
loading.value = false |
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 setFormData = async (row: any = null) => { |
// 验证手机号格式 |
||||
Object.assign(formData, initialFormData) |
const mobileVerify = (rule: any, value: any, callback: any) => { |
||||
loading.value = true |
if (value && !/^1[3-9]\d{9}$/.test(value)) { |
||||
if (row) { |
callback(new Error(t('generateMobile'))) |
||||
const data = await (await getPersonCourseScheduleInfo(row.id)).data |
} else { |
||||
if (data) |
callback() |
||||
Object.keys(formData).forEach((key: string) => { |
} |
||||
if (data[key] != undefined) formData[key] = data[key] |
} |
||||
}) |
|
||||
} |
// 验证身份证号 |
||||
loading.value = false |
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 { |
||||
const mobileVerify = (rule: any, value: any, callback: any) => { |
callback() |
||||
if (value && !/^1[3-9]\d{9}$/.test(value)) { |
} |
||||
callback(new Error(t('generateMobile'))) |
} |
||||
} 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 { |
||||
const idCardVerify = (rule: any, value: any, callback: any) => { |
callback() |
||||
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 |
// 验证请输入整数 |
||||
) |
const numberVerify = (rule: any, value: any, callback: any) => { |
||||
) { |
if (!Number.isInteger(value)) { |
||||
callback(new Error(t('generateIdCard'))) |
callback(new Error(t('generateNumber'))) |
||||
} else { |
} else { |
||||
callback() |
callback() |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
// 验证邮箱号 |
defineExpose({ |
||||
const emailVerify = (rule: any, value: any, callback: any) => { |
showDialog, |
||||
if (value && !/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value)) { |
setFormData |
||||
callback(new Error(t('generateEmail'))) |
}) |
||||
} else { |
</script> |
||||
callback() |
|
||||
} |
<style lang="scss" scoped></style> |
||||
} |
<style lang="scss"> |
||||
|
.diy-dialog-wrap .el-form-item__label{ |
||||
// 验证请输入整数 |
height: auto !important; |
||||
const numberVerify = (rule: any, value: any, callback: any) => { |
} |
||||
if (!Number.isInteger(value)) { |
</style> |
||||
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> |
<template> |
||||
<div class="main-container"> |
<div class="main-container"> |
||||
<el-card class="box-card !border-none" shadow="never"> |
<el-card class="box-card !border-none" shadow="never"> |
||||
<div class="flex justify-between items-center"> |
|
||||
<span class="text-lg">{{ pageName }}</span> |
<div class="flex justify-between items-center"> |
||||
<el-button type="primary" @click="addEvent"> |
<span class="text-lg">{{pageName}}</span> |
||||
{{ t('addPersonCourseSchedule') }} |
|
||||
</el-button> |
</div> |
||||
</div> |
|
||||
|
<el-card class="box-card !border-none my-[10px] table-search-wrap" shadow="never"> |
||||
<el-card |
<el-form :inline="true" :model="personCourseScheduleTable.searchParam" ref="searchFormRef"> |
||||
class="box-card !border-none my-[10px] table-search-wrap" |
|
||||
shadow="never" |
<el-form-item label="资源名称" prop="name"> |
||||
> |
<el-input v-model="personCourseScheduleTable.searchParam.name" |
||||
<el-form |
placeholder="请输入资源名称" /> |
||||
:inline="true" |
</el-form-item> |
||||
:model="personCourseScheduleTable.searchParam" |
|
||||
ref="searchFormRef" |
<el-form-item label="资源手机号" prop="phone_number"> |
||||
> |
<el-input v-model="personCourseScheduleTable.searchParam.phone_number" |
||||
<el-form-item :label="t('personId')" prop="person_id"> |
placeholder="请输入资源手机号" /> |
||||
<el-input |
</el-form-item> |
||||
v-model="personCourseScheduleTable.searchParam.person_id" |
|
||||
:placeholder="t('personIdPlaceholder')" |
<el-form-item label="校区" prop="campus_name"> |
||||
/> |
<el-input v-model="personCourseScheduleTable.searchParam.campus_name" |
||||
</el-form-item> |
placeholder="请输入校区" /> |
||||
<el-form-item :label="t('personType')" prop="person_type"> |
</el-form-item> |
||||
<el-input |
|
||||
v-model="personCourseScheduleTable.searchParam.person_type" |
|
||||
:placeholder="t('personTypePlaceholder')" |
|
||||
/> |
<el-form-item> |
||||
</el-form-item> |
<el-button type="primary" @click="loadPersonCourseScheduleList()">{{ t('search') }}</el-button> |
||||
<el-form-item :label="t('scheduleId')" prop="schedule_id"> |
<el-button @click="resetForm(searchFormRef)">{{ t('reset') }}</el-button> |
||||
<el-input |
</el-form-item> |
||||
v-model="personCourseScheduleTable.searchParam.schedule_id" |
</el-form> |
||||
:placeholder="t('scheduleIdPlaceholder')" |
</el-card> |
||||
/> |
|
||||
</el-form-item> |
<div class="mt-[10px]"> |
||||
<el-form-item :label="t('courseDate')" prop="course_date"> |
<el-table :data="personCourseScheduleTable.data" size="large" v-loading="personCourseScheduleTable.loading"> |
||||
<el-input |
<template #empty> |
||||
v-model="personCourseScheduleTable.searchParam.course_date" |
<span>{{ !personCourseScheduleTable.loading ? t('emptyData') : '' }}</span> |
||||
:placeholder="t('courseDatePlaceholder')" |
</template> |
||||
/> |
<el-table-column prop="name" label="资源名称" min-width="120" :show-overflow-tooltip="true"/> |
||||
</el-form-item> |
|
||||
<el-form-item :label="t('timeSlot')" prop="time_slot"> |
<el-table-column label="人员类型" min-width="180" align="center" :show-overflow-tooltip="true"> |
||||
<el-input |
<template #default="{ row }"> |
||||
v-model="personCourseScheduleTable.searchParam.time_slot" |
<div v-for="(item, index) in person_typeList"> |
||||
:placeholder="t('timeSlotPlaceholder')" |
<div v-if="item.value == row.person_type">{{ item.name }}</div> |
||||
/> |
</div> |
||||
</el-form-item> |
</template> |
||||
|
</el-table-column> |
||||
<el-form-item> |
|
||||
<el-button type="primary" @click="loadPersonCourseScheduleList()">{{ |
<el-table-column prop="course_type" label="课程类型" min-width="120" :show-overflow-tooltip="true"/> |
||||
t('search') |
|
||||
}}</el-button> |
<el-table-column prop="course_date" :label="t('courseDate')" min-width="120" :show-overflow-tooltip="true"/> |
||||
<el-button @click="resetForm(searchFormRef)">{{ |
|
||||
t('reset') |
<el-table-column prop="time_slot" :label="t('timeSlot')" min-width="120" :show-overflow-tooltip="true"/> |
||||
}}</el-button> |
|
||||
</el-form-item> |
<el-table-column :label="t('operation')" fixed="right" min-width="120"> |
||||
</el-form> |
<template #default="{ row }"> |
||||
</el-card> |
<el-button type="primary" link @click="deleteEvent(row.id)">请假</el-button> |
||||
|
<el-button type="primary" link @click="xkEvent(row.id)">消课</el-button> |
||||
<div class="mt-[10px]"> |
</template> |
||||
<el-table |
</el-table-column> |
||||
:data="personCourseScheduleTable.data" |
|
||||
size="large" |
</el-table> |
||||
v-loading="personCourseScheduleTable.loading" |
<div class="mt-[16px] flex justify-end"> |
||||
> |
<el-pagination v-model:current-page="personCourseScheduleTable.page" v-model:page-size="personCourseScheduleTable.limit" |
||||
<template #empty> |
layout="total, sizes, prev, pager, next, jumper" :total="personCourseScheduleTable.total" |
||||
<span>{{ |
@size-change="loadPersonCourseScheduleList()" @current-change="loadPersonCourseScheduleList" /> |
||||
!personCourseScheduleTable.loading ? t('emptyData') : '' |
</div> |
||||
}}</span> |
</div> |
||||
</template> |
|
||||
<el-table-column |
<edit ref="editPersonCourseScheduleDialog" @complete="loadPersonCourseScheduleList" /> |
||||
prop="person_id" |
</el-card> |
||||
:label="t('personId')" |
</div> |
||||
min-width="120" |
</template> |
||||
:show-overflow-tooltip="true" |
|
||||
/> |
<script lang="ts" setup> |
||||
|
import { reactive, ref, watch } from 'vue' |
||||
<el-table-column |
import { t } from '@/lang' |
||||
prop="person_type" |
import { useDictionary } from '@/app/api/dict' |
||||
:label="t('personType')" |
import { getPersonCourseScheduleList, deletePersonCourseSchedule, getWithCustomerResourcesList,xkPersonCourseSchedule} from '@/app/api/person_course_schedule' |
||||
min-width="120" |
import { img } from '@/utils/common' |
||||
:show-overflow-tooltip="true" |
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' |
||||
<el-table-column |
const route = useRoute() |
||||
prop="schedule_id" |
const pageName = route.meta.title; |
||||
:label="t('scheduleId')" |
|
||||
min-width="120" |
let personCourseScheduleTable = reactive({ |
||||
:show-overflow-tooltip="true" |
page: 1, |
||||
/> |
limit: 10, |
||||
|
total: 0, |
||||
<el-table-column |
loading: true, |
||||
prop="course_date" |
data: [], |
||||
:label="t('courseDate')" |
searchParam:{ |
||||
min-width="120" |
"name":"", |
||||
:show-overflow-tooltip="true" |
"phone_number":"", |
||||
/> |
"campus_name":"" |
||||
|
} |
||||
<el-table-column |
}) |
||||
prop="time_slot" |
|
||||
:label="t('timeSlot')" |
const searchFormRef = ref<FormInstance>() |
||||
min-width="120" |
|
||||
:show-overflow-tooltip="true" |
// 选中数据 |
||||
/> |
const selectData = ref<any[]>([]) |
||||
|
|
||||
<el-table-column |
// 字典数据 |
||||
:label="t('operation')" |
const person_typeList = ref([] as any[]) |
||||
fixed="right" |
const person_typeDictList = async () => { |
||||
min-width="120" |
person_typeList.value = await (await useDictionary('person_type')).data.dictionary |
||||
> |
} |
||||
<template #default="{ row }"> |
person_typeDictList(); |
||||
<el-button type="primary" link @click="editEvent(row)">{{ |
|
||||
t('edit') |
/** |
||||
}}</el-button> |
* 获取人员与课程安排关系列表 |
||||
<el-button type="primary" link @click="deleteEvent(row.id)">{{ |
*/ |
||||
t('delete') |
const loadPersonCourseScheduleList = (page: number = 1) => { |
||||
}}</el-button> |
personCourseScheduleTable.loading = true |
||||
</template> |
personCourseScheduleTable.page = page |
||||
</el-table-column> |
|
||||
</el-table> |
getPersonCourseScheduleList({ |
||||
<div class="mt-[16px] flex justify-end"> |
page: personCourseScheduleTable.page, |
||||
<el-pagination |
limit: personCourseScheduleTable.limit, |
||||
v-model:current-page="personCourseScheduleTable.page" |
...personCourseScheduleTable.searchParam |
||||
v-model:page-size="personCourseScheduleTable.limit" |
}).then(res => { |
||||
layout="total, sizes, prev, pager, next, jumper" |
personCourseScheduleTable.loading = false |
||||
:total="personCourseScheduleTable.total" |
personCourseScheduleTable.data = res.data.data |
||||
@size-change="loadPersonCourseScheduleList()" |
personCourseScheduleTable.total = res.data.total |
||||
@current-change="loadPersonCourseScheduleList" |
}).catch(() => { |
||||
/> |
personCourseScheduleTable.loading = false |
||||
</div> |
}) |
||||
</div> |
} |
||||
|
loadPersonCourseScheduleList() |
||||
<edit |
|
||||
ref="editPersonCourseScheduleDialog" |
const editPersonCourseScheduleDialog: Record<string, any> | null = ref(null) |
||||
@complete="loadPersonCourseScheduleList" |
|
||||
/> |
/** |
||||
</el-card> |
* 添加人员与课程安排关系 |
||||
</div> |
*/ |
||||
</template> |
const addEvent = () => { |
||||
|
editPersonCourseScheduleDialog.value.setFormData() |
||||
<script lang="ts" setup> |
editPersonCourseScheduleDialog.value.showDialog = true |
||||
import { reactive, ref, watch } from 'vue' |
} |
||||
import { t } from '@/lang' |
|
||||
import { useDictionary } from '@/app/api/dict' |
/** |
||||
import { |
* 编辑人员与课程安排关系 |
||||
getPersonCourseScheduleList, |
* @param data |
||||
deletePersonCourseSchedule, |
*/ |
||||
} from '@/app/api/person_course_schedule' |
const editEvent = (data: any) => { |
||||
import { img } from '@/utils/common' |
editPersonCourseScheduleDialog.value.setFormData(data) |
||||
import { ElMessageBox, FormInstance } from 'element-plus' |
editPersonCourseScheduleDialog.value.showDialog = true |
||||
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({ |
const deleteEvent = (id: number) => { |
||||
page: 1, |
ElMessageBox.confirm("确定请假吗", t('warning'), |
||||
limit: 10, |
{ |
||||
total: 0, |
confirmButtonText: t('confirm'), |
||||
loading: true, |
cancelButtonText: t('cancel'), |
||||
data: [], |
type: 'warning', |
||||
searchParam: { |
} |
||||
person_id: '', |
).then(() => { |
||||
person_type: '', |
deletePersonCourseSchedule(id).then(() => { |
||||
schedule_id: '', |
loadPersonCourseScheduleList() |
||||
course_date: '', |
}).catch(() => { |
||||
time_slot: '', |
}) |
||||
}, |
}) |
||||
}) |
} |
||||
|
|
||||
const searchFormRef = ref<FormInstance>() |
const xkEvent = (id: number) => { |
||||
|
ElMessageBox.confirm("确定销课吗", t('warning'), |
||||
// 选中数据 |
{ |
||||
const selectData = ref<any[]>([]) |
confirmButtonText: t('confirm'), |
||||
|
cancelButtonText: t('cancel'), |
||||
// 字典数据 |
type: 'warning', |
||||
|
} |
||||
/** |
).then(() => { |
||||
* 获取人员与课程安排关系列表 |
xkPersonCourseSchedule(id).then(() => { |
||||
*/ |
loadPersonCourseScheduleList() |
||||
const loadPersonCourseScheduleList = (page: number = 1) => { |
}).catch(() => { |
||||
personCourseScheduleTable.loading = true |
}) |
||||
personCourseScheduleTable.page = page |
}) |
||||
|
} |
||||
getPersonCourseScheduleList({ |
|
||||
page: personCourseScheduleTable.page, |
|
||||
limit: personCourseScheduleTable.limit, |
|
||||
...personCourseScheduleTable.searchParam, |
const personIdList = ref([]) |
||||
}) |
const setPersonIdList = async () => { |
||||
.then((res) => { |
personIdList.value = await (await getWithCustomerResourcesList({})).data |
||||
personCourseScheduleTable.loading = false |
} |
||||
personCourseScheduleTable.data = res.data.data |
setPersonIdList() |
||||
personCourseScheduleTable.total = res.data.total |
|
||||
}) |
const resetForm = (formEl: FormInstance | undefined) => { |
||||
.catch(() => { |
if (!formEl) return |
||||
personCourseScheduleTable.loading = false |
formEl.resetFields() |
||||
}) |
loadPersonCourseScheduleList() |
||||
} |
} |
||||
loadPersonCourseScheduleList() |
</script> |
||||
|
|
||||
const editPersonCourseScheduleDialog: Record<string, any> | null = ref(null) |
<style lang="scss" scoped> |
||||
|
/* 多行超出隐藏 */ |
||||
/** |
.multi-hidden { |
||||
* 添加人员与课程安排关系 |
word-break: break-all; |
||||
*/ |
text-overflow: ellipsis; |
||||
const addEvent = () => { |
overflow: hidden; |
||||
editPersonCourseScheduleDialog.value.setFormData() |
display: -webkit-box; |
||||
editPersonCourseScheduleDialog.value.showDialog = true |
-webkit-line-clamp: 2; |
||||
} |
-webkit-box-orient: vertical; |
||||
|
} |
||||
/** |
</style> |
||||
* 编辑人员与课程安排关系 |
|
||||
* @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> |
|
||||
|
|||||
@ -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