本司低代码平台运用的总结，无参考价值！！！
一、明细子表
1.反写明细子表数据
2.让明细子表某列控件只读
3.根据页面状态，控制明细子表某一列隐藏
4.明细子表某一列赋值(明细表中已有数据)
5.整体覆盖明细表
6.明细子表以表单方式打开获取父页面的数据
7.选择表单带出对应明细表数据
二、定制的组件
1.文件上传
const ctx = exports.ctx;
const utils = exports.utils;
const http = utils.getHttp()
const isMobile = utils.getDevice() === 'mobile'
//弄一个全局的变量
var url=window.location.origin;
var request="https://cloud.lihuamuye.com";
console.log(url,"这是url");
if(url!="https://cloud.lihuamuye.com"){
url="https://www.lihuamuye.cn";
console.log(url,"这是判断后的url")
}
export const import_file_btn = {
template:
`
<a-button type="primary" @click="handleShowModal">导入</a-button>
<a-modal v-model:visible="visible" bodyStyle="min-height: auto !important;" :destroyOnClose="true" title="设备档案导入" style="height:500px"
@ok="handleScoreEnding" @cancel="handleCancel">
<div style="margin-top:20px;">
<ok-department-select
:value="value"
.multiple=false
.update="updateValue"
placeholder="请选择导入的组织"
></ok-department-select>
</div>
<div style="margin-top:20px;">
<div style="text-align: center;padding-bottom: 20px;">点击下载导入模板<a @click="download_template" style="margin-left:6px">设备档案导入模板.xlsx</a></div>
<ok-upload-drag :fileList="fileList" .onError="onError" .update="updateFile" .multiple=false .data="fileData" .action="action"></ok-upload-drag>
</div>
</a-modal>`
,
props: ['instance', 'name', 'value', 'rowIndex', 'pageStatus', 'permissions'],
emits: ['change'],
data: function () {
return {
visible: false,//控制弹出层是否显示
fileList: [], //选择的文件的id
value: [], //选择的部门的id
fileData: {}, //提交文件传给接口的参数
action: url+'/em/api/v1/public/equipment/uploadEquipment',
exportUrl: url+'/em/api/v1/public/equipment/exportEquipmentTemplate',
orgId: ""
};
},
mounted: function () {
this.$emit('change', 777)//用于更新数据
},
methods: {
handleShowModal() {
this.visible = true
},
// 获取所选的部门
updateValue(e) {
console.log(e)
this.value = e
this.fileData["userId"] = utils.getUserInfo().employee_id
this.fileData["orgId"] = this.value[0]
console.log(this.fileData)
this.orgId = this.value[0]
},
// 获取上传的文件
updateFile(e) {
console.log(e)
// this.fileList = e.fileList
// this.fileData["file"] = e
console.log(this.fileData)
},
// handleChange(info) {
// if (info.file.status === 'done') {
// if (info.file.response.code != '000000') {
// window.antd.message.error(info.file.response.message)
// } else {
// window.antd.message.success('导入成功')
// }
// } else if (info.file.status === 'error') {
// window.antd.message.error('导入失败')
// }
// },
// 确认
async handleScoreEnding() {
this.visible = false
window.updateList()
this.fileList = []
this.value = []
},
// 取消
handleCancel() {
this.value = []
this.fileList = []
this.visible = false
},
onError(e) {
console.log(e)
window.antd.message.error(e.error.message)
},
// 下载模板
download_template() {
if (this.orgId != ''&&this.orgId !=undefined) {
window.open(this.exportUrl+"?orgId="+this.orgId, "_self")
} else {
window.antd.message.error('请选择部门后才能导出模板');
return;
//window.open(this.exportUrl+"?orgId=","_self")
}
setTimeout(() => {
window.antd.message.success('下载成功')
}, 1000);
}
}
}
//手写导出
export const export_equment = {
template: `
<a-button type="primary" @click.stop="exportSampleFile">导出</a-button>`,
props: ['instance', 'name', 'value', 'rowIndex', 'pageStatus', 'permissions'],
emits: ['change'],
data: function () {
return {
getSelectedRowData: [],
url: '',
};
},
mounted: function () {
// 开启表格多选模式
ctx.setInstance(this.instance.parent, 'isShowSelection', true)
ctx.on('checked', payload => {
this.getSelectedRowData = payload.value
})
},
methods: {
exportSampleFile() {
let uids = []
this.getSelectedRowData.forEach(item => {
uids.push(item.uid)
})
if (uids.length == 0) {
window.antd.message.warning('请先勾选位置!')
return
}
window.open(url+"/em/api/v1/public/equipment/exportEquipmentTemplate?equipmentIds=" + uids, "_self")
},
}
}
三、打印模板配置
1.绑定数据源
- 控件绑定数据源，默认解析为存储值，显示值按照函数 ${__FuncDataDisplay__字段编码__服务编码__存储值字段编码__显示值字段编码} 获取。
2.自定义下拉选项
- 控件绑定自定义选项存在显示值存储值，默认解析为存储值，显示值按照函数 ${__FuncCustomDisplay__字段编码__表单ID__控件ID} 获取
