From 1acb8ecde847a61768fb2c08c78e009ef8251a9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Mon, 24 Feb 2025 16:33:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=A1=A8=E5=8D=95=E6=9E=84?=
 =?UTF-8?q?=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Draggable/chart.vue            |  31 ++++++
 src/views/mes/planInfo/index.vue              | 104 +++++++++++-------
 src/views/tool/draggable/demo.vue             |  45 +++-----
 .../tool/draggable/elements/hw-chart.vue      |  66 +++++++++++
 src/views/tool/draggable/elements/hw-form.vue |   6 +
 .../draggable/elements/hw-radio-group.vue     |  51 +++++++++
 .../tool/draggable/elements/hw-slider.vue     |  48 ++++++++
 src/views/tool/draggable/exportConfig/form.js |  10 +-
 .../tool/draggable/exportConfig/index.js      |   5 +-
 .../tool/draggable/exportConfig/script.js     |   1 -
 src/views/tool/draggable/formBoard.vue        |   8 +-
 src/views/tool/draggable/index.vue            |  24 ++--
 src/views/tool/draggable/nest.vue             |   8 +-
 src/views/tool/draggable/option/tableType.vue |   3 +-
 .../draggable/viewElements/hw-chart-view.vue  |  43 ++++++++
 .../draggable/viewElements/hw-form-view.vue   |   8 +-
 .../viewElements/hw-radio-group-view.vue      |  26 +++++
 .../draggable/viewElements/hw-slider-view.vue |  23 ++++
 18 files changed, 411 insertions(+), 99 deletions(-)
 create mode 100644 src/components/Draggable/chart.vue
 create mode 100644 src/views/tool/draggable/elements/hw-chart.vue
 create mode 100644 src/views/tool/draggable/elements/hw-radio-group.vue
 create mode 100644 src/views/tool/draggable/elements/hw-slider.vue
 create mode 100644 src/views/tool/draggable/viewElements/hw-chart-view.vue
 create mode 100644 src/views/tool/draggable/viewElements/hw-radio-group-view.vue
 create mode 100644 src/views/tool/draggable/viewElements/hw-slider-view.vue

diff --git a/src/components/Draggable/chart.vue b/src/components/Draggable/chart.vue
new file mode 100644
index 0000000..5b4afa6
--- /dev/null
+++ b/src/components/Draggable/chart.vue
@@ -0,0 +1,31 @@
+<template>
+  <div style="width: 100%;height: 100%" ref="chartRef" />
+</template>
+
+<script setup>
+import * as echarts from 'echarts';
+
+const props = defineProps({
+  defaultOption: Object
+});
+
+
+const chart = ref(null);
+const option = ref(null);
+const chartRef = ref();
+
+const setData = (e) => {
+  option.value = e;
+  initChart(e);
+};
+const initChart = (option) => {
+  if (!chart.value) {
+    chart.value = echarts.init(chartRef.value, 'macarons');
+  }
+  chart.value.setOption(option, true);
+};
+
+defineExpose({
+  setData
+});
+</script>
diff --git a/src/views/mes/planInfo/index.vue b/src/views/mes/planInfo/index.vue
index 211b1e3..74660d5 100644
--- a/src/views/mes/planInfo/index.vue
+++ b/src/views/mes/planInfo/index.vue
@@ -9,10 +9,12 @@
             <!--              <el-input v-model="queryParams.productOrderId" placeholder="请输入生产订单ID" clearable @keyup.enter="handleQuery" />-->
             <!--            </el-form-item>-->
             <el-form-item label='计划编号' prop='planCode'>
-              <el-input v-model='queryParams.planCode' placeholder='请输入计划编号' clearable @keyup.enter='handleQuery' />
+              <el-input v-model='queryParams.planCode' placeholder='请输入计划编号' clearable
+                        @keyup.enter='handleQuery' />
             </el-form-item>
             <el-form-item label='物料名称' prop='materialName'>
