<template>
<el-container>
<el-main>
<!--检索条件-->
<el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
<el-col :span="6">
<el-input v-model="queryinfo.name" placeholder="名称" style="width: 200px" clearable>
<template slot="prepend">名称</template>
</el-input>
</el-col>
<el-col :span="6">
<el-input v-model="queryinfo.key" placeholder="key-ID" style="width: 200px" clearable>
<template slot="prepend">key-ID</template>
</el-input>
</el-col>
<el-col :span="8">
<el-button type="primary" v-on:click="getList">查询</el-button>
<el-button type="success" v-on:click="toAddDialog">新增</el-button>
</el-col>
</el-row>
<el-row>
<template>
<el-table
v-loading="tableloading"
:data="tableData"
style="width: 100%"
:default-sort = "{prop: 'date', order: 'descending'}"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
>
<el-table-column
prop="name"
label="名称"
width="160">
</el-table-column>
<el-table-column
prop="category"
label="类别">
</el-table-column>
<el-table-column
prop="key"
label="key-ID"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="id"
label="id"
width="160"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="deploymentTime"
label="时间"
width="160">
</el-table-column>
<el-table-column
prop="filePath"
label="文件路径">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="280">
<template slot-scope="scope">
<el-button type="success" size="mini" @click="sendForm()">实例管理</el-button>
<el-button type="warning" size="mini" @click="remove(scope.$index,scope.row)">删除</el-button>
<el-button type="danger" size="mini" @click="removeDel(scope.$index,scope.row)">彻底删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-row>
<!--分页模块-->
<el-row style="float: right;margin-top: 20px">
<el-col>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryinfo.pageNum"
:page-sizes="[10, 20, 30, 40]"
:page-size="queryinfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-col>
</el-row>
<!-- 新增弹框-->
<el-dialog title="收货地址" :visible.sync="dialogFormVisible" style="margin-top: -60px" width="60%">
<el-form :model="formInline" :rules="rules" ref="formInline">
<el-row>
<el-col :offset="2" :span="12">
<el-form-item label="" :label-width="formLabelWidth">
<el-upload
class="upload-demo"
drag
:action="uploadPath"
:headers="uploadHeaderObj"
:on-success="handleUploadSuccess">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传xml文件</em></div>
<div class="el-upload__tip" slot="tip">只能上传xml文件，且不超过2MB</div>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="" :label-width="formLabelWidth">
<el-input v-model="formInline.filePath" disabled style="width: 220px">
<template slot="prepend">路径</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="" :label-width="formLabelWidth" prop="key">
<el-input v-model="formInline.key" style="width: 220px">
<template slot="prepend">key</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="" :label-width="formLabelWidth">
<el-input v-model="formInline.category" style="width: 220px">
<template slot="prepend">类别</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="" :label-width="formLabelWidth" prop="name">
<el-input v-model="formInline.name " style="width: 220px">
<template slot="prepend">名称</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="" :label-width="formLabelWidth">
<el-input v-model="formInline.tenantId " style="width: 220px">
<template slot="prepend">租户</template>
</el-input>
</el-form-item>
</el-col>
<!-- <el-col :span="12">-->
<!-- <el-form-item label="" :label-width="formLabelWidth">-->
<!-- <el-input v-model="" style="width: 220px">-->
<!-- <template slot="prepend">其他</template>-->
<!-- </el-input>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
</el-row>
</el-form>
<div slot="footer" class="dialog-footer" align="center">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="trans_add">确 定</el-button>
</div>
</el-dialog>
</el-main>
</el-container>
</template>
<script>
import {deployment, del,upload,create,uploadPath} from "../../api/technological";
export default {
name: "technological",
data() {
return{
//实例对象
fApi: {},
//表单数据
formvalue: {},
//表单生成规则
formrule: [
{
type: 'input',
field: 'goods_name',
title: '商品名称'
},
{
type: 'datePicker',
field: 'created_at',
title: '创建时间'
}
],
//组件参数配置
formoption: {
//表单提交事件
onSubmit: function (formData) {
alert(JSON.stringify(formData))
}
},
queryinfo:{
name:'',
key:'',
pageNum:1,
pageSize:10,
},
uploadPath:uploadPath,
total:0,
tableData: [],
tableloading:false,
formInline:{
filePath :'',
category:'',
key:'',
name:'',
tenantId:'',
variables: {},
// cascade:'true'
},
uploadHeaderObj: {
Authorization: window.sessionStorage.getItem("token"),
},
faceImageUrl:'',
formLabelWidth: '120px',
dialogFormVisible:false,
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' },
// { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
filePath : [
{ required: true, message: '请上传文件', trigger: 'blur' }
],
key : [
{ required: true, message: '请输入部署key', trigger: 'blur' }
],
}
}
},
mounted() {
this.getList();
},
methods: {
// 分页
handleSizeChange(val) {
this.queryinfo.pageSize= val
this.getList()
},
handleCurrentChange(val) {
this.queryinfo.pageNum = val
this.getList()
},
//查询
getList() {
const _this = this
this.tableloading = true;
deployment(this.queryinfo).then((response) => {
const res = response.data
if (res.code != '200') {
return _this.$message.error('获取消息收发记录，失败！')
}
// 获取列表数据
_this.tableData = res.data
// 获取列表的总记录数
_this.total = res.total
_this.$message.success('获取消息收发记录，成功！')
this.tableloading = false;
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
this.tableloading = false;
})
},
//打开新增
toAddDialog() {
this.dialogFormVisible = true;
this.formInline = {
filePath :'',
category:'',
key:'',
name:'',
tenantId:'',
variables: {},
// cascade:'true'
}
},
//上传文件
handleUploadSuccess: function(response, file, fileList){
let res = response.data;
if (response.code !== '200') {
// 关闭加载
return this.$message.error(response.msg);
}
this.$message.success(response.msg);
this.formInline.filePath = res.relativePath
},
//新增功能
trans_add() {
// 进行表单的预验证
this.$refs.formInline.validate(valid => {
// 未通过，表单预校验
if (!valid) return;
create(this.formInline).then((response) => {
let res = response.data;
// 添加失败
if (res.code !== '200') {
// 关闭加载
return this.$message.error(res.msg);
// 隐藏对话框
this.dialogFormVisible = false;
}
// 添加，成功
this.$message.success(res.msg);
// 隐藏对话框
this.dialogFormVisible = false;
// 刷新列表
this.getList();
}).catch(error => {
this.$message.error(error.toString());
});
})
},
//删除
remove(index,row){
// 弹框询问是否删除？
this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
del({id:row.id,cascade:false}).then((response) => {
let res = response.data;
this.$message.success(res.msg);
this.getList();
}).catch(error => {
this.$message.error(res.msg);
});
}).catch(() => {
});
},
removeDel(index,row){
// 弹框询问是否删除？
this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
del({id:row.id,cascade:true}).then((response) => {
let res = response.data;
this.$message.success(res.msg);
this.getList();
}).catch(error => {
this.$message.error(res.msg);
});
}).catch(() => {
});
},
sendForm(){
this.$router.push({path:'/example',query:{processDefinitionKey:this.queryinfo.key}});
}
}
}
</script>
<style scoped>
.toolbar{
height: 60px;
background-color: white;
/*line-height: 60px;*/
vertical-align: middle;
border-radius: 5px 5px 5px 5px;
padding: 15px 0 0 20px;
box-shadow: 0px 5px 5px #e5e8eb;
}
</style>