From 92fd90f35dc8494a81fffcdfc5e5fb4ff505c02c Mon Sep 17 00:00:00 2001
From: gaoyunqi <gaoyunqi@gdyd.com>
Date: Thu, 16 May 2024 15:49:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=98=8E=E7=BB=86=E8=A1=A8=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84=E7=BB=84=E7=BB=87=E6=9E=B6=E6=9E=84=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=99=A8=E6=94=AF=E6=8C=81=E5=B0=86=E6=96=87=E6=9C=AC=E8=A1=A8?=
 =?UTF-8?q?=E7=A4=BA=E5=AD=98=E5=82=A8=E5=9C=A8=E7=8B=AC=E7=AB=8B=E5=AD=97?=
 =?UTF-8?q?=E6=AE=B5=EF=BC=8C=E4=BB=A5=E6=94=B9=E5=96=84=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E6=80=A7=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../componentProperty/PropertyOption.vue      |  22 +-
 src/components/Designer/src/types/index.ts    |   2 +
 .../src/components/SelectDepartmentV2.vue     | 399 +++++++++---------
 .../Form/src/components/SubFormV2.vue         |  29 +-
 src/utils/event/design.ts                     |   5 +-
 5 files changed, 249 insertions(+), 208 deletions(-)

diff --git a/src/components/Designer/src/components/componentProperty/PropertyOption.vue b/src/components/Designer/src/components/componentProperty/PropertyOption.vue
index 1b536e7..475b0cb 100644
--- a/src/components/Designer/src/components/componentProperty/PropertyOption.vue
+++ b/src/components/Designer/src/components/componentProperty/PropertyOption.vue
@@ -422,6 +422,13 @@
                     </template>
                 </a-input>
             </a-form-item>
+            <template v-if="data.isSubFormChild">
+                <a-form-item v-if="hasKey('sepTextField')" label="文本存储字段">
+                    <a-select v-model:value="data.options.sepTextField" :allow-clear="true" :placeholder="t('请选择文本字段')" size="mini">
+                        <a-select-option v-for="fItem in findTableFields(data)" :key="fItem.key" :value="fItem.bindField">{{ fItem.label }}</a-select-option>
+                    </a-select>
+                </a-form-item>
+            </template>
             <!-- 响应式布局只对主表字段生效 -->
             <template v-if="!data.isSubFormChild">
                 <a-form-item v-if="hasKey('responsive')" label="响应式">
@@ -1560,6 +1567,18 @@
                 });
             }
 
+            function findTableFields(obj) {
+                if (!props.widgetForm?.list) {
+                    return [];
+                }
+                const bTable = obj.bindTable;
+                const pTable = props.widgetForm.list.find((item) => item.type === 'form' && item.bindTable === bTable);
+                if (!pTable) {
+                    return [];
+                }
+                return pTable.children;
+            }
+
             return {
                 data,
                 hasKey,
@@ -1617,7 +1636,8 @@
                 handleIsSave,
                 buttonTableOptions,
                 t,
-                imageUrl
+                imageUrl,
+                findTableFields
             };
         }
     });
