Skip to content

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

表格改造、表单增加bind显示

parent d3559ae3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 608 additions and 228 deletions
src/Dynamic/ConfigRenderComponent/DForm/index.vue
View file @ c516f0af
......@@ -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-09-19 15:57:20
* @LastEditTime: 2024-09-19 16:19:17
* @Version: 1.0.0
* @Description: 表单渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -139,6 +139,7 @@ import DCheckbox from './FormItem/DCheckbox';
import DUrl from './FormItem/DUrl';
import DTitle from '../DTitle';
import {getFormData} from '../../service';
import {getBindValue, setBindValue} from '../../utils/utils';
export default {
name: 'DForm',
......@@ -237,18 +238,11 @@ export default {
if (item.validationTypeDisplay === 'CentField' && this.fieldsObj[item.columnName]) {
this.fieldsObj[item.columnName] = this.fieldsObj[item.columnName] * 100;
}
if (item.bind && this.fieldsObj[item.columnName]) { // 主要处理lov绑定字段
const bindField = item.bind.split('.');
if (bindField.length >1) {
if (this.fieldsObj[bindField[0]]) {
this.fieldsObj[bindField[0]][bindField[1]] = this.fieldsObj[item.columnName];
} else {
this.fieldsObj[bindField[0]] = {
[bindField[1]]: this.fieldsObj[item.columnName]
};
}
if (item.bind) {
if (this.fieldsObj[item.columnName]) {
setBindValue(item.bind, this.fieldsObj, item.columnName);
} else {
this.fieldsObj[bindField[0]] = this.fieldsObj[item.columnName];
this.fieldsObj[item.columnName] = getBindValue(item.bind, this.fieldsObj);
}
}
})
......
src/Dynamic/ConfigRenderComponent/DTable/DTableDetail.vue 0 → 100644
View file @ c516f0af
<!--
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-29 10:51:56
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-09-19 16:15:12
* @Version: 1.0.0
* @Description: 表格渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
-->
<template>
<van-popup
v-model="visible"
position="right"
class="d-table-form-popup"
get-container="body"
safe-area-inset-top
style="width: 100%; height: 100%; display: flex; flex-direction: column;"
>
<div class="form-content">
<d-form
v-if="visible"
:fields="columns"
:originFields="originColumns"
ref="dformRef"
:record="record"
formType="tableForm"
/>
</div>
<div class="van-safe-area-bottom d-table-form-footer">
<div class="d-table-form-footer-content">
<van-button
round
type=""
@click="cancelRecord"
>{{showEdit ? "取消" : "关闭"}}</van-button>
<van-button
v-if="showEdit"
type="primary"
round
@click="saveRecord"
>保存</van-button>
</div>
</div>
</van-popup>
</template>
<script>
import DForm from '../DForm';
import { Popup, Button, Toast } from 'vant';
import {saveTableRecord, updateTableRecord} from '../../service';
export default {
name: 'DTableDetail',
components: {
DForm,
[Button.name]: Button,
[Popup.name]: Popup,
[Toast.name]: Toast,
},
props: {
visible: {
type: Boolean,
default: false
},
tabInfo: { // 配置信息
type: Object,
default: () => ({})
},
record: {
type: Object,
default: () => ({})
},
columns: {
type: Array,
default: () => [],
},
originColumns: {
type: Array,
default: () => [],
},
showEdit: {
type: Boolean,
default: false
},
queryParams: {
type: Object,
default: () => ({})
}
},
data () {
return {
}
},
methods: {
async saveRecord() { //表格数据保存
if (!this.tabInfo.createUrl) {
Toast.fail('保存接口未配置，请检查配置');
return;
}
const {allValues} = await this.$refs.dformRef.validate();
let method = saveTableRecord; // 默认新增
let url = this.tabInfo.createUrl;
const data = [{
...allValues,
...this.queryParams
}]
if(allValues._status === 'update') { // 更新
url = this.tabInfo.updateUrl
method = updateTableRecord;
}
method(url, data).then(() => {
this.cancelRecord();
Toast.success('保存成功！');
this.$emit('init');
})
},
cancelRecord() {
this.$emit("cancelRecord")
},
},
}
</script>
<style lang="less">
@import '../../index.less';
.d-table-form-popup {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
.form-content {
flex: 1;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
}
.d-table-form-footer {
background: #fafafa;
box-shadow: 0 -.533vw 2.4vw 0 #e2e2e2;
.d-table-form-footer-content {
display: flex;
justify-content: space-between;
padding: 10px 16px;
.van-button {
// width: 48%;
flex-grow: 1;
font-size: 16px;
font-weight: 600;
& + .van-button {
margin-left: 12px;
}
}
}
}
}
</style>
src/Dynamic/ConfigRenderComponent/DTable/DTablePopup.vue 0 → 100644
View file @ c516f0af
<!--
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-29 10:51:56
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-09-19 16:14:56
* @Version: 1.0.0
* @Description: 表格渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
-->
<template>
<van-popup
v-model="visible"
position="right"
class="d-table-popup"
get-container="body"
safe-area-inset-top
>
<slot name="title" />
<slot />
<div class="van-safe-area-bottom d-table-popup-footer">
<div class="d-table-footer-content">
<van-button
round
type=""
@click="close"
>关闭</van-button>
</div>
</div>
</van-popup>
</template>
<script>
import { Popup, Button } from 'vant';
export default {
name: 'DTablePopup',
components: {
[Popup.name]: Popup,
[Button.name]: Button
},
props: {
visible: {
type: Boolean,
default: false
},
},
methods: {
close() {
this.$emit('closeMore');
}
}
}
</script>
<style lang="less">
.d-table-popup {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #fafafa;
.d-table-popup-footer {
background: #fafafa;
box-shadow: 0 -.533vw 2.4vw 0 #e2e2e2;
.d-table-footer-content {
display: flex;
justify-content: space-between;
padding: 10px 16px;
.van-button {
// width: 48%;
flex-grow: 1;
font-size: 16px;
font-weight: 600;
}
}
}
}
</style>
src/Dynamic/ConfigRenderComponent/DTable/DTableRender.vue 0 → 100644
View file @ c516f0af
<!--
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-29 10:51:56
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-09-13 13:48:06
* @Version: 1.0.0
* @Description: 表格数据展示
* @Copyright: Copyright (c) 2021, Hand-RongJing
-->
<template>
<van-checkbox-group v-model="checkResult" @change="checkChange">
<div v-for="(item, pIndex) in tableData" :key="item[tabInfo.primaryKey]" class="d-table">
<fragment v-for="(column, index) in showColumns" :key="column.columnName" >
<div v-if="index === 0" class="d-table-th">
<van-checkbox :name="item[tabInfo.primaryKey]" v-if="!readOnly">
{{column.description}}:
<d-table-td
:column="column"
:tdRender="column.renderer"
:columnName="column.columnName"
:index="pIndex"
:record="item" />
</van-checkbox>
<div v-else>
{{column.description}}:
<d-table-td
:column="column"
:tdRender="column.renderer"
:columnName="column.columnName"
:index="pIndex"
:record="item" />
</div>
<img src="../../assets/edit.png" class="td-edit" @click="showRecord(item, pIndex)" />
</div>
<div v-else class="d-table-tr">
<span>{{column.description}}</span>
<d-table-td
:column="column"
:tdRender="column.renderer"
:columnName="column.columnName"
:record="item"
:index="pIndex"
:typeDisplay="column.validationTypeDisplay"
>
<template #default v-if="dateType[column.dataType] || booleanType.includes(column.validationTypeDisplay)">
<fragment v-if="booleanType.includes(column.validationTypeDisplay)" >
{{booleanDisplay[getTdValue(column, item)] || '--'}}
</fragment>
<fragment v-if="dateType[column.dataType]" >
{{dateDescription(dateType[column.dataType], getTdValue(column, item)) || '--'}}
</fragment>
</template>
<!-- {{(column.validationTypeDisplay === 'Switch' ? (item[column.columnName] ? '是' : '否' ) : item[column.columnName]) || '--'}} -->
</d-table-td>
</div>
</fragment>
</div>
</van-checkbox-group>
</template>
<script>
import DTableTd from './DTableTd.jsx';
import { Checkbox, CheckboxGroup, Toast } from 'vant';
import {dateFormat, getBindValue} from '../../utils/utils';
export default {
name: 'DTableRender',
components: {
DTableTd,
[Checkbox.name]: Checkbox,
[CheckboxGroup.name]: CheckboxGroup,
[Toast.name]: Toast,
},
props: {
tabInfo: { // 配置信息
type: Object,
default: () => {}
},
tableData: {
type: Array,
default: () => []
},
columns: {
type: Array,
default: () => [],
},
showEdit: {
type: Boolean,
default: false
},
readOnly: {
type: Boolean,
default: true
},
checkResult: {
type: Array,
default: () => [],
}
},
data () {
return {
dateType: {
dateTime: 'datetime',
time: 'datetime',
month: 'year-month',
year: 'year-month',
week: 'date',
date: 'date',
},
booleanType: ['Switch', 'Radio', 'CheckBox'],
booleanDisplay: {
1: '是',
0: '否'
},
showColumns: [],
}
},
mounted() {
this.init();
},
activated() {
this.init();
},
methods: {
init() {
this.$nextTick(() => {
this.showColumns = this.columns.length > 6 ? this.columns.slice(0, 6) : this.columns;
})
},
getTdValue(column, item) {
if (column.bind) {
return getBindValue(column.bind, item);
} else {
return item[column.columnName];
}
},
showRecord(res, index) {
this.$emit('showRecord', res, index);
},
dateDescription(type, val) {
if (val) {
const res = dateFormat(type, new Date(val));
return res.description;
}
return val;
},
checkChange(val) {
this.$emit('checkChange', val)
}
},
}
</script>
<style lang="less">
@import '../../index.less';
.d-table {
margin: 0 15px 10px 15px;
padding: 4px 8px 12px 8px;
background-color: #fff;
border-radius: 8px;
.d-table-tr {
display: flex;
justify-content: space-between;
padding: 10px 16px 0 16px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #a3a3a3;
span:nth-child(1){
min-width: 60px;
& + span {
padding-left: 15px;
color: #383F45;
}
}
}
.d-table-th {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0 12px 8px;
border-bottom: 1px solid #F3F3F7;;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #4B4A4B;
font-weight: 600;
.van-checkbox__icon {
font-size: 16px;
// margin-top: 2px;
}
// :deep(.van-checkbox__icon) {
// font-size: 16px;
// // margin-top: 2px;
// }
.td-edit {
width: 14px;
}
}
}
</style>
src/Dynamic/ConfigRenderComponent/DTable/DTableTd.jsx
View file @ c516f0af
......@@ -2,17 +2,22 @@
* @Author: zong.wang01@hand-china.com
* @Date: 2024-07-30 09:41:54
* @LastEditors: zong.wang01@hand-china.com
* @LastEditTime: 2024-08-19 11:46:32
* @LastEditTime: 2024-09-19 16:16:19
* @Version: 1.0.0
* @Description: 表格列渲染
* @Copyright: Copyright (c) 2021, Hand-RongJing
*/
import Vue from 'vue';
import {getBindValue} from '../../utils/utils'
const DTableTd = {
components: {
},
props: {
column: {
type: Object,
default: () => ({})
},
record: { // 数据
type: Object,
default: () => ({})
......@@ -40,10 +45,14 @@ const DTableTd = {
},
methods: {
columnValue() {
if (['Lov', 'Select'].includes(this.typeDisplay)) {
return this.record[`${this.columnName}Name`] || this.record[`${this.columnName}N`] || this.record[this.columnName];
if (this.column.bind) {
return getBindValue(this.column.bind, this.record)
} else {
return this.record[this.columnName];
if (['Lov', 'Select'].includes(this.typeDisplay)) {
return this.record[`${this.columnName}Name`] || this.record[`${this.columnName}N`] || this.record[this.columnName];
} else {
return this.record[this.columnName];
}
}
}
},
......
src/Dynamic/utils/utils.js
View file @ c516f0af
......@@ -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-09-19 15:45:12
* @LastEditTime: 2024-09-19 16:16:57
* @Version: 1.0.0
* @Description: 工具类
* @Copyright: Copyright (c) 2021, Hand-RongJing
......@@ -284,6 +284,30 @@ const reloadData = (dataSets, type = 'all') => {
}
const getBindValue = (bindStr, record) => {
const bindArr = bindStr.split('.');
if (bindArr.length > 1) {
return record[bindArr[0]][bindArr[1]];
} else {
return record[bindArr[0]];
}
}
const setBindValue = (bindStr, record, columnName) => {
const bindField = bindStr.split('.');
if (bindField.length > 1) {
if (record[bindField[0]]) {
record[bindField[0]][bindField[1]] = record[columnName];
} else {
record[bindField[0]] = {
[bindField[1]]: record[columnName]
};
}
} else {
record[bindField[0]] = record[columnName];
}
}
export {
getCustomizedProp,
......@@ -298,5 +322,7 @@ export {
getCurrentUser,
isTenantRoleLevel,
getLayoutSaveData,
reloadData
reloadData,
getBindValue,
setBindValue
};
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