审批流模板
-
说明 index（父组件） TableCopponentes(子组件 表格 修改按钮 删除按钮 自带分页) SearchComponentes（子组件 搜索） Crumbs（子组件 面包屑） ButtonComponentes（子组件 添加按钮）
-
views/specific-workflow-manage/index.vue
-
<template> <div> <div id="components-layout-demo-basic"> <a-layout> <a-layout-header style="background: #F0F2F5"> <Crumbs></Crumbs> <!-- 页内标题--> <!-- 添加按钮--> <ButtonComponent @addApproveActionConf="addApproveActionConf" :visible=false :ApproveActionConf="ApproveActionConf" > </ButtonComponent> </a-layout-header> <a-layout-content> <!-- 搜索组件--> <SearchComponent @onSearch="onSearch" ></SearchComponent> </a-layout-content> <a-layout-footer> <!-- 展示 删除按钮 修改按钮--> <TableComponent @showApproveActionConf="showApproveActionConf" @delApproveActionConf="delApproveActionConf" @upApproveActionConf="upApproveActionConf" :data="data" :ApproveActionConf="ApproveActionConf" :pagination.sync="pagination" @pageApproveActionConf="pageApproveActionConf" > </TableComponent> </a-layout-footer> </a-layout> </div> </div> </template> <script> import Crumbs from "./componentes/Crumbs"; import SearchComponent from "./componentes/SearchComponent"; import ButtonComponent from "./componentes/ButtonComponent"; import TableComponent from "./componentes/TableComponent"; import { getApproveActionConf, upApproveActionConf, delApproveActionConf, postApproveActionConf, getApproveActionConfDetails, getFlowConfDetails } from "../../http/apis"; const key = 'updatable'; export default { components: { //面包屑 Crumbs, //搜索框 SearchComponent, //添加按钮 ButtonComponent, //展示信息 删除 修改按钮 TableComponent, }, name: "ApproveActionConfManage", data() { return { //控制弹窗 visible: false, //展示数据 data: [], //分页 pagination: { total: 0, pageSize: 10,//每页中显示10条数据 showSizeChanger: true, pageSizeOptions: ["5", "10", "30", "50", "100"],//每页中显示的数据 showTotal: total => `共有 ${total} 条数据`, //分页中显示总的数据 }, filterData: {}, ApproveActionConf: [], ApproveActionConfRole: [], workflowID: this.$route.params.id } }, methods: { //分页 pageApproveActionConf(filterData) { this.showApproveActionConf(filterData) // getApproveActionConf(pageData).then(res => { // console.log(res) // this.data = res.results // this.pagination.total = res.count // }) }, //展示用户 showApproveActionConf(filterData) { getFlowConfDetails({id:this.workflowID}).then(res => { console.log(res) this.data = res.approveactionconf_set this.ApproveActionConf = res this.pagination.total = res.count }) }, //删除用户 delApproveActionConf(text) { const isDel = confirm("确定删除吗") if (isDel) { delApproveActionConf({id: text}).then(res => { console.log(res) this.showApproveActionConf() this.$message.info('删除成功'); }).catch(err => { console.log(err) }) } else { } }, //搜索name mobile email 并展示 onSearch(value) { console.log(value); // var numReg = /^[0-9]*$/ // if (value == '') { // delete this.filterData["ApproveActionConfname"] // delete this.filterData["mobile"] // } else if (!numReg.test(value)) { // this.filterData["ApproveActionConfname"] = value // } else { console.log(value) this.filterData["name"] = value // } this.showApproveActionConf(this.filterData) // postSearch({search_name: value}).then(res => { // console.log(res) // const hide = this.$message.loading('Action in progress..', 0); // setTimeout(hide, 100); // this.data = res // }) }, //添加用户 addApproveActionConf(params) { console.log(params, "1111111111111111111111111") postApproveActionConf(params).then(res => { console.log(res) this.showApproveActionConf() this.visible = false; this.$message.loading({content: '添加中...', key}); setTimeout(() => { this.$message.success({content: '添加成功!', key, duration: 2}); }, 1000); }) this.visible = false; }, //修改用户 upApproveActionConf(params) { upApproveActionConf(params).then(res => { console.log(res) this.showApproveActionConf() this.visible = false; }) this.visible = false; }, //展示角色 // showApproveActionConf() { // getRole().then(res => { // this.ApproveActionConf = res.results // for (let i in this.ApproveActionConf) { // } // }) // } }, //钩子方法 mounted() { }, created() { //加载时调用展示用户 this.showApproveActionConf() }, //监听属性 watch: {}, //计算属性 computed: {} } </script> <style scoped> .h3 { font-weight: 800; margin-left: -3%; margin-top: -20px; } </style>
-
-
views/specific-workflow-manage/componentes/TableComponentes.vue
-
<template> <div> <!-- table自带分页 :pagination.sync="pagination"--> <a-table :columns="columns" :data-source="data" :rowKey="record => record.id" @change="onShowSizeChange" > <a slot="name" slot-scope="text">{{ text }}</a> <span slot="customTitle"><a-icon type="smile-o"/> ID</span> <span slot="specific_flowconf" slot-scope="specific_flowconf"> <a-tag v-for="tag in specific_flowconf" :key="tag" :color="tag === 'loser' ? 'volcano' : tag.length > 1 ? 'geekblue' : 'green'" > {{ tag.toUpperCase() }} </a-tag> </span> <span slot="action" slot-scope="text, record"> <a-button type="primary" @click="showModal(text)" style="margin-left: 5px"> 修改 </a-button> <a-modal v-model="visible" title="Basic Modal" @ok="handleOk(text)"> 工单 <a-input placeholder="" v-model="name" v-if="pk == uid"/> 工单 <a-input placeholder="" v-model="name" disabled="disabled" v-if="pk != uid"/> 详情 <a-textarea placeholder="textarea with clear icon" allow-clear v-model="description"/> <!-- <a-input placeholder="" v-model="description"/>--> 自定义字段 <a-textarea placeholder="textarea with clear icon" allow-clear v-model="customfield"/> <!-- <a-input placeholder="" v-model="customfield"/>--> <!-- 角色--> <!-- <a-select--> <!-- mode="multiple"--> <!-- :default-value="[]"--> <!-- style=" 100%"--> <!-- placeholder="Please select"--> <!-- @change="handleChange"--> <!-- >--> <!-- <a-select-option v-for="i in ApproveActionConf" :key="i.id">--> <!-- {{ i.name }}--> <!-- </a-select-option>--> <!-- </a-select>--> </a-modal> <a-button type="danger" @click="delApproveActionConf(text.id)">删除</a-button> <!-- 添加到审批按钮--> </span> </a-table> </div> </template> <script> import {delApproveActionConf, getApproveActionConf} from "../../../http/apis"; const columns = [ { dataIndex: 'id', // key: 'FlowConfname', slots: {title: 'customTitle'}, scopedSlots: {customRender: 'name'}, }, { title: '工单', dataIndex: 'flowconf.name', // key: 'mobile', }, { title: '审批序号', dataIndex: 'sequence', // key: 'email', }, { title: '审批', // key: 'last_login', dataIndex: 'specific_flowconf', scopedSlots: {customRender: 'specific_flowconf'}, }, { title: '操作', // key: 'last_login', scopedSlots: {customRender: 'action'}, }, ]; export default { name: "TableComponent", props: ['data', 'pagination', 'ApproveActionConf',], data() { return { // data: [], columns, visible: false, name: '', customfield: '', description: '', role: '', pk: '', uid: localStorage.getItem("uid"), } }, //方法 methods: { //角色id handleChange(value) { // for (let i in value){ this.role = value // } }, //分页 onShowSizeChange(pagination) { let filterData = { page_size: pagination.pageSize, page: pagination.current, } this.$emit('pageApproveActionConf', filterData) }, //修改展示输入框内详情 showModal(text) { this.visible = true; this.name = text.name this.description = text.description this.customfield = text.customfield this.pk = text.id }, //调用删除方法 传送text(id) delApproveActionConf(text) { this.$emit('delApproveActionConf', text) }, //调用修改方法 并传送数据 以及修改谁（id） handleOk(text) { console.log(text.id) let params = { name: this.name, description: this.description, customfield: this.customfield, id: this.pk, role: this.ApproveActionConf } this.$emit('upApproveActionConf', params) this.visible = false; }, //跳转到添加审批页面 addApproveActionConf(pk) { this.$router.push({name: '审批', params: {"id": pk}}) }, }, //钩子方法 mounted() { }, created() { // this.showApproveActionConf() }, //监听属性 watch: {}, //计算属性 computed: {} } </script> <style scoped> </style>
-
-
views/specific-workflow-manage/componentes/SearchComponentes.vue
-
<template> <div> <div> <a-input-search class="a-input-search" placeholder="工单和字段" enter-button @search="onSearch"/> <br/><br/> </div> </div> </template> <script> import {postSearch} from "../../../http/apis"; export default { name: "SearchComponent", data() { return {} }, methods: { onChange(date, dateString) { console.log(date, dateString); }, onSearch(value) { //调用搜索方法 并传送value（输入框内容） this.$emit('getApproveActionConf ', value) // console.log(value); // postSearch({search_name: value}).then(res => { // console.log(res) // this.user_list = res // }) }, }, //钩子方法 mounted() { }, created() { }, //监听属性 watch: {}, //计算属性 computed: {} } </script> <style scoped> .a-input-search { 400px; margin-left: 35%; } .components-input-demo-size .ant-input { 200px; margin: 0 30px 30px 0; } </style>
-
-
views/specific-workflow-manage/componentes/Crumbs.vue
-
<template> <div> <a-breadcrumb separator="" class="a-breadcrumb"> <a-breadcrumb-item> 工单 </a-breadcrumb-item> <a-breadcrumb-separator>:</a-breadcrumb-separator> <a-breadcrumb-item href=""> 工单模块 </a-breadcrumb-item> <a-breadcrumb-separator/> <a-breadcrumb-item href=""> 配置审批流 </a-breadcrumb-item> </a-breadcrumb> </div> </template> <script> export default { name: "Crumbs", data() { return {} }, methods: {}, //钩子方法 mounted() { }, created() { }, //监听属性 watch: {}, //计算属性 computed: {} } </script> <style scoped> .a-breadcrumb { /*background:red;*/ color: #1890ff; /*margin-top: -15px;*/ margin-left: -30px; } </style>
-
-
views/specific-workflow-manage/componentes/ButtonComponentes.vue
-
<template> <div> <a-button type="primary" @click="showModal" style="margin-left: 15px;"> + 创建 </a-button> <a-modal v-model="visible" title="Basic Modal" @ok="handleOk"> 工单 <a-input :placeholder="ApproveActionConf.name" v-model="name" disabled/> 审批序号 <br> <a-input-number id="inputNumber" v-model="value" :min="1" :max="10" @change="onChange"/> <br> 审批类型 <br> <a-select label-in-value :default-value="{}" style=" 120px" @change="handleChange" v-model="type" > <a-select-option value="1"> 指定人员审批 </a-select-option> <a-select-option value="2"> 角色组 </a-select-option> </a-select> <br> 审批人员 <br> <a-select default-value="" style=" 120px" @change="handleChange2" v-model="roleuser" > <!-- 循环展示判断审批类型 后获取到的值--> <a-select-option v-for="i in approvergroupList" key="i.id" :value="i.id"> <!-- 如果为指定用户 展示username--> <span v-if="i.username">{{ i.username }}</span> <!-- 如果为指定角色组 展示zh_name--> <span v-else-if="i.zh_name">{{ i.zh_name }}</span> </a-select-option> </a-select> </a-modal> </div> </template> <script> import {getRole, getUser} from "../../../http/apis"; export default { props: ["ApproveActionConf"], name: "ButtonComponent", data() { return { visible: false, name: this.ApproveActionConf.name, value: 1, type: '', roleuser: '', size: 'default', approvergroupList: [] } }, methods: { //审批人 handleChange2(value) { }, //审批类型 并添加值 handleChange(value) { // 1 为指定用户 获取所有用户 if (value.key == "1") { getUser().then(res => { this.approvergroupList = res.results }) // 2 为 角色组 获取所有角色 } else if (value.key == "2") { getRole().then(res => { this.approvergroupList = res.results }) } }, onChange(value) { console.log('changed', value); }, //调用visible展示弹出框 showModal() { this.visible = true; }, //添加数据并 调用添加用户函数 handleOk() { console.log(this.roleuser,"22222") let params = { flowconf: this.ApproveActionConf.id, sequence: this.value, approve_type_id: this.type.key, approve_id: this.roleuser, } console.log(params) this.$emit('addApproveActionConf', params) this.visible = false; }, }, //钩子方法 mounted() { }, created() { }, //监听属性 watch: {}, //计算属性 computed: {} } </script> <style scoped> </style>
-