修改操作栏目样式问题

jeecgboot-vue3-master/src/views/annualCompPoint/committee/AnnualCompPointList.vue

@@ -105,7 +105,7 @@
       canResize: false,
       useSearchForm: false,
       actionColumn: {
-        width: 550,
+        width: 220,
         fixed: 'right',
       },
       beforeFetch: (params) => {

jeecgboot-vue3-master/src/views/annualCompPoint/superAdmin/AnnualCompPointListPass.vue

@@ -2,23 +2,17 @@
   <div>
     <!--查询区域-->
     <div class="jeecg-basic-table-form-container">
-      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam"
+      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
-              :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-row :gutter="24"> </a-row>
-        <a-row :gutter="24">
-        </a-row>
       </a-form>
     </div>
     <!--引用表格-->
     <BasicTable @register="registerTable" :rowSelection="rowSelection">
       <!--插槽:table标题-->
       <template #tableTitle>
-        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增
+        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增 </a-button>
-        </a-button>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出 </a-button>
-        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出
+        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls"> 导入 </j-upload-button>
-        </a-button>
-        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">
-          导入
-        </j-upload-button>
         <a-dropdown v-if="selectedRowKeys.length > 0">
           <template #overlay>
             <a-menu>
@@ -28,28 +22,27 @@
               </a-menu-item>
             </a-menu>
           </template>
-          <a-button>批量操作
+          <a-button
+            >批量操作
             <Icon icon="mdi:chevron-down"></Icon>
           </a-button>
         </a-dropdown>
       </template>
       <!--操作栏-->
       <template #action="{ record }">
-        <TableAction :actions="getTableAction(record)"/>
+        <TableAction :actions="getTableAction(record)" />
       </template>
       <!--字段回显插槽-->
-      <template #htmlSlot="{text}">
+      <template #htmlSlot="{ text }">
         <div v-html="text"></div>
       </template>
       <!--省市区字段回显插槽-->
-      <template #pcaSlot="{text}">
+      <template #pcaSlot="{ text }">
         {{ getAreaTextByCode(text) }}
       </template>
-      <template #fileSlot="{text}">
+      <template #fileSlot="{ text }">
-        <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
+        <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
-        <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined"
+        <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载 </a-button>
-                  size="small" @click="downloadFile(text)">下载
-        </a-button>
       </template>
     </BasicTable>
     <!-- 表单区域 -->
@@ -58,33 +51,26 @@
 </template>
 
 <script lang="ts" name="AnnualCompPoint-annualCompPoint" setup>
-import {ref, reactive} from 'vue';
+  import { ref, reactive } from 'vue';
-import {BasicTable, useTable, TableAction} from '/@/components/Table';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-import {useListPage} from '/@/hooks/system/useListPage';
+  import { useListPage } from '/@/hooks/system/useListPage';
-import {columns} from './AnnualCompPoint.data';
+  import { columns } from './AnnualCompPoint.data';
-import {
+  import { list, deleteOne, batchDelete, getImportUrl, getExportUrl, updateApply } from './AnnualCompPoint.api';
-  list,
+  import { downloadFile } from '/@/utils/common/renderUtils';
-  deleteOne,
+  import AnnualCompPointModal from './components/AnnualCompPointModal.vue';
-  batchDelete,
+  import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue';
-  getImportUrl,
+  import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
-  getExportUrl,
+  import JPopup from '/@/components/Form/src/jeecg/components/JPopup.vue';
-  updateApply
+  import { router } from '/@/router';
-} from './AnnualCompPoint.api';
+  import { useRouter } from 'vue-router';
-import {downloadFile} from '/@/utils/common/renderUtils';
+  import { award } from '/@/views/award/AwardManagement.api.ts';
-import AnnualCompPointModal from './components/AnnualCompPointModal.vue'
-import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue';
-import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
-import JPopup from '/@/components/Form/src/jeecg/components/JPopup.vue';
-import {router} from "/@/router";
-import {useRouter} from "vue-router";
-import {award} from "/@/views/award/AwardManagement.api.ts";
 
-const formRef = ref();
+  const formRef = ref();
-const queryParam = reactive<any>({});
+  const queryParam = reactive<any>({});
-const toggleSearchStatus = ref<boolean>(false);
+  const toggleSearchStatus = ref<boolean>(false);
-const registerModal = ref();
+  const registerModal = ref();
-//注册table数据
+  //注册table数据
-const {prefixCls, tableContext, onExportXls, onImportXls} = useListPage({
+  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
     tableProps: {
       title: '年度比赛项目管理',
       api: list,
@@ -97,161 +83,150 @@ const {prefixCls, tableContext, onExportXls, onImportXls} = useListPage({
         fixed: 'right',
       },
       beforeFetch: (params) => {
-      queryParam.annualCompState=2;
+        queryParam.annualCompState = 2;
         return Object.assign(params, queryParam);
       },
     },
     exportConfig: {
-    name: "年度比赛项目管理",
+      name: '年度比赛项目管理',
       url: getExportUrl,
       params: queryParam,
     },
     importConfig: {
       url: getImportUrl,
-    success: handleSuccess
+      success: handleSuccess,
     },
-});
+  });
-const [registerTable, {
+  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] =
-  reload,
+    tableContext;
-  collapseAll,
+  const labelCol = reactive({
-  updateTableDataRecord,
+    xs: { span: 24 },
-  findTableDataRecord,
+    sm: { span: 7 },
-  getDataSource
+  });
-}, {rowSelection, selectedRowKeys}] = tableContext;
+  const wrapperCol = reactive({
-const labelCol = reactive({
+    xs: { span: 24 },
-  xs: {span: 24},
+    sm: { span: 16 },
-  sm: {span: 7},
+  });
-});
-const wrapperCol = reactive({
-  xs: {span: 24},
-  sm: {span: 16},
-});
 
