流程中心-监控流程查看页面绘制

2023-04-17 11:52:32 +08:00
parent 5f3999194c
commit 9a67e73ee5
4 changed files with 195 additions and 2 deletions
@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <el-dialog title="调整处理人" :visible.sync="dialogVisible" :before-close="handleClose">
+            <div class="form-container">
+                <el-form ref="form" :model="form" label-width="80px" :rules="rules">
+                    <el-form-item label="选择人员" prop="select">
+                        <el-select v-model="form.select" placeholder="请选择调整处理人">
+                            <el-option label="张三" value="1"></el-option>
+                            <el-option label="李四" value="2"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false" class="btn">取 消</el-button>
+                <el-button type="primary" @click="submit" class="btn">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'modal',
+    data() {
+        return {
+            dialogVisible: false,
+            form: {},
+            rules: {
+                select: [
+                    {
+                        required: 'true',
+                        trigger: 'change',
+                        message: '请选择调整处理人'
+                    }
+                ]
+            }
+        };
+    },
+    methods: {
+        handleClose(done) {
+            this.$confirm('确认关闭？')
+                .then(_ => {
+                    done();
+                })
+                .catch(_ => { });
+        },
+        open() {
+            this.dialogVisible = true
+        },
+        submit() {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    alert(11)
+                    this.dialogVisible = false
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-footer {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 30px;
+
+}
+
+::v-deep .el-dialog {
+    width: 600px;
+
+}
+
+::v-deep .el-dialog .el-dialog__body {
+    font-size: 50px;
+    height: 230px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+::v-deep .el-input__inner {
+    height: 40px;
+    line-height: 40px;
+}
+
+:v-deep .el-form-item--mini .el-form-item__label {
+    line-height: 40px !important;
+}
+
+::v-deep .btn {
+    width: 90px;
+    height: 40px;
+    border-radius: 30px;
+    margin-right: 30px;
+}</style>