域名备案查询网站备案信息,企业网站备案要求,做印章网站,小型网站建设参考文献对于一些审批流程#xff0c;可能会用到这个功能#xff0c;通过这样一层层的加下来#xff0c;弄一个审批流程的数组#xff0c;然后根据这个来审核是否都通过审批#xff0c;这里是简单的弄一个样式的demo#xff0c;功能自由发挥 !DOCTYPE html
html…对于一些审批流程可能会用到这个功能通过这样一层层的加下来弄一个审批流程的数组然后根据这个来审核是否都通过审批这里是简单的弄一个样式的demo功能自由发挥 !DOCTYPE html
htmlheadmeta charsetUTF-8!-- 公共css文件 --link relstylesheet href/statics/css/common/common.css!-- 公共js --script src/statics/vue_element/common.js/scriptscript src/statics/js/dialog.js/script!-- vue部分依赖 --link relstylesheet href/statics/vue_element/element.cssscript src/statics/vue_element/vue.js/scriptscript src/statics/vue_element/element.js/scriptscript src/statics/vue_element/axios.js/scripttitle流程设计/title
/headbodydiv idappel-card styledisplay: flex;justify-content: center;height: 800px;overflow: auto;padding: 10px;!-- 流程结构 --div v-for(item,index) in liucheng_zong :keyindex stylemargin-bottom: 5px;div stylewidth: 240px;div :classitem.typefqr?fqr_title:spr_titlediv{{item.title}}/divi classel-icon-error stylecursor: pointer; clickdelLc(index)v-ifitem.type!fqr/i/divdiv classvalue clickopenLcDrawerdiv classvalueInfodiv{{item.value}}/divi classel-icon-arrow-right/i/div!-- el-cascader :optionsoptions :props{ checkStrictly: true } clearable sizeministylewidth: 100%; v-modelitem.value/el-cascader --/div/div!-- 添加流程 --div styledisplay: flex;justify-content: center;flex-direction: column;align-items: center;div stylefont-size: 20px;丨/divel-button typeprimary iconel-icon-plus circle sizesmall clickaddLc(index)/el-buttondiv stylefont-size: 20px;margin-top: -3px;↓/div/div/div!-- 结束流程 --div styledisplay: flex;justify-content: center;margin-top: 20px;div classjieshu结束流程/div/div/el-card!-- 保存流程 --div styledisplay: flex;justify-content: center;margin-top: 20px;el-button typeprimary sizesmall clicksave stylewidth: 200px;保存/el-button/div!-- 右抽屉流程详细操作 --el-drawer title流程设置 :visible.synclcDrawer directionrtl size40%divel-tabs v-modelactiveName tab-clickhandleClick :stretchtrueel-tab-pane label设置审批人 name1div stylepadding: 10px;el-radio-group v-modelspr_userel-radio :label1指定成员/el-radioel-radio :label2主管/el-radioel-radio :label3发起人自选/el-radio/el-radio-groupdivel-button typeprimary sizemini stylewidth: 100px;margin-top: 15px;iconel-icon-plus添加成员/el-button/div/div/el-tab-paneel-tab-pane label操作权限 name2/el-tab-pane/el-tabs/div/el-drawer/div
/body
scriptlet v new Vue({el: #app,data() {return {lcDrawer: false,activeName: 1,spr_user: 1,//审批人选择liucheng_zong: [{title: 发起人,value: 所有人,type: fqr}],options: [{value: zhinan,label: 指南,children: [{value: shejiyuanze,label: 设计原则,children: [{value: yizhi,label: 一致}, {value: fankui,label: 反馈}, {value: xiaolv,label: 效率}, {value: kekong,label: 可控}]}, {value: daohang,label: 导航,children: [{value: cexiangdaohang,label: 侧向导航}, {value: dingbudaohang,label: 顶部导航}]}]}, {value: zujian,label: 组件,children: [{value: basic,label: Basic,children: [{value: layout,label: Layout 布局}, {value: color,label: Color 色彩}, {value: typography,label: Typography 字体}, {value: icon,label: Icon 图标}, {value: button,label: Button 按钮}]}, {value: form,label: Form,children: [{value: radio,label: Radio 单选框}, {value: checkbox,label: Checkbox 多选框}, {value: input,label: Input 输入框}, {value: input-number,label: InputNumber 计数器}, {value: select,label: Select 选择器}, {value: cascader,label: Cascader 级联选择器}, {value: switch,label: Switch 开关}, {value: slider,label: Slider 滑块}, {value: time-picker,label: TimePicker 时间选择器}, {value: date-picker,label: DatePicker 日期选择器}, {value: datetime-picker,label: DateTimePicker 日期时间选择器}, {value: upload,label: Upload 上传}, {value: rate,label: Rate 评分}, {value: form,label: Form 表单}]}, {value: data,label: Data,children: [{value: table,label: Table 表格}, {value: tag,label: Tag 标签}, {value: progress,label: Progress 进度条}, {value: tree,label: Tree 树形控件}, {value: pagination,label: Pagination 分页}, {value: badge,label: Badge 标记}]}, {value: notice,label: Notice,children: [{value: alert,label: Alert 警告}, {value: loading,label: Loading 加载}, {value: message,label: Message 消息提示}, {value: message-box,label: MessageBox 弹框}, {value: notification,label: Notification 通知}]}, {value: navigation,label: Navigation,children: [{value: menu,label: NavMenu 导航菜单}, {value: tabs,label: Tabs 标签页}, {value: breadcrumb,label: Breadcrumb 面包屑}, {value: dropdown,label: Dropdown 下拉菜单}, {value: steps,label: Steps 步骤条}]}, {value: others,label: Others,children: [{value: dialog,label: Dialog 对话框}, {value: tooltip,label: Tooltip 文字提示}, {value: popover,label: Popover 弹出框}, {value: card,label: Card 卡片}, {value: carousel,label: Carousel 走马灯}, {value: collapse,label: Collapse 折叠面板}]}]}, {value: ziyuan,label: 资源,children: [{value: axure,label: Axure Components}, {value: sketch,label: Sketch Templates}, {value: jiaohu,label: 组件交互文档}]}]};},methods: {// tabs切换handleClick(e) {console.log(e, eee);},// 保存流程save() {console.log(this.liucheng_zong, liucheng_zong);},// 添加流程addLc(index) {this.liucheng_zong.splice(index 1, 0, {title: 审批人,value: 李四,type: spr})},// 删除流程delLc(index) {this.liucheng_zong.splice(index, 1)},// 打开流程设计抽屉openLcDrawer() {this.lcDrawer true}}})
/script
style scoped.fqr_title {padding: 6px 10px;background-color: #3e4c6b;color: #fff;border-top-right-radius: 5px;border-top-left-radius: 5px;display: flex;justify-content: space-between;}.spr_title {padding: 6px 10px;background-color: #e68439;color: #fff;border-top-right-radius: 5px;border-top-left-radius: 5px;display: flex;justify-content: space-between;}.value {box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}.valueInfo {display: flex;align-items: center;justify-content: space-between;padding: 15px 10px;cursor: pointer;}.jieshu {padding: 6px 10px;background-color: #cecbcb;border-radius: 12px;color: #fff;}
/style/html