-/**
+  /**
    * 新增事件
    */
-function handleAdd() {
+  function handleAdd() {
     registerModal.value.disableSubmit = false;
     registerModal.value.add();
-}
+  }
 
-/**
+  /**
    * 编辑事件
    */
-function handleEdit(record: Recordable) {
+  function handleEdit(record: Recordable) {
     registerModal.value.disableSubmit = false;
     registerModal.value.edit(record);
-}
+  }
 
-/**
+  /**
    * 详情
    */
-function handleDetail(record: Recordable) {
+  function handleDetail(record: Recordable) {
     registerModal.value.disableSubmit = true;
     registerModal.value.edit(record);
-}
+  }
 
-/**
+  /**
    * 年度项目管理 评奖
    */
-const  router = useRouter()
+  const router = useRouter();
-function pingjiang(record: Recordable) {
+  function pingjiang(record: Recordable) {
     // console.log(record.id)
-  award({annualCompid:record.id})
+    award({ annualCompid: record.id });
     router.push({
       path: '/award/AwardManagementList',
-    query: {id: record.id}
+      query: { id: record.id },
     });
-}
+  }
 
-/**
+  /**
    * 年度项目管理 报名管理
    */
-function applicationManage(record: Recordable) {
+  function applicationManage(record: Recordable) {
     router.push({
       path: '/workManage/works',
-    query: {annualCompPointId: record.id}
+      query: { annualCompPointId: record.id },
     });
-}
+  }
 
-/**
+  /**
    * 年度项目管理 选题管理
    */
-function topicManage(record: Recordable) {
+  function topicManage(record: Recordable) {
     router.push({
       path: '/workManage/works',
-    query: {annualCompPointId: record.id}
+      query: { annualCompPointId: record.id },
     });
-}
+  }
-
 
-/**
+  /**
    * 年度项目管理 作品管理
    */
-function workManage(record: Recordable) {
+  function workManage(record: Recordable) {
     router.push({
       path: '/workManage/works',
-    query: {annualCompPointId: record.id}
+      query: { annualCompPointId: record.id },
     });
-}
+  }
 
-/**
+  /**
    * 年度项目管理 评分管理
    */
-function scoreManage(record: Recordable) {
+  function scoreManage(record: Recordable) {
     router.push({
       path: '/workManage/works',
-    query: {annualCompPointId: record.id}
+      query: { annualCompPointId: record.id },
     });
-}
+  }
-
 
-/**
+  /**
    * 年度项目管理 评奖管理
    */
-function awardManage(record: Recordable) {
+  function awardManage(record: Recordable) {
     router.push({
       path: '/workManage/works',
-    query: {annualCompPointId: record.id}
+      query: { annualCompPointId: record.id },
     });
-}
+  }
-
-
-
 
-/**
+  /**
    * 年度项目管理 提交审核按钮
    */
-function handleSubmitandApply(record: Recordable) {
+  function handleSubmitandApply(record: Recordable) {
-  updateApply({id: record.id, annualCompState: record.annualCompState}, handleSuccess);
+    updateApply({ id: record.id, annualCompState: record.annualCompState }, handleSuccess);
-}
+  }
 
-/**
+  /**
    * 删除事件
    */
-async function handleDelete(record) {
+  async function handleDelete(record) {
-  await deleteOne({id: record.id}, handleSuccess);
+    await deleteOne({ id: record.id }, handleSuccess);
-}
+  }
-
 
-/**
+  /**
    * 批量删除事件
    */
-async function batchHandleDelete() {
+  async function batchHandleDelete() {
-  await batchDelete({ids: selectedRowKeys.value}, handleSuccess);
+    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
-}
+  }
 
-/**
+  /**
    * 成功回调
    */
-function handleSuccess() {
+  function handleSuccess() {
     (selectedRowKeys.value = []) && reload();
-}
+  }
 
-/**
+  /**
    * 操作栏
    */
-function getTableAction(record) {
+  function getTableAction(record) {
     const actions = [
       {
         label: '报名',
@@ -276,49 +251,47 @@ function getTableAction(record) {
       {
         label: '详情',
         onClick: handleDetail.bind(null, record),
-    }, {
+      },
+      {
         label: '删除',
         popConfirm: {
           title: '是否确认删除',
           confirm: handleDelete.bind(null, record),
-      }
+        },
       },
     ];
     return actions;
-}
+  }
-
 
-/**
+  /**
    * 查询
    */
-function searchQuery() {
+  function searchQuery() {
     reload();
-}
+  }
 
-/**
+  /**
    * 重置
    */
-function searchReset() {
+  function searchReset() {
     formRef.value.resetFields();
     selectedRowKeys.value = [];
     //刷新数据
     reload();
-}
+  }
 
-/**
+  /**
    *  popup组件值改变事件
    */
-function setFieldsValue(map) {
+  function setFieldsValue(map) {
     Object.keys(map).map((key) => {
       queryParam[key] = map[key];
     });
-}
+  }
-
-
 </script>
 
 <style lang="less" scoped>
-.jeecg-basic-table-form-container {
+  .jeecg-basic-table-form-container {
     .table-page-search-submitButtons {
       display: block;
       margin-bottom: 24px;
@@ -333,7 +306,10 @@ function setFieldsValue(map) {
     .query-group-split-cust {
       width: 30px;
       display: inline-block;
-    text-align: center
+      text-align: center;
+    }
+  }
+  ::v-deep(.ant-table-row) {
+    height: 120px !important;
   }
-}
 </style>