From a9be8298379a82d1ba3446b1012ff39f1e3f09ba Mon Sep 17 00:00:00 2001
From: wanghaohao <wanghaohao@kylinos.cn>
Date: Mon, 1 Dec 2025 17:57:41 +0800
Subject: [PATCH] add customColumn component fot content

---
 .../src/views/scriptLibrary/form/content.vue  | 87 +++++++++++++++++++
 1 file changed, 87 insertions(+)

diff --git a/automation/web/src/views/scriptLibrary/form/content.vue b/automation/web/src/views/scriptLibrary/form/content.vue
index 73b1f003..4c316736 100644
--- a/automation/web/src/views/scriptLibrary/form/content.vue
+++ b/automation/web/src/views/scriptLibrary/form/content.vue
@@ -28,11 +28,54 @@
         </template>
       </HostSearchForm>
     </div>
+    <div class="header">
+      <div>
+        <el-button class="button" type="" @click="addScript">新建脚本</el-button>
+        <el-button @click="goTag">标签</el-button>
+      </div>
+      <el-input
+      v-model="input"
+      style="max-width: 600px"
+      placeholder="Please input"
+      class="input-with-select"
+      :suffix-icon="Search"
+    >
+      <template #prepend>
+        <el-select v-model="select" placeholder="Select" style="width: 115px">
+          <el-option label="Restaurant" value="1" />
+          <el-option label="Order No." value="2" />
+          <el-option label="Tel" value="3" />
+        </el-select>
+      </template>
+    </el-input>
+    </div>
+    
     <KyTable 
         ref="tableRef" 
         :getData="getScriptList" 
         :showSelect="showSelect"
       >
+        <template #table-action>
+          <div class="os-upgrade-table-action">
+            <!-- 批量操作 -->
+            <el-dropdown>
+              <el-button class="kylin-item-button" :disabled="$refs.tableRef && $refs.tableRef.selectRow.rows.length == 0">
+                批量操作<el-icon><ArrowDown /></el-icon>
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu v-show="$refs.tableRef && $refs.tableRef.selectRow.rows.length !== 0">
+                  <el-dropdown-item v-for="item in allActionOptions" :key="item.value" :value="item.value" @click.stop="handlePopConfirm(item)">
+                    {{item.label}}
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+            <!-- 设置 -->
+            <el-button class="kylin-item-button" @click.stop="handleCustomColumn" name="plugin-os-upgrade:operation">
+              <el-icon><Setting /></el-icon>
+            </el-button>
+          </div>
+        </template>
         <!-- table表格 -->
         <template #table>
           <el-table-column
@@ -90,6 +133,20 @@
           </div>
         </template>
     </Kytable>
+    <el-dialog
+        :title="dialogTitle"
+        v-model="dialogVisible"
+        :before-close="handleCloseDialog"
+        :width="dialogWidth"
+      >
+        <CustomColumn
+            v-if="rwType === 'custom_list'"
+            @click="handleCloseDialog"
+            :customData="colData"
+            :rawData="rawData"
+            @handleOk="handleCustomColumnOk"
+          ></CustomColumn>
+    </el-dialog>
   </div>
 </template>
 <script lang="ts" setup>
@@ -99,6 +156,7 @@ import { Search } from '@element-plus/icons-vue'
 import { getScriptList,seriptDel } from '@/api/scriptLibrary';
 import { ElMessageBox, ElMessage } from 'element-plus';
 const KyTable = defineAsyncComponent(() => import('@/components/KyTable/index.vue'));
+const CustomColumn = defineAsyncComponent(() => import('@/components/customColumn/index.vue'));
 const HostSearchForm  = defineAsyncComponent(() => import( '@/components/HostSearchForm.vue'));
 const router = useRouter();
 const searchSelect = ref<string>('全部脚本')
@@ -108,12 +166,18 @@ const dialogTitle = ref<string>('自定义列');
 const dialogWidth = ref<string>('50%');
 const rwType = ref<string>('custom_list');
 const  colData = ref<any>([]);
+const rawData = ref<any>([]);
+
 const tableRef =  ref(null);
 const input = ref('')
 const select = ref('')
 
 
 const showSelect = ref<boolean>(true);
+
+const allActionOptions = [
+  {label: '去执行', value:'creatGroup'},
+]
 interface SearchCriteria {
   type: string;
 }
@@ -148,6 +212,14 @@ const editTag = (row:any) => {
   dialogWidth.value = '40%';
 }
 
+const handleCustomColumn = (row: any) => {
+  // console.log('[ 自定义列 ] >', '自定义列');
+    getCustomColumnFun()
+    rwType.value = 'custom_list';
+    dialogVisible.value = true;
+    dialogTitle.value = '自定义列';
+};
+
 const getCustomColumnFun = async( ) => {
   
   colData.value = [
@@ -174,6 +246,21 @@ const getCustomColumnFun = async( ) => {
   //     colData.value = rawData;
   //   }
 }
+const handlePopConfirm =async (row: any,type?:string) => {
+      // dialogTitle.value = t('point')
+      console.log('[ row.value ] >', row.value)
+}
+const handleCloseDialog = () => {
+  dialogVisible.value = false;
+  rwType.value = '';
+};
+const handleCustomColumnOk = (val: any) => {
+  console.log(val);
+  handleCloseDialog();
+}
+const goTag = () => {
+  router.push('/script_library/tag')
+}
 // 版本管理
 const goVersion = (row: any) => {
   console.log('[ row ] >', row)
-- 
Gitee