初始化项目
This commit is contained in:
272
src/views/pages/workflow/component/drawer/node.vue
Normal file
272
src/views/pages/workflow/component/drawer/node.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<div class="workflow-drawer-node">
|
||||
<el-tabs type="border-card" v-model="tabsActive">
|
||||
<!-- 节点编辑 -->
|
||||
<el-tab-pane label="节点编辑" name="1">
|
||||
<el-scrollbar>
|
||||
<el-form :model="node" :rules="nodeRules" ref="nodeFormRef" size="default" label-width="80px" class="pt15 pr15 pb15 pl15">
|
||||
<el-form-item label="数据id" prop="id">
|
||||
<el-input v-model="node.id" placeholder="请输入数据id" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="节点id" prop="nodeId">
|
||||
<el-input v-model="node.nodeId" placeholder="请输入节点id" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-input v-model="node.type" placeholder="请输入类型" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="left坐标" prop="left">
|
||||
<el-input v-model="node.left" placeholder="请输入left坐标" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="top坐标" prop="top">
|
||||
<el-input v-model="node.top" placeholder="请输入top坐标" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="icon图标" prop="icon">
|
||||
<el-input v-model="node.icon" placeholder="请输入icon图标" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="node.name" placeholder="请输入名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="mb15" @click="onNodeRefresh">
|
||||
<SvgIcon name="ele-RefreshRight" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button type="primary" class="mb15" @click="onNodeSubmit">
|
||||
<SvgIcon name="ele-Check" />
|
||||
保存
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 扩展表单 -->
|
||||
<el-tab-pane label="扩展表单" name="2">
|
||||
<el-scrollbar>
|
||||
<el-form :model="form" ref="extendFormRef" size="default" label-width="80px" class="pt15 pr15 pb15 pl15">
|
||||
<el-form-item
|
||||
:label="val.label"
|
||||
:prop="val.prop"
|
||||
v-for="(val, key) in node.from"
|
||||
:key="key"
|
||||
:rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: 'blur' }]"
|
||||
>
|
||||
<el-input
|
||||
v-model="form[val.prop]"
|
||||
:placeholder="val.placeholder"
|
||||
clearable
|
||||
v-if="val.type === 'input'"
|
||||
:disabled="val.disabled"
|
||||
></el-input>
|
||||
<el-select v-model="form[val.prop]" placeholder="请选择" v-if="val.type === 'select'" clearable :disabled="val.disabled">
|
||||
<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||
</el-select>
|
||||
<el-checkbox-group v-model="form[val.prop]" v-if="val.type === 'checkbox'" :disabled="val.disabled">
|
||||
<el-checkbox label="美食推荐" name="type"></el-checkbox>
|
||||
<el-checkbox label="统计分析" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="mb15" @click="onExtendRefresh">
|
||||
<SvgIcon name="ele-RefreshRight" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button type="primary" class="mb15" @click="onExtendSubmit" :loading="loading.extend">
|
||||
<SvgIcon name="ele-Check" />
|
||||
保存
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 图表可视化 -->
|
||||
<el-tab-pane label="图表可视化" name="3">
|
||||
<el-scrollbar>
|
||||
<div class="flex-content-right">
|
||||
<div style="height: 200px; width: 320px" ref="chartsMonitorRef"></div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, ref, nextTick, getCurrentInstance } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface WorkflowDrawerNodeState {
|
||||
node: { [key: string]: any };
|
||||
nodeRules: any;
|
||||
form: any;
|
||||
tabsActive: string;
|
||||
loading: {
|
||||
extend: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesWorkflowDrawerNode',
|
||||
setup(props, { emit }) {
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const nodeFormRef = ref();
|
||||
const extendFormRef = ref();
|
||||
const chartsMonitorRef = ref();
|
||||
const state = reactive<WorkflowDrawerNodeState>({
|
||||
node: {},
|
||||
nodeRules: {
|
||||
id: [{ required: true, message: '请输入数据id', trigger: 'blur' }],
|
||||
nodeId: [{ required: true, message: '请输入节点id', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请输入类型', trigger: 'blur' }],
|
||||
left: [{ required: true, message: '请输入left坐标', trigger: 'blur' }],
|
||||
top: [{ required: true, message: '请输入top坐标', trigger: 'blur' }],
|
||||
icon: [{ required: true, message: '请输入icon图标', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||
},
|
||||
form: {
|
||||
module: [],
|
||||
},
|
||||
tabsActive: '1',
|
||||
loading: {
|
||||
extend: false,
|
||||
},
|
||||
});
|
||||
// 获取父组件数据
|
||||
const getParentData = (data: object) => {
|
||||
state.tabsActive = '1';
|
||||
state.node = data;
|
||||
initChartsMonitor();
|
||||
};
|
||||
// 节点编辑-重置
|
||||
const onNodeRefresh = () => {
|
||||
state.node.icon = '';
|
||||
state.node.name = '';
|
||||
};
|
||||
// 节点编辑-保存
|
||||
const onNodeSubmit = () => {
|
||||
nodeFormRef.value.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
emit('submit', state.node);
|
||||
emit('close');
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
// 扩展表单-重置
|
||||
const onExtendRefresh = () => {
|
||||
extendFormRef.value.resetFields();
|
||||
};
|
||||
// 扩展表单-保存
|
||||
const onExtendSubmit = () => {
|
||||
extendFormRef.value.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
state.loading.extend = true;
|
||||
setTimeout(() => {
|
||||
state.loading.extend = false;
|
||||
ElMessage.success('保存成功');
|
||||
emit('close');
|
||||
}, 1000);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
// 图表可视化-初始化
|
||||
const initChartsMonitor = () => {
|
||||
const myChart = echarts.init(proxy.$refs.chartsMonitorRef);
|
||||
const numsOne = [];
|
||||
const numsTwo = [];
|
||||
for (let i = 0; i < 7; i++) {
|
||||
numsOne.push(`${Math.floor(Math.random() * 52 + 10)}:${Math.floor(Math.random() * 52 + 1)}`);
|
||||
numsTwo.push(Math.floor(Math.random() * 52 + 1));
|
||||
}
|
||||
const option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
right: 30,
|
||||
bottom: 30,
|
||||
left: 50,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: numsOne,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
itemStyle: {
|
||||
color: '#289df5',
|
||||
borderColor: '#289df5',
|
||||
areaStyle: {
|
||||
type: 'default',
|
||||
opacity: 0.1,
|
||||
},
|
||||
},
|
||||
data: numsTwo,
|
||||
type: 'line',
|
||||
areaStyle: {},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
nextTick(() => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
return {
|
||||
nodeFormRef,
|
||||
extendFormRef,
|
||||
chartsMonitorRef,
|
||||
getParentData,
|
||||
onNodeRefresh,
|
||||
onNodeSubmit,
|
||||
onExtendRefresh,
|
||||
onExtendSubmit,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.workflow-drawer-node {
|
||||
:deep {
|
||||
.el-tabs {
|
||||
box-shadow: unset;
|
||||
border: unset;
|
||||
.el-tabs__nav {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.el-tabs__item {
|
||||
flex: 1;
|
||||
padding: unset;
|
||||
text-align: center;
|
||||
&:first-of-type.is-active {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&:last-of-type.is-active {
|
||||
border-right-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-tabs__content {
|
||||
padding: 0;
|
||||
height: calc(100vh - 90px);
|
||||
.el-tab-pane {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user