全局属性-基础配置页面

src/components/XnWorkflow/globalAttribute/basic.vue

@@ -0,0 +1,126 @@
+<!-- 全局属性基础配置页面 -->
+<template>
+    <div class="home">
+        <navTitle>
+            <template #nav_name>流程基础全局配置</template>
+        </navTitle>
+        <div class="basic_form">
+            <el-form :model="form" label-width="auto" label-position="top">
+                <div class="col">
+                    <el-form-item label="流水号">
+                        <el-col :span="12">
+                            <el-select
+                                style="width: 300px !important"
+                                v-model="form.region"
+                                placeholder="please select your zone"
+                            >
+                                <el-option label="Zone one" value="shanghai" />
+                                <el-option label="Zone two" value="beijing" />
+                            </el-select>
+                        </el-col>
+                    </el-form-item>
+                    <el-form-item label="打印模板">
+                        <el-col :span="12">
+                            <p style="width: 300px">自定义表单内提供打印方法</p>
+                        </el-col>
+                    </el-form-item>
+                </div>
+
+                <el-form-item label="标题模板">
+                    <div class="form_position_item">
+                        <el-input v-model="form.desc" type="textarea" />
+                        <el-button type="primary" size="small">
+                            置入字段
+                            <el-icon class="el-icon--right"><ArrowDownBold /></el-icon>
+                        </el-button>
+                    </div>
+                </el-form-item>
+
+                <el-form-item label="摘要模板">
+                    <div class="form_position_item">
+                        <el-input v-model="form.desc" type="textarea" />
+                        <el-button type="primary" size="small">
+                            置入字段
+                            <el-icon class="el-icon--right"><ArrowDownBold /></el-icon>
+                        </el-button>
+                    </div>
+                </el-form-item>
+
+                <el-form-item label="开启自动去重">
+                    <el-switch v-model="form.delivery" />
+                </el-form-item>
+                <el-form-item label="">
+                    <el-radio-group v-model="form.resource" class="radioGroup">
+                        <p><el-radio value="0">当审批人和发起人是同一个人，审批自动通过</el-radio></p>
+                        <p><el-radio value="1">当同一审批人在流程中连续多次出现时，自动去重</el-radio></p>
+                    </el-radio-group>
+                </el-form-item>
+                <div class="col">
+                    <el-form-item label="开启审批撤销">
+                        <el-switch v-model="form.delivery" />
+                    </el-form-item>
+                    <el-form-item label="开启意见必填">
+                        <el-switch v-model="form.delivery" />
+                    </el-form-item>
+                </div>
+            </el-form>
+        </div>
+    </div>
+</template>
+<script setup>
+import navTitle from '../components/navTitle.vue'
+import { ArrowDownBold } from '@element-plus/icons-vue'
+import { ref } from 'vue'
+const form = ref({})
+form.value = {
+    name: '',
+    region: '',
+    date1: '',
+    date2: '',
+    delivery: false,
+    type: [],
+    resource: '',
+    desc: ''
+}
+</script>
+<style lang="scss" scoped>
+.home {
+    width: 100%;
+    height: calc(100vh - 100px);
+    padding-top: 20px;
+    overflow: auto;
+    .basic_form {
+        width:96%;
+        padding-top: 10px;
+        margin: 0 auto;
+        .col {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            .el-form-item {
+                width: 50%;
+            }
+        }
+        .form_position_item {
+            width: 100%;
+            height: auto;
+            position: relative;
+            .el-input {
+                height: 100%;
+            }
+            .el-button {
+                position: absolute;
+                bottom: 5px;
+                right: 5px;
+                z-index: 999;
+            }
+        }
+        .radioGroup {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            align-items: flex-start;
+        }
+    }
+}
+</style>