说明
index（父组件）
TableCopponentes(子组件 表格 修改按钮 删除按钮 自带分页)
SearchComponentes（子组件 搜索）
Crumbs（子组件 面包屑）
ButtonComponentes（子组件 添加按钮）
<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>
<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="width: 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>
<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 {
width: 400px;
margin-left: 35%;
}
.components-input-demo-size .ant-input {
width: 200px;
margin: 0 30px 30px 0;
}
</style>
<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>
<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="width: 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="width: 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>
原文：https://www.cnblogs.com/wyx-zy/p/14059298.html