低代码平台组件使用01-基础crud表格使用教程

1.目的：通过拖拉拽形成 crud表格
2.步骤说明:
0.放入JS ：复制curd 基础js
并修改以下部分
sate.editformData 改成新建表的字段
onClick_new函数 弹窗id改成 弹窗高级中的refId
closeDialogNew函数 弹窗id改成 弹窗高级中的refId
addItem editItem函数 中需要时间处理的字段的部分
1.拖出组件 ： 图标 设置 样式（行内块 margin: left 20 top 30）
标题 设置 样式（行内块 margin: left 20 top 30）
属性（文本内容：基本crud表格组件测试）
查询筛选 设置 样式（弹性 margin:top 20 bottom 20 ）
属性（标签位置 左，
表单项中： 点添加 加入输入框 名称 年龄 性别 ，表单标识填字段名 ，标题填中文名 ）
事件 （点组件自带事件，点onSearch 绑定queryData函数）
高级表格 设置 属性（数据列中： 点加入 显示的列名称 ，数据字段填 字段名 ，标题填显示的列名，
操作栏按钮： 填新增按钮，多余的按钮去掉
分页器： 选择关闭分页器，此处不用他自带的分页器
表格数据源：表达式输入 this.state.datainfo
新增按钮 绑定函数onClick_new { “type”:false }
删除按钮 绑定函数deleteItem
）
分页器 设置 属性（显示页数：绑定变量this.state.pageNum
单页记录 绑定变量this.state.pageSize
总记录数 绑定变量this.state.pageTotal ）
高级对话框 设置 样式（定位 fixed ）//大纲视图中可控制对话框的显示与隐藏
事件 （点组件自带事件，点onOk 绑定onsubmit函数）
高级表单 设置 属性（标签位置 左 布局选 1列 标题宽度填7
标题：编辑表格
默认显示 ：去掉
表单项中： 点添加 加入输入框 名称 年龄 性别 创建时间 ，表单标识填字段名 ，标题填中文名 ，
其中创建时间 数据类型选 日期选择器 组件配置 格式填 YYYY-MM-DD HH:mm:ss
点具体的每个表单项 组件配置中 默认值 绑定变量this.state.editformData.对应的字段
）
事件 （点组件自带事件，点onChange 绑定saveform函数）

