未完成功能

+/*
+ * @Date: 2022-06-17 14:54:29
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-11-17 16:00:04
+ * @FilePath: /data-table/src/api/component.js
+ * @Description: 组件接口
+ */
+import { fn, fetch } from '@/api/fn';
+
+const Api = {
+  QUERY_COMPONENT: '/srv/?a=query_component',
+}
+
+/**
+ * @description: 查询组件
+ * @param: group_code 分组标识
+ * @param: component_code 组件标识
+ * @param: name 组件名称；条件：模糊查询；
+ */
+export const getComponentAPI = (params) => fn(fetch.get(Api.QUERY_COMPONENT, params));

 /*
  * @Date: 2022-06-17 14:54:29
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-11-17 14:42:30
+ * @LastEditTime: 2022-11-17 16:30:03
  * @FilePath: /data-table/src/api/form.js
  * @Description: 表单接口
  */
@@ -10,6 +10,8 @@ import { fn, fetch } from '@/api/fn';
 const Api = {
   FORM_ADD: '/srv/?a=add_form',
   FORM_QUERY: '/srv/?a=query_form',
+  ADD_FORM_FIELD: '/srv/?a=add_form_field',
+  ADD_FORM_SETTING: '/srv/?a=add_form_setting',
 }
 
 /**
@@ -27,3 +29,20 @@ export const addFormAPI = (params) => fn(fetch.post(Api.FORM_ADD, params));
  * @param: name 表单名称，模糊查询
  */
 export const queryFormAPI = (params) => fn(fetch.get(Api.FORM_QUERY, params));
+
+/**
+ * @description: 添加表单字段
+ * @param: form_code 表单唯一标识
+ * @param: component_code 组件标识
+ */
+export const addFormFieldAPI = (params) => fn(fetch.post(Api.ADD_FORM_FIELD, params));
+
+/**
+ * @description: 添加或修改表单字段属性设置
+ * @param: form_code 表单唯一标识
+ * @param: field_name 表单字段名。如果设置表单级（非字段级）的属性，可为空。
+ * @param: component_code 组件标识
+ * @param: property_code 属性标识
+ * @param: setting_value 待设置的属性值。json数组，内部必须双引号。如果属性值是单值，数组只有一个元素。
+ */
+export const addFormSettingAPI = (params) => fn(fetch.post(Api.ADD_FORM_SETTING, params));

 <!--
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-08 13:35:49
+ * @LastEditTime: 2022-11-08 08:01:23
  * @FilePath: /data-table/src/components/CheckboxField/index.vue
  * @Description: 文件描述
 -->
@@ -9,14 +9,14 @@
   <div class="checkbox-field-page">
     <div class="label">
       {{ item.label }}
-      <span v-if="item.required" style="color: red;">&nbsp;*</span>
+      <span v-if="item.component_props.required" style="color: red;">&nbsp;*</span>
       <span v-if="item.component_props.max" style="color: gray;">(最多可选数:&nbsp;{{ item.component_props.max }})</span>
     </div>
-    <van-field :name=" item.key" :border="false">
+    <van-field :name=" item.key" :rules="item.rules" :border="false">
       <template #input>
         <van-checkbox-group v-model="item.value" :direction="item.component_props.direction"
           :max="item.component_props.max">
