268 lines
10 KiB
Vue
268 lines
10 KiB
Vue
<template>
|
|
<div>
|
|
<el-dialog title="新增流程节点" :visible="addvisiable" v-if="addvisiable" @close="cancel" width="600px" center>
|
|
<el-form :model="ruleForm" label-position="left" :rules="rules" ref="ruleForm" label-width="90px"
|
|
class="demo-ruleForm">
|
|
<el-form-item label="节点名称" prop="nodeName">
|
|
<el-select v-model="ruleForm.nodeName" placeholder="请选择" @change="changenodeName">
|
|
<el-option v-for="dict in dict.type.case_flow_node" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="案件状态" prop="caseStatusName">
|
|
<el-input v-model="ruleForm.caseStatusName" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="驳回节点" prop="backFlowName">
|
|
<el-select v-model="ruleForm.backFlowId" placeholder="请选择" clearable>
|
|
<el-option v-for="item in backflowArr" :key="item.backFlowId" :value="item.backFlowId"
|
|
:label="item.backFlowName">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="关联角色" prop="roleIds">
|
|
<el-select v-model="ruleForm.roleIds" multiple placeholder="请选择">
|
|
<el-option v-for="item in roleArr" :key="item.roleId" :label="item.roleName" :value="item.roleId">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="权限字符" prop="buttonAuthFlag">
|
|
<el-input v-model="ruleForm.buttonAuthFlag" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="节点图标" prop="nodeIcon">
|
|
<el-upload
|
|
class="avatar-uploader"
|
|
:action="uploadImgUrl"
|
|
:show-file-list="false"
|
|
:headers="headers"
|
|
:data="filedata"
|
|
:on-success="handleAvatarSuccess"
|
|
:before-upload="beforeAvatarUpload">
|
|
<img v-if="imageUrl" :src="imgSvgUrl" class="avatar">
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
<div slot="tip" class="el-upload__tip">只能上传SVG图片</div>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="cancel" class="endbutton"><span>取 消</span></el-button>
|
|
<el-button type="primary" @click="submitForm" class="endbutton"><span>确认</span></el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { queryCaseFlowInfo, saveCaseFlow } from "@/api/caseprocessManagement/caseprocessManagement.js";
|
|
import { listRole } from "@/api/system/role";
|
|
import { getToken } from "@/utils/auth";
|
|
export default {
|
|
props: ["addvisiable", "editData", "queryParams"],
|
|
dicts: ["case_flow_node"],
|
|
data() {
|
|
return {
|
|
fileList: [],
|
|
data: [],
|
|
backflowArr: [],//驳回节点
|
|
roleArr: [],//关联角色
|
|
isImg: false,
|
|
filedata: {
|
|
annexType: 11,
|
|
},
|
|
flagBtn: false,
|
|
ruleForm: {},
|
|
rules: {
|
|
nodeName: [
|
|
{ required: true, message: '请选择模版名称', trigger: 'blur' },
|
|
],
|
|
caseStatusName: [
|
|
{ required: true, message: '请输入案件状态', trigger: 'blur' },
|
|
],
|
|
roleIds: [
|
|
{ required: true, message: '请选择关联角色', trigger: 'blur' },
|
|
],
|
|
buttonAuthFlag: [
|
|
{ required: true, message: '请输入权限字符', trigger: 'blur' },
|
|
]
|
|
},
|
|
dealvalue: [],
|
|
imageUrl: '',
|
|
uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
|
|
headers: {
|
|
Authorization: "Bearer " + getToken(),
|
|
},
|
|
fileName: '',
|
|
imgSvgUrl: ''
|
|
};
|
|
},
|
|
watch: {
|
|
addvisiable(val) {
|
|
if (val) {
|
|
this.ruleForm = this.editData;
|
|
console.log(this.ruleForm,'this.ruleForm');
|
|
this.getRoles();
|
|
this.getbackflowArr();
|
|
if (this.ruleForm && this.ruleForm.fileName) {
|
|
this.imgSvgUrl = process.env.VUE_APP_BASE_API + this.ruleForm.fileName;
|
|
} else {
|
|
this.imgSvgUrl = ''
|
|
}
|
|
}
|
|
},
|
|
fileName: {
|
|
handler(val) {
|
|
if (val) {
|
|
this.imgSvgUrl = this.imageUrl
|
|
}
|
|
},
|
|
deep: true
|
|
}
|
|
|
|
},
|
|
created() {
|
|
|
|
},
|
|
methods: {
|
|
changenodeName(val) {
|
|
console.log(val, 'changeval');
|
|
},
|
|
// 获取驳回节点数据
|
|
getbackflowArr() {
|
|
let queryParams2 = {
|
|
pageNum: 1,
|
|
pageSize: 999,
|
|
};
|
|
queryCaseFlowInfo(queryParams2).then((res) => {
|
|
this.backflowArr = [];
|
|
res.rows.forEach(item => {
|
|
this.backflowArr.push({
|
|
backFlowName: item.nodeName,
|
|
backFlowId: item.id
|
|
})
|
|
});
|
|
if (this.editData.id) {
|
|
let arr = this.backflowArr;
|
|
let result = arr.filter(obj => obj.backFlowId !== this.editData.id);
|
|
this.backflowArr = result
|
|
}
|
|
})
|
|
},
|
|
// 获取关联角色
|
|
getRoles() {
|
|
let queryParams1 = {
|
|
pageNum: 1,
|
|
pageSize: 100000000000000000,
|
|
};
|
|
listRole(queryParams1).then((res) => {
|
|
this.roleArr = res.rows
|
|
})
|
|
},
|
|
cancel() {
|
|
this.$emit("cancelAdd");
|
|
},
|
|
// 图标上传
|
|
handleAvatarSuccess(res, file) {
|
|
this.fileName = ''
|
|
console.log(file.response.fileName,'上传成功的file');
|
|
this.imageUrl = URL.createObjectURL(file.raw);
|
|
this.fileName = file.response.fileName
|
|
console.log(this.imageUrl,'上传成功的this.imageUrl');
|
|
},
|
|
beforeAvatarUpload(file) {
|
|
console.log(file,'file');
|
|
const isSvg = file.type === 'image/svg+xml';
|
|
if (!isSvg) {
|
|
this.$message.error('上传图片只能是 SVG 格式!');
|
|
}
|
|
return isSvg;
|
|
},
|
|
// 提交
|
|
submitForm() {
|
|
this.$refs['ruleForm'].validate((valid) => {
|
|
if (valid) {
|
|
let params = {};
|
|
if (this.ruleForm.id) {
|
|
let nodevalue = this.dict.type.case_flow_node;
|
|
this.dealvalue = nodevalue.filter((item) => {
|
|
if (item.value == this.ruleForm.nodeId) {
|
|
return item
|
|
}
|
|
}
|
|
);
|
|
// 编辑
|
|
params = {
|
|
id: this.ruleForm.id,
|
|
nodeId: this.dealvalue[0].value,
|
|
nodeName: this.dealvalue[0].label,
|
|
caseStatusName: this.ruleForm.caseStatusName,
|
|
backFlowId: this.ruleForm.backFlowId,
|
|
roleIds: this.ruleForm.roleIds,
|
|
sort: this.ruleForm.sort,
|
|
buttonAuthFlag: this.ruleForm.buttonAuthFlag,
|
|
fileName: this.fileName
|
|
}
|
|
} else {
|
|
let nodevalue = this.dict.type.case_flow_node;
|
|
this.dealvalue = nodevalue.filter((item) => {
|
|
if (item.value == this.ruleForm.nodeName) {
|
|
return item
|
|
}
|
|
}
|
|
);
|
|
// 新增
|
|
params = {
|
|
nodeId: this.dealvalue[0].value,
|
|
nodeName: this.dealvalue[0].label,
|
|
caseStatusName: this.ruleForm.caseStatusName,
|
|
backFlowId: this.ruleForm.backFlowId,
|
|
roleIds: this.ruleForm.roleIds,
|
|
buttonAuthFlag: this.ruleForm.buttonAuthFlag,
|
|
fileName: this.fileName
|
|
}
|
|
}
|
|
if (params.backFlowId == undefined) {
|
|
delete params.backFlowId
|
|
}
|
|
saveCaseFlow(params).then((res) => {
|
|
this.$modal.msgSuccess("成功！");
|
|
this.$emit("getList", this.queryParams)
|
|
this.$emit("cancelAdd");
|
|
})
|
|
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .el-select {
|
|
width: 100%;
|
|
}
|
|
.avatar-uploader .el-upload {
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
// .avatar-uploader .el-upload:hover {
|
|
// border-color: #409EFF;
|
|
// }
|
|
.avatar-uploader-icon {
|
|
border: 1px dashed #d9d9d9;
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 100px;
|
|
height: 100px;
|
|
line-height: 100px;
|
|
text-align: center;
|
|
}
|
|
.avatar-uploader-icon:hover {
|
|
border-color: #409EFF;
|
|
}
|
|
.avatar {
|
|
width: 100px;
|
|
height: 100px;
|
|
display: block;
|
|
}
|
|
</style> |