update 征求意见流程
add 外部其他流程vue文件
This commit is contained in:
赵霄
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<internal-detail-page :content-padding="0" :title="pageTitle" :loading="loading">
|
||||
<!-- 标题右侧tab -->
|
||||
<template v-slot:titleRightCustom>
|
||||
<div class="table-operator-tab">
|
||||
<!--基础信息-->
|
||||
<a class="switch-item" :class="switchValue === 'base' ? 'table-operator-tab-active' : ''"
|
||||
@click="switchChange('base')">{{ $t('workCenter.basicInformation') }}
|
||||
</a>
|
||||
<!--人员信息-->
|
||||
<a class="switch-item" :class="switchValue === 'user' ? 'table-operator-tab-active' : ''"
|
||||
@click="switchChange('user')">{{ $t('workCenter.personalInformation') }}
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!--基本信息-->
|
||||
<div class="detail-page-scroll-content" v-show="switchValue === 'base'">
|
||||
<!--流程信息-->
|
||||
<div class="process-part-title">{{ $t('processInformation') }}</div>
|
||||
<a-form :form="processInfoForm">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<!--流程名称-->
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('processName')">
|
||||
<a-input :placeholder="$t('pleaseEnter') + $t('processName')"
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
:maxLength="50"
|
||||
disabled
|
||||
v-decorator="['processName']" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<!--截止日期-->
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('expirationDate')">
|
||||
<a-date-picker class="box-input"
|
||||
:placeholder="$t('pleaseSelect') + $t('expirationDate')"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-decorator="['processDueDate']"
|
||||
:disabled="disabled"
|
||||
style="width: 100%" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!--流程说明-->
|
||||
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('processExplain')">
|
||||
<a-input :placeholder="$t('pleaseEnter') + $t('processExplain')"
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
:maxLength="500"
|
||||
type="textarea"
|
||||
:disabled="disabled"
|
||||
v-decorator="['processDescription']" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<!--业务基本信息-->
|
||||
<div class="process-part-title">{{ $t('basicServiceInformation') }}</div>
|
||||
<div class="table-operator">
|
||||
<!-- 新增-->
|
||||
<a-button icon="plus" type="primary" @click="handleAdd">{{ $t('newlyAdded') }}</a-button>
|
||||
<!-- 批量删除-->
|
||||
<a-button type="primary" icon="delete" ghost @click="batchDel">{{ $t('batchDelete') }}</a-button>
|
||||
<div>
|
||||
<j-table
|
||||
:can-drag="true"
|
||||
:scroll="{x: '100%'}"
|
||||
ref="table"
|
||||
:rowKey="(record, index) => {return index}"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="false"
|
||||
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
||||
:loading="loading"
|
||||
:operation-list="operationList"
|
||||
@operationClick="operationClick">
|
||||
|
||||
</j-table>
|
||||
</div>
|
||||
</div>
|
||||
<!--流程审批信息-->
|
||||
<div class="process-part-title">{{ $t('processApprovalInformation') }}</div>
|
||||
<a-form :form="approvalInfoForm">
|
||||
<!--备注-->
|
||||
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('remarks')">
|
||||
<a-input :placeholder="$t('pleaseEnter') + $t('remarks')"
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
:maxLength="500"
|
||||
type="textarea"
|
||||
v-decorator="['handleText', validatorRules.handleText]" />
|
||||
</a-form-item>
|
||||
<!--附件-->
|
||||
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('businessSupport.questionAnswer.attach')">
|
||||
<j-upload v-decorator="['handleFile']" return-id />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!--人员信息-->
|
||||
<div class="detail-page-scroll-content p-0" v-show="switchValue === 'user'">
|
||||
<process-detail-list>
|
||||
<template #personnelInfo>
|
||||
<personnel-info ref="personnelInfo" :data="personnelInfoData" />
|
||||
</template>
|
||||
</process-detail-list>
|
||||
</div>
|
||||
|
||||
<!--底部按钮-->
|
||||
<div class="detail-page-bottom-operate-box">
|
||||
<!--转办 审批节点存在-->
|
||||
<a-button type="primary" :loading="loading" ghost icon="arrow-up" v-if="btnList.includes('return')" @click="handleTurnTo">
|
||||
{{ $t('turnTo') }}
|
||||
</a-button>
|
||||
<!--保存 发起节点、审批节点都存在-->
|
||||
<a-button type="primary" :loading="loading" ghost v-if="btnList.includes('save')" @click="handleSave">
|
||||
<i class="iconfont icon-save" />{{ $t('preservation') }}
|
||||
</a-button>
|
||||
<!--提交 发起节点存在-->
|
||||
<a-button type="primary" :loading="loading" @click="handleSubmit" v-if="btnList.includes('submit')" icon="upload">
|
||||
{{ $t('submit') }}
|
||||
</a-button>
|
||||
<!--同意 审批节点存在-->
|
||||
<a-button type="primary" :loading="loading" icon="check-circle" v-if="btnList.includes('agree')" @click="handleAgree">
|
||||
{{ $t('agree') }}
|
||||
</a-button>
|
||||
<!--驳回 审批节点存在-->
|
||||
<a-button type="primary" :loading="loading" icon="close-circle" v-if="btnList.includes('reject')" @click="handleReject">
|
||||
{{ $t('reject') }}
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!--表格新增、编辑表单-->
|
||||
<table-form-modal ref="modalForm" />
|
||||
</internal-detail-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InternalDetailPage from '../../../components/InternalDetailPage'
|
||||
import { WorkCenterMixin } from '../../../mixins/WorkCenterMixin'
|
||||
import PersonnelInfo from '../../../components/PersonnelInfo'
|
||||
import ProcessDetailList from '../../../components/ProcessDetailList'
|
||||
import { ProcessKey, ProcurementProcessNodes } from '../../../enums/commonEnums'
|
||||
import JTable from '../../../components/jero/JTable'
|
||||
import TableFormModal from './modules/TableFormModal'
|
||||
|
||||
export default {
|
||||
name: 'StandardProcurementProcess',
|
||||
components: { JTable, ProcessDetailList, PersonnelInfo, InternalDetailPage, TableFormModal },
|
||||
mixins: [WorkCenterMixin],
|
||||
computed: {
|
||||
pageTitle () {
|
||||
return `${this.$t('flowCenter')}${this.$route.meta.title}`
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
btnList: [],
|
||||
disabled: false,
|
||||
// 流程信息表单
|
||||
processInfoForm: this.$form.createForm(this),
|
||||
processInfo: {},
|
||||
// 审批信息的表单
|
||||
approvalInfoForm: this.$form.createForm(this),
|
||||
approvalInfo: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 4 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 20 }
|
||||
},
|
||||
longLabelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 2 }
|
||||
},
|
||||
longWrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 22 }
|
||||
},
|
||||
validatorRules: {
|
||||
// 备注
|
||||
handleText: {
|
||||
rules: [{ required: false, message: this.$t('pleaseEnter') + this.$t('remarks') }],
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
},
|
||||
columns: [
|
||||
{ // 标准编号
|
||||
title: this.$t('standardNumber'),
|
||||
width: 180,
|
||||
dataIndex: 'standardNumber'
|
||||
},
|
||||
{ // 标准名称
|
||||
title: this.$t('standardName'),
|
||||
width: 180,
|
||||
dataIndex: 'standardName'
|
||||
},
|
||||
{ // 采购理由
|
||||
title: this.$t('standardName'),
|
||||
width: 380,
|
||||
dataIndex: 'purchaseReason'
|
||||
},
|
||||
// 操作
|
||||
{
|
||||
title: this.$t('operation'),
|
||||
fixed: 'right',
|
||||
width: 150,
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
operationList: [
|
||||
{ // 编辑
|
||||
text: this.$t('edit'),
|
||||
clickEvent: 'handleEdit'
|
||||
},
|
||||
{ // 删除
|
||||
text: this.$t('delete'),
|
||||
clickEvent: 'handleDelete'
|
||||
}
|
||||
],
|
||||
dataSource: [{ id: 1 }],
|
||||
selectedRowKeys: [],
|
||||
currentNode: ''
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if (this.$route.query.processInstanceId || this.$route.query.draftId) {
|
||||
this.currentNode = this.$route.query.nodeId
|
||||
} else {
|
||||
this.currentNode = ProcurementProcessNodes.initiate.value
|
||||
}
|
||||
this.btnList = ProcurementProcessNodes.propertyOfValue('btn', this.currentNode)
|
||||
this.getPersonInfoStructure(ProcessKey.LEGAL_PROCUREMENT.value)
|
||||
},
|
||||
methods: {
|
||||
onSelectChange (selectedRowKeys) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
},
|
||||
/**
|
||||
* 循环操作按钮的操作
|
||||
* @param operation
|
||||
* @param record
|
||||
*/
|
||||
operationClick (operation, record) {
|
||||
this[operation.clickEvent](record)
|
||||
},
|
||||
handleAdd () {
|
||||
this.$refs.modalForm.add()
|
||||
},
|
||||
batchDel () {
|
||||
|
||||
},
|
||||
handleEdit (record) {
|
||||
this.$refs.modalForm.edit(record)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '~@assets/less/common.less';
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user