rcs5.0 commit
This commit is contained in:
wangxinfei
@@ -0,0 +1,389 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user