模板文件

<template>
    <div>
      <!-----------------------------------查询条件----------------------------------->
      <el-card style="margin-bottom: 8px">
        <div class="search-div">
          <el-form
            :inline="true"
            ref="searchFormRef"
            :model="tableData.searchData"
            @keyup.enter="handleSearch"
          >
            <el-row :gutter="10" style="width: 100%">
              <el-col :span="8">
                <el-form-item
                  label="文件类型编码"
                  prop="fileCode"
                  class="search-form-item"
                >
                  <el-input
                    v-model="tableData.searchData.fileCode"
                    placeholder="请输入文件类型编码"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="8">
                <el-form-item
                  label="文件类型名称"
                  prop="fileName"
                  class="search-form-item"
                >
                  <el-input
                    v-model="tableData.searchData.fileName"
                    placeholder="请输入文件类型名称"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="8" class="search-button-right search-form-item">
                <l-button
                  @click="handleSearch"
                  text="查询"
                  btnStyle="height: 28px"
                ></l-button>
                <l-button
                  @click="handleClearSearch(searchFormRef)"
                  text="重置"
                  btnStyle="height: 28px"
                >
                </l-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <template #header>
          <span style="font-size: 16px">查询条件</span>
        </template>
      </el-card>
      <!-----------------------------------列表----------------------------------->
      <el-card shadow="never">
        <div class="conent-header">
          <span>文件类型列表</span>
          <div>
            <l-button
              type="primary"
              @click="openDialogForm()"
              text="新建"
            ></l-button>
            <l-button
              type="primary"
              @click="handleSearch()"
              text="刷新"
            ></l-button>
            <l-button
              type="primary"
              @click="handleDeleteBath()"
              text="批量删除"
            ></l-button>
          </div>
        </div>
  
        <div>
          <el-table
            ref="tableRef"
            style="width: 100%; min-height: 300px"
            :data="tableData.dataSource"
            border
            stripe
            height="calc(100vh - 275px)"
            row-key="id"
            v-loading="tableData.loading"
            element-loading-text="加载中..."
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              :reserve-selection="true"
              width="55"
            />
            <el-table-column
              prop="fileCode"
              label="文件类型编码"
              min-width="140"
            ></el-table-column>
            <el-table-column
              prop="fileName"
              label="文件类型名称"
              min-width="140"
            ></el-table-column>
            <el-table-column prop="createDate" label="创建时间" min-width="160">
              <template #default="scope">
                {{ dateFormat(scope.row.createDate, true) }}
              </template>
            </el-table-column>
            <el-table-column prop="updateDate" label="更新时间" min-width="160">
              <template #default="scope">
                {{ dateFormat(scope.row.updateDate, true) }}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="80"
              :resizable="false"
              fixed="right"
            >
              <!-- 接收 prop 的具名插槽 -->
              <template #default="scope">
                <el-button-group>
                  <l-button
                    :iconOnly="true"
                    @click="() => openDialogForm(scope.row)"
                    text="编辑"
                  >
                  </l-button>
                  <!-- <el-divider direction="vertical"></el-divider>
                  <el-popconfirm
                    title="确定删除？"
                    @confirm="handleDelete(scope.row)"
                  >
                    <template #reference>
                      <span>
                        <l-button :iconOnly="true" text="删除"></l-button
                      ></span>
                    </template>
                  </el-popconfirm> -->
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          class="self-pagination"
          small
          background
          layout="total, sizes, prev, pager, next, jumper"
          v-model:current-page="tableData.pagination.current"
          v-model:page-size="tableData.pagination.pageSize"
          :page-sizes="tableData.pagination.pageSizeOptions"
          :total="tableData.pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </el-card>
      <!-----------------------------------表单----------------------------------->
      <el-drawer
        destroy-on-close
        :size="dialogForm.width"
        :close-on-click-modal="false"
        v-model="dialogForm.visible"
        :title="dialogForm.title"
        @closed="closeAddDialogForm(dialogFormRef)"
      >
        <el-form
          ref="dialogFormRef"
          :model="dialogForm.formData"
          :rules="dialogForm.rules"
          label-position="right"
          label-width="auto"
          label-suffix=":"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="文件类型编码" prop="fileCode">
                <el-input
                  placeholder="请输入文件类型编码"
                  v-model="dialogForm.formData.fileCode"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="文件类型名称" prop="fileName">
                <el-input
                  placeholder="请输入文件类型名称"
                  v-model="dialogForm.formData.fileName"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <el-button
            class="dialog-footer-btn"
            type="primary"
            @click="submitDialogForm(dialogFormRef)"
            :loading="dialogForm.submitLoading"
          >
            保存
          </el-button>
          <el-button
            class="dialog-footer-btn"
            type=""
            @click="dialogForm.visible = false"
            >取消</el-button
          >
        </template>
      </el-drawer>
    </div>
  </template>
  
  <script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { dateFormat } from '@/utils/util';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { filterObjKeys } from '@/utils/util';
  import {
    fetchDataList,
    updateFileType,
    addFileType,
    // deleteFileType,
    deleteFileTypeBatch,
  } from './api';
  
  const searchFormRef = ref();
  const dialogFormRef = ref();
  const tableRef = ref();
  
  const dialogForm = reactive({
    title: '',
    width: '800px',
    submitLoading: false,
    visible: false,
    formData: {},
    rules: {
      fileCode: [
        { required: true, message: '该输入项为必填项!', trigger: 'blur' },
      ],
      fileName: [
        { required: true, message: '该输入项为必填项!', trigger: 'blur' },
      ],
    },
  });
  
  function openDialogForm(record) {
    if (record) {
      dialogForm.title = '修改';
      dialogForm.formData = {
        ...record,
      };
    } else {
      dialogForm.title = '新建';
    }
    dialogForm.visible = true;
  }
  
  function closeAddDialogForm(formEl) {
    formEl.resetFields();
    dialogForm.formData = {};
    dialogForm.loading = false;
  }
  
  const formSaveDataKeys = ['fileCode', 'fileName'];
  const formUpdateDataKeys = ['id', 'fileCode', 'fileName'];
  
  /**
   * 提交编辑内容
   * @param {*} formEl 表单引用
   */
  function submitDialogForm(formEl) {
    formEl.validate(async (isValid) => {
      if (isValid) {
        dialogForm.submitLoading = true;
        let success;
        if (dialogForm.formData.id) {
          const needParams = filterObjKeys(
            { ...dialogForm.formData },
            formUpdateDataKeys,
          );
          success = await updateFileType(needParams);
        } else {
          const needParams = filterObjKeys(
            { ...dialogForm.formData },
            formSaveDataKeys,
          );
          success = await addFileType({ ...needParams, id: undefined });
        }
        if (success) {
          dialogForm.visible = false;
          getTableData();
        }
        dialogForm.submitLoading = false;
      }
    });
  }
  
  const tableData = reactive({
    dataSource: [],
    loading: false,
    pagination: {
      current: 1,
      pageSize: 20,
      pageSizeOptions: ['20', '50', '100', '500'],
      total: 0,
    },
    searchData: {},
    rowSelectedList: [],
    rowSelectedkeys: [],
  });
  
  function handleSelectionChange(selection) {
    tableData.rowSelectedList = selection;
    tableData.rowSelectedkeys = selection.map((ele) => ele.id);
  }
  
  // async function handleDelete(row) {
  //   const success = await deleteFileType(row.id);
  //   if (success) {
  //     getTableData();
  //   }
  // }
  
  function handleDeleteBath() {
    if (tableData.rowSelectedkeys && tableData.rowSelectedkeys.length > 0) {
      ElMessageBox.confirm('是否批量删除？', '批量删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        const success = await deleteFileTypeBatch(tableData.rowSelectedkeys);
        if (success) {
          tableRef.value.clearSelection();
          tableData.rowSelectedkeys = [];
          getTableData();
        }
      });
    } else {
      ElMessage.error('请先勾选需要删除的数据');
    }
  }
  
  async function getTableData() {
    tableData.loading = true;
    // Js解构，重新命名
    const { pageSize, current: pageNum } = tableData.pagination;
    const response = await fetchDataList({
      pageSize,
      pageNum,
      ...tableData.searchData,
    });
    tableData.loading = false;
    tableData.dataSource = response?.dataList || [];
    tableData.pagination.total = response?.total || 0;
    tableData.pagination.pageSize = response?.pageSize || 0;
  }
  
  function handleSearch() {
    getTableData();
  }
  
  /**
   * 重置函数
   * @param {*} formEl form引用
   */
  function handleClearSearch(formEl) {
    formEl.resetFields();
    tableData.searchData = {};
    tableRef.value.clearSelection();
    tableData.rowSelectedkeys = [];
    getTableData();
  }
  
  /**
   * 当前页变化
   * @param {Number} current 当前页
   */
  function handleCurrentChange(current) {
    tableData.pagination.current = current;
    getTableData();
  }
  
  /**
   * 改变每页size数量
   * @param {Number} pageSize 页数
   */
  function handleSizeChange(pageSize) {
    tableData.pagination.pageSize = pageSize;
    getTableData();
  }
  
  onMounted(() => {
    getTableData();
  });
  </script>
  
  <style lang="less" scoped></style>
  

接口文件

/*
 * @Author: yangzihua
 * @Date: 2024-01-03 10:11:42
 * @LastEditors: yangzihua
 * @LastEditTime: 2024-07-16 10:16:08
 * @Description:
 */
import request from '@/utils/request';
import { dealTableSearch } from '@/utils/util';

export async function fetchDataList(params) {
  const needParams = dealTableSearch(params, ['materialCode', 'materialName']);
  const response = await request.get('/api/djc-qms/v1/qms/qmsFileType', {
    params: needParams,
  });
  return response.data;
}
export async function addFileType(data) {
  const response = await request.post('/api/djc-qms/v1/qms/qmsFileType/', data);
  return response.success;
}

export async function updateFileType(data) {
  const response = await request.put('/api/djc-qms/v1/qms/qmsFileType/', data);
  return response.success;
}
export async function deleteFileType(id) {
  const response = await request({
    url: `/api/djc-qms/v1/qms/qmsFileType/${id}`,
    method: 'delete',
  });
  return response.success;
}

export async function deleteFileTypeBatch(ids) {
  const response = await request.delete('/api/djc-qms/v1/qms/qmsFileType/', {
    params: {
      qmsFileTypeIds: ids,
    },
  });
  return response.success;
}