diff --git a/src/components/Designer/src/types/index.ts b/src/components/Designer/src/types/index.ts
index 08f0f61..732236b 100644
--- a/src/components/Designer/src/types/index.ts
+++ b/src/components/Designer/src/types/index.ts
@@ -1164,6 +1164,7 @@ export const infoComponents = [
             labelFixWidth: 120,
             parentNode: '',
             responsive: false,
+            sepTextField: '',
             span: '',
             width: '100%',
             defaultValue: undefined,
@@ -1184,6 +1185,7 @@ export const infoComponents = [
             labelWidthMode: 'fix',
             labelFixWidth: 120,
             responsive: false,
+            sepTextField: '',
             span: '',
             width: '100%',
             defaultValue: '',
diff --git a/src/components/Form/src/components/SelectDepartmentV2.vue b/src/components/Form/src/components/SelectDepartmentV2.vue
index d0828b2..e032349 100644
--- a/src/components/Form/src/components/SelectDepartmentV2.vue
+++ b/src/components/Form/src/components/SelectDepartmentV2.vue
@@ -1,205 +1,226 @@
 <template>
-  <div style="width: 100%" @click="show" class="depart-select">
-    <a-input v-model:value="departNames" :bordered="bordered" :disabled="disabled" :placeholder="placeholder"
-      :size="size" readonly>
-      <template v-if="prefix" #prefix>
-        <Icon :icon="prefix" />
-      </template>
-      <template v-if="suffix" #suffix>
-        <Icon :icon="suffix" />
-      </template>
-    </a-input>
-    <ModalPanel :visible="visible" :width="800" :title="t('选择部门')" @submit="submit" @close="close" class="depart-select-dialog">
-      <div class="choose-dep-box">
-        <div class="choose-dep">
-          <a-spin class="loading-box" :spinning="loading" />
-          <SelectDepartmentTreeV2 v-if="visible" @changeValue="departChange" :value="props.value"
-            @queryCompleted="queryCompleted" :parentNode="parentNode"></SelectDepartmentTreeV2>
-        </div>
-        <div class="choosen-dep">
-          <div class="choosen-item" v-for="item in selectedNodes">
-            <div class="choosen-label">{{ item.name }}</div>
-            <close-outlined class="close" @click="deleteItem" />
-          </div>
-        </div>
-      </div>
-
-    </ModalPanel>
-  </div>
+    <div class="depart-select" style="width: 100%" @click="show">
+        <a-input v-model:value="departNames" :bordered="bordered" :disabled="disabled" :placeholder="placeholder" :size="size" readonly>
+            <template v-if="prefix" #prefix>
+                <Icon :icon="prefix" />
+            </template>
+            <template v-if="suffix" #suffix>
+                <Icon :icon="suffix" />
+            </template>
+        </a-input>
+        <ModalPanel :title="t('选择部门')" :visible="visible" :width="800" class="depart-select-dialog" @close="close" @submit="submit">
+            <div class="choose-dep-box">
+                <div class="choose-dep">
+                    <a-spin :spinning="loading" class="loading-box" />
+                    <SelectDepartmentTreeV2 v-if="visible" :parentNode="parentNode" :value="props.value" @changeValue="departChange" @queryCompleted="queryCompleted"></SelectDepartmentTreeV2>
+                </div>
+                <div class="choosen-dep">
+                    <div v-for="item in selectedNodes" class="choosen-item">
+                        <div class="choosen-label">{{ item.name }}</div>
+                        <close-outlined class="close" @click="deleteItem" />
+                    </div>
+                </div>
+            </div>
+        </ModalPanel>
+    </div>
 </template>
-<script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue';
-import SelectDepartmentTreeV2 from './SelectDepartmentTreeV2.vue'
-import { useI18n } from '/@/hooks/web/useI18n';
-import { ModalPanel } from '/@/components/ModalPanel/index';
-const { t } = useI18n();
-const emits = defineEmits(['change', 'changeNames', 'close', 'options-change', 'update:value']);
-import { getDepartmentTrees } from '/@/api/system/department';
-import { CloseOutlined } from '@ant-design/icons-vue';
-const visible = ref(false)
-const departNames = ref<string>();
+<script setup>
+    import { onMounted, ref, watch } from 'vue';
+    import SelectDepartmentTreeV2 from './SelectDepartmentTreeV2.vue';
+    import { useI18n } from '/@/hooks/web/useI18n';
+    import { ModalPanel } from '/@/components/ModalPanel/index';
 
-const props = defineProps({
-  value: String,
-  prefix: String,
-  suffix: String,
-  placeholder: String,
-  readonly: Boolean,
-  disabled: Boolean,
-  parentNode: String,
-  size: String,
-  bordered: {
-    type: Boolean,
-    default: true
-  },
-  multiple: {
-    type: Boolean,
-    default: true
-  },
-  componentProps: {
-    type: Object,
-    default: {}
-  }
-});
-const selectedNodes = ref([])
-const loading = ref(true)
+    const { t } = useI18n();
+    const emits = defineEmits(['change', 'changeNames', 'close', 'options-change', 'update:value']);
+    import { getDepartmentTrees } from '/@/api/system/department';
+    import { CloseOutlined } from '@ant-design/icons-vue';
+    import { camelCaseString } from '/@/utils/event/design';
 
-// Embedded in the form, just use the hook binding to perform form verification
+    const visible = ref(false);
+    const departNames = ref();
+    const valChanged = ref(false);
 
-onMounted(() => {
-});
+    const props = defineProps({
+        value: String,
+        prefix: String,
+        suffix: String,
+        placeholder: String,
+        readonly: Boolean,
+        disabled: Boolean,
+        parentNode: String,
+        size: String,
+        bordered: {
+            type: Boolean,
+            default: true
+        },
+        multiple: {
+            type: Boolean,
+            default: true
+        },
+        componentProps: {
+            type: Object,
+            default: {}
+        },
+        sepTextField: '', // 将文字描述存在独立字段，增加首次渲染速度
+        row: Object
+    });
+    const selectedNodes = ref([]);
+    const loading = ref(true);
 
-watch(
-  () => props.value,
-  (val: any) => {
-    if (val) {
-      getDefaultList(val)
+    // Embedded in the form, just use the hook binding to perform form verification
+
+    onMounted(() => {});
+
+    watch(
+        () => props.value,
+        (val) => {
+            if (val) {
+                if (props.sepTextField && !valChanged.value) {
+                    departNames.value = props.row[camelCaseString(props.sepTextField, true)];
+                } else {
+                    getDefaultList(val);
+                }
+            }
+        },
+        {
+            immediate: true
+        }
+    );
+
+    async function getDefaultList(id) {
+        let param = {
+            id: id,
+            code: '',
+            name: '',
+            parentNode: false
+        };
+        let list = resetTreeList(await getDepartmentTrees(param));
+        selectedNodes.value = list;
+        let nameList = selectedNodes.value.map((item) => item.name);
+        const names = nameList.join(',');
+        departNames.value = names;
+        if (props.sepTextField) {
+            props.row[camelCaseString(props.sepTextField, true)] = names;
+        }
     }
-  },
-  {
-    immediate: true,
-  },
-);
-async function getDefaultList(id) {
-  let param = {
-    id: id,
-    code: '',
-    name: '',
-    parentNode: false
-  }
-  let list = resetTreeList(await getDepartmentTrees(param))
-  selectedNodes.value = list
-  let nameList = selectedNodes.value.map(item => item.name)
-  const names = nameList.join(',')
-  departNames.value = names;
-  // handleSelectedNodes()
-}
-function resetTreeList(list) {
-  const result = list.map(item => {
-    return {
-      ...item,
-      ...{
-        key: item.id,
-        children: resetTreeList(item.children),
-        title: item.name
-      }
+
+    function resetTreeList(list) {
+        const result = list.map((item) => {
+            return {
+                ...item,
+                ...{
+                    key: item.id,
+                    children: resetTreeList(item.children),
+                    title: item.name
+                }
+            };
+        });
+        return result;
+    }
+
+    function queryCompleted() {
+        loading.value = false;
+    }
+
+    function departChange(nodes) {
+        selectedNodes.value = nodes;
+        valChanged.value = true;
+    }
+
+    function show() {
+        visible.value = true;
+        loading.value = true;
+        if (props.value) {
+            getDefaultList(props.value);
+        }
+    }
+
+    function handleSelectedNodes() {
+        let nameList = selectedNodes.value.map((item) => item.name);
+        let idList = selectedNodes.value.map((item) => item.id);
+        const names = nameList.join(',');
+        const ids = idList.join(',');
+        emits('update:value', ids);
+        departNames.value = names;
+        if (props.sepTextField) {
+            props.row[camelCaseString(props.sepTextField, true)] = names;
+        }
+    }
+
+    function deleteItem() {
+        selectedNodes.value = [];
+    }
+
+    function submit() {
+        handleSelectedNodes();
+        close();
+    }
+
+    function close() {
+        visible.value = false;
+        selectedNodes.value = [];
+        emits('close');
     }
-  })
-  return result
-}
-function queryCompleted() {
-  loading.value = false
-}
-function departChange(nodes) {
-  selectedNodes.value = nodes
-}
-function show() {
-  visible.value = true
-  loading.value = true
-  if (props.value) {
-    getDefaultList(props.value)
-  }
-}
-function handleSelectedNodes() {
-  let nameList = selectedNodes.value.map(item => item.name)
-  let idList = selectedNodes.value.map(item => item.id)
-  const names = nameList.join(',')
-  const ids = idList.join(',')
-  emits('update:value', ids);
-  departNames.value = names;
-}
-function deleteItem() {
-  selectedNodes.value = []
-}
-function submit() {
-  handleSelectedNodes()
-  close();
-}
-function close() {
-  visible.value = false;
-  selectedNodes.value = []
-  emits('close');
-}
 </script>
 <style lang="less">
-.depart-select-dialog {
-  .content {
-    margin-bottom: 0;
-  }
-}
+    .depart-select-dialog {
+        .content {
+            margin-bottom: 0;
+        }
+    }
 </style>
 <style lang="less" scoped>
-.choose-dep-box {
-  display: flex;
-  height: 95%;
+    .choose-dep-box {
+        display: flex;
+        height: 95%;
 
-  .choose-dep {
-    border: 1px solid #eaeaea;
-    margin: 8px;
-    width: 60%;
-    height: 100%;
-    position: relative;
-    overflow: scroll;
+        .choose-dep {
+            border: 1px solid #eaeaea;
+            margin: 8px;
+            width: 60%;
+            height: 100%;
+            position: relative;
+            overflow: scroll;
 
-    .loading-box {
-      position: absolute;
-      left: 49%;
-      top: 49%;
+            .loading-box {
+                position: absolute;
+                left: 49%;
+                top: 49%;
+            }
+        }
+
+        .choosen-dep {
+            border: 1px solid #eaeaea;
+            margin: 8px;
+            width: 40%;
+            height: 100%;
+            padding: 4px;
+
+            .choosen-item {
+                padding: 2px 4px;
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .choosen-label {
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+
+                .close {
+                    visibility: hidden;
+                }
+            }
+
+            .choosen-item:hover {
+                background-color: #eaeaea;
+
+                .close {
+                    visibility: visible;
+                }
+            }
+        }
     }
-  }
-
-  .choosen-dep {
-    border: 1px solid #eaeaea;
-    margin: 8px;
-    width: 40%;
-    height: 100%;
-    padding: 4px;
-
-    .choosen-item {
-      padding: 2px 4px;
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .choosen-label {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-
-      .close {
-        visibility: hidden
-      }
-    }
-
-    .choosen-item:hover {
-      background-color: #eaeaea;
-
-      .close {
-        visibility: visible
-      }
-    }
-  }
-}
 </style>
diff --git a/src/components/Form/src/components/SubFormV2.vue b/src/components/Form/src/components/SubFormV2.vue
index 478a73a..65f9472 100644
--- a/src/components/Form/src/components/SubFormV2.vue
+++ b/src/components/Form/src/components/SubFormV2.vue
@@ -9,7 +9,7 @@
                 {{ t('新增') }}
             </a-button>
         </div>
-        <a-table :bordered="showFormBorder" :columns="headColums.length > 0 ? headColums : columns" :data-source="data" :pagination="showPagination ? { defaultPageSize: 10 } : false" :scroll="{ x: 'max-content' }">
+        <a-table :bordered="showFormBorder" :columns="headColums.length > 0 ? headColums : columns" :data-source="addDataKey(data)" :pagination="showPagination ? { defaultPageSize: 10 } : false" :scroll="{ x: 'max-content' }">
             <template #summary>
                 <a-table-summary-row v-if="columns.some((x) => x.componentProps?.subTotal)">
                     <a-table-summary-cell v-for="(column, idx) in columns" :key="idx">
@@ -66,6 +66,8 @@
                                 :bordered="showComponentBorder"
                                 :index="index"
                                 :mainKey="mainKey"
+                                :key="column.dataIndex + record['_key_']"
+                                :row="record"
                                 v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)"
                                 @blur="onFieldBlur(column, record, index)"
                                 @change="onFieldChange(column, record, index)"
@@ -225,6 +227,15 @@
         });
     }
 
+    function addDataKey(rows) {
+        rows.forEach((row) => {
+            if (!row['_key_']) {
+                row['_key_'] = Math.random();
+            }
+        });
+        return rows;
+    }
+
     onMounted(() => {
         data.value = cloneDeep(props.value);
 
@@ -261,23 +272,7 @@
     watch(
         () => props.value,
         (v) => {
-            // console.log('watch props.value', props.value);
             data.value = v;
-            // const rangeComponents = props.columns.filter((column) =>
-            //   column.componentType?.includes('Range'),
-            // );
-            // if (rangeComponents.length && formModel) {
-            //   rangeComponents.forEach((item) => {
-            //     data.value.forEach((x) => {
-            //       if (x[(item.dataIndex as string)?.split(',')[0]]) {
-            //         x[item.dataIndex as string] = [
-            //           x[(item.dataIndex as string)?.split(',')[0]],
-            //           x[(item.dataIndex as string)?.split(',')[1]],
-            //         ];
-            //       }
-            //     });
-            //   });
-            // }
 
             //要保证在预加载之后在emit  不然预加载数据不会绑定到表单数据中
             emit('change', unref(data));
diff --git a/src/utils/event/design.ts b/src/utils/event/design.ts
index 9933cad..94f1835 100644
--- a/src/utils/event/design.ts
+++ b/src/utils/event/design.ts
@@ -27,8 +27,11 @@ export function changeToPinyin(label: string, isUpper?: boolean) {
 
 /* 如果没有下划线，不需要处理
 如果有下划线，用下划线切割，第一个下划线左边的全部小写，后面的首字母大写，首字母后面的全部小写 */
-export function camelCaseString(string: string) {
+export function camelCaseString(string: string, skipNoUnderline = false) {
   if (!string) return;
+  if (skipNoUnderline && string.indexOf('_') < 0) {
+    return string;
+  }
   const stringLower = string.toLowerCase();
   const len = stringLower.length;
   let str = '';