Skip to content

更新维护日志

2024-5-18

  • 增加tree-select组件

2024-5-11

  • 移除gis-table的按钮默认值

2024-5-7

  • form提交失败 增加 关闭按钮loading操作

通过抓取handleError,调用this.$gisModalLoading(boolean,refName);实现

js
this.$gisModal({
  title: "新增",
  ref: "add",
  width: 500,
  buttons: [
    {
      title: "确定",
      type: "primary",
      close: false,
      event: e => {
        e.handleSubmit();
      }
    }
  ],
  render: h => {
    return h(dataRuleForm, {
      props: {
        mode: "add",
        appCode: this.activeTreeNode.value
      },
      on: {
        handleSubmit: () => {
          this.$gisModalRemove("add");
          this.$refs.gisTable.handleRefresh();
        },
        handleError:() =>{
          this.$gisModalLoading(false,"add");
        }
      }
    });
  }
});

2024-4-28

  • form内table增加分页

通过配置 pageConfig

js
{
  type: "table", // 组件类型 必填
  field: "table", // 对应字段 必填
  title: "表格", // 中文标题 必填
  hiddenLabel: true, // 隐藏title 必填
  label: "表格", // 表格内中文标题 必填
  mode: "add", // 当前表格的操作状态 必填
  pageConfig:{
    enable: true,
    pageSize:5,
    pageSize0pts: [5,20,50]
  },
  column: [
    {
      title: "input",
      key: "input",
      type: "input",
    }
  ]
}

2024-4-25

  • gis-form-table 校验默认非空修改为汉字提示

2024-3-28

  • Gis-table的按钮增加drop下拉模式,通过配置children实现
js
{
  key: "more",
  title: "批量操作",
  icon: "md-redo",
  type: "primary",
  children:[
    {
      key: "download",
      title: "批量导入模板",
      icon: "md-cloud-download",
      type: "primary",
      permission: "template",
    },
    {
      key: "import",
      title: "批量导入",
      icon: "md-cloud-upload",
      type: "primary",
      permission: "import",
    },
    {
      key: "review",
      title: "批量审核",
      icon: "ios-people",
      type: "primary",
      permission: "review",
    },
    {
      key: "batchEdit",
      title: "批量编辑",
      icon: "ios-brush",
      type: "primary",
      permission: "batchEdit",
    },
  ]
}

2024-1-23

el-form-table增加数据验证

需要执行npm i async-validator安装iview使用的数据校验器,使用方式与iview一致

js
 {
    type: "table",
    field: "zcyt",
    hiddenLabel: true,
    label: "项目资产用途",
    validate: true, //整体有没有数据的校验
    value: [],
    column: [
      {
        type: "input",
        title: "面积(㎡)",
        key: "mj",
        minWidth: 90,
        validate: [ //自定义校验,和form的保持一致
          {
            required: true,
            message: '校验数据是否填写',
          },
          {
            validator: (rule, value, callback, source, options) => {
              if (value === 'admin') {
                callback(new Error('用户名不能为admin'));
              } else {
                callback()
              }
            },
            trigger: "blur"
          },
          {
            validator: validateTwoDecimal
          }
        ]
      },
      {
        type: "number",
        title: "套数",
        key: "ts",
        minWidth: 90,
        validate: true //校验数据是否填写
      },
    ],
    buttons: [],
  },

弹窗按钮 loading

需要手动关闭弹窗

  • 不使用自定义按钮:

使用iview modal原生的footer可以:footerHide:false

js
this.$gisModal({
  title: "确认更新请求",
  content: "更新请求可能会造成数据更新,请谨慎操作,确认要更新请求?",
  loading: true,
  footerHide: false,
  onOk: () => {
    setTimeout(() => {
      this.$gisModalRemove()
    }, 2000);
  },
  onCancel: () => { }
});
  • 自定义按钮:

在按钮上加 loading: true,buttonLoading: false,

js
this.$gisModal({
  title: "确认更新请求",
  content: "更新请求可能会造成数据更新,请谨慎操作,确认要更新请求?",
  buttons: [
    {
      title: "确定",
      type: "primary",
      loading: true,
      buttonLoading: false,
      event: () => {
        setTimeout(() =>{
          this.$gisModalRemove()
        }, 2000);
      },
    }
  ],
});

dictTree使用

js
{
  title: "项目分类",
  key: "xmflbm",
  align: "center",
  minWidth: 250,
  dictTree:$SYSCONST.dictTree.xmfl,
  // 不需要render
  // render: (h, param) => {
  //   const xmflbm = param.row.xmflbm;
  //   if (typeof xmflbm === 'string') {
  //     const labels = this.getXmflLabel(xmflbm);
  //     return h('span', labels.join('/'));
  //   } else {
  //     return h('span', xmflbm);
  //   }
  // },
},

table内的按钮权限配置

本身支持该功能,但需要注意最终显示效果,如果只有单个按钮,建议将权限设置在column上

js
{
  title: "操作",
  key: "action",
  width: 98,
  align: "center",
  fixed: "right",
  render: (h, params) => {
    return h("div", [
      h(
        "Button",
        {
          props: {
            type: "error",
            size: "small",
          },
          // 权限控制
          directives: [{ name: 'has', value: "deleteOne" }],
          on: {
            click: () => {
              this.remove(params.row);
            }
          }
        },
        "删除"
      )
    ]);
  }
}