From 9802889253b2a104c6b1c93f8bfafd62658ed4a5 Mon Sep 17 00:00:00 2001
From: zhangjun1 <zhangjun@bd-apaas.com>
Date: Wed, 21 Jun 2023 16:48:25 +0800
Subject: [PATCH] =?UTF-8?q?[feat](=E6=96=B0=E5=A2=9E=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86):=20=E5=AE=8C=E6=88=90=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E9=9D=99=E6=80=81=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/bg-ui/bg-code-editor.vue                  |  24 ++-
 src/bg-ui/bg-form-gap.vue                     |   4 +-
 .../task-manage/add/base-info.vue             |  57 ++++++
 .../task-manage/add/finish.vue                |  49 ++++++
 .../task-manage/add/index.vue                 | 166 ++++++++++++++++++
 .../task-manage/add/use-content.vue           |  71 ++++++++
 .../auto-maintenance/task-manage/index.vue    |  24 +--
 7 files changed, 371 insertions(+), 24 deletions(-)
 create mode 100644 src/page/main/auto-maintenance/task-manage/add/base-info.vue
 create mode 100644 src/page/main/auto-maintenance/task-manage/add/finish.vue
 create mode 100644 src/page/main/auto-maintenance/task-manage/add/index.vue
 create mode 100644 src/page/main/auto-maintenance/task-manage/add/use-content.vue

diff --git a/src/bg-ui/bg-code-editor.vue b/src/bg-ui/bg-code-editor.vue
index 4683c9c..827c959 100644
--- a/src/bg-ui/bg-code-editor.vue
+++ b/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;
diff --git a/src/bg-ui/bg-form-gap.vue b/src/bg-ui/bg-form-gap.vue
index 1379940..ec0d021 100644
--- a/src/bg-ui/bg-form-gap.vue
+++ b/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>
diff --git a/src/page/main/auto-maintenance/task-manage/add/base-info.vue b/src/page/main/auto-maintenance/task-manage/add/base-info.vue
new file mode 100644
index 0000000..5135d36
--- /dev/null
+++ b/src/page/main/auto-maintenance/task-manage/add/base-info.vue
@@ -0,0 +1,57 @@
+<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>
diff --git a/src/page/main/auto-maintenance/task-manage/add/finish.vue b/src/page/main/auto-maintenance/task-manage/add/finish.vue
new file mode 100644
index 0000000..4fd7fd6
--- /dev/null
+++ b/src/page/main/auto-maintenance/task-manage/add/finish.vue
@@ -0,0 +1,49 @@
+<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>
diff --git a/src/page/main/auto-maintenance/task-manage/add/index.vue b/src/page/main/auto-maintenance/task-manage/add/index.vue
new file mode 100644
index 0000000..844f920
--- /dev/null
+++ b/src/page/main/auto-maintenance/task-manage/add/index.vue
@@ -0,0 +1,166 @@
+<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>
diff --git a/src/page/main/auto-maintenance/task-manage/add/use-content.vue b/src/page/main/auto-maintenance/task-manage/add/use-content.vue
new file mode 100644
index 0000000..018830d
--- /dev/null
+++ b/src/page/main/auto-maintenance/task-manage/add/use-content.vue
@@ -0,0 +1,71 @@
+<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>
diff --git a/src/page/main/auto-maintenance/task-manage/index.vue b/src/page/main/auto-maintenance/task-manage/index.vue
index 4060411..b920fc2 100644
--- a/src/page/main/auto-maintenance/task-manage/index.vue
+++ b/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();
-- 
2.26.0