代码如下,审核按钮和名单确认按钮,修改visible=“visible”前两个按钮都调用第二个方法,修改后两方法调用第一个方法
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="审核状态">
<j-dict-select-tag placeholder="请输入审核状态" v-model="queryParam.checkStatus" dictCode="check_status"></j-dict-select-tag>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="名单确认">
<j-dict-select-tag placeholder="请输入名单确认" v-model="queryParam.hrCheck" dictCode="hr_check"></j-dict-select-tag>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
<a @click="handleToggleSearch" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
</a>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 查询区域-END -->
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-button type="primary" icon="download" @click="handleExportXls('test_examination')">导出</a-button>
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
<a-button type="primary" icon="import">导入</a-button>
</a-upload>
<!--审批按钮-->
<a-button type="primary" @click="showModal">
审批
</a-button>
<a-modal
:title="审批"
:width="350"
:visible="visible"
:confirmLoading="confirmLoading"
@cancel="handleCancel"
cancelText="关闭">
<p>审批是否通过</p>
<template #footer="footer">
<a-button @click="handleCancel">取消</a-button>
<a-button type="primary" @click="handleCancel">驳回</a-button>
<a-button type="primary" @click="check()">通过</a-button>
</template>
</a-modal>
<!--
hr确认按钮
-->
<a-button type="primary" @click="showModal2">
名单确认
</a-button>
<a-modal
:title="名单确认"
:width="350"
:visible="visible"
:confirmLoading="confirmLoading"
@cancel="handleCancel"
cancelText="关闭">
<p>名单确认</p>
<template #footer="footer">
<a-button @click="handleCancel">取消</a-button>
<a-button type="primary" @click="hrCheck()">确认</a-button>
</template>
</a-modal>
<!-- 高级查询区域 -->
<j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table" @selection-change="handleSelectionChange"
size="middle"
:scroll="{x:true}"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
class="j-table-force-nowrap"
@change="handleTableChange">
<template slot="htmlSlot" slot-scope="text">
<div v-html="text"></div>
</template>
<template slot="imgSlot" slot-scope="text">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
<img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
</template>
<template slot="fileSlot" slot-scope="text">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
<a-button
v-else
:ghost="true"
type="primary"
icon="download"
size="small"
@click="downloadFile(text)">
下载
</a-button>
</template>
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical" />
<a-dropdown>
<a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
<a-menu slot="overlay">
<a-menu-item>
<a @click="handleDetail(record)">详情</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<test-examination-modal ref="modalForm" @ok="modalFormOk"></test-examination-modal>
</a-card>
</template>
<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import TestExaminationModal from './modules/TestExaminationModal'
import { colAuthFilter } from "@/utils/authFilter"
import {checkAction} from "../../../api/manage";
import { hrCheckAction} from "../../../api/manage";
export default {
name: 'TestExaminationList',
mixins:[JeecgListMixin, mixinDevice],
components: {
TestExaminationModal
},
data () {
return {
undefined,
description: 'test_examination管理页面',
selectedRowKeys: [], // table中选中的项
ids:'',
// 表头
columns: [
{
title: '#',
dataIndex: '',
key:'rowIndex',
width:60,
align:"center",
customRender:function (t,r,index) {
return parseInt(index)+1;
}
},
{
title:'预计体检日期',
align:"center",
dataIndex: 'exceptDate',
customRender:function (text) {
return !text?"":(text.length>10?text.substr(0,10):text)
}
},
{
title:'部门名称',
align:"center",
dataIndex: 'apartmentName'
},
{
title:'部门编号',
align:"center",
dataIndex: 'department'
},
{
title:'岗位',
align:"center",
dataIndex: 'station'
},
{
title:'主管工号',
align:"center",
dataIndex: 'chargeNumber'
},
{
title:'入职日期',
align:"center",
dataIndex: 'hiredate',
customRender:function (text) {
return !text?"":(text.length>10?text.substr(0,10):text)
}
},
{
title:'姓名',
align:"center",
dataIndex: 'name'
},
{
title:'工号',
align:"center",
dataIndex: 'jobNumber'
},
{
title:'性别',
align:"center",
dataIndex: 'sex'
},
{
title:'年龄',
align:"center",
dataIndex: 'age'
},
{
title:'身份证号',
align:"center",
dataIndex: 'idcardNumber'
},
{
title:'婚否',
align:"center",
dataIndex: 'marriage'
},
{
title:'地址',
align:"center",
dataIndex: 'place'
},
{
title:'电话',
align:"center",
dataIndex: 'phone'
},
{
title:'体检日期',
align:"center",
dataIndex: 'examinationDate',
customRender:function (text) {
return !text?"":(text.length>10?text.substr(0,10):text)
}
},
{
title:'传染类检查结果',
align:"center",
dataIndex: 'diseaseResult'
},
{
title:'其他检查结果',
align:"center",
dataIndex: 'otherResult'
},
{
title:'体检报告',
align:"center",
dataIndex: 'examinationResult'
},
{
title:'备注',
align:"center",
dataIndex: 'other'
},
{
title:'审核状态',
align:"center",
dataIndex: 'checkStatus'
},
{
title:'名单确认',
align:"center",
dataIndex: 'hrCheck'
},
{
title: '操作',
dataIndex: 'action',
align:"center",
fixed:"right",
width:147,
scopedSlots: { customRender: 'action' }
}
],
url: {
list: "/modules/testExamination/list",
delete: "/modules/testExamination/delete",
deleteBatch: "/modules/testExamination/deleteBatch",
exportXlsUrl: "/modules/testExamination/exportXls",
importExcelUrl: "modules/testExamination/importExcel",
checkUrl:"/modules/testExamination/check",
hrCheckUrl:"/modules/testExamination/hrCheck"
},
dictOptions:{},
superFieldList:[],
visible: false,
}
},
created() {
this.getSuperFieldList();
this.disableMixinCreated=true;
this.columns = colAuthFilter(this.columns,'testdemo:');
this.loadData();
this.initDictConfig();
},
computed: {
importExcelUrl: function(){
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
},
},
methods: {
initDictConfig(){
},
getSuperFieldList(){
let fieldList=[];
fieldList.push({type:'date',value:'exceptDate',text:'预计体检日期'})
fieldList.push({type:'string',value:'apartmentName',text:'部门名称'})
fieldList.push({type:'string',value:'department',text:'部门编号'})
fieldList.push({type:'string',value:'station',text:'岗位'})
fieldList.push({type:'int',value:'chargeNumber',text:'主管工号'})
fieldList.push({type:'date',value:'hiredate',text:'入职日期'})
fieldList.push({type:'string',value:'name',text:'姓名'})
fieldList.push({type:'int',value:'jobNumber',text:'工号'})
fieldList.push({type:'string',value:'sex',text:'性别'})
fieldList.push({type:'int',value:'age',text:'年龄'})
fieldList.push({type:'string',value:'idcardNumber',text:'身份证号'})
fieldList.push({type:'string',value:'marriage',text:'婚否'})
fieldList.push({type:'string',value:'place',text:'地址'})
fieldList.push({type:'string',value:'phone',text:'电话'})
fieldList.push({type:'date',value:'examinationDate',text:'体检日期'})
fieldList.push({type:'string',value:'diseaseResult',text:'传染类检查结果'})
fieldList.push({type:'string',value:'otherResult',text:'其他检查结果'})
fieldList.push({type:'string',value:'examinationResult',text:'体检报告'})
fieldList.push({type:'string',value:'other',text:'备注'})
fieldList.push({type:'string',value:'checkStatus',text:'审核状态'})
fieldList.push({type:'string',value:'hrCheck',text:'名单确认'})
this.superFieldList = fieldList
},
showModal() {
this.visible = true;
},
showModal2() {
this.visible = true;
},
check :function () {
if (this.selectedRowKeys.length <= 0){
this.$message.warning('请选择一条记录!');
return;
}else {
var ids = "";
for (var a = 0; a < this.selectedRowKeys.length; a++) {
ids += this.selectedRowKeys[a] + ",";
}
var that = this;
this.$confirm({
title: "确认通过",
content: "是否审核通过?",
onOk: function () {
that.loading = true;
checkAction(that.url.checkUrl, {ids: ids}).then((res) => {
if (res.success) {
that.$message.success(res.message);
that.loadData();
that.onClearSelected();
} else {
that.$message.warning(res.message);
}
}).finally(() => {
that.loading = false;
});
}
});
}
this.visible = true;
},
hrCheck :function () {
if (this.selectedRowKeys.length <= 0){
this.$message.warning('请选择一条记录!');
return;
}else {
var ids = "";
for (var a = 0; a < this.selectedRowKeys.length; a++) {
ids += this.selectedRowKeys[a] + ",";
}
var that = this;
this.$confirm({
title: "确认通过",
content: "是否确认名单通过?",
onOk: function () {
that.loading = true;
hrCheckAction(that.url.hrCheckUrl, {ids: ids}).then((res1) => {
if (res1.success) {
that.$message.success(res1.message);
that.loadData();
that.onClearSelected();
} else {
that.$message.warning(res1.message);
}
}).finally(() => {
that.loading = false;
});
}
});
}
this.visible = true;
},
handleCancel () {
this.visible = false;
},
checkNoPass () {
this.visible = false;
}
}
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
本文档展示了一个Vue.js应用中关于审批和名单确认功能的实现。应用包含查询区域,操作按钮区域,以及审批和名单确认模态窗口。用户可以进行查询、新增、导出、导入等操作,并通过审批按钮调用`check()`方法,通过名单确认按钮调用`hrCheck()`方法。这两个方法分别处理审批和名单确认的逻辑,包括数据交互和UI反馈。同时,应用还支持表格的筛选、排序和批量操作功能。
1708

被折叠的 条评论
为什么被折叠?



