DotNet VOL.Core框架学习使用笔记(二)(持续更新)

2023-7-5

生成代码的列表界面，在数据行里增加一个操作列 查看按钮，打开编辑框，然后让编辑框成为一个只读的查看界面。

页面对应的js文件中增加如下 this.columns.push 函数内容。 按钮的点击事件 重点代码 this.edit(row);  这就是框架里编辑按钮对应的buttons.js中打开编辑界面操作的函数。 然后通过this.editFormOptions.forEach 遍历编辑框所有字段，给他们的type设置为label。

 this.editFormOptions.forEach(x => {
          x.forEach(item => {
            item.type='label';
          })
        })

onInit() {  //框架初始化配置前，
        //示例：在按钮的最前面添加一个按钮
        //   this.buttons.unshift({  //也可以用push或者splice方法来修改buttons数组
        //     name: '按钮', //按钮名称
        //     icon: 'el-icon-document', //按钮图标vue2版本见iview文档icon，vue3版本见element ui文档icon(注意不是element puls文档)
        //     type: 'primary', //按钮样式vue2版本见iview文档button，vue3版本见element ui文档button
        //     onClick: function () {
        //       this.$Message.success('点击了按钮');
        //     }
        //   });

        //示例：设置修改新建、编辑弹出框字段标签的长度
        this.boxOptions.labelWidth = 150;

        this.columns.push({
          title: '操作',
          field: '操作',
          width: 150,
          align: 'center',
          render: (h, { row, column, index }) => {
            return (
              <div>
                <el-button
                  onClick={($e) => {
                    this.edit(row);
                  }}
                  type="primary"
                  plain
                  size="small"
                  style="height:26px; padding: 10px !important;"
                >
                  查看
                </el-button> 
              </div>
            );
          }
        });

        this.editFormOptions.forEach(x => {
          x.forEach(item => {
            item.type='label';
          })
        })
    },

效果图如下：

---

2023-7-9 

使用VolBox组件包装的方式，弹出一个页面时。我们是做了一个专门的弹出页面，用VolBox包装了一个第三页面。比如A页面是查询列表，需要在操作列弹出另一个功能里的查询C页面（在这个查询也列表里编辑数据）；那么就是建立一个B页面，里面用VolBox ，VolBox中再通过组件引用的方式插入页面C。  那这种方式需要从A页面的操作按钮事件传递他的数据ID到页面C，用来给C筛选数据，这样跨越2个页面的传递参数，可以用  this.$store.getters.data().变量名 的方式来传递参数。

A页面向全局变量赋值ID：

 C页面在searchBefore函数中，取出全局变量的值，param.wheres.push 的方式给自己的查询加pro_id条件。

---

设置编辑列 ，在onInit()函数中加代码

 this.columns.forEach(row => {

          if (row.field == "delivery_describe") {
            //强制设置为编辑列，类型为switch
            row.edit = { type: "textarea", keep: true };
            //手动绑定数据源
            //如果设置key的字典编号，data设置空数组会自动绑定数据源
            // row.bind = { key: "enable", data: [{ key: 0, value: '禁用' }, { key: 1, value: '启用' }] };
            //绑定switch切换事件
            let $this = this;
            row.onChange = function (options, row, _columns, status) {
              //在此处可以将数据提到后台处理
              // $this.$Message.info(status ? "true" : "false");
            }
          }

          if (row.field == "att_path") {
            //强制设置为编辑列，类型为switch
            row.edit = { type: "file", keep: true };
            //是否自动上传
            row.edit.autoUpload = true;
            //多文件上传
            row.edit.multiple = true;
            //最多上传3个文件
            row.edit.maxFile = 3;
            row.edit.maxSize=1000;
          }

          if (row.field == "delivery_state") {
            row.hidden = true;
          }
          if (row.field == "delivery_audit_intro") {
            row.hidden = true;
          }
          if (row.field == "delivery_audit_time") {
            row.hidden = true;
          }

        });