【流程设计】类似钉钉的流程设计功能样式demo

最新推荐文章于 2025-11-16 12:47:33 发布

原创

最新推荐文章于 2025-11-16 12:47:33 发布 · 867 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#钉钉 #javascript #开发语言 #流程设计 #OA审核流程

对于一些审批流程，可能会用到这个功能，通过这样一层层的加下来，弄一个审批流程的数组，然后根据这个来审核是否都通过审批，这里是简单的弄一个样式的demo，功能自由发挥
在这里插入图片描述


<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <!-- 公共css文件 -->
    <link rel="stylesheet" href="/statics/css/common/common.css">
    <!-- 公共js -->
    <script src="/statics/vue_element/common.js"></script>
    <script src="/statics/js/dialog.js"></script>
    <!-- vue部分依赖 -->
    <link rel="stylesheet" href="/statics/vue_element/element.css">
    <script src="/statics/vue_element/vue.js"></script>
    <script src="/statics/vue_element/element.js"></script>
    <script src="/statics/vue_element/axios.js"></script>
    <title>流程设计</title>
</head>

<body>
    <div id="app">
        <el-card style="display: flex;justify-content: center;height: 800px;overflow: auto;padding: 10px;">
            <!-- 流程结构 -->
            <div v-for="(item,index) in liucheng_zong" :key="index" style="margin-bottom: 5px;">
                <div style="width: 240px;">
                    <div :class="item.type=='fqr'?'fqr_title':'spr_title'">
                        <div>{
   
   {
   
   item.title}}</div>
                        <i class="el-icon-error" style="cursor: pointer;" @click="delLc(index)"
                            v-if="item.type!=='fqr'"></i>
                    </div>
                    <div class="value" @click="openLcDrawer">
                        <div class="valueInfo">
                            <div>{
   
   {
   
   item.value}}</div>
                            <i class="el-icon-arrow-right"></i>
                        </div>
                        <!-- <el-cascader :options="options" :props="{ checkStrictly: true }" clearable size="mini"
                            style="width: 100%;" v-model="item.value"></el-cascader> -->
                    </div>
                </div>
                <!-- 添加流程 -->
                <div style="display: flex;justify-content: center;flex-direction: column;align-items: center;">
                    <div style="font-size: 20px;">丨</div>
                    <el-button type="primary" icon="el-icon-plus" circle size="small" @click="addLc(index)"></el-button>
                    <div style="font-size: 20px;margin-top: -3px;">↓</div>
                </div>
            </div>
            <!-- 结束流程 -->
            <div style="display: flex;justify-content: center;margin-top: 20px;">
                <div class="jieshu">结束流程</div>
            </div>
        </el-card>
        <!-- 保存流程 -->
        <div style="display: flex;justify-content: center;margin-top: 20px;">
            <el-button type="primary" size="small" @click="save" style