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>
            <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";
export default {
    props: ["addvisiable", "editData", "queryParams"],
    dicts: ["case_flow_node"],
    data() {
        return {
            fileList: [],
            data: [],
            backflowArr: [],//驳回节点
            roleArr: [],//关联角色
            isImg: false,
            filedata: {},
            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: [],
        };
    },
    watch: {
        addvisiable(val) {
            if (val) {
                this.ruleForm = this.editData;
                this.getRoles();
                this.getbackflowArr()
            }
        }
    },
    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");
        },
        // 提交
        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
                        }
                    } 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
                        }
                    }
                    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%;
}
</style>