global-web/src/views/system/approvalProcessConfig/approvalProcessConfigList.vue

<template>
    <div class="p-2">
      <!--查询区域-->
      <div class="jeecg-basic-table-form-container">
        <a-form ref="formRef" @keyup.enter.native="reload" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row :gutter="24">
            <a-col :lg="8">
              <a-form-item name="tableId">
                <template #label><span title="表单(tableId)">表单(tableId)</span></template>
                <J-input v-model:value="queryParam.tableId" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :lg="8">
              <a-form-item name="status">
                <template #label><span title="是否启用(status)">关闭(close)</span></template>
                <JDictSelectTag v-model:value="queryParam.status" placeholder="请选择" dictCode="yes_or_no" style="width: 100%" />
              </a-form-item>
            </a-col>
            <template v-if="toggleSearchStatus">
              <a-col :lg="8">
              <a-form-item name="tableName">
                <template #label><span title="描述(tableName)">描述(tableName)</span></template>
                <J-input v-model:value="queryParam.tableName" placeholder="" />
              </a-form-item>
            </a-col>
            </template>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-col :lg="6">
                  <a-button type="primary" preIcon="ant-design:search-outlined" @click="reload">查询</a-button>
                  <a-button preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
                  <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">
                    {{ toggleSearchStatus ? '收起' : '展开' }}
                    <Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
                  </a>
                </a-col>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!--引用表格-->
      <BasicTable @register="registerTable" :rowSelection="rowSelection" size="small">
        <!--插槽:table标题-->
        <template #tableTitle>
          <a-button type="primary" v-auth="'baseCode:base_approver_set:add'" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增(add)</a-button>
          <a-button type="primary" v-auth="'baseCode:base_approver_set:exportXls'" preIcon="ant-design:export-outlined" @click="onExportXls">
            导出(export)</a-button
          >
          <a-dropdown v-if="selectedRowKeys.length > 0">
            <template #overlay>
              <a-menu>
                <a-menu-item key="1" @click="batchHandleDelete" v-auth="'baseCode:base_approver_set:deleteBatch'">
                  <Icon icon="ant-design:delete-outlined" />
                  删除(delete)
                </a-menu-item>
              </a-menu>
            </template>
            <a-button v-auth="'baseCode:base_approver_set:deleteBatch'"
              >批量操作
              <Icon icon="mdi:chevron-down" />
            </a-button>
          </a-dropdown>
        </template>
        <!--操作栏-->
        <template #action="{ record }">
          <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
        </template>
        <!--字段回显插槽-->
        <template #bodyCell="{ column, record, index, text }"> </template>
        <template #viewFile="props">
        </template>
      </BasicTable>
      <!-- 表单区域 -->
      <approvalProcessConfigModal @register="registerModal" @success="handleSuccess" />
    </div>
  </template>
  
  <script lang="ts" name="approvalProcessConfig" setup>
    import { ref, reactive, computed, unref, onMounted } from 'vue';
    import { BasicTable, useTable, TableAction } from '/@/components/Table';
    import { useListPage } from '/@/hooks/system/useListPage';
    import { useModal } from '/@/components/Modal';
    import approvalProcessConfigModal from './components/approvalProcessConfigModal.vue';
    import { columns} from './approvalProcessConfigForm.data';
    import {list,deleteOne,batchDelete, getImportUrl, getExportUrl,} from './approvalProcessConfigForm.api';
    import {JInput,JDictSelectTag } from '/@/components/Form';
    import { cloneDeep } from 'lodash-es';
    const formRef = ref();
    const queryParam = reactive<any>({});
    //注册model
    const [registerModal, { openModal }] = useModal();
    //注册table数据
    const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
      tableProps: {
        title: '审批流程配置',
        api: list,
        columns,
        canResize: false,
        useSearchForm: false,
        actionColumn: {
          width: 300,
          fixed: 'right',
        },
        scroll: {
          x: '1200px',
          y:'calc(100vh - 400px)',
        },
        beforeFetch: async (params) => {
          let rangerQuery = await setRangeQuery();
          return Object.assign(params, rangerQuery);
        },
      },
      exportConfig: {
        name: '审批流程配置',
        url: getExportUrl,
        params: queryParam,
      },
      importConfig: {
        url: getImportUrl,
        success: handleSuccess,
      },
    });
  
    const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
  
    /**
     * 高级查询事件
     */
    function handleSuperQuery(params) {
      Object.keys(params).map((k) => {
        queryParam[k] = params[k];
      });
      reload();
    }
  
    /**
     * 新增事件
     */
    function handleAdd() {
      openModal(true, {
        isUpdate: false,
        showFooter: true,
        isRevise: false,
      });
    }
    /**
     * 编辑事件
     */
    function handleEdit(record: Recordable) {
      openModal(true, {
        record,
        isUpdate: true,
        showFooter: true,
        isRevise: false,
      });
    }
    /**
     * 详情
     */
    function handleDetail(record: Recordable) {
      openModal(true, {
        record,
        isUpdate: true,
        showFooter: false,
      });
    }
    /**
     * 删除事件
     */
    async function handleDelete(record) {
      await deleteOne({ id: record.id }, handleSuccess);
    }
    /**
     * 批量删除事件
     */
    async function batchHandleDelete() {
      await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
    }
    /**
     * 成功回调
     */
    function handleSuccess() {
      (selectedRowKeys.value = []) && reload();
    }
    /**
     * 操作栏
     */
    function getTableAction(record) {
      return [
        {
          label: '编辑(edit)',
          onClick: handleEdit.bind(null, record),
          auth: 'baseCode:base_approver_set:edit',
          ifShow: record.submit == '0' || !record.submit,
        },
      ];
    }
    /**
     * 下拉操作栏
     */
    function getDropDownAction(record) {
      return [
        {
          label: '详情(detail)',
          onClick: handleDetail.bind(null, record),
        },
        {
          label: '删除(delete)',
          popConfirm: {
            title: '是否确认删除',
            confirm: handleDelete.bind(null, record),
            placement: 'topLeft',
          },
          auth: 'baseCode:base_approver_set:delete',
          ifShow: record.submit == '0' || !record.submit,
        },
      ];
    }
  
    /* ----------------------以下为原生查询需要添加的-------------------------- */
    const toggleSearchStatus = ref<boolean>(false);
    const labelCol = reactive({
      xs: 24,
      sm: 9,
    });
    const wrapperCol = reactive({
      xs: 24,
      sm: 15,
    });
    const labelCol1 = reactive({
      xs: 24,
      sm: 12,
    });
    const wrapperCol1 = reactive({
      xs: 24,
      sm: 12,
    });
    /**
     * 重置
     */
    function searchReset() {
      formRef.value.resetFields();
      selectedRowKeys.value = [];
      //刷新数据
      reload();
    }
  
    let rangeField = 'billDate,';
  
    /**
     * 设置范围查询条件
     */
    async function setRangeQuery() {
      let queryParamClone = cloneDeep(queryParam);
      if (rangeField) {
        let fieldsValue = rangeField.split(',');
        fieldsValue.forEach((item) => {
          if (queryParamClone[item]) {
            let range = queryParamClone[item];
            queryParamClone[item + '_begin'] = range[0];
            queryParamClone[item + '_end'] = range[1];
            delete queryParamClone[item];
          } else {
            queryParamClone[item + '_begin'] = '';
            queryParamClone[item + '_end'] = '';
          }
        });
      }
      return queryParamClone;
    }
  </script>
  <style lang="less" scoped>
    .jeecg-basic-table-form-container {
      padding: 0;
      .table-page-search-submitButtons {
        display: block;
        margin-bottom: 8px;
        white-space: nowrap;
      }
      .query-group-cust {
        min-width: 100px !important;
      }
      .query-group-split-cust {
        width: 30px;
        display: inline-block;
        text-align: center;
      }
      .ant-form-item:not(.ant-form-item-with-help) {
        margin-bottom: 8px;
        height: 32px;
      }
      :deep(.ant-picker),
      :deep(.ant-input-number) {
        width: 100%;
      }
    }
  </style>