表格列折叠

src/assets/icons/icon-operate-collapse.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-展开</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="1.2-表格-展开" transform="translate(-1393, -217)">
+            <g id="icon-展开" transform="translate(1393, 217)">
+                <rect id="menu-unfold-(Background)" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                <path d="M2.00115022,12 L2,13 L13.9993925,13.0138044 L14.0005436,12.0138044 L2.00115022,12 Z M2.00057555,7.5 L2.00057546,8.5 L8.49996805,8.5 L8.49996805,7.5 L2.00057555,7.5 Z M2.00115101,3 L2,4 L13.9993935,4.01380455 L14.0005436,3.01380453 L2.00115101,3 Z M10.0333014,7.60693312 L13.1999683,5.23193359 C13.5295868,4.98472023 13.9999685,5.2199111 13.9999685,5.63193369 L13.9999676,10.3819342 C13.9999676,10.7939568 13.5295858,11.0291471 13.1999674,10.7819338 L10.0333014,8.40693331 C9.76663446,8.20693302 9.76663446,7.8069334 10.0333014,7.60693312 Z M11.1666346,8.00693321 L12.9999685,6.63193369 L12.9999676,9.38193369 L11.1666346,8.00693321 Z" id="menu-unfold" fill="#8C8C8C"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/icon-operate.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-收起选中</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="1.3-表格-收起选中" transform="translate(-1268, -217)">
+            <g id="icon-收起选中" transform="translate(1268, 217)">
+                <rect id="menu-fold-(Background)" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                <path d="M13.9989042,4.00000882 L14.0000544,3.00000945 L2.00066206,2.98620605 L1.99951172,3.98620605 L13.9989042,4.00000882 Z M13.9994793,8.50000906 L13.9994793,7.50000906 L7.50008678,7.50000906 L7.50008678,8.50000906 L13.9994793,8.50000906 Z M13.9989042,13.0000095 L14.0000544,12.0000095 L2.00066207,11.9862061 L1.99951172,12.9862061 L13.9989042,13.0000095 Z M5.96675348,8.3930769 L2.80008656,10.7680769 C2.47046837,11.0152898 2.00008662,10.7800994 2.00008664,10.3680768 L2.00008685,5.61807632 C2.00008687,5.20605373 2.47046861,4.9708631 2.80008686,5.21807671 L5.96675372,7.59307671 C6.23342037,7.79307699 6.2334199,8.19307661 5.96675348,8.3930769 Z M4.83342004,7.9930768 L3.00008667,9.3680768 L3.00008678,6.61807632 L4.83342004,7.9930768 Z" id="menu-fold" fill="#595959"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/global/my-table/index.vue

@@ -1,13 +1,41 @@
 <template>
-  <t-table v-bind="attrs">
-    <slot v-for="item in slotKeys" :key="item" :name="item"></slot>
-  </t-table>
+  <div>
+    <t-table ref="table" v-bind="attrsCopy" :columns="columns">
+      <template v-for="(value, key) in slots" #[key]="slotProps" :key="key">
+        <slot
+          :name="key"
+          v-bind="slotProps"
+          v-if="!(key == 'operate' && collapse)"
+        ></slot>
+      </template>
+      <template #custom-column-header>
+        <div style="display: flex; align-items: center"
+          ><svg-icon
+            :name="!collapse ? 'operate' : 'operate-collapse'"
+            style="margin-right: 8px; cursor: pointer"
+            @click="collapse = !collapse"
+          />管理</div
+        >
+      </template>
+    </t-table>
+  </div>
 </template>
-<script setup name="MyDialog">
-import { useAttrs, useSlots, ref, watch, computed } from 'vue';
-const attrs = useAttrs();
+<script setup name="MyTable">
+import { useAttrs, useSlots, ref, computed, defineComponent } from 'vue';
+import { cloneDeep, omit } from 'lodash';
 const slots = useSlots();
-const slotKeys = computed(() => {
-  return Object.keys(slots);
+const attrs = useAttrs();
+const collapse = ref(false);
+let attrsCopy = computed(() => {
+  return omit(attrs, 'columns');
+});
+let columns = computed(() => {
+  let cols = cloneDeep(attrs.columns);
+  let operate = cols.find((item) => item.colKey === 'operate');
+  operate.title = 'custom-column-header';
+  let w = operate.width;
+  operate.width = collapse.value ? 76 : w;
+  return cols;
 });
+const table = ref();
 </script>

src/views/sop/sop-manage/office-sop/index.vue

@@ -63,7 +63,7 @@
     </SearchForm>
 
     <div class="flex-1 page-wrap">
-      <t-table
+      <my-table
         size="small"
         row-key="flowId"
         :columns="columns"
@@ -189,7 +189,7 @@
             </template>
           </div>
         </template>
-      </t-table>
+      </my-table>
     </div>
 
     <!-- SopStepDialog -->

src/views/sop/sop-manage/student-sop/index.vue

@@ -63,7 +63,7 @@
     </SearchForm>
 
     <div class="flex-1 page-wrap">
-      <t-table
+      <my-table
         size="small"
         row-key="flowId"
         :columns="columns"
@@ -185,7 +185,7 @@
             </template>
           </div>
         </template>
-      </t-table>
+      </my-table>
     </div>
 
     <!-- SopStepDialog -->