From 6621cf06b235f7f995e1bc15eb70972ac46a4000 Mon Sep 17 00:00:00 2001
From: zhangjun1 <zhangjun@bd-apaas.com>
Date: Tue, 20 Jun 2023 14:54:21 +0800
Subject: [PATCH] =?UTF-8?q?[feat](=E5=85=AC=E5=85=B1table):=20table?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E7=BB=84=E4=BB=B6=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .prettierrc.js                                |   2 +-
 src/bg-ui/bg-table-btns2.vue                  | 154 ++++----
 .../auto-maintenance/task-manage/index.vue    | 370 +++++-------------
 3 files changed, 176 insertions(+), 350 deletions(-)

diff --git a/.prettierrc.js b/.prettierrc.js
index 913b45e..858e896 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -12,7 +12,7 @@ module.exports = {
   htmlWhitespaceSensitivity: "css",
   insertPragma: false,
   jsxSingleQuote: false,
-  printWidth: 100, // 如果属性过多需要换行，减少该值
+  printWidth: 80, // 如果属性过多需要换行，减少该值
   proseWrap: "preserve",
   quoteProps: "as-needed",
   requirePragma: false,
diff --git a/src/bg-ui/bg-table-btns2.vue b/src/bg-ui/bg-table-btns2.vue
index 6e57990..e590cbb 100644
--- a/src/bg-ui/bg-table-btns2.vue
+++ b/src/bg-ui/bg-table-btns2.vue
@@ -1,36 +1,29 @@
 <template>
-  <div class="bg-table-btns" ref="bgTableBtnsRef">
+  <div ref="bgTableBtnsRef" class="bg-table-btns">
     <slot></slot>
-    <span
-      class="bg-table-btn more"
-      id="more_btn"
-      v-if="state.children.length > limit"
-      ref="lastEl"
-      @mouseenter="showMoreBtns"
-      @mouseleave="hideMoreBtns">
-      <bg-icon style="font-size: 12px; color: #2b4695" icon="#bg-ic-s-more" />
-      <teleport to="body">
-        <div
-          class="more-box"
-          :style="state.style"
-          v-if="state.showMore"
-          @mouseenter="showMoreBtns"
-          @mouseleave="hideMoreBtns">
-          <span
-            v-for="(item, index) in state.lastChildren"
-            :key="'as' + index"
-            @click="action(item.onClick, item.disabled)"
-            :class="item.disabled ? 'disabled' : ''"
-            >{{ item.name }}</span
-          >
-        </div>
-      </teleport>
-    </span>
+    <el-popover :popper-style="bgTablePopover" trigger="hover" :hide-after="50">
+      <div class="more-box" :style="state.style">
+        <span
+          v-for="(item, index) in state.lastChildren"
+          :key="'as' + index"
+          :class="item.disabled ? 'disabled' : ''"
+          @click="action(item.onClick, item.disabled)"
+          >{{ item.name }}</span
+        >
+      </div>
+      <template #reference>
+        <span v-if="state.children.length - 1 > limit" id="more_btn" ref="lastEl" class="bg-table-btn more">
+          <bg-icon style="font-size: 12px; color: #2b4695" icon="#bg-ic-s-more" />
+        </span>
+        <!-- 解决不需显示时警告问题 -->
+        <span v-else></span>
+      </template>
+    </el-popover>
   </div>
 </template>
 
 <script setup>
-import { reactive, ref, onBeforeMount, onMounted, toRefs, provide, useSlots, h, render, nextTick } from "vue";
+import { reactive, ref, onBeforeMount, onMounted, toRefs, provide, useSlots, watch, nextTick } from "vue";
 const slots = useSlots();
 
 const props = defineProps({
@@ -38,6 +31,10 @@ const props = defineProps({
     type: Number,
     default: 3,
   },
+  tableData: {
+    type: Array,
+    default: () => [],
+  },
 });
 
 const bgTableBtnsRef = ref(null);
@@ -51,60 +48,72 @@ const state = reactive({
   showMore: false,
 });
 
+watch(
+  () => props.tableData,
+  () => {
+    nextTick(() => {
+      calcTabs();
+      dealData();
+    });
+  },
+  {
+    deep: true,
+  }
+);
 const action = (event, disable) => {
   if (disable) {
     return;
   }
   event();
-  state.showMore = false
+  state.showMore = false;
 };
 
 const calcTabs = () => {
   let tabSlots = slots.default() || [];
+  let tempSlots = [];
   state.lastChildren = [];
-  if (tabSlots) {
-    tabSlots.forEach((e, idx) => {
-      if (idx + 2 > props.limit && tabSlots.length > props.limit && e.props) {
+  tabSlots.forEach((e) => {
+    //注释和v-if忽略
+    if (Object.prototype.toString.call(e.children) == "[object String]") {
+      //v-for 再次遍历
+    } else if (Object.prototype.toString.call(e.children) == "[object Array]") {
+      let children = e.children || [];
+      children.forEach((el) => {
+        //注释和v-if忽略
+        if (Object.prototype.toString.call(e.children) == "[object String]") {
+          console.log(el.type);
+        } else {
+          tempSlots.push(el);
+        }
+      });
+      //普通节点
+    } else {
+      tempSlots.push(e);
+    }
+  });
+  //   debugger;
+  if (tempSlots) {
+    tempSlots.forEach((e, idx) => {
+      if (idx + 2 > props.limit && tempSlots.length > props.limit && e.props) {
+        // console.log(e);
+        // console.log(e.props);
+
         state.lastChildren.push(e.props);
       }
     });
   }
 };
 
-const showMoreBtns = () => {
-  calcTabs();
-  dealData();
-  nextTick(() => {
-    updateSytle();
-    if (state.timer) clearTimeout(state.timer);
-    state.showMore = true;
-  });
-};
-const hideMoreBtns = () => {
-  if (state.timer) clearTimeout(state.timer);
-  state.timer = setTimeout(() => {
-    state.showMore = false;
-  }, 50);
-};
-const updateSytle = () => {
-  let { top, right } = lastEl.value.getBoundingClientRect();
-  let { width } = window.document.body.getBoundingClientRect();
-  state.style = {
-    top: `${top + 16}px`,
-    right: `${width - right - 16}px`,
-  };
-};
-
 const dealData = () => {
   let children = bgTableBtnsRef.value.children || [];
   state.children = children;
-  if (children.length > props.limit) {
+  if (children.length - 1 > props.limit) {
     children[props.limit - 1].style.display = "none";
     children[props.limit - 1].style.width = "0px";
     state.index = props.limit - 2;
     state.lastChildren[0].name = children[props.limit - 1].innerText;
   }
-  for (let index = 0; index < children.length; index++) {
+  for (let index = 0; index < children.length - 1; index++) {
     const e = children[index];
     if (index + 1 > props.limit && e.tagName == "A" && e.className.indexOf("bg-table-btn") !== -1) {
       e.style.display = "none";
@@ -114,6 +123,14 @@ const dealData = () => {
   }
 };
 
+const bgTablePopover = {
+  width: "auto",
+  maxWidth: "96px",
+  padding: "4px 0",
+  minWidth: "60px",
+  marginTop: "-5px",
+};
+
 onMounted(() => {
   calcTabs();
   dealData();
@@ -126,35 +143,20 @@ onMounted(() => {
   z-index: 200;
 }
 
-.more-box {
-  position: fixed;
-  padding: 4px 0;
-  background-color: #ffffff;
-  box-shadow: 0px 4px 12px 0px rgba(18, 30, 63, 0.1);
-  border-radius: 4px;
-  border: solid 1px #e6e9ef;
-  width: 88px;
-  z-index: 300;
-}
-
 .more-box span {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-all;
   white-space: nowrap;
-  display: block;
-  padding: 0 16px;
-  margin: 0;
-  color: #202531;
-  line-height: 34px;
-  padding-left: 16px;
-  font-size: 16px;
+  padding: 10px 16px;
+  color: #404a62;
+  line-height: 1;
+  font-size: 14px;
   cursor: pointer;
 }
 .more-box span:hover {
   background-color: #f2f3f7;
-  color: #202531;
 }
 .more-box .disabled {
   color: #a9b1c7;
diff --git a/src/page/main/auto-maintenance/task-manage/index.vue b/src/page/main/auto-maintenance/task-manage/index.vue
index 287eacd..4060411 100644
--- a/src/page/main/auto-maintenance/task-manage/index.vue
+++ b/src/page/main/auto-maintenance/task-manage/index.vue
@@ -9,20 +9,24 @@
               <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
               新增
             </el-button>
+            <el-button type="default" @click="deleteAllTips"> 批量删除 </el-button>
+            <span class="header_info"
+              >已选择 <span style="color: #202531; font-weight: bold"> {{ state.selected.length }} </span> 项
+            </span>
+            <span class="header_info can_click_text" @click="clearSelected">清空</span>
           </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>
+              <span class="filter_title">创建时间</span>
+              <el-date-picker
+                v-model="filter.time"
+                type="daterange"
+                value-format="yyyy-MM-DD"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期" />
             </div>
           </div>
           <div class="right-action apaas_button">
@@ -31,59 +35,45 @@
           </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 class="table_container">
+        <div class="table bg-scroll">
+          <bg-table
+            ref="dataTable"
+            :headers="headers"
+            :rows="tableRows"
+            @selectAc="selectRows"
+            :isIndex="true"
+            :select="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:action="{ row }">
+              <bg-table-btns2 :limit="3" :tableData="tableRows">
+                <bg-table-btn @click="useRow(row)">执行任务</bg-table-btn>
+                <bg-table-btn @click="editRow(row)">编辑</bg-table-btn>
+                <bg-table-btn @click="copyRow(row, 1)">复制</bg-table-btn>
+                <bg-table-btn @click="deleteRow(row, 2)">删除</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
@@ -164,36 +154,38 @@ import axios from "@/request/http.js";
 import { Search } from "@element-plus/icons-vue";
 import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
 const bgForm = ref(null);
+const dataTable = ref(null);
+const headers = [
+  {
+    label: "任务名称",
+    prop: "name",
+  },
+  {
+    label: "执行次数",
+    prop: "times",
+  },
+  {
+    label: "描述",
+    prop: "describe",
+    minWidth: 360,
+  },
+  {
+    label: "创建人",
+    prop: "person",
+  },
+  {
+    label: "创建时间",
+    prop: "updated_time",
+    width: 220,
+  },
+  {
+    label: "操作",
+    prop: "action",
+    width: 200,
+    fixed: "right",
+  },
+];
 
-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: [], // 分类数据
@@ -202,9 +194,10 @@ const state = reactive({
   nodeId: null, // 当前选中分类的id  用于请求列表
   timer: null, // 定时器
   tableRows: [], // 表格数据
+  selected: [], //选择数据
   tableTotal: 0, // 表格数据条数
   filter: {
-    state: "",
+    time: "",
     search: "",
     page: 1,
     limit: 10,
@@ -244,6 +237,16 @@ const state = reactive({
   fatherRow: null,
 });
 
+const selectRows = (data) => {
+  state.selected = data.selection;
+};
+
+const clearSelected = () => {
+  dataTable.value.clearTable();
+};
+
+const deleteAllTips = () => {};
+
 const dictLevel = ref(1);
 
 const getChildren = (row) => {
@@ -252,33 +255,6 @@ const getChildren = (row) => {
   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 = {
@@ -314,7 +290,7 @@ const filterAction = () => {
 
 const filterClear = () => {
   state.filter = {
-    state: "",
+    time: "",
     search: "",
     limit: 10,
     page: 1,
@@ -356,18 +332,6 @@ const getTableRows = () => {
     });
 }; // 获取表格数据
 
-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();
@@ -398,151 +362,11 @@ const register = () => {
   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);
+const { tableRows, tableTotal, filter } = toRefs(state);
 </script>
 
 <style lang="scss" scoped>
-- 
2.26.0