[feat](新增任务管理): 完成部分静态页面

src/bg-ui/bg-code-editor.vue

@@ -3,14 +3,14 @@
     v-model:value="states.content"
     class="vue-ace-editor"
     :class="{ 'vue-ace-editor-disable': props.disabled }"
-    @input="codeChange"
     :lang="props.lang"
     :theme="props.theme"
     :options="{
       useWorker: true,
       readOnly: props.disabled,
       wrap: true,
-    }" />
+    }"
+    @input="codeChange" />
 </template>
 <script setup>
 import { reactive, toRefs, watch, onMounted } from "vue";
@@ -85,6 +85,7 @@ const codeChange = () => {
 
 onMounted(() => {
   let obj = "";
+  // console.log(typeof JSON.parse(this.datas));
   try {
     if (typeof JSON.parse(props.modelValue) == "object") {
       obj = JSON.stringify(JSON.parse(props.modelValue), null, "\t");
@@ -128,9 +129,10 @@ const { content } = toRefs(states);
   width: 0;
 }
 .vue-ace-editor :deep() .ace_scroller {
-  background-color: #1a1a1a;
-  color: #fff;
+  background-color: #fff;
+  color: #495266;
   caret-color: #fff;
+  right: 0 !important;
 }
 /* 光标颜色 */
 .vue-ace-editor :deep() .ace_cursor {
@@ -138,6 +140,20 @@ const { content } = toRefs(states);
 }
 .vue-ace-editor-disable :deep() .ace_scrollbar-v {
   width: 6px !important;
+  right: 2px;
+}
+
+.vue-ace-editor-disable :deep().ace_scrollbar::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+}
+.vue-ace-editor-disable :deep().ace_scrollbar::-webkit-scrollbar-track {
+  background-color: #f7f7f9; /* Matches ace monokai */
+  border-radius: 3px;
+}
+.vue-ace-editor-disable :deep().ace_scrollbar::-webkit-scrollbar-thumb {
+  background-color: #c1c7d7;
+  border-radius: 3px;
 }
 .vue-ace-editor-disable :deep() .ace_gutter {
   background-color: #202531;

src/bg-ui/bg-form-gap.vue

@@ -34,10 +34,10 @@ const props = defineProps({
   background-color: #3759be;
   border-radius: 2px;
 }
-/* .gap-title::after {
+.gap-title::after {
   content: "";
   display: inline-block;
   flex: 1;
   border-top: 1px dashed #dadee7;
-} */
+}
 </style>

src/page/main/auto-maintenance/task-manage/add/base-info.vue

+<template>
+  <div>
+    <el-form ref="ruleFormRef" :model="state.ruleForm" :rules="state.rules" label-position="top" label-width="120px">
+      <el-form-item label="任务名称" prop="name">
+        <el-input v-model="state.ruleForm.name" maxlength="20" placeholder="请输入任务名称" show-word-limit />
+      </el-form-item>
+      <el-form-item label="任务描述" prop="desc">
+        <el-input
+          v-model="state.ruleForm.desc"
+          type="textarea"
+          maxlength="200"
+          placeholder="请输入任务描述"
+          :autosize="{
+            minRows: 4,
+          }"
+          show-word-limit />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, onBeforeMount, toRefs } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+const router = useRouter();
+const route = useRoute();
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const state = reactive({
+  ruleForm: {
+    name: props.data?.name,
+    desc: props.data?.desc,
+  },
+  rules: {
+    name: [
+      { required: true, message: "请输入任务名称", trigger: "blur" },
+      { max: 20, message: "最大长度20", trigger: "blur" },
+    ],
+    desc: [{ max: 200, message: "最大长度200", trigger: "blur" }],
+  },
+});
+
+const save = () => {};
+
+defineExpose({
+  save,
+});
+</script>
+
+<style scoped></style>

src/page/main/auto-maintenance/task-manage/add/finish.vue

+<template>
+  <div class="step-container">
+    <div class="step-base">
+      <img src="@/assets/imgs/img_data-complete.png" />
+      <p class="tips">新增成功</p>
+      <div class="apaas_button btns">
+        <el-button type="default" @click="goStepOne"> 返回列表 </el-button>
+        <el-button type="primary" @click="putawayAction"> 继续新增 </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, onBeforeMount, toRefs } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+const router = useRouter();
+const route = useRoute();
+const state = reactive({ data: 1 });
+const { data } = toRefs(state);
+</script>
+
+<style scoped>
+.step-container {
+  position: relative;
+  height: 100%;
+}
+.step-base {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 300px;
+}
+.tips {
+  margin: 60px 0;
+  text-align: center;
+  font-size: 18px;
+  color: #202531;
+  font-weight: 600;
+}
+.btns {
+  width: 208px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-around;
+}
+</style>

src/page/main/auto-maintenance/task-manage/add/index.vue

+<template>
+  <div class="detail_container">
+    <bg-breadcrumb></bg-breadcrumb>
+    <div class="main_container">
+      <div class="content_process">
+        <div>
+          <el-steps :active="step">
+            <el-step title="" :class="{ process_complete: step > 1 }">
+              <template #icon>
+                <span class="process_desc">
+                  <span class="icon_box" v-if="step > 0"
+                    ><bg-icon class="step_icon" icon="#bg-ic-file-editing"></bg-icon
+                  ></span>
+                  <span class="circle" v-else></span>
+                  基本信息
+                </span>
+              </template>
+            </el-step>
+            <el-step title="" :class="{ process_complete: step > 2 }">
+              <template #icon>
+                <span class="process_desc">
+                  <span class="icon_box" v-if="step > 1"
+                    ><bg-icon class="step_icon" icon="#bg-ic-file-lock"></bg-icon
+                  ></span>
+                  <span class="circle" v-else></span>
+                  执行内容
+                </span>
+              </template>
+            </el-step>
+            <el-step title="">
+              <template #icon>
+                <span class="process_desc">
+                  <span class="icon_box" v-if="step > 2"
+                    ><bg-icon class="step_icon" icon="#bg-ic-file-success"></bg-icon
+                  ></span>
+                  <span class="circle" v-else></span>
+                  完成
+                </span>
+              </template>
+            </el-step>
+          </el-steps>
+        </div>
+      </div>
+      <div class="content_main log_content_nor" :style="step == 3 ? { height: 'calc(100vh - 234px)' } : {}">
+        <base-info v-show="step == 1"></base-info>
+        <use-content v-show="step == 2"></use-content>
+        <finish v-show="step == 3"></finish>
+      </div>
+      <div class="content_foot apaas_button" v-if="step == 1 || step == 2">
+        <el-button type="default" @click="cancel"> 取消 </el-button>
+        <el-button type="default" v-if="step == 2" @click="confirm(-1)"> 上一步 </el-button>
+        <el-button type="primary" v-if="step == 1" @click="confirm(1)"> 下一步 </el-button>
+        <el-button type="primary" v-if="step == 2" @click="confirm(1)"> 保存 </el-button>
+        <el-button type="success" v-if="step == 2" @click="useScript"> 立即执行 </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, onBeforeMount, toRefs } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+import axios from "@/request/http.js";
+import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+import baseInfo from "./base-info.vue";
+import useContent from "./use-content.vue";
+import finish from "./finish.vue";
+const router = useRouter();
+const route = useRoute();
+
+const step = ref(1);
+
+const state = reactive({ data: 1 });
+
+const cancel = () => {
+  router.back();
+};
+
+const confirm = (val) => {
+  step.value = step.value + val;
+};
+
+const useScript = () => {};
+</script>
+
+<style scoped>
+.content_process {
+  border-bottom: 1px solid #e6e9ef;
+  padding: 38px 16%;
+}
+.content_main {
+  height: calc(100vh - 287px);
+  padding: 30px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  box-sizing: border-box;
+}
+.content_foot {
+  border-top: 1px solid #e6e9ef;
+  padding: 16px 16px 0 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.process_desc {
+  background-color: #fff;
+  display: inline-block;
+  position: absolute;
+  padding: 0 5px;
+  font-size: 18px;
+  color: #202531;
+  font-weight: bold;
+}
+.process_desc img {
+  height: 25px;
+  width: 25px;
+  vertical-align: middle;
+}
+.process_end {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.process_end div {
+  text-align: center;
+}
+.step_icon {
+  color: #fff;
+  font-weight: 600;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.icon_box {
+  display: inline-block;
+  background-color: #2b4695;
+  width: 48px;
+  height: 48px;
+  border-radius: 99px;
+  position: relative;
+  border: 3px solid #b0bee8;
+  vertical-align: middle;
+}
+.circle {
+  display: inline-block;
+  background-color: #a9b1c7;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  position: relative;
+  border: 6px solid #e6e9ef;
+  vertical-align: middle;
+}
+.content_process :deep(.el-step.is-horizontal .el-step__line) {
+  height: 4px;
+}
+.content_process :deep(.el-step__head.is-finish .el-step__line) {
+  background: linear-gradient(to right, #2b4695 50%, #e6e9ef 50%);
+}
+.process_complete :deep(.el-step__head.is-finish .el-step__line) {
+  background: linear-gradient(to right, #2b4695 100%, #e6e9ef 0%);
+}
+</style>

src/page/main/auto-maintenance/task-manage/add/use-content.vue

+<template>
+  <div>
+    <bg-form-gap title="执行脚本"></bg-form-gap>
+    <bg-inner-tabs v-model="state.useType" :data="state.useData"></bg-inner-tabs>
+    <div style="height: 493px; margin-bottom: 23px" v-show="state.useType == 0">
+      <bg-code-editor v-model="state.useText"></bg-code-editor>
+    </div>
+    <div v-show="state.useType == 1" class="file-box">
+      <p>上传文件</p>
+      <bg-upload v-model="state.doc_file" custom-tips :file-types="['yaml', 'yml']" :file-max-size="20" :limit="1">
+        <span>将文件拖到此处，或 点击上传</span><br />
+        <span>支持上传一个后缀为.yaml或.yml的文件</span><br />
+        <span>文件大小不超过20M</span>
+      </bg-upload>
+    </div>
+    <bg-form-gap title="执行主机"></bg-form-gap>
+    <el-form ref="ruleFormRef" :model="state.ruleForm" :rules="state.rules" label-position="top" label-width="120px">
+      <el-form-item label="主机分组名称" prop="name" style="width: 1100px">
+        <el-select v-model="state.ruleForm.name" style="width: 1020px" clearable placeholder="请选择">
+          <el-option v-for="item in state.options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+        <span class="add-pc">去创建</span>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, onBeforeMount, toRefs } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+const router = useRouter();
+const route = useRoute();
+const state = reactive({
+  useType: 0,
+  useData: ["文本执行", "文件执行"],
+  useText: "",
+  doc_file: [],
+  ruleForm: {
+    name: "",
+  },
+  rules: {
+    name: [{ required: true, message: "请选择主机分组", trigger: "change" }],
+  },
+  options: [
+    {
+      label: "12",
+      value: "qwqw",
+    },
+  ],
+});
+</script>
+
+<style lang="scss" scoped>
+.add-pc {
+  font-size: 14px;
+  color: #3759be;
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.file-box {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  p {
+    color: #202531;
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+}
+</style>

src/page/main/auto-maintenance/task-manage/index.vue

@@ -153,6 +153,10 @@ import { ElMessage } from "element-plus";
 import axios from "@/request/http.js";
 import { Search } from "@element-plus/icons-vue";
 import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+import { useRouter, useRoute } from "vue-router";
+const router = useRouter();
+const route = useRoute();
+
 const bgForm = ref(null);
 const dataTable = ref(null);
 const headers = [
@@ -343,24 +347,8 @@ const changeSize = (size) => {
 }; // 改变每页条数
 
 const register = () => {
-  state.formData = {
-    name: "",
-    describe: "",
-    state: 1,
-    p_dict_id: state.fatherRow ? state.fatherRow.dict_id : "",
-  };
-  if (state.bgForm) {
-    nextTick().then(() => {
-      state.bgForm.validate((valid) => {
-        if (!valid) {
-          state.bgForm.clearValidate();
-        }
-      });
-    });
-  }
-  state.addType = 1;
-  state.addDialog = true;
-}; // 新增字典按钮
+  router.push(`/auto-maintenance/task-manage/add`);
+};
 
 onBeforeMount(() => {
   getTypeList();