初始化
This commit is contained in:
aixianling
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div class="add-config">
|
||||
<ai-detail>
|
||||
<ai-title slot="title" :title="detailTitle" isShowBack isShowBottomBorder @onBackClick="handleBack"/>
|
||||
<template slot="step">
|
||||
<div class="step">
|
||||
<el-steps :active="activeStep" simple>
|
||||
<el-step v-for="(step,i) in processList" :key="i" v-bind="step" :icon="getStepIcon(i)"/>
|
||||
</el-steps>
|
||||
</div>
|
||||
</template>
|
||||
<template #content v-if="refresh">
|
||||
<baseInfo ref="baseInfo" :instance="instance" :dict="dict" v-show="activeStep==0"/>
|
||||
<applyForm ref="applyForm" :instance="instance" :dict="dict" v-show="activeStep==1"/>
|
||||
<attachmentMaterial ref="attachmentMaterial" :instance="instance" v-show="activeStep==2"/>
|
||||
<processApproval ref="processApproval" :approvalSteps="applyForm.approvalSteps" :instance="instance"
|
||||
:dict="dict" v-show="activeStep==3"/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button class="btn" v-if="activeStep==0" @click="handleBack">取消</el-button>
|
||||
<el-button class="btn" v-else @click="preStep">上一步</el-button>
|
||||
<el-button class="btn" type="primary" v-if="[0,1,2].includes(activeStep)" @click="nextStep">下一步</el-button>
|
||||
<el-button class="btn" type="primary" v-if="activeStep==3" @click="save">保存</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {applyForm, attachmentMaterial, baseInfo, processApproval} from './index'
|
||||
|
||||
export default {
|
||||
name: "addConfig",
|
||||
provide() {
|
||||
return {
|
||||
config: this
|
||||
}
|
||||
},
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
row: Object,
|
||||
processType: String
|
||||
},
|
||||
components: {baseInfo, applyForm, attachmentMaterial, processApproval},
|
||||
data() {
|
||||
return {
|
||||
activeStep: 0,
|
||||
baseInfo: {},
|
||||
applyForm: {
|
||||
tableId: "",
|
||||
approvalSteps: "",
|
||||
},
|
||||
processAnnexDefs: [],
|
||||
detailObj: {},
|
||||
refresh: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
processList() {
|
||||
return [
|
||||
{title: '基本信息', activeIndex: 0},
|
||||
{title: '申请表单', activeIndex: 1},
|
||||
{title: '附件材料', activeIndex: 2},
|
||||
{title: '审批流程', activeIndex: 3}
|
||||
]
|
||||
},
|
||||
detailTitle() {
|
||||
return this.detailObj?.id ? "编辑事项" : "添加事项"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 上一步
|
||||
* */
|
||||
preStep() {
|
||||
this.activeStep--
|
||||
},
|
||||
/**
|
||||
* 下一步
|
||||
*/
|
||||
nextStep() {
|
||||
switch (this.activeStep) {
|
||||
case 0:
|
||||
this.handleBaseInfo()
|
||||
break
|
||||
case 1:
|
||||
this.$refs['applyForm'].handleApplyForm().then(ret => {
|
||||
this.applyForm.tableId = ret.id
|
||||
this.applyForm.approvalSteps = ret.approvalSteps.toString()
|
||||
this.activeStep++
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
})
|
||||
break
|
||||
case 2:
|
||||
this.$refs['attachmentMaterial'].handleAttachmentMaterial().then(res => {
|
||||
this.annexs = res
|
||||
this.activeStep++
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
})
|
||||
break
|
||||
}
|
||||
},
|
||||
handleBaseInfo() {
|
||||
this.$refs['baseInfo'].banseInfoForm().then(res => {
|
||||
if (res) {
|
||||
this.$refs['applyForm'].getFormList()
|
||||
this.baseInfo = res
|
||||
this.activeStep++
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 保存
|
||||
*/
|
||||
save() {
|
||||
this.$refs['processApproval'].handleProcessApproval().then(res => {
|
||||
this.instance.post(`/app/approval-process-def/add-update`, {
|
||||
...this.detailObj,
|
||||
...this.baseInfo,
|
||||
processDefStatus: Number(this.baseInfo.processDefStatus),
|
||||
tableId: this.applyForm.tableId,
|
||||
processAnnexDefs: this.annexs.map(e => ({...e, mustFill: Number(e.mustFill)})),
|
||||
processNodeList: res.processNodeList,
|
||||
processType: this.processType
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success("保存成功")
|
||||
this.$router.push({query:{}})
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
})
|
||||
},
|
||||
getDetail(id) {
|
||||
this.instance.post(`/app/approval-process-def/info-id`, null, {params: {id}}).then(res => {
|
||||
if (res?.data) {
|
||||
this.detailObj = res.data
|
||||
this.refreshDetail()
|
||||
}
|
||||
})
|
||||
},
|
||||
getStepIcon(rowIndex) {
|
||||
if (rowIndex < this.activeStep) return "iconfont iconSteps_Finished"
|
||||
else if (this.activeStep == rowIndex) return "iconfont iconSteps_In_Progress"
|
||||
return ""
|
||||
},
|
||||
refreshDetail() {
|
||||
this.refresh = false
|
||||
this.$nextTick(() => this.refresh = true)
|
||||
},
|
||||
handleBack() {
|
||||
this.$router.push({query: {}})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.row?.id) {
|
||||
this.getDetail(this.row?.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-config {
|
||||
height: 100%;
|
||||
|
||||
.step {
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
font-size: 14px;
|
||||
|
||||
.el-steps {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 72px;
|
||||
padding: 0 calc(50% - 380px);
|
||||
|
||||
|
||||
::v-deep .el-step {
|
||||
font-weight: bold;
|
||||
|
||||
::v-deep .el-step__icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #fff;
|
||||
|
||||
.iconfont {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-step__main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.el-step__arrow {
|
||||
background: #D0D4DC;
|
||||
margin: 0 8px;
|
||||
height: 2px;
|
||||
|
||||
&:before, &:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-process {
|
||||
color: #2266FF;
|
||||
}
|
||||
|
||||
.is-wait {
|
||||
color: #666;
|
||||
border-color: #D0D4DC;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 92px;
|
||||
height: 32px;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<section class="apply-form">
|
||||
<ai-card title="表单信息">
|
||||
<template #content>
|
||||
<el-form label-suffix="：" label-width="180px" ref="applyForm" :rules="rules" :model="form">
|
||||
<el-form-item label="表单类型" prop="id">
|
||||
<el-select placeholder="请选择" size="small" v-model="form.id" @change="onChange" clearable style="width: 100%;">
|
||||
<el-option
|
||||
v-for="(item,i) in formList" :key="i"
|
||||
:label="item.tableName"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div class="border-wrap">
|
||||
<template v-for="(item,index) in tablelist" :ke="index">
|
||||
<ai-title :title="item.groupName"></ai-title>
|
||||
<el-form-item :label="[e.fieldName,e.fieldNameSuffix].join('')" v-for="(e,j) in item.value"
|
||||
:key="Math.random()">
|
||||
<el-input size="small" v-model="form.checkbox" :disabled="true" clearable placeholder="请输入"
|
||||
style="width: 100%;" v-if="['0','1','6'].includes(e.fieldDataType)"/>
|
||||
|
||||
<el-radio-group style="width: 100%;" v-if="e.fieldDataType==4" disabled>
|
||||
<el-radio :label="k.dictValue" v-for="(k,m) in dict.getDict(e.dictionaryCode)" :key="Math.random()">
|
||||
{{ k.dictName }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<el-checkbox-group style="width: 100%;" v-if="e.fieldDataType==5" disabled>
|
||||
<el-checkbox :label="p.dictName" v-for="(p,i) in dict.getDict(e.dictionaryCode)"
|
||||
:key="Math.random()"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
|
||||
<el-select placeholder="请选择" disabled size="small" clearable style="width: 100%;"
|
||||
v-if="e.fieldDataType==9" v-model="e.fieldDataValue">
|
||||
<el-option
|
||||
v-for="(item,i) in dict.getDict(e.fieldDbName)" :key="i"
|
||||
:label="item.dictName"
|
||||
:value="item.dictValue">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-date-picker
|
||||
v-model="form.picker"
|
||||
v-if="['2','3','7','8'].includes(e.fieldDataType)"
|
||||
:disabled="true"
|
||||
type="date"
|
||||
size="small"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="tablelist.length==0">
|
||||
<div class="no-data"></div>
|
||||
</template>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
</ai-card>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "applyForm",
|
||||
inject: ["config"],
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
approvalSteps: "",
|
||||
id: "",
|
||||
},
|
||||
formList: [],
|
||||
tablelist: [],
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
rules() {
|
||||
return {
|
||||
id: [{required: true, message: '请选择表单类型', trigger: 'change'}]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleApplyForm() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs['applyForm'].validate(valid => {
|
||||
if (valid) {
|
||||
resolve(this.form)
|
||||
} else {
|
||||
reject(false)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 根据表单类型查询列表
|
||||
* */
|
||||
onChange(id) {
|
||||
if (id) {
|
||||
let dictionaryCodeArr = []
|
||||
this.instance.post(`/app/zwsptablelist/queryDetailById?id=${id}`).then(res => {
|
||||
if (res && res.data) {
|
||||
let arr = []
|
||||
this.form.approvalSteps = res.data.approvalSteps
|
||||
res.data.tableFieldInfos.map((item, index) => {
|
||||
if (item.fieldType == 0) {
|
||||
if(item.dictionaryCode && dictionaryCodeArr.indexOf(item.dictionaryCode)==-1){
|
||||
dictionaryCodeArr.push(item.dictionaryCode)
|
||||
}
|
||||
let {groupIndex, groupName} = item
|
||||
if (!arr[groupIndex]) {
|
||||
arr[groupIndex] = {
|
||||
groupName,
|
||||
value: []
|
||||
}
|
||||
}
|
||||
arr[groupIndex].value.push({...item})
|
||||
}
|
||||
})
|
||||
if(dictionaryCodeArr.length){
|
||||
this.$dict.load(dictionaryCodeArr).then(()=>{
|
||||
this.tablelist = arr.filter(e => e)
|
||||
})
|
||||
}else {
|
||||
this.tablelist = arr.filter(e => e)
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.tablelist = []
|
||||
this.form.approvalSteps = ""
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取表单类型列表
|
||||
* */
|
||||
getFormList() {
|
||||
this.instance.post(`/app/zwsptablelist/list`, null, {
|
||||
current: 1,
|
||||
size: 9999,
|
||||
}).then(res => {
|
||||
if (res && res.data) {
|
||||
this.formList = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getFormList()
|
||||
if (this.config.detailObj?.id) {
|
||||
this.form = JSON.parse(JSON.stringify(this.config.detailObj?.tableInfo))
|
||||
this.onChange(this.form.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.apply-form {
|
||||
.border-wrap {
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
border: 1px solid #6FAFFF;
|
||||
|
||||
.no-data {
|
||||
background-size: 120px 120px;
|
||||
height: 160px;
|
||||
margin: 48px auto 10px;
|
||||
}
|
||||
|
||||
.rightBtn {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.small-input {
|
||||
width: 48px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
::v-deep .family-info {
|
||||
margin-left: 24px;
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
margin-left: 24px !important;
|
||||
}
|
||||
}
|
||||
::v-deep .el-radio{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class="attachment-material">
|
||||
<ai-card title="附件材料">
|
||||
<template #right>
|
||||
<span class="iconfont iconAdd rightBtn"></span>
|
||||
<span class="rightBtn" style="margin-left: 8px;" @click="dialog=true">新增行数</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<el-table
|
||||
:data="materialList"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table-header"
|
||||
align="center"
|
||||
empty-text="材料列表信息为空，点击标题右侧添加按钮进行添加"
|
||||
>
|
||||
<el-table-column align="left" prop="annexName" label="材料名称" width="280">
|
||||
<template slot-scope="scope">
|
||||
<div class="table-border">{{ scope.row.annexName }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="exampleFileId" label="样例">
|
||||
<template slot-scope="{row}">
|
||||
<el-upload action :on-exceed="list=>handleUpload({file:list[0]}).then(v=>row.exampleFileId=v)"
|
||||
:http-request="args=>handleUpload(args).then(v=>row.exampleFileId=v)" :limit="1" accept=".jpg,.png">
|
||||
<el-button style="width: 102px">{{ row.exampleFileId ? '重新选择图片' : '选择图片文件' }}</el-button>
|
||||
</el-upload>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="emptyFileId" label="空表">
|
||||
<template slot-scope="{row}">
|
||||
<el-upload action :on-exceed="list=>handleUpload({file:list[0]}).then(v=>row.emptyFileId=v)"
|
||||
:http-request="args=>handleUpload(args).then(v=>row.emptyFileId=v)" :limit="1" accept=".doc,.docx">
|
||||
<el-button style="width: 102px">{{ row.emptyFileId ? '重新选择word' : '选择word文件' }}</el-button>
|
||||
</el-upload>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="name" label="是否必填">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.mustFill"
|
||||
active-value="1" inactive-value="0"
|
||||
active-color="#5088FF"
|
||||
inactive-color="#D0D4DC">
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<span class="iconfont iconEdit icon-color89B" title="编辑" @click="editInfo(scope.$index)" style="margin-right: 10px;"/>
|
||||
<span class="iconfont iconDelete icon-color89B" title="删除" @click="deleteInfo(scope.$index)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-dialog
|
||||
title="添加附件材料"
|
||||
:visible.sync="dialog"
|
||||
@closed="form.annexName='',idAdd=true,index=null"
|
||||
@onConfirm="onConfirm"
|
||||
@onCancel="dialog=false"
|
||||
width="720px">
|
||||
<el-form :rules="rules" ref="materialForm" label-width="100px" :model="form">
|
||||
<el-form-item label="材料名称：" prop="annexName">
|
||||
<el-input v-model.trim="form.annexName" size="small" placeholder="请输入材料名称" show-word-limit :maxlength="32"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "attachmentMaterial",
|
||||
inject: ['config'],
|
||||
props: {
|
||||
instance: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
materialList: [],
|
||||
dialog: false,
|
||||
idAdd: true,
|
||||
index: null,
|
||||
form: {
|
||||
annexName: ""
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
rules() {
|
||||
return {
|
||||
annexName: [{required: true, message: '请输入材料名称', trigger: 'blur'}]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleAttachmentMaterial() {
|
||||
return Promise.resolve(this.materialList)
|
||||
},
|
||||
handleUpload(file) {
|
||||
let formData = new FormData()
|
||||
formData.append('file', file.file)
|
||||
return this.instance.post(`/admin/file/add`, formData).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success('上传成功')
|
||||
let data = res.data[0].split(';')
|
||||
return data[1]
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 添加附件材料
|
||||
* */
|
||||
onConfirm() {
|
||||
this.$refs['materialForm'].validate(valid => {
|
||||
if (valid) {
|
||||
if(this.idAdd){
|
||||
this.materialList.push({
|
||||
annexName: this.form.annexName,
|
||||
mustFill: "1",
|
||||
exampleFileId: "",
|
||||
emptyFileId: "",
|
||||
})
|
||||
}else {
|
||||
this.materialList[this.index].annexName = this.form.annexName
|
||||
}
|
||||
this.dialog = false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
deleteInfo(index) {
|
||||
this.$confirm("是否删除？").then(res => {
|
||||
this.materialList.splice(index, 1)
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 编辑标题
|
||||
*/
|
||||
editInfo(index) {
|
||||
this.dialog = true
|
||||
this.idAdd = false
|
||||
this.index = index
|
||||
this.form.annexName = JSON.parse(JSON.stringify(this.materialList[index].annexName))
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
if (this.config.detailObj?.id) {
|
||||
this.materialList = JSON.parse(JSON.stringify(this.config.detailObj?.processAnnexDefs))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.attachment-material {
|
||||
.rightBtn {
|
||||
font-size: 14px;
|
||||
color: #5088FF;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table-border {
|
||||
width: 260px;
|
||||
height: 32px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #D0D4DC;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
::v-deep .el-upload-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iconDelete {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
154
packages/processManagement/mattersConfig/components/baseInfo.vue
Normal file
154
packages/processManagement/mattersConfig/components/baseInfo.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<section class="base-info">
|
||||
<ai-card title="基本信息">
|
||||
<template #content>
|
||||
<el-form :model="form" :rules="rules" ref="baseInfoForm" label-suffix="：" label-width="100px">
|
||||
<el-form-item label="事项名称" prop="processName">
|
||||
<el-input v-model.trim="form.processName" size="small" clearable placeholder="请输入事项名称" :maxlength="30"
|
||||
show-word-limit/>
|
||||
</el-form-item>
|
||||
<el-row type="type" justify="space-between" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属部门" prop="department">
|
||||
<el-select placeholder="请选择" size="small" v-model="form.department" clearable style="width: 100%;">
|
||||
<el-option
|
||||
v-for="(item,i) in dict.getDict('hbDepartment')" :key="i"
|
||||
:label="item.dictName"
|
||||
:value="item.dictValue">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属分类" prop="classificationId">
|
||||
<el-select placeholder="请选择" size="small" v-model="form.classificationId" clearable
|
||||
style="width: 100%;">
|
||||
<el-option
|
||||
v-for="(item,i) in classList" :key="i"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="办结时限" prop="timeLimit">
|
||||
<el-input v-model.trim="form.timeLimit" oninput="value=value.replace(/[^\d]/g,'')" size="small" clearable
|
||||
placeholder="请输入天数" style="width: 270px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="办理须知" prop="needToKnow">
|
||||
<ai-editor v-model="form.needToKnow" :instance="instance" @validate="v=>valid=!v"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用" prop="processDefStatus">
|
||||
<el-switch
|
||||
v-model="form.processDefStatus"
|
||||
active-color="#5088FF"
|
||||
inactive-color="#D0D4DC" active-value="1" inactive-value="0">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</ai-card>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "baseInfo",
|
||||
inject: ['config'],
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
data() {
|
||||
const validTimeLimit = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('请输入办结时限'));
|
||||
} else {
|
||||
if (+value <= 0) {
|
||||
return callback(new Error('最小值为1'));
|
||||
}
|
||||
callback();
|
||||
}
|
||||
}
|
||||
return {
|
||||
form: {
|
||||
processName: "",
|
||||
department: "",
|
||||
classificationId: "",
|
||||
timeLimit: "",
|
||||
needToKnow: "",
|
||||
processDefStatus: "1",
|
||||
},
|
||||
valid:true,
|
||||
classList: [],
|
||||
rules: {
|
||||
processName: [{required: true, message: '请输入事项名称', trigger: 'blur'}],
|
||||
department: [{required: true, message: '请选择所属部门', trigger: 'change'}],
|
||||
classificationId: [{required: true, message: '请选择所属分类', trigger: 'change'}],
|
||||
timeLimit: [{required: true, validator: validTimeLimit, trigger: 'blur'}],
|
||||
needToKnow: [
|
||||
{required: true, message: '请输入办理须知', trigger: 'blur'},
|
||||
{
|
||||
validator: (r, v, cb) => {
|
||||
if (this.valid) {
|
||||
cb()
|
||||
} else {
|
||||
cb('字数超过限制')
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
processDefStatus: [{required: true, message: '请选择是否启用', trigger: 'change'}],
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
banseInfoForm() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs['baseInfoForm'].validate(valid => {
|
||||
if (valid) {
|
||||
resolve(this.form)
|
||||
} else {
|
||||
reject(false)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取分类
|
||||
*/
|
||||
getClassification() {
|
||||
this.instance.post(`/app/zwspapprovalclassification/list`, null, {
|
||||
params: {
|
||||
current: 1,
|
||||
status: 1,
|
||||
size: 9999
|
||||
}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.classList = res.data.records
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getClassification()
|
||||
if (this.config.detailObj?.id) {
|
||||
this.$nextTick(_=>{
|
||||
Object.keys(this.form).map(e => this.form[e] = this.config.detailObj[e])
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.base-info {
|
||||
.iconAudit {
|
||||
font-size: 36px;
|
||||
color: #3D94FB;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div class="config-list">
|
||||
<ai-list isTabs>
|
||||
<template #content>
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<el-select v-model="search.department" placeholder="请选择所属部门" @change="page.current=1,getList()"
|
||||
size="small" clearable>
|
||||
<el-option
|
||||
v-for="(item,i) in dict.getDict('hbDepartment')" :key="i"
|
||||
:label="item.dictName"
|
||||
:value="item.dictValue">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select v-model="search.classificationId" placeholder="请选择所属分类" @change="page.current=1,getList()"
|
||||
size="small" clearable>
|
||||
<el-option
|
||||
v-for="(item,i) in classList" :key="i"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input
|
||||
v-model="search.processName"
|
||||
size="small"
|
||||
placeholder="事项名称/创建人"
|
||||
@clear="search={},page.current=1,getList()"
|
||||
@keyup.enter.native="page.current=1,getList()"
|
||||
clearable
|
||||
suffix-icon="iconfont iconSearch"/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<el-button type="primary" icon="iconfont iconAdd" @click="goPage(tab.value==0 ? 'addConfig':'guidance')">添加{{tab.value==0?'事项':'办事指南'}}</el-button>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:header-cell-style="{fontWeight:'bold',color:'#333'}"
|
||||
:total="page.total"
|
||||
:current.sync="page.current"
|
||||
:size.sync="page.size"
|
||||
@getList="getList">
|
||||
<el-table-column label="是否启用" slot="processDefStatus" align="center" width="150">
|
||||
<template v-slot="{row}">
|
||||
<el-switch
|
||||
v-model="row.processDefStatus"
|
||||
@change="onChange(row)" active-value="1" inactive-value="0"
|
||||
active-color="#5088FF"
|
||||
inactive-color="#D0D4DC">
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" slot="options" align="center" width="150">
|
||||
<template v-slot="{row}">
|
||||
<el-button type="text" title="修改" @click="goPage(tab.value==0 ? 'addConfig':'guidance',row)">修改</el-button>
|
||||
<el-button type="text" title="删除" @click="delInfo(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import day from 'dayjs'
|
||||
|
||||
export default {
|
||||
name: "configList",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
tab: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
department: "",
|
||||
classificationId: "",
|
||||
processName: "",
|
||||
},
|
||||
page: {current: 1, size: 10},
|
||||
total: 0,
|
||||
row: {},
|
||||
tableData: [],
|
||||
classList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
colConfigs() {
|
||||
return [
|
||||
{
|
||||
prop: 'processName',
|
||||
align: 'left',
|
||||
label: '事项名称',
|
||||
},
|
||||
{
|
||||
prop: 'department',
|
||||
align: 'left',
|
||||
label: '所属部门',
|
||||
render: (h, {row}) => [ < span > {this.dict.getLabel('hbDepartment', row.department)} < /span>]
|
||||
},
|
||||
{
|
||||
prop: 'classificationName',
|
||||
align: 'center',
|
||||
label: '所属分类',
|
||||
},
|
||||
{
|
||||
prop: 'timeLimit',
|
||||
align: 'center',
|
||||
label: '办结时限（日）',
|
||||
},
|
||||
{
|
||||
prop: 'createUserName',
|
||||
align: 'center',
|
||||
label: '创建人',
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
align: 'center',
|
||||
label: '最后修改时间',
|
||||
render: (h, {row}) => [ < span > {day(row.createTime
|
||||
).
|
||||
format("YYYY-MM-DD HH:mm")
|
||||
}<
|
||||
/span>]
|
||||
},
|
||||
{slot: 'processDefStatus', align:'center', label:'是否启用',},
|
||||
{ slot: 'options',align:'center',label:'操作',},
|
||||
].filter(e=>this.tab.value==0 ? true : (e.prop!="timeLimit"))
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
goPage(comp, row = {}) {
|
||||
this.$emit("goPage", {comp, row})
|
||||
},
|
||||
/**
|
||||
* 获取分类
|
||||
*/
|
||||
getClassification() {
|
||||
this.instance.post(`/app/zwspapprovalclassification/list`, null, {
|
||||
params:{
|
||||
current: 1,
|
||||
status: 1,
|
||||
size: 9999
|
||||
}
|
||||
}).then(res => {
|
||||
if (res && res.data) {
|
||||
this.classList = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 删除
|
||||
* */
|
||||
delInfo({id}) {
|
||||
this.$confirm("是否删除").then(() => {
|
||||
this.instance.post(`/app/approval-process-def/delete?id=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success("删除成功")
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 启用，停用
|
||||
*/
|
||||
onChange({id, processDefStatus}) {
|
||||
this.instance.post(`/app/approval-process-def/enable-disable`, null, {
|
||||
params: {id}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success(processDefStatus == 0 ? "不启用" : "已启用")
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getList() {
|
||||
this.instance.post(`/app/approval-process-def/list`, null, {
|
||||
params: {
|
||||
...this.page,
|
||||
...this.search,
|
||||
processType: this.tab.value
|
||||
},
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.tableData = res.data.records
|
||||
this.page.total = res.data.total;
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
this.getClassification()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.config-list {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
219
packages/processManagement/mattersConfig/components/guidance.vue
Normal file
219
packages/processManagement/mattersConfig/components/guidance.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div class="guidance">
|
||||
<ai-detail>
|
||||
<ai-title slot="title" :title="detailTitle" isShowBack isShowBottomBorder @onBackClick="handleBack"/>
|
||||
<template #content>
|
||||
<ai-card title="基本信息">
|
||||
<template #content>
|
||||
<el-form :model="form" :rules="rules" ref="baseInfoForm" label-suffix="：" label-width="100px">
|
||||
<el-form-item label="事项名称" prop="processName">
|
||||
<el-input v-model.trim="form.processName" size="small" clearable placeholder="请输入事项名称" :maxlength="30"
|
||||
show-word-limit/>
|
||||
</el-form-item>
|
||||
<el-row type="type" justify="space-between" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属部门" prop="department">
|
||||
<el-select placeholder="请选择" size="small" v-model="form.department" clearable style="width: 100%;">
|
||||
<el-option
|
||||
v-for="(item,i) in dict.getDict('hbDepartment')" :key="i"
|
||||
:label="item.dictName"
|
||||
:value="item.dictValue">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属分类" prop="classificationId">
|
||||
<el-select placeholder="请选择" size="small" v-model="form.classificationId" clearable
|
||||
style="width: 100%;">
|
||||
<el-option
|
||||
v-for="(item,i) in classList" :key="i"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="办理须知" prop="needToKnow">
|
||||
<ai-editor v-model.trim="form.needToKnow" :instance="instance"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用" prop="processDefStatus">
|
||||
<el-switch
|
||||
v-model="form.processDefStatus"
|
||||
active-color="#5088FF"
|
||||
inactive-color="#D0D4DC" active-value="1" inactive-value="0">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</ai-card>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button class="btn" @click="handleBack">取消</el-button>
|
||||
<el-button class="btn" type="primary" @click="save">保存</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "addConfig",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
row: Object,
|
||||
processType: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
processName: "",
|
||||
department: "",
|
||||
classificationId: "",
|
||||
needToKnow: "",
|
||||
processDefStatus: "1",
|
||||
},
|
||||
classList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
rules() {
|
||||
return {
|
||||
processName: [{required: true, message: '请输入事项名称', trigger: 'blur'}],
|
||||
department: [{required: true, message: '请选择所属部门', trigger: 'change'}],
|
||||
classificationId: [{required: true, message: '请选择所属分类', trigger: 'change'}],
|
||||
needToKnow: [{required: true, message: '请输入办理须知', trigger: 'blur'}],
|
||||
processDefStatus: [{required: true, message: '请选择是否启用', trigger: 'change'}],
|
||||
}
|
||||
},
|
||||
detailTitle() {
|
||||
return this.row?.id ? "编辑办事指南" : "添加办事指南"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 获取分类
|
||||
*/
|
||||
getClassification() {
|
||||
this.instance.post(`/app/zwspapprovalclassification/list`, null, {
|
||||
params: {
|
||||
current: 1,
|
||||
status: 1,
|
||||
size: 9999
|
||||
}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.classList = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 保存
|
||||
*/
|
||||
save() {
|
||||
this.$refs["baseInfoForm"].validate(valid => {
|
||||
if (valid) {
|
||||
this.instance.post(`/app/approval-process-def/add-update`, {
|
||||
...this.form,
|
||||
id: this.row.id,
|
||||
processType: this.processType
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success("保存成功")
|
||||
this.$router.push({query: {}})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getDetail(id) {
|
||||
this.instance.post(`/app/approval-process-def/info-id`, null, {params: {id}}).then(res => {
|
||||
if (res?.data) {
|
||||
Object.keys(this.form).map(e => this.form[e] = res.data[e])
|
||||
}
|
||||
})
|
||||
},
|
||||
handleBack() {
|
||||
this.$router.push({query: {}})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getClassification()
|
||||
if (this.row?.id) {
|
||||
this.getDetail(this.row?.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-config {
|
||||
height: 100%;
|
||||
|
||||
.step {
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
font-size: 14px;
|
||||
|
||||
.el-steps {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 72px;
|
||||
padding: 0 calc(50% - 380px);
|
||||
|
||||
|
||||
::v-deep .el-step {
|
||||
font-weight: bold;
|
||||
|
||||
::v-deep .el-step__icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #fff;
|
||||
|
||||
.iconfont {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-step__main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.el-step__arrow {
|
||||
background: #D0D4DC;
|
||||
margin: 0 8px;
|
||||
height: 2px;
|
||||
|
||||
&:before, &:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-process {
|
||||
color: #2266FF;
|
||||
}
|
||||
|
||||
.is-wait {
|
||||
color: #666;
|
||||
border-color: #D0D4DC;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 92px;
|
||||
height: 32px;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,4 @@
|
||||
export {default as baseInfo} from './baseInfo'
|
||||
export {default as applyForm} from './applyForm'
|
||||
export {default as attachmentMaterial} from './attachmentMaterial'
|
||||
export {default as processApproval} from './processApproval'
|
||||
@@ -0,0 +1,482 @@
|
||||
<template>
|
||||
<div class="process-approval">
|
||||
<ai-card title="流程设置">
|
||||
<template #right>
|
||||
<span class="iconfont iconAdd rightBtn"></span>
|
||||
<span class="rightBtn" style="margin-left: 8px;" @click="addAppStep(1)">添加审批步骤</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<el-steps direction="vertical">
|
||||
<el-step v-for="(item,index) in form.processNodeList" :key="index">
|
||||
<div slot="title" class="step_title">
|
||||
<p>{{ item.nodeName }}（{{ dict.getLabel('nodeType', item.nodeType) }}）</p>
|
||||
<div class="peraoBtn">
|
||||
<el-button type="text" :disabled="index==0" class="iconfont iconMoveUp"
|
||||
@click="form.processNodeList[index] = form.processNodeList.splice(index-1, 1,form.processNodeList[index])[0]">
|
||||
上移
|
||||
</el-button>
|
||||
<el-button type="text" :disabled="index==(form.processNodeList.length-1)" class="iconfont iconMoveDown"
|
||||
@click="form.processNodeList[index] = form.processNodeList.splice(index+1, 1,form.processNodeList[index])[0]">
|
||||
下移
|
||||
</el-button>
|
||||
<el-button type="text" class="iconfont iconEdit" @click="addAppStep(2,item,index)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button type="text" class="iconfont iconDelete" @click="deleteInfo(index)">
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="description" class="step_desc">
|
||||
<div class="desc_style">
|
||||
<p>
|
||||
选人方式：<span>{{ dict.getLabel('candidateApproverType', item.candidateApproverType) }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="desc_person" v-if="item.scopeCandidates==1||item.candidateApproverType==1">
|
||||
<p class="desc_p">指定人员：</p>
|
||||
<div class="desc_div">
|
||||
<el-tag type="info" closable v-for="(value,i) in item.candidateList" :key="i"
|
||||
@close="item.candidateList.splice(i,1)">
|
||||
{{ value.name }}
|
||||
</el-tag>
|
||||
<el-button v-if="item.candidateList.length>0" type="text" @click="item.candidateList=[]">清空
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<ai-wechat-selecter slot="append" :instance="instance" :props="{id:'wxUserId',label:'name'}"
|
||||
v-model="item.candidateList" v-if="item.candidateApproverType==1">
|
||||
<el-button size="mini" type="primary">选择指定人员</el-button>
|
||||
</ai-wechat-selecter>
|
||||
</div>
|
||||
</el-step>
|
||||
</el-steps>
|
||||
</template>
|
||||
</ai-card>
|
||||
<el-dialog :title="titleType" class="editStyle" :visible.sync="isAddStep" width="575px" height="380px"
|
||||
:close-on-click-modal="false">
|
||||
<el-form :model="nodeObj" label-width="120px" ref="addForm" :rules="addRules">
|
||||
<el-form-item label="审批步骤名称：" prop="nodeName">
|
||||
<el-input size="small" v-model="nodeObj.nodeName" placeholder="如：部门主管审批（限10个字）" :maxLength="10"
|
||||
clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="审批方式：" prop="nodeType">
|
||||
<el-radio-group v-model="nodeObj.nodeType">
|
||||
<section style="position: relative;top: 10px;margin-bottom: 30px;">
|
||||
<el-radio :label="2">或签
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
width="200"
|
||||
trigger="click"
|
||||
content="或签是指该节点指定多名负责人审批时，其中任何一人完成审批即可。适合一个事项只需要某个岗位任何一人审批即可的业务场景。">
|
||||
<el-button class="el-icon-warning" slot="reference"
|
||||
style="padding:0;height:14px;border:0;"></el-button>
|
||||
</el-popover>
|
||||
</el-radio>
|
||||
<el-radio :label="3">抄送
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
width="200"
|
||||
trigger="click"
|
||||
content="抄送是指一个事项审批完成后，抄送给需要知晓的单位或个人，被抄送的对象可以查阅该事项内容，无需审批。适合一个事项无需对方审批，但审批完成后需要通知对方知晓的业务场景。">
|
||||
<el-button class="el-icon-warning" slot="reference"
|
||||
style="padding:0;height:14px;border:0;"></el-button>
|
||||
</el-popover>
|
||||
</el-radio>
|
||||
</section>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" style="text-align: center;">
|
||||
<el-button style="width: 92px;" size="small" @click="isAddStep = false">取消</el-button>
|
||||
<el-button style="width: 92px;" size="small" type="primary" @click="saveAddProgress('addForm')">确认
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "processApproval",
|
||||
inject: ['config'],
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
approvalSteps: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
processNodeList: [],
|
||||
},
|
||||
areaId: "",
|
||||
isAddStep: false,
|
||||
isSelectImg: false,
|
||||
isSelectUnit: false,
|
||||
isSelectPerson: false,
|
||||
nodeObj: {
|
||||
candidateApproverType: '1',
|
||||
candidateList: [],
|
||||
nodeIndex: '',
|
||||
nodeName: '',
|
||||
nodeType: '',
|
||||
scopeCandidates: ''
|
||||
},
|
||||
indexType: '',
|
||||
titleType: '',
|
||||
bomIndex: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
addRules() {
|
||||
return {
|
||||
nodeName: [
|
||||
{required: true, message: '请输入审批节点名称', trigger: 'change'}
|
||||
],
|
||||
nodeType: [
|
||||
{required: true, message: '请选择审批方式', trigger: 'change'}
|
||||
],
|
||||
candidateApproverType: [
|
||||
{required: true, message: '请选择选人方式', trigger: 'change'}
|
||||
],
|
||||
scopeCandidates: [
|
||||
{required: true, message: '请选择选人范围', trigger: 'change'}
|
||||
]
|
||||
}
|
||||
},
|
||||
...mapState(['user'])
|
||||
},
|
||||
methods: {
|
||||
handleProcessApproval() {
|
||||
return Promise.resolve(this.form)
|
||||
},
|
||||
/**
|
||||
*删除
|
||||
* */
|
||||
deleteInfo(index) {
|
||||
this.$confirm("是否删除").then(() => {
|
||||
this.form.processNodeList.splice(index, 1)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 添加流程
|
||||
* @param index
|
||||
* @param item
|
||||
* @param i
|
||||
*/
|
||||
addAppStep(index, item, i) {
|
||||
this.isAddStep = true;
|
||||
this.bomIndex = i;
|
||||
this.indexType = index;
|
||||
if (index == 2) {
|
||||
this.titleType = '编辑审批步骤';
|
||||
item.nodeType = item.nodeType * 1;
|
||||
item.candidateApproverType = item.candidateApproverType * 1;
|
||||
item.scopeCandidates = item.scopeCandidates * 1;
|
||||
this.nodeObj = JSON.parse(JSON.stringify(item));
|
||||
} else {
|
||||
this.titleType = '添加审批步骤';
|
||||
if (this.form.processNodeList.length > 0) {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
},
|
||||
// 确定添加审批步骤
|
||||
saveAddProgress(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.nodeObj.scopeCandidates == 0) this.nodeObj.candidateList = [];
|
||||
if (this.indexType == 1) {
|
||||
this.form.processNodeList.push(JSON.parse(JSON.stringify(this.nodeObj)));
|
||||
} else {
|
||||
this.form.processNodeList.splice(this.bomIndex, 1, JSON.parse(JSON.stringify(this.nodeObj)));
|
||||
}
|
||||
this.$refs[formName].resetFields();
|
||||
this.isAddStep = false;
|
||||
}
|
||||
})
|
||||
},
|
||||
init() {
|
||||
this.nodeObj = {
|
||||
candidateApproverType: '1',
|
||||
candidateList: [],
|
||||
nodeIndex: '',
|
||||
nodeName: '',
|
||||
nodeType: '',
|
||||
scopeCandidates: ''
|
||||
};
|
||||
this.$refs['addForm'].resetFields();
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.areaId = this.user.info.areaId.substring(0, 6) + '000000'
|
||||
if (this.config.detailObj?.id) {
|
||||
|
||||
Object.keys(this.form).map(e => this.form[e] = this.config.detailObj[e])
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.process-approval {
|
||||
.rightBtn {
|
||||
font-size: 14px;
|
||||
color: #5088FF;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.step_title {
|
||||
font-weight: 700;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
display: flex;
|
||||
padding: 0 8px;
|
||||
justify-content: space-between;
|
||||
color: #333;
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
div {
|
||||
span {
|
||||
margin-left: 16px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step_desc {
|
||||
font-size: 14px;
|
||||
padding: 8px;
|
||||
color: #999;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.desc_style {
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
|
||||
p {
|
||||
margin-right: 80px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.desc_person {
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.desc_p {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.desc_div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add_btn {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
background: #F3F6F9;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
.el-button {
|
||||
width: 92px;
|
||||
}
|
||||
}
|
||||
|
||||
.select_per {
|
||||
width: 640px;
|
||||
height: 400px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
|
||||
.add_item {
|
||||
width: 310px;
|
||||
height: 400px;
|
||||
background: rgba(252, 252, 252, 1);
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba(208, 212, 220, 1);
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
|
||||
.add_top {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: rgba(245, 245, 245, 1);
|
||||
border-bottom: 1px solid rgba(208, 212, 220, 1);
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tree_list {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.add_buttom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
font-size: 12px;
|
||||
width: 310px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
z-index: 10000;
|
||||
background: rgba(245, 246, 247, 1);
|
||||
color: rgba(51, 51, 51, 1);
|
||||
box-shadow: 0px 1px 0px 0px rgba(216, 220, 227, 1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.add_tag {
|
||||
width: 310px;
|
||||
height: 360px;
|
||||
overflow-y: auto;
|
||||
|
||||
.el-tag {
|
||||
margin: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon_style {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.icon:hover {
|
||||
border-color: #5088FF;
|
||||
}
|
||||
|
||||
.icon_color {
|
||||
border-color: #5088FF;
|
||||
}
|
||||
}
|
||||
|
||||
.dia_per_content {
|
||||
width: 640px;
|
||||
height: 400px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
|
||||
.add_item {
|
||||
width: 310px;
|
||||
height: 400px;
|
||||
background: rgba(252, 252, 252, 1);
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba(208, 212, 220, 1);
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
|
||||
.add_top {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: rgba(245, 245, 245, 1);
|
||||
border-bottom: 1px solid rgba(208, 212, 220, 1);
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tree_list {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.add_buttom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
font-size: 12px;
|
||||
width: 310px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
z-index: 10000;
|
||||
background: rgba(245, 246, 247, 1);
|
||||
color: rgba(51, 51, 51, 1);
|
||||
box-shadow: 0px 1px 0px 0px rgba(216, 220, 227, 1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.add_tag {
|
||||
width: 310px;
|
||||
height: 360px;
|
||||
overflow-y: auto;
|
||||
|
||||
.el-tag {
|
||||
margin: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.peraoBtn {
|
||||
.el-button--text {
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-step__icon.is-text {
|
||||
border: 2px solid #2266FF;
|
||||
background: #2266FF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
::v-deep .el-step__line {
|
||||
background-color: #D0D4DC;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user