153 lines
4.0 KiB
Vue
153 lines
4.0 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2022-08-22 15:53:16
|
|
* @LastEditors: zwq
|
|
* @LastEditTime: 2022-09-01 16:42:08
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<el-card shadow="never" class="aui-card--fill">
|
|
<el-row :gutter="10">
|
|
<el-col :span="10">
|
|
<el-form
|
|
style="background-color:#e6f7ff;padding:10px 20px"
|
|
:inline="true"
|
|
:model="dataForm"
|
|
@keyup.enter.native="getDataList()"
|
|
>
|
|
<el-form-item>
|
|
<el-input v-model="dataForm.paramKey" clearable placeholder="请输入关键字查询" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button @click="getDataList()">
|
|
<svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
|
|
查询
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-table
|
|
:data="dataList"
|
|
height="650"
|
|
highlight-current-row
|
|
@current-change="handleCurrentChange"
|
|
:header-cell-style="{
|
|
background: '#eef1f6',
|
|
color: '#606266',
|
|
height: '56px',
|
|
}"
|
|
border
|
|
v-loading="dataListLoading"
|
|
style="width: 100%;"
|
|
>
|
|
<el-table-column
|
|
fixed="left"
|
|
type="index"
|
|
header-align="center"
|
|
align="center"
|
|
label="序号"
|
|
width="50"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="名称" fixed="left"> </el-table-column>
|
|
<el-table-column prop="code" label="编码" fixed="left"> </el-table-column>
|
|
</el-table>
|
|
</el-col>
|
|
<el-col :span="13" :offset="1">
|
|
<el-tabs @tab-click="tabClick">
|
|
<el-tab-pane label="图形模式">
|
|
<process-flow-graph
|
|
v-show="graphVisible"
|
|
ref="graphRef"
|
|
:product-id="productId"
|
|
@refreshDataList="getDataList"
|
|
></process-flow-graph>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="表格模式">
|
|
<two-step v-show="twoStepVisible" ref="twoStepRef" :product-id="productId"></two-step>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
import processFlowGraph from "./components/processFlow-graph";
|
|
import twoStep from "./components/productList-two";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
dataListLoading: false,
|
|
dataList: [],
|
|
flowDataList: [],
|
|
graphVisible: true,
|
|
twoStepVisible: false,
|
|
dataForm: {
|
|
paramKey: "",
|
|
},
|
|
productId: "",
|
|
paneName: "图形模式",
|
|
};
|
|
},
|
|
components: {
|
|
processFlowGraph,
|
|
twoStep,
|
|
},
|
|
created() {
|
|
this.getDataList();
|
|
this.productId = ''
|
|
},
|
|
methods: {
|
|
getDataList() {
|
|
this.dataListLoading = true;
|
|
this.$http
|
|
.get("/basic/product/page", {
|
|
params: {
|
|
page: 1,
|
|
limit: 500,
|
|
code: this.dataForm.paramKey,
|
|
name: this.dataForm.paramKey,
|
|
},
|
|
})
|
|
.then(({ data: res }) => {
|
|
this.dataListLoading = false;
|
|
if (res.code !== 0) {
|
|
this.dataList = [];
|
|
return this.$message.error(res.msg);
|
|
}
|
|
this.dataList = res.data.list;
|
|
})
|
|
.catch(() => {
|
|
this.dataListLoading = false;
|
|
});
|
|
},
|
|
tabClick(val) {
|
|
this.paneName = val.label;
|
|
if (val.label === "图形模式") {
|
|
this.twoStepVisible = false;
|
|
this.graphVisible = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.graphRef.init();
|
|
});
|
|
} else {
|
|
this.graphVisible = false;
|
|
this.twoStepVisible = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.twoStepRef.init();
|
|
});
|
|
}
|
|
},
|
|
handleCurrentChange(val) {
|
|
if (val) {
|
|
this.productId = val.id;
|
|
const obj = {
|
|
label: this.paneName,
|
|
};
|
|
this.tabClick(obj);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|