61 changed files with 1073 additions and 8116 deletions
@ -0,0 +1,17 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
export default { |
|||
|
|||
// 获取用户列表
|
|||
customerListPage: function(data) { |
|||
return request({ |
|||
url: '/lpkcustomer/customerListPage', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
}, |
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
|
After Width: | Height: | Size: 443 KiB |
@ -1,282 +1,257 @@ |
|||
<template> |
|||
<div :class="{ 'has-logo': showLogo }"> |
|||
<logo v-if="showLogo" :collapse="isCollapse" /> |
|||
<el-scrollbar wrap-class="scrollbar-wrapper"> |
|||
<el-menu |
|||
:default-active="$route.path" |
|||
:background-color="variables.menuBg" |
|||
:text-color="variables.menuText" |
|||
:unique-opened="false" |
|||
:active-text-color="variables.menuActiveText" |
|||
:collapse-transition="false" |
|||
mode="vertical" |
|||
> |
|||
<sidebar-item |
|||
v-for="route in routes" |
|||
:key="route.path" |
|||
:item="route" |
|||
:base-path="route.path" |
|||
/> |
|||
</el-menu> |
|||
</el-scrollbar> |
|||
</div> |
|||
<div :class="{ 'has-logo': showLogo }"> |
|||
<logo v-if="showLogo" :collapse="isCollapse" /> |
|||
<el-scrollbar wrap-class="scrollbar-wrapper"> |
|||
<el-menu :default-active="$route.path" :background-color="variables.menuBg" :text-color="variables.menuText" |
|||
:unique-opened="false" :active-text-color="variables.menuActiveText" :collapse-transition="false" |
|||
mode="vertical"> |
|||
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" /> |
|||
</el-menu> |
|||
</el-scrollbar> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from "vuex"; |
|||
import Logo from "./Logo"; |
|||
import SidebarItem from "./SidebarItem"; |
|||
import variables from "@/styles/variables.scss"; |
|||
import { getrolemenus, loginDetails } from "@/api/system/Role/role.js"; |
|||
import { getStorage } from "@/utils/auth"; |
|||
export default { |
|||
components: { |
|||
SidebarItem, |
|||
Logo, |
|||
}, |
|||
data() { |
|||
return { |
|||
YongHuid: [], |
|||
// routes: [], |
|||
params: { |
|||
sourceSid: "9d048c07-7677-4774-9177-aa02b049ff06", |
|||
userSid: "", |
|||
}, |
|||
routes: [ |
|||
{ |
|||
alwaysShow: true, |
|||
component: "supervise", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "进销存管理", |
|||
}, |
|||
name: "supervise", |
|||
path: "/supervise", |
|||
children: [ |
|||
{ |
|||
alwaysShow: true, |
|||
component: "recordOilTank", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "出库申请", |
|||
}, |
|||
name: "oilTypeInBound", |
|||
path: "/oilTypeInBound", |
|||
children: [ |
|||
{ |
|||
alwaysShow: true, |
|||
component: "oilTypeInBound", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "出库申请", |
|||
}, |
|||
name: "/supervise/oilTypeInBound", |
|||
path: "/supervise/oilTypeInBound", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "oilTypeOutBound", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "出库记录列表", |
|||
}, |
|||
name: "/supervise/oilTypeOutBound", |
|||
path: "/supervise/oilTypeOutBound", |
|||
} |
|||
], |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "index", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "入库申请", |
|||
}, |
|||
name: "recordOilTank", |
|||
path: "/recordOilTank", |
|||
children: [ |
|||
{ |
|||
alwaysShow: true, |
|||
component: "recordOilTank", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "入库申请", |
|||
}, |
|||
name: "/supervise/recordOilTank", |
|||
path: "/supervise/recordOilTank", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "rukujilu", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "入库记录列表", |
|||
}, |
|||
name: "/supervise/rukujilu", |
|||
path: "/supervise/rukujilu", |
|||
} |
|||
], |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "churuku", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "出入库记录", |
|||
}, |
|||
name: "/supervise/churuku", |
|||
path: "/supervise/churuku", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "inventory", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "库存管理", |
|||
}, |
|||
name: "/supervise/inventory", |
|||
path: "/supervise/inventory", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "churukuHT", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "出入库合同管理", |
|||
}, |
|||
name: "/supervise/churukuHT", |
|||
path: "/supervise/churukuHT", |
|||
} |
|||
], |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "MaterialBrand", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "物料品牌", |
|||
}, |
|||
name: "/MaterialBrand/index", |
|||
path: "/MaterialBrand/index" |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "materialManagement", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "物料管理", |
|||
}, |
|||
name: "/materialManagement/index", |
|||
path: "/materialManagement/index" |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "storeManagement", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "仓库管理", |
|||
}, |
|||
name: "/storeManagement/index", |
|||
path: "/storeManagement/index" |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "supplierManagement", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "供应商管理", |
|||
}, |
|||
name: "/supplierManagement/index", |
|||
path: "/supplierManagement/index" |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
computed: { |
|||
...mapGetters(["sidebar"]), |
|||
// routes() { |
|||
// f4d2e507-c4ed-451c-b364-04c08f962045 |
|||
// console.log('78979789', this.$router.options.routes) |
|||
// return this.$router.options.routes |
|||
// }, |
|||
activeMenu() { |
|||
// const route = this.$route |
|||
// const { |
|||
// meta, |
|||
// path |
|||
// } = route |
|||
// // if set path, the sidebar will highlight the path you set |
|||
// if (meta.activeMenu) { |
|||
// return meta.activeMenu |
|||
// } |
|||
return "/index"; |
|||
}, |
|||
showLogo() { |
|||
return this.$store.state.settings.sidebarLogo; |
|||
}, |
|||
variables() { |
|||
return variables; |
|||
}, |
|||
isCollapse() { |
|||
return !this.sidebar.opened; |
|||
}, |
|||
}, |
|||
created() { |
|||
this.postHuoquyonghu(); |
|||
}, |
|||
methods: { |
|||
// 获取用户信息 |
|||
postHuoquyonghu() { |
|||
// var token = getStorage() |
|||
// loginDetails(token).then((response) => { |
|||
// console.log('resss', response) |
|||
// if (response.code === '200') { |
|||
// this.YongHuid = response.data |
|||
// this.params.userSid = this.YongHuid.sid |
|||
// getrolemenus(this.params).then((res) => { |
|||
// const userRoles = this.resRouter(res.data) |
|||
this.routes.push({ |
|||
path: "*", |
|||
redirect: "/404", |
|||
hidden: true, |
|||
}); |
|||
console.log("左侧菜单", this.routes); |
|||
return this.routes; |
|||
// }) |
|||
// } |
|||
// }) |
|||
}, |
|||
resRouter(menus) { |
|||
// 递归，将后台传来数组 |
|||
for (var i = 0; i < menus.length; i++) { |
|||
if (menus[i].children && menus[i].children.length != 0) { |
|||
this.resRouter(menus[i].children); |
|||
} |
|||
if (menus[i].children.length == 0) { |
|||
delete menus[i].children; |
|||
delete menus[i].redirect; |
|||
} |
|||
if (menus[i].component == "") { |
|||
console.log("55555", menus[i]); |
|||
menus[i] = { |
|||
path: menus[i].path, |
|||
component: "", |
|||
redirect: menus[i].path, |
|||
children: [menus[i]], |
|||
}; |
|||
} else { |
|||
// menus[i] = { |
|||
// path: menus[i].path, |
|||
// component: '', |
|||
// redirect: menus[i].path, |
|||
// children: [menus[i]], |
|||
// } |
|||
} |
|||
} |
|||
this.routes = menus; |
|||
console.log("左侧菜单", this.routes); |
|||
return menus; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
import { |
|||
mapGetters |
|||
} from "vuex"; |
|||
import Logo from "./Logo"; |
|||
import SidebarItem from "./SidebarItem"; |
|||
import variables from "@/styles/variables.scss"; |
|||
import { |
|||
getrolemenus, |
|||
loginDetails |
|||
} from "@/api/system/Role/role.js"; |
|||
import { |
|||
getStorage |
|||
} from "@/utils/auth"; |
|||
export default { |
|||
components: { |
|||
SidebarItem, |
|||
Logo, |
|||
}, |
|||
data() { |
|||
return { |
|||
YongHuid: [], |
|||
// routes: [], |
|||
params: { |
|||
sourceSid: "", |
|||
userSid: "", |
|||
}, |
|||
routes: [{ |
|||
alwaysShow: true, |
|||
component: "userInfo", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "用户信息", |
|||
}, |
|||
name: "/userInfo/index", |
|||
path: "/userInfo/index" |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "marketingCard", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "营销卡设置", |
|||
}, |
|||
name: "/marketingCard", |
|||
path: "/marketingCard", |
|||
children: [ |
|||
|
|||
{ |
|||
alwaysShow: true, |
|||
component: "index", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "礼包设置", |
|||
}, |
|||
name: "/marketingCard/index", |
|||
path: "/marketingCard/index", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "packageDetails", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "礼包奖品明细", |
|||
}, |
|||
name: "/marketingCard/packageDetails", |
|||
path: "/marketingCard/packageDetails", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "pickupCardSet", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "提货卡设置", |
|||
}, |
|||
name: "/marketingCard/pickupCardSet", |
|||
path: "/marketingCard/pickupCardSet", |
|||
}, |
|||
] |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "pickupPoint", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "提货地点", |
|||
}, |
|||
name: "/pickupPoint/index", |
|||
path: "/pickupPoint/index" |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "commodity", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "商品信息", |
|||
}, |
|||
name: "/commodity/index", |
|||
path: "/commodity/index" |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "order", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "订单信息", |
|||
}, |
|||
name: "/order/index", |
|||
path: "/order/index" |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "statisticalReport", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "统计报表", |
|||
}, |
|||
name: "/statisticalReport/index", |
|||
path: "/statisticalReport/index", |
|||
children: [ |
|||
|
|||
{ |
|||
alwaysShow: true, |
|||
component: "index", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "提货卡汇总", |
|||
}, |
|||
name: "/statisticalReport/index", |
|||
path: "/statisticalReport/index", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "collectionSummary", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "提货汇总", |
|||
}, |
|||
name: "/statisticalReport/collectionSummary", |
|||
path: "/statisticalReport/collectionSummary", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "deliveryDetails", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "客户提货明细", |
|||
}, |
|||
name: "/statisticalReport/deliveryDetails", |
|||
path: "/statisticalReport/deliveryDetails", |
|||
}, |
|||
] |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
computed: { |
|||
...mapGetters(["sidebar"]), |
|||
// routes() { |
|||
// f4d2e507-c4ed-451c-b364-04c08f962045 |
|||
// console.log('78979789', this.$router.options.routes) |
|||
// return this.$router.options.routes |
|||
// }, |
|||
activeMenu() { |
|||
// const route = this.$route |
|||
// const { |
|||
// meta, |
|||
// path |
|||
// } = route |
|||
// // if set path, the sidebar will highlight the path you set |
|||
// if (meta.activeMenu) { |
|||
// return meta.activeMenu |
|||
// } |
|||
return "/index"; |
|||
}, |
|||
showLogo() { |
|||
return this.$store.state.settings.sidebarLogo; |
|||
}, |
|||
variables() { |
|||
return variables; |
|||
}, |
|||
isCollapse() { |
|||
return !this.sidebar.opened; |
|||
}, |
|||
}, |
|||
created() { |
|||
this.postHuoquyonghu(); |
|||
}, |
|||
methods: { |
|||
// 获取用户信息 |
|||
postHuoquyonghu() { |
|||
// var token = getStorage() |
|||
// loginDetails(token).then((response) => { |
|||
// console.log('resss', response) |
|||
// if (response.code === '200') { |
|||
// this.YongHuid = response.data |
|||
// this.params.userSid = this.YongHuid.sid |
|||
// getrolemenus(this.params).then((res) => { |
|||
// const userRoles = this.resRouter(res.data) |
|||
this.routes.push({ |
|||
path: "*", |
|||
redirect: "/404", |
|||
hidden: true, |
|||
}); |
|||
console.log("左侧菜单", this.routes); |
|||
return this.routes; |
|||
// }) |
|||
// } |
|||
// }) |
|||
}, |
|||
resRouter(menus) { |
|||
// 递归，将后台传来数组 |
|||
for (var i = 0; i < menus.length; i++) { |
|||
if (menus[i].children && menus[i].children.length != 0) { |
|||
this.resRouter(menus[i].children); |
|||
} |
|||
if (menus[i].children.length == 0) { |
|||
delete menus[i].children; |
|||
delete menus[i].redirect; |
|||
} |
|||
if (menus[i].component == "") { |
|||
console.log("55555", menus[i]); |
|||
menus[i] = { |
|||
path: menus[i].path, |
|||
component: "", |
|||
redirect: menus[i].path, |
|||
children: [menus[i]], |
|||
}; |
|||
} else { |
|||
// menus[i] = { |
|||
// path: menus[i].path, |
|||
// component: '', |
|||
// redirect: menus[i].path, |
|||
// children: [menus[i]], |
|||
// } |
|||
} |
|||
} |
|||
this.routes = menus; |
|||
console.log("左侧菜单", this.routes); |
|||
return menus; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -1,223 +0,0 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div v-show="viewState == 1"> |
|||
<button-bar |
|||
ref="btnbar" |
|||
view-title="物料品牌" |
|||
:btndisabled="btndisabled" |
|||
@btnhandle="btnHandle" |
|||
/> |
|||
<div class="main-content"> |
|||
<div class="searchcon"> |
|||
<el-button size="small" class="searchbtn" @click="clicksearchShow"> |
|||
{{ searchxianshitit }} |
|||
</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form |
|||
ref="queryParams" |
|||
:model="listQuery" |
|||
:inline="true" |
|||
class="tab-header" |
|||
> |
|||
<el-form-item label="品牌名称"> |
|||
<el-input |
|||
v-model="listQuery.brand_name" |
|||
maxlength="20" |
|||
placeholder="请输入品牌名称" |
|||
class="brand_name" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="物料组"> |
|||
<el-select v-model="listQuery.type" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in Materia" :key="i" :label="item" :value="i"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="btn" style="text-align: center"> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-search" |
|||
@click="dosearch" |
|||
>查询</el-button |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-refresh" |
|||
@click="resetQuery" |
|||
>重置</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-table :data="logList" style="width: 100%" border> |
|||
<el-table-column |
|||
label="序号" |
|||
type="index" |
|||
width="80" |
|||
:index="indexMethod" |
|||
fixed |
|||
align="center" |
|||
/> |
|||
<el-table-column align="center" prop="id" label="物料品牌id" width="150"></el-table-column> |
|||
<el-table-column align="center" prop="brand_name" label="品牌名称"></el-table-column> |
|||
<el-table-column align="center" prop="type" label="物料组" width="200" :formatter="getMateria"></el-table-column> |
|||
<el-table-column align="center" prop="create_time" label="创建时间" :formatter="getTime" ></el-table-column> |
|||
</el-table> |
|||
<div class="pages"> |
|||
<div class="tit" /> |
|||
<pagination |
|||
v-show="logList.length > 0" |
|||
:total="total" |
|||
:page.sync="listQuery.page" |
|||
:limit.sync="listQuery.limit" |
|||
class="pagination" |
|||
@pagination="loadLogList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from "@/api/gfApi"; |
|||
import Pagination from "@/components/pagination"; |
|||
import ButtonBar from "@/components/ButtonBar"; |
|||
export default { |
|||
components: { |
|||
ButtonBar, |
|||
Pagination, |
|||
}, |
|||
data() { |
|||
return { |
|||
viewState: 1, |
|||
tabActiveName: "uplog", |
|||
index: "0", |
|||
isSearchShow: false, |
|||
searchxianshitit: "显示查询条件", |
|||
btndisabled: false, |
|||
btnList: [ |
|||
{ |
|||
type: "info", |
|||
size: "small", |
|||
icon: "cross", |
|||
btnKey: "doClose", |
|||
btnLabel: "关闭", |
|||
}, |
|||
], |
|||
logList: [], |
|||
tempList: [], |
|||
listQuery: { |
|||
page: 1, |
|||
limit: 10, |
|||
type:'', |
|||
brand_name:'' |
|||
}, |
|||
total: 0, |
|||
jmdListQuery: { |
|||
contractNumber: "", |
|||
date: "", |
|||
}, |
|||
Materia:{}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
// 初始化按钮 |
|||
this.$refs["btnbar"].setButtonList(this.btnList); |
|||
}, |
|||
created() { |
|||
// 初始化变量 |
|||
this.init(); |
|||
}, |
|||
methods: { |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow; |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = "隐藏查询条件"; |
|||
} else { |
|||
this.searchxianshitit = "显示查询条件"; |
|||
} |
|||
}, |
|||
dosearch() { |
|||
this.loadLogList(); |
|||
}, |
|||
to2(row, col, val) { |
|||
return parseFloat(val).toFixed(2) |
|||
}, |
|||
resetQuery() { |
|||
this.listQuery = { |
|||
page: 1, |
|||
limit: 10, |
|||
type:'', |
|||
brand_name:'' |
|||
}; |
|||
this.total = 0; |
|||
this.loadLogList(); |
|||
}, |
|||
// 右上角点击事件 |
|||
btnHandle(btnKey) { |
|||
switch (btnKey) { |
|||
case "doClose": // 关闭 |
|||
this.doClose(); |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}, |
|||
init() { |
|||
this.loadLogList(); |
|||
this.getMaterialGroup(); |
|||
}, |
|||
getTime: function (row, column) { |
|||
let date = new Date(row.create_time * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000 |
|||
let Year = date.getFullYear() + '-'; |
|||
let Month = (date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; |
|||
function format(time) { |
|||
return time < 10?'0'+ time:time; |
|||
} |
|||
let D = format(date.getDate()) + ' '; |
|||
let h = format(date.getHours()) + ':'; // 小时 |
|||
let m = format(date.getMinutes())+ ':'; // 分钟 |
|||
let s = format(date.getSeconds()); // 秒 |
|||
return Year + Month + D + h + m + s; |
|||
}, |
|||
getMateria:function(row,column){ |
|||
return this.Materia[row.type]; |
|||
}, |
|||
loadLogList() { |
|||
req.getMaterialBrandList(this.listQuery).then((res) => { |
|||
if(res.code==200){ |
|||
this.total = res.data.data.count |
|||
this.logList = res.data.data.list |
|||
} |
|||
}); |
|||
}, |
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.listQuery.page - 1) * this.listQuery.limit; |
|||
var pageindex = index + 1 + pagestart; |
|||
return pageindex; |
|||
}, |
|||
resetState() { |
|||
this.viewState = 1; |
|||
}, |
|||
getMaterialGroup(){ |
|||
req.getMaterialGroup().then((res) => { |
|||
this.Materia=res.data.data |
|||
}); |
|||
}, |
|||
doClose() { |
|||
this.$store.dispatch("tagsView/delView", this.$route); |
|||
this.$router.go(-1); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
</style> |
|||
|
|||
@ -1,68 +0,0 @@ |
|||
/** |
|||
* 存储流程设计相关参数 |
|||
*/ |
|||
export default class BpmData { |
|||
constructor() { |
|||
this.controls = [] // 设计器控件
|
|||
this.init() |
|||
} |
|||
|
|||
init() { |
|||
this.controls = [ |
|||
{ |
|||
action: 'create.start-event', |
|||
title: '开始' |
|||
}, |
|||
{ |
|||
action: 'create.intermediate-event', |
|||
title: '中间' |
|||
}, |
|||
{ |
|||
action: 'create.end-event', |
|||
title: '结束' |
|||
}, |
|||
{ |
|||
action: 'create.exclusive-gateway', |
|||
title: '网关' |
|||
}, |
|||
{ |
|||
action: 'create.task', |
|||
title: '任务' |
|||
}, |
|||
{ |
|||
action: 'create.user-task', |
|||
title: '用户任务' |
|||
}, |
|||
{ |
|||
action: 'create.user-sign-task', |
|||
title: '会签任务' |
|||
}, |
|||
{ |
|||
action: 'create.subprocess-expanded', |
|||
title: '子流程' |
|||
}, |
|||
{ |
|||
action: 'create.data-object', |
|||
title: '数据对象' |
|||
}, |
|||
{ |
|||
action: 'create.data-store', |
|||
title: '数据存储' |
|||
}, |
|||
{ |
|||
action: 'create.participant-expanded', |
|||
title: '扩展流程' |
|||
}, |
|||
{ |
|||
action: 'create.group', |
|||
title: '分组' |
|||
} |
|||
] |
|||
} |
|||
|
|||
// 获取控件配置信息
|
|||
getControl(action) { |
|||
const result = this.controls.filter(item => item.action === action) |
|||
return result[0] || {} |
|||
} |
|||
} |
|||
@ -1,169 +0,0 @@ |
|||
<template> |
|||
<div ref="propertyPanel" class="property-panel"> |
|||
<div v-if="nodeName" class="node-name">{{ nodeName }}</div> |
|||
<component |
|||
:is="getComponent" |
|||
v-if="element" |
|||
:element="element" |
|||
:modeler="modeler" |
|||
:users="users" |
|||
:groups="groups" |
|||
:categorys="categorys" |
|||
@dataType="dataType" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import taskPanel from './components/nodePanel/task' |
|||
import startEndPanel from './components/nodePanel/startEnd' |
|||
import processPanel from './components/nodePanel/process' |
|||
import sequenceFlowPanel from './components/nodePanel/sequenceFlow' |
|||
import gatewayPanel from './components/nodePanel/gateway' |
|||
import { NodeName } from './lang/zh' |
|||
|
|||
export default { |
|||
name: 'PropertyPanel', |
|||
components: { processPanel, taskPanel, startEndPanel, sequenceFlowPanel, gatewayPanel }, |
|||
props: { |
|||
users: { |
|||
type: Array, |
|||
required: true |
|||
}, |
|||
groups: { |
|||
type: Array, |
|||
required: true |
|||
}, |
|||
categorys: { |
|||
type: Array, |
|||
required: true |
|||
}, |
|||
modeler: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
element: null, |
|||
form: { |
|||
id: '', |
|||
name: '', |
|||
color: null |
|||
}, |
|||
roles: [ |
|||
{ value: 'manager', label: '经理' }, |
|||
{ value: 'personnel', label: '人事' }, |
|||
{ value: 'charge', label: '主管' } |
|||
] |
|||
} |
|||
}, |
|||
computed: { |
|||
getComponent() { |
|||
const type = this.element?.type |
|||
if (['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'].includes(type)) { |
|||
return 'startEndPanel' |
|||
} |
|||
if ([ |
|||
'bpmn:UserTask', |
|||
'bpmn:Task', |
|||
'bpmn:SendTask', |
|||
'bpmn:ReceiveTask', |
|||
'bpmn:ManualTask', |
|||
'bpmn:BusinessRuleTask', |
|||
'bpmn:ServiceTask', |
|||
'bpmn:ScriptTask' |
|||
// 'bpmn:CallActivity', |
|||
// 'bpmn:SubProcess' |
|||
].includes(type)) { |
|||
return 'taskPanel' |
|||
} |
|||
if (type === 'bpmn:SequenceFlow') { |
|||
return 'sequenceFlowPanel' |
|||
} |
|||
if ([ |
|||
'bpmn:InclusiveGateway', |
|||
'bpmn:ExclusiveGateway', |
|||
'bpmn:ParallelGateway', |
|||
'bpmn:EventBasedGateway' |
|||
].includes(type)) { |
|||
return 'gatewayPanel' |
|||
} |
|||
if (type === 'bpmn:Process') { |
|||
return 'processPanel' |
|||
} |
|||
return null |
|||
}, |
|||
nodeName() { |
|||
if (this.element) { |
|||
const bizObj = this.element.businessObject |
|||
const type = bizObj?.eventDefinitions |
|||
? bizObj.eventDefinitions[0].$type |
|||
: bizObj.$type |
|||
return NodeName[type] || type |
|||
} |
|||
return '' |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.handleModeler() |
|||
}, |
|||
methods: { |
|||
handleModeler() { |
|||
this.modeler.on('root.added', e => { |
|||
if (e.element.type === 'bpmn:Process') { |
|||
this.element = null |
|||
this.$nextTick().then(() => { |
|||
this.element = e.element |
|||
}) |
|||
} |
|||
}) |
|||
this.modeler.on('element.click', e => { |
|||
const { element } = e |
|||
console.log(element) |
|||
if (element.type === 'bpmn:Process') { |
|||
this.element = element |
|||
} |
|||
}) |
|||
this.modeler.on('selection.changed', e => { |
|||
// hack 同类型面板不刷新 |
|||
this.element = null |
|||
const element = e.newSelection[0] |
|||
if (element) { |
|||
this.$nextTick().then(() => { |
|||
this.element = element |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
/** 获取数据类型 */ |
|||
dataType(data){ |
|||
this.$emit('dataType', data) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.property-panel { |
|||
padding: 20px 20px; |
|||
// reset element css |
|||
.el-form--label-top .el-form-item__label { |
|||
padding: 0; |
|||
} |
|||
.el-form-item { |
|||
margin-bottom: 6px; |
|||
} |
|||
.tab-table .el-form-item { |
|||
margin-bottom: 16px; |
|||
} |
|||
.node-name{ |
|||
border-bottom: 1px solid #ccc; |
|||
padding: 0 0 10px 20px; |
|||
margin-bottom: 10px; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
color: #444; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,20 +0,0 @@ |
|||
import translations from '../lang/zh' |
|||
|
|||
export default function customTranslate(template, replacements) { |
|||
replacements = replacements || {} |
|||
|
|||
// Translate
|
|||
template = translations[template] || template |
|||
|
|||
// Replace
|
|||
return template.replace(/{([^}]+)}/g, function(_, key) { |
|||
var str = replacements[key] |
|||
if ( |
|||
translations[replacements[key]] !== null && |
|||
translations[replacements[key]] !== 'undefined' |
|||
) { |
|||
str = translations[replacements[key]] |
|||
} |
|||
return str || '{' + key + '}' |
|||
}) |
|||
} |
|||
@ -1,24 +0,0 @@ |
|||
|
|||
import executionListenerDialog from '../components/nodePanel/property/executionListener' |
|||
export default { |
|||
components: { |
|||
executionListenerDialog |
|||
}, |
|||
data() { |
|||
return { |
|||
executionListenerLength: 0, |
|||
dialogName: null |
|||
} |
|||
}, |
|||
methods: { |
|||
computedExecutionListenerLength() { |
|||
this.executionListenerLength = this.element.businessObject.extensionElements?.values?.length ?? 0 |
|||
}, |
|||
finishExecutionListener() { |
|||
if (this.dialogName === 'executionListenerDialog') { |
|||
this.computedExecutionListenerLength() |
|||
} |
|||
this.dialogName = '' |
|||
} |
|||
} |
|||
} |
|||
@ -1,70 +0,0 @@ |
|||
import xcrud from 'xcrud' |
|||
import golbalConfig from 'xcrud/package/common/config' |
|||
import showConfig from '../flowable/showConfig' |
|||
golbalConfig.set({ |
|||
input: { |
|||
// size: 'mini'
|
|||
}, |
|||
select: { |
|||
// size: 'mini'
|
|||
}, |
|||
colorPicker: { |
|||
showAlpha: true |
|||
}, |
|||
xform: { |
|||
form: { |
|||
labelWidth: 'auto' |
|||
// size: 'mini'
|
|||
} |
|||
} |
|||
}) |
|||
export default { |
|||
components: { xForm: xcrud.xForm }, |
|||
props: { |
|||
modeler: { |
|||
type: Object, |
|||
required: true |
|||
}, |
|||
element: { |
|||
type: Object, |
|||
required: true |
|||
}, |
|||
categorys: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}, |
|||
watch: { |
|||
'formData.id': function(val) { |
|||
this.updateProperties({ id: val }) |
|||
}, |
|||
'formData.name': function(val) { |
|||
this.updateProperties({ name: val }) |
|||
}, |
|||
'formData.documentation': function(val) { |
|||
if (!val) { |
|||
this.updateProperties({ documentation: [] }) |
|||
return |
|||
} |
|||
const documentationElement = this.modeler.get('moddle').create('bpmn:Documentation', { text: val }) |
|||
this.updateProperties({ documentation: [documentationElement] }) |
|||
} |
|||
}, |
|||
methods: { |
|||
updateProperties(properties) { |
|||
const modeling = this.modeler.get('modeling') |
|||
modeling.updateProperties(this.element, properties) |
|||
} |
|||
}, |
|||
computed: { |
|||
elementType() { |
|||
const bizObj = this.element.businessObject |
|||
return bizObj.eventDefinitions |
|||
? bizObj.eventDefinitions[0].$type |
|||
: bizObj.$type |
|||
}, |
|||
showConfig() { |
|||
return showConfig[this.elementType] || {} |
|||
} |
|||
} |
|||
} |
|||
@ -1,22 +0,0 @@ |
|||
import xcrud from 'xcrud' |
|||
import golbalConfig from 'xcrud/package/common/config' |
|||
golbalConfig.set({ |
|||
input: { |
|||
// size: 'mini'
|
|||
}, |
|||
select: { |
|||
// size: 'mini'
|
|||
}, |
|||
colorPicker: { |
|||
showAlpha: true |
|||
}, |
|||
xform: { |
|||
form: { |
|||
labelWidth: 'auto' |
|||
// size: 'mini'
|
|||
} |
|||
} |
|||
}) |
|||
export default { |
|||
components: { xForm: xcrud.xForm } |
|||
} |
|||
@ -1,53 +0,0 @@ |
|||
export function commonParse(element) { |
|||
const result = { |
|||
...element.businessObject, |
|||
...element.businessObject.$attrs |
|||
} |
|||
return formatJsonKeyValue(result) |
|||
} |
|||
|
|||
export function formatJsonKeyValue(result) { |
|||
// 移除flowable前缀，格式化数组
|
|||
for (const key in result) { |
|||
if (key.indexOf('flowable:') === 0) { |
|||
const newKey = key.replace('flowable:', '') |
|||
result[newKey] = result[key] |
|||
delete result[key] |
|||
} |
|||
} |
|||
result = documentationParse(result) |
|||
return result |
|||
} |
|||
|
|||
export function documentationParse(obj) { |
|||
if ('documentation' in obj) { |
|||
let str = '' |
|||
obj.documentation.forEach(item => { |
|||
str += item.text |
|||
}) |
|||
obj.documentation = str |
|||
} |
|||
return obj |
|||
} |
|||
|
|||
export function conditionExpressionParse(obj) { |
|||
if ('conditionExpression' in obj) { |
|||
obj.conditionExpression = obj.conditionExpression.body |
|||
} |
|||
return obj |
|||
} |
|||
|
|||
export function userTaskParse(obj) { |
|||
for (const key in obj) { |
|||
if (key === 'candidateUsers') { |
|||
obj.userType = 'candidateUsers' |
|||
obj[key] = obj[key]?.split(',') || [] |
|||
} else if (key === 'candidateGroups') { |
|||
obj.userType = 'candidateGroups' |
|||
obj[key] = obj[key]?.split(',') || [] |
|||
} else if (key === 'assignee') { |
|||
obj.userType = 'assignee' |
|||
} |
|||
} |
|||
return obj |
|||
} |
|||
@ -1,24 +0,0 @@ |
|||
export default class CustomContextPad { |
|||
constructor(config, contextPad, create, elementFactory, injector, translate) { |
|||
this.create = create; |
|||
this.elementFactory = elementFactory; |
|||
this.translate = translate; |
|||
|
|||
if (config.autoPlace !== false) { |
|||
this.autoPlace = injector.get('autoPlace', false); |
|||
} |
|||
|
|||
contextPad.registerProvider(this); // 定义这是一个contextPad |
|||
} |
|||
|
|||
getContextPadEntries(element) {} |
|||
} |
|||
|
|||
CustomContextPad.$inject = [ |
|||
'config', |
|||
'contextPad', |
|||
'create', |
|||
'elementFactory', |
|||
'injector', |
|||
'translate' |
|||
]; |
|||
@ -1,81 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<x-form ref="xForm" v-model="formData" :config="formConfig"> |
|||
<template #executionListener> |
|||
<el-badge :value="executionListenerLength"> |
|||
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button> |
|||
</el-badge> |
|||
</template> |
|||
</x-form> |
|||
<executionListenerDialog |
|||
v-if="dialogName === 'executionListenerDialog'" |
|||
:element="element" |
|||
:modeler="modeler" |
|||
@close="finishExecutionListener" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinPanel from '../../common/mixinPanel' |
|||
import mixinExecutionListener from '../../common/mixinExecutionListener' |
|||
import { commonParse } from '../../common/parseElement' |
|||
export default { |
|||
mixins: [mixinPanel, mixinExecutionListener], |
|||
data() { |
|||
return { |
|||
formData: {} |
|||
} |
|||
}, |
|||
computed: { |
|||
formConfig() { |
|||
return { |
|||
inline: false, |
|||
item: [ |
|||
{ |
|||
xType: 'input', |
|||
name: 'id', |
|||
label: '节点 id', |
|||
rules: [{ required: true, message: 'Id 不能为空' }] |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'name', |
|||
label: '节点名称' |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'documentation', |
|||
label: '节点描述' |
|||
}, |
|||
{ |
|||
xType: 'slot', |
|||
name: 'executionListener', |
|||
label: '执行监听器' |
|||
}, |
|||
{ |
|||
xType: 'switch', |
|||
name: 'async', |
|||
label: '异步', |
|||
activeText: '是', |
|||
inactiveText: '否' |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
'formData.async': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:async': val }) |
|||
} |
|||
}, |
|||
created() { |
|||
this.formData = commonParse(this.element) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -1,113 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<x-form ref="xForm" v-model="formData" :config="formConfig"> |
|||
<template #executionListener> |
|||
<el-badge :value="executionListenerLength"> |
|||
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button> |
|||
</el-badge> |
|||
</template> |
|||
<template #signal> |
|||
<el-badge :value="signalLength"> |
|||
<el-button size="small" @click="dialogName = 'signalDialog'">编辑</el-button> |
|||
</el-badge> |
|||
</template> |
|||
</x-form> |
|||
<executionListenerDialog |
|||
v-if="dialogName === 'executionListenerDialog'" |
|||
:element="element" |
|||
:modeler="modeler" |
|||
@close="finishExecutionListener" |
|||
/> |
|||
<signalDialog |
|||
v-if="dialogName === 'signalDialog'" |
|||
:element="element" |
|||
:modeler="modeler" |
|||
@close="finishExecutionListener" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinPanel from '../../common/mixinPanel' |
|||
import mixinExecutionListener from '../../common/mixinExecutionListener' |
|||
import signalDialog from './property/signal' |
|||
import { commonParse } from '../../common/parseElement' |
|||
export default { |
|||
components: { |
|||
signalDialog |
|||
}, |
|||
mixins: [mixinPanel, mixinExecutionListener], |
|||
data() { |
|||
return { |
|||
signalLength: 0, |
|||
formData: {} |
|||
} |
|||
}, |
|||
computed: { |
|||
formConfig() { |
|||
const _this = this |
|||
return { |
|||
inline: false, |
|||
item: [ |
|||
{ |
|||
xType: 'select', |
|||
name: 'processCategory', |
|||
label: '流程分类', |
|||
dic: { data: _this.categorys, label: 'dictLabel', value: 'dictValue' } |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'id', |
|||
label: '流程标识key', |
|||
rules: [{ required: true, message: 'Id 不能为空' }] |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'name', |
|||
label: '流程名称' |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'documentation', |
|||
label: '节点描述' |
|||
}, |
|||
{ |
|||
xType: 'slot', |
|||
name: 'executionListener', |
|||
label: '执行监听器' |
|||
}, |
|||
{ |
|||
xType: 'slot', |
|||
name: 'signal', |
|||
label: '信号定义' |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
'formData.processCategory': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:processCategory': val }) |
|||
} |
|||
}, |
|||
created() { |
|||
this.formData = commonParse(this.element) |
|||
}, |
|||
methods: { |
|||
computedSignalLength() { |
|||
this.signalLength = this.element.businessObject.extensionElements?.values?.length ?? 0 |
|||
}, |
|||
finishSignal() { |
|||
if (this.dialogName === 'signalDialog') { |
|||
this.computedSignalLength() |
|||
} |
|||
this.dialogName = '' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -1,194 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog |
|||
title="执行监听器" |
|||
:visible.sync="dialogVisible" |
|||
width="900px" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:show-close="false" |
|||
@closed="$emit('close')" |
|||
> |
|||
<x-form ref="xForm" v-model="formData" :config="formConfig"> |
|||
<template #params="scope"> |
|||
<el-badge :value="scope.row.params ? scope.row.params.length : 0" type="primary"> |
|||
<el-button size="small" @click="configParam(scope.$index)">配置</el-button> |
|||
</el-badge> |
|||
</template> |
|||
</x-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
<listenerParam v-if="showParamDialog" :value="formData.executionListener[nowIndex].params" @close="finishConfigParam" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinPanel from '../../../common/mixinPanel' |
|||
import listenerParam from './listenerParam' |
|||
export default { |
|||
components: { listenerParam }, |
|||
mixins: [mixinPanel], |
|||
data() { |
|||
return { |
|||
dialogVisible: true, |
|||
showParamDialog: false, |
|||
nowIndex: null, |
|||
formData: { |
|||
executionListener: [] |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
formConfig() { |
|||
// const _this = this |
|||
return { |
|||
inline: false, |
|||
item: [ |
|||
{ |
|||
xType: 'tabs', |
|||
tabs: [ |
|||
{ |
|||
label: '执行监听器', |
|||
name: 'executionListener', |
|||
column: [ |
|||
{ |
|||
label: '事件', |
|||
name: 'event', |
|||
width: 180, |
|||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }], |
|||
xType: 'select', |
|||
dic: [ |
|||
{ label: 'start', value: 'start' }, |
|||
{ label: 'end', value: 'end' }, |
|||
{ label: 'take', value: 'take' } |
|||
] |
|||
}, |
|||
{ |
|||
label: '类型', |
|||
name: 'type', |
|||
width: 180, |
|||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }], |
|||
xType: 'select', |
|||
dic: [ |
|||
{ label: '类', value: 'class' }, |
|||
{ label: '表达式', value: 'expression' }, |
|||
{ label: '委托表达式', value: 'delegateExpression' } |
|||
], |
|||
tooltip: `类：示例 com.company.MyCustomListener，自定义类必须实现 org.flowable.engine.delegate.TaskListener 接口 <br /> |
|||
表达式：示例 \${myObject.callMethod(task, task.eventName)} <br /> |
|||
委托表达式：示例 \${myListenerSpringBean} ，该 springBean 需要实现 org.flowable.engine.delegate.TaskListener 接口 |
|||
` |
|||
}, |
|||
{ |
|||
label: 'java 类名', |
|||
name: 'className', |
|||
xType: 'input', |
|||
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }] |
|||
}, |
|||
{ |
|||
xType: 'slot', |
|||
label: '参数', |
|||
width: 120, |
|||
slot: true, |
|||
name: 'params' |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.formData.executionListener = this.element.businessObject.extensionElements?.values |
|||
.filter(item => item.$type === 'flowable:ExecutionListener') |
|||
.map(item => { |
|||
let type |
|||
if ('class' in item) type = 'class' |
|||
if ('expression' in item) type = 'expression' |
|||
if ('delegateExpression' in item) type = 'delegateExpression' |
|||
return { |
|||
event: item.event, |
|||
type: type, |
|||
className: item[type], |
|||
params: item.fields?.map(field => { |
|||
let fieldType |
|||
if ('stringValue' in field) fieldType = 'stringValue' |
|||
if ('expression' in field) fieldType = 'expression' |
|||
return { |
|||
name: field.name, |
|||
type: fieldType, |
|||
value: field[fieldType] |
|||
} |
|||
}) ?? [] |
|||
} |
|||
}) ?? [] |
|||
}, |
|||
methods: { |
|||
configParam(index) { |
|||
this.nowIndex = index |
|||
const nowObj = this.formData.executionListener[index] |
|||
if (!nowObj.params) { |
|||
nowObj.params = [] |
|||
} |
|||
this.showParamDialog = true |
|||
}, |
|||
finishConfigParam(param) { |
|||
this.showParamDialog = false |
|||
// hack 数量不更新问题 |
|||
const cache = this.formData.executionListener[this.nowIndex] |
|||
cache.params = param |
|||
this.$set(this.formData.executionListener[this.nowIndex], this.nowIndex, cache) |
|||
this.nowIndex = null |
|||
}, |
|||
updateElement() { |
|||
if (this.formData.executionListener?.length) { |
|||
let extensionElements = this.element.businessObject.get('extensionElements') |
|||
if (!extensionElements) { |
|||
extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements') |
|||
} |
|||
// 清除旧值 |
|||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') ?? [] |
|||
this.formData.executionListener.forEach(item => { |
|||
const executionListener = this.modeler.get('moddle').create('flowable:ExecutionListener') |
|||
executionListener['event'] = item.event |
|||
executionListener[item.type] = item.className |
|||
if (item.params && item.params.length) { |
|||
item.params.forEach(field => { |
|||
const fieldElement = this.modeler.get('moddle').create('flowable:Field') |
|||
fieldElement['name'] = field.name |
|||
fieldElement[field.type] = field.value |
|||
// 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack |
|||
// const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: field.value }) |
|||
// fieldElement[field.type] = valueElement |
|||
executionListener.get('fields').push(fieldElement) |
|||
}) |
|||
} |
|||
extensionElements.get('values').push(executionListener) |
|||
}) |
|||
this.updateProperties({ extensionElements: extensionElements }) |
|||
} else { |
|||
const extensionElements = this.element.businessObject[`extensionElements`] |
|||
if (extensionElements) { |
|||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') ?? [] |
|||
} |
|||
} |
|||
}, |
|||
closeDialog() { |
|||
this.$refs.xForm.validate().then(() => { |
|||
this.updateElement() |
|||
this.dialogVisible = false |
|||
}).catch(e => console.error(e)) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.flow-containers .el-badge__content.is-fixed { |
|||
top: 18px; |
|||
} |
|||
</style> |
|||
@ -1,96 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog |
|||
title="监听器参数" |
|||
:visible.sync="dialogVisible" |
|||
width="700px" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:show-close="false" |
|||
@closed="$emit('close', formData.paramList)" |
|||
> |
|||
<x-form ref="xForm" v-model="formData" :config="formConfig" /> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinXcrud from '../../../common/mixinXcrud' |
|||
export default { |
|||
mixins: [mixinXcrud], |
|||
props: { |
|||
value: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
dialogVisible: true, |
|||
formData: { |
|||
paramList: this.value |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
formConfig() { |
|||
return { |
|||
inline: false, |
|||
item: [ |
|||
{ |
|||
xType: 'tabs', |
|||
tabs: [ |
|||
{ |
|||
label: '监听器参数', |
|||
name: 'paramList', |
|||
column: [ |
|||
{ |
|||
label: '类型', |
|||
name: 'type', |
|||
width: 180, |
|||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }], |
|||
xType: 'select', |
|||
dic: [ |
|||
{ label: '字符串', value: 'stringValue' }, |
|||
{ label: '表达式', value: 'expression' } |
|||
] |
|||
}, |
|||
{ |
|||
label: '名称', |
|||
name: 'name', |
|||
width: 180, |
|||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }], |
|||
xType: 'input' |
|||
}, |
|||
{ |
|||
label: '值', |
|||
name: 'value', |
|||
xType: 'input', |
|||
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }] |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
closeDialog() { |
|||
this.$refs.xForm.validate().then(() => { |
|||
this.dialogVisible = false |
|||
}).catch(e => console.error(e)) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.flow-containers .el-badge__content.is-fixed { |
|||
top: 18px; |
|||
} |
|||
</style> |
|||
@ -1,117 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog |
|||
title="多实例配置" |
|||
:visible.sync="dialogVisible" |
|||
width="500px" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:show-close="false" |
|||
class="muti-instance" |
|||
@closed="$emit('close')" |
|||
> |
|||
<el-alert |
|||
type="info" |
|||
:closable="false" |
|||
show-icon |
|||
style="margin-bottom: 20px" |
|||
> |
|||
<template #title> |
|||
按照BPMN2.0规范的要求，用于为每个实例创建执行的父执行，会提供下列变量:<br> |
|||
nrOfInstances：实例总数。<br> |
|||
nrOfActiveInstances：当前活动的（即未完成的），实例数量。对于顺序多实例，这个值总为1。<br> |
|||
nrOfCompletedInstances：已完成的实例数量。<br> |
|||
loopCounter：给定实例在for-each循环中的index。<br> |
|||
</template> |
|||
</el-alert> |
|||
<x-form ref="xForm" v-model="formData" :config="formConfig" /> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinPanel from '../../../common/mixinPanel' |
|||
import { formatJsonKeyValue } from '../../../common/parseElement' |
|||
export default { |
|||
mixins: [mixinPanel], |
|||
data() { |
|||
return { |
|||
dialogVisible: true, |
|||
formData: {} |
|||
} |
|||
}, |
|||
computed: { |
|||
formConfig() { |
|||
const _this = this |
|||
return { |
|||
inline: false, |
|||
item: [ |
|||
{ |
|||
xType: 'input', |
|||
name: 'collection', |
|||
label: '集合', |
|||
tooltip: '属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br />不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br />这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。' |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'elementVariable', |
|||
label: '元素变量', |
|||
tooltip: '每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br />创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br />一般来说，该字符串应与指定人员变量相同。' |
|||
}, |
|||
{ |
|||
xType: 'radio', |
|||
name: 'isSequential', |
|||
label: '执行方式', |
|||
dic: [{ label: '串行', value: true }, { label: '并行', value: false }] |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'completionCondition', |
|||
label: '完成条件', |
|||
tooltip: '多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br />结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br />活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br />表示当任务完成60%时，该节点就算完成' |
|||
} |
|||
], |
|||
operate: [ |
|||
{ text: '确定', show: true, click: _this.save }, |
|||
{ text: '清空', show: true, click: () => { _this.formData = {} } } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
const cache = JSON.parse(JSON.stringify(this.element.businessObject.loopCharacteristics ?? {})) |
|||
cache.completionCondition = cache.completionCondition?.body |
|||
this.formData = formatJsonKeyValue(cache) |
|||
}, |
|||
methods: { |
|||
updateElement() { |
|||
if (this.formData.isSequential !== null && this.formData.isSequential !== undefined) { |
|||
let loopCharacteristics = this.element.businessObject.get('loopCharacteristics') |
|||
if (!loopCharacteristics) { |
|||
loopCharacteristics = this.modeler.get('moddle').create('bpmn:MultiInstanceLoopCharacteristics') |
|||
} |
|||
loopCharacteristics['isSequential'] = this.formData.isSequential |
|||
loopCharacteristics['collection'] = this.formData.collection |
|||
loopCharacteristics['elementVariable'] = this.formData.elementVariable |
|||
if (this.formData.completionCondition) { |
|||
const completionCondition = this.modeler.get('moddle').create('bpmn:Expression', { body: this.formData.completionCondition }) |
|||
loopCharacteristics['completionCondition'] = completionCondition |
|||
} |
|||
this.updateProperties({ loopCharacteristics: loopCharacteristics }) |
|||
} else { |
|||
delete this.element.businessObject.loopCharacteristics |
|||
} |
|||
}, |
|||
save() { |
|||
this.updateElement() |
|||
this.dialogVisible = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.muti-instance .el-form-item { |
|||
margin-bottom: 22px; |
|||
} |
|||
</style> |
|||
@ -1,124 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog |
|||
title="信号定义" |
|||
:visible.sync="dialogVisible" |
|||
width="700px" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:show-close="false" |
|||
@closed="$emit('close')" |
|||
> |
|||
<x-form ref="xForm" v-model="formData" :config="formConfig" /> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinPanel from '../../../common/mixinPanel' |
|||
export default { |
|||
mixins: [mixinPanel], |
|||
data() { |
|||
return { |
|||
dialogVisible: true, |
|||
formData: { |
|||
signal: [] |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
formConfig() { |
|||
// const _this = this |
|||
return { |
|||
inline: false, |
|||
item: [ |
|||
{ |
|||
xType: 'tabs', |
|||
tabs: [ |
|||
{ |
|||
label: '信号定义', |
|||
name: 'signal', |
|||
column: [ |
|||
{ |
|||
label: 'scope', |
|||
name: 'scope', |
|||
width: 180, |
|||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }], |
|||
xType: 'select', |
|||
dic: [ |
|||
{ label: '全局', value: 'start' }, |
|||
{ label: '流程实例', value: 'end' } |
|||
] |
|||
}, |
|||
{ |
|||
label: 'id', |
|||
name: 'id', |
|||
width: 200, |
|||
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }], |
|||
xType: 'input' |
|||
}, |
|||
{ |
|||
label: '名称', |
|||
name: 'name', |
|||
xType: 'input', |
|||
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }] |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
// this.formData.signal = this.element.businessObject.extensionElements?.values.map(item => { |
|||
// let type |
|||
// if ('class' in item.$attrs) type = 'class' |
|||
// if ('expression' in item.$attrs) type = 'expression' |
|||
// if ('delegateExpression' in item.$attrs) type = 'delegateExpression' |
|||
// return { |
|||
// event: item.$attrs.event, |
|||
// type: type, |
|||
// className: item.$attrs[type] |
|||
// } |
|||
// }) ?? [] |
|||
}, |
|||
methods: { |
|||
updateElement() { |
|||
if (this.formData.signal?.length) { |
|||
let extensionElements = this.element.businessObject.get('extensionElements') |
|||
if (!extensionElements) { |
|||
extensionElements = this.modeler.get('moddle').create('bpmn:signal') |
|||
} |
|||
const length = extensionElements.get('values').length |
|||
for (let i = 0; i < length; i++) { |
|||
// 清除旧值 |
|||
extensionElements.get('values').pop() |
|||
} |
|||
this.updateProperties({ extensionElements: extensionElements }) |
|||
} else { |
|||
const extensionElements = this.element.businessObject[`extensionElements`] |
|||
if (extensionElements) { |
|||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') |
|||
} |
|||
} |
|||
}, |
|||
closeDialog() { |
|||
this.$refs.xForm.validate().then(() => { |
|||
this.updateElement() |
|||
this.dialogVisible = false |
|||
}).catch(e => console.error(e)) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.flow-containers .el-badge__content.is-fixed { |
|||
top: 18px; |
|||
} |
|||
</style> |
|||
@ -1,196 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog |
|||
title="任务监听器" |
|||
:visible.sync="dialogVisible" |
|||
width="900px" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:show-close="false" |
|||
@closed="$emit('close')" |
|||
> |
|||
<x-form ref="xForm" v-model="formData" :config="formConfig"> |
|||
<template #params="scope"> |
|||
<el-badge :value="scope.row.params ? scope.row.params.length : 0" type="primary"> |
|||
<el-button size="small" @click="configParam(scope.$index)">配置</el-button> |
|||
</el-badge> |
|||
</template> |
|||
</x-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
<listenerParam v-if="showParamDialog" :value="formData.taskListener[nowIndex].params" @close="finishConfigParam" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinPanel from '../../../common/mixinPanel' |
|||
import listenerParam from './listenerParam' |
|||
export default { |
|||
components: { listenerParam }, |
|||
mixins: [mixinPanel], |
|||
data() { |
|||
return { |
|||
dialogVisible: true, |
|||
showParamDialog: false, |
|||
nowIndex: null, |
|||
formData: { |
|||
taskListener: [] |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
formConfig() { |
|||
// const _this = this |
|||
return { |
|||
inline: false, |
|||
item: [ |
|||
{ |
|||
xType: 'tabs', |
|||
tabs: [ |
|||
{ |
|||
label: '任务监听器', |
|||
name: 'taskListener', |
|||
column: [ |
|||
{ |
|||
label: '事件', |
|||
name: 'event', |
|||
width: 180, |
|||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }], |
|||
xType: 'select', |
|||
dic: [ |
|||
{ label: 'create', value: 'create' }, |
|||
{ label: 'assignment', value: 'assignment' }, |
|||
{ label: 'complete', value: 'complete' }, |
|||
{ label: 'delete', value: 'delete' } |
|||
], |
|||
tooltip: `create（创建）：当任务已经创建，并且所有任务参数都已经设置时触发。<br /> |
|||
assignment（指派）：当任务已经指派给某人时触发。请注意：当流程执行到达用户任务时，在触发create事件之前，会首先触发assignment事件。<br /> |
|||
complete（完成）：当任务已经完成，从运行时数据中删除前触发。<br /> |
|||
delete（删除）：在任务即将被删除前触发。请注意任务由completeTask正常完成时也会触发。 |
|||
` |
|||
}, |
|||
{ |
|||
label: '类型', |
|||
name: 'type', |
|||
width: 180, |
|||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }], |
|||
xType: 'select', |
|||
dic: [ |
|||
{ label: '类', value: 'class' }, |
|||
{ label: '表达式', value: 'expression' }, |
|||
{ label: '委托表达式', value: 'delegateExpression' } |
|||
] |
|||
}, |
|||
{ |
|||
label: 'java 类名', |
|||
name: 'className', |
|||
xType: 'input', |
|||
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }] |
|||
}, |
|||
{ |
|||
xType: 'slot', |
|||
label: '参数', |
|||
width: 120, |
|||
slot: true, |
|||
name: 'params' |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.formData.taskListener = this.element.businessObject.extensionElements?.values |
|||
.filter(item => item.$type === 'flowable:TaskListener') |
|||
.map(item => { |
|||
let type |
|||
if ('class' in item) type = 'class' |
|||
if ('expression' in item) type = 'expression' |
|||
if ('delegateExpression' in item) type = 'delegateExpression' |
|||
return { |
|||
event: item.event, |
|||
type: type, |
|||
className: item[type], |
|||
params: item.fields?.map(field => { |
|||
let fieldType |
|||
if ('stringValue' in field) fieldType = 'stringValue' |
|||
if ('expression' in field) fieldType = 'expression' |
|||
return { |
|||
name: field.name, |
|||
type: fieldType, |
|||
value: field[fieldType] |
|||
} |
|||
}) ?? [] |
|||
} |
|||
}) ?? [] |
|||
}, |
|||
methods: { |
|||
configParam(index) { |
|||
this.nowIndex = index |
|||
const nowObj = this.formData.taskListener[index] |
|||
if (!nowObj.params) { |
|||
nowObj.params = [] |
|||
} |
|||
this.showParamDialog = true |
|||
}, |
|||
finishConfigParam(param) { |
|||
this.showParamDialog = false |
|||
// hack 数量不更新问题 |
|||
const cache = this.formData.taskListener[this.nowIndex] |
|||
cache.params = param |
|||
this.$set(this.formData.taskListener[this.nowIndex], this.nowIndex, cache) |
|||
this.nowIndex = null |
|||
}, |
|||
updateElement() { |
|||
if (this.formData.taskListener?.length) { |
|||
let extensionElements = this.element.businessObject.get('extensionElements') |
|||
if (!extensionElements) { |
|||
extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements') |
|||
} |
|||
// 清除旧值 |
|||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? [] |
|||
this.formData.taskListener.forEach(item => { |
|||
const taskListener = this.modeler.get('moddle').create('flowable:TaskListener') |
|||
taskListener['event'] = item.event |
|||
taskListener[item.type] = item.className |
|||
if (item.params && item.params.length) { |
|||
item.params.forEach(field => { |
|||
const fieldElement = this.modeler.get('moddle').create('flowable:Field') |
|||
fieldElement['name'] = field.name |
|||
fieldElement[field.type] = field.value |
|||
// 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack |
|||
// const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: field.value }) |
|||
// fieldElement[field.type] = valueElement |
|||
taskListener.get('fields').push(fieldElement) |
|||
}) |
|||
} |
|||
extensionElements.get('values').push(taskListener) |
|||
}) |
|||
this.updateProperties({ extensionElements: extensionElements }) |
|||
} else { |
|||
const extensionElements = this.element.businessObject[`extensionElements`] |
|||
if (extensionElements) { |
|||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? [] |
|||
} |
|||
} |
|||
}, |
|||
closeDialog() { |
|||
this.$refs.xForm.validate().then(() => { |
|||
this.updateElement() |
|||
this.dialogVisible = false |
|||
}).catch(e => console.error(e)) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.flow-containers .el-badge__content.is-fixed { |
|||
top: 18px; |
|||
} |
|||
</style> |
|||
@ -1,92 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<x-form ref="xForm" v-model="formData" :config="formConfig"> |
|||
<template #executionListener> |
|||
<el-badge :value="executionListenerLength"> |
|||
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button> |
|||
</el-badge> |
|||
</template> |
|||
</x-form> |
|||
<executionListenerDialog |
|||
v-if="dialogName === 'executionListenerDialog'" |
|||
:element="element" |
|||
:modeler="modeler" |
|||
@close="finishExecutionListener" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinPanel from '../../common/mixinPanel' |
|||
import mixinExecutionListener from '../../common/mixinExecutionListener' |
|||
import { commonParse, conditionExpressionParse } from '../../common/parseElement' |
|||
export default { |
|||
mixins: [mixinPanel, mixinExecutionListener], |
|||
data() { |
|||
return { |
|||
formData: {} |
|||
} |
|||
}, |
|||
computed: { |
|||
formConfig() { |
|||
return { |
|||
inline: false, |
|||
item: [ |
|||
{ |
|||
xType: 'input', |
|||
name: 'id', |
|||
label: '节点 id', |
|||
rules: [{ required: true, message: 'Id 不能为空' }] |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'name', |
|||
label: '节点名称' |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'documentation', |
|||
label: '节点描述' |
|||
}, |
|||
{ |
|||
xType: 'slot', |
|||
name: 'executionListener', |
|||
label: '执行监听器' |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'conditionExpression', |
|||
label: '跳转条件' |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'skipExpression', |
|||
label: '跳过表达式' |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
'formData.conditionExpression': function(val) { |
|||
if (val) { |
|||
const newCondition = this.modeler.get('moddle').create('bpmn:FormalExpression', { body: val }) |
|||
this.updateProperties({ conditionExpression: newCondition }) |
|||
} else { |
|||
this.updateProperties({ conditionExpression: null }) |
|||
} |
|||
}, |
|||
'formData.skipExpression': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:skipExpression': val }) |
|||
} |
|||
}, |
|||
created() { |
|||
let cache = commonParse(this.element) |
|||
cache = conditionExpressionParse(cache) |
|||
this.formData = cache |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style></style> |
|||
@ -1,94 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<x-form ref="xForm" v-model="formData" :config="formConfig"> |
|||
<template #executionListener> |
|||
<el-badge :value="executionListenerLength"> |
|||
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button> |
|||
</el-badge> |
|||
</template> |
|||
</x-form> |
|||
<executionListenerDialog |
|||
v-if="dialogName === 'executionListenerDialog'" |
|||
:element="element" |
|||
:modeler="modeler" |
|||
@close="finishExecutionListener" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinPanel from '../../common/mixinPanel' |
|||
import mixinExecutionListener from '../../common/mixinExecutionListener' |
|||
import { commonParse } from '../../common/parseElement' |
|||
export default { |
|||
mixins: [mixinPanel, mixinExecutionListener], |
|||
data() { |
|||
return { |
|||
formData: {} |
|||
} |
|||
}, |
|||
computed: { |
|||
formConfig() { |
|||
const _this = this |
|||
return { |
|||
inline: false, |
|||
item: [ |
|||
{ |
|||
xType: 'input', |
|||
name: 'id', |
|||
label: '节点 id', |
|||
rules: [{ required: true, message: 'Id 不能为空' }] |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'name', |
|||
label: '节点名称' |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'documentation', |
|||
label: '节点描述' |
|||
}, |
|||
{ |
|||
xType: 'slot', |
|||
name: 'executionListener', |
|||
label: '执行监听器' |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'initiator', |
|||
label: '发起人', |
|||
show: !!_this.showConfig.initiator |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'formKey', |
|||
label: '表单标识key', |
|||
show: !!_this.showConfig.formKey |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
'formData.initiator': function(val) { |
|||
if (val === '') val = null |
|||
// 默认设置流程发起人 |
|||
// if (val === '') val = 'INITIATOR' |
|||
this.updateProperties({ 'flowable:initiator': val }) |
|||
}, |
|||
'formData.formKey': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:formKey': val }) |
|||
} |
|||
}, |
|||
created() { |
|||
// this.updateProperties({ 'flowable:initiator': 'INITIATOR' }) |
|||
this.formData = commonParse(this.element) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -1,426 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<x-form ref="xForm" v-model="formData" :config="formConfig"> |
|||
<template #executionListener> |
|||
<el-badge :value="executionListenerLength"> |
|||
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button> |
|||
</el-badge> |
|||
</template> |
|||
<template #taskListener> |
|||
<el-badge :value="taskListenerLength"> |
|||
<el-button size="small" @click="dialogName = 'taskListenerDialog'">编辑</el-button> |
|||
</el-badge> |
|||
</template> |
|||
<template #multiInstance> |
|||
<el-badge :is-dot="hasMultiInstance"> |
|||
<el-button size="small" @click="dialogName = 'multiInstanceDialog'">编辑</el-button> |
|||
</el-badge> |
|||
</template> |
|||
</x-form> |
|||
<executionListenerDialog |
|||
v-if="dialogName === 'executionListenerDialog'" |
|||
:element="element" |
|||
:modeler="modeler" |
|||
@close="finishExecutionListener" |
|||
/> |
|||
<taskListenerDialog |
|||
v-if="dialogName === 'taskListenerDialog'" |
|||
:element="element" |
|||
:modeler="modeler" |
|||
@close="finishTaskListener" |
|||
/> |
|||
<multiInstanceDialog |
|||
v-if="dialogName === 'multiInstanceDialog'" |
|||
:element="element" |
|||
:modeler="modeler" |
|||
@close="finishMultiInstance" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinPanel from '../../common/mixinPanel' |
|||
import executionListenerDialog from './property/executionListener' |
|||
import taskListenerDialog from './property/taskListener' |
|||
import multiInstanceDialog from './property/multiInstance' |
|||
import { commonParse, userTaskParse } from '../../common/parseElement' |
|||
export default { |
|||
components: { |
|||
executionListenerDialog, |
|||
taskListenerDialog, |
|||
multiInstanceDialog |
|||
}, |
|||
mixins: [mixinPanel], |
|||
props: { |
|||
users: { |
|||
type: Array, |
|||
required: true |
|||
}, |
|||
groups: { |
|||
type: Array, |
|||
required: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
userTypeOption: [ |
|||
{ label: '指定人员', value: 'assignee' }, |
|||
{ label: '候选人员', value: 'candidateUsers' }, |
|||
{ label: '候选组', value: 'candidateGroups' } |
|||
], |
|||
dataTypeOption: [ |
|||
{ label: '固定', value: 'fixed' }, |
|||
{ label: '动态', value: 'dynamic' } |
|||
], |
|||
dialogName: '', |
|||
executionListenerLength: 0, |
|||
taskListenerLength: 0, |
|||
hasMultiInstance: false, |
|||
formData: {} |
|||
} |
|||
}, |
|||
computed: { |
|||
formConfig() { |
|||
const _this = this |
|||
return { |
|||
inline: false, |
|||
item: [ |
|||
{ |
|||
xType: 'input', |
|||
name: 'id', |
|||
label: '节点 id', |
|||
rules: [{ required: true, message: 'Id 不能为空' }] |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'name', |
|||
label: '节点名称', |
|||
rules: [{ required: true, message: '节点名称不能为空' }] |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'documentation', |
|||
label: '节点描述' |
|||
}, |
|||
{ |
|||
xType: 'slot', |
|||
name: 'executionListener', |
|||
label: '执行监听器' |
|||
}, |
|||
{ |
|||
xType: 'slot', |
|||
name: 'taskListener', |
|||
label: '任务监听器', |
|||
show: !!_this.showConfig.taskListener |
|||
}, |
|||
{ |
|||
xType: 'select', |
|||
name: 'userType', |
|||
label: '人员类型', |
|||
dic: _this.userTypeOption, |
|||
show: !!_this.showConfig.userType |
|||
}, |
|||
{ |
|||
xType: 'radio', |
|||
name: 'dataType', |
|||
label: '指定方式', |
|||
dic: _this.dataTypeOption, |
|||
show: !!_this.showConfig.dataType, |
|||
rules: [{ required: true, message: '请指定方式' }] |
|||
}, |
|||
// { |
|||
// xType: 'input', |
|||
// name: 'assigneeFixed', |
|||
// label: '指定人(表达式)', |
|||
// show: !!_this.showConfig.assigneeFixed && _this.formData.userType === 'assignee' && _this.formData.dataType === 'fixed' |
|||
// }, |
|||
// { |
|||
// xType: 'input', |
|||
// name: 'candidateUsersFixed', |
|||
// label: '候选人(表达式)', |
|||
// show: !!_this.showConfig.candidateUsersFixed && _this.formData.userType === 'candidateUsers' && _this.formData.dataType === 'fixed' |
|||
// }, |
|||
// { |
|||
// xType: 'input', |
|||
// name: 'candidateGroupsFixed', |
|||
// label: '候选组(表达式)', |
|||
// show: !!_this.showConfig.candidateGroupsFixed && _this.formData.userType === 'candidateGroups' && _this.formData.dataType === 'fixed' |
|||
// }, |
|||
{ |
|||
xType: 'select', |
|||
name: 'assignee', |
|||
label: '指定人员', |
|||
allowCreate: true, |
|||
filterable: true, |
|||
dic: { data: _this.users, label: 'nickName', value: 'userId' }, |
|||
show: !!_this.showConfig.assignee && _this.formData.userType === 'assignee' |
|||
}, |
|||
{ |
|||
xType: 'select', |
|||
name: 'candidateUsers', |
|||
label: '候选人员', |
|||
multiple: true, |
|||
allowCreate: true, |
|||
filterable: true, |
|||
dic: { data: _this.users, label: 'nickName', value: 'userId' }, |
|||
show: !!_this.showConfig.candidateUsers && _this.formData.userType === 'candidateUsers' |
|||
}, |
|||
{ |
|||
xType: 'select', |
|||
name: 'candidateGroups', |
|||
label: '候选组', |
|||
multiple: true, |
|||
allowCreate: true, |
|||
filterable: true, |
|||
dic: { data: _this.groups, label: 'roleName', value: 'roleId' }, |
|||
show: !!_this.showConfig.candidateGroups && _this.formData.userType === 'candidateGroups' |
|||
}, |
|||
{ |
|||
xType: 'slot', |
|||
name: 'multiInstance', |
|||
label: '多实例' |
|||
}, |
|||
{ |
|||
xType: 'switch', |
|||
name: 'async', |
|||
label: '异步', |
|||
activeText: '是', |
|||
inactiveText: '否', |
|||
show: !!_this.showConfig.async |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'priority', |
|||
label: '优先级', |
|||
show: !!_this.showConfig.priority |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'formKey', |
|||
label: '表单标识key', |
|||
show: !!_this.showConfig.formKey |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'skipExpression', |
|||
label: '跳过表达式', |
|||
show: !!_this.showConfig.skipExpression |
|||
}, |
|||
{ |
|||
xType: 'switch', |
|||
name: 'isForCompensation', |
|||
label: '是否为补偿', |
|||
activeText: '是', |
|||
inactiveText: '否', |
|||
show: !!_this.showConfig.isForCompensation |
|||
}, |
|||
{ |
|||
xType: 'switch', |
|||
name: 'triggerable', |
|||
label: '服务任务可触发', |
|||
activeText: '是', |
|||
inactiveText: '否', |
|||
show: !!_this.showConfig.triggerable |
|||
}, |
|||
{ |
|||
xType: 'switch', |
|||
name: 'autoStoreVariables', |
|||
label: '自动存储变量', |
|||
activeText: '是', |
|||
inactiveText: '否', |
|||
show: !!_this.showConfig.autoStoreVariables |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'ruleVariablesInput', |
|||
label: '输入变量', |
|||
show: !!_this.showConfig.ruleVariablesInput |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'rules', |
|||
label: '规则', |
|||
show: !!_this.showConfig.rules |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'resultVariable', |
|||
label: '结果变量', |
|||
show: !!_this.showConfig.resultVariable |
|||
}, |
|||
{ |
|||
xType: 'switch', |
|||
name: 'exclude', |
|||
label: '排除', |
|||
activeText: '是', |
|||
inactiveText: '否', |
|||
show: !!_this.showConfig.exclude |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'class', |
|||
label: '类', |
|||
show: !!_this.showConfig.class |
|||
}, |
|||
{ |
|||
xType: 'datePicker', |
|||
type: 'datetime', |
|||
name: 'dueDate', |
|||
label: '到期时间', |
|||
show: !!_this.showConfig.dueDate |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
'formData.userType': function(val, oldVal) { |
|||
if (oldVal) { |
|||
const types = ['assignee', 'candidateUsers', 'candidateGroups'] |
|||
types.forEach(type => { |
|||
delete this.element.businessObject.$attrs[`flowable:${type}`] |
|||
delete this.formData[type] |
|||
}) |
|||
} |
|||
}, |
|||
// 动态选择流程执行人 |
|||
'formData.dataType': function(val) { |
|||
const that = this |
|||
this.updateProperties({'flowable:dataType': val}) |
|||
if (val === 'dynamic') { |
|||
this.updateProperties({'flowable:userType': that.formData.userType}) |
|||
} |
|||
// 切换时 删除之前选中的值 |
|||
const types = ['assignee', 'candidateUsers', 'candidateGroups'] |
|||
types.forEach(type => { |
|||
delete this.element.businessObject.$attrs[`flowable:${type}`] |
|||
delete this.formData[type] |
|||
}) |
|||
// 传值到父组件 |
|||
const params = { |
|||
dataType: val, |
|||
userType: this.formData.userType |
|||
} |
|||
this.$emit('dataType', params) |
|||
}, |
|||
'formData.assignee': function(val) { |
|||
if (this.formData.userType !== 'assignee') { |
|||
delete this.element.businessObject.$attrs[`flowable:assignee`] |
|||
return |
|||
} |
|||
this.updateProperties({'flowable:assignee': val}) |
|||
}, |
|||
'formData.candidateUsers': function(val) { |
|||
if (this.formData.userType !== 'candidateUsers') { |
|||
delete this.element.businessObject.$attrs[`flowable:candidateUsers`] |
|||
return |
|||
} |
|||
this.updateProperties({'flowable:candidateUsers': val?.join(',')}) |
|||
}, |
|||
'formData.candidateGroups': function(val) { |
|||
if (this.formData.userType !== 'candidateGroups') { |
|||
delete this.element.businessObject.$attrs[`flowable:candidateGroups`] |
|||
return |
|||
} |
|||
this.updateProperties({'flowable:candidateGroups': val?.join(',')}) |
|||
}, |
|||
'formData.async': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:async': true }) |
|||
}, |
|||
'formData.dueDate': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:dueDate': val }) |
|||
}, |
|||
'formData.formKey': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:formKey': val }) |
|||
}, |
|||
'formData.priority': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:priority': val }) |
|||
}, |
|||
'formData.skipExpression': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:skipExpression': val }) |
|||
}, |
|||
'formData.isForCompensation': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'isForCompensation': val }) |
|||
}, |
|||
'formData.triggerable': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:triggerable': val }) |
|||
}, |
|||
'formData.class': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:class': val }) |
|||
}, |
|||
'formData.autoStoreVariables': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:autoStoreVariables': val }) |
|||
}, |
|||
'formData.exclude': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:exclude': val }) |
|||
}, |
|||
'formData.ruleVariablesInput': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:ruleVariablesInput': val }) |
|||
}, |
|||
'formData.rules': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:rules': val }) |
|||
}, |
|||
'formData.resultVariable': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:resultVariable': val }) |
|||
} |
|||
}, |
|||
created() { |
|||
let cache = commonParse(this.element) |
|||
cache = userTaskParse(cache) |
|||
this.formData = cache |
|||
this.computedExecutionListenerLength() |
|||
this.computedTaskListenerLength() |
|||
this.computedHasMultiInstance() |
|||
}, |
|||
methods: { |
|||
computedExecutionListenerLength() { |
|||
this.executionListenerLength = this.element.businessObject.extensionElements?.values |
|||
?.filter(item => item.$type === 'flowable:ExecutionListener').length ?? 0 |
|||
}, |
|||
computedTaskListenerLength() { |
|||
this.taskListenerLength = this.element.businessObject.extensionElements?.values |
|||
?.filter(item => item.$type === 'flowable:TaskListener').length ?? 0 |
|||
}, |
|||
computedHasMultiInstance() { |
|||
if (this.element.businessObject.loopCharacteristics) { |
|||
this.hasMultiInstance = true |
|||
} else { |
|||
this.hasMultiInstance = false |
|||
} |
|||
}, |
|||
finishExecutionListener() { |
|||
if (this.dialogName === 'executionListenerDialog') { |
|||
this.computedExecutionListenerLength() |
|||
} |
|||
this.dialogName = '' |
|||
}, |
|||
finishTaskListener() { |
|||
if (this.dialogName === 'taskListenerDialog') { |
|||
this.computedTaskListenerLength() |
|||
} |
|||
this.dialogName = '' |
|||
}, |
|||
finishMultiInstance() { |
|||
if (this.dialogName === 'multiInstanceDialog') { |
|||
this.computedHasMultiInstance() |
|||
} |
|||
this.dialogName = '' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style></style> |
|||
File diff suppressed because it is too large
@ -1,24 +0,0 @@ |
|||
|
|||
function randomStr() { |
|||
return Math.random().toString(36).slice(-8) |
|||
} |
|||
|
|||
export default function() { |
|||
return `<?xml version="1.0" encoding="UTF-8"?>
|
|||
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" targetNamespace="http://www.flowable.org/processdef"> |
|||
<process id="process_${randomStr()}" name="name_${randomStr()}"> |
|||
<startEvent id="startNode1" name="开始" /> |
|||
</process> |
|||
<bpmndi:BPMNDiagram id="BPMNDiagram_flow"> |
|||
<bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="T-2d89e7a3-ba79-4abd-9f64-ea59621c258c"> |
|||
<bpmndi:BPMNShape id="BPMNShape_startNode1" bpmnElement="startNode1" bioc:stroke=""> |
|||
<omgdc:Bounds x="240" y="200" width="30" height="30" /> |
|||
<bpmndi:BPMNLabel> |
|||
<omgdc:Bounds x="242" y="237" width="23" height="14" /> |
|||
</bpmndi:BPMNLabel> |
|||
</bpmndi:BPMNShape> |
|||
</bpmndi:BPMNPlane> |
|||
</bpmndi:BPMNDiagram> |
|||
</definitions> |
|||
` |
|||
} |
|||
@ -1,55 +0,0 @@ |
|||
export default { |
|||
'bpmn:EndEvent': {}, |
|||
'bpmn:StartEvent': { |
|||
initiator: true, |
|||
formKey: true |
|||
}, |
|||
'bpmn:UserTask': { |
|||
userType: true, |
|||
dataType: true, |
|||
assignee: true, |
|||
candidateUsers: true, |
|||
candidateGroups: true, |
|||
// assigneeFixed: true,
|
|||
// candidateUsersFixed: true,
|
|||
// candidateGroupsFixed: true,
|
|||
async: true, |
|||
priority: true, |
|||
formKey: true, |
|||
skipExpression: true, |
|||
dueDate: true, |
|||
taskListener: true |
|||
}, |
|||
'bpmn:ServiceTask': { |
|||
async: true, |
|||
skipExpression: true, |
|||
isForCompensation: true, |
|||
triggerable: true, |
|||
class: true |
|||
}, |
|||
'bpmn:ScriptTask': { |
|||
async: true, |
|||
isForCompensation: true, |
|||
autoStoreVariables: true |
|||
}, |
|||
'bpmn:ManualTask': { |
|||
async: true, |
|||
isForCompensation: true |
|||
}, |
|||
'bpmn:ReceiveTask': { |
|||
async: true, |
|||
isForCompensation: true |
|||
}, |
|||
'bpmn:SendTask': { |
|||
async: true, |
|||
isForCompensation: true |
|||
}, |
|||
'bpmn:BusinessRuleTask': { |
|||
async: true, |
|||
isForCompensation: true, |
|||
ruleVariablesInput: true, |
|||
rules: true, |
|||
resultVariable: true, |
|||
exclude: true |
|||
} |
|||
} |
|||
@ -1,5 +0,0 @@ |
|||
import workflowBpmnModeler from './index.vue' |
|||
|
|||
workflowBpmnModeler.install = Vue => Vue.component(workflowBpmnModeler.name, workflowBpmnModeler) // 给组件配置install方法
|
|||
|
|||
export default workflowBpmnModeler |
|||
@ -1,467 +0,0 @@ |
|||
<template> |
|||
<div v-loading="isView" class="flow-containers" :class="{ 'view-mode': isView }"> |
|||
<el-container style="height: 100%"> |
|||
<el-header style="border-bottom: 1px solid rgb(218 218 218);height: auto;"> |
|||
<div style="display: flex; padding: 10px 0px; justify-content: space-between;"> |
|||
{{xml}} <div> |
|||
<el-upload action="" :before-upload="openBpmn" style="margin-right: 10px; display:inline-block;"> |
|||
<el-tooltip effect="dark" content="加载xml" placement="bottom"> |
|||
<el-button size="mini" icon="el-icon-folder-opened" /> |
|||
</el-tooltip> |
|||
</el-upload> |
|||
<el-tooltip effect="dark" content="新建" placement="bottom"> |
|||
<el-button size="mini" icon="el-icon-circle-plus" @click="newDiagram" /> |
|||
</el-tooltip> |
|||
<el-tooltip effect="dark" content="自适应屏幕" placement="bottom"> |
|||
<el-button size="mini" icon="el-icon-rank" @click="fitViewport" /> |
|||
</el-tooltip> |
|||
<el-tooltip effect="dark" content="放大" placement="bottom"> |
|||
<el-button size="mini" icon="el-icon-zoom-in" @click="zoomViewport(true)" /> |
|||
</el-tooltip> |
|||
<el-tooltip effect="dark" content="缩小" placement="bottom"> |
|||
<el-button size="mini" icon="el-icon-zoom-out" @click="zoomViewport(false)" /> |
|||
</el-tooltip> |
|||
<el-tooltip effect="dark" content="后退" placement="bottom"> |
|||
<el-button size="mini" icon="el-icon-back" @click="modeler.get('commandStack').undo()" /> |
|||
</el-tooltip> |
|||
<el-tooltip effect="dark" content="前进" placement="bottom"> |
|||
<el-button size="mini" icon="el-icon-right" @click="modeler.get('commandStack').redo()" /> |
|||
</el-tooltip> |
|||
</div> |
|||
<div> |
|||
<el-button size="mini" icon="el-icon-view" @click="showXML">查看xml</el-button> |
|||
<el-button size="mini" icon="el-icon-download" @click="saveXML(true)">下载xml</el-button> |
|||
<el-button size="mini" icon="el-icon-picture" @click="saveImg('svg', true)">下载svg</el-button> |
|||
<el-button size="mini" type="primary" @click="save">保存模型</el-button> |
|||
</div> |
|||
</div> |
|||
</el-header> |
|||
<el-container style="align-items: stretch"> |
|||
<el-main style="padding: 0;"> |
|||
<div ref="canvas" class="canvas" /> |
|||
</el-main> |
|||
<el-aside style="width: 400px; min-height: 650px; background-color: #f0f2f5"> |
|||
<panel v-if="modeler" :modeler="modeler" :users="users" :groups="groups" :categorys="categorys" @dataType="dataType" /> |
|||
</el-aside> |
|||
</el-container> |
|||
</el-container> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
// 汉化 |
|||
import customTranslate from './common/customTranslate' |
|||
import Modeler from 'bpmn-js/lib/Modeler' |
|||
import panel from './PropertyPanel' |
|||
import BpmData from './BpmData' |
|||
import getInitStr from './flowable/init' |
|||
// 引入flowable的节点文件 |
|||
import flowableModdle from './flowable/flowable.json' |
|||
export default { |
|||
name: 'WorkflowBpmnModeler', |
|||
components: { |
|||
panel |
|||
}, |
|||
props: { |
|||
xml: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
users: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
groups: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
categorys: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
isView: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
taskList: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
modeler: null, |
|||
zoom: 1 |
|||
} |
|||
}, |
|||
watch: { |
|||
xml: function(val) { |
|||
if (val) { |
|||
this.createNewDiagram(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 生成实例 |
|||
this.modeler = new Modeler({ |
|||
container: this.$refs.canvas, |
|||
additionalModules: [ |
|||
{ |
|||
translate: ['value', customTranslate] |
|||
} |
|||
], |
|||
moddleExtensions: { |
|||
flowable: flowableModdle |
|||
} |
|||
}) |
|||
|
|||
console.log('1111111111111111111111111111111'); |
|||
console.log(this.xml); |
|||
console.log(this.taskList); |
|||
console.log('1111111111111111111111111111122'); |
|||
// 新增流程定义 |
|||
if (!this.xml) { |
|||
this.newDiagram() |
|||
} else { |
|||
this.createNewDiagram(this.xml) |
|||
} |
|||
}, |
|||
methods: { |
|||
newDiagram() { |
|||
this.createNewDiagram(getInitStr()) |
|||
}, |
|||
// 让图能自适应屏幕 |
|||
fitViewport() { |
|||
this.zoom = this.modeler.get('canvas').zoom('fit-viewport') |
|||
const bbox = document.querySelector('.flow-containers .viewport').getBBox() |
|||
const currentViewbox = this.modeler.get('canvas').viewbox() |
|||
const elementMid = { |
|||
x: bbox.x + bbox.width / 2 - 65, |
|||
y: bbox.y + bbox.height / 2 |
|||
} |
|||
this.modeler.get('canvas').viewbox({ |
|||
x: elementMid.x - currentViewbox.width / 2, |
|||
y: elementMid.y - currentViewbox.height / 2, |
|||
width: currentViewbox.width, |
|||
height: currentViewbox.height |
|||
}) |
|||
this.zoom = bbox.width / currentViewbox.width * 1.8 |
|||
}, |
|||
// 放大缩小 |
|||
zoomViewport(zoomIn = true) { |
|||
this.zoom = this.modeler.get('canvas').zoom() |
|||
this.zoom += (zoomIn ? 0.1 : -0.1) |
|||
this.modeler.get('canvas').zoom(this.zoom) |
|||
}, |
|||
async createNewDiagram(data) { |
|||
// 将字符串转换成图显示出来 |
|||
// data = data.replace(/<!\[CDATA\[(.+?)]]>/g, '<![CDATA[$1]]>') |
|||
data = data.replace(/<!\[CDATA\[(.+?)]]>/g, function(match, str) { |
|||
return str.replace(/</g, '<') |
|||
}) |
|||
try { |
|||
await this.modeler.importXML(data) |
|||
this.adjustPalette() |
|||
this.fitViewport() |
|||
if (this.taskList !==undefined && this.taskList.length > 0 ) { |
|||
this.fillColor() |
|||
} |
|||
} catch (err) { |
|||
console.error(err.message, err.warnings) |
|||
} |
|||
}, |
|||
// 调整左侧工具栏排版 |
|||
adjustPalette() { |
|||
try { |
|||
// 获取 bpmn 设计器实例 |
|||
const canvas = this.$refs.canvas |
|||
const djsPalette = canvas.children[0].children[1].children[4] |
|||
const djsPalStyle = { |
|||
width: '130px', |
|||
padding: '5px', |
|||
background: 'white', |
|||
left: '20px', |
|||
borderRadius: 0 |
|||
} |
|||
for (var key in djsPalStyle) { |
|||
djsPalette.style[key] = djsPalStyle[key] |
|||
} |
|||
const palette = djsPalette.children[0] |
|||
const allGroups = palette.children |
|||
allGroups[0].style['display'] = 'none' |
|||
// 修改控件样式 |
|||
for (var gKey in allGroups) { |
|||
const group = allGroups[gKey] |
|||
for (var cKey in group.children) { |
|||
const control = group.children[cKey] |
|||
const controlStyle = { |
|||
display: 'flex', |
|||
justifyContent: 'flex-start', |
|||
alignItems: 'center', |
|||
width: '100%', |
|||
padding: '5px' |
|||
} |
|||
if ( |
|||
control.className && |
|||
control.dataset && |
|||
control.className.indexOf('entry') !== -1 |
|||
) { |
|||
const controlProps = new BpmData().getControl( |
|||
control.dataset.action |
|||
) |
|||
control.innerHTML = `<div style='font-size: 14px;font-weight:500;margin-left:15px;'>${ |
|||
controlProps['title'] |
|||
}</div>` |
|||
for (var csKey in controlStyle) { |
|||
control.style[csKey] = controlStyle[csKey] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} catch (e) { |
|||
console.log(e) |
|||
} |
|||
}, |
|||
fillColor() { |
|||
const canvas = this.modeler.get('canvas') |
|||
this.modeler._definitions.rootElements[0].flowElements.forEach(n => { |
|||
const completeTask = this.taskList.find(m => m.key === n.id) |
|||
const todoTask = this.taskList.find(m => !m.completed) |
|||
const endTask = this.taskList[this.taskList.length - 1] |
|||
if (n.$type === 'bpmn:UserTask') { |
|||
if (completeTask) { |
|||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo') |
|||
n.outgoing?.forEach(nn => { |
|||
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id) |
|||
if (targetTask) { |
|||
if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){ |
|||
canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo') |
|||
canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo') |
|||
}else { |
|||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo') |
|||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo') |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
// 排他网关 |
|||
else if (n.$type === 'bpmn:ExclusiveGateway') { |
|||
if (completeTask) { |
|||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo') |
|||
n.outgoing?.forEach(nn => { |
|||
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id) |
|||
if (targetTask) { |
|||
|
|||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo') |
|||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo') |
|||
} |
|||
|
|||
}) |
|||
} |
|||
|
|||
} |
|||
// 并行网关 |
|||
else if (n.$type === 'bpmn:ParallelGateway') { |
|||
if (completeTask) { |
|||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo') |
|||
n.outgoing?.forEach(nn => { |
|||
debugger |
|||
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id) |
|||
if (targetTask) { |
|||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo') |
|||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo') |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
else if (n.$type === 'bpmn:StartEvent') { |
|||
n.outgoing.forEach(nn => { |
|||
const completeTask = this.taskList.find(m => m.key === nn.targetRef.id) |
|||
if (completeTask) { |
|||
canvas.addMarker(nn.id, 'highlight') |
|||
canvas.addMarker(n.id, 'highlight') |
|||
return |
|||
} |
|||
}) |
|||
} |
|||
else if (n.$type === 'bpmn:EndEvent') { |
|||
if (endTask.key === n.id && endTask.completed) { |
|||
canvas.addMarker(n.id, 'highlight') |
|||
return |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
// 对外 api |
|||
getProcess() { |
|||
const element = this.getProcessElement() |
|||
return { |
|||
id: element.id, |
|||
name: element.name, |
|||
category: element.$attrs['flowable:processCategory'] |
|||
} |
|||
}, |
|||
getProcessElement() { |
|||
const rootElements = this.modeler.getDefinitions().rootElements |
|||
for (let i = 0; i < rootElements.length; i++) { |
|||
if (rootElements[i].$type === 'bpmn:Process') return rootElements[i] |
|||
} |
|||
}, |
|||
async saveXML(download = false) { |
|||
try { |
|||
const { xml } = await this.modeler.saveXML({ format: true }) |
|||
if (download) { |
|||
this.downloadFile(`${this.getProcessElement().name}.bpmn20.xml`, xml, 'application/xml') |
|||
} |
|||
return xml |
|||
} catch (err) { |
|||
console.log(err) |
|||
} |
|||
}, |
|||
async showXML() { |
|||
try { |
|||
const { xml } = await this.modeler.saveXML({ format: true }) |
|||
debugger |
|||
this.$emit('showXML',xml) |
|||
} catch (err) { |
|||
console.log(err) |
|||
} |
|||
}, |
|||
async saveImg(type = 'svg', download = false) { |
|||
try { |
|||
const { svg } = await this.modeler.saveSVG({ format: true }) |
|||
if (download) { |
|||
this.downloadFile(this.getProcessElement().name, svg, 'image/svg+xml') |
|||
} |
|||
return svg |
|||
} catch (err) { |
|||
console.log(err) |
|||
} |
|||
}, |
|||
async save() { |
|||
const process = this.getProcess() |
|||
const xml = await this.saveXML() |
|||
const svg = await this.saveImg() |
|||
const result = { process, xml, svg } |
|||
this.$emit('save', result) |
|||
window.parent.postMessage(result, '*') |
|||
}, |
|||
openBpmn(file) { |
|||
const reader = new FileReader() |
|||
reader.readAsText(file, 'utf-8') |
|||
reader.onload = () => { |
|||
this.createNewDiagram(reader.result) |
|||
} |
|||
return false |
|||
}, |
|||
downloadFile(filename, data, type) { |
|||
var a = document.createElement('a') |
|||
var url = window.URL.createObjectURL(new Blob([data], { type: type })) |
|||
a.href = url |
|||
a.download = filename |
|||
a.click() |
|||
window.URL.revokeObjectURL(url) |
|||
}, |
|||
/** 获取数据类型 */ |
|||
dataType(data){ |
|||
this.$emit('dataType', data) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
/*左边工具栏以及编辑节点的样式*/ |
|||
@import "~bpmn-js/dist/assets/diagram-js.css"; |
|||
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css"; |
|||
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css"; |
|||
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css"; |
|||
.view-mode { |
|||
.el-header, .el-aside, .djs-palette, .bjs-powered-by { |
|||
display: none; |
|||
} |
|||
.el-loading-mask { |
|||
background-color: initial; |
|||
} |
|||
.el-loading-spinner { |
|||
display: none; |
|||
} |
|||
} |
|||
.flow-containers { |
|||
// background-color: #ffffff; |
|||
width: 100%; |
|||
height: 100%; |
|||
.canvas { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.panel { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 50px; |
|||
width: 300px; |
|||
} |
|||
.load { |
|||
margin-right: 10px; |
|||
} |
|||
.el-form-item__label{ |
|||
font-size: 13px; |
|||
} |
|||
|
|||
.djs-palette{ |
|||
left: 0px!important; |
|||
top: 0px; |
|||
border-top: none; |
|||
} |
|||
|
|||
.djs-container svg { |
|||
min-height: 650px; |
|||
} |
|||
|
|||
.highlight.djs-shape .djs-visual > :nth-child(1) { |
|||
fill: green !important; |
|||
stroke: green !important; |
|||
fill-opacity: 0.2 !important; |
|||
} |
|||
.highlight.djs-shape .djs-visual > :nth-child(2) { |
|||
fill: green !important; |
|||
} |
|||
.highlight.djs-shape .djs-visual > path { |
|||
fill: green !important; |
|||
fill-opacity: 0.2 !important; |
|||
stroke: green !important; |
|||
} |
|||
.highlight.djs-connection > .djs-visual > path { |
|||
stroke: green !important; |
|||
} |
|||
// .djs-connection > .djs-visual > path { |
|||
// stroke: orange !important; |
|||
// stroke-dasharray: 4px !important; |
|||
// fill-opacity: 0.2 !important; |
|||
// } |
|||
// .djs-shape .djs-visual > :nth-child(1) { |
|||
// fill: orange !important; |
|||
// stroke: orange !important; |
|||
// stroke-dasharray: 4px !important; |
|||
// fill-opacity: 0.2 !important; |
|||
// } |
|||
.highlight-todo.djs-connection > .djs-visual > path { |
|||
stroke: orange !important; |
|||
stroke-dasharray: 4px !important; |
|||
fill-opacity: 0.2 !important; |
|||
} |
|||
.highlight-todo.djs-shape .djs-visual > :nth-child(1) { |
|||
fill: orange !important; |
|||
stroke: orange !important; |
|||
stroke-dasharray: 4px !important; |
|||
fill-opacity: 0.2 !important; |
|||
} |
|||
.overlays-div { |
|||
font-size: 10px; |
|||
color: red; |
|||
width: 100px; |
|||
top: -20px !important; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,227 +0,0 @@ |
|||
export default { |
|||
// Labels
|
|||
'Activate the global connect tool': '激活全局连接工具', |
|||
'Append {type}': '添加 {type}', |
|||
'Add Lane above': '在上面添加道', |
|||
'Divide into two Lanes': '分割成两个道', |
|||
'Divide into three Lanes': '分割成三个道', |
|||
'Add Lane below': '在下面添加道', |
|||
'Append compensation activity': '追加补偿活动', |
|||
'Change type': '修改类型', |
|||
'Connect using Association': '使用关联连接', |
|||
'Connect using Sequence/MessageFlow or Association': '使用顺序/消息流或者关联连接', |
|||
'Connect using DataInputAssociation': '使用数据输入关联连接', |
|||
'Remove': '移除', |
|||
'Activate the hand tool': '激活抓手工具', |
|||
'Activate the lasso tool': '激活套索工具', |
|||
'Activate the create/remove space tool': '激活创建/删除空间工具', |
|||
'Create expanded SubProcess': '创建扩展子过程', |
|||
'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出事件/边界事件', |
|||
'Create Pool/Participant': '创建池/参与者', |
|||
'Parallel Multi Instance': '并行多重事件', |
|||
'Sequential Multi Instance': '时序多重事件', |
|||
'DataObjectReference': '数据对象参考', |
|||
'DataStoreReference': '数据存储参考', |
|||
'Loop': '循环', |
|||
'Ad-hoc': '即席', |
|||
'Create {type}': '创建 {type}', |
|||
'Task': '任务', |
|||
'Send Task': '发送任务', |
|||
'Receive Task': '接收任务', |
|||
'User Task': '用户任务', |
|||
'Manual Task': '手工任务', |
|||
'Business Rule Task': '业务规则任务', |
|||
'Service Task': '服务任务', |
|||
'Script Task': '脚本任务', |
|||
'Call Activity': '调用活动', |
|||
'Sub Process (collapsed)': '子流程（折叠的）', |
|||
'Sub Process (expanded)': '子流程（展开的）', |
|||
'Start Event': '开始事件', |
|||
'StartEvent': '开始事件', |
|||
'Intermediate Throw Event': '中间事件', |
|||
'End Event': '结束事件', |
|||
'EndEvent': '结束事件', |
|||
'Create Gateway': '创建网关', |
|||
'Create Intermediate/Boundary Event': '创建中间/边界事件', |
|||
'Message Start Event': '消息开始事件', |
|||
'Timer Start Event': '定时开始事件', |
|||
'Conditional Start Event': '条件开始事件', |
|||
'Signal Start Event': '信号开始事件', |
|||
'Error Start Event': '错误开始事件', |
|||
'Escalation Start Event': '升级开始事件', |
|||
'Compensation Start Event': '补偿开始事件', |
|||
'Message Start Event (non-interrupting)': '消息开始事件（非中断）', |
|||
'Timer Start Event (non-interrupting)': '定时开始事件（非中断）', |
|||
'Conditional Start Event (non-interrupting)': '条件开始事件（非中断）', |
|||
'Signal Start Event (non-interrupting)': '信号开始事件（非中断）', |
|||
'Escalation Start Event (non-interrupting)': '升级开始事件（非中断）', |
|||
'Message Intermediate Catch Event': '消息中间捕获事件', |
|||
'Message Intermediate Throw Event': '消息中间抛出事件', |
|||
'Timer Intermediate Catch Event': '定时中间捕获事件', |
|||
'Escalation Intermediate Throw Event': '升级中间抛出事件', |
|||
'Conditional Intermediate Catch Event': '条件中间捕获事件', |
|||
'Link Intermediate Catch Event': '链接中间捕获事件', |
|||
'Link Intermediate Throw Event': '链接中间抛出事件', |
|||
'Compensation Intermediate Throw Event': '补偿中间抛出事件', |
|||
'Signal Intermediate Catch Event': '信号中间捕获事件', |
|||
'Signal Intermediate Throw Event': '信号中间抛出事件', |
|||
'Message End Event': '消息结束事件', |
|||
'Escalation End Event': '定时结束事件', |
|||
'Error End Event': '错误结束事件', |
|||
'Cancel End Event': '取消结束事件', |
|||
'Compensation End Event': '补偿结束事件', |
|||
'Signal End Event': '信号结束事件', |
|||
'Terminate End Event': '终止结束事件', |
|||
'Message Boundary Event': '消息边界事件', |
|||
'Message Boundary Event (non-interrupting)': '消息边界事件（非中断）', |
|||
'Timer Boundary Event': '定时边界事件', |
|||
'Timer Boundary Event (non-interrupting)': '定时边界事件（非中断）', |
|||
'Escalation Boundary Event': '升级边界事件', |
|||
'Escalation Boundary Event (non-interrupting)': '升级边界事件（非中断）', |
|||
'Conditional Boundary Event': '条件边界事件', |
|||
'Conditional Boundary Event (non-interrupting)': '条件边界事件（非中断）', |
|||
'Error Boundary Event': '错误边界事件', |
|||
'Cancel Boundary Event': '取消边界事件', |
|||
'Signal Boundary Event': '信号边界事件', |
|||
'Signal Boundary Event (non-interrupting)': '信号边界事件（非中断）', |
|||
'Compensation Boundary Event': '补偿边界事件', |
|||
'Exclusive Gateway': '互斥网关', |
|||
'Parallel Gateway': '并行网关', |
|||
'Inclusive Gateway': '相容网关', |
|||
'Complex Gateway': '复杂网关', |
|||
'Event based Gateway': '事件网关', |
|||
'Transaction': '转运', |
|||
'Sub Process': '子流程', |
|||
'Event Sub Process': '事件子流程', |
|||
'Collapsed Pool': '折叠池', |
|||
'Expanded Pool': '展开池', |
|||
// Errors
|
|||
'no parent for {element} in {parent}': '在{parent}里，{element}没有父类', |
|||
'no shape type specified': '没有指定的形状类型', |
|||
'flow elements must be children of pools/participants': '流元素必须是池/参与者的子类', |
|||
'out of bounds release': 'out of bounds release', |
|||
'more than {count} child lanes': '子道大于{count} ', |
|||
'element required': '元素不能为空', |
|||
'diagram not part of bpmn:Definitions': '流程图不符合bpmn规范', |
|||
'no diagram to display': '没有可展示的流程图', |
|||
'no process or collaboration to display': '没有可展示的流程/协作', |
|||
'element {element} referenced by {referenced}#{property} not yet drawn': '由{referenced}#{property}引用的{element}元素仍未绘制', |
|||
'already rendered {element}': '{element} 已被渲染', |
|||
'failed to import {element}': '导入{element}失败', |
|||
// 属性面板的参数
|
|||
'Id': '标识', |
|||
'Name': '名称', |
|||
'General': '常规', |
|||
'Details': '详情', |
|||
'Message Name': '消息名称', |
|||
'Message': '消息', |
|||
'Initiator': '创建者', |
|||
'Asynchronous Continuations': '持续异步', |
|||
'Asynchronous Before': '异步前', |
|||
'Asynchronous After': '异步后', |
|||
'Job Configuration': '工作配置', |
|||
'Exclusive': '排除', |
|||
'Job Priority': '工作优先级', |
|||
'Retry Time Cycle': '重试时间周期', |
|||
'Documentation': '文档', |
|||
'Element Documentation': '元素文档', |
|||
'History Configuration': '历史配置', |
|||
'History Time To Live': '历史的生存时间', |
|||
'Forms': '表单', |
|||
'Form Key': '表单key', |
|||
'Form Fields': '表单字段', |
|||
'Business Key': '业务key', |
|||
'Form Field': '表单字段', |
|||
'ID': '编号', |
|||
'Type': '类型', |
|||
'Label': '名称', |
|||
'Default Value': '默认值', |
|||
'Validation': '校验', |
|||
'Add Constraint': '添加约束', |
|||
'Config': '配置', |
|||
'Properties': '属性', |
|||
'Add Property': '添加属性', |
|||
'Value': '值', |
|||
'Listeners': '监听器', |
|||
'Execution Listener': '执行监听', |
|||
'Event Type': '事件类型', |
|||
'Listener Type': '监听器类型', |
|||
'Java Class': 'Java类', |
|||
'Expression': '表达式', |
|||
'Must provide a value': '必须提供一个值', |
|||
'Delegate Expression': '代理表达式', |
|||
'Script': '脚本', |
|||
'Script Format': '脚本格式', |
|||
'Script Type': '脚本类型', |
|||
'Inline Script': '内联脚本', |
|||
'External Script': '外部脚本', |
|||
'Resource': '资源', |
|||
'Field Injection': '字段注入', |
|||
'Extensions': '扩展', |
|||
'Input/Output': '输入/输出', |
|||
'Input Parameters': '输入参数', |
|||
'Output Parameters': '输出参数', |
|||
'Parameters': '参数', |
|||
'Output Parameter': '输出参数', |
|||
'Timer Definition Type': '定时器定义类型', |
|||
'Timer Definition': '定时器定义', |
|||
'Date': '日期', |
|||
'Duration': '持续', |
|||
'Cycle': '循环', |
|||
'Signal': '信号', |
|||
'Signal Name': '信号名称', |
|||
'Escalation': '升级', |
|||
'Error': '错误', |
|||
'Link Name': '链接名称', |
|||
'Condition': '条件名称', |
|||
'Variable Name': '变量名称', |
|||
'Variable Event': '变量事件', |
|||
'Specify more than one variable change event as a comma separated list.': '多个变量事件以逗号隔开', |
|||
'Wait for Completion': '等待完成', |
|||
'Activity Ref': '活动参考', |
|||
'Version Tag': '版本标签', |
|||
'Executable': '可执行文件', |
|||
'External Task Configuration': '扩展任务配置', |
|||
'Task Priority': '任务优先级', |
|||
'External': '外部', |
|||
'Connector': '连接器', |
|||
'Must configure Connector': '必须配置连接器', |
|||
'Connector Id': '连接器编号', |
|||
'Implementation': '实现方式', |
|||
'Field Injections': '字段注入', |
|||
'Fields': '字段', |
|||
'Result Variable': '结果变量', |
|||
'Topic': '主题', |
|||
'Configure Connector': '配置连接器', |
|||
'Input Parameter': '输入参数', |
|||
'Assignee': '代理人', |
|||
'Candidate Users': '候选用户', |
|||
'Candidate Groups': '候选组', |
|||
'Due Date': '到期时间', |
|||
'Follow Up Date': '跟踪日期', |
|||
'Priority': '优先级', |
|||
'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00', |
|||
'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00', |
|||
'Variables': '变量' |
|||
} |
|||
|
|||
export const NodeName = { |
|||
'bpmn:Process': '流程', |
|||
'bpmn:StartEvent': '开始事件', |
|||
'bpmn:IntermediateThrowEvent': '中间事件', |
|||
'bpmn:Task': '任务', |
|||
'bpmn:SendTask': '发送任务', |
|||
'bpmn:ReceiveTask': '接收任务', |
|||
'bpmn:UserTask': '用户任务', |
|||
'bpmn:ManualTask': '手工任务', |
|||
'bpmn:BusinessRuleTask': '业务规则任务', |
|||
'bpmn:ServiceTask': '服务任务', |
|||
'bpmn:ScriptTask': '脚本任务', |
|||
'bpmn:EndEvent': '结束事件', |
|||
'bpmn:SequenceFlow': '流程线', |
|||
'bpmn:ExclusiveGateway': '互斥网关', |
|||
'bpmn:ParallelGateway': '并行网关', |
|||
'bpmn:InclusiveGateway': '相容网关', |
|||
'bpmn:ComplexGateway': '复杂网关', |
|||
'bpmn:EventBasedGateway': '事件网关' |
|||
} |
|||
@ -0,0 +1,172 @@ |
|||
<template> |
|||
<div> |
|||
|
|||
<div class="tab-header webtop"> |
|||
<!-- 标题 --> |
|||
<div>商品信息</div> |
|||
<!-- start 添加修改按钮 --> |
|||
<div> |
|||
<el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button> |
|||
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button> |
|||
</div> |
|||
<!-- end 添加修改按钮 --> |
|||
<!-- end 详情按钮 --> |
|||
</div> |
|||
|
|||
<div> |
|||
|
|||
<el-card class="box-card"> |
|||
<div class="item"> |
|||
<span class="item_text">商品名称：</span> |
|||
<el-input v-model="formobj.industryName" placeholder="" class="item_input" clearable /> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item_text">项目行业说明：</span> |
|||
<el-input v-model="formobj.remarks" placeholder="" class="item_input" clearable /> |
|||
</div> |
|||
|
|||
</el-card> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from '@/api/dataDict/datadict' |
|||
export default { |
|||
data() { |
|||
return { |
|||
submitdisabled: false, |
|||
formobj: { |
|||
sid: '', |
|||
industryName: '', |
|||
remarks: '' |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
saveOrUpdate() { |
|||
console.log('>>>>>>>>>saveOrUpdate', this.formobj) |
|||
if (this.formobj.sid) { |
|||
req.updateindustry(this.formobj) |
|||
.then(resp => { |
|||
if (resp.success) { |
|||
this.$message({ |
|||
showClose: true, |
|||
type: 'success', |
|||
message: resp.msg |
|||
}) |
|||
this.handleReturn('true') |
|||
} else { |
|||
// 根据resp.code进行异常情况处理 |
|||
} |
|||
}) |
|||
.catch(() => {}) |
|||
} else { |
|||
req.saveindustry(this.formobj) |
|||
.then(resp => { |
|||
if (resp.success) { |
|||
this.$message({ |
|||
showClose: true, |
|||
type: 'success', |
|||
message: resp.msg |
|||
}) |
|||
this.handleReturn('true') |
|||
} else { |
|||
// 根据resp.code进行异常情况处理 |
|||
} |
|||
}) |
|||
.catch(() => {}) |
|||
} |
|||
}, |
|||
handleReturn(isreload) { |
|||
if (isreload === 'true') this.$emit('reloadlist') |
|||
this.formobj = { |
|||
sid: '', |
|||
industryName: '', |
|||
remarks: '' |
|||
} |
|||
this.$emit('doback') |
|||
}, |
|||
|
|||
showAdd() { |
|||
|
|||
}, |
|||
showEdit(row) { |
|||
req.industryFetchBySid(row.sid) |
|||
.then(resp => { |
|||
if (resp.success) { |
|||
this.formobj = resp.data |
|||
} |
|||
}) |
|||
.catch(e => { |
|||
this.formobj = row |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.box-card { |
|||
margin-left: 60px; |
|||
margin-right: 60px; |
|||
min-width: 70%; |
|||
margin-top: 20px; |
|||
|
|||
.item { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
margin-top: 15px; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
|
|||
.item_text { |
|||
flex: 0.8; |
|||
font-size: 18px; |
|||
text-align: right; |
|||
} |
|||
|
|||
.item_input { |
|||
flex: 4; |
|||
font-size: 16px; |
|||
margin-left: 10px; |
|||
margin-right: 80px; |
|||
} |
|||
|
|||
.item_left_input { |
|||
width: 20%; |
|||
} |
|||
|
|||
.item_left_text { |
|||
height: 30px; |
|||
margin-left: 20px; |
|||
line-height: 30px; |
|||
color: #018AD2; |
|||
padding: 0px 15px; |
|||
border: 1.5px solid #018AD2; |
|||
border-radius: 5px; |
|||
|
|||
} |
|||
|
|||
.item_right { |
|||
flex: 1; |
|||
justify-items: center; |
|||
|
|||
.item_right_list_text { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.item_right_list_delect { |
|||
color: #5E94FF; |
|||
margin-left: 20px; |
|||
font-size: 16px; |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,224 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div v-show="viewState == 1"> |
|||
<button-bar ref="btnbar" view-title="商品列表" :btndisabled="btndisabled" @btnhandle="btnHandle" /> |
|||
<div class="main-content"> |
|||
<div class="searchcon"> |
|||
<el-button size="small" class="searchbtn" @click="clicksearchShow"> |
|||
{{ searchxianshitit }} |
|||
</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form :inline="true" class="tab-header"> |
|||
<el-form-item label="商品名称"> |
|||
<el-input v-model="queryParams.params.name" placeholder="" clearable /> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
<div class="btn" style="text-align: center;"> |
|||
<el-button type="primary" size="small" icon="el-icon-search" |
|||
@click="dosearch">查询</el-button> |
|||
<el-button type="primary" size="small" icon="el-icon-refresh" |
|||
@click="resetQuery">重置</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- Start 项目列表头部 --> |
|||
<div class="listtop"> |
|||
<div class="tit">商品列表</div> |
|||
</div> |
|||
<!-- End 项目列表头部 --> |
|||
<!-- Start 项目列表 --> |
|||
<div class=""> |
|||
<el-table v-loading="tableLoading" :data="dataList" border style="width: 100%"> |
|||
<!-- <el-table-column fixed width="50" type="selection" align="center" /> --> |
|||
<el-table-column fixed width="60" label="序号" type="index" :index="indexMethod" align="center" /> |
|||
<el-table-column label="操作" align="center" width="180"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="primary" size="mini" @click="toRelevancy(scope.row)">编辑</el-button> |
|||
<el-button type="primary" size="mini" @click="toRelevancyInfo(scope.row)">删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="name" label="商品名称" align="center" /> |
|||
<el-table-column prop="bankAccount" label="商品图片" align="center" /> |
|||
<el-table-column prop="bankAccountNumber" label="价格" align="center" /> |
|||
<el-table-column prop="bankAccountNumber" label="规格" align="center" /> |
|||
</el-table> |
|||
</div> |
|||
<!-- End 项目列表 --> |
|||
<div class="pages"> |
|||
<div class="tit" /> |
|||
<!-- 翻页 --> |
|||
<pagination v-show="dataList.length > 0" :total="queryParams.total" :page.sync="queryParams.current" |
|||
:limit.sync="queryParams.size" class="pagination" @pagination="loadList" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- End 查询和其列表部分 --> |
|||
<!-- 新增修改部分组件 --> |
|||
<divAdd v-show="viewState == 2 || viewState == 3" ref="divadd" @doback="resetState" @reloadlist="loadList" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from '@/api/commodity/commodity.js' |
|||
import ButtonBar from '@/components/ButtonBar' |
|||
import Pagination from '@/components/pagination' |
|||
import pageye from '@/components/pagination/pageye' |
|||
import divAdd from './commodityAdd.vue' |
|||
export default { |
|||
name: 'SupplierBankInfoIndex', |
|||
components: { |
|||
ButtonBar, |
|||
Pagination, |
|||
pageye, |
|||
divAdd |
|||
}, |
|||
data() { |
|||
return { |
|||
btndisabled: false, |
|||
viewState: 1, // 1、列表 2、添加 3、修改 4、查看 |
|||
isSearchShow: false, |
|||
searchxianshitit: '显示查询条件', |
|||
tableLoading: false, |
|||
dataList: [], |
|||
btnList: [{ |
|||
type: 'primary', |
|||
size: 'small', |
|||
icon: 'plus', |
|||
btnKey: 'toAdd', |
|||
btnLabel: '新增' |
|||
}, |
|||
{ |
|||
type: 'info', |
|||
size: 'small', |
|||
icon: 'cross', |
|||
btnKey: 'doClose', |
|||
btnLabel: '关闭' |
|||
} |
|||
], |
|||
queryParams: { |
|||
current: 1, |
|||
size: 10, |
|||
total: 0, |
|||
params: { |
|||
name: '' |
|||
} |
|||
}, |
|||
sids: [] |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$refs['btnbar'].setButtonList(this.btnList) |
|||
}, |
|||
created() { |
|||
this.loadList() |
|||
}, |
|||
methods: { |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = '隐藏查询条件' |
|||
} else { |
|||
this.searchxianshitit = '显示查询条件' |
|||
} |
|||
}, |
|||
btnHandle(btnKey) { |
|||
switch (btnKey) { |
|||
case 'toAdd': |
|||
this.toAdd() |
|||
break |
|||
case 'doClose': |
|||
this.doClose() |
|||
break |
|||
default: |
|||
break |
|||
} |
|||
}, |
|||
loadList() { |
|||
this.tableLoading = true |
|||
req.brandListPage(this.queryParams).then((resp) => { |
|||
this.tableLoading = false |
|||
if (resp.success) { |
|||
const data = resp.data |
|||
this.queryParams.total = data.total |
|||
this.dataList = data.records |
|||
} else { |
|||
// 根据resp.code进行异常情况处理 |
|||
this.dataList = [] |
|||
this.queryParams.total = 0 |
|||
} |
|||
}).catch(() => { |
|||
this.tableLoading = false |
|||
}) |
|||
}, |
|||
|
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.queryParams.current - 1) * this.queryParams.size |
|||
var pageindex = index + 1 + pagestart |
|||
return pageindex |
|||
}, |
|||
dosearch() { |
|||
this.queryParams.current = 1 |
|||
this.loadList() |
|||
}, |
|||
resetQuery() { |
|||
this.queryParams = { |
|||
current: 1, |
|||
size: 10, |
|||
total: 0, |
|||
params: { |
|||
name: '', |
|||
} |
|||
} |
|||
this.loadList() |
|||
}, |
|||
toAdd() { |
|||
this.viewState = 2 |
|||
this.$refs['divadd'].showAdd() |
|||
}, |
|||
|
|||
toRelevancy(row) { |
|||
this.viewState = 3 |
|||
this.$refs['divadd'].showEdit(row) |
|||
}, |
|||
toRelevancyInfo(row) { |
|||
|
|||
const tip = '请确认是否删除所选记录?' |
|||
this.$confirm(tip, '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
const loading = this.$loading({ |
|||
lock: true, |
|||
text: 'Loading', |
|||
spinner: 'el-icon-loading', |
|||
background: 'rgba(0, 0, 0, 0.7)' |
|||
}) |
|||
req.brandDelBySids(row.id).then((resp) => { |
|||
loading.close() |
|||
if (resp.success) { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: resp.msg, |
|||
showClose: true |
|||
}) |
|||
this.loadList() |
|||
} else { |
|||
// 根据resp.code进行异常情况处理 |
|||
} |
|||
}).catch(e => { |
|||
loading.close() |
|||
}) |
|||
}).catch(() => {}) |
|||
}, |
|||
resetState() { |
|||
this.viewState = 1 |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
</style> |
|||
@ -0,0 +1,8 @@ |
|||
<template> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,8 @@ |
|||
<template> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,8 @@ |
|||
<template> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,221 +0,0 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div v-show="viewState == 1"> |
|||
<button-bar |
|||
ref="btnbar" |
|||
view-title="物料管理" |
|||
:btndisabled="btndisabled" |
|||
@btnhandle="btnHandle" |
|||
/> |
|||
<div class="main-content"> |
|||
<div class="searchcon"> |
|||
<el-button size="small" class="searchbtn" @click="clicksearchShow"> |
|||
{{ searchxianshitit }} |
|||
</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form |
|||
ref="queryParams" |
|||
:model="listQuery" |
|||
:inline="true" |
|||
class="tab-header" |
|||
> |
|||
<el-form-item label="物料编号"> |
|||
<el-input |
|||
v-model="listQuery.materiel_no" |
|||
maxlength="20" |
|||
placeholder="请输入物料编号" |
|||
class="brand_name" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="物料名称"> |
|||
<el-input |
|||
v-model="listQuery.materiel_name" |
|||
maxlength="20" |
|||
placeholder="请输入物料名称" |
|||
class="addinputw" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="物料组"> |
|||
<el-select v-model="listQuery.materiel_group" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in Materia" :key="i" :label="item" :value="i"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="btn" style="text-align: center"> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-search" |
|||
@click="dosearch" |
|||
>查询</el-button |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-refresh" |
|||
@click="resetQuery" |
|||
>重置</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-table :data="logList" style="width: 100%" border> |
|||
<el-table-column |
|||
label="序号" |
|||
type="index" |
|||
width="80" |
|||
:index="indexMethod" |
|||
fixed |
|||
align="center" |
|||
/> |
|||
<el-table-column align="center" prop="id" label="物料id" width="120"></el-table-column> |
|||
<el-table-column align="center" prop="materiel_group_text" label="物料组" width="150"></el-table-column> |
|||
<el-table-column align="center" prop="materiel_no" label="物料编号" width="180"></el-table-column> |
|||
<el-table-column align="center" prop="materiel_name" label="物料名称" width="180"></el-table-column> |
|||
<el-table-column align="center" prop="brand_name" label="品牌名称" width="200"></el-table-column> |
|||
<el-table-column align="center" prop="price" label="单价" width="120"></el-table-column> |
|||
<el-table-column align="center" prop="remarks" label="备注"></el-table-column> |
|||
<el-table-column align="center" prop="unit" label="单位" width="100"></el-table-column> |
|||
</el-table> |
|||
<div class="pages"> |
|||
<div class="tit" /> |
|||
<pagination |
|||
v-show="logList.length > 0" |
|||
:total="total" |
|||
:page.sync="listQuery.page" |
|||
:limit.sync="listQuery.limit" |
|||
class="pagination" |
|||
@pagination="loadLogList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from "@/api/gfApi"; |
|||
import Pagination from "@/components/pagination"; |
|||
import ButtonBar from "@/components/ButtonBar"; |
|||
export default { |
|||
components: { |
|||
ButtonBar, |
|||
Pagination, |
|||
}, |
|||
data() { |
|||
return { |
|||
viewState: 1, |
|||
tabActiveName: "uplog", |
|||
index: "0", |
|||
isSearchShow: false, |
|||
searchxianshitit: "显示查询条件", |
|||
btndisabled: false, |
|||
btnList: [ |
|||
{ |
|||
type: "info", |
|||
size: "small", |
|||
icon: "cross", |
|||
btnKey: "doClose", |
|||
btnLabel: "关闭", |
|||
}, |
|||
], |
|||
logList: [], |
|||
tempList: [], |
|||
listQuery: { |
|||
page: 1, |
|||
limit: 10, |
|||
materiel_group:'', |
|||
materiel_name:'', |
|||
materiel_no:'' |
|||
}, |
|||
total: 0, |
|||
jmdListQuery: { |
|||
contractNumber: "", |
|||
date: "", |
|||
}, |
|||
Materia:{} |
|||
}; |
|||
}, |
|||
mounted() { |
|||
// 初始化按钮 |
|||
this.$refs["btnbar"].setButtonList(this.btnList); |
|||
}, |
|||
created() { |
|||
// 初始化变量 |
|||
this.init(); |
|||
this.getMaterialGroup(); |
|||
}, |
|||
methods: { |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow; |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = "隐藏查询条件"; |
|||
} else { |
|||
this.searchxianshitit = "显示查询条件"; |
|||
} |
|||
}, |
|||
dosearch() { |
|||
this.loadLogList(); |
|||
}, |
|||
resetQuery() { |
|||
this.listQuery = { |
|||
page: 1, |
|||
limit: 10, |
|||
materiel_group:'', |
|||
materiel_name:'', |
|||
materiel_no:'' |
|||
}; |
|||
this.total = 0; |
|||
this.loadLogList(); |
|||
}, |
|||
// 右上角点击事件 |
|||
btnHandle(btnKey) { |
|||
switch (btnKey) { |
|||
case "doClose": // 关闭 |
|||
this.doClose(); |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}, |
|||
init() { |
|||
this.loadLogList(); |
|||
}, |
|||
loadLogList() { |
|||
req.getMaterielList(this.listQuery).then((res) => { |
|||
if(res.code==200){ |
|||
this.total = res.data.data.count |
|||
this.logList = res.data.data.list |
|||
} |
|||
}); |
|||
}, |
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.listQuery.page - 1) * this.listQuery.limit; |
|||
var pageindex = index + 1 + pagestart; |
|||
return pageindex; |
|||
}, |
|||
resetState() { |
|||
this.viewState = 1; |
|||
}, |
|||
getMaterialGroup(){ |
|||
req.getMaterialGroup().then((res) => { |
|||
if(res.code==200){ |
|||
this.Materia=res.data.data |
|||
} |
|||
}); |
|||
}, |
|||
doClose() { |
|||
this.$store.dispatch("tagsView/delView", this.$route); |
|||
this.$router.go(-1); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
</style> |
|||
|
|||
@ -0,0 +1,8 @@ |
|||
<template> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,8 @@ |
|||
<template> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,12 +0,0 @@ |
|||
<script> |
|||
export default { |
|||
created() { |
|||
const { params, query } = this.$route |
|||
const { path } = params |
|||
this.$router.replace({ path: '/' + path, query }) |
|||
}, |
|||
render: function(h) { |
|||
return h() // avoid warning message |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,8 @@ |
|||
<template> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,8 @@ |
|||
<template> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,8 @@ |
|||
<template> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,222 +0,0 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div v-show="viewState == 1"> |
|||
<button-bar |
|||
ref="btnbar" |
|||
view-title="仓库管理" |
|||
:btndisabled="btndisabled" |
|||
@btnhandle="btnHandle" |
|||
/> |
|||
<div class="main-content"> |
|||
<div class="searchcon"> |
|||
<el-button size="small" class="searchbtn" @click="clicksearchShow"> |
|||
{{ searchxianshitit }} |
|||
</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form |
|||
ref="queryParams" |
|||
:model="jmdListQuery" |
|||
:inline="true" |
|||
class="tab-header" |
|||
> |
|||
<el-form-item label="仓库名称"> |
|||
<el-input |
|||
v-model="listQuery.storehouse_name" |
|||
maxlength="20" |
|||
placeholder="请输入仓库名称" |
|||
class="addinputw" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="仓库编码"> |
|||
<el-input |
|||
v-model="listQuery.storehouse_code" |
|||
maxlength="20" |
|||
placeholder="请输入仓库编码" |
|||
class="addinputw" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="btn" style="text-align: center"> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-search" |
|||
@click="dosearch" |
|||
>查询</el-button |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-refresh" |
|||
@click="resetQuery" |
|||
>重置</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-table :data="logList" style="width: 100%" border> |
|||
<el-table-column |
|||
label="序号" |
|||
type="index" |
|||
width="80" |
|||
:index="indexMethod" |
|||
fixed |
|||
align="center" |
|||
/> |
|||
<el-table-column |
|||
align="center" |
|||
prop="id" |
|||
label="id" |
|||
width="150" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="storehouse_code" |
|||
label="仓库代码" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="storehouse_name" |
|||
label="仓库名称" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="area_text" |
|||
label="仓库地址" |
|||
> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="pages"> |
|||
<div class="tit" /> |
|||
<pagination |
|||
v-show="logList.length > 0" |
|||
:total="total" |
|||
:page.sync="listQuery.page" |
|||
:limit.sync="listQuery.limit" |
|||
class="pagination" |
|||
@pagination="loadLogList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from "@/api/gfApi"; |
|||
import Pagination from "@/components/pagination"; |
|||
import ButtonBar from "@/components/ButtonBar"; |
|||
export default { |
|||
components: { |
|||
ButtonBar, |
|||
Pagination, |
|||
}, |
|||
data() { |
|||
return { |
|||
viewState: 1, |
|||
tabActiveName: "uplog", |
|||
index: "0", |
|||
isSearchShow: false, |
|||
searchxianshitit: "显示查询条件", |
|||
btndisabled: false, |
|||
btnList: [ |
|||
{ |
|||
type: "info", |
|||
size: "small", |
|||
icon: "cross", |
|||
btnKey: "doClose", |
|||
btnLabel: "关闭", |
|||
}, |
|||
], |
|||
logList: [], |
|||
tempList: [], |
|||
listQuery: { |
|||
page: 1, |
|||
limit: 10, |
|||
storehouse_code:'', |
|||
storehouse_name:'', |
|||
}, |
|||
total: 0, |
|||
jmdListQuery: { |
|||
contractNumber: "", |
|||
date: "", |
|||
}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
// 初始化按钮 |
|||
this.$refs["btnbar"].setButtonList(this.btnList); |
|||
}, |
|||
created() { |
|||
// 初始化变量 |
|||
this.init(); |
|||
}, |
|||
methods: { |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow; |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = "隐藏查询条件"; |
|||
} else { |
|||
this.searchxianshitit = "显示查询条件"; |
|||
} |
|||
}, |
|||
dosearch() { |
|||
this.loadLogList(); |
|||
}, |
|||
resetQuery() { |
|||
this.listQuery = { |
|||
page: 1, |
|||
limit: 10, |
|||
storehouse_code:'', |
|||
storehouse_name:'', |
|||
}; |
|||
this.total = 0; |
|||
this.loadLogList(); |
|||
}, |
|||
// 右上角点击事件 |
|||
btnHandle(btnKey) { |
|||
switch (btnKey) { |
|||
case "doClose": // 关闭 |
|||
this.doClose(); |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}, |
|||
init() { |
|||
this.loadLogList(); |
|||
}, |
|||
loadLogList() { |
|||
req.getWarehouse(this.listQuery).then((res) => { |
|||
if(res.code==200){ |
|||
this.total = res.data.data.count |
|||
this.logList = res.data.data.list |
|||
} |
|||
}); |
|||
}, |
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.listQuery.page - 1) * this.listQuery.limit; |
|||
var pageindex = index + 1 + pagestart; |
|||
return pageindex; |
|||
}, |
|||
resetState() { |
|||
this.viewState = 1; |
|||
}, |
|||
doClose() { |
|||
this.$store.dispatch("tagsView/delView", this.$route); |
|||
this.$router.go(-1); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
</style> |
|||
|
|||
@ -1,373 +0,0 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div v-show="viewState == 1"> |
|||
<button-bar |
|||
ref="btnbar" |
|||
view-title="出入库列表" |
|||
:btndisabled="btndisabled" |
|||
@btnhandle="btnHandle" |
|||
/> |
|||
<div class="main-content"> |
|||
<div class="searchcon"> |
|||
<el-button size="small" class="searchbtn" @click="clicksearchShow"> |
|||
{{ searchxianshitit }} |
|||
</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form |
|||
ref="queryParams" |
|||
:model="listQuery" |
|||
:inline="true" |
|||
class="tab-header" |
|||
> |
|||
<el-form-item label="出库仓库"> |
|||
<el-select v-model="listQuery.out_storehouse_id" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in storehouse" :key="i" :label="item.storehouse_name" :value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="入库仓库"> |
|||
<el-select v-model="listQuery.inp_storehouse_id" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in storehouse" :key="i" :label="item.storehouse_name" :value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="供应商"> |
|||
<el-select v-model="listQuery.supplier_id" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in SupplierList" :key="i" :label="item.supplier_name" :value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="代理商"> |
|||
<el-select v-model="listQuery.agent_id" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in AgentList" :key="i" :label="item.name" :value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="客户名称"> |
|||
<el-input |
|||
v-model="listQuery.customer_name" |
|||
maxlength="20" |
|||
placeholder="请输入客户名称" |
|||
class="addinputw" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="批次号"> |
|||
<el-input |
|||
v-model="listQuery.batch_number" |
|||
maxlength="20" |
|||
placeholder="请输入批次号" |
|||
class="addinputw" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="审核状态"> |
|||
<el-select v-model="listQuery.status" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in Status" :key="i" :label="item.name" :value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="出入库类型"> |
|||
<el-select v-model="listQuery.type" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in OutInType" :key="i" :label="item" :value="i"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="物料编号"> |
|||
<el-input |
|||
v-model="listQuery.materiel_no" |
|||
maxlength="20" |
|||
placeholder="请输入物料编号" |
|||
class="addinputw" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="物料名称"> |
|||
<el-input |
|||
v-model="listQuery.materiel_name" |
|||
maxlength="20" |
|||
placeholder="请输入物料名称" |
|||
class="addinputw" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="物料组"> |
|||
<el-select v-model="listQuery.materiel_group" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in Materia" :key="i" :label="item" :value="i"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="选择出入库"> |
|||
<el-select v-model="listQuery.record_type" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in outliArr" :key="i" :label="item.name" :value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="出入库时间"> |
|||
<el-date-picker |
|||
v-model="listQuery.materiel_group" |
|||
type="daterange" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期"> |
|||
</el-date-picker> |
|||
</el-form-item> --> |
|||
|
|||
</el-form> |
|||
<div class="btn" style="text-align: center"> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-search" |
|||
@click="dosearch" |
|||
>查询</el-button |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-refresh" |
|||
@click="resetQuery" |
|||
>重置</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-table :data="logList" style="width: 100%" border> |
|||
<el-table-column |
|||
label="序号" |
|||
type="index" |
|||
width="80" |
|||
:index="indexMethod" |
|||
fixed |
|||
align="center" |
|||
/> |
|||
<el-table-column |
|||
align="center" |
|||
prop="batch_number" |
|||
label="批次号" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="materiel_no" |
|||
label="物料编号" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="materiel_name" |
|||
label="物料名称" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="materiel_group_text" |
|||
label="物料组" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="brand_name" |
|||
label="物料品牌" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="price" |
|||
label="物料单价" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="unit" |
|||
label="单位" |
|||
> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="pages"> |
|||
<div class="tit" /> |
|||
<pagination |
|||
v-show="logList.length > 0" |
|||
:total="total" |
|||
:page.sync="listQuery.page" |
|||
:limit.sync="listQuery.limit" |
|||
class="pagination" |
|||
@pagination="loadLogList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from "@/api/gfApi"; |
|||
import Pagination from "@/components/pagination"; |
|||
import ButtonBar from "@/components/ButtonBar"; |
|||
export default { |
|||
components: { |
|||
ButtonBar, |
|||
Pagination, |
|||
}, |
|||
data() { |
|||
return { |
|||
viewState: 1, |
|||
tabActiveName: "uplog", |
|||
index: "0", |
|||
isSearchShow: false, |
|||
searchxianshitit: "显示查询条件", |
|||
btndisabled: false, |
|||
btnList: [ |
|||
{ |
|||
type: "info", |
|||
size: "small", |
|||
icon: "cross", |
|||
btnKey: "doClose", |
|||
btnLabel: "关闭", |
|||
}, |
|||
], |
|||
logList: [], |
|||
outliArr: [{name:'出库',id:'1'},{name:'入库',id:'2'}], |
|||
listQuery: { |
|||
page: 1, |
|||
limit: 10, |
|||
out_storehouse_id:'', |
|||
inp_storehouse_id:'', |
|||
agent_id:'', |
|||
supplier_id:'', |
|||
customer_name:'', |
|||
batch_number:'', |
|||
status:'', |
|||
type:'', |
|||
materiel_no:'', |
|||
materiel_name:'', |
|||
materiel_group:'', |
|||
record_type:'', |
|||
}, |
|||
total: 0, |
|||
storehouse:[], |
|||
SupplierList:[], |
|||
Materia:{}, |
|||
AgentList:[], |
|||
OutInType:{}, |
|||
Status:{}, |
|||
QueryList: { |
|||
page: 1, |
|||
limit: 100, |
|||
}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
// 初始化按钮 |
|||
this.$refs["btnbar"].setButtonList(this.btnList); |
|||
}, |
|||
created() { |
|||
// 初始化变量 |
|||
this.init(); |
|||
this.getMaterialGroup(); |
|||
}, |
|||
methods: { |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow; |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = "隐藏查询条件"; |
|||
} else { |
|||
this.searchxianshitit = "显示查询条件"; |
|||
} |
|||
}, |
|||
dosearch() { |
|||
this.loadLogList(); |
|||
}, |
|||
resetQuery() { |
|||
this.listQuery = { |
|||
page: 1, |
|||
limit: 10, |
|||
out_storehouse_id:'', |
|||
inp_storehouse_id:'', |
|||
agent_id:'', |
|||
supplier_id:'', |
|||
customer_name:'', |
|||
batch_number:'', |
|||
status:'', |
|||
type:'', |
|||
materiel_no:'', |
|||
materiel_name:'', |
|||
materiel_group:'', |
|||
record_type:'', |
|||
}; |
|||
this.total = 0; |
|||
this.loadLogList(); |
|||
}, |
|||
// 右上角点击事件 |
|||
btnHandle(btnKey) { |
|||
switch (btnKey) { |
|||
case "doClose": // 关闭 |
|||
this.doClose(); |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}, |
|||
init() { |
|||
this.loadLogList(); |
|||
}, |
|||
loadLogList() { |
|||
req.getStockRecordList(this.listQuery).then((res) => { |
|||
if(res.code==200){ |
|||
this.total = res.data.data.count |
|||
this.logList = res.data.data.list |
|||
} |
|||
}); |
|||
}, |
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.listQuery.page - 1) * this.listQuery.limit; |
|||
var pageindex = index + 1 + pagestart; |
|||
return pageindex; |
|||
}, |
|||
resetState() { |
|||
this.viewState = 1; |
|||
}, |
|||
getMaterialGroup(){ |
|||
req.getMaterialGroup().then((res) => { |
|||
if(res.code==200){ |
|||
this.Materia=res.data.data |
|||
} |
|||
}); |
|||
req.getAgentList().then((res) => { |
|||
if(res.code==200){ |
|||
this.AgentList=res.data.data |
|||
} |
|||
}); |
|||
req.getStatus().then((res) => { |
|||
if(res.code==200){ |
|||
this.Status=res.data.data |
|||
} |
|||
}); |
|||
req.getWarehouse(this.QueryList).then((res) => { |
|||
if(res.code==200){ |
|||
this.storehouse = res.data.data.list |
|||
} |
|||
}); |
|||
req.getSupplierList(this.QueryList).then((res) => { |
|||
if(res.code==200){ |
|||
this.SupplierList = res.data.data.list |
|||
} |
|||
}); |
|||
req.getOutType().then((res) => { |
|||
if(res.code==200){ |
|||
var OutList=res.data.data |
|||
req.getInType().then((res) => { |
|||
if(res.code==200){ |
|||
var InList=res.data.data |
|||
this.OutInType=Object.assign({}, OutList, InList); |
|||
console.log(this.OutInType); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
doClose() { |
|||
this.$store.dispatch("tagsView/delView", this.$route); |
|||
this.$router.go(-1); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
</style> |
|||
|
|||
@ -1,223 +0,0 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div v-show="viewState == 1"> |
|||
<button-bar |
|||
ref="btnbar" |
|||
view-title="出入库合同管理" |
|||
:btndisabled="btndisabled" |
|||
@btnhandle="btnHandle" |
|||
/> |
|||
<div class="main-content"> |
|||
<div class="searchcon"> |
|||
<el-button size="small" class="searchbtn" @click="clicksearchShow"> |
|||
{{ searchxianshitit }} |
|||
</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form |
|||
ref="queryParams" |
|||
:model="listQuery" |
|||
:inline="true" |
|||
class="tab-header" |
|||
> |
|||
<el-form-item label="合同名称"> |
|||
<el-input |
|||
v-model="listQuery.contract_name" |
|||
maxlength="20" |
|||
placeholder="请输入合同名称" |
|||
class="brand_name" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="btn" style="text-align: center"> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-search" |
|||
@click="dosearch" |
|||
>查询</el-button |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-refresh" |
|||
@click="resetQuery" |
|||
>重置</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-table :data="logList" style="width: 100%" border> |
|||
<el-table-column |
|||
label="序号" |
|||
type="index" |
|||
width="80" |
|||
:index="indexMethod" |
|||
fixed |
|||
align="center" |
|||
/> |
|||
<el-table-column |
|||
align="center" |
|||
prop="contract_no" |
|||
label="合同编号" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="contract_name" |
|||
label="合同名称" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="contract_date" |
|||
label="签署时间" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="pic" |
|||
label="合同地址" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="create_time" |
|||
label="创建时间" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="ident_id" |
|||
label="关联id" |
|||
width="120" |
|||
> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="pages"> |
|||
<div class="tit" /> |
|||
<pagination |
|||
v-show="logList.length > 0" |
|||
:total="total" |
|||
:page.sync="listQuery.page" |
|||
:limit.sync="listQuery.limit" |
|||
class="pagination" |
|||
@pagination="loadLogList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from "@/api/gfApi"; |
|||
import Pagination from "@/components/pagination"; |
|||
import ButtonBar from "@/components/ButtonBar"; |
|||
export default { |
|||
components: { |
|||
ButtonBar, |
|||
Pagination, |
|||
}, |
|||
data() { |
|||
return { |
|||
viewState: 1, |
|||
tabActiveName: "uplog", |
|||
index: "0", |
|||
isSearchShow: false, |
|||
searchxianshitit: "显示查询条件", |
|||
btndisabled: false, |
|||
btnList: [ |
|||
{ |
|||
type: "info", |
|||
size: "small", |
|||
icon: "cross", |
|||
btnKey: "doClose", |
|||
btnLabel: "关闭", |
|||
}, |
|||
], |
|||
logList: [], |
|||
tempList: [], |
|||
listQuery: { |
|||
page: 1, |
|||
limit: 10, |
|||
contract_name:'' |
|||
}, |
|||
total: 0, |
|||
jmdListQuery: { |
|||
contractNumber: "", |
|||
date: "", |
|||
}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
// 初始化按钮 |
|||
this.$refs["btnbar"].setButtonList(this.btnList); |
|||
}, |
|||
created() { |
|||
// 初始化变量 |
|||
this.init(); |
|||
}, |
|||
methods: { |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow; |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = "隐藏查询条件"; |
|||
} else { |
|||
this.searchxianshitit = "显示查询条件"; |
|||
} |
|||
}, |
|||
dosearch() { |
|||
this.loadLogList(); |
|||
}, |
|||
resetQuery() { |
|||
this.listQuery = { |
|||
page: 1, |
|||
limit: 10, |
|||
contract_name:'' |
|||
}; |
|||
this.total = 0; |
|||
this.loadLogList(); |
|||
}, |
|||
// 右上角点击事件 |
|||
btnHandle(btnKey) { |
|||
switch (btnKey) { |
|||
case "doClose": // 关闭 |
|||
this.doClose(); |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}, |
|||
init() { |
|||
this.loadLogList(); |
|||
}, |
|||
loadLogList() { |
|||
req.getPurchaseContractList(this.listQuery).then((res) => { |
|||
if(res.code==200){ |
|||
this.total = res.data.data.count |
|||
this.logList = res.data.data.list |
|||
} |
|||
}); |
|||
}, |
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.listQuery.page - 1) * this.listQuery.limit; |
|||
var pageindex = index + 1 + pagestart; |
|||
return pageindex; |
|||
}, |
|||
resetState() { |
|||
this.viewState = 1; |
|||
}, |
|||
doClose() { |
|||
this.$store.dispatch("tagsView/delView", this.$route); |
|||
this.$router.go(-1); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
</style> |
|||
|
|||
@ -1,270 +0,0 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div v-show="viewState == 1"> |
|||
<button-bar |
|||
ref="btnbar" |
|||
view-title="库存管理" |
|||
:btndisabled="btndisabled" |
|||
@btnhandle="btnHandle" |
|||
/> |
|||
<div class="main-content"> |
|||
<div class="searchcon"> |
|||
<el-button size="small" class="searchbtn" @click="clicksearchShow"> |
|||
{{ searchxianshitit }} |
|||
</el-button> |
|||
<div v-show="listQuery" class="search"> |
|||
<el-form |
|||
ref="queryParams" |
|||
:model="listQuery" |
|||
:inline="true" |
|||
class="tab-header" |
|||
> |
|||
<el-form-item label="物料编号"> |
|||
<el-input |
|||
v-model="listQuery.materiel_no" |
|||
maxlength="20" |
|||
placeholder="请输入物料编号" |
|||
class="addinputw" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="物料名称"> |
|||
<el-input |
|||
v-model="listQuery.materiel_name" |
|||
maxlength="20" |
|||
placeholder="请输入物料名称" |
|||
class="addinputw" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="物料组"> |
|||
<el-select v-model="listQuery.materiel_group" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in Materia" :key="i" :label="item" :value="i"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="仓库名称"> |
|||
<el-select v-model="listQuery.storehouse_name" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in storehouse" :key="i" :label="item.storehouse_name" :value="item.storehouse_name"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="btn" style="text-align: center"> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-search" |
|||
@click="dosearch" |
|||
>查询</el-button |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-refresh" |
|||
@click="resetQuery" |
|||
>重置</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-table :data="logList" style="width: 100%" border> |
|||
<el-table-column |
|||
label="序号" |
|||
type="index" |
|||
width="80" |
|||
:index="indexMethod" |
|||
fixed |
|||
align="center" |
|||
/> |
|||
<el-table-column |
|||
align="center" |
|||
prop="storehouse_name" |
|||
label="仓库名称" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="materiel_group_text" |
|||
label="物料组" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="materiel_no" |
|||
label="物料编号" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="materiel_name" |
|||
width="100" |
|||
label="物料名称" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="brand_name" |
|||
label="物料品牌" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="price" |
|||
width="100" |
|||
label="物料单价" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="num" |
|||
label="库存数量" |
|||
> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="pages"> |
|||
<div class="tit" /> |
|||
<pagination |
|||
v-show="logList.length > 0" |
|||
:total="total" |
|||
:page.sync="listQuery.page" |
|||
:limit.sync="listQuery.limit" |
|||
class="pagination" |
|||
@pagination="loadLogList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from "@/api/gfApi"; |
|||
import Pagination from "@/components/pagination"; |
|||
import ButtonBar from "@/components/ButtonBar"; |
|||
export default { |
|||
components: { |
|||
ButtonBar, |
|||
Pagination, |
|||
}, |
|||
data() { |
|||
return { |
|||
viewState: 1, |
|||
tabActiveName: "uplog", |
|||
index: "0", |
|||
isSearchShow: false, |
|||
searchxianshitit: "显示查询条件", |
|||
btndisabled: false, |
|||
btnList: [ |
|||
{ |
|||
type: "info", |
|||
size: "small", |
|||
icon: "cross", |
|||
btnKey: "doClose", |
|||
btnLabel: "关闭", |
|||
}, |
|||
], |
|||
logList: [], |
|||
tempList: [], |
|||
listQuery: { |
|||
page: 1, |
|||
limit: 10, |
|||
materiel_group:'', |
|||
materiel_no:'', |
|||
materiel_name:'', |
|||
storehouse_name:'', |
|||
}, |
|||
total: 0, |
|||
Materia:{}, |
|||
storehouse:[], |
|||
QueryList: { |
|||
page: 1, |
|||
limit: 50, |
|||
}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
// 初始化按钮 |
|||
this.$refs["btnbar"].setButtonList(this.btnList); |
|||
}, |
|||
created() { |
|||
// 初始化变量 |
|||
this.init(); |
|||
this.getMaterialGroup(); |
|||
}, |
|||
methods: { |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow; |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = "隐藏查询条件"; |
|||
} else { |
|||
this.searchxianshitit = "显示查询条件"; |
|||
} |
|||
}, |
|||
dosearch() { |
|||
this.loadLogList(); |
|||
}, |
|||
resetQuery() { |
|||
this.listQuery = { |
|||
page: 1, |
|||
limit: 10, |
|||
materiel_group:'', |
|||
materiel_no:'', |
|||
materiel_name:'', |
|||
storehouse_name:'', |
|||
}; |
|||
this.total = 0; |
|||
this.loadLogList(); |
|||
}, |
|||
// 右上角点击事件 |
|||
btnHandle(btnKey) { |
|||
switch (btnKey) { |
|||
case "doClose": // 关闭 |
|||
this.doClose(); |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}, |
|||
init() { |
|||
this.loadLogList(); |
|||
}, |
|||
loadLogList() { |
|||
req.getInventoryList(this.listQuery).then((res) => { |
|||
if(res.code==200){ |
|||
this.total = res.data.data.count |
|||
this.logList = res.data.data.list |
|||
} |
|||
}); |
|||
}, |
|||
getMaterialGroup(){ |
|||
req.getMaterialGroup().then((res) => { |
|||
if(res.code==200){ |
|||
this.Materia=res.data.data |
|||
} |
|||
}); |
|||
req.getWarehouse(this.QueryList).then((res) => { |
|||
if(res.code==200){ |
|||
this.storehouse = res.data.data.list |
|||
} |
|||
}); |
|||
}, |
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.listQuery.page - 1) * this.listQuery.limit; |
|||
var pageindex = index + 1 + pagestart; |
|||
return pageindex; |
|||
}, |
|||
resetState() { |
|||
this.viewState = 1; |
|||
}, |
|||
doClose() { |
|||
this.$store.dispatch("tagsView/delView", this.$route); |
|||
this.$router.go(-1); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
</style> |
|||
|
|||
@ -1,293 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="tab-header webtop"> |
|||
<div>{{ viewTitle }}</div> |
|||
<div> |
|||
<el-button type="info" size="small" @click="handleReturn()" |
|||
>返回</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
<div class="listconadd"> |
|||
<el-form ref="dataForm" :model="purchaseForm" label-position="top" label-width="190px" class="formadd"> |
|||
<div class="title" style="display: flex;align-items: center;justify-content: space-between;height:40px"> |
|||
<div style="margin-left: 15px;">主体信息</div> |
|||
</div> |
|||
<el-row> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">出库仓库地址：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item" prop="purchaseNo"> |
|||
<span>{{purchaseForm.storehouse_name}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">批次编号：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{purchaseForm.batch_number}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">关联批次号：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item prop="supplier" class="trightb_item"> |
|||
<span>{{purchaseForm.note}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">出库类型：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{purchaseForm.type_text}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
|
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">合同编号：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{purchaseForm.contract_no}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">出库时间：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{purchaseForm.happen_time}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">应付金额：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{purchaseForm.price}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">实付金额：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{purchaseForm.actual_price}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">目前类型：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{purchaseForm.d}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">出库目标：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{purchaseForm.remarks}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">备注：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{purchaseForm.d}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">其他附件：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{purchaseForm.remarks}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">钉钉审批记录：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="20"> |
|||
<el-form-item class="trightb_item"> |
|||
<div class="Image" v-for="(item,i) in msg" :key="i"> |
|||
<div class="ImageX"> |
|||
<img v-if="item" :src=item alt="" @click="lookImg(item)"> |
|||
</div> |
|||
</div> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
<el-dialog :visible.sync="dialogVisible" title="查看图片"> |
|||
<img width="100%" :src="dialogImageUrl" alt=""> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
viewTitle: "出库信息", |
|||
purchaseForm: { |
|||
|
|||
}, |
|||
msg:[], |
|||
dialogVisible:false, |
|||
dialogImageUrl:'', |
|||
} |
|||
}, |
|||
mounted() { |
|||
}, |
|||
created() {}, |
|||
methods: { |
|||
handleReturn() { |
|||
this.$emit("loadLogList"); |
|||
this.$emit("doback"); |
|||
this.msg=[] |
|||
}, |
|||
showInfo(res) { |
|||
if(res){ |
|||
const data=res.data.data |
|||
this.purchaseForm=data |
|||
this.msg=data.file.ding |
|||
console.log(this.msg); |
|||
} |
|||
|
|||
}, |
|||
lookImg(item) { |
|||
this.dialogVisible = true |
|||
this.dialogImageUrl = item |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/deep/ .el-collapse-item__header { |
|||
height: 40px; |
|||
font-weight: bold; |
|||
font-size: 16px; |
|||
text-align: left; |
|||
color: #ffffff; |
|||
background-color: #0294d7; |
|||
} |
|||
|
|||
/deep/ .el-collapse-item__content { |
|||
padding-bottom: 0; |
|||
} |
|||
.trightb { |
|||
display: flex; |
|||
align-items: center; |
|||
text-align: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.trightb_item { |
|||
padding-top: 5px; |
|||
} |
|||
|
|||
.span { |
|||
margin-left: 50px; |
|||
font-size: 15px; |
|||
font-weight: 400; |
|||
} |
|||
.formadd { |
|||
padding: 10px 40px 0 40px; |
|||
font-size: 16px; |
|||
} |
|||
.formadd .title { |
|||
font-weight: bold; |
|||
font-size: 16px; |
|||
background-color: #0294d7; |
|||
text-align: left; |
|||
color: #ffffff; |
|||
} |
|||
.first_row{ |
|||
border-top: 1px solid #e0e3eb; |
|||
} |
|||
.formadd .el-row { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
border-left: 1px solid #e0e3eb; |
|||
} |
|||
.formadd .el-row .el-col { |
|||
border-right: 1px solid #e0e3eb; |
|||
border-bottom: 1px solid #e0e3eb; |
|||
padding: 0 15px; |
|||
min-height: 42px; |
|||
line-height: 1; |
|||
} |
|||
.formadd .el-row .el-col .el-form-item { |
|||
margin-bottom: 0; |
|||
line-height: 42px; |
|||
} |
|||
.addinputw { |
|||
width: 80%; |
|||
line-height: 42px; |
|||
} |
|||
.el-input__inner { |
|||
height: 36px; |
|||
} |
|||
.trightb_item .ImageX{ |
|||
width: 150px; |
|||
height: 100px; |
|||
float: left; |
|||
margin: 10px 20px 40px 10px; |
|||
} |
|||
.trightb_item .ImageX img{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
@ -1,330 +0,0 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div v-show="viewState == 1"> |
|||
<button-bar |
|||
ref="btnbar" |
|||
view-title="出库申请" |
|||
:btndisabled="btndisabled" |
|||
@btnhandle="btnHandle" |
|||
/> |
|||
<div class="main-content"> |
|||
<div class="searchcon"> |
|||
<el-button size="small" class="searchbtn" @click="clicksearchShow"> |
|||
{{ searchxianshitit }} |
|||
</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form |
|||
ref="queryParams" |
|||
:model="listQuery" |
|||
:inline="true" |
|||
class="tab-header" |
|||
> |
|||
<el-form-item label="出库仓库"> |
|||
<el-select v-model="listQuery.storehouse_id" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in storehouse" :key="i" :label="item.storehouse_name" :value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="入库仓库"> |
|||
<el-select v-model="listQuery.out_storehouse_id" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in storehouse" :key="i" :label="item.storehouse_name" :value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="供应商"> |
|||
<el-select v-model="listQuery.supplier_id" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in SupplierList" :key="i" :label="item.supplier_name" :value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="代理商"> |
|||
<el-select v-model="listQuery.agent_id" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in AgentList" :key="i" :label="item.name" :value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="客户名称"> |
|||
<el-input |
|||
v-model="listQuery.customer_name" |
|||
maxlength="20" |
|||
placeholder="请输入客户名称" |
|||
class="addinputw" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="批次号"> |
|||
<el-input |
|||
v-model="listQuery.batch_number" |
|||
maxlength="20" |
|||
placeholder="请输入批次号" |
|||
class="addinputw" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="审核状态"> |
|||
<el-select v-model="listQuery.status" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in Status" :key="i" :label="item.name" :value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="出库类型"> |
|||
<el-select v-model="listQuery.type" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in OutList" :key="i" :label="item" :value="i"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="btn" style="text-align: center"> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-search" |
|||
@click="dosearch" |
|||
>查询</el-button |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-refresh" |
|||
@click="resetQuery" |
|||
>重置</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-table :data="logList" style="width: 100%" border> |
|||
<el-table-column |
|||
label="序号" |
|||
type="index" |
|||
width="80" |
|||
:index="indexMethod" |
|||
fixed |
|||
align="center" |
|||
/> |
|||
<el-table-column |
|||
align="center" |
|||
prop="storehouse_name" |
|||
label="出库仓库名称" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="batch_number" |
|||
label="批次号" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="type_text" |
|||
label="出库类型" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="price" |
|||
label="实付金额" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="happen_time" |
|||
label="出库时间" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="admin_name" |
|||
label="经办人" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="status_text" |
|||
label="状态" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column label="操作" width="80" align="center" > |
|||
<template slot-scope="scope"> |
|||
<el-button size="mini" type="primary" @click="handle(scope.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="pages"> |
|||
<div class="tit" /> |
|||
<pagination |
|||
v-show="logList.length > 0" |
|||
:total="total" |
|||
:page.sync="listQuery.page" |
|||
:limit.sync="listQuery.limit" |
|||
class="pagination" |
|||
@pagination="loadLogList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<LookId v-show="viewState ==3" ref="divInfo" @doback="resetState" @reloadlist="loadLogList" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from "@/api/gfApi"; |
|||
import Pagination from "@/components/pagination"; |
|||
import ButtonBar from "@/components/ButtonBar"; |
|||
import LookId from "./LookId.vue"; |
|||
export default { |
|||
components: { |
|||
ButtonBar, |
|||
Pagination, |
|||
LookId |
|||
}, |
|||
data() { |
|||
return { |
|||
viewState: 1, |
|||
tabActiveName: "uplog", |
|||
index: "0", |
|||
isSearchShow: false, |
|||
searchxianshitit: "显示查询条件", |
|||
btndisabled: false, |
|||
btnList: [ |
|||
{ |
|||
type: "info", |
|||
size: "small", |
|||
icon: "cross", |
|||
btnKey: "doClose", |
|||
btnLabel: "关闭", |
|||
}, |
|||
], |
|||
logList: [], |
|||
tempList: [], |
|||
listQuery: { |
|||
page: 1, |
|||
limit: 10, |
|||
storehouse_id:'', |
|||
out_storehouse_id:'', |
|||
supplier_id:'', |
|||
agent_id:'', |
|||
customer_name:'', |
|||
batch_number:'', |
|||
type:'', |
|||
status:'', |
|||
}, |
|||
total: 0, |
|||
OutList:{}, |
|||
SupplierList:[], |
|||
storehouse:[], |
|||
Status:[], |
|||
AgentList:[], |
|||
QueryList: { |
|||
page: 1, |
|||
limit: 100 |
|||
}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
// 初始化按钮 |
|||
this.$refs["btnbar"].setButtonList(this.btnList); |
|||
}, |
|||
created() { |
|||
// 初始化变量 |
|||
this.init(); |
|||
this.getMaterialGroup(); |
|||
}, |
|||
methods: { |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow; |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = "隐藏查询条件"; |
|||
} else { |
|||
this.searchxianshitit = "显示查询条件"; |
|||
} |
|||
}, |
|||
dosearch() { |
|||
this.loadLogList(); |
|||
}, |
|||
resetQuery() { |
|||
this.listQuery = { |
|||
page: 1, |
|||
limit: 10, |
|||
storehouse_id:'', |
|||
out_storehouse_id:'', |
|||
supplier_id:'', |
|||
agent_id:'', |
|||
customer_name:'', |
|||
batch_number:'', |
|||
type:'', |
|||
status:'', |
|||
}; |
|||
this.total = 0; |
|||
this.loadLogList(); |
|||
}, |
|||
// 右上角点击事件 |
|||
btnHandle(btnKey) { |
|||
switch (btnKey) { |
|||
case "doClose": // 关闭 |
|||
this.doClose(); |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}, |
|||
init() { |
|||
this.loadLogList(); |
|||
}, |
|||
loadLogList() { |
|||
req.getOutStock(this.listQuery).then((res) => { |
|||
if(res.code==200){ |
|||
this.total = res.data.data.count |
|||
this.logList = res.data.data.list |
|||
} |
|||
}); |
|||
}, |
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.listQuery.page - 1) * this.listQuery.limit; |
|||
var pageindex = index + 1 + pagestart; |
|||
return pageindex; |
|||
}, |
|||
handle(row){ |
|||
req.getOutStockInfo(row.id).then((res)=>{ |
|||
if(res.code==200){ |
|||
this.viewState = 3 |
|||
this.$refs['divInfo'].showInfo(res) |
|||
} |
|||
}) |
|||
}, |
|||
getMaterialGroup(){ |
|||
req.getAgentList().then((res) => { |
|||
if(res.code==200){ |
|||
this.AgentList=res.data.data |
|||
} |
|||
}); |
|||
req.getStatus().then((res) => { |
|||
if(res.code==200){ |
|||
this.Status=res.data.data |
|||
} |
|||
}); |
|||
req.getWarehouse(this.QueryList).then((res) => { |
|||
if(res.code==200){ |
|||
this.storehouse = res.data.data.list |
|||
} |
|||
}); |
|||
req.getSupplierList(this.QueryList).then((res) => { |
|||
if(res.code==200){ |
|||
this.SupplierList = res.data.data.list |
|||
} |
|||
}); |
|||
req.getOutType().then((res) => { |
|||
if(res.code==200){ |
|||
this.OutList=res.data.data |
|||
} |
|||
}); |
|||
}, |
|||
resetState() { |
|||
this.viewState = 1; |
|||
}, |
|||
doClose() { |
|||
this.$store.dispatch("tagsView/delView", this.$route); |
|||
this.$router.go(-1); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
</style> |
|||
|
|||
@ -1,319 +0,0 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div v-show="viewState == 1"> |
|||
<button-bar |
|||
ref="btnbar" |
|||
view-title="出库记录列表" |
|||
:btndisabled="btndisabled" |
|||
@btnhandle="btnHandle" |
|||
/> |
|||
<div class="main-content"> |
|||
<div class="searchcon"> |
|||
<el-button size="small" class="searchbtn" @click="clicksearchShow"> |
|||
{{ searchxianshitit }} |
|||
</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form |
|||
ref="queryParams" |
|||
:model="listQuery" |
|||
:inline="true" |
|||
class="tab-header" |
|||
> |
|||
<el-form-item label="仓库名称"> |
|||
<el-select v-model="listQuery.out_storehouse_id" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in storehouse" :key="i" :label="item.storehouse_name" :value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="批次号"> |
|||
<el-input |
|||
v-model="listQuery.batch_number" |
|||
maxlength="20" |
|||
placeholder="请输入批次号" |
|||
class="addinputw" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="物料编码"> |
|||
<el-input |
|||
v-model="listQuery.materiel_no" |
|||
maxlength="20" |
|||
placeholder="请输入物料编码" |
|||
class="addinputw" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="开始时间"> |
|||
<el-date-picker v-model="listQuery.start_happen_time" type="date" style="width:100%" value-format="yyyy-MM-dd" |
|||
placeholder="选择日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="解决时间"> |
|||
<el-date-picker v-model="listQuery.end_happen_time" type="date" style="width:100%" value-format="yyyy-MM-dd" |
|||
placeholder="选择日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="出库类型"> |
|||
<el-select v-model="listQuery.type" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in Materia" :key="i" :label="item" :value="i"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="物料名称"> |
|||
<el-input |
|||
v-model="listQuery.materiel_name" |
|||
maxlength="20" |
|||
placeholder="请输入物料名称" |
|||
class="addinputw" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="btn" style="text-align: center"> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-search" |
|||
@click="dosearch" |
|||
>查询</el-button |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-refresh" |
|||
@click="resetQuery" |
|||
>重置</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-table :data="logList" style="width: 100%" border> |
|||
<el-table-column |
|||
label="序号" |
|||
type="index" |
|||
width="80" |
|||
:index="indexMethod" |
|||
fixed |
|||
align="center" |
|||
/> |
|||
<el-table-column |
|||
align="center" |
|||
prop="storehouse_name" |
|||
label="仓库名称" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="materiel_no" |
|||
label="物料编号" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="materiel_name" |
|||
label="物料名称" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="brand_name" |
|||
label="物料品牌" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="price" |
|||
label="物料单价" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="batch_number" |
|||
label="批次号" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="materiel_group_text" |
|||
label="物料规格" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="num" |
|||
width="100" |
|||
label="出货数量" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="actual_price" |
|||
label="总价记录" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="unit" |
|||
width="60" |
|||
label="物料单位" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
width="80" |
|||
prop="admin_name" |
|||
label="经办人" |
|||
> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="pages"> |
|||
<div class="tit" /> |
|||
<pagination |
|||
v-show="logList.length > 0" |
|||
:total="total" |
|||
:page.sync="listQuery.page" |
|||
:limit.sync="listQuery.limit" |
|||
class="pagination" |
|||
@pagination="loadLogList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from "@/api/gfApi"; |
|||
import Pagination from "@/components/pagination"; |
|||
import ButtonBar from "@/components/ButtonBar"; |
|||
export default { |
|||
components: { |
|||
ButtonBar, |
|||
Pagination, |
|||
}, |
|||
data() { |
|||
return { |
|||
viewState: 1, |
|||
tabActiveName: "uplog", |
|||
index: "0", |
|||
isSearchShow: false, |
|||
searchxianshitit: "显示查询条件", |
|||
btndisabled: false, |
|||
btnList: [ |
|||
{ |
|||
type: "info", |
|||
size: "small", |
|||
icon: "cross", |
|||
btnKey: "doClose", |
|||
btnLabel: "关闭", |
|||
}, |
|||
], |
|||
logList: [], |
|||
storehouse: [], |
|||
Materia: [], |
|||
listQuery: { |
|||
page: 1, |
|||
limit: 10, |
|||
out_storehouse_id:'', |
|||
batch_number:'', |
|||
start_happen_time:'', |
|||
end_happen_time:'', |
|||
materiel_no:'', |
|||
materiel_name:'', |
|||
type:'', |
|||
}, |
|||
total: 0, |
|||
QueryList: { |
|||
page: 1, |
|||
limit: 50, |
|||
}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
// 初始化按钮 |
|||
this.$refs["btnbar"].setButtonList(this.btnList); |
|||
}, |
|||
created() { |
|||
// 初始化变量 |
|||
this.init(); |
|||
this.getMaterialGroup(); |
|||
}, |
|||
methods: { |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow; |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = "隐藏查询条件"; |
|||
} else { |
|||
this.searchxianshitit = "显示查询条件"; |
|||
} |
|||
}, |
|||
dosearch() { |
|||
this.loadLogList(); |
|||
}, |
|||
resetQuery() { |
|||
this.listQuery = { |
|||
page: 1, |
|||
limit: 10, |
|||
out_storehouse_id:'', |
|||
batch_number:'', |
|||
start_happen_time:'', |
|||
end_happen_time:'', |
|||
materiel_no:'', |
|||
materiel_name:'', |
|||
type:'' |
|||
}; |
|||
this.total = 0; |
|||
this.loadLogList(); |
|||
}, |
|||
// 右上角点击事件 |
|||
btnHandle(btnKey) { |
|||
switch (btnKey) { |
|||
case "doClose": // 关闭 |
|||
this.doClose(); |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}, |
|||
init() { |
|||
this.loadLogList(); |
|||
}, |
|||
loadLogList() { |
|||
req.getOutStockMaterielList(this.listQuery).then((res) => { |
|||
if(res.code==200){ |
|||
this.total = res.data.data.count |
|||
this.logList = res.data.data.list |
|||
} |
|||
}); |
|||
}, |
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.listQuery.page - 1) * this.listQuery.limit; |
|||
var pageindex = index + 1 + pagestart; |
|||
return pageindex; |
|||
}, |
|||
resetState() { |
|||
this.viewState = 1; |
|||
}, |
|||
getMaterialGroup(){ |
|||
req.getOutType().then((res) => { |
|||
if(res.code==200){ |
|||
this.Materia=res.data.data |
|||
} |
|||
}); |
|||
req.getWarehouse(this.QueryList).then((res) => { |
|||
if(res.code==200){ |
|||
this.storehouse = res.data.data.list |
|||
} |
|||
}); |
|||
}, |
|||
doClose() { |
|||
this.$store.dispatch("tagsView/delView", this.$route); |
|||
this.$router.go(-1); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
</style> |
|||
|
|||
@ -1,309 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="tab-header webtop"> |
|||
<div>{{ viewTitle }}</div> |
|||
<div> |
|||
<el-button type="info" size="small" @click="handleReturn()" |
|||
>返回</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
<div class="listconadd"> |
|||
<el-form ref="dataForm" :model="purchaseForm" label-position="top" label-width="190px" class="formadd"> |
|||
<div class="title" style="display: flex;align-items: center;justify-content: space-between;height:40px"> |
|||
<div style="margin-left: 15px;">主体信息</div> |
|||
</div> |
|||
<el-row> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">入库仓库地址：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item" prop="purchaseNo"> |
|||
<span>{{purchaseForm.storehouse_name}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">批次编号：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{purchaseForm.batch_number}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">关联批次号：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item prop="supplier" class="trightb_item"> |
|||
<span>{{purchaseForm.note}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">入库类型：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{purchaseForm.type_text}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
|
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">合同编号：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{purchaseForm.contract_no}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">入库时间：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{purchaseForm.happen_time}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">应付金额：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{purchaseForm.price}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">实付金额：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{purchaseForm.actual_price}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">目前类型：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{purchaseForm.d}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">目标id：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{purchaseForm.remarks}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">备注：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{purchaseForm.d}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">其他附件：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{purchaseForm.remarks}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">供货单：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="20"> |
|||
<el-form-item class="trightb_item"> |
|||
<div class="Image" v-for="(item,i) in msgs" :key="i"> |
|||
<div class="ImageX"> |
|||
<img v-if="item" :src=item alt="" @click="lookImg(item)"> |
|||
</div> |
|||
</div> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">供货单：</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="20"> |
|||
<el-form-item class="trightb_item"> |
|||
<div class="Image" v-for="(item,i) in msg" :key="i"> |
|||
<div class="ImageX"> |
|||
<img v-if="item" :src=item alt="" @click="lookImg(item)"> |
|||
</div> |
|||
</div> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
<el-dialog :visible.sync="dialogVisible" title="查看图片"> |
|||
<img width="100%" :src="dialogImageUrl" alt=""> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
viewTitle: "入库信息", |
|||
purchaseForm: { |
|||
|
|||
}, |
|||
msg:[], |
|||
msgs:[], |
|||
dialogVisible:false, |
|||
dialogImageUrl:'', |
|||
} |
|||
}, |
|||
mounted() { |
|||
}, |
|||
created() {}, |
|||
methods: { |
|||
handleReturn() { |
|||
this.$emit("loadLogList"); |
|||
this.$emit("doback"); |
|||
this.msg=[] |
|||
}, |
|||
showInfo(res) { |
|||
if(res){ |
|||
const data=res.data.data |
|||
this.purchaseForm=data |
|||
this.msg=data.file.bill |
|||
} |
|||
|
|||
}, |
|||
lookImg(item) { |
|||
this.dialogVisible = true |
|||
this.dialogImageUrl = item |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/deep/ .el-collapse-item__header { |
|||
height: 40px; |
|||
font-weight: bold; |
|||
font-size: 16px; |
|||
text-align: left; |
|||
color: #ffffff; |
|||
background-color: #0294d7; |
|||
} |
|||
|
|||
/deep/ .el-collapse-item__content { |
|||
padding-bottom: 0; |
|||
} |
|||
.trightb { |
|||
display: flex; |
|||
align-items: center; |
|||
text-align: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.trightb_item { |
|||
padding-top: 5px; |
|||
} |
|||
|
|||
.span { |
|||
margin-left: 50px; |
|||
font-size: 15px; |
|||
font-weight: 400; |
|||
} |
|||
.formadd { |
|||
padding: 10px 40px 0 40px; |
|||
font-size: 16px; |
|||
} |
|||
.formadd .title { |
|||
font-weight: bold; |
|||
font-size: 16px; |
|||
background-color: #0294d7; |
|||
text-align: left; |
|||
color: #ffffff; |
|||
} |
|||
.first_row{ |
|||
border-top: 1px solid #e0e3eb; |
|||
} |
|||
.formadd .el-row { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
border-left: 1px solid #e0e3eb; |
|||
} |
|||
.formadd .el-row .el-col { |
|||
border-right: 1px solid #e0e3eb; |
|||
border-bottom: 1px solid #e0e3eb; |
|||
padding: 0 15px; |
|||
min-height: 42px; |
|||
line-height: 1; |
|||
} |
|||
.formadd .el-row .el-col .el-form-item { |
|||
margin-bottom: 0; |
|||
line-height: 42px; |
|||
} |
|||
.addinputw { |
|||
width: 80%; |
|||
line-height: 42px; |
|||
} |
|||
.el-input__inner { |
|||
height: 36px; |
|||
} |
|||
.trightb_item .ImageX{ |
|||
width: 150px; |
|||
height: 100px; |
|||
float: left; |
|||
margin: 10px 20px 40px 10px; |
|||
} |
|||
.trightb_item .ImageX img{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
@ -1,336 +0,0 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div v-show="viewState == 1"> |
|||
<button-bar |
|||
ref="btnbar" |
|||
view-title="入库申请" |
|||
:btndisabled="btndisabled" |
|||
@btnhandle="btnHandle" |
|||
/> |
|||
<div class="main-content"> |
|||
<div class="searchcon"> |
|||
<el-button size="small" class="searchbtn" @click="clicksearchShow"> |
|||
{{ searchxianshitit }} |
|||
</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form |
|||
ref="queryParams" |
|||
:model="listQuery" |
|||
:inline="true" |
|||
class="tab-header" |
|||
> |
|||
<el-form-item label="入库仓库"> |
|||
<el-select v-model="listQuery.storehouse_id" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in storehouse" :key="i" :label="item.storehouse_name" :value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="来源仓库"> |
|||
<el-select v-model="listQuery.inp_storehouse_id" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in storehouse" :key="i" :label="item.storehouse_name" :value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="供应商"> |
|||
<el-select v-model="listQuery.supplier_id" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in SupplierList" :key="i" :label="item.supplier_name" :value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="代理商"> |
|||
<el-select v-model="listQuery.agent_id" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in AgentList" :key="i" :label="item.name" :value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="客户名称"> |
|||
<el-input |
|||
v-model="listQuery.customer_name" |
|||
maxlength="20" |
|||
placeholder="请输入客户名称" |
|||
class="addinputw" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="批次号"> |
|||
<el-input |
|||
v-model="listQuery.batch_number" |
|||
maxlength="20" |
|||
placeholder="请输入批次号" |
|||
class="addinputw" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="审核状态"> |
|||
<el-select v-model="listQuery.status" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in Status" :key="i" :label="item.name" :value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="出库类型"> |
|||
<el-select v-model="listQuery.type" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in InList" :key="i" :label="item" :value="i"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="btn" style="text-align: center"> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-search" |
|||
@click="dosearch" |
|||
>查询</el-button |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-refresh" |
|||
@click="resetQuery" |
|||
>重置</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-table :data="logList" style="width: 100%" border> |
|||
<el-table-column |
|||
label="序号" |
|||
type="index" |
|||
width="80" |
|||
:index="indexMethod" |
|||
fixed |
|||
align="center" |
|||
/> |
|||
<el-table-column |
|||
align="center" |
|||
prop="storehouse_name" |
|||
label="入库仓库名称" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="batch_number" |
|||
label="批次号" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="contract_no" |
|||
label="合同号" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="type_text" |
|||
label="入库类型" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="price" |
|||
label="实付金额" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="happen_time" |
|||
label="入库时间" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="admin_name" |
|||
label="经办人" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="status_text" |
|||
label="状态" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column label="操作" width="80" align="center" > |
|||
<template slot-scope="scope"> |
|||
<el-button size="mini" type="primary" @click="handle(scope.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="pages"> |
|||
<div class="tit" /> |
|||
<pagination |
|||
v-show="logList.length > 0" |
|||
:total="total" |
|||
:page.sync="listQuery.page" |
|||
:limit.sync="listQuery.limit" |
|||
class="pagination" |
|||
@pagination="loadLogList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<LookId v-show="viewState ==3" ref="divInfo" @doback="resetState" @reloadlist="loadLogList" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from "@/api/gfApi"; |
|||
import Pagination from "@/components/pagination"; |
|||
import ButtonBar from "@/components/ButtonBar"; |
|||
import LookId from "./LookId.vue"; |
|||
export default { |
|||
components: { |
|||
ButtonBar, |
|||
Pagination, |
|||
LookId |
|||
}, |
|||
data() { |
|||
return { |
|||
viewState: 1, |
|||
tabActiveName: "uplog", |
|||
index: "0", |
|||
isSearchShow: false, |
|||
searchxianshitit: "显示查询条件", |
|||
btndisabled: false, |
|||
btnList: [ |
|||
{ |
|||
type: "info", |
|||
size: "small", |
|||
icon: "cross", |
|||
btnKey: "doClose", |
|||
btnLabel: "关闭", |
|||
}, |
|||
], |
|||
logList: [], |
|||
tempList: [], |
|||
InList:{}, |
|||
SupplierList:[], |
|||
storehouse:[], |
|||
Status:[], |
|||
AgentList:[], |
|||
listQuery: { |
|||
page: 1, |
|||
limit: 10, |
|||
storehouse_id:'', |
|||
inp_storehouse_id:'', |
|||
supplier_id:'', |
|||
agent_id:'', |
|||
customer_name:'', |
|||
batch_number:'', |
|||
type:'', |
|||
status:'', |
|||
}, |
|||
total: 0, |
|||
QueryList: { |
|||
page: 1, |
|||
limit: 100 |
|||
}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
// 初始化按钮 |
|||
this.$refs["btnbar"].setButtonList(this.btnList); |
|||
}, |
|||
created() { |
|||
// 初始化变量 |
|||
this.init(); |
|||
this.getMaterialGroup(); |
|||
}, |
|||
methods: { |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow; |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = "隐藏查询条件"; |
|||
} else { |
|||
this.searchxianshitit = "显示查询条件"; |
|||
} |
|||
}, |
|||
dosearch() { |
|||
this.loadLogList(); |
|||
}, |
|||
resetQuery() { |
|||
this.listQuery = { |
|||
page: 1, |
|||
limit: 10, |
|||
storehouse_id:'', |
|||
inp_storehouse_id:'', |
|||
supplier_id:'', |
|||
agent_id:'', |
|||
customer_name:'', |
|||
batch_number:'', |
|||
type:'', |
|||
status:'', |
|||
}; |
|||
this.total = 0; |
|||
this.loadLogList(); |
|||
}, |
|||
// 右上角点击事件 |
|||
btnHandle(btnKey) { |
|||
switch (btnKey) { |
|||
case "doClose": // 关闭 |
|||
this.doClose(); |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}, |
|||
init() { |
|||
this.loadLogList(); |
|||
}, |
|||
loadLogList() { |
|||
req.getInStockList(this.listQuery).then((res) => { |
|||
if(res.code==200){ |
|||
this.total = res.data.data.count |
|||
this.logList = res.data.data.list |
|||
} |
|||
}); |
|||
}, |
|||
handle(row){ |
|||
req.getInStockInfo(row.id).then((res)=>{ |
|||
if(res.code==200){ |
|||
this.viewState = 3 |
|||
this.$refs['divInfo'].showInfo(res) |
|||
} |
|||
}) |
|||
}, |
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.listQuery.page - 1) * this.listQuery.limit; |
|||
var pageindex = index + 1 + pagestart; |
|||
return pageindex; |
|||
}, |
|||
getMaterialGroup(){ |
|||
req.getAgentList().then((res) => { |
|||
if(res.code==200){ |
|||
this.AgentList=res.data.data |
|||
} |
|||
}); |
|||
req.getStatus().then((res) => { |
|||
if(res.code==200){ |
|||
this.Status=res.data.data |
|||
} |
|||
}); |
|||
req.getWarehouse(this.QueryList).then((res) => { |
|||
if(res.code==200){ |
|||
this.storehouse = res.data.data.list |
|||
} |
|||
}); |
|||
req.getSupplierList(this.QueryList).then((res) => { |
|||
if(res.code==200){ |
|||
this.SupplierList = res.data.data.list |
|||
} |
|||
}); |
|||
req.getInType().then((res) => { |
|||
if(res.code==200){ |
|||
this.InList=res.data.data |
|||
} |
|||
}); |
|||
}, |
|||
resetState() { |
|||
this.viewState = 1; |
|||
}, |
|||
doClose() { |
|||
this.$store.dispatch("tagsView/delView", this.$route); |
|||
this.$router.go(-1); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
</style> |
|||
|
|||
@ -1,320 +0,0 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div v-show="viewState == 1"> |
|||
<button-bar |
|||
ref="btnbar" |
|||
view-title="入库记录列表" |
|||
:btndisabled="btndisabled" |
|||
@btnhandle="btnHandle" |
|||
/> |
|||
<div class="main-content"> |
|||
<div class="searchcon"> |
|||
<el-button size="small" class="searchbtn" @click="clicksearchShow"> |
|||
{{ searchxianshitit }} |
|||
</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form |
|||
ref="queryParams" |
|||
:model="listQuery" |
|||
:inline="true" |
|||
class="tab-header" |
|||
> |
|||
<el-form-item label="仓库名称"> |
|||
<el-select v-model="listQuery.inp_storehouse_id" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in storehouse" :key="i" :label="item.storehouse_name" :value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="批次号"> |
|||
<el-input |
|||
v-model="listQuery.batch_number" |
|||
maxlength="20" |
|||
placeholder="请输入批次号" |
|||
class="addinputw" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="物料编码"> |
|||
<el-input |
|||
v-model="listQuery.materiel_no" |
|||
maxlength="20" |
|||
placeholder="请输入物料编码" |
|||
class="addinputw" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="开始时间"> |
|||
<el-date-picker v-model="listQuery.start_happen_time" type="date" style="width:100%" value-format="yyyy-MM-dd" |
|||
placeholder="选择日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="解决时间"> |
|||
<el-date-picker v-model="listQuery.end_happen_time" type="date" style="width:100%" value-format="yyyy-MM-dd" |
|||
placeholder="选择日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="出库类型"> |
|||
<el-select v-model="listQuery.type" placeholder="请选择" clearable > |
|||
<el-option v-for="(item,i) in Materia" :key="i" :label="item" :value="i"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="物料名称"> |
|||
<el-input |
|||
v-model="listQuery.materiel_name" |
|||
maxlength="20" |
|||
placeholder="请输入物料名称" |
|||
class="addinputw" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="btn" style="text-align: center"> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-search" |
|||
@click="dosearch" |
|||
>查询</el-button |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-refresh" |
|||
@click="resetQuery" |
|||
>重置</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-table :data="logList" style="width: 100%" border> |
|||
<el-table-column |
|||
label="序号" |
|||
type="index" |
|||
width="80" |
|||
:index="indexMethod" |
|||
fixed |
|||
align="center" |
|||
/> |
|||
<el-table-column |
|||
align="center" |
|||
prop="storehouse_name" |
|||
label="仓库名称" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="materiel_no" |
|||
label="物料编号" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="materiel_name" |
|||
label="物料名称" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="brand_name" |
|||
label="物料品牌" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="price" |
|||
label="物料单价" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="batch_number" |
|||
label="批次号" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="materiel_group_text" |
|||
label="物料规格" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="num" |
|||
width="100" |
|||
label="入货数量" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="actual_price" |
|||
label="总价记录" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="unit" |
|||
width="60" |
|||
label="物料单位" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
width="80" |
|||
prop="admin_name" |
|||
label="经办人" |
|||
> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="pages"> |
|||
<div class="tit" /> |
|||
<pagination |
|||
v-show="logList.length > 0" |
|||
:total="total" |
|||
:page.sync="listQuery.page" |
|||
:limit.sync="listQuery.limit" |
|||
class="pagination" |
|||
@pagination="loadLogList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from "@/api/gfApi"; |
|||
import Pagination from "@/components/pagination"; |
|||
import ButtonBar from "@/components/ButtonBar"; |
|||
export default { |
|||
components: { |
|||
ButtonBar, |
|||
Pagination, |
|||
}, |
|||
data() { |
|||
return { |
|||
viewState: 1, |
|||
tabActiveName: "uplog", |
|||
index: "0", |
|||
isSearchShow: false, |
|||
searchxianshitit: "显示查询条件", |
|||
btndisabled: false, |
|||
btnList: [ |
|||
{ |
|||
type: "info", |
|||
size: "small", |
|||
icon: "cross", |
|||
btnKey: "doClose", |
|||
btnLabel: "关闭", |
|||
}, |
|||
], |
|||
logList: [], |
|||
tempList: [], |
|||
Materia:{}, |
|||
storehouse:[], |
|||
listQuery: { |
|||
page: 1, |
|||
limit: 10, |
|||
inp_storehouse_id:'', |
|||
batch_number:'', |
|||
start_happen_time:'', |
|||
end_happen_time:'', |
|||
materiel_no:'', |
|||
materiel_name:'', |
|||
type:'', |
|||
}, |
|||
total: 0, |
|||
QueryList: { |
|||
page: 1, |
|||
limit: 50, |
|||
}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
// 初始化按钮 |
|||
this.$refs["btnbar"].setButtonList(this.btnList); |
|||
}, |
|||
created() { |
|||
// 初始化变量 |
|||
this.init(); |
|||
this.getMaterialGroup(); |
|||
}, |
|||
methods: { |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow; |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = "隐藏查询条件"; |
|||
} else { |
|||
this.searchxianshitit = "显示查询条件"; |
|||
} |
|||
}, |
|||
dosearch() { |
|||
this.loadLogList(); |
|||
}, |
|||
resetQuery() { |
|||
this.listQuery = { |
|||
page: 1, |
|||
limit: 10, |
|||
inp_storehouse_id:'', |
|||
batch_number:'', |
|||
start_happen_time:'', |
|||
end_happen_time:'', |
|||
materiel_no:'', |
|||
materiel_name:'', |
|||
type:'', |
|||
}; |
|||
this.total = 0; |
|||
this.loadLogList(); |
|||
}, |
|||
// 右上角点击事件 |
|||
btnHandle(btnKey) { |
|||
switch (btnKey) { |
|||
case "doClose": // 关闭 |
|||
this.doClose(); |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}, |
|||
init() { |
|||
this.loadLogList(); |
|||
}, |
|||
loadLogList() { |
|||
req.getInStockMaterielList(this.listQuery).then((res) => { |
|||
if(res.code==200){ |
|||
this.total = res.data.data.count |
|||
this.logList = res.data.data.list |
|||
} |
|||
}); |
|||
}, |
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.listQuery.page - 1) * this.listQuery.limit; |
|||
var pageindex = index + 1 + pagestart; |
|||
return pageindex; |
|||
}, |
|||
resetState() { |
|||
this.viewState = 1; |
|||
}, |
|||
getMaterialGroup(){ |
|||
req.getInType().then((res) => { |
|||
if(res.code==200){ |
|||
this.Materia=res.data.data |
|||
} |
|||
}); |
|||
req.getWarehouse(this.QueryList).then((res) => { |
|||
if(res.code==200){ |
|||
this.storehouse = res.data.data.list |
|||
} |
|||
}); |
|||
}, |
|||
doClose() { |
|||
this.$store.dispatch("tagsView/delView", this.$route); |
|||
this.$router.go(-1); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
</style> |
|||
|
|||
@ -1,291 +0,0 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div v-show="viewState == 1"> |
|||
<button-bar |
|||
ref="btnbar" |
|||
view-title="供应商管理" |
|||
:btndisabled="btndisabled" |
|||
@btnhandle="btnHandle" |
|||
/> |
|||
<div class="main-content"> |
|||
<div class="searchcon"> |
|||
<el-button size="small" class="searchbtn" @click="clicksearchShow"> |
|||
{{ searchxianshitit }} |
|||
</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form |
|||
ref="queryParams" |
|||
:model="listQuery" |
|||
:inline="true" |
|||
class="tab-header" |
|||
> |
|||
<el-form-item label="供应商名称"> |
|||
<el-input |
|||
v-model="listQuery.supplier_name" |
|||
maxlength="20" |
|||
placeholder="请输入供应商名称" |
|||
class="addinputw" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="btn" style="text-align: center"> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-search" |
|||
@click="dosearch" |
|||
>查询</el-button |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-refresh" |
|||
@click="resetQuery" |
|||
>重置</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-table :data="logList" style="width: 100%" border> |
|||
<el-table-column |
|||
label="序号" |
|||
type="index" |
|||
width="60" |
|||
:index="indexMethod" |
|||
fixed |
|||
align="center" |
|||
/> |
|||
<el-table-column |
|||
align="center" |
|||
prop="id" |
|||
label="id" |
|||
width="100" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="supplier_name" |
|||
label="供应商名称" |
|||
width="240" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="supplie_grade" |
|||
label="供应商星级" |
|||
width="100" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="group_name" |
|||
label="供应商所属物料组" |
|||
width="160" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="link_man" |
|||
label="联系人" |
|||
width="100" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column align="center" prop="link_phone" label="联系电话" width="160"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="c_t" |
|||
label="创建时间" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="operate" |
|||
label="操作" |
|||
align="center" |
|||
width="180" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
type="primary" |
|||
icon="el-icon-zoom-in" |
|||
size="small" |
|||
@click="LookStorehousedialog(scope.row)" |
|||
>查看合同</el-button |
|||
> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="pages"> |
|||
<div class="tit" /> |
|||
<pagination |
|||
v-show="logList.length > 0" |
|||
:total="total" |
|||
:page.sync="listQuery.page" |
|||
:limit.sync="listQuery.limit" |
|||
class="pagination" |
|||
@pagination="loadLogList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 销售详细信息 --> |
|||
<el-dialog :title="'合同详细信息'" :visible.sync="editDialog" width="55%"> |
|||
<el-table ref="datalist" :data="tempList" border style="width: 100%" > |
|||
<el-table-column property="id" label="id" width="100px" align="center" /> |
|||
<el-table-column property="contract_name" label="名称" width="300px" align="center" /> |
|||
<el-table-column property="contract_date" label="签订日期" align="center" /> |
|||
<el-table-column property="contract_no" label="合同号" align="center" /> |
|||
</el-table> |
|||
<div class="pages"> |
|||
<div class="tit" /> |
|||
<pagination |
|||
v-show="tempList.length > 0" |
|||
:total="count" |
|||
:page.sync="queryInfo.page" |
|||
:limit.sync="queryInfo.limit" |
|||
class="pagination" |
|||
@pagination="LookStoreDialog" |
|||
/> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from "@/api/gfApi"; |
|||
import Pagination from "@/components/pagination"; |
|||
import ButtonBar from "@/components/ButtonBar"; |
|||
export default { |
|||
components: { |
|||
ButtonBar, |
|||
Pagination, |
|||
}, |
|||
data() { |
|||
return { |
|||
viewState: 1, |
|||
tabActiveName: "uplog", |
|||
index: "0", |
|||
isSearchShow: false, |
|||
editDialog: false, |
|||
searchxianshitit: "显示查询条件", |
|||
btndisabled: false, |
|||
btnList: [ |
|||
{ |
|||
type: "info", |
|||
size: "small", |
|||
icon: "cross", |
|||
btnKey: "doClose", |
|||
btnLabel: "关闭", |
|||
}, |
|||
], |
|||
logList: [], |
|||
tempList: [], |
|||
listQuery: { |
|||
page: 1, |
|||
limit: 10, |
|||
supplier_name:'' |
|||
}, |
|||
queryInfo: { |
|||
page: 1, |
|||
limit: 10, |
|||
ident_id:"" |
|||
}, |
|||
total: 0, |
|||
count: 0, |
|||
jmdListQuery: { |
|||
contractNumber: "", |
|||
date: "", |
|||
}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
// 初始化按钮 |
|||
this.$refs["btnbar"].setButtonList(this.btnList); |
|||
}, |
|||
created() { |
|||
// 初始化变量 |
|||
this.init(); |
|||
}, |
|||
methods: { |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow; |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = "隐藏查询条件"; |
|||
} else { |
|||
this.searchxianshitit = "显示查询条件"; |
|||
} |
|||
}, |
|||
dosearch() { |
|||
this.loadLogList(); |
|||
}, |
|||
resetQuery() { |
|||
this.listQuery = { |
|||
page: 1, |
|||
limit: 10, |
|||
supplier_name:'' |
|||
}; |
|||
this.total = 0; |
|||
this.loadLogList(); |
|||
}, |
|||
// 右上角点击事件 |
|||
btnHandle(btnKey) { |
|||
switch (btnKey) { |
|||
case "doClose": // 关闭 |
|||
this.doClose(); |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}, |
|||
init() { |
|||
this.loadLogList(); |
|||
}, |
|||
loadLogList() { |
|||
req.getSupplierList(this.listQuery).then((res) => { |
|||
if(res.code==200){ |
|||
this.total = res.data.data.count |
|||
this.logList = res.data.data.list |
|||
} |
|||
}); |
|||
}, |
|||
LookStorehousedialog(row){ |
|||
this.queryInfo.ident_id=row.id |
|||
req.getContract(this.queryInfo).then((res) => { |
|||
if(res.code==200){ |
|||
this.editDialog = true |
|||
this.tempList=res.data.data.list |
|||
this.count = res.data.data.count |
|||
} |
|||
}); |
|||
}, |
|||
LookStoreDialog(){ |
|||
req.getContract(this.queryInfo).then((res) => { |
|||
if(res.code==200){ |
|||
this.tempList=res.data.data.list |
|||
this.count = res.data.data.count |
|||
} |
|||
}); |
|||
}, |
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.listQuery.page - 1) * this.listQuery.limit; |
|||
var pageindex = index + 1 + pagestart; |
|||
return pageindex; |
|||
}, |
|||
resetState() { |
|||
this.viewState = 1; |
|||
}, |
|||
doClose() { |
|||
this.$store.dispatch("tagsView/delView", this.$route); |
|||
this.$router.go(-1); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
</style> |
|||
|
|||
@ -0,0 +1,228 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div v-show="viewState == 1"> |
|||
<button-bar ref="btnbar" view-title="用户列表" :btndisabled="btndisabled" @btnhandle="btnHandle" /> |
|||
<div class="main-content"> |
|||
<div class="searchcon"> |
|||
<el-button size="small" class="searchbtn" @click="clicksearchShow"> |
|||
{{ searchxianshitit }} |
|||
</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form :inline="true" class="tab-header"> |
|||
<el-form-item label="用户名称"> |
|||
<el-input v-model="queryParams.params.realName" placeholder="" clearable /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="手机号码"> |
|||
<el-input v-model="queryParams.params.mobile" placeholder="" clearable /> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
<div class="btn" style="text-align: center;"> |
|||
<el-button type="primary" size="small" icon="el-icon-search" |
|||
@click="dosearch">查询</el-button> |
|||
<el-button type="primary" size="small" icon="el-icon-refresh" |
|||
@click="resetQuery">重置</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- Start 项目列表头部 --> |
|||
<div class="listtop"> |
|||
<div class="tit">用户列表</div> |
|||
</div> |
|||
<!-- End 项目列表头部 --> |
|||
<!-- Start 项目列表 --> |
|||
<div class=""> |
|||
<el-table v-loading="tableLoading" :data="dataList" border style="width: 100%"> |
|||
<!-- <el-table-column fixed width="50" type="selection" align="center" /> --> |
|||
<el-table-column fixed width="60" label="序号" type="index" :index="indexMethod" align="center" /> |
|||
<!-- <el-table-column label="操作" align="center" width="180"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="primary" size="mini" @click="toRelevancy(scope.row)">编辑</el-button> |
|||
<el-button type="primary" size="mini" @click="toRelevancyInfo(scope.row)">删除</el-button> |
|||
</template> |
|||
</el-table-column> --> |
|||
<el-table-column prop="realName" label="用户名称" align="center" /> |
|||
<el-table-column prop="nick" label="昵称" align="center" /> |
|||
<el-table-column prop="mobile" label="手机号码" align="center" /> |
|||
</el-table> |
|||
</div> |
|||
<!-- End 项目列表 --> |
|||
<div class="pages"> |
|||
<div class="tit" /> |
|||
<!-- 翻页 --> |
|||
<pagination v-show="dataList.length > 0" :total="queryParams.total" :page.sync="queryParams.current" |
|||
:limit.sync="queryParams.size" class="pagination" @pagination="loadList" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from '@/api/userInfo/userInfo.js' |
|||
import ButtonBar from '@/components/ButtonBar' |
|||
import Pagination from '@/components/pagination' |
|||
import pageye from '@/components/pagination/pageye' |
|||
export default { |
|||
name: 'SupplierBankInfoIndex', |
|||
components: { |
|||
ButtonBar, |
|||
Pagination, |
|||
pageye, |
|||
}, |
|||
data() { |
|||
return { |
|||
btndisabled: false, |
|||
viewState: 1, // 1、列表 2、添加 3、修改 4、查看 |
|||
isSearchShow: false, |
|||
searchxianshitit: '显示查询条件', |
|||
tableLoading: false, |
|||
dataList: [], |
|||
btnList: [ |
|||
// { |
|||
// type: 'primary', |
|||
// size: 'small', |
|||
// icon: 'plus', |
|||
// btnKey: 'toAdd', |
|||
// btnLabel: '新增' |
|||
// }, |
|||
{ |
|||
type: 'info', |
|||
size: 'small', |
|||
icon: 'cross', |
|||
btnKey: 'doClose', |
|||
btnLabel: '关闭' |
|||
} |
|||
], |
|||
queryParams: { |
|||
current: 1, |
|||
size: 10, |
|||
total: 0, |
|||
params: { |
|||
realName: '', |
|||
mobile: '', |
|||
|
|||
} |
|||
}, |
|||
sids: [] |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$refs['btnbar'].setButtonList(this.btnList) |
|||
}, |
|||
created() { |
|||
this.loadList() |
|||
}, |
|||
methods: { |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = '隐藏查询条件' |
|||
} else { |
|||
this.searchxianshitit = '显示查询条件' |
|||
} |
|||
}, |
|||
btnHandle(btnKey) { |
|||
switch (btnKey) { |
|||
case 'toAdd': |
|||
this.toAdd() |
|||
break |
|||
case 'doClose': |
|||
this.doClose() |
|||
break |
|||
default: |
|||
break |
|||
} |
|||
}, |
|||
loadList() { |
|||
this.tableLoading = true |
|||
req.customerListPage(this.queryParams).then((resp) => { |
|||
this.tableLoading = false |
|||
if (resp.success) { |
|||
const data = resp.data |
|||
this.queryParams.total = data.total |
|||
this.dataList = data.records |
|||
} else { |
|||
// 根据resp.code进行异常情况处理 |
|||
this.dataList = [] |
|||
this.queryParams.total = 0 |
|||
} |
|||
}).catch(() => { |
|||
this.tableLoading = false |
|||
}) |
|||
}, |
|||
|
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.queryParams.current - 1) * this.queryParams.size |
|||
var pageindex = index + 1 + pagestart |
|||
return pageindex |
|||
}, |
|||
dosearch() { |
|||
this.queryParams.current = 1 |
|||
this.loadList() |
|||
}, |
|||
resetQuery() { |
|||
this.queryParams = { |
|||
current: 1, |
|||
size: 10, |
|||
total: 0, |
|||
params: { |
|||
name: '', |
|||
} |
|||
} |
|||
this.loadList() |
|||
}, |
|||
toAdd() { |
|||
this.viewState = 2 |
|||
this.$refs['divadd'].showAdd() |
|||
}, |
|||
doClose() { |
|||
this.$store.dispatch('tagsView/delView', this.$route) |
|||
this.$router.go(-1) |
|||
}, |
|||
toRelevancy(row) { |
|||
this.viewState = 3 |
|||
this.$refs['divadd'].showEdit(row) |
|||
}, |
|||
toRelevancyInfo(row) { |
|||
|
|||
const tip = '请确认是否删除所选记录?' |
|||
this.$confirm(tip, '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
const loading = this.$loading({ |
|||
lock: true, |
|||
text: 'Loading', |
|||
spinner: 'el-icon-loading', |
|||
background: 'rgba(0, 0, 0, 0.7)' |
|||
}) |
|||
req.brandDelBySids(row.id).then((resp) => { |
|||
loading.close() |
|||
if (resp.success) { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: resp.msg, |
|||
showClose: true |
|||
}) |
|||
this.loadList() |
|||
} else { |
|||
// 根据resp.code进行异常情况处理 |
|||
} |
|||
}).catch(e => { |
|||
loading.close() |
|||
}) |
|||
}).catch(() => {}) |
|||
}, |
|||
resetState() { |
|||
this.viewState = 1 |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
</style> |
|||
Loading…
Reference in new issue