grid---选择数据功能！！

Tang_Monk

已于 2024-04-02 09:07:54 修改

阅读量443

点赞数 6

分类专栏：低代码文章标签： vue.js vscode c#

于 2024-02-18 10:08:13 首次发布

本文链接：https://blog.csdn.net/qq_58647634/article/details/136146111

版权

低代码专栏收录该内容

10 篇文章 2 订阅

订阅专栏

方法一（代码生成页面组件+Vol-Box）

总结

重写代码生成组件查询权限，新建弹出框页面，编写具体表扩展js

步骤

第一步-重写代码生成组件后台查询权限（只要是登录的用户都可访问接口）

复制代码生成组件表名在Controller层的部分类重写查询权限增删改看需求

/*
 *接口编写处...
*如果接口需要做Action的权限验证，请在Action上使用属性
*如: [ApiActionPermission("PUB_FILE_INFO",Enums.ActionPermissionOptions.Search)]
 */
using Microsoft.AspNetCore.Mvc;
//...省略

namespace VOL.Business.Controllers
{
    public partial class PUB_FILE_INFOController
    {
        private readonly IPUB_FILE_INFOService _service;//访问业务代码
        private readonly IHttpContextAccessor _httpContextAccessor;

        [ActivatorUtilitiesConstructor]
        public PUB_FILE_INFOController(
            IPUB_FILE_INFOService service,
            IHttpContextAccessor httpContextAccessor
        )
        : base(service)
        {
            _service = service;
            _httpContextAccessor = httpContextAccessor;
        }

        /// <summary>
        /// 页面数据查询
        /// </summary>
        /// <param name="loadData"></param>
        /// <returns></returns>
        /// ApiActionPermission中的内容清空后，只会验证用户是否登陆，不会验证用户查询权限
        //[ApiActionPermission()]
        //第一个参数可以输入表名，指定某张表的权限
        //[ApiActionPermission("SellOrder",ActionPermissionOptions.Search)]
        [HttpPost, Route("GetPageData")]
        [ApiActionPermission()]
        public override ActionResult GetPageData([FromBody] PageDataOptions loadData)
        {
            return base.GetPageData(loadData);
        }
    }
}

参考链接： http://v3.volcore.xyz/dev/%E9%87%8D%E5%86%99%E5%90%8E%E5%8F%B0%E6%8E%A5%E5%8F%A3%E6%9D%83%E9%99%90.html

第二步-判断当前路由，修改代码生成组件样式

onInited() {
      //框架初始化配置后
      if (this.$route.path != "/PUB_FILE_INFO") {
        this.height = 400
        this.single = true
        this.buttons.forEach((element) => {
          if (element.name != "查 询" && element.name != "高级查询") {
            element.hidden = true
          }
        });
      }
      //如果要配置明细表,在此方法操作
      //this.detailOptions.columns.forEach(column=>{ });
    },

第三步-新建引用代码生成组件的弹出框组件

复制如下代码修改相关内容（回写字段，子组件引用）

<template>
  <VolBox
    v-model="model"
    :lazy="true"
    title="选择附件"
    :height="800"
    :width="1300"
    :padding="0"
  >
    <pub_file_info ref="pub_file_info"/>
    <!-- 设置弹出框的操作按钮 -->
    <template #footer>
      <div>
        <el-button type="primary" @click="addRow()">添加选择的数据</el-button>
        <el-button @click="model = false">关闭</el-button>
      </div>
    </template>
  </VolBox>
</template>
<script>
import VolBox from "@/components/basic/VolBox.vue";
import pub_file_info from "@/views/business/file_info/PUB_FILE_INFO.vue";
export default {
  components: {
    VolBox: VolBox,
    pub_file_info: pub_file_info
  },
  data() {
    return {
      model: false,
      modelType: "",
    };
  },
  methods: {
    openDemo(_modelType) {
      this.modelType = _modelType;
      this.model = true;
      //打开弹出框时，加载table数据

      // this.$refs.PUB_FILE_INFO.$refs.grid.table.load();
    },
    addRow() {
      var rows = this.$refs.pub_file_info.$refs.grid.getSelectRows();
      if (!rows || rows.length == 0) {
        return this.$message.error("请选择行数据");
      }

      //获取回写到明细表的字段
      //使用数组的map()方法对rows数组进行遍历，并返回一个新的数组。
      let _rows = rows.map((row) => {
        return {
          FILE_URL: row.FILE_URL,
        };
      });

      //回写数据到表单
      this.$emit("parentCall", ($parent) => {
        //将选择的数据合并到表单中(注意框架生成的代码都是大写，后台自己写的接口是小写的)
        //enable是数字类型，框架绑定下拉框的时候要转换成字符串
        $parent.getRow(_rows, this.modelType);
      });
      //关闭当前窗口
      this.model = false;
    },
  },
};
</script>

第四步-编写引用弹出框的表的扩展js

导入刚创建的model子组件

import modelHeader from '@/extension/business/device_info/extend/ET_DEVICE_INFO_ModelHeader.vue'

注册组件

components: {
    //...省略
    //新建、编辑弹出框扩展组件
    modelHeader: modelHeader,
    //...省略
  },

添加回写方法

getRow(rows, modelType) {
      if (modelType == "ET_DEVICE_INFO_ModelHeader") {
        //将选择的数据合并到表单中(注意框架生成的代码都是大写，后台自己写的接口是小写的)
        this.editFormFields.FILE_URL = rows[0].FILE_URL;
      }
    },

添加选择数据的字段

