291 lines
7.6 KiB
Vue
291 lines
7.6 KiB
Vue
<template>
|
||
<div class="content-height configBox">
|
||
<div class="title">
|
||
<span>流程配置</span>
|
||
</div>
|
||
<div class="search">
|
||
<el-row>
|
||
<!-- <el-col :span="5">-->
|
||
<!-- <div class="search-box-left">-->
|
||
<!-- <label>流程名称：</label>-->
|
||
<!-- <el-input v-model="processForm.name" ></el-input>-->
|
||
<!-- </div>-->
|
||
<!-- </el-col>-->
|
||
|
||
<!-- <el-col :span="4" align="right">-->
|
||
<!-- <div class="search-box-right">-->
|
||
<!-- <el-button type="primary" @click="queryTablePage">查询</el-button>-->
|
||
<!-- <el-button type="" @click="clearAllSearchs">重置</el-button>-->
|
||
<!-- </div>-->
|
||
<!-- </el-col>-->
|
||
<el-col :span="24">
|
||
<div class="operate-box">
|
||
<el-button @click="addRow">新增</el-button>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<div class="table">
|
||
<vxe-table ref="xTable" :data="tableList" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 320px)'">
|
||
<vxe-column show-overflow show-header-overflow field="name" title="流程名称"></vxe-column>
|
||
<!-- <vxe-column show-overflow show-header-overflow field="categoryName" title="流程类型"></vxe-column>-->
|
||
<vxe-column show-overflow show-header-overflow field="createTime" title="创建时间">
|
||
<template #default="{ row }">
|
||
{{row.createTime?formatDate(row.createTime,"yyyy-mm-dd HH:mm:ss"):''}}
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column show-overflow show-header-overflow title="操作" width="250" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button type="text" @click="editRow(row)">编辑</el-button>
|
||
<el-button type="text" @click="deploy(row)">部署</el-button>
|
||
<el-button type="text" @click="deleteRow(row)">删除</el-button>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-table>
|
||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.current"
|
||
:page-sizes="[5, 10, 20]" :page-size="q.size" layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total" />
|
||
<el-dialog :close-on-click-modal="false"
|
||
:visible="visible"
|
||
:title="title"
|
||
@close="closeDialog"
|
||
width="300px"
|
||
class="addDialog"
|
||
>
|
||
<el-form
|
||
ref="form"
|
||
:model="formData"
|
||
class="addform"
|
||
label-width="100px"
|
||
inline
|
||
>
|
||
<el-row>
|
||
<el-form-item label="模型名称" class="add-form-item">
|
||
<el-input
|
||
v-model="formData.name"
|
||
placeholder="请输入模型名称"
|
||
clearable
|
||
:maxlength="100"></el-input>
|
||
</el-form-item>
|
||
</el-row>
|
||
<el-row>
|
||
<el-form-item label="模型描述" class="add-form-item">
|
||
<el-input
|
||
v-model="formData.desc"
|
||
placeholder="请输入模型描述"
|
||
clearable
|
||
:maxlength="100"></el-input>
|
||
</el-form-item>
|
||
</el-row>
|
||
</el-form>
|
||
<div slot="footer" class="add-footer">
|
||
<el-button size="big" class="common-button-default" @click="closeDialog">
|
||
取消
|
||
</el-button>
|
||
<el-button size="big" class="common-button-primary" type="primary"
|
||
@click="confirmDialog">确认
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import EditProcess from './components/EditProcess'
|
||
import { formatDate } from '@/utils/date'
|
||
export default {
|
||
name: 'ProcessClassification',
|
||
components: { EditProcess },
|
||
data () {
|
||
return {
|
||
formatDate,
|
||
formData: {
|
||
name: '',
|
||
desc: ''
|
||
},
|
||
total: 0,
|
||
q: {
|
||
current: 1,
|
||
size: 10
|
||
},
|
||
tableList: [{name:1}],
|
||
processForm: {
|
||
name: ''
|
||
},
|
||
visible:false,
|
||
title: '添加流程'
|
||
}
|
||
},
|
||
created() {
|
||
this.queryTablePage()
|
||
},
|
||
methods: {
|
||
deleteRow(row) {
|
||
this.$confirm('确认删除该条数据？', '删除', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
confirmButtonClass: 'common-button-primary',
|
||
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.$api.process.deleteModel({modelId: row.id}).then(res => {
|
||
this.$message.success(res.data.message)
|
||
this.queryTablePage()
|
||
})
|
||
})
|
||
},
|
||
handleCurrentChange(page) {
|
||
this.q.current = page
|
||
this.queryTablePage()
|
||
},
|
||
handleSizeChange(size) {
|
||
this.q.size = size
|
||
this.queryTablePage()
|
||
},
|
||
closeDialog() {
|
||
this.visible=false
|
||
},
|
||
editRow(row) {
|
||
this.$router.push({
|
||
path: '/userCenter/processMapping',
|
||
query: {id: 'AEHJB8YNJ3',modelId: row.id}
|
||
})
|
||
},
|
||
//部署
|
||
deploy(row) {
|
||
this.$confirm('确认部署该条数据？', '确认部署', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
confirmButtonClass: 'common-button-primary',
|
||
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.$api.process.deploy({id: row.id}).then(res=>{
|
||
this.$message.warning(res.message)
|
||
this.queryTablePage()
|
||
})
|
||
}).catch(() => {
|
||
})
|
||
},
|
||
queryTablePage() {
|
||
this.$api.process.getModelListPage({...this.q,...this.searchForm}).then(res=>{
|
||
this.tableList = res.data.result.records
|
||
this.total = res.data.result.total
|
||
|
||
}).catch(err=>{
|
||
|
||
})
|
||
|
||
},
|
||
addRow() {
|
||
this.formData = {
|
||
name: '',
|
||
desc: ''
|
||
}
|
||
this.visible = true
|
||
},
|
||
confirmDialog() {
|
||
this.$api.process.addModel(this.formData).then(res=> {
|
||
this.$message.success("新增成功")
|
||
this.visible = false
|
||
this.queryTablePage()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.configBox{
|
||
.search {
|
||
.search-box-left {
|
||
padding-top: 20px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
label {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #595959;
|
||
margin-right: 5px;
|
||
padding-left: 22px;
|
||
}
|
||
|
||
.year {
|
||
::v-deep .el-input__inner {
|
||
padding: 0 15px !important;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-input {
|
||
width: 167px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
@media screen and (max-width: 1366px) {
|
||
::v-deep .el-input {
|
||
width: 135px;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-button {
|
||
float: right;
|
||
}
|
||
}
|
||
|
||
.search-box-right {
|
||
padding-top: 20px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
padding-right: 14px;
|
||
}
|
||
|
||
.operate-box {
|
||
padding-left: 13px;
|
||
padding-bottom: 11px;
|
||
padding-top: 18px;
|
||
}
|
||
}
|
||
.title {
|
||
border-bottom: 1px solid #EBEEF5;
|
||
height: 42px;
|
||
line-height: 42px;
|
||
margin: 0 18px 0 22px;
|
||
|
||
span {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #262626;
|
||
}
|
||
}
|
||
.table {
|
||
margin: 0 14px 0 13px;
|
||
|
||
::v-deep .el-pagination {
|
||
margin-top: 13px;
|
||
padding-left: 20px;
|
||
padding-bottom: 10px;
|
||
}
|
||
}
|
||
.addform{
|
||
padding: 50px 0;
|
||
.add-form-item {
|
||
::v-deep .el-input__inner {
|
||
padding: 0 15px !important;
|
||
width: 250px;
|
||
height: 40px;
|
||
}
|
||
}
|
||
}
|
||
.add-footer{
|
||
padding: 20px 20px;
|
||
}
|
||
}
|
||
|
||
</style>
|