Vue脚本接口

# Vue脚本接口

## advanceSearchCodes注意点

* 脚本必须使用ES5以下的语法规则编写

## 表单（适用于主子表表单）

```TypeScript

// 使用对象
dataForm

// 获取表单信息
getDataFormInfo()

// 获取所有子表组件
getAllSubTable()

// 获取子表组件，subCode表示子表code
getSubTable(subCode)

/**
 * 添加表单字段监听
 * code: 表单字段code
 * callback: 子表字段值改变的回调
 */
addFieldListening(code, callback)

/**
 * 添加子表监听
 * code: 子表code
 * callback: 回调
 */
addSubTableListening(code, callback)

// 获取字段结构，code为表单字段code
getDataItem(code)

// 获取表单字段的值，code为表单字段code
getDataItemValue(code)

// 设置表单字段的值，code为表单字段code
setDataItemValue(code, value)

/**
 * 获取业务规则结果
 * rule: 规则字符串
 * 返回值: Promise对象
 */
getBusinessRuleResult(rule)

/**
 * 添加按钮前置
 * title: 按钮名称
 * callback: 回调
 */
addButtonBefore(title, callback)

/**
 * 隐藏表单字段或子表列
 * 当隐藏表单字段时，code为字段code
 * 当隐藏子表列时，code为[子表code].[子表列code]
 */
hideComponentByCode(code, isHidden)

// 隐藏显示表单按钮
isHiddenButton(title, isHidden)

// 刷新子表，subCode为子表code
refreshSubTable(subCode)

// 添加表单按钮加载完成的回调
addformBtnLoadedListening(callback)

// 关闭表单
closeView()

// 设置某个字段的附属属性
setExtendAttributeByCode(code, key, value)

/**
 * 执行按钮动作（仅在铁四院质量分支可用）
 */
executeFormButtonAction(title)

// 效验表单数据（仅在铁四院质量分支可用）
validateData()
```

## 子表

```JavaScript

// 使用对象
subTable

// 添加子表加载完成的回调
addLoadedCallback()

/**
 * 显示或隐藏操作按钮
 * title: 按钮名称
 * isHidden: 是否隐藏
 */
isHiddenButton(title, isHidden)

/**
 * 添加按钮前置
 * title: 按钮名称
 * callback: 回调
 */
addButtonBefore(title, callback)

/**
 * 添加按钮后置
 * title: 按钮名称
 * callback: 回调
 */
addButtonAfter(title, callback)

/**
 * 列表数据拷贝
 * code: 拷贝的列
 * targetCode: 赋值的列
 */
columnDataCopy(code, targetCode)
```

## 主表

```JavaScript
// 使用对象
dataTable

/**
 * 添加按钮前置
 * title: 按钮名称
 * callback: 回调
 */
addButtonBefore(title, callback(datas, resolve))

/**
 * 添加按钮后置-仅支持'删除'按钮
 * title: 按钮名称
 * callback: 回调
 */
addButtonAfter(title, callback)

/**
 * 获取选中的数据
 */
getSelectedItems()

/**
 * 设置列表的高级搜索值
 *	value,必须为一对象,key为组件code
 * 	如	{f_2b8984cbcd: '男','f_2b8984abcd':'一年级'}
 *	数字控件:必须为一数字区间,例 :{f_3da0dd965a: [4,7]}
 *	日期组件,CreatedTime,ModifiedTime,必须为一时间区间,例 : f_61834d2e76: ['2020-09-01 00:00:00','2020-10-01 23:59:59'] 	
 *	下拉,多选,单选,必须为一数组		f_8d60829d65 :[{
 *                    								name: "选项2",
 *                										selectionId: "选项2"
 *               								 	},{
 *                    								name: "选项1",
 *                    								selectionId: "选项1"
 *                								}]
 * 如果下拉关联其它数据源,则为:     f_8d60829d65:[{
 *                        						name: "湖北",
 *                       							value: '01',
 *               									},{
 *                       							name: "湖南",
 *                       							value: '02',
 *                   							}],
 *  如果为状态,则为一数组:'State':[{code: '0', name: '草稿'}]                             
 *
 *  isSearchImmediate 是否设置后立即刷新列表
 */
setSearchConditionValue(value,isSearchImmediate)
```

## 公共组件

