feat: 前端升级至vue3，后端代码结构重构，新增权限管理相关功能

mayfly_go_web/src/views/ops/machine/ScriptEdit.vue

@@ -0,0 +1,152 @@
+<template>
+    <div class="mock-data-dialog">
+        <el-dialog
+            :title="title"
+            v-model="visible"
+            :close-on-click-modal="false"
+            :before-close="cancel"
+            :show-close="true"
+            :destroy-on-close="true"
+            width="800px"
+        >
+            <el-form :model="form" ref="mockDataForm" label-width="70px" size="small">
+                <el-form-item prop="method" label="名称">
+                    <el-input v-model.trim="form.name" placeholder="请输入名称"></el-input>
+                </el-form-item>
+
+                <el-form-item prop="description" label="描述">
+                    <el-input v-model.trim="form.description" placeholder="请输入描述"></el-input>
+                </el-form-item>
+
+                <el-form-item prop="type" label="类型">
+                    <el-select v-model="form.type" default-first-option style="width: 100%" placeholder="请选择类型">
+                        <el-option v-for="item in enums.scriptTypeEnum" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                    </el-select>
+                </el-form-item>
+
+                <el-form-item prop="script" label="内容" id="content">
+                    <codemirror ref="cmEditor" v-model="form.script" language="shell" />
+                </el-form-item>
+            </el-form>
+
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button type="primary" :loading="btnLoading" @click="btnOk" size="mini" :disabled="submitDisabled">保 存</el-button>
+                    <el-button @click="cancel()" :disabled="submitDisabled" size="mini">关 闭</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts">
+import { ref, toRefs, reactive, watch, defineComponent } from 'vue';
+import { ElMessage } from 'element-plus';
+import { machineApi } from './api';
+import enums from './enums';
+import { notEmpty } from '@/common/assert';
+
+import { codemirror } from '@/components/codemirror';
+
+export default defineComponent({
+    name: 'ScriptEdit',
+    components: {
+        codemirror,
+    },
+    props: {
+        visible: {
+            type: Boolean,
+        },
+        data: {
+            type: Object,
+        },
+        title: {
+            type: String,
+        },
+        machineId: {
+            type: Number,
+        },
+        isCommon: {
+            type: Boolean,
+        },
+    },
+    setup(props: any, { emit }) {
+        const { isCommon, machineId } = toRefs(props);
+        const mockDataForm: any = ref(null);
+
+        const state = reactive({
+            visible: false,
+            submitDisabled: false,
+            form: {
+                id: null,
+                name: '',
+                machineId: 0,
+                description: '',
+                script: '',
+                type: null,
+            },
+            btnLoading: false,
+        });
+
+        watch(props, (newValue, oldValue) => {
+            if (newValue.data) {
+                state.form = { ...newValue.data };
+            } else {
+                state.form = {} as any;
+                state.form.script = '';
+            }
+            state.visible = newValue.visible;
+        });
+
+        const btnOk = () => {
+            state.form.machineId = isCommon.value ? 9999999 : (machineId.value as any);
+            console.log('machineid:', machineId);
+            mockDataForm.value.validate((valid: any) => {
+                if (valid) {
+                    notEmpty(state.form.name, '名称不能为空');
+                    notEmpty(state.form.description, '描述不能为空');
+                    notEmpty(state.form.script, '内容不能为空');
+                    machineApi.saveScript.request(state.form).then(
+                        (res: any) => {
+                            ElMessage.success('保存成功');
+                            emit('submitSuccess');
+                            state.submitDisabled = false;
+                            cancel();
+                        },
+                        (e: any) => {
+                            state.submitDisabled = false;
+                        }
+                    );
+                } else {
+                    return false;
+                }
+            });
+        };
+
+        const cancel = () => {
+            emit('update:visible', false);
+            emit('cancel');
+        };
+
+        return {
+            ...toRefs(state),
+            enums,
+            mockDataForm,
+            btnOk,
+            cancel,
+        };
+    },
+});
+</script>
+<style lang="scss">
+// 	.m-dialog {
+// 		.el-cascader {
+// 			width: 100%;
+// 		}
+// 	}
+#content {
+    .CodeMirror {
+        height: 300px !important;
+    }
+}
+</style>