备注：index.js (curd 基础js)
class LowcodeComponent extends Component {
/**

• state 变量 区域

*/

state = {
“serverurl”: “http://127.0.0.1:22223”,
“text”: “outer”,
“isShowDialog”: false,
“datainfo”: [{
“id”: 1, “name”: “测试名”, “gender”: “男”, “old”: “1”, “descs”: “1”, “create_time”: “2023-11-06 07:07:09” }],
“editType”: false,
“formData”: {},
“pageTotal”: 1,
“pageNum”: 1,
“pageSize”: 10,
“editRow”: {},
“initialState”:{},
“editformData”: {
“name”: “”,
“gender”: “”,
“old”: “”,
“descs”: “”,
“create_time”: “”
},
“colList”: [],
“tableName”: “”,
“tableId”: “”,
“testForm”: [
{ “key”: “1k”, “title”: “1t”, “value”: “1” },
{ “key”: “2k”, “title”: “2t”, “value”: “2” },
]
}
/**

• 生命周期钩子 区域

/
async componentDidMount() {
var self=this;
this.setState(
{ initialState: Object.assign({}, self.state.editformData)}
)
console.log(‘did mount’);
await this.fetchSourceData();
await this.selectItem(this.state.formData);
}
componentWillUnmount() {
console.log(‘will unmount’);
}
/*

• JS函数 区域

*/
testFunc() {
console.log(‘test func’);
}
onClick() {
this.setState({
isShowDialog: true
});
}
closeDialog() {
this.setState({
isShowDialog: false
});
}
getHelloWorldText() {
return this.i18n(‘i18n-jwg27yo4’);
}
getHelloWorldText2() {
return this.i18n(‘i18n-jwg27yo3’, {
name: ‘絮黎’,
});
}
onTestConstantsButtonClicked() {
console.log(‘constants.ConstantA:’, this.constants.ConstantA);
console.log(‘constants.ConstantB:’, this.constants.ConstantB);
}
onTestUtilsButtonClicked() {
this.utils.demoUtil(‘param1’, ‘param2’);
}
onpageNumChange(value) {
console.log(‘pageNum:’, value);
var self = this;
//setState是一个异步操作 无法获取最新的结果, 可以使用setState的回调函数。
this.setState({ pageNum: value }, () => {
self.selectItem(this.state.formData);
});
}
onClick_new(e, { rowKey, rowIndex, rowRecord }, params) {
console.log("row ", rowRecord);
console.log("params ", params);
var row = {}
console.log("type ", params.type)
if (params.type == true) {//编辑
console.log("编辑 ")
row = rowRecord
this.setState({//设置state
editRow: rowRecord
})
} else {//新增
console.log("新增 ")
row = this.state.initialState
}
console.log("row new ", row)
this.setState({//设置state
editType: params.type,
editformData: row
})//setState 方法是一个异步操作 此处打印不一定能看见变化
console.log("State ", this.state)
console.log("editType ", this.state.editType)
this.KaTeX parse error: Expected 'EOF', got '}' at position 40: …sc').open(); }̲ onsubmit(val…(‘pro-dialog-entryloqvmcsc’).close();
}
saveform(value) {
console.log("value1 ", value)
this.setState({
editformData: value
});
console.log("saveform editformData ", JSON.stringify(this.state.editformData))
console.log("value0 ", value)
}
dealtime(datetimeString) {
let formattedDatetime = datetimeString;
if (datetimeString != “”) {
let dateObj = new Date(datetimeString);
formattedDatetime = dateObj.toISOString().slice(0, 19).replace(“T”, " ");

}
return formattedDatetime

}
queryData(value) {
var self = this;
this.setState({ pageNum: 1, pageSize: 10 }, () => {
self.selectItem(value);
});

}
/**

• 调后台API 区域

*/
//新增表中数据API
async addItem() {
console.log("addItem editformData0 ", JSON.stringify(this.state.editformData))
this.state.editformData.create_time = this.dealtime(this.state.editformData.create_time)
var inputValues = Object.entries(this.state.editformData).map(([key, value]) => ({ [key]: value }));
console.log(“inputValues”, inputValues);
var param = { “tableKey”: this.state.tableId, “inputValues”: inputValues };

const response = await window.fetch(this.state.serverurl + '/lowCodePlatform/warehouse/inputTableData', {
  method: 'POST',
  body: JSON.stringify(param),
  headers: {
    'Content-Type': 'application/json'
  }
});
const data = await response.json();
console.log("addItem res", data.data);
this.closeDialogNew();
this.selectItem(this.state.formData);
return

}
//编辑表中数据API
async editItem() {
console.log("editItem editformData0 ", JSON.stringify(this.state.editformData))
var form = {};
form = JSON.parse(JSON.stringify(this.state.editformData));
console.log("form ", form)
var create_time = this.dealtime(this.state.editformData.create_time)
form.create_time = create_time
console.log("form1 ", form);
this.setState({
editformData: form
});
console.log("editformData ", JSON.stringify(this.state.editformData))
var inputValues = Object.entries(this.state.editformData).map(([key, value]) => ({ [key]: value }));
console.log(“inputValues”, inputValues);
var whereValues = [{ “id”: this.state.editRow.id }]
var param = { “tableKey”: this.state.tableId, “inputValues”: inputValues, “whereValues”: whereValues };
console.log("param ", param);
const response = await window.fetch(this.state.serverurl + ‘/lowCodePlatform/warehouse/updateTableData’, {
method: ‘POST’,
body: JSON.stringify(param),
headers: {
‘Content-Type’: ‘application/json’
}
});
const data = await response.json();
console.log(“editItem res”, data.data);
this.closeDialogNew();
this.selectItem(this.state.formData);
return
}
//查询表中数据API
async selectItem(value) {
console.log("formData ", JSON.stringify(this.state.formData))
console.log("value0 ", value)
console.log("value ", JSON.stringify(value))
var whereValues = Object.entries(value).map(([key, value]) => {
var fuzzy = “false”; // 默认情况下，fuzzy为false 精确查询
// 判断特定的field，根据需要设置fuzzy属性
if (key === “title”) {
fuzzy = “true”;
} else if (key === “user”) {
// 可以根据实际需要进行更多的条件判断和特殊设置
// fuzzy = …
}
return {
field: key,
value: value,
fuzzy: fuzzy
};
});
console.log(“whereValues”, whereValues);

var self = this
var param = {
  "pageNum": this.state.pageNum,
  "pageSize": this.state.pageSize,
  "tableKey": this.state.tableId,//获取state内的值
  "colList": this.state.colList,
  "whereValues": whereValues
}
const response = await window.fetch(this.state.serverurl + '/lowCodePlatform/warehouse/getDataTableListByPage', {
  method: 'POST',
  body: JSON.stringify(param),
  headers: {
    'Content-Type': 'application/json'
  }
})
const data = await response.json();
self.setState({
  datainfo: data.data,
  pageTotal: data.count
});
console.log("selectItem res", data.data);

}
//删除表中数据API
async deleteItem(e, { rowKey, rowIndex, rowRecord }) {
console.log("value0 ", rowRecord)
var param = { “tableKey”: this.state.tableId, “field”: “id”, “value”: rowRecord.id };
console.log("param ", param)
const response = await window.fetch(this.state.serverurl + ‘/lowCodePlatform/warehouse/deteleTableData’, {
method: ‘POST’,
body: JSON.stringify(param),
headers: {
‘Content-Type’: ‘application/json’
}
});
const data = await response.json();
console.log(“deleteItem res”, data.data);
this.closeDialogNew();
this.selectItem(this.state.formData);
return
}
//获取URL参数
getUrlParams() {
const decodedUrl = decodeURIComponent(window.location.href);
const searchParams = new URLSearchParams(decodedUrl.substring(decodedUrl.indexOf(‘?’) + 1));
const params = {};
for (let [key, value] of searchParams) {
value = value.replace(/^‘|’$|{(}^{"})|("$)/g, ‘’); // 去除额外的引号
params[key] = value;
}
this.setState({
tableName: params.tableName,
tableId: params.tableId,
});
return params;
}
//查询数据源信息API
async fetchSourceData() {
var self = this
var param = this.getUrlParams();
console.log('param ', param);
var param2 = { “id”: param.tableId };
const response = await window.fetch(this.state.serverurl + ‘/lowCodePlatform/warehouse/getDataRoleListByPage’, {
method: ‘POST’,
body: JSON.stringify(param2),
headers: {
‘Content-Type’: ‘application/json’
}
});
const data = await response.json();

console.log("fetchSourceData res", data.data[0].dataSourceDetail);
var dataSourceDetail = data.data[0].dataSourceDetail;
var dataSourceDetailJSON = JSON.parse(dataSourceDetail);
var fields = dataSourceDetailJSON.fields;
//self.state.tableName = dataSourceDetailJSON.dabase;

for (var item of fields) {
  var name = item.fieldName;
  self.state.colList.push(name);
}

}

}