全局属性-抽屉组件

src/components/XnWorkflow/components/drawerTabs.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="drawers">
+        <el-drawer
+            v-model="drawerVisibile"
+            title="全局属性"
+            direction="rtl"
+            size="50%"
+            :before-close="handleClose"
+            @closed="handleClose"
+        >
+            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+                <el-tab-pane label="人员配置" name="0">
+                    <user v-if="activeName == 0"></user>
+                </el-tab-pane>
+                <el-tab-pane label="基础配置" name="1">
+                    <basic v-if="activeName == 1"></basic>
+                </el-tab-pane>
+                <el-tab-pane label="通知配置" name="2">
+                    <notice v-if="activeName == 2"></notice>
+                </el-tab-pane>
+                <el-tab-pane label="表单预设" name="3">
+                    <formPreset v-if="activeName == 3"></formPreset>
+                </el-tab-pane>
+                <el-tab-pane label="执行监听" name="4">
+                    <watchs v-if="activeName == 4"></watchs>
+                </el-tab-pane>
+            </el-tabs>
+            <template #footer>
+                <div style="flex: auto" class="drawer_footer">
+                    <el-button type="primary" @click="handleConfirm">保存</el-button>
+                    <el-button @click="handleClose">取消</el-button>
+                </div>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+<script>
+import user from '../globalAttribute/user.vue'
+import basic from '../globalAttribute/basic.vue'
+import notice from '../globalAttribute/notice.vue'
+import formPreset from '../globalAttribute/formPreset.vue'
+import watchs from '../globalAttribute/watchs.vue'
+export default {
+    components: {
+        user,
+        basic,
+        notice,
+        formPreset,
+        watchs
+    },
+    data() {
+        return {
+            drawerVisibile: true,
+            activeName: '0'
+        }
+    },
+    mounted() {},
+    methods: {
+        handleClose() {
+            this.$emit('updateDrawer')
+        },
+        handleClick(val) {
+            console.log(val)
+        },
+        handleConfirm(){
+
+        }
+    }
+}
+</script>
+<style scoped>
+.drawers ::v-deep(.el-drawer__header) {
+    margin-bottom: 0;
+    display: flex;
+    align-items: center;
+}
+.drawer_footer{
+    display: flex;
+    width: 20%;
+    justify-content: space-between;
+    float: right;
+}
+</style>