Skip to content

H
hls-easy-ui
Commit b1d07201 authored by 王纵's avatar 王纵
Browse files
Options

表单表格优化

parent 53972300
Hide whitespace changes
Inline Side-by-side
Showing with 203 additions and 119 deletions
src/Dynamic/ConfigRenderComponent/DForm/FormItem/DLov.vue
View file @ b1d07201
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-08-01 09:55:12
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-19 11:21:18
* @LastEditTime: 2024-08-20 09:56:05
* @Version: 1.0.0
* @Description: 动态渲染-Lov
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -116,7 +116,7 @@ export default {
props: {
fieldConfig: {
type: Object,
default: () => {}
default: () => ({})
},
name: {
type: String,
......@@ -132,7 +132,7 @@ export default {
},
value: {
type: Object | Array,
default: () => {},
default: () => ({}),
},
disabled: {
type: Boolean,
......
src/Dynamic/ConfigRenderComponent/DForm/FormItem/DSelect.vue
View file @ b1d07201
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-08-01 09:55:12
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-19 11:22:10
* @LastEditTime: 2024-08-20 09:55:39
* @Version: 1.0.0
* @Description: 动态渲染-Select
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -176,10 +176,11 @@ export default {
});
if (this.multiple) { // 多选
this.currentValue = selectData;
this.fieldValue = this.currentValue.length ? JSON.stringify(this.currentValue) : ''
} else {
this.currentValue = selectData.length ? selectData[0] : { meaning: '', value: '' };
this.fieldValue = this.currentValue.value;
}
this.fieldValue = this.currentValue ? JSON.stringify(this.currentValue) : ''
},
showSelectOption(flag) {
if (!this.disabled) {
......
src/Dynamic/ConfigRenderComponent/DForm/index.vue
View file @ b1d07201
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-29 10:51:56
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-19 10:59:43
* @LastEditTime: 2024-08-20 12:11:27
* @Version: 1.0.0
* @Description: 表单渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -119,7 +119,7 @@
:fieldConfig="field"
:disabled="readOnly || field.readOnly"
:required="field.required"
:getCurrentRecord="getCurrentRecord"
:getCurrentRecord="getFieldsValue"
@change="fieldChange"
/>
</fragment>
......@@ -199,7 +199,7 @@ export default {
originFieldsObj: {}, // 重置使用
queryParams: {},
readOnly: true,
status: 'add',
status: 'create',
}
},
mounted() {
......@@ -221,23 +221,23 @@ export default {
}
})
this.fieldsObj = {...initFields};
this.status = 'add';
this.status = 'create';
} else { // 详情
this.fieldsObj = {...this.record};
this.status = 'update';
}
if (this.formType === 'normal') {
this.addFormRef(this, this.tabInfo.tabCode); //正常表单保存表单组件实例，供页面整体保存时使用
if (this.tabInfo.readUrl) {
// console.log('D-form-activated', this.tabInfo.readUrl, JSON.stringify(this.queryParams))
const res = await getFormData(this.tabInfo.readUrl, this.queryParams)
this.fieldsObj = res.content.length ? res.content[0] : {};
this.dataLoadHandle(this.fieldsObj, this.tabInfo.tabCode); // 数据查询后的回调
this.addFormRef(this, this.tabInfo.tabCode); //正常表单保存表单组件实例，供页面整体保存时使用
this.setDataSetData(this.tabInfo.tabCode, {...this.fieldsObj}); // 保存一份原始数据
this.status = 'update';
} else {
this.status = 'add';
this.status = 'create';
}
}
this.formatFieldsValue();
......@@ -335,9 +335,19 @@ export default {
reset() {
this.fieldsObj = {...this.originFieldsObj};
},
getCurrentRecord() {
getFieldsValue(names) {
if (names && names.length) {
let fieldsValue = {};
names.forEach(n => {
fieldsValue[n] = this.fieldsObj[n];
});
return fieldsValue;
}
return this.fieldsObj;
},
setFieldsValue(fieldsValue) {
this.fieldsObj = {...this.fieldsObj, ...fieldsValue};
},
buttonsClick(btn) {
const customBtn = this.componentButtons.find(o => o.name === btn.name); // 采用页面传入的方法
if (customBtn && customBtn.clickFunction) {
......
src/Dynamic/ConfigRenderComponent/DTable/index.vue
View file @ b1d07201
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-29 10:51:56
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-19 16:00:59
* @LastEditTime: 2024-08-20 22:52:04
* @Version: 1.0.0
* @Description: 表格渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -166,22 +166,17 @@ export default {
this.init();
},
deactivated() {
EventBus.$off('tableQuery');
EventBus.$off('tableQuery', this.listenHandle);
},
beforeDestroy() {
EventBus.$off('tableQuery');
EventBus.$off('tableQuery', this.listenHandle);
},
methods: {
init() {
this.$nextTick(() => {
this.dynamicConfigInfo = this.dynamicInfo();
if (this.tabInfo.queryTabCode) {
EventBus.$on('tableQuery', (data, queryTabCode) => {
if (this.tabInfo.queryTabCode === queryTabCode) {
this.queryParams = data;
this.refresh();
}
});
EventBus.$on('tableQuery', this.listenHandle);
}
this.refresh();
......@@ -194,6 +189,12 @@ export default {
}
})
},
listenHandle(data) {
if (this.tabInfo.queryTabCode === data.tabCode) {
this.queryParams = data.values;
this.refresh();
}
},
refresh() {
this.page = 0;
this.tableData = [];
......
src/Dynamic/ConfigRenderComponent/QueryForm/index.vue
View file @ b1d07201
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-29 10:51:56
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-16 15:15:24
* @LastEditTime: 2024-08-20 22:51:47
* @Version: 1.0.0
* @Description: 查询表单渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -116,7 +116,7 @@ export default {
}
});
delete values._status;
EventBus.$emit('tableQuery', values, this.tabInfo.tabCode);
EventBus.$emit('tableQuery', {values, tabCode: this.tabInfo.tabCode});
this.show = false;
},
reset() {
......
src/Dynamic/utils/utils.js
View file @ b1d07201
......@@ -2,7 +2,7 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-30 14:39:47
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-16 11:27:44
* @LastEditTime: 2024-08-20 09:57:50
* @Version: 1.0.0
* @Description: 工具类
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -94,6 +94,25 @@ const dateFormat = (type, time) => { // 时间格式化 2019-09-08
}
};
// 根据tabcode获取对应的表单值
const getFormValuesByTabCode = async (dataSets, tabCode) => {
const formRef = dataSets[tabCode].formRef;
if (formRef) {
const values = await formRef.validate();
return values;
}
return {
allValues: {},
formValues: {}
}
}
// 根据tabcode获取对应的组件ref
const getRefByTabCode = (dataSets, tabCode) => {
const formRef = dataSets[tabCode].formRef;
return formRef;
}
const getOrganizationId = () => {
return 0;
// const globalState = getDvaApp()._store.getState();
......@@ -161,6 +180,8 @@ export {
getDataSetName,
dateFormat,
detectOS,
getFormValuesByTabCode,
getRefByTabCode,
getOrganizationId,
getCurrentUser
};
src/pages/dynamicDetail.vue
View file @ b1d07201
<!--
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-31 18:41:49
* @Date: 2024-08-16 09:39:36
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-15 17:42:00
* @LastEditTime: 2024-08-20 11:42:31
* @Version: 1.0.0
* @Description:
* @Description: 商机维护详情
* @Copyright: Copyright (c) 2021, Hand-RongJing
-->
<template>
<Dynamic
layoutCode="PRJ005F1"
:componentRenderers="componentRenderers"
:headerButtons="headerButtons"
:layoutButtons="layoutButtons"
:staticLayoutTabs="staticLayoutTabs"
<Dynamic
layoutCode="CN001F1"
:showTitle="false"
:componentRenderers="componentRenderers"
:configLoadHandle="configLoadHandle"
:dataLoadHandle="dataLoadHandle"
:layoutButtons="layoutButtons"
ref="dynamicRef"
/>
</template>
<script>
import {Button} from 'vant';
import { NavBar, Button, Search, List, Toast, Dialog } from 'vant';
import Dynamic from '../Dynamic'
import {getFormValuesByTabCode} from '../Dynamic/utils/utils'
// import chanceApi from '../api/chance'
export default {
name: 'DynamicDetail',
components: {
[Button.name]: Button
Dynamic,
[NavBar.name]: NavBar,
[Button.name]: Button,
[Search.name]: Search,
[List.name]: List,
[Toast.name]: Toast,
[Dialog.name]: Dialog,
},
data () {
return {
buttonText: '嵌入内容',
config: {},
componentRenderers: [
{
tabCode: 'F_BASIC',
columnName: 'test',
renderer: (field, getRecord) => {
return <span>328388</span>
tabCode: 'G_QUERY_RESULT',
columnName: 'projectName',
renderer: (record, index) => {
return <span style="color: #3789ff" onClick={() => this.toDetail(record)}>{record.projectName} <van-icon name="arrow" /></span>
},
},
],
headerButtons: [
{
description: '复制',
name: "copy",
},
{
description: '新建',
name: "new",
},
],
layoutButtons: {
submit: this.handleHeaderSubmit,
remove: this.handleDelete,
copy: this.handleCopyClick
submit: this.submit,
save: this.save,
},
staticLayoutTabs: [
{
tabCode: 'F_STATIC',
component: (props) => {
return (
<van-button onClick={this.handleCopyClick}>{this.buttonText}</van-button>
)
},
},
]
}
},
methods: {
configLoadHandle(config) { // 查询配置信息之后的回调
console.log('configLoadHandle', config)
this.config = config;
},
dataLoadHandle(data, tabCode) {
console.log(tabCode, data);
},
handleCopyClick() {
console.log('复制')
this.buttonText = '复制'
async save() {
let saveValues = {};
const saveDataSet = this.config.dataSetObject;
const basiceValues = await getFormValuesByTabCode(saveDataSet, 'F_BASIC');
saveValues = {...basiceValues.allValues};
const schemeValues = await getFormValuesByTabCode(saveDataSet, 'F_SCHEME');
saveValues = {...saveValues, ...schemeValues.formValues};
console.log('saveValues', saveValues);
const datas = {
...saveValues,
chanceContactInfoList: [],
chanceProcessList: [],
chanceAttachmentList: []
};
// let res = await chanceApi.save(datas);
// Toast.success('操作成功！');
},
async submit() {
const saveDataSet = this.config.dataSetObject;
const basiceValues = await getFormValuesByTabCode(saveDataSet, 'F_BASIC');
const schemeValues = await getFormValuesByTabCode(saveDataSet, 'F_SCHEME');
let saveValues = {...basiceValues.allValues, ...schemeValues.formValues};
const datas = {
...saveValues,
chanceContactInfoList: [],
chanceProcessList: [],
chanceAttachmentList: []
};
if (saveValues.chanceName == null || saveValues.bpNameLov == null) {
Toast.fail('请输入必填项！');
} else {
Dialog.confirm({
title: '确定提交工作流吗',
// message:'如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
}).then(() => {
const { chanceId } = this.config.queryParams;
this.checkApproval(chanceId, datas);
});
}
},
handleHeaderSubmit() {
console.log("点击提交")
this.buttonText = '提交'
async checkApproval(chanceId, datas) {
const response = await chanceApi.checkApproval(chanceId);
if (response.length === 0) {
this.submitCallback(datas);
} else {
Dialog.confirm({
title: '自选审批人',
// message:'如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
}).then(() => {
this.submitCallback(datas)
});
// C7nModal.open({
// title: '自选审批人',
// closable: true,
// destroyOnClose: true,
// keyboardClosable: true,
// footer: null,
// children: (
// <OptionalApprovalForm itemList={response} callBack={() => this.submitCallback(datas)} />
// )
// });
}
},
handleDelete() {
console.log("点击删除")
submitCallback(datas) {
// const promise = chanceApi.submit(datas);
// promise.then(
// () => {
// Toast.success('提交成功');
// this.goBack();
// },
// err => {
// Toast.fail(err.message);
// }
// );
},
handleNew() {
console.log("点击新建")
}
},
}
};
</script>
<style lang="less">
h4{
font-size: 20px;
margin-left: 15px;
}
a{
width: 100%;
}
<style lang="stylus" scoped>
</style>
src/pages/testDynamic.vue
View file @ b1d07201
<!--
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-29 11:02:22
* @Date: 2024-08-16 09:39:36
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-19 14:27:09
* @LastEditTime: 2024-08-20 11:41:44
* @Version: 1.0.0
* @Description:
* @Copyright: Copyright (c) 2021, Hand-RongJing
-->
<template>
<Dynamic
layoutCode="CN001"
:showTitle="true"
<Dynamic
layoutCode="CN001"
:showTitle="false"
:componentRenderers="componentRenderers"
:configLoadHandle="configLoadHandle"
:dataLoadHandle="dataLoadHandle"
:layoutButtons="layoutButtons"
ref="dynamicRef"
/>
</template>
<script>
import {Icon} from 'vant';
import { NavBar, Button, Search, List, Toast } from 'vant';
import Dynamic from '../Dynamic'
export default {
name: 'TestDynamic',
components: {
[Icon.name]: Icon,
Dynamic,
[NavBar.name]: NavBar,
[Button.name]: Button,
[Search.name]: Search,
[List.name]: List,
[Toast.name]: Toast,
},
data () {
return {
componentRenderers: [
{
tabCode: 'G_QUERY_RESULT',
columnName: 'projectName',
tabCode: 'G_RESULT',
columnName: 'chanceName',
renderer: (record, index) => {
return <span style="color: #3789ff" onClick={() => this.toDetail(record)}>{record.projectName} <van-icon name="arrow" /></span>
return <span style="color: #3789ff" onClick={() => this.toDetail(record)}>{record.chanceName} <van-icon name="arrow" /></span>
},
},
]
],
layoutButtons: {
create: this.create,
},
}
},
created() {
window.localStorage.setItem('access_token', '6cb71898-2af9-4c27-a042-b9887b0675f4');
},
methods: {
configLoadHandle(config) { // 查询配置信息之后的回调
console.log('configLoadHandle', config)
......@@ -51,31 +57,30 @@ export default {
console.log(tabCode, data);
},
toDetail(record) {
this.$router.push({
let readOnly = 'false';
if (
record.chanceStatus === 'APPROVING' ||
record.chanceStatus === 'APPROVED'
) {
readOnly = 'true'
}
this.$router.push({
name: 'DynamicDetail',
params: {
projectId: record.projectId
chanceId: record.chanceId,
readOnly
}
})
// this.$router.push({
// name: 'DynamicDetail',
// params: {
// bpId: record.bpId,
// bpName: record.bpName,
// bpCode: record.bpCode,
// }
// })
},
create() {
this.$router.push({
name: 'ChanceCreate'
})
}
},
}
};
</script>
<style lang="less">
h4{
font-size: 20px;
margin-left: 15px;
}
a{
width: 100%;
}
<style lang="stylus" scoped>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment