From 1fd24a26d299ab4df482c991cbfc18ddb857162f Mon Sep 17 00:00:00 2001
From: zhangjun1 <zhangjun@bd-apaas.com>
Date: Tue, 20 Jun 2023 11:19:50 +0800
Subject: [PATCH] =?UTF-8?q?[feat](=E5=85=A8=E5=B1=80=E6=A0=B7=E5=BC=8F):?=
 =?UTF-8?q?=20=E5=85=A8=E5=B1=80=E6=A0=B7=E5=BC=8F=E5=8F=8A=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E6=A0=BC=E5=BC=8F=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .prettierignore                               |  10 +
 .prettierrc                                   |   7 +
 .vscode/settings.json                         |  15 +-
 jsconfig.json                                 |  13 +
 src/assets/css/common.scss                    |  45 ++
 src/main.js                                   |   2 +
 .../auto-maintenance/task-manage/index.vue    | 620 +++++++++++++++++-
 7 files changed, 708 insertions(+), 4 deletions(-)
 create mode 100644 .prettierignore
 create mode 100644 .prettierrc
 create mode 100644 jsconfig.json
 create mode 100644 src/assets/css/common.scss

diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..21b5539
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,10 @@
+node_modules
+dist
+pnpm-lock.yaml
+auto-imports.d.ts
+components.d.ts
+env.d.ts
+*.md
+iconfont.js
+.DS_Store
+.history
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..0abebd5
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+    "$schema": "http://json.schemastore.org/prettierrc",
+    "semi": true,
+    "singleQuote": false,
+    "bracketSameLine": true
+  }
+  
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index e7678a3..29a7e57 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,17 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "GitCommitPlugin.ShowEmoji": false
+  "GitCommitPlugin.ShowEmoji": false,
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "volar.inlayHints.eventArgumentInInlineHandlers": false,
+  // "path-intellisense.mappings": {
+  //   "@": "${workspaceFolder}/src"
+  // },
+  // 文件保存自动格式化
+  "editor.formatOnSave": true,
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..c7d6692
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,13 @@
+// https://code.visualstudio.com/docs/languages/jsconfig
+{
+    "compilerOptions": {
+      "baseUrl": ".",
+      "module": "commonjs",
+      "target": "es6",
+      "paths": {
+        "@/*": ["./src/*"]
+      }
+    },
+    "exclude": [".git", "node_modules", "dist"]
+  }
+  
\ No newline at end of file
diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss
new file mode 100644
index 0000000..d045c05
--- /dev/null
+++ b/src/assets/css/common.scss
@@ -0,0 +1,45 @@
+.detail_container {
+    width: 100%;
+    padding: 0 24px;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  
+    .main_container {
+      flex-grow: 1;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: stretch;
+      background-color: #fff;
+      box-shadow: 0 1px 4px 0 rgba(0, 7, 101, 0.15);
+      border-radius: 6px;
+      padding: 0 0 16px 0;
+      margin-bottom: 16px;
+      position: relative;
+  
+      .table_container {
+        padding: 0 16px;
+  
+        .el-table {
+          flex: 1;
+  
+          .mock_tip {
+            display: inline-block;
+            font-size: 12px;
+            color: #2b4695;
+            width: 43px;
+            height: 20px;
+            text-align: center;
+            background-color: #eff2fa;
+            border-radius: 3px;
+            border: solid 1px #b0bee8;
+            margin-left: 4px;
+          }
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 8fb3d7d..e3c4426 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,8 @@ import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 import bgui from "@/bg-ui";
 import "@/bg-ui/index.scss";
 
+import "./assets/css/common.scss"
+
 import msgSdk from "./msg-sdk/index.js";
 
 import App from "./App.vue";
diff --git a/src/page/main/auto-maintenance/task-manage/index.vue b/src/page/main/auto-maintenance/task-manage/index.vue
index 81696be..287eacd 100644
--- a/src/page/main/auto-maintenance/task-manage/index.vue
+++ b/src/page/main/auto-maintenance/task-manage/index.vue
@@ -1,7 +1,621 @@
 <template>
-  <div>任务管理</div>
+  <div class="detail_container">
+    <bg-breadcrumb></bg-breadcrumb>
+    <div class="main_container">
+      <bg-filter-group @search="changeSearch" v-model="filter.search" placeholder="请输入关键字">
+        <template v-slot:left_action>
+          <div class="apaas_button">
+            <el-button type="primary" @click="register">
+              <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
+              新增
+            </el-button>
+          </div>
+        </template>
+        <template v-slot:filter_group>
+          <div class="left-filter filter_list">
+            <div class="filter_item">
+              <span class="filter_title">状态</span>
+              <el-select v-model="filter.state" placeholder="请选择" style="width: 300px">
+                <el-option
+                  v-for="(item, index) in stateOptions"
+                  :key="'pushOptions' + index"
+                  :label="item.name"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="right-action apaas_button">
+            <el-button type="primary" @click="filterAction"> 查询 </el-button>
+            <el-button type="default" @click="filterClear"> 重置 </el-button>
+          </div>
+        </template>
+      </bg-filter-group>
+      <!-- <div class="table_container">
+            <div class="table bg-scroll">
+              <bg-table
+                ref="bgTable"
+                :headers="headers"
+                :rows="tableRows"
+                :isIndex="true"
+                :stripe="true">
+                <template v-slot:name="{ row }">
+                  <span class="can_click_text" @click="getChildren(row)" v-if="row.children">
+                    {{ row.name }}
+                  </span>
+                  <span v-else>
+                    {{ row.name }}
+                  </span>
+                </template>
+                <template v-slot:updated_time="{ row }">
+                  {{ row.updated_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
+                </template>
+                <template v-slot:state="{ row }">
+                  <bg-switch
+                    @click="changeUseRow(row)"
+                    :labels="['否', '是']"
+                    :values="[0, 1]"
+                    v-model="row.state"></bg-switch>
+                </template>
+                <template v-slot:action="{ row }">
+                  <bg-table-btns2
+                    :limit="3">
+                    <bg-table-btn @click="edit_row(row)" :disabled="row.state == 1"
+                      >编辑</bg-table-btn
+                    >
+                    <bg-table-btn @click="delete_row(row)" :disabled="row.state == 1"
+                      >删除</bg-table-btn
+                    >
+                    <bg-table-btn @click="moveRow(row, 1)" :disabled="!row.canMoveUp"
+                      >上移</bg-table-btn
+                    >
+                    <bg-table-btn @click="moveRow(row, 2)" :disabled="!row.canMoveDown"
+                      >下移</bg-table-btn
+                    >
+                  </bg-table-btns2>
+                </template>
+              </bg-table>
+            </div>
+            <bg-pagination
+              :page="filter.page"
+              :size="filter.size"
+              :total="tableTotal"
+              @change-page="changePage"
+              @change-size="changeSize">
+            </bg-pagination>
+          </div> -->
+    </div>
+    <!-- 新增/编辑弹窗 -->
+    <!-- <el-dialog
+      class="dialog_box"
+      :title="addType == 1 ? '新增' : '编辑'"
+      v-model="addDialog"
+      width="758px">
+      <el-form ref="bgForm" :model="formData" :rules="rules" label-width="80px" class="bg_form">
+        <el-form-item label="名称" prop="name">
+          <el-input
+            v-model.trim="formData.name"
+            show-word-limit
+            :maxlength="
+              nodeClassifyId == 'eb9c7d70-c123-42b7-8e61-dde1b022b669'
+                ? 6
+                : nodeClassifyId == 'efd9ec3b-7f18-49e2-9d88-bcca022243bb'
+                ? 4
+                : nodeClassifyId == '949a1138-4995-464e-97a9-424d097eb271'
+                ? 2
+                : 20
+            "
+            placeholder="请输入名称"></el-input>
+        </el-form-item>
+        <el-form-item label="描述" prop="describe">
+          <el-input
+            v-model="formData.describe"
+            type="textarea"
+            :autosize="{ minRows: 5 }"
+            show-word-limit
+            maxlength="200"
+            resize="vertical"
+            placeholder="请输入描述"></el-input>
+        </el-form-item>
+        <el-form-item label="是否启用" prop="state" style="margin-bottom: 0px">
+          <el-switch
+            class="bg-switch-ele"
+            v-model="formData.state"
+            :active-value="1"
+            :inactive-value="0"
+            inline-prompt
+            active-text="是"
+            inactive-text="否" />
+        </el-form-item>
+      </el-form>
+      <template v-slot:footer>
+        <div class="apaas_button">
+          <el-button type="default" @click="addDialog = false">取 消</el-button>
+          <el-button type="primary" @click="addConfirm">保 存</el-button>
+        </div>
+      </template>
+    </el-dialog> -->
+    <!-- 删除弹窗 -->
+    <!-- <el-dialog
+      class="dialog_box"
+      title="提示"
+      v-model="dialogDelete"
+      width="400px"
+      :before-close="
+        () => {
+          dialogDelete = false;
+        }
+      ">
+      <div>确定要删除此字典值吗？</div>
+      <template v-slot:footer>
+        <div class="apaas_button">
+          <el-button type="default" @click="dialogDelete = false">取 消</el-button>
+          <el-button type="primary" @click="deleteData">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog> -->
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { reactive, ref, onBeforeMount, toRefs, computed, watch, nextTick, watchEffect } from "vue";
+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";
+const bgForm = ref(null);
 
-<style lang="scss" scoped></style>
+const headers = computed(() => {
+  let _headers = [
+    {
+      label: "名称",
+      prop: "name",
+    },
+    {
+      label: "描述",
+      prop: "describe",
+      minWidth: 360,
+    },
+    {
+      label: "更新时间",
+      prop: "updated_time",
+      width: 220,
+    },
+    {
+      label: "是否启用",
+      prop: "state",
+    },
+    {
+      label: "操作",
+      prop: "action",
+      width: 176,
+      fixed: "right",
+    },
+  ];
+  return _headers;
+});
+const state = reactive({
+  bgForm,
+  typeList: [], // 分类数据
+  typeKeyword: "", // 分类删选关键词
+  nodeClassifyId: null, // 当前选中分类的uuid  用于新增字典
+  nodeId: null, // 当前选中分类的id  用于请求列表
+  timer: null, // 定时器
+  tableRows: [], // 表格数据
+  tableTotal: 0, // 表格数据条数
+  filter: {
+    state: "",
+    search: "",
+    page: 1,
+    limit: 10,
+  }, // 表格筛选项
+  stateOptions: [
+    {
+      name: "全部",
+      value: "",
+    },
+    {
+      name: "启用",
+      value: "1",
+    },
+    {
+      name: "禁用",
+      value: "0",
+    },
+  ], // 启用禁用
+  actionRow: null, // 当前操作的数据
+  dialogDelete: false, // 删除弹窗
+  addType: 0, //
+  addDialog: false,
+  formData: {
+    name: "",
+    describe: "",
+    state: 1,
+    p_dict_id: "",
+  },
+  rules: {
+    name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+    describe: [
+      { required: true, message: "请输入描述", trigger: "blur" },
+      { max: 200, message: "描述最大为200字", trigger: "blur" },
+    ],
+    state: [{ required: true, message: "请选择是否启用", trigger: "change" }],
+  },
+  fatherRow: null,
+});
+
+const dictLevel = ref(1);
+
+const getChildren = (row) => {
+  dictLevel.value = 2;
+  state.tableRows = row.children || [];
+  state.tableTotal = row.total_children;
+  state.fatherRow = row;
+};
+const backDict = () => {
+  dictLevel.value = 1;
+  state.fatherRow = null;
+  changePage(1);
+};
+const nodeClick = (item) => {
+  state.nodeId = item.id;
+  dictLevel.value = 1;
+  state.fatherRow = null;
+  state.nodeClassifyId = item.classify_id;
+  state.filter = {
+    state: "",
+    search: "",
+    page: 1,
+    limit: 10,
+  };
+  changePage(1);
+}; // 切换字典分类
+
+const searchType = () => {
+  if (state.timer) {
+    clearTimeout(state.timer);
+  }
+  state.timer = setTimeout(() => {
+    getTypeList();
+  }, 500);
+}; // 字典分类筛选
+
+const getTypeList = () => {
+  let params = {
+    name: state.typeKeyword,
+  };
+  axios
+    .get(`/apaas/system/v5/dictionary/classify/list`, { params })
+    .then((res) => {
+      if (res.data.code == 200) {
+        state.typeList = res.data.data || [];
+        state.nodeClassifyId = state.typeList[0].classify_id || null;
+        state.nodeId = state.typeList[0].id || null;
+        if (state.nodeId) {
+          getTableRows();
+        }
+      } else {
+        ElMessage.error(res.data.data);
+      }
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}; // 获取字典分类
+
+const changeSearch = (val) => {
+  state.filter.search = val;
+  changePage(1);
+}; // 表格关键字筛选
+
+const filterAction = () => {
+  changePage(1);
+}; // 查询按钮
+
+const filterClear = () => {
+  state.filter = {
+    state: "",
+    search: "",
+    limit: 10,
+    page: 1,
+  };
+  changePage(1);
+}; // 重置筛选项
+
+const getTableRows = () => {
+  let params = { ...state.filter };
+  params.id = state.nodeId;
+  axios
+    .get(`/apaas/system/v5/dictionary/list`, {
+      params,
+    })
+    .then((res) => {
+      if (res.data.code == 200) {
+        let data = res.data.data || [];
+        if (dictLevel.value == 1) {
+          state.tableRows = data;
+          state.tableTotal = res.data.total;
+        } else {
+          let row = data.filter((e) => {
+            return e.dict_id == state.fatherRow.dict_id;
+          });
+          state.tableRows = row[0].children;
+          state.tableTotal = row[0].total_children;
+        }
+        if (state.tableRows.length > 0) {
+          state.tableRows.forEach((e) => {
+            e.canMoveUp = true;
+            e.canMoveDown = true;
+          });
+          state.tableRows[0].canMoveUp = false;
+          state.tableRows[state.tableRows.length - 1].canMoveDown = false;
+        }
+      } else {
+        ElMessage.error(res.data.data);
+      }
+    });
+}; // 获取表格数据
+
+const changeUseRow = (row) => {
+  axios.put(`/apaas/system/v5/dictionary/state?id=${row.id}&state=${row.state}`).then((res) => {
+    if (res.data.code == 200) {
+      ElMessage.success(res.data.msg);
+      changePage(1);
+    } else {
+      ElMessage.error(res.data.data);
+      row.state = row.state == 0 ? 1 : 0;
+    }
+  });
+}; // 启用禁用
+
+const changePage = (page) => {
+  state.filter.page = page;
+  getTableRows();
+}; // 改变页码
+
+const changeSize = (size) => {
+  state.filter.limit = size;
+  changePage(1);
+}; // 改变每页条数
+
+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;
+}; // 新增字典按钮
+
+const edit_row = (row) => {
+  axios
+    .get(`/apaas/system/v5/dictionary/${row.id}`)
+    .then((res) => {
+      if (res.data.code == 200) {
+        state.actionRow = res.data.data;
+        state.formData = {
+          name: state.actionRow.name,
+          describe: state.actionRow.describe,
+          state: state.actionRow.state,
+          p_dict_id: state.actionRow.p_dict_id,
+        };
+      } else {
+        ElMessage.error(res.data.data);
+      }
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+  if (state.bgForm) {
+    nextTick().then(() => {
+      state.bgForm.validate((valid) => {
+        if (!valid) {
+          state.bgForm.clearValidate();
+        }
+      });
+    });
+  }
+  state.addType = 2;
+  state.addDialog = true;
+}; // 编辑按钮
+
+const addConfirm = () => {
+  state.bgForm.validate((valid) => {
+    if (valid) {
+      if (state.addType == 1) {
+        // 新增
+        let params = {
+          classify_id: state.nodeClassifyId,
+          ...state.formData,
+        };
+        axios.post(`/apaas/system/v5/dictionary/add`, params).then((res) => {
+          if (res.data.code == 200) {
+            ElMessage.success(res.data.msg);
+            state.addDialog = false;
+            changePage(1);
+          } else {
+            ElMessage.error(res.data.data);
+          }
+        });
+      } else {
+        // 编辑
+        let params = {
+          id: state.actionRow.id,
+          ...state.formData,
+        };
+        axios.put(`/apaas/system/v5/dictionary/update`, params).then((res) => {
+          if (res.data.code == 200) {
+            ElMessage.success(res.data.msg);
+            state.addDialog = false;
+            changePage(1);
+          } else {
+            ElMessage.error(res.data.data);
+          }
+        });
+      }
+    }
+  });
+}; // 确定新增/编辑
+
+const delete_row = (row) => {
+  state.dialogDelete = true;
+  state.actionRow = row;
+}; // 删除按钮
+
+const deleteData = () => {
+  axios.delete(`/apaas/system/v5/dictionary/${state.actionRow.id}`).then((res) => {
+    if (res.data.code == 200) {
+      ElMessage.success(res.data.msg);
+      state.dialogDelete = false;
+      changePage(1);
+    } else {
+      ElMessage.error(res.data.data);
+    }
+  });
+}; // 确定删除
+
+const moveRow = (row, type) => {
+  let index;
+  state.tableRows.forEach((e, i) => {
+    if (e.id == row.id) {
+      index = i;
+    }
+  });
+  let nextRow;
+  if (type == 1) {
+    // 上移
+    nextRow = state.tableRows[index - 1];
+  } else {
+    // 下移
+    nextRow = state.tableRows[index + 1];
+  }
+  let params = [
+    {
+      id: row.id,
+      sort: nextRow.sort,
+    },
+    {
+      id: nextRow.id,
+      sort: row.sort,
+    },
+  ];
+  axios
+    .put(`/apaas/system/v5/dictionary/sort`, [...params])
+    .then((res) => {
+      if (res.data.code == 200) {
+        ElMessage.success(res.data.msg);
+        changePage(1);
+      } else {
+        ElMessage.error(res.data.data);
+      }
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+onBeforeMount(() => {
+  getTypeList();
+});
+
+const {
+  typeList,
+  typeKeyword,
+  nodeClassifyId,
+  tableRows,
+  tableTotal,
+  filter,
+  stateOptions,
+  dialogDelete,
+  addType,
+  addDialog,
+  formData,
+  rules,
+} = toRefs(state);
+</script>
+
+<style lang="scss" scoped>
+.detail_container {
+  width: 100%;
+  height: calc(100vh - 56px);
+  padding: 0 24px;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  .main_container {
+    height: 100%;
+    .filter-group {
+      .left-filter {
+        flex: 1;
+        display: flex;
+        justify-content: start;
+        flex-wrap: wrap;
+      }
+      .right-action {
+        width: 144px;
+        padding-bottom: 16px;
+        .el-button {
+          width: 64px;
+        }
+      }
+    }
+
+    .table_container {
+      height: calc(100% - 70px);
+      width: 100%;
+      padding: 0 16px;
+      .table {
+        max-height: calc(100% - 64px);
+      }
+    }
+  }
+
+  .bg_form {
+    width: 100%;
+    box-sizing: border-box;
+    .el-form-item {
+      margin-bottom: 24px;
+      :deep().el-form-item__label {
+        line-height: 36px;
+        height: 36px;
+      }
+      .el-form-item__content {
+        width: 100%;
+        .el-textarea {
+          :deep().el-input__count {
+            bottom: -16px;
+            right: 4px;
+            font-family: Roboto-Regular;
+            color: #a9b1c7;
+          }
+        }
+        .bg-switch-ele {
+          width: 52px;
+          height: 24px;
+          :deep().el-switch__core {
+            width: 100%;
+            height: 24px;
+            .el-switch__inner,
+            .el-switch__action {
+              top: 3px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
-- 
2.26.0