From 8a3fd694c917f6e833840697c7efa797a155c601 Mon Sep 17 00:00:00 2001
From: gaoyunqi <gaoyunqi@gdyd.com>
Date: Wed, 3 Apr 2024 15:54:15 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E4=BA=8C=E5=BC=80?=
 =?UTF-8?q?=E8=AF=B4=E6=98=8E=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/dev_readme.md | 76 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)

diff --git a/docs/dev_readme.md b/docs/dev_readme.md
index 90f0e63..d89cb35 100644
--- a/docs/dev_readme.md
+++ b/docs/dev_readme.md
@@ -1,4 +1,6 @@
 ## 注意事项
+### 不要被框架束缚思路
+框架只是个代码生成器而已，前后端代码都在你手里，只要不影响其他模块，你想怎么实现怎么实现。
 ### 设计相关
 - 一个表单只能绑定一个流程，一个流程也只能绑定一个表单，虽然框架支持单流程带多表单，但是我们在代码中屏蔽了这部分设计，如果表单内容较多，建议以子流程、tab页、分区等方式合理显示。
 - 一旦某表单绑定了流程，该表单就只能以绑定流程的方式使用（展示一个流程的纯表单部分无意义，用户一定是想和流程一起查看或者审批）
@@ -70,3 +72,77 @@ onMounted(async () => {
     emits('form-mounted', formProps); // 补上这一句
 });
 ```
+## 如何自定义表单字段
+一般情况下，字段会和权限绑定，假设你已经解决了字段的权限问题（对于简单的数据结构，可以建一个纯文本字段，然后在前端换成自定义渲染的）。
+
+首先我们定义一个组件，这里为了简单起见只用了一个文本框，一般情况下，你要实现v-model，同时接收disabled参数以处理只读模式。注意vue<3.4的版本并不支持defineModel。
+```vue
+<template>
+    <div class="custom-input">
+        <input style="width: 100%" v-if="!disabled" :value="props.modelValue" @change="onChange($event)" />
+        <span v-else style="color: #cc0000">{{ props.modelValue }}</span>
+    </div>
+</template>
+
+<style scoped>
+    input {
+        width: 100%;
+        border: 1px solid #cc0000;
+        line-height: 30px;
+    }
+</style>
+<script setup>
+    import {defineProps} from 'vue';
+
+    const props = defineProps(['modelValue', 'disabled'])
+    const emit = defineEmits(['update:modelValue'])
+
+    function onChange(event) {
+        emit('update:modelValue', event.target.value);
+    }
+</script>
+```
+然后在表单页面Form.vue中引入该字段
+```vue
+<SimpleForm>
+    <template v-slot:addr="scope">
+        <FormItem :label-col="{style: {width: '120px'}}" label="出差地点">
+            <custom-field :disabled="scope.schema.dynamicDisabled" v-model="scope.formModel.chuChaDiDian3876"></custom-field>
+        </FormItem>
+    </template>
+</SimpleForm>
+```
+这里需要注意的是，自定义字段中需要自行实现label部分，所以外层用了一个FormItem，如果你需要在表单中间独立成行，也可以去掉FormItem这层。
+
+最后在config.ts中换掉字段的类型：
+```javascript
+export const formProps: FormProps = {
+    labelCol: { span: 3, offset: 0 },
+    labelAlign: 'right',
+    layout: 'horizontal',
+    size: 'default',
+    schemas: [
+        {
+            key: '783e504378024a2c9db35b9e741eb5c3',
+            field: 'chuChaDiDian3876',
+            label: '出差地点',
+            type: 'slot', // type和slotName需要换掉
+            slotName: 'addr' // 和template中的插槽名字对应
+        }
+    ]
+};
+```
+## 如何自定义列表页字段
+列表页的字段定义比较简单，首先在columns中补充需要的列（或者替换已有的列），然后再bodyCell插槽里替换所需的部分接即可。
+```vue
+<template #bodyCell="{ column, record }">
+    <template v-if="column.dataIndex === 'action'">
+        <TableAction :actions="getActions(record)" />
+    </template>
+    <!-- 下面是要定制的列 --->
+    <template v-if="column.dataIndex === 'chuChaDiDian3876'">
+        <span style="color: #f00">{{record.chuChaDiDian3876}}</span>
+    </template>
+</template>
+```
+注意，根据antd-vue的文档，bodyCell里除了要修改的列，不能写其他内容，否则会将内容覆盖到所有列上。