-              <el-input v-model='queryParams.materialName' placeholder='请输入物料名称' clearable @keyup.enter='handleQuery' />
+              <el-input v-model='queryParams.materialName' placeholder='请输入物料名称' clearable
+                        @keyup.enter='handleQuery' />
             </el-form-item>
             <!--            <el-form-item label="物料BOM" prop="materialBomId">-->
             <!--              <el-input v-model="queryParams.materialBomId" placeholder="请输入物料BOM" clearable @keyup.enter="handleQuery" />-->
@@ -113,7 +115,8 @@
       <el-table v-loading='loading' :data='planInfoList' @selection-change='handleSelectionChange'>
         <el-table-column type='selection' width='55' align='center' />
         <el-table-column label='主键标识' align='center' prop='planId' v-if='columns[0].visible' />
-        <el-table-column label='生产订单ID' align='center' prop='productOrderId' v-if='columns[2].visible' width='100' />
+        <el-table-column label='生产订单ID' align='center' prop='productOrderId' v-if='columns[2].visible'
+                         width='100' />
         <el-table-column label='销售订单ID' align='center' prop='saleOrderId' v-if='columns[3].visible' />
         <el-table-column label='销售订单编号' align='center' prop='saleorderCode' v-if='columns[4].visible' />
         <el-table-column label='计划编号' align='center' prop='planCode' v-if='columns[5].visible' width='120' />
@@ -122,8 +125,10 @@
         <el-table-column label='物料BOM' align='center' prop='materialBomName' v-if='columns[8].visible' width='160' />
         <el-table-column label='工序名称' align='center' prop='processName' v-if='columns[9].visible' />
         <el-table-column label='顺序' align='center' prop='processOrder' v-if='columns[10].visible' />
-        <el-table-column label='上一工序ID' align='center' prop='lastProcessId' v-if='columns[11].visible' width='100' />
-        <el-table-column label='最后工序标识' align='center' prop='finalProcessFlag' v-if='columns[12].visible' width='110'>
+        <el-table-column label='上一工序ID' align='center' prop='lastProcessId' v-if='columns[11].visible'
+                         width='100' />
+        <el-table-column label='最后工序标识' align='center' prop='finalProcessFlag' v-if='columns[12].visible'
+                         width='110'>
           <template #default='scope'>
             <dict-tag :options='active_flag' :value='scope.row.finalProcessFlag' />
           </template>
