调整自定义插件

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/system/role/index.vue

@@ -74,6 +74,11 @@
               <el-checkbox size="large" v-model="list.checked" style="width: 16px;"
                 @change="changeCheckBox(item, false)">{{ list.name }}</el-checkbox>
             </div>
+
+            <div v-for="(list, listIndex) in item.children" :key="listIndex" class="itemName">
+              <el-checkbox size="large" v-model="list.checked" style="width: 16px;"
+                @change="changeCheckBox(item, false)">{{ list.name }}</el-checkbox>
+            </div>
           </div>
         </div>
       </div>

fhKeeper/formulahousekeeper/plugIn/form-design-master/playground/src/App.vue

@@ -1,9 +1,25 @@
 <template>
-  <DesignForm :preview="true" />
+  <DesignForm :preview="true" ref="designForm" />
+  <div @click="getDataJson()">获取数据</div>
+  <div @click="setDataJson()">设置数据</div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
 import { DesignForm } from '@zmjs/form-design'
+
+const designForm: any = ref(null)
+
+function getDataJson() {
+  console.log(designForm.value.getJson())
+  console.log(JSON.stringify(designForm.value.getJson()))
+}
+
+function setDataJson() {
+  let data = '{"list":[{"label":"单行文本", "allDisable":"true","type":"input","options":{"width":"100%","defaultValue":"","placeholder":"","maxlength":null,"prefix":"","suffix":"","prepend":"","append":"","disabled":false,"clearable":false,"readonly":false,"rules":{"trigger":"blur","enum":"","message":"","pattern":"","required":false,"type":"any"}},"key":"5o2w9yk","model":"plate1"}],"config":{"size":"default","hideRequiredAsterisk":false,"labelWidth":100,"labelPosition":"right"}}'
+  console.log(JSON.parse(data))
+  designForm.value.setJson(JSON.parse(data))
+}
 </script>
 
 <style>

fhKeeper/formulahousekeeper/plugIn/form-design-master/src/components/ComponentGroup.vue

@@ -2,23 +2,13 @@
   <div class="px-3 py-2 text-sm text-gray-700">
     {{ title }}
   </div>
-  <Draggable
-    tag="ul"
-    class="m-0 p-3 pt-0 grid grid-cols-2 gap-1"
-    item-key="type"
-    :group="{ name: 'form-design', pull: 'clone', put: false }"
-    :clone="cloneWidget"
-    :sort="false"
-    :list="list"
-    :move="moveStart"
-    @add="stopMove()"
-  >
+  <Draggable tag="ul" class="m-0 p-3 pt-0 grid grid-cols-2 gap-1" item-key="type"
+    :group="{ name: 'form-design', pull: 'clone', put: false }" :clone="cloneWidget" :sort="false" :list="list"
+    :allList="allList" :move="moveStart" :choose="setListIndex(allList)" @add="stopMove()">
     <template #item="{ element }">
-      <li
-        v-if="fields.includes(element.type)"
-        class="bg-gray-100 text-xs text-gray-700 hover:text-blue-500 leading-8 cursor-move -outline-offset-1 hover:outline-dashed outline-1 outline-blue-500 list-none flex items-center"
-      >
-        <i :class="'custom:'+element.type" class="ml-2 mr-1" />
+      <li v-if="fields.includes(element.type)"
+        class="bg-gray-100 text-xs text-gray-700 hover:text-blue-500 leading-8 cursor-move -outline-offset-1 hover:outline-dashed outline-1 outline-blue-500 list-none flex items-center">
+        <i :class="'custom:' + element.type" class="ml-2 mr-1" />
         <span>{{ element.label }}</span>
       </li>
     </template>
@@ -33,9 +23,10 @@ const props = defineProps<{ fields: any[]; title: string; list: any[], allList:
 let moveFlag = $ref(false)
 const moveStart = () => {
   const flag = props.allList.list.length < 5
-  if(!flag && !moveFlag) {
+  if (!flag && !moveFlag) {
     moveFlag = true
     ElMessage.warning('最多添加五个')
+    return false
   }
   return flag
 }
@@ -45,12 +36,25 @@ const stopMove = () => {
 </script>
 
 <script lang="ts">
+let listIndex = 1
+function setListIndex(list: any) {
+  if (list.list.length > 0) {
+    const array = list.list.map((item: any) => item.model)
+    const plateNumbers = array.filter((item: any) => item.includes('plate')).map((item: any) => {
+      const match = item.match(/plate(\d+)/);
+      return match ? match[1] : null;
+    });
+    listIndex = findMissingPositive(plateNumbers)
+  }
+}
+
 export function cloneWidget(params: any) {
   const key = Math.random().toString(36).substring(2, 9)
   params = cloneDeep({
     ...params,
     key,
-    model: `${params.type}_${key}`,
+    // model: `${params.type}_${key}`,
+    model: `plate${listIndex}`,
   })
   if (params.type === 'grid') {
     params.columns.forEach((i: any) => {
@@ -59,4 +63,16 @@ export function cloneWidget(params: any) {
   }
   return params
 }
+
+function findMissingPositive(nums: any) {
+    let numbers = nums.map(Number);
+    numbers.sort((a:any, b:any) => a - b);
+    let missing = 1;
+    for (let i = 0; i < numbers.length; i++) {
+        if (numbers[i] === missing) {
+            missing++;
+        }
+    }
+    return missing;
+}
 </script>

fhKeeper/formulahousekeeper/plugIn/form-design-master/src/design/DesignForm.vue

@@ -87,7 +87,7 @@
       </template>
     </el-dialog>
 
-    <el-dialog v-model="generateJsonVisible" append-to-body title="修改JSON" :z-index="2000" :width="800">
+    <el-dialog v-model="generateJsonVisible" append-to-body title="修改JSON" :z-index="20000" :width="800">
       <CodeEditor v-model="generateJsonTemplate" />
 
       <template #footer>

fhKeeper/formulahousekeeper/plugIn/form-design-master/src/design/WidgetConfig.vue

@@ -1,11 +1,11 @@
 <template>
   <el-form v-if="data" :key="data.key" label-position="top" p-2 flex-1 overflow-auto>
     <el-form-item v-if="!['grid'].includes(data.type)" label="字段标识">
-      <el-input v-model="data.model" />
+      <el-input v-model="data.model" :disabled="true" />
     </el-form-item>
 
     <el-form-item v-if="!['grid', 'table'].includes(data.type)" label="标题">
-      <el-input v-model="data.label" />
+      <el-input v-model="data.label" :disabled="data.allDisable" />
     </el-form-item>
 
     <el-form-item v-if="hasKey('width')" label="宽度">

fhKeeper/formulahousekeeper/plugIn/form-design-master/src/design/WidgetFormItem.vue

@@ -328,8 +328,8 @@ const handleDeleteClick = () => {
         <i class="eva:move-outline" text-lg />
       </div>
       <div absolute z-10 right-0 bottom="-0.5" bg-blue-500 flex gap-1 p="1 r-.5" text-white cursor-pointer :class="{'bg-yellow-500':element.type === 'grid'}">
-        <i class="fa6-regular:clone" @click.stop="handleCopyClick()" />
-        <i class="fa6-regular:trash-can" @click.stop="handleDeleteClick()" />
+        <i class="fa6-regular:clone" @click.stop="handleCopyClick()" v-if="false" />
+        <i class="fa6-regular:trash-can" @click.stop="handleDeleteClick()" v-if="!element.allDisable" />
       </div>
     </template>
   </div>