CheckDetail.vue
3.61 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<template>
<BasicDrawer
@register="register"
v-bind="$attrs"
showFooter
title="字段编辑权限申请"
width="60%"
:isDetail="true"
@ok="handleSubmit"
:showDetailBack="false"
okText="申请"
><input />
<div>
<h3>基本信息</h3>
<BasicForm @register="registerForm" />
<h3>利润分析</h3>
<BasicForm @register="registerProfitForm" />
</div>
<!-- <template #titleToolbar> <a-button type="primary"> 申请编辑权限 </a-button></template> -->
<template #appendFooter>
<a-button type="primary" @click="onGoFormDetail"> 返回编辑</a-button>
</template>
</BasicDrawer>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
import { orderAuth } from '/@/api/project/order';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { FIELDS_BASE_INFO, FIELDS_PROFIT_INFO } from './tableData';
import { cloneDeep, isEmpty, mapValues, mergeWith } from 'lodash-es';
const getSchema = (fields, base) =>
fields.map((item) => ({
field: `${base}.${item.field}`,
dataIndex: `${base}.${item.field}`,
label: item.label,
component: 'Switch',
colProps: {
span: 6,
},
}));
export default defineComponent({
components: { BasicDrawer, BasicForm },
props: {
onGoFormDetail: {
type: Function,
},
},
setup() {
const id = ref('');
const schemas = getSchema(FIELDS_BASE_INFO, 'baseFields');
const profitSchemas = getSchema(FIELDS_PROFIT_INFO, 'profitAnalysisFields');
const [registerForm, { getFieldsValue }] = useForm({
labelWidth: 120,
schemas,
showActionButtonGroup: false,
actionColOptions: {
span: 24,
},
});
const [registerProfitForm, { getFieldsValue: getProfitFieldsValue }] = useForm({
labelWidth: 120,
schemas: profitSchemas,
showActionButtonGroup: false,
actionColOptions: {
span: 24,
},
});
const lockFields = reactive({});
const [register, { closeDrawer }] = useDrawerInner((data) => {
Object.assign(lockFields, data.lockFields);
id.value = data.id;
});
function customizer(objValue, srcValue, key) {
// 检查是否在 baseFields 内以及值是否为 true
if (srcValue === true) {
return 'UN_LOCKED';
}
return objValue; // 如果不需要改变，返回原值
}
const handleSubmit = async () => {
const baseFieldValues = getFieldsValue();
const profitFieldValues = getProfitFieldsValue();
!isEmpty(baseFieldValues) &&
Object.keys(baseFieldValues.baseFields)?.map((key) => {
baseFieldValues.baseFields[key] = baseFieldValues.baseFields[key]
? 'UN_LOCKED'
: 'LOCKED';
});
!isEmpty(profitFieldValues) &&
Object.keys(profitFieldValues.profitAnalysisFields).map((key) => {
profitFieldValues.profitAnalysisFields[key] = profitFieldValues.profitAnalysisFields[
key
]
? 'UN_LOCKED'
: 'LOCKED';
});
const values = Object.assign({ orderId: id.value }, baseFieldValues, profitFieldValues);
console.log('%c [ values ]-103', 'font-size:13px; background:pink; color:#bf2c9f;', values);
await orderAuth(values);
closeDrawer();
};
return { register, schemas, registerForm, registerProfitForm, handleSubmit };
},
});
</script>