```JavaScript
// 使用对象
dataForm、subTable、dataTable

/**
 * element提供的公共组件
 * 请参考element文档[https://element.eleme.cn/#/zh-CN/component/message-box]
 */
$message、$alert
// message目前支持warning,error,info
dataForm.$message({
      type: "warning",
      message: "保存失败",
    });

dataForm.$alert('保存失败，是否继续', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  showCancelButton: true
}).then(function () {
  // 确定回调
}).catch(function () {
  // 取消回调
});

// 是否是移动端
dataForm.$isMobile
```

## 公共接口

### 网络请求

* **$axios**: 项目中公共的网络请求对象，具体使用参考axios文档\[<https://github.com/axios/axios>]，例：

```JavaScript

dataForm.$axios.get('http://localhost:8080/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  });

dataForm.$axios.post('http://localhost:8080/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// response结构
{
  // 接口返回的数据
  data: {},
  // 来自服务器响应的HTTP状态码
  status: 200,
}
```

注意：禁止设置$axios.defaults.baseURL

* **$http**: 基于axios的封装，用于平台的接口请求，例：

```
// 用户登录
dataForm.$http.GET('api/Organization/LoginByCode/' + code)
  .then(function (response) {
  	if (response.Status !== 1) {
      dataForm.$message({
      type: "error",
      message: response.Message || '登录失败',
    });
	    return;
  	}
  	console.log('登录信息', response.Result);
	}).catch(function (error) {
		console.log(error);
	});

// 获取表单信息
dataForm.$http.POST('api/Form/GetFormInfo', parameters)
  .then(function (response) {
  	if (response.Status !== 1) {
      dataForm.$message({
      		type: "error",
      		message: response.Message || '获取表单信息错误',
    });
	    return;
  	}
  	console.log('表单信息', response.Result);
	}).catch(function (error) {
  	console.log(error);
	});

// response结构
{
  // 状态，1表示成功
  Status: 1,
  // 数据
  Result: {},
  // 消息
  Message: '',
}
```

### 获取当前登录人信息

```
var userInfo = dataForm.$getUserInfo();
console.log('当前登录人姓名：', userInfo.Name);
console.log('当前登录人UserID：', userInfo.ObjectID);
console.log('当前登录人Code：', userInfo.Code);
console.log('当前登录人所在部门：', userInfo.ParentName);
console.log('当前登录人所在部门ID：', userInfo.ParentID);
```

## 脚本占位符

脚本里的 \#\#keyName\#\# 形式的字符串会被替换成全局配置字段keyName的内容。

```
console.log('##RESTfulUrl##');

dataForm.$axios('##RESTfulUrl##/api/getUserInfo').then(function(res) {
  // do something
});
```

## 实例

### 实例一：统计行编辑子表的某个字段为是的数据数量

```
// 监听子表
dataForm.addSubTableListening(subCode,
function() {
  var formInfo = dataForm.getDataFormInfo();
	var subCode = '6457f7126e';
  
  // 统计数据条数
	var rule1 = "ExecuteSql(\"select count(*) from i_" + subCode + " where ParentObjectID='" + formInfo.dataId + "'\")";
	dataForm.getBusinessRuleResult(rule1).then(function(res) {
		if (!res.Success) return;
  	// 返回值必须经常两次JSON装换
		var count = JSON.parse(JSON.parse(res.Result));
		dataForm.setDataItemValue('f_3ce454dfce', count)
	});
  
  // 统计f_7ab2df8515值为1的数据条数
	var rule2 = "ExecuteSql(\"select count(*) from i_" + subCode + " where ParentObjectID='" + formInfo.dataId + "' and f_7ab2df8515='1'\")";
	dataForm.getBusinessRuleResult(rule2).then(function(res) {
		if (!res.Success) return;
    // 返回值必须经常两次JSON装换
		var count = JSON.parse(JSON.parse(res.Result));
		dataForm.setDataItemValue('f_3a72b3ba7a', count)
	});
  
  // 统计f_9c767352a2的合计
	var rule3 = "ExecuteSql(\"select sum(f_9c767352a2) from i_" + subCode + " where ParentObjectID='" + formInfo.dataId + "'\")";
	dataForm.getBusinessRuleResult(rule3).then(function(res) {
		if (!res.Success) return;
    // 返回值必须经常两次JSON装换
		var count = JSON.parse(JSON.parse(res.Result));
		dataForm.setDataItemValue('f_77f3b062f8', count)
	})
});
```

![](/media/202507//1752023496.654632.png)

### 实例二：在特定节点监听选人控件赋值

```
// 获取表单信息
var formInfo = dataForm.getDataFormInfo();

// 判断当前表单是审批节点且不是查看模式
if (formInfo.formExtensionInfo.CurrentActivityName === '审批' && formInfo.formViewType !== 'view') {
  // 回调
  var callback = function callback() {
    var rule = 'ExecuteSQLForObject("select name,code from t_user where ObjectID=\'{0}\'",{f_d48c24dac2_Id})';
    
    // 获取业务规则结果
    dataForm.getBusinessRuleResult(rule).then(function (res) {
      if (!res.Success) return;
      
      // 业务规则返回的是字符串，需要装换成自己需要的结构，比如字典或者数组
      var obj = JSON.parse(res.Result);
      
      // 设置表单字段的值
      dataForm.setDataItemValue('f_aa4c70edad', obj.name);
      dataForm.setDataItemValue('f_539d6ad0be', obj.code);
    });
  };
  
  // 获取人员控件是否有值，如果有值手动调用回调
  var value = dataForm.getDataItemValue('f_d48c24dac2');

if (typeof value === 'string' && value.length > 0) {
    callback();
  }
  
  // 监听人员控件
  dataForm.addFieldListening('f_d48c24dac2', callback);
}
```

![](/media/202507//1752023496.659775.png)

### 实例三：主表字段控制子表按钮

```
// 获取子表组件
var table1 = dataForm.getSubTable('8fb1958f70');
var table2 = dataForm.getSubTable('6e22eaa41f');
var table3 = dataForm.getSubTable('195e075ebc');

// 添加主表字段监听
dataForm.addFieldListening('f_2b0901480f', function (val) {
  // 隐藏子表按钮
  table1.isHiddenButton('新建', val === '1');
  table2.isHiddenButton('新建', val === '1');
  table2.isHiddenButton('插入', val === '1');
  table3.isHiddenButton('新建', val === '1');
  table1.isHiddenButton('百度', val === '2');
  table2.isHiddenButton('谷歌', val === '2');
});

// 添加主表字段监听
dataForm.addFieldListening('f_09607846f4', function (val) {
  // 隐藏子表按钮
  table1.isHiddenButton('查看', val === '1');
  table3.isHiddenButton('查看', val === '1');
  table1.isHiddenButton('编辑', val === '2');
  table3.isHiddenButton('编辑', val === '2');
  table1.isHiddenButton('删除', val === '3');
  table2.isHiddenButton('删除', val === '3');
  table3.isHiddenButton('删除', val === '3');
});
```

### 实例四：表单提交效验字段是否填值

```

// 添加保存按钮前置
dataForm.addButtonBefore('保存', function (resolve) {
  // 获取表单字段的值
  var value = dataForm.getDataItemValue('f_e60d3a48cd');
  // 判断值是否为空
  if (typeof value !== 'string' || value.length <= 0) {
    // 弹出提示 目前message的type只支持error,warning,info
    dataForm.$message({
      type: "error",
      message: "字段a不能为空",
    });
  } else {
    // 不为空，继续后面的处理
    resolve();
  }
});
```

### 实例五：子表删除按钮的前置和后置处理

```

### 实例六：隐藏表单字段和子表列

```
// 添加字段监听
dataForm.addFieldListening('f_57b8661128',
function(val) {
  // 当监听的字段的值为1和3时隐藏字段`f_33aa1a4410`
	dataForm.hideComponentByCode('f_33aa1a4410', val === '1' || val === '3');
  // 当监听的字段的值为2和3时隐藏字段`f_5968a4e8c7`
	dataForm.hideComponentByCode('f_5968a4e8c7', val === '2' || val === '3');
  // 当监听的字段的值为1和3时隐藏子表`9411739038`的`f_33aa1a4410`列
	dataForm.hideComponentByCode('9411739038.f_28cbf99d7e', val === '1' || val === '3');
  // 当监听的字段的值为2和3时隐藏子表`9411739038`的`f_5968a4e8c7`列
	dataForm.hideComponentByCode('9411739038.f_8b4bb9ea39', val === '2' || val === '3')
});
```

### 实例七：隐藏表单按钮

```
var callback = function callback() {
  // 获取字段 f_81f0821c4e 的值
	var value = dataForm.getDataItemValue('f_81f0821c4e');
  // 隐藏按钮
	dataForm.isHiddenButton('保存', value === '1');
	dataForm.isHiddenButton('百度', value === '2');
};
// 添加表单按钮加载完成的回调
dataForm.addformBtnLoadedListening(callback);
// 添加字段 f_81f0821c4e 的监听
dataForm.addFieldListening('f_81f0821c4e', callback);
```

### 实例八：移动端在某个流程节点下只能查看不能审批或编辑

```
// 获取表单信息
var formInfo = dataForm.getDataFormInfo();
// 获取表单状态，新增、查看、编辑
var formViewType = formInfo.formViewType;
// 获取当前流程节点
var activityName = formInfo.formExtensionInfo.CurrentActivityName;
// 判断是否是移动端，表单的流程节点是审批且不是查看模式
if (dataForm.$isMobile && activityName == '审批' && formViewType !== 'view') {
  // 提示
  dataForm.$alert('此流程无法在移动端上处理，请使用PC端处理',{
    callback:function callback(){
      // 关闭表单
      dataForm.closeView();
    }
  });
}
```

### 实例九：根据某个字段的值设置数据范围的组是否显示

```
// 设置阅读范围控件的属性的方法
var setReadRangeGroup = function setReadRangeGroup(value) {
	if (value === '是') {
    // 设置数据范围的组显示
		dataForm.setExtendAttributeByCode('ReadRange', 'isReadRangeGroup', true);
    // 设置扩展的部门范围
		dataForm.setExtendAttributeByCode('ReadRange', 'extendScopeUnitIds', ['68901fc4-eaeb-4d60-9944-2f5b2be6e690', '374f3843-e91c-4621-92ab-b915a0014907']);
    // 设置扩展的组织类型
		dataForm.setExtendAttributeByCode('ReadRange', 'extendCategories', ['bu', 'ke'])
	} else if (value === '否') {
    // 设置数据范围的组不显示
		dataForm.setExtendAttributeByCode('ReadRange', 'isReadRangeGroup', false);
    // 清空扩展的部门范围
		dataForm.setExtendAttributeByCode('ReadRange', 'extendScopeUnitIds', null);
    // 清空扩展的组织类型
		dataForm.setExtendAttributeByCode('ReadRange', 'extendCategories', null)
	}
};
// 获取字段的值
var value = dataForm.getDataItemValue('f_0862164c8e');
// 根据字段的值设置阅读范围的组
setReadRangeGroup(value);
// 监听字段的值
dataForm.addFieldListening('f_0862164c8e', setReadRangeGroup);
```

### 实例十：主列表按钮前置验证及传值

```
// 控制非完成状态的行数据无法启动

/**
* datas:列表选中的行数据
* resolve:回调函数
*/
dataTable.addButtonBefore('启动', function (datas,resolve) {
  // 判断某值是否符合要求
  if (datas[0]["f_f585b8afa7"]!=='已完成') {
    // 弹出提示 目前message的type只支持error,warning,info
    dataTable.$message({
      type: "warning",
      message: "非完成状态无法启动",
    });
  } else {
    // 继续后面的处理
    resolve();  
  }
});
```

### 实例十一：子表行编辑模式保存前置验证及传值

```
// 验证机构代码是否可用

### 实例十二：获取字段权限

```
var dataItem = dataForm.getDataItem('f_b954f24e4c');
console.log('isView, isMust, isEdit: ', dataItem.isView, 
```

### 实例十三：字段赋值

```

// 单行文本、多行文本赋值
dataForm.setDataItemValue('f_xxx', 'xxx');

// 选人、选部门、多选控件赋值
dataForm.setDataItemValue('f_xxx', [{
  Name: '张三',
  ObjectID: 'xxxx-xxxx'
}]);
```

### 实例十四：执行表单按钮动作（仅在铁四院质量分支可用）

```
// 执行提交按钮的动作
dataForm.executeFormButtonAction('提交').then(function(resolve) {
	// 提交成功的回调
	...
	// 直接调用会完成平台的后续操作
	resolve();
});
```

### 实例十五：效验表单数据（仅在铁四院质量分支可用）

```
dataForm.validateData().then(function(result) {
  // result为true时，表示效验通过
});
```

### 实例十六：按钮前置打开列表选择数据（目前仅在[release\_honda\_qianjia](http://221.234.36.41:90/icanadmin/s2cloudweb-vue/tree/release_honda_qianjia)分支可用）

```
dataForm.addButtonBefore("openlist", function(resolve) {
  var modal = dataForm.$showListModal(
    {
      AppItemCode: "b33d6585867c50ed",
      SearchCondition: []
    },
    {
      isSelectMode: true,
      isMultipleSelectMode: true,
      pagingSize: 20,
      isAdvanceSearch: true,
      advanceSearchCodes :["f_aaa","f_bbb"],
      width: "80%",
      title: "选择数据"
    },
    function(data) {
      //单选为选中的数据,多选为选中的数据数组
      console.log(data);
      modal.close();
    }
  );
});
```