修改表单构建

src/views/tool/draggable/elements/hw-form.vue

@@ -1,11 +1,13 @@
 <script lang="ts">
 import hwInput from './hw-input.vue';
+import hwTable from './hw-table.vue';
 import tool from './tool.vue';
 
 export default {
   name: 'hw-form',
   components: {
     hwInput,
+    hwTable,
     tool
   }
 };

src/views/tool/draggable/elements/hw-table.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="hw-input" @click.stop="inputClick"
+       :style="`background-color: ${(selectUuid === options.uuid) ? '#0001':'#0000'};border-color: ${(selectUuid === options.uuid) ? '#00afff':'#0000'}`">
+    <tool v-if="selectUuid === options.uuid" :options="options" />
+    <div>
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column :prop="i" :label="options.thTdMap[i]" v-for="i in Object.keys(options.thTdMap)">
+          <template #default="scope">
+            {{ scope.$index }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import tool from './tool.vue';
+import { inject } from 'vue';
+
+defineOptions({
+  name: 'hw-table'
+});
+
+const props = defineProps({
+  options: Object
+});
+const { options } = toRefs(props);
+const getOptions = inject('getOptions');
+const tableData = ref(Array(5).fill({}));
+
+const selectUuid = inject('selectUuid');
+const getSelectUuid = inject('getSelectUuid');
+const inputClick = () => {
+  getOptions(options.value);
+  getSelectUuid(options.value.uuid);
+};
+</script>
+<style scoped lang="less">
+.hw-input {
+  margin: 2px;
+  border: 1px solid #0000;
+  position: relative;
+  padding: 12px 2px 2px;
+
+  &:hover {
+    background-color: #0001;
+    border: 1px solid #00afff;
+  }
+}
+</style>
+
+
+

src/views/tool/draggable/formBoard.vue

@@ -1,12 +1,14 @@
 <script lang="ts">
 import hwInputView from './viewElements/hw-input-view.vue';
 import hwFormView from './viewElements/hw-form-view.vue';
+import hwTableView from './viewElements/hw-table-view.vue';
 
 export default {
   name: 'hw-form',
   components: {
     hwInputView,
-    hwFormView
+    hwFormView,
+    hwTableView
   }
 };
 </script>
@@ -16,7 +18,6 @@ export default {
     <div v-for="i in widgetList" :key="i.uuid">
       <component :is="i.type+'-view'" :options="i.options" :tasks="i.tasks" :formData="formData" />
     </div>
-    {{ formData }}
   </div>
 
 </template>
@@ -30,6 +31,7 @@ const props = defineProps({
 const { widgetList } = toRefs(props);
 
 const formData = ref({ pageVariable: {} });
+provide('globalFormData', formData);
 const formDataOperation = {
   get: (key) => {
     return formData.value.pageVariable[key];

src/views/tool/draggable/index.vue

@@ -5,6 +5,7 @@
       </div>
       <el-tabs v-model="activeName" class="demo-tabs" stretch>
         <el-tab-pane label="组件列表" name="first">
+          <el-divider content-position="left">表单组件</el-divider>
           <draggable :list="dragList" ghost-class="ghost" :force-fallback="true"
                      :group="{ name: 'list', pull: 'clone' }"
                      :sort="false" itemKey="id" @start="onStartLeft" :clone="onClone">
@@ -12,6 +13,14 @@
               <element-mini :option="element" @dblclick.stop="addElement(element)" />
             </template>
           </draggable>
+          <el-divider content-position="left">数据展示组件</el-divider>
+          <draggable :list="dragViewList" ghost-class="ghost" :force-fallback="true"
+                     :group="{ name: 'list', pull: 'clone' }"
+                     :sort="false" itemKey="id" @start="onStartLeft" :clone="onClone">
+            <template #item="{ element }">
+              <element-mini :option="element" @dblclick.stop="addElement(element)" />
+            </template>
+          </draggable>
         </el-tab-pane>
         <el-tab-pane label="模板列表" name="second">Config</el-tab-pane>
         <el-tab-pane label="数据（）" name="three">
@@ -92,11 +101,16 @@ const dragList = [
       name: '表单',
       labelWidth: '120px',
       formData: {},
+      isInLine: false,
       isReset: false,
       isResetBottom: false,
       isSubmitBottom: true,
       submitBottomName: '提交',
       resetBottomName: '重置',
+      isPagination: true,
+      total: 'total',
+      pageNum: 'pageNum',
+      pageSize: 'pageSize',
       submitFunction: ''
     },
     tasks: [],
@@ -133,6 +147,19 @@ const dragList = [
   },
   { type: 'hw-slider', isContainer: false, options: { name: '滑块', step: 2, showStops: true }, name: '滑块', id: 6 }
 ];
+const dragViewList = [
+  {
+    type: 'hw-table',
+    isContainer: false,
+    options: {
+      name: '表格',
+      thTdMap: { planId: '字段planId', dispatchCode: '字段dispatchCode', materialName: '字段materialName' },
+      dataKey: ''
+    },
+    name: '表格',
+    id: 101
+  }
+];
 
 function removeItemByUuid(arr, uuid) {
   arr.forEach((item, index) => {
@@ -214,7 +241,7 @@ const viewForm = () => {
 .option-box {
   width: 400px;
   display: inline-block;
-  user-select: none;
+  //user-select: none;
   vertical-align: top;
   margin: 8px;
   border: 1px solid #ccc;

src/views/tool/draggable/nest.vue

@@ -1,11 +1,13 @@
 <script lang="ts">
 import hwInput from './elements/hw-input.vue';
+import hwTable from './elements/hw-table.vue';
 import hwForm from './elements/hw-form.vue';
 
 export default {
   name: 'nested-draggable',
   components: {
     hwInput,
+    hwTable,
     hwForm
   }
 };
@@ -40,7 +42,6 @@ const props = defineProps({
 const { tasks, formData } = toRefs(props);
 
 const changeCB = (e) => {
-  console.log('changeCB', e);
   if (e.added) {
     tasks.value[e.added.newIndex].id = Date.now();
   }

src/views/tool/draggable/option/functionDialog/getPageData.vue

@@ -12,7 +12,7 @@ const form = ref({
 });
 
 const onSubmit = () => {
-  return `console.log(${form.value.name});\n`;
+  return `console.log(formDataOperation.get('${form.value.name}'));\n`;
 };
 
 

src/views/tool/draggable/option/functionDialog/request.vue

@@ -18,24 +18,94 @@
       </el-select>
     </el-form-item>
     <el-form-item label="请求参数" v-if="form.method === 'get'">
-      <el-input v-model="form.params" />
+      <el-input v-model="form.params" placeholder="默认为表单数据(不建议修改)" />
     </el-form-item>
     <el-form-item label="请求参数" v-if="form.method === 'post'">
-      <el-input v-model="form.data" />
+      <el-input v-model="form.data" placeholder="默认为表单数据(不建议修改)" />
+    </el-form-item>
+    <el-form-item label="结果储存字段名">
+      <el-input v-model="form.fieldName" />
+    </el-form-item>
+
+    <el-form-item>
+      <template #label>
+        <div style="line-height: 32px">
+          <el-text>储存数据字段</el-text>
+          <el-tooltip placement="top">
+            <template #content>
+              若下一层使用 [] 获取，则 [] 内的字段请使用'' 或""包裹
+            </template>
+            <el-icon style="margin-left: 4px">
+              <Warning />
+            </el-icon>
+          </el-tooltip>
+        </div>
+      </template>
+      <el-input v-model="form.keys" placeholder="请仔细核对层级关系" />
+    </el-form-item>
+    <el-form-item label="结果储存为">
+      <el-select
+        v-model="form.storageLocation"
+      >
+        <el-option
+          label="页面"
+          value="page"
+        />
+        <el-option
+          label="当前方法"
+          value="now"
+        />
+      </el-select>
+    </el-form-item>
+
+    <el-form-item label="是否为分页数据">
+      <el-switch v-model="form.isTotal" />
     </el-form-item>
   </el-form>
 </template>
 
 <script lang="ts" setup>
+import request from '@/utils/request';
+
 const form = ref({
   url: '',
   method: 'get',
   params: '',
-  data: ''
+  data: '',
+  fieldName: '',
+  storageLocation: 'now',
+  keys: '',
+  isTotal: true
 });
 
-const onSubmit = () => {
+const setParams = (e) => {
+  if (e === 'get') {
+    return `params: ${form.value.params ? form.value.params : 'formData'} `;
+  } else if (e === 'post') {
+    return `data: ${form.value.data ? form.value.data : 'formData'} }`;
+  } else {
+    return ``;
+  }
+};
+
+const setRes = () => {
+  if (form.value.storageLocation === 'page') {
+    return `formDataOperation.set('${form.value.fieldName}',${form.value.fieldName}${form.value.keys})`;
+  } else {
+    return `localData['${form.value.fieldName}'] = ${form.value.fieldName}${form.value.keys}`;
+  }
+};
 
+
+const onSubmit = () => {
+  return `const ${form.value.fieldName} = await request({
+    url: '${form.value.url}',
+    method: '${form.value.method}',
+    ${setParams(form.value.method)}
+  })
+  ${setRes()}
+  ${form.value.isTotal ? `formData.total = ${form.value.fieldName}.total` : ''}
+  `;
 };
 
 

src/views/tool/draggable/option/functionDialog/setPageData.vue

@@ -3,16 +3,20 @@
     <el-form-item label="变量名称">
       <el-input v-model="form.name" />
     </el-form-item>
+    <el-form-item label="变量值">
+      <el-input v-model="form.data" />
+    </el-form-item>
   </el-form>
 </template>
 
 <script lang="ts" setup>
 const form = ref({
-  name: ''
+  name: '',
+  data: ''
 });
 
 const onSubmit = () => {
-  return `console.log(${form.value.name});\n`;
+  return `formDataOperation.set('${form.value.name}',${form.value.data});\n`;
 };
 
 

src/views/tool/draggable/option/functionType.vue

@@ -17,7 +17,7 @@ export default {
 <template>
   <el-form-item>
     <template #label>
-      <div style="line-height: 20px">
+      <div style="line-height: 32px">
         <el-text>{{ itemName }}</el-text>
         <el-tooltip placement="top">
           <template #content>
@@ -26,6 +26,7 @@ export default {
             request:网络请求<br>
             formDataOperation:页面变量存储<br>
             包含get,set两个方法<br>
+            localData:页面数据<br>
           </template>
           <el-icon style="margin-left: 4px">
             <Warning />
@@ -37,8 +38,8 @@ export default {
     <el-button @click="addDialogVisible = true">添加</el-button>
   </el-form-item>
   <el-dialog v-model="dialogVisible" title="编辑方法" width="500">
-    <div class="code">(formData, request, formDataOperation: {get, set} )=>{</div>
-    <el-input v-model="formData[keyValue]" type="textarea" />
+    <div class="code">(formData, request, formDataOperation: {get, set}, localData)=>{</div>
+    <el-input v-model="formData[keyValue]" type="textarea" :rows="16" />
     <div class="code">}</div>
     <template #footer>
       <div>
@@ -52,10 +53,11 @@ export default {
     title="选择方法"
     width="500"
   >
-    <el-button type="primary" @click="addFunction('log')">打印变量</el-button>
-    <el-button type="primary" @click="addFunction('request')">网络请求</el-button>
-    <el-button type="primary" @click="addFunction('setPageData')">设置页面变量</el-button>
-    <el-button type="primary" @click="addFunction('getPageData')">读取页面变量</el-button>
+    <el-button style="margin-bottom: 12px;margin-left: 12px" type="primary" @click="addFunction('log')">打印变量
+    </el-button>
+    <el-button style="margin-bottom: 12px;" type="primary" @click="addFunction('request')">网络请求</el-button>
+    <el-button style="margin-bottom: 12px;" type="primary" @click="addFunction('setPageData')">设置页面变量</el-button>
+    <el-button style="margin-bottom: 12px;" type="primary" @click="addFunction('getPageData')">读取页面变量</el-button>
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="addDialogVisible = false">关闭</el-button>

src/views/tool/draggable/option/optionForm.vue

@@ -30,9 +30,9 @@ const props = defineProps({
 });
 
 const typeEnum = {
-  inputType: ['name', 'key', 'labelWidth', 'submitBottomName', 'resetBottomName'],
+  inputType: ['name', 'key', 'labelWidth', 'submitBottomName', 'resetBottomName', 'total', 'pageNum', 'pageSize', 'dataKey'],
   inputAreaType: [],
-  switchType: ['isReset', 'isResetBottom', 'isSubmitBottom', 'disabled'],
+  switchType: ['isReset', 'isResetBottom', 'isSubmitBottom', 'disabled', 'isPagination', 'isInLine'],
   functionType: ['submitFunction']
 };
 const nameEnum = {
@@ -45,7 +45,13 @@ const nameEnum = {
   isResetBottom: '是否显示重置按钮',
   isSubmitBottom: '是否显示确定按钮',
   disabled: '是否禁用',
-  submitFunction: '提交回调函数'
+  submitFunction: '提交回调函数',
+  isPagination: '是否分页',
+  total: '总数字段名',
+  pageNum: '当前页字段名',
+  pageSize: '每页条数字段名',
+  dataKey: '获取的数据字段',
+  isInLine: '是否为行内表单'
 };
 const getType = (e) => {
   let res = '';

src/views/tool/draggable/viewElements/hw-form-view.vue

@@ -1,27 +1,33 @@
 <script lang="ts">
 import hwInputView from './hw-input-view.vue';
+import hwTableView from './hw-table-view.vue';
 
 export default {
   name: 'hw-form-view',
   components: {
-    hwInputView
+    hwInputView,
+    hwTableView
   }
 };
 </script>
 
 <template>
   <div>
-    <el-form :model="formData[options.key || ('form-'+options.uuid)]">
-      <div v-for="i in tasks">
-        <component :is="i.type+'-view'" :options="i.options" :tasks="i.tasks"
-                   :formData="formData[options.key || ('form-'+options.uuid)]" />
-      </div>
+    <el-form :model="formData[options.key || ('form-'+options.uuid)]"
+             :inline="options.isInLine">
+      <component v-for="i in tasks" :is="i.type+'-view'" :options="i.options" :tasks="i.tasks"
+                 :formData="formData[options.key || ('form-'+options.uuid)]" />
       <el-form-item>
         <el-button type="primary" @click="onSubmit" v-if="options.isSubmitBottom">{{ options.submitBottomName }}
         </el-button>
         <el-button v-if="options.isResetBottom" @click="onReset">{{ options.resetBottomName }}</el-button>
       </el-form-item>
     </el-form>
+    <!--    {{ localData }}-->
+    <pagination v-show="formData[options.key || ('form-'+options.uuid)][options.total] > 0"
+                v-model:page="formData[options.key || ('form-'+options.uuid)][options.pageNum]"
+                v-model:limit="formData[options.key || ('form-'+options.uuid)][options.pageSize]"
+                :total="formData[options.key || ('form-'+options.uuid)][options.total]" @pagination="onSubmit" />
   </div>
 </template>
 
@@ -37,15 +43,22 @@ const props = defineProps({
 
 const { options, tasks, formData } = toRefs(props);
 const formDataOperation = inject('formDataOperation');
+const localData = ref({});
 
 onBeforeMount(() => {
   formData.value[options.value.key || ('form-' + options.value.uuid)] = {};
 });
 
-const onSubmit = () => {
+const onSubmit = async () => {
   try {
-    const submitFunction = new Function('formData', 'request','formDataOperation', options.value.submitFunction);
-    submitFunction(formData.value[options.value.key || ('form-' + options.value.uuid)], request,formDataOperation);
+    const fun = () => {
+      return `return async ()=>{
+        ${options.value.submitFunction}
+      }`;
+    };
+    const submitFunction = new Function('formData', 'request', 'formDataOperation', 'localData', fun());
+    await submitFunction(formData.value[options.value.key || ('form-' + options.value.uuid)], request, formDataOperation, localData.value)();
+    console.log();
   } catch (e) {
     console.log(e);
   }

src/views/tool/draggable/viewElements/hw-input-view.vue

@@ -1,9 +1,7 @@
 <template>
-  <div>
-    <el-form-item :label="options.name" :required="options.required">
-      <el-input v-model="formData[options.key || ('input-'+options.uuid)]" :disabled="options.disabled" />
-    </el-form-item>
-  </div>
+  <el-form-item :label="options.name" :required="options.required">
+    <el-input v-model="formData[options.key || ('input-'+options.uuid)]" :disabled="options.disabled" />
+  </el-form-item>
 </template>
 <script lang="ts" setup>
 

src/views/tool/draggable/viewElements/hw-table-view.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <el-table :data="globalFormData.pageVariable[options.dataKey]" style="width: 100%">
+      <el-table-column :prop="i" :label="options.thTdMap[i]" v-for="i in Object.keys(options.thTdMap)" />
+    </el-table>
+  </div>
+</template>
+<script lang="ts" setup>
+
+defineOptions({
+  name: 'hw-table-view'
+});
+
+const props = defineProps({
+  options: Object
+});
+
+const { options } = toRefs(props);
+const globalFormData = inject('globalFormData');
+</script>
+<style scoped lang="less">
+</style>
+
+
+