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,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