2
This commit is contained in:
yanran200730
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<div class="add-config" :class="[activeStep == 1 ? 'formLayout' : '']">
|
||||
<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" :value="filedList" :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: {
|
||||
tableInfo: {}
|
||||
},
|
||||
refresh: true,
|
||||
filedList: [],
|
||||
tableFieldInfos: []
|
||||
}
|
||||
},
|
||||
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'].onConfirm().then(res => {
|
||||
if (!res.length) {
|
||||
return this.$message.error('表单配置不能为空')
|
||||
}
|
||||
this.tableFieldInfos = res
|
||||
this.activeStep++
|
||||
})
|
||||
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),
|
||||
tableInfo: {
|
||||
...this.detailObj.tableInfo,
|
||||
tableFieldInfos: this.tableFieldInfos
|
||||
},
|
||||
tableType: 0,
|
||||
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.filedList = res.data.tableInfo.tableFieldInfos
|
||||
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%;
|
||||
|
||||
&.formLayout {
|
||||
::v-deep .ai-detail__content--wrapper {
|
||||
max-width: 100%;
|
||||
height: calc(100%)!important;
|
||||
padding: 0!important;
|
||||
overflow: hidden!important;
|
||||
}
|
||||
}
|
||||
|
||||
.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,895 @@
|
||||
<template>
|
||||
<div class="form-config">
|
||||
<el-scrollbar class="left">
|
||||
<div class="left-item" v-for="(component, index) in components" :key="index">
|
||||
<div class="left-item__title">
|
||||
<h2>{{ component.label }}</h2>
|
||||
<span>{{ component.tips }}</span>
|
||||
</div>
|
||||
<div class="left-item__list">
|
||||
<draggable
|
||||
class="components-draggable"
|
||||
:list="component.children"
|
||||
:group="{ name: 'componentsGroup', pull: 'clone', put: false }"
|
||||
:sort="false"
|
||||
:move="onMove"
|
||||
:clone="cloneComponent"
|
||||
@end="onEnd">
|
||||
<div class="left-item__item" v-for="(item, i) in component.children" :key="i" @click="clone(item)">
|
||||
<i class="iconfont" :class="item.icon"></i>
|
||||
<span>{{ item.fixedLabel }}</span>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<el-scrollbar class="middle">
|
||||
<div class="middle-content">
|
||||
<div class="middle-content__wrapper">
|
||||
<el-form label-width="100px" label-position="right">
|
||||
<draggable
|
||||
class="middle-draggable"
|
||||
style="height: 100%;"
|
||||
:animation="340"
|
||||
scroll
|
||||
v-model="targetList"
|
||||
element="div"
|
||||
@end="onElEnd"
|
||||
:sort="true">
|
||||
<ai-card
|
||||
:class="[groupIndex === j && isGroup ? 'active' : '']"
|
||||
:data-index="j"
|
||||
@click.native.stop="groupIndex = j, activeIndex = -1, isGroup = true"
|
||||
:title="group.groupName" v-for="(group, j) in targetList"
|
||||
:key="j">
|
||||
<template #content>
|
||||
<draggable
|
||||
class="ai-form"
|
||||
style="height: 100%;"
|
||||
v-model="group.column"
|
||||
:animation="340"
|
||||
scroll
|
||||
@end="onElEnd"
|
||||
element="div"
|
||||
draggable=".components-item"
|
||||
group="componentsGroup"
|
||||
:sort="true">
|
||||
<div
|
||||
class="components-item"
|
||||
v-for="(item, i) in group.column"
|
||||
:style="{width: item.grid * 100 + '%'}"
|
||||
:class="[groupIndex === j && activeIndex === i ? 'active' : '']"
|
||||
@click.stop="groupIndex = j, activeIndex = i, isGroup = false"
|
||||
:key="i">
|
||||
<div class="left-item__item--remove" title="删除字段" v-show="groupIndex === j && activeIndex === i" @click.stop="removeItem(j, i)">
|
||||
<i class="iconfont iconDelete"></i>
|
||||
<span>删除字段</span>
|
||||
</div>
|
||||
<el-form-item style="width: 100%;" :label="item.fieldName" :rules="[{ required: item.mustFill === '1' ? true : false }]">
|
||||
<template v-if="item.fieldDataType === '1'">
|
||||
<el-input :disabled="item.disable === '1'" size="small" placeholder="请输入" v-model="item.defaultValue"></el-input>
|
||||
</template>
|
||||
<template v-if="item.fieldDataType === '4'">
|
||||
<el-radio-group v-model="item.defaultValue" :disabled="item.disable === '1'">
|
||||
<el-radio :label="field.label" v-for="(field, index) in item.options" :key="index">{{ field.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<template v-if="item.fieldDataType === '0'">
|
||||
<el-input-number style="width: 100%;" v-model="item.defaultValue" :placeholder="item.fieldTips"></el-input-number>
|
||||
</template>
|
||||
<template v-if="item.fieldDataType === '3'">
|
||||
<el-date-picker
|
||||
v-model="item.defaultValue"
|
||||
size="small"
|
||||
:placeholder="item.fieldTips">
|
||||
</el-date-picker>
|
||||
</template>
|
||||
<template v-if="item.fieldDataType === '8'">
|
||||
<el-date-picker
|
||||
v-model="item.defaultValue"
|
||||
size="small"
|
||||
:placeholder="item.fieldTips">
|
||||
</el-date-picker>
|
||||
</template>
|
||||
<template v-if="item.fieldDataType === '9'">
|
||||
<el-select :disabled="item.disable === '1'" style="width: 100%;" size="small" :placeholder="item.fieldTips" v-model="item.defaultValue">
|
||||
<el-option
|
||||
v-for="(filed, index) in item.options"
|
||||
:key="index"
|
||||
:label="filed.label"
|
||||
:value="filed.label">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-if="item.fieldDataType === '5'" >
|
||||
<el-checkbox-group v-model="item.defaultValue" :disabled="item.disable === '1'">
|
||||
<el-checkbox :label="field.label" v-for="(field, index) in item.options" :key="index">{{ field.label }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</draggable>
|
||||
</template>
|
||||
</ai-card>
|
||||
</draggable>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<el-scrollbar class="right">
|
||||
<div class="right-item" v-if="isGroup">
|
||||
<div class="right-item__title no-solid">
|
||||
<h2>分组名称</h2>
|
||||
</div>
|
||||
<div class="right-item__content">
|
||||
<el-input placeholder="请输入分组名称" :maxlength="32" show-word-limit v-model="currTarget.groupName"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-right__del" @click="removeGroup" v-if="isGroup && targetList.length > 1">
|
||||
<span>删除分组</span>
|
||||
</div>
|
||||
<div class="right-item" v-if="activeIndex > -1">
|
||||
<div class="right-item__title no-solid">
|
||||
<h2>标题名称</h2>
|
||||
</div>
|
||||
<div class="right-item__content">
|
||||
<el-input placeholder="标题名称" :maxlength="32" show-word-limit v-model="currTarget.fieldName"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-item right-item__select" v-if="['9', '4', '5'].includes(currTarget.fieldDataType)">
|
||||
<div class="right-item__title no-solid">
|
||||
<h2>选项设置</h2>
|
||||
</div>
|
||||
<div class="right-item__select--wrapper">
|
||||
<draggable
|
||||
v-model="currTarget.options"
|
||||
:animation="340"
|
||||
group="select"
|
||||
handle=".mover"
|
||||
:sort="true">
|
||||
<div class="select-item" v-for="(item, index) in currTarget.options" :key="index">
|
||||
<i class="iconfont iconjdq_led_show mover"></i>
|
||||
<el-input placeholder="请输入选项名" :maxlength="30" show-word-limit v-model="item.label"></el-input>
|
||||
<i class="iconfont iconDelete" @click="removeOptions(index)"></i>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
<el-button type="text" class="add-select" @click="addOptions">添加选项</el-button>
|
||||
</div>
|
||||
<div class="right-item__group" v-if="activeIndex > -1" key="radio">
|
||||
<div class="right-item" v-if="currTarget.fieldDataType == 1 || currTarget.fieldDataType == 0">
|
||||
<div class="right-item__title">
|
||||
<h2>最多输入字符</h2>
|
||||
</div>
|
||||
<div class="right-item__content">
|
||||
<el-input placeholder="字符个数" v-model="currTarget.fieldLength">
|
||||
<span slot="append">个</span>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-item">
|
||||
<div class="right-item__title no-solid">
|
||||
<div class="right-item__title--left">
|
||||
<h2>是否必填</h2>
|
||||
</div>
|
||||
<el-switch v-model="currTarget.mustFill" active-value="1" inactive-value="0"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
import { components } from './config'
|
||||
|
||||
export default {
|
||||
name: 'applyForm',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
params: Object,
|
||||
type: String,
|
||||
value: Array
|
||||
},
|
||||
|
||||
components: {
|
||||
draggable
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
isGroup: false,
|
||||
components: components,
|
||||
targetList: [{
|
||||
type: 'group',
|
||||
fieldName: '卡片',
|
||||
fixedLabel: '卡片',
|
||||
icon: 'iconpic',
|
||||
groupName: '基础信息',
|
||||
column: []
|
||||
}],
|
||||
groupIndex: -1,
|
||||
activeIndex: -1,
|
||||
currTarget: {}
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
activeIndex () {
|
||||
if (this.activeIndex > -1 && this.groupIndex > -1 && !this.isGroup) {
|
||||
const filed = this.targetList[this.groupIndex].column[this.activeIndex]
|
||||
this.currTarget = filed
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if (this.groupIndex > -1 && this.isGroup) {
|
||||
this.currTarget = this.targetList[this.groupIndex].column[this.activeIndex]
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
this.currTarget = {}
|
||||
},
|
||||
|
||||
groupIndex () {
|
||||
if (this.activeIndex > -1 && this.groupIndex > -1 && !this.isGroup) {
|
||||
const filed = this.targetList[this.groupIndex].column[this.activeIndex]
|
||||
this.currTarget = filed
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if (this.groupIndex > -1 && this.isGroup) {
|
||||
this.currTarget = this.targetList[this.groupIndex]
|
||||
return
|
||||
}
|
||||
|
||||
this.currTarget = {}
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.init()
|
||||
},
|
||||
|
||||
methods: {
|
||||
removeItem (j, i) {
|
||||
this.groupIndex = -1
|
||||
this.activeIndex = -1
|
||||
this.targetList[j].column.splice(i, 1)
|
||||
},
|
||||
|
||||
init () {
|
||||
if (this.value.length) {
|
||||
let arr = this.value
|
||||
let groups = this.unique(arr.map(v => v.groupName))
|
||||
this.targetList = groups.map(groupName => {
|
||||
const column = arr.filter(v => v.groupName === groupName).map(item => {
|
||||
if (['9', '4', '5'].includes(item.fieldDataType)) {
|
||||
item.options = item.selectValues.split('`').map(v => {
|
||||
return {
|
||||
label: v,
|
||||
value: ''
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (item.fieldDataType === '5') {
|
||||
item.defaultValue = []
|
||||
}
|
||||
|
||||
return {
|
||||
...item,
|
||||
grid: 1
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
type: 'group',
|
||||
fieldName: '卡片',
|
||||
fixedLabel: '卡片',
|
||||
icon: 'iconpic',
|
||||
groupName,
|
||||
column: column
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
removeGroup () {
|
||||
if (this.targetList.length === 1) {
|
||||
return this.$message.error('分组不能小于1')
|
||||
}
|
||||
|
||||
this.targetList.splice(this.groupIndex, 1)
|
||||
this.groupIndex = 0
|
||||
this.isGroup = true
|
||||
this.activeIndex = -1
|
||||
},
|
||||
|
||||
unique (arr) {
|
||||
return arr.filter((item, index) => {
|
||||
return arr.indexOf(item, 0) === index
|
||||
})
|
||||
},
|
||||
|
||||
onConfirm () {
|
||||
let result = []
|
||||
this.targetList.forEach((group, i) => {
|
||||
group.column.forEach(item => {
|
||||
result.push({
|
||||
...item,
|
||||
groupIndex: i,
|
||||
groupName: group.groupName,
|
||||
selectValues: item.options ? item.options.map(v => v.label).join('`') : ''
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
return new Promise(resolve => {
|
||||
resolve(result)
|
||||
})
|
||||
},
|
||||
|
||||
addOptions () {
|
||||
const len = this.targetList[this.groupIndex].column[this.activeIndex].options.length
|
||||
let label = `选项${len + 1}`
|
||||
|
||||
const index= this.targetList[this.groupIndex].column[this.activeIndex].options.findIndex(v => label === v.label)
|
||||
if (index > -1) {
|
||||
label = `新选项${len + 1}`
|
||||
}
|
||||
|
||||
this.targetList[this.groupIndex].column[this.activeIndex].options.push({
|
||||
label: label,
|
||||
value: ''
|
||||
})
|
||||
},
|
||||
|
||||
removeOptions (index) {
|
||||
const len = this.targetList[this.groupIndex].column[this.activeIndex].options.length
|
||||
|
||||
if (len === 2) {
|
||||
return this.$message.error('选项不能少于2个')
|
||||
}
|
||||
this.targetList[this.groupIndex].column[this.activeIndex].options.splice(index, 1)
|
||||
},
|
||||
|
||||
onEnd (e) {
|
||||
const el = e.to.parentElement.parentElement
|
||||
this.isGroup = false
|
||||
this.activeIndex = e.newIndex
|
||||
this.groupIndex = Number(el.getAttribute('data-index'))
|
||||
},
|
||||
|
||||
onElEnd (e) {
|
||||
if (this.isGroup) {
|
||||
this.groupIndex = e.newIndex
|
||||
} else {
|
||||
this.activeIndex = e.newIndex
|
||||
}
|
||||
},
|
||||
|
||||
clone (e) {
|
||||
if (e.type === 'group') {
|
||||
this.targetList.push(JSON.parse(JSON.stringify(e)))
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.isGroup = true
|
||||
this.groupIndex = this.targetList.length - 1
|
||||
this.activeIndex = -1
|
||||
})
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if (this.isGroup) {
|
||||
this.targetList[this.groupIndex].column.push(JSON.parse(JSON.stringify(e)))
|
||||
} else {
|
||||
this.targetList[0].column.push(JSON.parse(JSON.stringify(e)))
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.groupIndex = this.isGroup ? this.groupIndex : 0
|
||||
this.activeIndex = this.targetList[0].column.length - 1
|
||||
})
|
||||
},
|
||||
|
||||
onMove (e) {
|
||||
const el = e.draggedContext.element
|
||||
if (el.type === 'group') {
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
|
||||
cloneComponent (e) {
|
||||
if (e.type === 'group') {
|
||||
this.targetList.push(JSON.parse(JSON.stringify(e)))
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
return JSON.parse(JSON.stringify(e))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.layout-right__del {
|
||||
position: absolute;
|
||||
bottom: 100px;
|
||||
left: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
color: #F46;
|
||||
cursor: pointer;
|
||||
border: 1px solid #F46;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-config {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 10px 20px 0;
|
||||
|
||||
.ai-form .el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.right-item__maintitle {
|
||||
height: 62px;
|
||||
line-height: 62px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
color: #222222;
|
||||
|
||||
h2 {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ai-card {
|
||||
cursor: move;
|
||||
|
||||
&.active {
|
||||
background: #f6f7ff;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ai-detail__content {
|
||||
height: calc(100% - 52px)!important;
|
||||
padding: 0!important;
|
||||
overflow: hidden!important;
|
||||
}
|
||||
|
||||
.ai-dialog__success {
|
||||
::v-deep .ai-dialog__content {
|
||||
max-height: initial!important;
|
||||
}
|
||||
}
|
||||
|
||||
.middle-draggable {
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// flex-wrap: wrap;
|
||||
.left-item__item {
|
||||
width: 50%;
|
||||
min-height: 73px;
|
||||
}
|
||||
|
||||
.el-date-editor.el-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& > span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 600px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.components-item {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
padding: 16px 16px;
|
||||
cursor: move;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1111;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.left-item__item--remove {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
right: 4px;
|
||||
top: 4px;
|
||||
z-index: 1113;
|
||||
width: 84px;
|
||||
height: 28px;
|
||||
background: #FF4466;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
|
||||
i {
|
||||
margin-right: 6px;
|
||||
font-size: 12px;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #f6f7ff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #f6f7ff;
|
||||
}
|
||||
|
||||
.left-item__item--upload {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
line-height: 1;
|
||||
border-radius: 6px;
|
||||
border: 1px dashed #bbb;
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
color: #8899bb;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
.text-item {
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.textarea-item {
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
resize: none;
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-item__item--title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
color: #E22120;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.middle-content {
|
||||
width: 96%;
|
||||
margin: 0 auto;
|
||||
padding: 0px 0 1px;
|
||||
|
||||
.middle-content__wrapper {
|
||||
// min-height: 800px;
|
||||
// background: #fff;
|
||||
|
||||
& > div {
|
||||
&.active {
|
||||
background: #f6f7ff;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.right-item__select--wrapper {
|
||||
.select-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ai-detail__title {
|
||||
margin: 0!important;
|
||||
margin-bottom: 4px!important;
|
||||
padding: 0 20px;
|
||||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
::v-deep .ai-detail__content--wrapper {
|
||||
display: flex;
|
||||
max-width: 100%!important;
|
||||
height: 100%!important;
|
||||
padding: 0!important;
|
||||
background: #F5F6F9;
|
||||
}
|
||||
|
||||
.middle {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
|
||||
::v-deep .el-scrollbar__view {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.add-select {
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 10px 0 0 26px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.right-item__select--wrapper {
|
||||
.select-item {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
color: #8c9dbd;
|
||||
}
|
||||
|
||||
.mover {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.iconDelete {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-upload-list__item {
|
||||
width: 40px!important;
|
||||
height: 40px!important;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.config-item__select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid #D0D4DC;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 320px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow: hidden;
|
||||
background: #FFFFFF;
|
||||
|
||||
.el-checkbox {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.right-item {
|
||||
margin-top: 20px;
|
||||
padding: 0 20px;
|
||||
|
||||
.right-item__tips {
|
||||
margin-top: 10px;
|
||||
color: #888888;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-item__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.right-item__title--left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
color: #888888;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #222222;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 280px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow: hidden;
|
||||
background: #FFFFFF;
|
||||
|
||||
.left-item {
|
||||
padding: 0 20px;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.left-item__title {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
color: #222222;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #888888;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-item {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-item__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
padding: 0 13px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 2px;
|
||||
color: #222222;
|
||||
font-size: 12px;
|
||||
border: 1px solid #E4E8EF;
|
||||
cursor: move;
|
||||
|
||||
&:hover {
|
||||
border: 1px dashed #2367ff;
|
||||
color: #2367ff;
|
||||
|
||||
i {
|
||||
color: #2367ff;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 13px;
|
||||
font-size: 14px;
|
||||
color: #8899BB;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
</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>
|
||||
@@ -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,203 @@
|
||||
export const components = [
|
||||
{
|
||||
type: 'info',
|
||||
tips: '（可重复添加）',
|
||||
label: '信息',
|
||||
children: [
|
||||
{
|
||||
type: 'name',
|
||||
fieldName: '姓名',
|
||||
fieldTips: '请输入姓名',
|
||||
fixedLabel: '姓名',
|
||||
disable: '0',
|
||||
grid: 1,
|
||||
fieldDataType: '1',
|
||||
defaultValue: '',
|
||||
icon: 'icontext_box',
|
||||
mustFill: '1',
|
||||
fieldLength: 20
|
||||
},
|
||||
{
|
||||
type: 'idNumber',
|
||||
fieldName: '身份证号',
|
||||
fixedLabel: '身份证号',
|
||||
fieldTips: '请输入身份证号',
|
||||
defaultValue: '',
|
||||
icon: 'icontext_area',
|
||||
mustFill: '1',
|
||||
fieldLength: 20,
|
||||
disable: '0',
|
||||
grid: 1,
|
||||
fieldDataType: '1',
|
||||
verifyType: 0
|
||||
},
|
||||
{
|
||||
type: 'phone',
|
||||
fieldName: '联系方式',
|
||||
fixedLabel: '联系方式',
|
||||
fieldTips: '请输入联系方式',
|
||||
defaultValue: '',
|
||||
icon: 'icontext_area',
|
||||
mustFill: '1',
|
||||
fieldLength: 11,
|
||||
disable: '0',
|
||||
grid: 1,
|
||||
fieldDataType: '1',
|
||||
verifyType: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'options',
|
||||
tips: '（可重复添加）',
|
||||
label: '选项',
|
||||
children: [
|
||||
{
|
||||
type: 'radio',
|
||||
fieldName: '单选',
|
||||
fixedLabel: '单选',
|
||||
fieldTips: '请选择',
|
||||
grid: 1,
|
||||
icon: 'iconradio',
|
||||
mustFill: '1',
|
||||
disable: '0',
|
||||
fieldDataType: '4',
|
||||
defaultValue: '',
|
||||
options: [
|
||||
{
|
||||
label: '选项1',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: '选项2',
|
||||
value: ''
|
||||
}
|
||||
],
|
||||
title: ''
|
||||
},
|
||||
{
|
||||
type: 'checkbox',
|
||||
fieldName: '多选',
|
||||
fixedLabel: '多选',
|
||||
fieldTips: '请选择',
|
||||
icon: 'iconcheck_box',
|
||||
fieldDataType: '5',
|
||||
mustFill: '1',
|
||||
grid: 1,
|
||||
disable: '0',
|
||||
defaultValue: [],
|
||||
options: [
|
||||
{
|
||||
label: '选项1',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: '选项2',
|
||||
value: ''
|
||||
}
|
||||
],
|
||||
title: ''
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
fieldName: '单下拉框',
|
||||
fixedLabel: '单下拉框',
|
||||
grid: 1,
|
||||
fieldTips: '请选择',
|
||||
icon: 'iconSelect',
|
||||
mustFill: '1',
|
||||
defaultValue: '',
|
||||
fieldDataType: '9',
|
||||
disable: '0',
|
||||
options: [
|
||||
{
|
||||
label: '选项1',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: '选项2',
|
||||
value: ''
|
||||
}
|
||||
],
|
||||
title: ''
|
||||
},
|
||||
{
|
||||
type: 'date',
|
||||
fieldName: '日期',
|
||||
fixedLabel: '日期',
|
||||
grid: 1,
|
||||
fieldDataType: '3',
|
||||
datetimePattern: 'yyyy-MM-dd',
|
||||
fieldTips: '请选择日期',
|
||||
icon: 'iconSelect',
|
||||
mustFill: '1',
|
||||
disable: '0',
|
||||
title: ''
|
||||
},
|
||||
{
|
||||
type: 'datetime',
|
||||
fieldName: '日期时间',
|
||||
fixedLabel: '日期时间',
|
||||
grid: 1,
|
||||
fieldDataType: '8',
|
||||
datetimePattern: 'yyyy-MM-dd HH:mm:ss',
|
||||
fieldTips: '请选择日期时间',
|
||||
icon: 'iconSelect',
|
||||
mustFill: '1',
|
||||
disable: '0',
|
||||
title: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
tips: '（可重复添加）',
|
||||
label: '填空',
|
||||
children: [
|
||||
{
|
||||
type: 'input',
|
||||
fieldName: '单行填空',
|
||||
fieldTips: '请输入',
|
||||
fixedLabel: '单行填空',
|
||||
disable: '0',
|
||||
grid: 1,
|
||||
fieldDataType: '1',
|
||||
defaultValue: '',
|
||||
icon: 'icontext_box',
|
||||
mustFill: '1',
|
||||
fieldLength: 50
|
||||
},
|
||||
{
|
||||
type: 'number',
|
||||
fieldName: '数字输入',
|
||||
fixedLabel: '数字输入',
|
||||
fieldTips: '请输入数字',
|
||||
defaultValue: '',
|
||||
icon: 'icontext_area',
|
||||
mustFill: '1',
|
||||
maxValue: 10000,
|
||||
decimalPlaces: 0,
|
||||
fieldDataType: '0',
|
||||
minValue: 0,
|
||||
fieldLength: 50,
|
||||
disable: '0',
|
||||
grid: 1,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'layout',
|
||||
tips: '（可重复添加）',
|
||||
label: '分组',
|
||||
children: [
|
||||
{
|
||||
type: 'group',
|
||||
fieldName: '卡片',
|
||||
fixedLabel: '卡片',
|
||||
icon: 'iconpic',
|
||||
groupName: '分组标题',
|
||||
column: []
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,214 @@
|
||||
<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}">
|
||||
<div class="table-options">
|
||||
<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>
|
||||
</div>
|
||||
</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>
|
||||
@@ -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