From 01b6b200bedf57900a88bbd982cf25889e13dc49 Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期三, 10 八月 2022 14:17:09 +0800 Subject: [PATCH] 对接 --- src/views/goalManagement/IncentiveRecording/index.vue | 365 ++++++++++++++++++++++++++++++++------------------- 1 files changed, 227 insertions(+), 138 deletions(-) diff --git a/src/views/goalManagement/IncentiveRecording/index.vue b/src/views/goalManagement/IncentiveRecording/index.vue index 876e04d..6cfe139 100644 --- a/src/views/goalManagement/IncentiveRecording/index.vue +++ b/src/views/goalManagement/IncentiveRecording/index.vue @@ -1,182 +1,268 @@ <template> - <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle"> - <el-row> - <el-col :span="4"> - <el-form-item> - <el-input v-model="ruleForm.name" placeholder="请选择被奖惩者"> - <template #append> <el-button :icon="Search" @click="openSearch" /> </template - ></el-input> - </el-form-item> - </el-col> - <!-- <el-col :span="4"> + <div> + <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle"> + <el-row> + <el-col :span="4"> + <el-form-item size="default"> + <el-input v-model="ruleForm.searchParams.personName" placeholder="请选择被奖惩者"> + <template #append> + <el-button :icon="Search" @click="openSearch" /> + </template> + </el-input> + </el-form-item> + </el-col> + <!-- <el-col :span="4"> <el-form-item> <el-input v-model="ruleForm.checkPass" placeholder="目标指标编号" /> </el-form-item> </el-col> --> - <el-col :span="4"> - <el-form-item> - <el-button type="primary" @click="submitForm(ruleFormRef)">查询</el-button> - <el-button @click="resetForm(ruleFormRef)">重置</el-button> - </el-form-item> - </el-col> - </el-row> - </el-form> - <div class="minCenter"> + <el-col :span="4"> + <el-form-item> + <el-button size="default" type="primary" @click="listApi">查询</el-button> + <el-button size="default" @click="resetForm">重置</el-button> + </el-form-item> + </el-col> + </el-row> + </el-form> + <div class="minCenter"> <div class="btns"> <div> - <el-button type="primary" :icon="Plus" @click="openD">新建</el-button> - <el-button type="warning" plain :icon="EditPen">修改</el-button> - <el-button type="danger" :icon="Delete" plain>删除</el-button> + <el-button size="default" type="primary" :icon="Plus" @click="openD('新建')">新建</el-button> + <el-button size="default" :disabled="warning" type="warning" plain :icon="EditPen">修改</el-button> + <el-button size="default" :disabled="danger" type="danger" :icon="Delete" plain @click="onDeleteAll">删除 </el-button> </div> <div> - <el-button :icon="Download"></el-button> - <el-button :icon="Refresh"></el-button> + <!-- <el-button size="default" :icon="Download"></el-button> + <el-button size="default" :icon="Refresh"></el-button> --> </div> </div> - <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"> - <el-table-column type="selection" align="center" width="55" /> - <el-table-column label="奖惩日期" align="center" sortable> - <template #default="scope">{{ scope.row.date }}</template> - </el-table-column> - <el-table-column property="name" align="center" label="奖惩类型" sortable /> - <el-table-column property="name" align="center" label="被奖惩者" sortable /> - <el-table-column property="address" label="奖惩内容" align="center" sortable show-overflow-tooltip /> - <el-table-column property="address" label="奖惩依据" align="center" sortable show-overflow-tooltip /> - <!-- <el-table-column property="address" label="指标级别" align="center" sortable show-overflow-tooltip /> - <el-table-column property="address" label="完成期限" align="center" sortable show-overflow-tooltip /> - <el-table-column property="address" label="状态" align="center" sortable show-overflow-tooltip /> --> - <el-table-column label="操作" align="center" style="width:300px"> - <template #default> - <el-button link type="primary" size="default" :icon="View">查看</el-button> - <el-button link type="primary" size="default" :icon="EditPen">修改</el-button> - <el-button link type="primary" size="default" :icon="Delete">删除</el-button> - </template> - </el-table-column> - </el-table> - <div class="pages"> - <el-pagination - v-model:currentPage="currentPage4" - v-model:page-size="pageSize4" - :page-sizes="[100, 200, 300, 400]" - :small="small" - :disabled="disabled" - :background="background" - layout="total, sizes, prev, pager, next, jumper" - :total="400" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - /> + <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> + <el-table-column type="selection" align="center" width="55" /> + <el-table-column property="createTime" align="center" label="奖惩日期" :formatter="timeDate" sortable /> + <el-table-column label="奖惩类型" align="center" sortable> + <template #default="scope"> + <span v-if="scope.row.standardType == 1">奖励</span> + <span v-if="scope.row.standardType == 2">惩罚</span> + </template> + </el-table-column> + <el-table-column property="personId" align="center" label="被奖惩者" sortable /> + <el-table-column property="content" label="奖惩内容" align="center" sortable show-overflow-tooltip /> + <el-table-column property="reason" label="奖惩依据" align="center" sortable show-overflow-tooltip /> + <el-table-column label="操作" align="center" sortable show-overflow-tooltip> + <template #default="scope"> + <el-button link type="primary" size="default" :icon="View" @click="openD('查看', scope.row)">查看 </el-button> + <el-button link type="primary" size="default" :icon="EditPen" @click="openD('修改', scope.row)">修改</el-button> + <el-button link type="primary" size="default" :icon="Delete" @click="onDelete(scope.row.id)">删除 </el-button> + </template> + </el-table-column> + </el-table> + <div class="pages"> + <el-pagination + v-model:currentPage="currentPage4" + v-model:page-size="pageSize4" + :page-sizes="[10, 20, 30, 40]" + layout="total, sizes, prev, pager, next, jumper" + :total="total" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> + </div> + <DailogAdd ref="openAdd" @navAddorUpdata="onAddorUpdata"></DailogAdd> + <DailogSearchUser ref="openUser" @SearchUser="userId"></DailogSearchUser> </div> - <DailogAdd ref="openAdd"></DailogAdd> - <DailogSearchUser ref="openUser"></DailogSearchUser> </div> </template> <script lang="ts"> -import DailogAdd from './component/DailogAdd.vue' -import DailogSearchUser from '/@/components/DailogSearchUser/index.vue' +import DailogAdd from './component/DailogAdd.vue'; +import {timeDate} from '/@/assets/index.ts' +import DailogSearchUser from '/@/components/DailogSearchUser/index.vue'; import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue'; import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus'; -import { Plus, Delete, Upload, Download, Refresh, View,EditPen,Search} from '@element-plus/icons-vue'; -interface User { - date: string; - name: string; - address: string; -} -import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'; +import { Plus, Delete, Upload, Download, Refresh, View, EditPen, Search } from '@element-plus/icons-vue'; +import { goalManagementApi } from '/@/api/goalManagement'; export default defineComponent({ - components: { ElButton, ElInput,DailogAdd,DailogSearchUser }, + components: { ElButton, ElInput, DailogAdd, DailogSearchUser }, setup() { // 搜索条件 const ruleForm = reactive({ - pass: '', - checkPass: '', + pageSize: 10, + pageIndex: 1, + searchParams: { + personId: '', ////员工 + }, }); - - const formatter = (row: User, column: TableColumnCtx<User>) => { - return row.address; + // 重置 + const resetForm = () => { + ruleForm.searchParams.personId = ''; + listApi(); }; - - const tableData: User[] = [ - { - date: '2016-05-03', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-02', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-04', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-01', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-08', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-06', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-07', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - ]; - const currentPage4 = ref(4); - const pageSize4 = ref(100); - const small = ref(false); - const disabled = ref(false); - const background = ref(false); + const listApi = () => { + goalManagementApi() + .getrewardPunishmentList(ruleForm) + .then((res) => { + if (res.data.code == 200) { + tableData.value = res.data.data; + currentPage4.value = res.data.pageIndex; + pageSize4.value = res.data.pageSize; + total.value = res.data.total; + } else { + ElMessage.error(res.data.msg); + } + }); + }; + // + const handleClick = (val: any) => { + let targetType = JSON.parse(JSON.stringify(val)); + ruleForm.searchParams.personId = targetType.paneName; + listApi(); + }; + onMounted(() => { + listApi(); + }); + const onAddorUpdata = () => { + listApi(); + }; + // 表格 + const tableData = ref(); + const currentPage4 = ref(); + const pageSize4 = ref(); + const total = ref(); const handleSizeChange = (val: number) => { - console.log(`${val} items per page`); + // console.log(`${val} items per page`); + ruleForm.pageSize = val; + listApi(); }; const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`); + // console.log(`current page: ${val}`); + ruleForm.pageIndex = val; + listApi(); }; // 弹窗 const openAdd = ref(); - const openD = () => { - openAdd.value.openDailog(); + const openD = (title: String, id: number) => { + openAdd.value.openDailog(title, ruleForm.searchParams.personId, id); }; - const openUser =ref(); - const openSearch=()=>{ - openUser.value.openDailog() - } + // 删除 + const onDelete = (id: number) => { + let arr=[] + arr.push(id) + ElMessageBox.confirm('确定删除所选项吗?', 'Warning', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + goalManagementApi() + .getrewardPunishmentDelete(arr) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + message: res.data.msg, + type: 'success', + }); + listApi(); + } else { + ElMessage.error(res.data.msg); + } + }); + }) + .catch(() => { + ElMessage({ + type: 'info', + message: 'Delete canceled', + }); + }); + }; + // 批量删除 + const warning = ref(true); + const danger = ref(true); + const deletAll = ref(); + const handleSelectionChange = (val: any) => { + let valId = JSON.parse(JSON.stringify(val)); + let arr = []; + for (let i = 0; i < valId.length; i++) { + arr.push(valId[i].id); + } + deletAll.value = arr + if (val.length == 1) { + warning.value = false; + danger.value = false; + } else if (val.length == 0) { + warning.value = true; + danger.value = true; + } else { + warning.value = true; + danger.value = false; + } + }; + const onDeleteAll = () => { + ElMessageBox.confirm('确定删除所选项吗?', 'Warning', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + goalManagementApi() + .getrewardPunishmentDelete(deletAll.value) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + message: res.data.msg, + type: 'success', + }); + listApi(); + } else { + ElMessage.error(res.data.msg); + } + }); + }) + .catch(() => { + // ElMessage({ + // type: 'info', + // message: 'Delete canceled', + // }); + }); + }; + const openUser = ref(); + const openSearch = () => { + openUser.value.openDailog(); + }; + const userId = (val: any) => { + ruleForm.searchParams.personId = val.uid; + ruleForm.searchParams.personName = val.realName; + }; return { - + timeDate, + ruleForm, + userId, + resetForm, + listApi, + handleClick, + onAddorUpdata, tableData, - formatter, currentPage4, pageSize4, + total, handleSizeChange, handleCurrentChange, - openAdd, openD, - small, - disabled, - background, - ruleForm, - openUser, + onDelete, + openAdd, + warning, + danger, + deletAll, openSearch, + handleSelectionChange, + onDeleteAll, + openUser, Plus, Delete, Upload, Download, Refresh, View, - EditPen, - Search + EditPen, + Search, }; }, }); @@ -188,16 +274,19 @@ margin-top: 10px; padding: 0 20px; } + .topTitle { - background-color: #fff; - padding: 20px 0px 20px 0px; - margin-bottom:10px ; + background-color: #fff; + padding: 20px 0px 20px 0px; + margin-bottom: 10px; } + .btns { padding: 10px 0px 10px 0px; display: flex; justify-content: space-between; } + .pages { padding: 20px 0; display: flex; -- Gitblit v1.9.2