-          <van-checkbox v-for="x in item.options" :key="index" :name="x.key" icon-size="1rem" shape="square"
+          <van-checkbox v-for="x in item.component_props.options" :key="index" :name="x.key" icon-size="1rem" shape="square"
             style="margin-bottom: 0.25rem;">{{ x.value }}</van-checkbox>
         </van-checkbox-group>
       </template>

 /*
  * @Date: 2022-11-17 14:46:43
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-11-17 14:47:46
+ * @LastEditTime: 2022-11-17 16:32:19
  * @FilePath: /data-table/src/router/routes/modules/setForm/index.js
  * @Description: 文件描述
  */
 const index = [{
   path: '/addForm',
-  name: '首页',
+  name: '新增表单',
   component: () => import('@/views/setForm/addForm.vue'),
   meta: {
     title: '新增表单',
     name: 'addFormPage'
   },
   children: []
+}, {
+  path: '/addField',
+  name: '新增表单字段',
+  component: () => import('@/views/setForm/addField.vue'),
+  meta: {
+    title: '新增表单字段',
+    name: 'addFieldPage'
+  },
+  children: []
+}, {
+  path: '/setField',
+  name: '添加表单字段属性设置',
+    component: () => import('@/views/setForm/setField.vue'),
+  meta: {
+    title: '添加表单字段属性设置',
+    name: 'setFieldPage'
+  },
+  children: []
 }]
 
 export default index;

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-11-17 14:08:01
+ * @LastEditTime: 2022-11-17 16:02:16
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -73,7 +73,7 @@ onMounted(async () => {
   const { data } = await queryFormAPI({ form_code: $route.query.code });
   const form_data = data[0];
   table_cover.value = "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg";
-  table_title.value = form_data.description;
+  table_title.value = form_data.name;
   formData.value = formatData(form_data.field_list);
   // mockData.value = [
   //   {

+<!--
+ * @Date: 2022-11-17 15:44:24
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-11-17 16:15:33
+ * @FilePath: /data-table/src/views/setForm/addField.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="add-field">
+    <van-nav-bar title="添加表单字段" />
+    <van-form @submit="onSubmit" style="margin-top: 1rem">
+      <van-cell-group inset>
+        <van-field
+          v-model="form_name"
+          name="form_name"
+          is-link
+          readonly
+          label="表单名称"
+          placeholder="表单名称"
+          @click="showForm = true"
+          required
+          :rules="[{ required: true, message: '请选择表单名称' }]"
+        />
+        <van-field
+          v-model="components_name"
+          name="components_name"
+          is-link
+          readonly
+          label="组件名称"
+          placeholder="组件名称"
+          @click="showComponents = true"
+          required
+          :rules="[{ required: true, message: '请选择组件名称' }]"
+        />
+      </van-cell-group>
+      <div style="margin: 16px">
+        <van-button round block type="primary" native-type="submit">确认</van-button>
+      </div>
+    </van-form>
+  </div>
+  <van-popup v-model:show="showForm" round position="bottom">
+    <van-picker
+      :columns="formColumns"
+      @cancel="showForm = false"
+      @confirm="onFormConfirm"
+    />
+  </van-popup>
+  <van-popup v-model:show="showComponents" round position="bottom">
+    <van-picker
+      :columns="componentsColumns"
+      @cancel="showComponents = false"
+      @confirm="onComponentsConfirm"
+    />
+  </van-popup>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { addFormFieldAPI, queryFormAPI } from "@/api/form.js";
+import { getComponentAPI } from "@/api/component.js";
+import { showSuccessToast, showFailToast } from "vant";
+
+import {
+  Cookies,
+  $,
+  _,
+  axios,
+  storeToRefs,
+  mainStore,
+  Toast,
+  useTitle,
+} from "@/utils/generatePackage.js";
+//import { } from '@/utils/generateModules.js'
+//import { } from '@/utils/generateIcons.js'
+//import { } from '@/composables'
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
+
+const form_name = ref("");
+const form_code = ref("");
+const components_name = ref("");
+const components_code = ref("");
+
+const formColumns = ref([]);
+const componentsColumns = ref([]);
+const showForm = ref(false);
+const showComponents = ref(false);
+
+onMounted(async () => {
+  const form = await queryFormAPI({ form_code: $route.query.code });
+  formColumns.value = form.data.map((item) => {
+    return { text: item.name, value: item.code };
+  });
+  const components = await getComponentAPI({ form_code: $route.query.code });
+  componentsColumns.value = components.data.map((item) => {
+    return { text: item.name, value: item.code };
+  });
+});
+
+const onFormConfirm = ({ selectedOptions }) => {
+  showForm.value = false;
+  form_name.value = selectedOptions[0].text;
+  form_code.value = selectedOptions[0].value;
+};
+const onComponentsConfirm = ({ selectedOptions }) => {
+  showComponents.value = false;
+  components_name.value = selectedOptions[0].text;
+  components_code.value = selectedOptions[0].value;
+};
+
+const onSubmit = async (values) => {
+  const result = await addFormFieldAPI({
+    form_code: form_code.value,
+    component_code: components_code.value,
+  });
+  if (result.code) {
+    showSuccessToast("新增成功");
+  }
+};
+</script>
+
+<style lang="less" scoped></style>

+<!--
+ * @Date: 2022-11-17 15:44:24
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-11-17 17:24:07
+ * @FilePath: /data-table/src/views/setForm/setField.vue
+ * @Description: 添加或修改表单字段属性设置
+-->
+<template>
+  <div class="add-field">
+    <van-nav-bar title="添加表单字段属性设置" />
+    <van-form @submit="onSubmit" style="margin-top: 1rem">
+      <van-cell-group inset>
+        <van-field
+          v-model="form_name"
+          name="form_name"
+          is-link
+          readonly
+          label="表单名称"
+          placeholder="表单名称"
+          @click="showForm = true"
+          required
+          :rules="[{ required: true, message: '请选择表单名称' }]"
+        />
+        <van-field
+          v-model="field_name"
+          name="field_name"
+          is-link
+          readonly
+          label="字段名称"
+          placeholder="字段名称"
+          @click="showField = true"
+          required
+          :rules="[{ required: true, message: '请选择字段名称' }]"
+        />
+        <van-field
+          v-model="components_name"
+          name="components_name"
+          is-link
+          readonly
+          label="组件名称"
+          placeholder="组件名称"
+          @click="showComponents = true"
+          required
+          :rules="[{ required: true, message: '请选择组件名称' }]"
+        />
+        <van-field readonly label="组件属性" />
+        <van-row v-for="(item, index) in propertyList" :key="index">
+          <van-col>
+            <van-field v-model="item.property_code" />
+          </van-col>
+          <van-col>
+            <van-field v-model="item.setting_value" />
+          </van-col>
+        </van-row>
+      </van-cell-group>
+      <div style="margin: 16px">
+        <van-button round block type="primary" native-type="submit">确认</van-button>
+      </div>
+    </van-form>
+  </div>
+  <van-popup v-model:show="showForm" round position="bottom">
+    <van-picker
+      :columns="formColumns"
+      @cancel="showForm = false"
+      @confirm="onFormConfirm"
+    />
+  </van-popup>
+  <van-popup v-model:show="showField" round position="bottom">
+    <van-picker
+      :columns="fieldColumns"
+      @cancel="showField = false"
+      @confirm="onFieldConfirm"
+    />
+  </van-popup>
+  <van-popup v-model:show="showComponents" round position="bottom">
+    <van-picker
+      :columns="componentsColumns"
+      @cancel="showComponents = false"
+      @confirm="onComponentsConfirm"
+    />
+  </van-popup>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { addFormFieldAPI, queryFormAPI } from "@/api/form.js";
+import { getComponentAPI } from "@/api/component.js";
+import { showSuccessToast, showFailToast } from "vant";
+
+import {
+  Cookies,
+  $,
+  _,
+  axios,
+  storeToRefs,
+  mainStore,
+  Toast,
+  useTitle,
+} from "@/utils/generatePackage.js";
+//import { } from '@/utils/generateModules.js'
+//import { } from '@/utils/generateIcons.js'
+//import { } from '@/composables'
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
+
+const form_name = ref("");
+const form_code = ref("");
+const field_name = ref("");
+const components_name = ref("");
+const components_code = ref("");
+
+const formColumns = ref([]);
+const fieldColumns = ref([]);
+const propertyList = ref([]);
+const componentsColumns = ref([]);
+const showForm = ref(false);
+const showField = ref(false);
+const showComponents = ref(false);
+
+const formData = ref("");
+const componentsData = ref("");
+
+onMounted(async () => {
+  const form = await queryFormAPI({ form_code: $route.query.code });
+  formData.value = form.data;
+  formColumns.value = form.data.map((item) => {
+    return { text: item.name, value: item.code };
+  });
+  const components = await getComponentAPI({ form_code: $route.query.code });
+  componentsData.value = components.data;
+  componentsColumns.value = components.data.map((item) => {
+    return { text: item.name, value: item.code };
+  });
+});
+
+const onFormConfirm = ({ selectedOptions }) => {
+  showForm.value = false;
+  form_name.value = selectedOptions[0].text;
+  form_code.value = selectedOptions[0].value;
+  // 生成相应下级字段列表
+  formData.value.forEach((element) => {
+    if (element.code === form_code.value) {
+      fieldColumns.value = element.field_list.map((item) => {
+        return { text: item.field_name, value: item.field_name };
+      });
+    }
+  });
+  // 重置选择字段名称
+  field_name.value = "";
+};
+const onFieldConfirm = ({ selectedOptions }) => {
+  showField.value = false;
+  field_name.value = selectedOptions[0].text;
+  //
+  formData.value.forEach((element) => {
+    if (element.code === form_code.value) {
+      element.field_list.forEach((field) => {
+        if (field.field_name === field_name.value) {
+          // 查询组件名称
+          components_name.value = field.component_name;
+          propertyList.value = field.property_list;
+        }
+      });
+    }
+  });
+};
+const onComponentsConfirm = ({ selectedOptions }) => {
+  showComponents.value = false;
+  components_name.value = selectedOptions[0].text;
+  components_code.value = selectedOptions[0].value;
+  formData.value.forEach((element) => {
+    if (element.code === form_code.value) {
+      element.field_list.forEach((field) => {
+        if (field.field_name === field_name.value) {
+          // 查询组件名称
+          components_name.value = field.component_name;
+          propertyList.value = field.property_list;
+        }
+      });
+    }
+  });
+};
+
+const onSubmit = async (values) => {
+  const result = await addFormFieldAPI({
+    form_code: form_code.value,
+    component_code: components_code.value,
+  });
+  if (result.code) {
+    showSuccessToast("新增成功");
+  }
+};
+</script>
+
+<style lang="less" scoped></style>