factory_web/src/views/wf/workflow.vue

250 lines
6.8 KiB
Vue

<template>
<el-container>
<el-header>
<div class="left-panel">
<el-button type="primary" icon="el-icon-plus" @click="handleAdd"></el-button>
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length!==1"
@click="batch_del"></el-button>
</div>
<div class="right-panel">
<div class="right-panel-search">
<el-input v-model="search.keyword" placeholder="工作流名称" clearable></el-input>
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
</div>
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" row-key="id">
<el-table-column label="ID" prop="id" min-width="120"></el-table-column>
<el-table-column label="工作流名称" prop="name" min-width="250"></el-table-column>
<el-table-column label="标识" prop="key" min-width="250"></el-table-column>
<el-table-column label="工单查看权限校验" prop="view_permission_check" min-width="150">
<template #default="scope">
<span v-if="scope.row.view_permission_check">是</span>
<span v-else>否</span>
</template>
</el-table-column>
<el-table-column label="工作流描述" prop="description" min-width="150"></el-table-column>
<el-table-column label="创建时间" prop="create_time" min-width="150"></el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="220">
<template #default="scope">
<el-button link size="small" @click="workflowShow(scope.row)">配置</el-button>
<el-divider direction="vertical"></el-divider>
<el-button link size="small" @click="workflowEdit(scope.row)">编辑</el-button>
<el-divider direction="vertical"></el-divider>
<el-popconfirm title="确定删除吗?" @confirm="workflowDel(scope.row)">
<template #reference>
<el-button link size="small">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</scTable>
</el-main>
</el-container>
<el-dialog :title="titleMap[type]" v-model="limitedVisible">
<el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px" label-position="left">
<el-form-item label="名称" prop="name">
<el-input v-model="addForm.name" clearable></el-input>
</el-form-item>
<el-form-item label="标识" prop="key">
<el-input v-model="addForm.key" clearable></el-input>
</el-form-item>
<el-form-item label="流水前缀">
<el-input v-model="addForm.sn_prefix" clearable></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input
v-model="addForm.description"
type="textarea"
:rows="4"
placeholder="描述"
clearable
></el-input>
</el-form-item>
<el-form-item label="查看权限校验">
<el-switch v-model="addForm.view_permission_check" ></el-switch>
</el-form-item>
<el-form-item label="展现表单字段">
<el-transfer
v-model="addForm.display_form_str"
:data="choiceOption"
:titles="['未展示字段', '展示字段']"
:props="{ key: 'id', label: 'field_name' }"
/>
</el-form-item>
<el-form-item label="标题模板">
<el-input v-model="addForm.title_template" clearable></el-input>
</el-form-item>
<el-form-item label="内容模板">
<el-input v-model="addForm.content_template" clearable></el-input>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="limitedVisible=false">取 消</el-button>
<el-button v-if="type!=='show'" type="primary" :loading="isSaving" @click="submitHandle()"> </el-button>
</template>
</el-dialog>
</template>
<script>
export default {
name: 'index',
data() {
return {
apiObj: this.$API.wf.workflow.list,
selection: [],
checkList: [],
choiceOption: [],
search: {
keyword: null
},
editId: null,
isSaving: false,
limitedVisible: false,
type: "add",
titleMap: {
add: '新增',
edit: '编辑',
show: '查看'
},
//表单数据
addForm: {
name: "",
sn_prefix: "",
description: "",
view_permission_check: true,
display_form_str:[],
title_template: "",
content_template: "",
},
//验证规则
rules: {
name: [
{required: true, message: '请输入工作流名称'}
]
},
menu: {
list: [],
checked: ['1513426415243104256'],
props: {
children: 'children',
label: 'name',
}
},
}
},
mounted() {
// this.getGroup();
},
methods: {
//添加工作流
handleAdd() {
this.type = 'add';
this.limitedVisible = true;
},
submitHandle() {
let that = this;
this.$refs.addForm.validate((valid) => {
if (valid) {
that.isSaveing = true;
that.submit();
}
})
},
async submit(){
let that = this;
let res = null;
try{
if (that.type === 'add') {
res = await that.$API.wf.workflow.create.req(that.addForm)
} else {
res = await that.$API.wf.workflow.update.req(that.editId, that.addForm);
}
that.isSaveing = false;
that.limitedVisible = false;
that.$refs.table.refresh();
}catch (e) {
that.isSaveing = false;
}
},
//编辑工作流
workflowEdit(row) {
this.type = 'edit';
this.editId = row.id;
this.limitedVisible = true;
this.addForm = Object.assign({}, row);
},
//工作流配置
workflowShow(row) {
let workflow = sessionStorage.getItem('jinYuWorkflowId');
if(workflow){
sessionStorage.removeItem('jinYuWorkflowId');
sessionStorage.setItem('jinYuWorkflowId',row.id);
}else{
sessionStorage.setItem('jinYuWorkflowId',row.id);
}
this.$router.push({path:'/wf/configuration'});
},
//删除工作流
async workflowDel(row) {
var id = row.id;
var res = await this.$API.wf.workflow.delete.req(id);
if (res.err_msg) {
this.$message.error(res.err_msg)
} else {
this.$refs.table.refresh();
this.$message.success("删除成功")
// this.$alert(res.message, "提示", {type: 'error'})
}
},
//表格选择后回调事件
selectionChange(selection) {
this.selection = selection;
},
//搜索
upsearch() {
},
//根据ID获取树结构
filterTree(id) {
var target = null;
function filter(tree) {
tree.forEach(item => {
if (item.id == id) {
target = item
}
if (item.children) {
filter(item.children)
}
})
}
filter(this.$refs.table.tableData)
return target
},
//本地更新数据
handleSaveSuccess(data, type) {
if (type == 'add') {
this.$refs.table.refresh()
} else if (type == 'edit') {
this.$refs.table.refresh()
}
}
}
}
</script>
<style scoped>
.treeMain {
height: 280px;
overflow: auto;
border: 1px solid #dcdfe6;
margin-bottom: 10px;
}
</style>