【项目】复现资产搜索功能

我就是我 2023-10-03 20:07 32阅读 0赞

在现实查询、新增、修改，删除的基础上，可以实现搜索功能。  
第一步：添加搜索功能表单  
![在这里插入图片描述][dfdf0236775540dabca626e705a59cfc.png]  
展示效果：  
![在这里插入图片描述][dd8aa47f004549a3835f909e63a5c1a2.png]

第二步：在data()里添加好相应参数  
![在这里插入图片描述][6b7d72ac32d24ee4a05280c619372169.png]  
第三步：在method()中添加搜索，重置按钮方法  
![在这里插入图片描述][fbacf384b4fe44c486d6b4caed59c8e0.png]  
代码如下：

<template>
      <div class="app-container">
    
        
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="分类名称" prop="title">
            <el-input
              v-model="queryParams.title"
              placeholder="请输入分类名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="分类类别" prop="type">
            <el-select v-model="queryParams.type" placeholder="请选择分类类别" clearable size="small">
              <el-option
                v-for="dict in typeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
    	    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
    
        
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['asset:category:add']"
            >新增</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
    
    
        
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="上级" prop="pid">
              <treeselect v-model="form.pid" :options="categoryOptions" :normalizer="normalizer" placeholder="请选择上级" />
            </el-form-item>
            <el-form-item label="分类名称" prop="title">
              <el-input v-model="form.title" placeholder="请输入分类名称" />
            </el-form-item>
            <el-form-item label="分类类别" prop="type">
              <el-select v-model="form.type" placeholder="请选择分类类别">
                <el-option
                  v-for="dict in typeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="排序" prop="listSort">
              <el-input v-model="form.listSort" placeholder="请输入排序" />
            </el-form-item>
            <el-form-item label="状态">
              <el-radio-group v-model="form.status">
                <el-radio
                  v-for="dict in statusOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{
       {dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
    
    
    
    
        
        <el-table
          v-loading="loading"
          :data="categoryList"
          row-key="id"
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column label="分类名称" align="center" prop="title" />
          <el-table-column label="分类类别" align="center" prop="type" :formatter="typeFormat" />
          <el-table-column label="排序" align="center" prop="listSort" />
          <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['asset:category:edit']"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['asset:category:remove']"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
    
      </div>
    </template>
      
    <script>
    import {
           listCategory,getCategory, delCategory, addCategory, updateCategory} from "@/api/asset/category";
    import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    
    export default {
          
      name: "demo",
      components: {
          
        Treeselect
      },
      data() {
          
        return {
          
          // 遮罩层
          loading: true,
          // 资产分类表格数据
          categoryList: [],
          // 分类类别字典
          typeOptions: [],
          // 状态字典
          statusOptions: [],
          // 弹出层标题
          title: "",
          // 资产分类树选项
          categoryOptions: [],
          // 是否显示弹出层
          open: false,
          // 表单参数
          form: {
          },
          // 表单校验
          rules: {
          
            title: [
              {
           required: true, message: "分类名称不能为空", trigger: "blur" }
            ],
            type: [
              {
           required: true, message: "分类类别不能为空", trigger: "blur" }
            ],
            status: [
              {
           required: true, message: "状态不能为空", trigger: "blur" }
            ]
          },
          // 显示搜索条件
          showSearch: true,
          // 查询参数
          queryParams: {
          
            title: null,
            type: null,
          },
        };
      },
      created() {
          
        this.getList();
        this.getDicts("cate_type").then((response) => {
          
          this.typeOptions = response.data;
        });
        this.getDicts("ext_status").then((response) => {
          
          this.statusOptions = response.data;
        });
      },
      methods: {
          
        /** 查询资产分类列表 */
        getList() {
          
          this.loading = true;
          listCategory(this.queryParams).then((response) => {
          
            this.categoryList = this.handleTree(response.data, "id", "pid");
            this.loading = false;
          });
        },
        // 分类类别字典翻译
        typeFormat(row, column) {
          
          return this.selectDictLabel(this.typeOptions, row.type);
        },
        // 状态字典翻译
        statusFormat(row, column) {
          
          return this.selectDictLabel(this.statusOptions, row.status);
        },
        /** 查询部门下拉树结构 */
        getTreeselect() {
          
          listCategory().then(response => {
          
            this.categoryOptions = [];
            const data = {
           id: 0, title: '顶级节点', children: [] };
            data.children = this.handleTree(response.data, "id", "pid");
            this.categoryOptions.push(data);
          });
        },
        /** 转换资产分类数据结构 */
        normalizer(node) {
          
          if (node.children && !node.children.length) {
          
            delete node.children;
          }
          return {
          
            id: node.id,
            label: node.title,
            children: node.children
          };
        },
        // 取消按钮
        cancel() {
          
          this.open = false;
          this.reset();
        },
        // 表单重置
        reset() {
          
          this.form = {
          
            id: null,
            title: null,
            pid: 0,
            type: '1',
            listSort: null,
            status: "1"
          };
          this.resetForm("form");
        },
        /** 新增按钮操作 */
        handleAdd() {
          
          this.reset();
          this.getTreeselect();
          this.open = true;
          this.title = "添加资产分类";
        },
        /** 确认按钮 */
        submitForm() {
          
        this.$refs["form"].validate(valid => {
          
          if (valid) {
          
            if (this.form.id != null) {
          
              updateCategory(this.form).then(response => {
          
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
          
              addCategory(this.form).then(response => {
          
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
          
        this.reset();
        this.getTreeselect();
          if (row != null) {
          
            this.form.pid = row.id;
          }
          getCategory(row.id).then(response => {
          
            this.form = response.data;
            this.open = true;
            this.title = "修改资产分类";
          });
        },
      /** 删除按钮操作 */
      handleDelete(row) {
          
        this.$confirm('是否确认删除资产分类编号为"' + row.id + '"的数据项?', "警告", {
          
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
          
            return delCategory(row.id);
          }).then(() => {
          
            this.getList();
            this.msgSuccess("删除成功");
          })
      },
       /** 搜索按钮操作 */
       handleQuery() {
          
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          
          this.resetForm("queryForm");
          this.handleQuery();
        },
      }
    };
    </script>

[dfdf0236775540dabca626e705a59cfc.png]: https://img-blog.csdnimg.cn/dfdf0236775540dabca626e705a59cfc.png
[dd8aa47f004549a3835f909e63a5c1a2.png]: https://img-blog.csdnimg.cn/dd8aa47f004549a3835f909e63a5c1a2.png
[6b7d72ac32d24ee4a05280c619372169.png]: https://img-blog.csdnimg.cn/6b7d72ac32d24ee4a05280c619372169.png
[fbacf384b4fe44c486d6b4caed59c8e0.png]: https://img-blog.csdnimg.cn/fbacf384b4fe44c486d6b4caed59c8e0.png