@@ -148,7 +153,8 @@
             <span>{{ parseTime(scope.row.planEndTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
           </template>
         </el-table-column>
-        <el-table-column label='实际开始时间' align='center' prop='realBeginTime' width='180' v-if='columns[21].visible'>
+        <el-table-column label='实际开始时间' align='center' prop='realBeginTime' width='180'
+                         v-if='columns[21].visible'>
           <template #default='scope'>
             <span>{{ parseTime(scope.row.realBeginTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
           </template>
@@ -226,7 +232,8 @@
           </el-input>
         </el-form-item>
         <el-form-item label='物料BOM' prop='materialBoMName'>
-          <el-input v-model='form.materialBoMName' placeholder='请点击检索物料BOM' @click='handleMaterialBomAdd' readonly>
+          <el-input v-model='form.materialBoMName' placeholder='请点击检索物料BOM' @click='handleMaterialBomAdd'
+                    readonly>
             <template #append>
               <el-icon class='el-input__icon'>
                 <search />
@@ -296,14 +303,14 @@
                           placeholder='请选择计划时间'>
           </el-date-picker>
         </el-form-item>
-<!--        <el-form-item label='计划结束时间' prop='planEndTime'>-->
-<!--          <el-date-picker clearable-->
-<!--                          v-model='form.planEndTime'-->
-<!--                          type='datetime'-->
-<!--                          value-format='YYYY-MM-DD HH:mm:ss'-->
-<!--                          placeholder='请选择计划结束时间'>-->
-<!--          </el-date-picker>-->
-<!--        </el-form-item>-->
+        <!--        <el-form-item label='计划结束时间' prop='planEndTime'>-->
+        <!--          <el-date-picker clearable-->
+        <!--                          v-model='form.planEndTime'-->
+        <!--                          type='datetime'-->
+        <!--                          value-format='YYYY-MM-DD HH:mm:ss'-->
+        <!--                          placeholder='请选择计划结束时间'>-->
+        <!--          </el-date-picker>-->
+        <!--        </el-form-item>-->
         <!--        <el-form-item label="附件信息" prop="attachId">-->
         <!--          <el-input v-model="form.attachId" placeholder="请输入附件信息" />-->
         <!--        </el-form-item>-->
@@ -422,14 +429,14 @@
                                 placeholder='请选择计划时间'>
                 </el-date-picker>
               </el-form-item>
-<!--              <el-form-item label='计划结束时间' prop='planEndTime'>-->
-<!--                <el-date-picker clearable-->
-<!--                                v-model='form.planEndTime'-->
-<!--                                type='date'-->
-<!--                                value-format='YYYY-MM-DD HH:mm:ss'-->
-<!--                                placeholder='请选择计划结束时间'>-->
-<!--                </el-date-picker>-->
-<!--              </el-form-item>-->
+              <!--              <el-form-item label='计划结束时间' prop='planEndTime'>-->
+              <!--                <el-date-picker clearable-->
+              <!--                                v-model='form.planEndTime'-->
+              <!--                                type='date'-->
+              <!--                                value-format='YYYY-MM-DD HH:mm:ss'-->
+              <!--                                placeholder='请选择计划结束时间'>-->
+              <!--                </el-date-picker>-->
+              <!--              </el-form-item>-->
               <el-form-item label='班组' prop='classTeamId'>
                 <el-select v-model='form.classTeamId' placeholder='请选择班组'>
                   <el-option
@@ -505,14 +512,14 @@
                                 placeholder='请选择计划时间'>
                 </el-date-picker>
               </el-form-item>
-<!--              <el-form-item label='计划结束时间' prop='planEndTime'>-->
-<!--                <el-date-picker clearable-->
-<!--                                v-model='form.planEndTime'-->
-<!--                                type='date'-->
-<!--                                value-format='YYYY-MM-DD HH:mm:ss'-->
-<!--                                placeholder='请选择计划结束时间'>-->
-<!--                </el-date-picker>-->
-<!--              </el-form-item>-->
+              <!--              <el-form-item label='计划结束时间' prop='planEndTime'>-->
+              <!--                <el-date-picker clearable-->
+              <!--                                v-model='form.planEndTime'-->
+              <!--                                type='date'-->
+              <!--                                value-format='YYYY-MM-DD HH:mm:ss'-->
+              <!--                                placeholder='请选择计划结束时间'>-->
+              <!--                </el-date-picker>-->
+              <!--              </el-form-item>-->
               <el-form-item label='班组' prop='classTeamId'>
                 <el-select v-model='form.classTeamId' placeholder='请选择班组'>
                   <el-option
@@ -547,7 +554,12 @@
     </el-dialog>
 
     <!-- 批量添加硫化计划信息对话框 -->
-    <el-dialog :title='vulBatchDialog.title' v-model='vulBatchDialog.visible' width='1200px' append-to-body>
+    <el-dialog v-model='vulBatchDialog.visible' width='1200px' append-to-body>
+      <template #header="{ close, titleId, titleClass }">
+        <div class="my-header">
+          {{ vulBatchDialog.title }}
+        </div>
+      </template>
       <el-container style='height: 500px; border: 1px solid #eee'>
         <div style='width: 400px; height: 100%; overflow: auto'>
           <el-table v-loading='loading' :data='prodBaseMachineInfoList'
@@ -564,7 +576,8 @@
               <el-row :gutter='10' class='mb8'>
                 <el-col :span='12'>
                   <el-form-item label='物料名称' prop='materialId'>
-                    <el-input v-model='form.materialName' placeholder='请点击检索物料' @click='handleMaterialAdd' readonly>
+                    <el-input v-model='form.materialName' placeholder='请点击检索物料' @click='handleMaterialAdd'
+                              readonly>
                       <template #append>
                         <el-icon class='el-input__icon'>
                           <search />
@@ -575,7 +588,8 @@
                 </el-col>
                 <el-col :span='12'>
                   <el-form-item label='物料BOM' prop='materialBoMName'>
-                    <el-input v-model='form.materialBoMName' placeholder='请点击检索物料BOM' @click='handleMaterialBomAdd'
+                    <el-input v-model='form.materialBoMName' placeholder='请点击检索物料BOM'
+                              @click='handleMaterialBomAdd'
                               readonly>
                       <template #append>
                         <el-icon class='el-input__icon'>
@@ -634,14 +648,14 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span='12'>
-<!--                  <el-form-item label='计划结束时间' prop='planEndTime'>-->
-<!--                    <el-date-picker clearable-->
-<!--                                    v-model='form.planEndTime'-->
-<!--                                    type='date'-->
-<!--                                    value-format='YYYY-MM-DD HH:mm:ss'-->
-<!--                                    placeholder='请选择计划结束时间'>-->
-<!--                    </el-date-picker>-->
-<!--                  </el-form-item>-->
+                  <!--                  <el-form-item label='计划结束时间' prop='planEndTime'>-->
+                  <!--                    <el-date-picker clearable-->
+                  <!--                                    v-model='form.planEndTime'-->
+                  <!--                                    type='date'-->
+                  <!--                                    value-format='YYYY-MM-DD HH:mm:ss'-->
+                  <!--                                    placeholder='请选择计划结束时间'>-->
+                  <!--                    </el-date-picker>-->
+                  <!--                  </el-form-item>-->
                 </el-col>
               </el-row>
               <el-form-item label='班组' prop='classTeamId'>
@@ -1209,3 +1223,9 @@ onMounted(() => {
 //   }
 // );
 </script>
+<style>
+.my-header {
+  width: 100%;
+  text-align: center;
+}
+</style>
diff --git a/src/views/tool/draggable/demo.vue b/src/views/tool/draggable/demo.vue
index b3b7fab..4df7bac 100644
--- a/src/views/tool/draggable/demo.vue
+++ b/src/views/tool/draggable/demo.vue
@@ -1,32 +1,21 @@
 <template>
-  <div>
-    <el-form :model="pageForm['form-34dc0db2-484e-4df1-b66c-12566e18524f']" label-width="120px">
-      <el-form-item label="表单" required="false">
-        <el-form :model="pageForm['form-7833bd1b-472d-4cda-abbb-d67dd50ddccf']" label-width="120px">
-          <el-form-item label="单行文本" :required="false">
-            <el-input
-              v-model="pageForm['form-34dc0db2-484e-4df1-b66c-12566e18524f']['form-7833bd1b-472d-4cda-abbb-d67dd50ddccf']['input-0f7bc3d0-a462-4a37-9b35-e90103b2461b']"
+  <div><span>单行文本</span>
+    <el-input v-model="pageForm['input-7f3ceb4e-9aaf-42ff-95f7-86c9205748d8']"
               type="text" autocomplete="new-password" />
-          </el-form-item>
-        </el-form>
-      </el-form-item>
-    </el-form>
   </div>
   <div>
-    <el-form :model="pageForm['form-0bd2b044-1785-43b3-9985-44f9a8fe64c3']" label-width="120px">
-      <el-form-item label="单行文本" :required="false">
-        <el-input
-          v-model="pageForm['form-0bd2b044-1785-43b3-9985-44f9a8fe64c3']['input-4edcec9a-bce1-4a69-a7f0-520d0e0b330b']"
-          type="text" autocomplete="new-password" />
+    <el-form :model="pageForm['form-faa5bd9b-5d6b-4549-9646-2bc9f238c43d']" label-width="120px">
+      <el-form-item>
+        <el-button type="primary">提交</el-button>
+        <el-button>重置</el-button>
       </el-form-item>
     </el-form>
   </div>
   <div>
-    <el-form :model="pageForm['form-aec5764a-5743-4ad0-87dc-d8af1bd7b70d']" label-width="120px">
-      <el-form-item label="单行文本" :required="false">
-        <el-input
-          v-model="pageForm['form-aec5764a-5743-4ad0-87dc-d8af1bd7b70d']['input-a7fa75bb-0456-4347-ad08-bfba9cb54089']"
-          type="text" autocomplete="new-password" />
+    <el-form :model="pageForm['form-207b81de-b83d-4e60-be3b-1b8d4d9ad442']" label-width="120px">
+      <el-form-item>
+        <el-button type="primary">提交</el-button>
+        <el-button>重置</el-button>
       </el-form-item>
     </el-form>
   </div>
@@ -34,17 +23,9 @@
 
 <script setup>
 const pageForm = ref({
-  'form-34dc0db2-484e-4df1-b66c-12566e18524f': {
-    'form-7833bd1b-472d-4cda-abbb-d67dd50ddccf': {
-      'input-0f7bc3d0-a462-4a37-9b35-e90103b2461b': ''
-    }
-  },
-  'form-0bd2b044-1785-43b3-9985-44f9a8fe64c3': {
-    'input-4edcec9a-bce1-4a69-a7f0-520d0e0b330b': ''
-  },
-  'form-aec5764a-5743-4ad0-87dc-d8af1bd7b70d': {
-    'input-a7fa75bb-0456-4347-ad08-bfba9cb54089': ''
-  }
+  'input-7f3ceb4e-9aaf-42ff-95f7-86c9205748d8': '',
+  'form-faa5bd9b-5d6b-4549-9646-2bc9f238c43d': {},
+  'form-207b81de-b83d-4e60-be3b-1b8d4d9ad442': {}
 });
 
 </script>
diff --git a/src/views/tool/draggable/elements/hw-chart.vue b/src/views/tool/draggable/elements/hw-chart.vue
new file mode 100644
index 0000000..22beff9
--- /dev/null
+++ b/src/views/tool/draggable/elements/hw-chart.vue
@@ -0,0 +1,66 @@
+<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" />
+    <Chart ref="chartRef" />
+  </div>
+</template>
+<script lang="ts" setup>
+import tool from './tool.vue';
+import Chart from '@/components/Draggable/chart.vue';
+import { inject } from 'vue';
+
+defineOptions({
+  name: 'hw-chart'
+});
+const chartRef = ref();
+
+const props = defineProps({
+  options: Object,
+  formData: Object
+});
+
+onMounted(() => {
+  chartRef.value.setData({
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        data: [150, 230, 224, 218, 135, 147, 260],
+        type: 'line'
+      }
+    ]
+  });
+});
+
+const { options, formData } = toRefs(props);
+const getOptions = inject('getOptions');
+
+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>
+
+
+
diff --git a/src/views/tool/draggable/elements/hw-form.vue b/src/views/tool/draggable/elements/hw-form.vue
index 5591207..b570f2d 100644
--- a/src/views/tool/draggable/elements/hw-form.vue
+++ b/src/views/tool/draggable/elements/hw-form.vue
@@ -2,6 +2,9 @@
 import hwInput from './hw-input.vue';
 import hwInputNumber from './hw-input-number.vue';
 import hwTable from './hw-table.vue';
+import hwChart from './hw-chart.vue';
+import hwSlider from './hw-slider.vue';
+import hwRadioGroup from './hw-radio-group.vue';
 import tool from './tool.vue';
 
 export default {
@@ -10,6 +13,9 @@ export default {
     hwInput,
     hwInputNumber,
     hwTable,
+    hwChart,
+    hwSlider,
+    hwRadioGroup,
     tool
   }
 };
diff --git a/src/views/tool/draggable/elements/hw-radio-group.vue b/src/views/tool/draggable/elements/hw-radio-group.vue
new file mode 100644
index 0000000..da48ecc
--- /dev/null
+++ b/src/views/tool/draggable/elements/hw-radio-group.vue
@@ -0,0 +1,51 @@
+<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" />
+    <el-form-item :label="options.name" :required="options.required">
+      <el-radio-group v-model="formData[options.key || ('radio-group-'+options.uuid)]" :disabled="options.disabled">
+        <el-radio :value="3">Option A</el-radio>
+        <el-radio :value="6">Option B</el-radio>
+        <el-radio :value="9">Option C</el-radio>
+      </el-radio-group>
+    </el-form-item>
+  </div>
+</template>
+<script lang="ts" setup>
+import tool from './tool.vue';
+import { inject } from 'vue';
+
+defineOptions({
+  name: 'hw-radio-group'
+});
+
+const props = defineProps({
+  options: Object,
+  formData: Object
+});
+const { options, formData } = toRefs(props);
+const getOptions = inject('getOptions');
+
+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>
+
+
+
diff --git a/src/views/tool/draggable/elements/hw-slider.vue b/src/views/tool/draggable/elements/hw-slider.vue
new file mode 100644
index 0000000..89f75df
--- /dev/null
+++ b/src/views/tool/draggable/elements/hw-slider.vue
@@ -0,0 +1,48 @@
+<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" />
+    <el-form-item :label="options.name" :required="options.required">
+      <el-slider v-model="formData[options.key || ('slider-'+options.uuid)]" :disabled="options.disabled"
+      />
+    </el-form-item>
+  </div>
+</template>
+<script lang="ts" setup>
+import tool from './tool.vue';
+import { inject } from 'vue';
+
+defineOptions({
+  name: 'hw-slider'
+});
+
+const props = defineProps({
+  options: Object,
+  formData: Object
+});
+const { options, formData } = toRefs(props);
+const getOptions = inject('getOptions');
+
+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>
+
+
+
diff --git a/src/views/tool/draggable/exportConfig/form.js b/src/views/tool/draggable/exportConfig/form.js
index 2f1cd92..bed2123 100644
--- a/src/views/tool/draggable/exportConfig/form.js
+++ b/src/views/tool/draggable/exportConfig/form.js
@@ -27,7 +27,6 @@ const getFormCode = (data) => {
     // code += `<el-form-item label="${formData.options.name || ''}" required="${formData.options.required}">`;
     addCode(`<el-form-item label="${formData.options.name || ''}" required="${formData.options.required}">`);
   } else {
-    console.log(123123);
     // code += `<div> `;
     addCode(`<div> `);
   }
@@ -36,19 +35,24 @@ const getFormCode = (data) => {
   addCode(`<el-form :model="pageForm['${formData.options.key || ('form-' + formData.options.uuid)}']" label-width="${formData.options.labelWidth}" >`);
 
   formData.tasks.forEach(task => {
-    console.log(task);
     if (task.type === 'hw-form') {
       getFormCode({
         isForm: true, formData: formData, elementData: task, tier
       });
     } else {
-      elementEnum[task.type]({
+      const noFun = () => {
+      };
+      (elementEnum[task.type] || noFun)({
         isForm: true, formData: formData, elementData: task, tier
       });
     }
   });
 
   // code += `</el-form>`;
+  addCode(` <el-form-item>
+      <el-button type="primary" >${formData.options.submitBottomName}</el-button>
+      <el-button>${formData.options.resetBottomName}</el-button>
+    </el-form-item>`);
   addCode(`</el-form>`);
   if (isForm) {
     // code += `</el-form-item>`;
diff --git a/src/views/tool/draggable/exportConfig/index.js b/src/views/tool/draggable/exportConfig/index.js
index eeee75d..a516343 100644
--- a/src/views/tool/draggable/exportConfig/index.js
+++ b/src/views/tool/draggable/exportConfig/index.js
@@ -15,9 +15,10 @@ const elementEnum = {
 
 const exportConfig = (e) => {
   reset();
-  console.log(e);
+  const noFun = () => {
+  };
   e.map(v => {
-    elementEnum[v.type]({
+    (elementEnum[v.type] || noFun)({
       isForm: false, elementData: v, formData: {}
     });
   });
diff --git a/src/views/tool/draggable/exportConfig/script.js b/src/views/tool/draggable/exportConfig/script.js
index a977b38..3a4580b 100644
--- a/src/views/tool/draggable/exportConfig/script.js
+++ b/src/views/tool/draggable/exportConfig/script.js
@@ -15,7 +15,6 @@ let variablesStructure = {};
 
 
 const addVariables = (tier, key, type) => {
-  debugger
   let obj = variablesStructure;
   if (tier.length > 0) {
     tier.forEach((t) => {
diff --git a/src/views/tool/draggable/formBoard.vue b/src/views/tool/draggable/formBoard.vue
index a67cd50..1b21a94 100644
--- a/src/views/tool/draggable/formBoard.vue
+++ b/src/views/tool/draggable/formBoard.vue
@@ -3,6 +3,9 @@ import hwInputView from './viewElements/hw-input-view.vue';
 import hwInputNumberView from './viewElements/hw-input-number-view.vue';
 import hwFormView from './viewElements/hw-form-view.vue';
 import hwTableView from './viewElements/hw-table-view.vue';
+import hwChartView from './viewElements/hw-chart-view.vue';
+import hwSliderView from './viewElements/hw-slider-view.vue';
+import hwRadioGroupView from './viewElements/hw-radio-group-view.vue';
 
 export default {
   name: 'hw-form',
@@ -10,7 +13,10 @@ export default {
     hwInputView,
     hwInputNumberView,
     hwFormView,
-    hwTableView
+    hwTableView,
+    hwChartView,
+    hwSliderView,
+    hwRadioGroupView
   }
 };
 </script>
diff --git a/src/views/tool/draggable/index.vue b/src/views/tool/draggable/index.vue
index b8bed19..3091035 100644
--- a/src/views/tool/draggable/index.vue
+++ b/src/views/tool/draggable/index.vue
@@ -178,6 +178,15 @@ const dragViewList = [
     },
     name: '表格',
     id: 101
+  },
+  {
+    type: 'hw-chart',
+    isContainer: false,
+    options: {
+      name: '图表'
+    },
+    name: '图表',
+    id: 101
   }
 ];
 
@@ -221,21 +230,6 @@ const exportFile = () => {
   console.log(data);
 };
 
-// const
-
-const aa = ref({ a: 1 });
-const bb = (v) => {
-  console.log(v);
-  v.a += 1;
-  console.log(v);
-};
-
-setTimeout(() => {
-  bb(aa.value);
-  setTimeout(() => {
-    console.log(aa.value);
-  }, 100);
-}, 100);
 </script>
 <style scoped>
 .model {
diff --git a/src/views/tool/draggable/nest.vue b/src/views/tool/draggable/nest.vue
index 16459ff..bef565a 100644
--- a/src/views/tool/draggable/nest.vue
+++ b/src/views/tool/draggable/nest.vue
@@ -3,6 +3,9 @@ import hwInput from './elements/hw-input.vue';
 import hwInputNumber from './elements/hw-input-number.vue';
 import hwTable from './elements/hw-table.vue';
 import hwForm from './elements/hw-form.vue';
+import hwChart from './elements/hw-chart.vue';
+import hwSlider from './elements/hw-slider.vue';
+import hwRadioGroup from './elements/hw-radio-group.vue';
 
 export default {
   name: 'nested-draggable',
@@ -10,7 +13,10 @@ export default {
     hwInput,
     hwInputNumber,
     hwTable,
-    hwForm
+    hwForm,
+    hwChart,
+    hwSlider,
+    hwRadioGroup
   }
 };
 </script>
diff --git a/src/views/tool/draggable/option/tableType.vue b/src/views/tool/draggable/option/tableType.vue
index fe77a49..40ebd4e 100644
--- a/src/views/tool/draggable/option/tableType.vue
+++ b/src/views/tool/draggable/option/tableType.vue
@@ -47,7 +47,8 @@
     </el-button>
   </el-form-item>
 </template>
-<script lang="ts" setup>import {
+<script lang="ts" setup>
+import {
   Delete
 } from '@element-plus/icons-vue';
 
diff --git a/src/views/tool/draggable/viewElements/hw-chart-view.vue b/src/views/tool/draggable/viewElements/hw-chart-view.vue
new file mode 100644
index 0000000..3426c91
--- /dev/null
+++ b/src/views/tool/draggable/viewElements/hw-chart-view.vue
@@ -0,0 +1,43 @@
+<template>
+  <el-form-item :label="options.name" :required="options.required">
+
+    <Chart ref="chartRef" />
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+
+import Chart from '@/components/Draggable/chart.vue';
+
+defineOptions({
+  name: 'hw-input-view'
+});
+
+const chartRef = ref();
+const props = defineProps({
+  options: Object,
+  formData: Object
+});
+onMounted(() => {
+  chartRef.value.setData({
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        data: [150, 230, 224, 218, 135, 147, 260],
+        type: 'line'
+      }
+    ]
+  });
+});
+const { options, formData } = toRefs(props);
+</script>
+<style scoped lang="less">
+</style>
+
+
+
diff --git a/src/views/tool/draggable/viewElements/hw-form-view.vue b/src/views/tool/draggable/viewElements/hw-form-view.vue
index 1f82de8..2e553c3 100644
--- a/src/views/tool/draggable/viewElements/hw-form-view.vue
+++ b/src/views/tool/draggable/viewElements/hw-form-view.vue
@@ -2,13 +2,19 @@
 import hwInputView from './hw-input-view.vue';
 import hwInputNumberView from './hw-input-number-view.vue';
 import hwTableView from './hw-table-view.vue';
+import hwChartView from './hw-chart-view.vue';
+import hwSliderView from './hw-slider-view.vue';
+import hwRadioGroupView from './hw-radio-group-view.vue';
 
 export default {
   name: 'hw-form-view',
   components: {
     hwInputView,
     hwTableView,
-    hwInputNumberView
+    hwInputNumberView,
+    hwChartView,
+    hwSliderView,
+    hwRadioGroupView
   }
 };
 </script>
diff --git a/src/views/tool/draggable/viewElements/hw-radio-group-view.vue b/src/views/tool/draggable/viewElements/hw-radio-group-view.vue
new file mode 100644
index 0000000..40335b1
--- /dev/null
+++ b/src/views/tool/draggable/viewElements/hw-radio-group-view.vue
@@ -0,0 +1,26 @@
+<template>
+  <el-form-item :label="options.name" :required="options.required">
+    <el-radio-group v-model="formData[options.key || ('radio-group-'+options.uuid)]" :disabled="options.disabled">
+      <el-radio :value="3">Option A</el-radio>
+      <el-radio :value="6">Option B</el-radio>
+      <el-radio :value="9">Option C</el-radio>
+    </el-radio-group>
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+
+defineOptions({
+  name: 'hw-input-view'
+});
+
+const props = defineProps({
+  options: Object,
+  formData: Object
+});
+const { options, formData } = toRefs(props);
+</script>
+<style scoped lang="less">
+</style>
+
+
+
diff --git a/src/views/tool/draggable/viewElements/hw-slider-view.vue b/src/views/tool/draggable/viewElements/hw-slider-view.vue
new file mode 100644
index 0000000..d63356d
--- /dev/null
+++ b/src/views/tool/draggable/viewElements/hw-slider-view.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="options.name" :required="options.required">
+    <el-slider v-model="formData[options.key || ('slider-'+options.uuid)]" :disabled="options.disabled"
+    />
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+
+defineOptions({
+  name: 'hw-slider-view'
+});
+
+const props = defineProps({
+  options: Object,
+  formData: Object
+});
+const { options, formData } = toRefs(props);
+</script>
+<style scoped lang="less">
+</style>
+
+
+