| | |
| | | <template> |
| | | <div> |
| | | <p>生命周期模型</p> |
| | | <el-button @click="tabs=!tabs">转化</el-button><br /><br /> |
| | | <avue-form @tab-click="handleTabClick" :option="option" v-model="form" @submit="handleSubmit"> |
| | | <template slot="group1Header"> |
| | | <h4>自定义表头</h4> |
| | | </template> |
| | | </avue-form> |
| | | </div> |
| | | <basic-container class=""> |
| | | <avue-crud :data="data" :option="option" @refresh-change="search" :table-loading="loading"> |
| | | <template slot-scope="scope" slot="menuLeft"> |
| | | <el-button |
| | | type="primary" |
| | | icon="el-icon-plus" |
| | | size="small" |
| | | @click="openDialog('add', {})" |
| | | >新增</el-button |
| | | > |
| | | </template> |
| | | <template slot-scope="{ row, index }" slot="menu"> |
| | | <el-button |
| | | type="text" |
| | | icon="el-icon-edit" |
| | | size="mini" |
| | | @click="openDialog('edit', row)" |
| | | >编辑</el-button |
| | | > |
| | | <el-button |
| | | type="text" |
| | | icon="el-icon-view" |
| | | size="mini" |
| | | @click="openDialog('detail', row)" |
| | | >预览</el-button |
| | | > |
| | | </template></avue-crud |
| | | > |
| | | <el-dialog |
| | | :visible="visible" |
| | | :width="dialogWidth" |
| | | :title="title" |
| | | append-to-body |
| | | :before-close="() => {visible = false}" |
| | | top="10vh" |
| | | > |
| | | <CycleFlow |
| | | v-if="visible" |
| | | class="cycle_flow" |
| | | :type="type" |
| | | :chart-data="rowData.data || {}" |
| | | :chart-data-node-items="flowChartNodeItems" |
| | | :rowData="rowData" |
| | | ref="vueFlowchartEditor" |
| | | @save-data="save" |
| | | /> |
| | | <template #footer v-if="type !== 'detail'"> |
| | | <el-button type="primary" size="mini" @click="submit">保存</el-button> |
| | | <el-button type="" size="mini" @click="visible = false">取消</el-button> |
| | | </template> |
| | | </el-dialog> |
| | | </basic-container> |
| | | </template> |
| | | |
| | | <script> |
| | | import API from '@/api/modeling/cycle' |
| | | import CycleFlow from "@/components/flow-cycle/flowchartEditor.vue"; |
| | | export default { |
| | | name: "cycle.vue", |
| | | data(){ |
| | | return{ |
| | | tabs:true, |
| | | form:{ |
| | | text:'文本', |
| | | text1:'文本1', |
| | | text2:'文本2', |
| | | text3:'文本3', |
| | | components: { CycleFlow }, |
| | | data() { |
| | | return { |
| | | form: { |
| | | page: 1, |
| | | limit: 10 |
| | | }, |
| | | } |
| | | }, |
| | | computed:{ |
| | | option(){ |
| | | return{ |
| | | tabs:this.tabs, |
| | | tabsActive:2, |
| | | column: [{ |
| | | label: '内容1', |
| | | prop: 'text1', |
| | | }], |
| | | group:[ |
| | | option: { |
| | | border: true, |
| | | align: "center", |
| | | menuAlign: "center", |
| | | menu: true, |
| | | delBtn: false, |
| | | editBtn: false, |
| | | addBtn: false, |
| | | column: [ |
| | | { |
| | | icon:'el-icon-info', |
| | | label: '分组1', |
| | | prop: 'group1', |
| | | column: [{ |
| | | label: '内容1', |
| | | prop: 'text1', |
| | | }] |
| | | },{ |
| | | icon:'el-icon-info', |
| | | label: '分组2', |
| | | prop: 'group2', |
| | | column: [{ |
| | | label: '选项卡2', |
| | | prop: 'text2', |
| | | }, { |
| | | label: '选项卡3', |
| | | prop: 'text3', |
| | | }] |
| | | } |
| | | ] |
| | | label: "编号", |
| | | prop: "id", |
| | | }, |
| | | { |
| | | label: "名称", |
| | | prop: "name", |
| | | }, |
| | | { |
| | | label: "起始状态", |
| | | prop: "startStatusName", |
| | | }, |
| | | { |
| | | label: "描述", |
| | | prop: "description", |
| | | }, |
| | | ], |
| | | }, |
| | | // data: [ |
| | | // { |
| | | // name: "我是name", |
| | | // label: "我是label", |
| | | // startState: "我是startState", |
| | | // remark: "我是remark", |
| | | // data: { |
| | | // nodes: [ |
| | | // { |
| | | // type: "node", |
| | | // size: "80*48", |
| | | // shape: "flow-rect", |
| | | // color: "#1890FF", |
| | | // label: "Auditing", |
| | | // x: 110.50303650877106, |
| | | // y: 59.22389408123915, |
| | | // id: "Auditing", |
| | | // index: 0, |
| | | // }, |
| | | // { |
| | | // type: "node", |
| | | // size: "80*48", |
| | | // shape: "flow-rect", |
| | | // color: "#1890FF", |
| | | // label: "Editing", |
| | | // x: 120.87992069414531, |
| | | // y: 156.76660542375714, |
| | | // id: "Editing", |
| | | // index: 1, |
| | | // }, |
| | | // { |
| | | // type: "node", |
| | | // size: "80*48", |
| | | // shape: "flow-rect", |
| | | // color: "#1890FF", |
| | | // label: "Released", |
| | | // x: 100.12615232339681, |
| | | // y: 252.2339399292003, |
| | | // id: "Released", |
| | | // index: 2, |
| | | // }, |
| | | // ], |
| | | // edges: [ |
| | | // { |
| | | // source: "Auditing", |
| | | // sourceAnchor: 1, |
| | | // target: "Released", |
| | | // targetAnchor: 1, |
| | | // }, |
| | | // { |
| | | // source: "Editing", |
| | | // sourceAnchor: 3, |
| | | // target: "Auditing", |
| | | // targetAnchor: 3, |
| | | // }, |
| | | // ], |
| | | // }, |
| | | // }, |
| | | // ], |
| | | title: "预览生命周期流程图", |
| | | visible: false, |
| | | flowChartNodeItems: [], |
| | | rowData: {}, |
| | | dialogWidth: "50%", |
| | | type: "detail", |
| | | loading: false |
| | | }; |
| | | }, |
| | | created() { |
| | | this.search() |
| | | }, |
| | | methods: { |
| | | search() { |
| | | this.loading = true |
| | | API.getList(this.form).then(res => { |
| | | this.loading = false |
| | | this.data = res.data.data |
| | | }) |
| | | }, |
| | | openDialog(type, row) { |
| | | if (type === "detail") { |
| | | this.title = "预览生命周期流程图"; |
| | | this.dialogWidth = "50%"; |
| | | } else if (type === "edit") { |
| | | this.title = "编辑生命周期流程图"; |
| | | this.dialogWidth = "95%"; |
| | | } else if (type === "add") { |
| | | this.title = "新增生命周期流程图"; |
| | | this.dialogWidth = "95%"; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | this.type = type; |
| | | this.rowData = row; |
| | | this.visible = true; |
| | | }, |
| | | async submit() { |
| | | const newRowData = await this.$refs.vueFlowchartEditor.getNewRowData(); |
| | | if (!newRowData) { |
| | | return; |
| | | } |
| | | const flowData = this.$refs.vueFlowchartEditor.getFlowData(); |
| | | console.log(JSON.stringify(flowData)); |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | <style lang="scss" scoped> |
| | | /deep/ .el-dialog__body { |
| | | padding: 0 20px; |
| | | } |
| | | .cycle_flow { |
| | | height: 600px !important; |
| | | display: flex; |
| | | flex-direction: column; |
| | | margin: 0; |
| | | padding: 0; |
| | | } |
| | | </style> |