Mediation-Frontend/src/views/caseprocessManagement/components/addNodeprocess.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>