390 lines
10 KiB
Vue
390 lines
10 KiB
Vue
|
<template>
|
||
|
|
<div class="RCSbox approveIndex common-page">
|
||
|
|
<FormSearch
|
||
|
|
:form-arr="formArr"
|
||
|
|
:form-data="formData"
|
||
|
|
@outOperation="outOperation"
|
||
|
|
@searchSubmit="searchSubmit"
|
||
|
|
@reset="resetForm"
|
||
|
|
/>
|
||
|
|
<el-tabs
|
||
|
|
v-model="activeName"
|
||
|
|
class="approve-tabs"
|
||
|
|
@tab-click="handleClick"
|
||
|
|
>
|
||
|
|
<el-tab-pane
|
||
|
|
v-for="(item, index) in approveList"
|
||
|
|
:key="item.label"
|
||
|
|
:label="item.label"
|
||
|
|
:name="item.value"
|
||
|
|
>
|
||
|
|
<span slot="label">
|
||
|
|
<!-- <el-badge
|
||
|
|
:value="item.count"
|
||
|
|
:max="99"
|
||
|
|
> -->
|
||
|
|
<span>{{ item.label }}</span>
|
||
|
|
<span>({{ item.count }})</span>
|
||
|
|
<!-- </el-badge> -->
|
||
|
|
</span>
|
||
|
|
<PublicTable
|
||
|
|
ref="table"
|
||
|
|
class="table"
|
||
|
|
row-key="id"
|
||
|
|
:loading="loading"
|
||
|
|
:has-index="false"
|
||
|
|
:need-select="true"
|
||
|
|
:table-data="tableData"
|
||
|
|
:table-info="tableInfo"
|
||
|
|
:table-column="columns"
|
||
|
|
:events="events"
|
||
|
|
operation-width="150px"
|
||
|
|
:btn-button="operations"
|
||
|
|
:table-top-button="tableTopButton"
|
||
|
|
:operation-fixed="true"
|
||
|
|
:is-need-pagination="true"
|
||
|
|
:current-page="searchParams.pageNum"
|
||
|
|
:page-size="searchParams.pageSize"
|
||
|
|
:total="total"
|
||
|
|
:is-need-customcolumn="true"
|
||
|
|
:is-need-export="true"
|
||
|
|
:is-need-import="true"
|
||
|
|
@sizeChange="handleSizeChange"
|
||
|
|
@currentChange="handleCurrentChange"
|
||
|
|
@customColumnChange="handleCustomColumnChange"
|
||
|
|
@handleTableTopColumnIconClick="handleTableTopColumnIconClick"
|
||
|
|
@handleSelectionChange="handleSelectionChange"
|
||
|
|
/>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
<ApproveDialog
|
||
|
|
:is-show.sync="isShow"
|
||
|
|
:select-row="clickRow"
|
||
|
|
:active-index="activeName"
|
||
|
|
/>
|
||
|
|
<ProcessDialog
|
||
|
|
:show-process.sync="showProcess"
|
||
|
|
:select-row="clickRow"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import ApproveDialog from './components/approveDialog.vue';
|
||
|
|
import ProcessDialog from './components/processDialog.vue';
|
||
|
|
import FormSearch from '@/components/formSearch/index.vue';
|
||
|
|
import PublicTable from '@/components/table/index.vue';
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
FormSearch,
|
||
|
|
PublicTable,
|
||
|
|
ApproveDialog,
|
||
|
|
ProcessDialog,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isShow: false,
|
||
|
|
showProcess: false,
|
||
|
|
selection: [],
|
||
|
|
clickRow: {},
|
||
|
|
approveList: [
|
||
|
|
{ label: '待处理', value: 1, count: '', key: 'waitNumber' },
|
||
|
|
{ label: '已处理', value: 2, count: '', key: 'finishNumber' },
|
||
|
|
{ label: '已拒绝', value: 3, count: '', key: 'refuseNumber' },
|
||
|
|
{ label: '我发起', value: 4, count: '', key: 'mineNumber' },
|
||
|
|
],
|
||
|
|
activeName: 1,
|
||
|
|
formArr: [
|
||
|
|
{
|
||
|
|
type: 'pickerDate',
|
||
|
|
prop: 'dealDate',
|
||
|
|
span: 6,
|
||
|
|
attrs: {
|
||
|
|
label: '更新日期',
|
||
|
|
type: 'daterange',
|
||
|
|
'value-format': 'yyyy-MM-dd',
|
||
|
|
'range-separator': '至',
|
||
|
|
'start-placeholder': '开始日期',
|
||
|
|
'end-placeholder': '结束日期',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'select',
|
||
|
|
prop: 'dealStatus',
|
||
|
|
span: 4,
|
||
|
|
attrs: {
|
||
|
|
label: '审批状态',
|
||
|
|
},
|
||
|
|
options: [],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'input',
|
||
|
|
prop: 'branchUser',
|
||
|
|
span: 4,
|
||
|
|
attrs: {
|
||
|
|
label: '发起人',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
// 默认值
|
||
|
|
formData: {},
|
||
|
|
loading: false,
|
||
|
|
// table数据源
|
||
|
|
tableData: [
|
||
|
|
{
|
||
|
|
dealStatusStr: '待审核',
|
||
|
|
taskId: '961733',
|
||
|
|
dealNo: '174168351287689',
|
||
|
|
updateTimestamp: '2025-03-14 16:42:13',
|
||
|
|
startdesc: '修改基础数据-债券',
|
||
|
|
branchUserName: 'yhl',
|
||
|
|
rcsSerialNo: 'sdsBond-ccc',
|
||
|
|
type: 'WAITING',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
dealStatusStr: '审核通过',
|
||
|
|
taskId: '',
|
||
|
|
dealNo: '174131577541768',
|
||
|
|
updateTimestamp: '2025-03-13 15:55:14',
|
||
|
|
startdesc: '新增基础数据-账薄',
|
||
|
|
branchUserName: 'yhl',
|
||
|
|
rcsSerialNo: '11112222',
|
||
|
|
type: 'WAITING',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
tableInfo: {
|
||
|
|
// tableHeight: document.documentElement.clientHeight - 336,
|
||
|
|
},
|
||
|
|
// 表格项绑定的属性
|
||
|
|
columns: [
|
||
|
|
{
|
||
|
|
prop: 'dealNo',
|
||
|
|
minWidth: '100px',
|
||
|
|
align: 'center',
|
||
|
|
label: this.$t('field.dealNo'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'dealStatusStr',
|
||
|
|
minWidth: '100px',
|
||
|
|
align: 'center',
|
||
|
|
label: this.$t('field.dealStatus'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'startdesc',
|
||
|
|
minWidth: '200px',
|
||
|
|
align: 'center',
|
||
|
|
label: this.$t('field.startdesc'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'branchUserName',
|
||
|
|
minWidth: '100px',
|
||
|
|
align: 'center',
|
||
|
|
label: this.$t('field.branchUserName'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'rcsSerialNo',
|
||
|
|
minWidth: '100px',
|
||
|
|
align: 'center',
|
||
|
|
label: this.$t('field.businessNo'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'updateTimestamp',
|
||
|
|
minWidth: '160px',
|
||
|
|
align: 'center',
|
||
|
|
label: this.$t('field.updateTimestamp'),
|
||
|
|
},
|
||
|
|
],
|
||
|
|
// 表格行单机双击事件
|
||
|
|
events: {
|
||
|
|
'row-dblclick': async(row) => {
|
||
|
|
// 双击表格 行 触发的函数
|
||
|
|
console.log('row-dblclick', row);
|
||
|
|
this.clickRow = Object.assign({}, row);
|
||
|
|
this.isShow = true;
|
||
|
|
},
|
||
|
|
// 'row-click': (row) => {
|
||
|
|
// // 单机表格 行 触发的函数
|
||
|
|
// console.log('row-click', row);
|
||
|
|
// },
|
||
|
|
},
|
||
|
|
// 操作栏自定义按钮
|
||
|
|
operations: [
|
||
|
|
{
|
||
|
|
text: this.$t('button.viewProcess'),
|
||
|
|
type: 'text',
|
||
|
|
class: 'el-text-color',
|
||
|
|
callback: (row) => {
|
||
|
|
event.stopPropagation();
|
||
|
|
this.handleViewProcess(row);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
tableTopButton: [
|
||
|
|
{
|
||
|
|
text: this.$t('button.approvalBatch'),
|
||
|
|
type: 'default',
|
||
|
|
class: 'el-text-color',
|
||
|
|
disabled: true,
|
||
|
|
callback: (value) => {
|
||
|
|
this.handleBatchCheck(value);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
// 搜索查询的参数
|
||
|
|
searchParams: {
|
||
|
|
pageNum: 1,
|
||
|
|
pageSize: 20,
|
||
|
|
},
|
||
|
|
total: 0,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
async mounted() {
|
||
|
|
this.getTopSta();
|
||
|
|
this.getOptions();
|
||
|
|
// this.queryPage();
|
||
|
|
console.log(this.$route.meta.extraData.extraParams.type, 'tt');
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleClick(tab, event) {
|
||
|
|
console.log(tab.name, 'item');
|
||
|
|
this.activeName = tab.name;
|
||
|
|
this.searchParams.dealStatus = tab.name;
|
||
|
|
this.queryPage();
|
||
|
|
},
|
||
|
|
searchSubmit(val) {
|
||
|
|
console.log('search结果', val);
|
||
|
|
this.searchParams = { ...this.searchParams, ...val };
|
||
|
|
this.queryPage();
|
||
|
|
},
|
||
|
|
resetForm() {
|
||
|
|
this.formData = {};
|
||
|
|
},
|
||
|
|
outOperation(val, index, prop, num) {
|
||
|
|
console.log(val, index, prop, num);
|
||
|
|
},
|
||
|
|
// 页面展示条数改变事件-pageSize
|
||
|
|
handleSizeChange(pageSize) {
|
||
|
|
this.searchParams.pageSize = pageSize;
|
||
|
|
this.queryPage();
|
||
|
|
},
|
||
|
|
// 页面切换事件-pageNum
|
||
|
|
handleCurrentChange(pageNum) {
|
||
|
|
this.searchParams.pageNum = pageNum;
|
||
|
|
this.queryPage();
|
||
|
|
},
|
||
|
|
handleViewProcess(row) {
|
||
|
|
// 查看流程
|
||
|
|
console.log('查看流程', row);
|
||
|
|
this.showProcess = true;
|
||
|
|
this.clickRow = Object.assign({}, row);
|
||
|
|
},
|
||
|
|
// 数据列确定修改事件
|
||
|
|
handleCustomColumnChange(val) {
|
||
|
|
// console.log('数据列确定修改事件',val);
|
||
|
|
// this.tableData = mockData2;
|
||
|
|
},
|
||
|
|
// 多选事件
|
||
|
|
handleSelectionChange(val) {
|
||
|
|
console.log('多选事件 ', val);
|
||
|
|
this.selection = val;
|
||
|
|
},
|
||
|
|
// 自定义按钮 点击事件
|
||
|
|
async handleBatchCheck(val) {
|
||
|
|
// 批量审批
|
||
|
|
console.log('自定义按钮', val);
|
||
|
|
if (!this.selection.length > 0) {
|
||
|
|
const temp = await this.$confirmAction(
|
||
|
|
'至少选择一条审批流程?',
|
||
|
|
'warning',
|
||
|
|
'批量审批',
|
||
|
|
);
|
||
|
|
return temp;
|
||
|
|
}
|
||
|
|
this.$apis
|
||
|
|
.batchCheck({ strategy: 'agree', approveList: this.selection })
|
||
|
|
.then((res) => {
|
||
|
|
console.log(res, '确定回调---');
|
||
|
|
this.$message.success('请求成功');
|
||
|
|
});
|
||
|
|
},
|
||
|
|
async queryPage() {
|
||
|
|
console.log(this, 'this.extraParams');
|
||
|
|
const pageType = { 1: 'WAITING', 2: 'FINISH', 3: 'REFUSE', 4: 'MINE' };
|
||
|
|
const params = {
|
||
|
|
...this.searchParams,
|
||
|
|
dataType: this.$route.meta.extraData.extraParams.type,
|
||
|
|
queryPageType: pageType[this.activeName],
|
||
|
|
};
|
||
|
|
if (params.dealDate && params.dealDate.length > 0) {
|
||
|
|
params.dealDateStart = this.searchParams.dealDate[0];
|
||
|
|
params.dealDateEnd = this.searchParams.dealDate[1];
|
||
|
|
}
|
||
|
|
delete params.dealDate;
|
||
|
|
const obj = {
|
||
|
|
1: this.$apis.getParamsList,
|
||
|
|
2: this.$apis.getFinishList,
|
||
|
|
3: this.$apis.getRefuseList,
|
||
|
|
4: this.$apis.getInitiateList,
|
||
|
|
};
|
||
|
|
this.loading = true;
|
||
|
|
const res = await obj[this.activeName](params);
|
||
|
|
this.loading = false;
|
||
|
|
if (res.success) {
|
||
|
|
this.tableData = res.data.result.datals;
|
||
|
|
this.total = res.data.result.total;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getTopSta() {
|
||
|
|
this.$apis.getParamsStaList({ queryParam: { dataType: this.$route.meta.extraData.extraParams.type }}).then((res) => {
|
||
|
|
this.approveList.forEach((v, i) => {
|
||
|
|
v.count = res.data.result[v.key];
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
getOptions() {
|
||
|
|
this.$apis
|
||
|
|
.getApproveData({ codifierGrpCodes: 'ApproveStatus' })
|
||
|
|
.then((res) => {
|
||
|
|
this.formArr[1].options = res.data.result.ApproveStatus;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.approveIndex {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
// overflow:hidden;
|
||
|
|
.table-box{
|
||
|
|
height:100% !important
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.approve-tabs{
|
||
|
|
height:100%;
|
||
|
|
background:var(--bg-color-2);
|
||
|
|
border-radius:4px;
|
||
|
|
}
|
||
|
|
:deep(.el-tabs__content){
|
||
|
|
display: flex;
|
||
|
|
height: calc(100% - 50px);
|
||
|
|
}
|
||
|
|
:deep(.el-badge__content.is-fixed) {
|
||
|
|
top: 10px !important;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
:deep(.el-badge){
|
||
|
|
color: var(--color-90);
|
||
|
|
}
|
||
|
|
|
||
|
|
// :deep(.el-tabs__item:hover){
|
||
|
|
// background-color:rgba(255, 255, 255, 0.05) !important
|
||
|
|
// }
|
||
|
|
// :deep(.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active){
|
||
|
|
// background-color:rgb(64,80,101)
|
||
|
|
// }
|
||
|
|
</style>
|