修改操作栏目样式问题

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,282 +51,265 @@
 </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: {
+    tableProps: {
-    title: '年度比赛项目管理',
+      title: '年度比赛项目管理',
-    api: list,
+      api: list,
-    // api: () => list({ ...params, compStatus: compStatus }),
+      // api: () => list({ ...params, compStatus: compStatus }),
-    columns,
+      columns,
-    canResize: false,
+      canResize: false,
-    useSearchForm: false,
+      useSearchForm: false,
-    actionColumn: {
+      actionColumn: {
-      width: 180,
+        width: 180,
-      fixed: 'right',
+        fixed: 'right',
+      },
+      beforeFetch: (params) => {
+        queryParam.annualCompState = 2;
+        return Object.assign(params, queryParam);
+      },
     },
-    beforeFetch: (params) => {
+    exportConfig: {
-      queryParam.annualCompState=2;
+      name: '年度比赛项目管理',
-      return Object.assign(params, queryParam);
+      url: getExportUrl,
+      params: queryParam,
+    },
+    importConfig: {
+      url: getImportUrl,
+      success: handleSuccess,
     },
-  },
-  exportConfig: {
-    name: "年度比赛项目管理",
-    url: getExportUrl,
-    params: queryParam,
-  },
-  importConfig: {
-    url: getImportUrl,
-    success: handleSuccess
-  },
-});
-const [registerTable, {
-  reload,
-  collapseAll,
-  updateTableDataRecord,
-  findTableDataRecord,
-  getDataSource
-}, {rowSelection, selectedRowKeys}] = tableContext;
-const labelCol = reactive({
-  xs: {span: 24},
-  sm: {span: 7},
-});
-const wrapperCol = reactive({
-  xs: {span: 24},
-  sm: {span: 16},
-});
-
-/**
- * 新增事件
- */
-function handleAdd() {
-  registerModal.value.disableSubmit = false;
-  registerModal.value.add();
-}
-
-/**
- * 编辑事件
- */
-function handleEdit(record: Recordable) {
-  registerModal.value.disableSubmit = false;
-  registerModal.value.edit(record);
-}
-
-/**
- * 详情
- */
-function handleDetail(record: Recordable) {
-  registerModal.value.disableSubmit = true;
-  registerModal.value.edit(record);
-}
-
-/**
- * 年度项目管理 评奖
- */
-const  router = useRouter()
-function pingjiang(record: Recordable) {
-  // console.log(record.id)
-  award({annualCompid:record.id})
-  router.push({
-    path: '/award/AwardManagementList',
-    query: {id: record.id}
-  });
-}
-
-/**
- * 年度项目管理 报名管理
- */
-function applicationManage(record: Recordable) {
-  router.push({
-    path: '/workManage/works',
-    query: {annualCompPointId: record.id}
-  });
-}
-
-/**
- * 年度项目管理 选题管理
- */
-function topicManage(record: Recordable) {
-  router.push({
-    path: '/workManage/works',
-    query: {annualCompPointId: record.id}
   });
-}
+  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] =
-
+    tableContext;
-
+  const labelCol = reactive({
-/**
+    xs: { span: 24 },
- * 年度项目管理 作品管理
+    sm: { span: 7 },
- */
-function workManage(record: Recordable) {
-  router.push({
-    path: '/workManage/works',
-    query: {annualCompPointId: record.id}
   });
-}
+  const wrapperCol = reactive({
-
+    xs: { span: 24 },
-/**
+    sm: { span: 16 },
- * 年度项目管理 评分管理
- */
-function scoreManage(record: Recordable) {
-  router.push({
-    path: '/workManage/works',
-    query: {annualCompPointId: record.id}
   });
-}
 
+  /**
+   * 新增事件
+   */
+  function handleAdd() {
+    registerModal.value.disableSubmit = false;
+    registerModal.value.add();
+  }
 
-/**
+  /**
- * 年度项目管理 评奖管理
+   * 编辑事件
- */
+   */
-function awardManage(record: Recordable) {
+  function handleEdit(record: Recordable) {
-  router.push({
+    registerModal.value.disableSubmit = false;
-    path: '/workManage/works',
+    registerModal.value.edit(record);
-    query: {annualCompPointId: record.id}
+  }
-  });
-}
 
+  /**
+   * 详情
+   */
+  function handleDetail(record: Recordable) {
+    registerModal.value.disableSubmit = true;
+    registerModal.value.edit(record);
+  }
 
+  /**
+   * 年度项目管理 评奖
+   */
+  const router = useRouter();
+  function pingjiang(record: Recordable) {
+    // console.log(record.id)
+    award({ annualCompid: record.id });
+    router.push({
+      path: '/award/AwardManagementList',
+      query: { id: record.id },
+    });
+  }
 
+  /**
+   * 年度项目管理 报名管理
+   */
+  function applicationManage(record: Recordable) {
+    router.push({
+      path: '/workManage/works',
+      query: { annualCompPointId: record.id },
+    });
+  }
 
-/**
+  /**
- * 年度项目管理 提交审核按钮
+   * 年度项目管理 选题管理
- */
+   */
-function handleSubmitandApply(record: Recordable) {
+  function topicManage(record: Recordable) {
-  updateApply({id: record.id, annualCompState: record.annualCompState}, handleSuccess);
+    router.push({
-}
+      path: '/workManage/works',
+      query: { annualCompPointId: record.id },
+    });
+  }
 
-/**
+  /**
- * 删除事件
+   * 年度项目管理 作品管理
- */
+   */
-async function handleDelete(record) {
+  function workManage(record: Recordable) {
-  await deleteOne({id: record.id}, handleSuccess);
+    router.push({
-}
+      path: '/workManage/works',
+      query: { annualCompPointId: record.id },
+    });
+  }
 
+  /**
+   * 年度项目管理 评分管理
+   */
+  function scoreManage(record: Recordable) {
+    router.push({
+      path: '/workManage/works',
+      query: { annualCompPointId: record.id },
+    });
+  }
 
-/**
+  /**
- * 批量删除事件
+   * 年度项目管理 评奖管理
- */
+   */
-async function batchHandleDelete() {
+  function awardManage(record: Recordable) {
-  await batchDelete({ids: selectedRowKeys.value}, handleSuccess);
+    router.push({
-}
+      path: '/workManage/works',
+      query: { annualCompPointId: record.id },
+    });
+  }
 
-/**
+  /**
- * 成功回调
+   * 年度项目管理 提交审核按钮
- */
+   */
-function handleSuccess() {
+  function handleSubmitandApply(record: Recordable) {
-  (selectedRowKeys.value = []) && reload();
+    updateApply({ id: record.id, annualCompState: record.annualCompState }, handleSuccess);
-}
+  }
 
-/**
+  /**
- * 操作栏
+   * 删除事件
- */
+   */
-function getTableAction(record) {
+  async function handleDelete(record) {
-  const actions = [
+    await deleteOne({ id: record.id }, handleSuccess);
-    {
+  }
-      label: '报名',
-      onClick: applicationManage.bind(null, record),
-    },
-    {
-      label: '选题',
-      onClick: topicManage.bind(null, record),
-    },
-    {
-      label: '作品管理',
-      onClick: workManage.bind(null, record),
-    },
-    {
-      label: '评分',
-      onClick: scoreManage.bind(null, record),
-    },
-    {
-      label: '评奖',
-      onClick: awardManage.bind(null, record),
-    },
-    {
-      label: '详情',
-      onClick: handleDetail.bind(null, record),
-    }, {
-      label: '删除',
-      popConfirm: {
-        title: '是否确认删除',
-        confirm: handleDelete.bind(null, record),
-      }
-    },
-  ];
-  return actions;
-}
 
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
+  }
 
-/**
+  /**
- * 查询
+   * 成功回调
- */
+   */
-function searchQuery() {
+  function handleSuccess() {
-  reload();
+    (selectedRowKeys.value = []) && reload();
-}
+  }
 
-/**
+  /**
- * 重置
+   * 操作栏
- */
+   */
-function searchReset() {
+  function getTableAction(record) {
-  formRef.value.resetFields();
+    const actions = [
-  selectedRowKeys.value = [];
+      {
-  //刷新数据
+        label: '报名',
-  reload();
+        onClick: applicationManage.bind(null, record),
-}
+      },
+      {
+        label: '选题',
+        onClick: topicManage.bind(null, record),
+      },
+      {
+        label: '作品管理',
+        onClick: workManage.bind(null, record),
+      },
+      {
+        label: '评分',
+        onClick: scoreManage.bind(null, record),
+      },
+      {
+        label: '评奖',
+        onClick: awardManage.bind(null, record),
+      },
+      {
+        label: '详情',
+        onClick: handleDetail.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+    return actions;
+  }
 
-/**
+  /**
- *  popup组件值改变事件
+   * 查询
- */
+   */
-function setFieldsValue(map) {
+  function searchQuery() {
-  Object.keys(map).map((key) => {
+    reload();
-    queryParam[key] = map[key];
+  }
-  });
-}
 
+  /**
+   * 重置
+   */
+  function searchReset() {
+    formRef.value.resetFields();
+    selectedRowKeys.value = [];
+    //刷新数据
+    reload();
+  }
 
+  /**
+   *  popup组件值改变事件
+   */
+  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 {
+    .table-page-search-submitButtons {
-    display: block;
+      display: block;
-    margin-bottom: 24px;
+      margin-bottom: 24px;
-    white-space: nowrap;
+      white-space: nowrap;
-  }
+    }
 
-  .query-group-cust {
+    .query-group-cust {
-    width: calc(50% - 15px);
+      width: calc(50% - 15px);
-    min-width: 100px !important;
+      min-width: 100px !important;
-  }
+    }
 
-  .query-group-split-cust {
+    .query-group-split-cust {
-    width: 30px;
+      width: 30px;
-    display: inline-block;
+      display: inline-block;
-    text-align: center
+      text-align: center;
+    }
+  }
+  ::v-deep(.ant-table-row) {
+    height: 120px !important;
   }
-}
 </style>