客户服务计划管理 - 客户管理系统
<template>
<div class='layout-padding'>
<h1>客户服务计划管理</h1>
<div>{{ state.queryForm }}</div>
<div class='layout-padding-auto layout-padding-view'>
<!-- 过滤条件row -->
<el-row class='ml10' v-show='showSearch'>
<el-form :inline='true' :model='state.queryForm' @keyup.enter='getDataList' ref='queryRef'>
<el-form-item :label='$t('cmMaintenancePlan.planName')' prop='planName'>
<el-input v-model='state.queryForm.projectTitle' :placeholder='$t('cmMaintenancePlan.inputPlanNameTip')' clearable @change=''></el-input>
</el-form-item>
<el-form-item :label='$t('cmMaintenancePlan.status')' prop='status'>
<el-select :placeholder='t('cmMaintenancePlan.inputStatusTip')' v-model='state.queryForm.status'>
<el-option :key='index' :label='item.label' :value='item.value' v-for='(item, index) in plan_type'></el-option>
</el-select>
</el-form-item>
<el-form-item :label='t('cmMaintenancePlan.customerName')' prop='customerName'>
<el-select v-model='state.queryForm.customerName' clearable :placeholder='t('cmMaintenancePlan.inputCustomerName')'>
<el-option v-for='(item, index) in pm_type' :key='index' :label='item.label' :value='item.value'></el-option>
</el-select>
</el-form-item>
<pre><code> <!-- <el-form-item :label='$t('apply.applicationDate')' prop='applicationDate'>
<el-date-picker
:end-placeholder='$t('apply.inputEndDateTip')'
:start-placeholder='$t('apply.inputStartDateTip')'
range-separator='To'
type='datetimerange'
v-model='state.queryForm.applicationDate'
value-format='YYYY-MM-DD HH:mm:ss'
/>
</el-form-item> -->
<el-form-item>
<el-button @click='getDataList' icon='Search' type='primary'>{{ $t('common.queryBtn') }} </el-button>
<el-button @click='resetQuery' icon='Refresh'>{{ $t('common.resetBtn') }}</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<div class='mb8' style='width: 100%'>
<el-button icon='folder-add' type='primary' class='ml10' @click='formDialogRef.openDialog()' v-auth=''customer_cmMaintenancePlan_add''>
新增
</el-button>
<el-button
plain
:disabled='multiple'
icon='Delete'
type='primary'
v-auth=''customer_cmMaintenancePlan_del''
@click='handleDelete(selectObjs)'
>
删除
</el-button>
<right-toolbar
v-model:showSearch='showSearch'
:export=''customer_cmMaintenancePlan_export''
@exportExcel='exportExcel'
class='ml10 mr20'
style='float: right'
@queryTable='getDataList'
></right-toolbar>
</div>
</el-row>
<el-table
:data='state.dataList'
v-loading='state.loading'
border
:cell-style='tableStyle.cellStyle'
:header-cell-style='tableStyle.headerCellStyle'
>
<el-table-column type='selection' width='40' align='center' />
<el-table-column type='index' label='#' width='40' />
<el-table-column prop='planName' label='服务计划名称' show-overflow-tooltip />
<el-table-column prop='customerId' label='客户编号' show-overflow-tooltip />
<el-table-column prop='customerType' label='客户类型' show-overflow-tooltip />
<el-table-column prop='productionLineId' label='产线编号' show-overflow-tooltip />
<el-table-column prop='managerId' label='技术服务经理编号' show-overflow-tooltip />
<el-table-column prop='description' label='年度技术服务工作描述' show-overflow-tooltip />
<el-table-column prop='fenbDemand' label='铌铁应用需求,机会' show-overflow-tooltip />
<el-table-column prop='visitTimes' label='访问次数' show-overflow-tooltip />
<el-table-column prop='commucationTimes' label='线上交流' show-overflow-tooltip />
<el-table-column prop='trainingTimes' label='培训次数' show-overflow-tooltip />
<el-table-column prop='objective' label='年度技术服务目标' show-overflow-tooltip />
<el-table-column prop='notifier' label='通知人员' show-overflow-tooltip />
<el-table-column prop='status' label='审批状态' show-overflow-tooltip />
<el-table-column prop='year' label='年度' show-overflow-tooltip />
<el-table-column label='操作' width='150'>
<template #default='scope'>
<el-button
icon='edit-pen'
text
type='primary'
v-auth=''customer_cmMaintenancePlan_edit''
@click='formDialogRef.openDialog(scope.row.planId)'
>编辑</el-button
>
<el-button icon='delete' text type='primary' v-auth=''customer_cmMaintenancePlan_del'' @click='handleDelete([scope.row.planId])'
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination @size-change='sizeChangeHandle' @current-change='currentChangeHandle' v-bind='state.pagination' />
</div>
<!-- 编辑、新增 -->
<form-dialog ref='formDialogRef' @refresh='getDataList(false)' />
</div>
</code></pre>
</template>
<script setup lang='ts' name='systemCmMaintenancePlan'>
import { BasicTableProps, useTable } from '/@/hooks/table';
import { fetchList, delObjs } from '/@/api/customer/cmMaintenancePlan';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useDict } from '/@/hooks/dict';
import { useI18n } from 'vue-i18n';
// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
const { t } = useI18n();
// 定义查询字典
// 定义变量内容
const formDialogRef = ref();
// 搜索变量
const queryRef = ref();
const showSearch = ref(true);
// 多选变量
const selectObjs = ref([]) as any;
const multiple = ref(true);
// 项目类型下拉数据
const { plan_type } = useDict('plan_type');
const loading = ref(false);
const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: {},
pageList: fetchList,
dataList: [], // 添加dataList属性并初始化为空数组
});
onMounted(() => {
fetchList().then((response) => {
state.dataList = response.data; // 将接口返回的数据赋值给state.dataList
console.log(response);
});
});
// table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);
// 清空搜索条件
const resetQuery = () => {
// 清空搜索条件
queryRef.value?.resetFields();
// 清空多选
selectObjs.value = [];
getDataList();
};
// 导出excel
const exportExcel = () => {
downBlobFile('/customer/cmMaintenancePlan/export', state.queryForm, 'cmMaintenancePlan.xlsx');
};
// 多选事件
const handleSelectionChange = (objs: { planId: string }[]) => {
selectObjs.value = objs.map(({ planId }) => planId);
multiple.value = !objs.length;
};
// 删除操作
const handleDelete = async (ids: string[]) => {
try {
await useMessageBox().confirm('此操作将永久删除');
} catch {
return;
}
try {
await delObjs(ids);
getDataList();
useMessage().success('删除成功');
} catch (err: any) {
useMessage().error(err.msg);
}
};
</scrip
原文地址: https://www.cveoy.top/t/topic/p4XM 著作权归作者所有。请勿转载和采集!