onInit() {
	//选择数据源功能
      this.editFormOptions.forEach(x => {
        x.forEach(item => {
          if (item.field == 'FILE_URL') {
            //给编辑表单设置[选择数据]操作,extra具体配置见volform组件api
            item.extra = {
              icon: "el-icon-zoom-out",
              text: "选择数据",
              style: "color:#2196F3;font-size: 12px;cursor: pointer;",
              click: item => {
                this.$refs.modelHeader.openDemo("ET_DEVICE_INFO_ModelHeader");
              }
            }
          }
        })
      })
}

方法二(Vol-Table+Vol-Box)

总结

新建modelBody组件，编写表的扩展js

步骤

第一步-新建modelBody组件

复制如下代码修改相关内容

<template>
  <VolBox
    v-model="model"
    :lazy="true"
    title="选择附件"
    :height="800"
    :width="1000"
    :padding="15"
  >
    <!-- 设置查询条件 -->
    <div style="padding-bottom: 10px">
      <span style="margin-right: 20px">附件名称</span>
      <el-input
        placeholder="请输入附件名称"
        style="width: 200px"
        v-model="FILE_NAME"
      />
      <el-button
        type="primary"
        style="margin-left: 10px"
        size="small"
        icon="Search"
        @click="search"
        >搜索</el-button
      >
    </div>

    <!-- vol-table配置的这些属性见VolTable组件api文件 -->
    <vol-table
      ref="mytable"
      :loadKey="true"
      :columns="columns"
      :pagination="pagination"
      :pagination-hide="false"
      :max-height="380"
      :url="url"
      :index="true"
      :single="true"
      :defaultLoadPage="defaultLoadPage"
      @loadBefore="loadTableBefore"
      @loadAfter="loadTableAfter"
    ></vol-table>
    <!-- 设置弹出框的操作按钮 -->
    <template #footer>
      <div>
        <el-button type="primary" @click="addRow()">添加选择的数据</el-button>
        <el-button @click="model = false">关闭</el-button>
      </div>
    </template>
  </VolBox>
</template>
<script>
import VolBox from "@/components/basic/VolBox.vue";
import VolTable from "@/components/basic/VolTable.vue";
export default {
  components: {
    VolBox: VolBox,
    VolTable: VolTable,
  },
  data() {
    return {
      model: false,
      defaultLoadPage: true, //第一次打开时不加载table数据，openDemo手动调用查询table数据
      FILE_NAME: "", //查询条件字段  产品详细信息编号
      TYPE: "", //查询条件字段  产品详细信息名称
      modelType: "",
      url: "api/PUB_FILE_INFO/GetPageData", //加载数据的接口
      columns: [
        {field:'TYPE',title:'设备类型',type:'string',bind:{ key:'企业设备类型',data:[]},
        //...其余省略不写去代码生成的vue去复制
      ],
      pagination: {}, //分页配置，见voltable组件api
    };
  },
  methods: {
    openDemo(_modelType) {
      this.modelType = _modelType;
      this.model = true;
      //打开弹出框时，加载table数据

      this.$refs.mytable.load();
    },
    search() {
      //点击搜索
      this.$refs.mytable.load();
    },
    addRow() {
      var rows = this.$refs.mytable.getSelected();
      if (!rows || rows.length == 0) {
        return this.$message.error("请选择行数据");
      }

      //获取回写到明细表的字段
      //使用数组的map()方法对rows数组进行遍历，并返回一个新的数组。
      let _rows = rows.map((row) => {
        return {
          FILE_URL: row.FILE_URL,
        };
      });

      //回写数据到表单
      this.$emit("parentCall", ($parent) => {
        //将选择的数据合并到表单中(注意框架生成的代码都是大写，后台自己写的接口是小写的)
        //enable是数字类型，框架绑定下拉框的时候要转换成字符串
        $parent.getRow(_rows, this.modelType);
      });
      //关闭当前窗口
      this.model = false;
    },
    //这里是从api查询后返回数据的方法
    loadTableAfter(row) {},
    loadTableBefore(params) {
      //查询前，设置查询条件
      if (this.FILE_NAME) {
        params.wheres.push({
          name: "FILE_NAME",
          value: this.FILE_NAME,
          displayType: "like",
        });
      }
      if (this.TYPE) {
        params.wheres.push({
          name: "TYPE",
          value: this.TYPE,
        });
      }
      return true;
    },
  },
};
</script>

第二步-编写表的扩展js

导入刚创建的model子组件

import modelHeader from '@/extension/business/device_info/extend/ET_DEVICE_INFO_ModelHeader.vue'

注册组件

components: {
    //...省略
    //新建、编辑弹出框扩展组件
    modelHeader: modelHeader,
    //...省略
  },

添加回写方法

getRow(rows, modelType) {
      if (modelType == "ET_DEVICE_INFO_ModelHeader") {
        //将选择的数据合并到表单中(注意框架生成的代码都是大写，后台自己写的接口是小写的)
        this.editFormFields.FILE_URL = rows[0].FILE_URL;
      }
    },

添加选择数据的字段

onInit() {
	//选择数据源功能
      this.editFormOptions.forEach(x => {
        x.forEach(item => {
          if (item.field == 'FILE_URL') {
            //给编辑表单设置[选择数据]操作,extra具体配置见volform组件api
            item.extra = {
              icon: "el-icon-zoom-out",
              text: "选择数据",
              style: "color:#2196F3;font-size: 12px;cursor: pointer;",
              click: item => {
                this.$refs.modelHeader.openDemo("ET_DEVICE_INFO_ModelHeader");
              }
            }
          }
        })
      })
}