新增测试表格组件

hookehuyr
Commit 4bd7fdcf31f7e071e8c4d81015462ad4f66b27a5 4bd7fdcf 1 parent 0a03363f
Showing 6 changed files with 202 additions and 25 deletions
src/components/TEditor/index.vue
src/components/TableField/index.vue
src/components/TextField/index.vue
src/hooks/useComponentType.js
src/views/index.vue
src/views/test.vue
--- a/src/components/TEditor/index.vue
View file @4bd7fdc
+++ b/src/components/TEditor/index.vue
View file @4bd7fdc
 <!--
  * @Date: 2024-07-12 13:28:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-12 17:58:57
+ * @LastEditTime: 2024-08-01 12:00:57
  * @FilePath: /data-table/src/components/TEditor/index.vue
  * @Description: 文件描述
 -->
@@ -18,7 +18,7 @@
 <script setup>
 import {computed, reactive, watch, ref, nextTick, onMounted} from "vue"; //全屏
-
+import $ from "jquery";
 // import tinymce from "tinymce/tinymce";
 // import "tinymce/skins/content/default/content.css";
 import Editor from "@tinymce/tinymce-vue";
@@ -204,8 +204,8 @@ const tinymceOptions = {
   image_title: true,
   menubar: 'edit view insert format tools',
   // fontselect fontsizeselect
-  toolbar: 'bold italic table',
+  toolbar: 'table', // 工具栏显示
-  width: '100vw',
+  width: $('.table-field-page').width() + 'px',
   paste_data_images: false, //允许粘贴图像
   min_height: 300,
   // file_picker_callback: function (cb, value, meta) {
--- a/src/components/TableField/index.vue
View file @4bd7fdc
+++ b/src/components/TableField/index.vue
View file @4bd7fdc
 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-08-29 16:44:53
+ * @LastEditTime: 2024-08-01 13:17:05
  * @FilePath: /data-table/src/components/TableField/index.vue
  * @Description: 文件描述
 -->
 <template>
-  <van-field v-if="item.component_type === 'radio'" :name="item.key" :label="item.label">
+  <div v-if="HideShow" class="table-field-page">
-    <template #input>
+    <div class="label">
-      <van-radio-group v-model="item.value" direction="horizontal">
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
-        <van-radio v-for="x in item.sub" :key="index" :name="x.key">{{ x.value }}</van-radio>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
-      </van-radio-group>
+    </div>
-    </template>
+    <div class="tinymce-box">
-  </van-field>
+      <TEditor ref="refEdit" ></TEditor>
-  <van-field v-else v-model="item.value" :name="item.name" :label="item.label" :type="item.type"
+      <div @click="getValue">获取内容</div>
-    :placeholder="item.placeholder" :rules="item.rules" :required="item.required" :autosize="item.autosize"
+      <div @click="setValue">设置内容</div>
-    :row="item.row" />
+    </div>
+    <div>
+      <div v-html="table_html" class="table-wrapper"></div>
+      <div @click="setHtml">设置内容</div>
+    </div>
+  </div>
 </template>
 <script setup>
+import { useRoute } from "vue-router";
+import { showSuccessToast, showFailToast } from 'vant';
+// 初始化WX环境
+import wx from 'weixin-js-sdk'
+import TEditor from "@/components/TEditor/index.vue";
+
+const $route = useRoute();
 const props = defineProps({
-  item: Object
+  item: Object,
-})
+});
+
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+});
+
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return $route.query.page_type === 'flow' && !props.item.component_props.readonly;
+});
+
+onMounted(() => {
+  props.item.value = props.item.component_props.default;
+});
+
+const refEdit = ref(null);
+
+// refEdit.value.handleGetContent()
+const getValue = () => {
+  console.warn(refEdit.value.handleGetContent());
+}
+
+const setValue = () => {
+  refEdit.value.handleSetContent(table)
+}
+
+const table_html = ref('');
+const setHtml = () => {
+  table_html.value = table
+}
+
+const table = `
+<table>
+  <thead>
+    <tr>
+      <th>姓名</th>
+      <th>年龄</th>
+      <th>城市</th>
+      <th>姓名</th>
+      <th>年龄</th>
+      <th>城市</th>
+      <th>姓名</th>
+      <th>年龄</th>
+      <th>城市</th>
+      <th>姓名</th>
+      <th>年龄</th>
+      <th>城市</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>张三</td>
+      <td>28</td>
+      <td>北京</td>
+      <td>张三</td>
+      <td>28</td>
+      <td>北京</td>
+      <td>张三</td>
+      <td>28</td>
+      <td>北京</td>
+      <td>张三</td>
+      <td>28</td>
+      <td>北京</td>
+    </tr>
+    <tr>
+      <td>李四</td>
+      <td>34</td>
+      <td>上海</td>
+      <td>李四</td>
+      <td>34</td>
+      <td>上海</td>
+      <td>李四</td>
+      <td>34</td>
+      <td>上海</td>
+      <td>李四</td>
+      <td>34</td>
+      <td>上海</td>
+    </tr>
+    <tr>
+      <td>王五</td>
+      <td>22</td>
+      <td>广州</td>
+      <td>王五</td>
+      <td>22</td>
+      <td>广州</td>
+      <td>王五</td>
+      <td>22</td>
+      <td>广州</td>
+      <td>王五</td>
+      <td>22</td>
+      <td>广州</td>
+    </tr>
+  </tbody>
+</table>
+`
 </script>
 <style lang="less" scoped>
+.table-field-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+  }
+}
+
+.tinymce-box {
+  // width: 100%;
+}
+
+:deep(.table-wrapper) {
+  overflow: auto;
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  th, td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+  }
+  th {
+    background-color: #f4f4f4;
+  }
+  tr:nth-child(even) {
+    background-color: #f9f9f9;
+  }
+  tr:hover {
+    background-color: #f1f1f1;
+  }
+}
 </style>
--- a/src/components/TextField/index.vue
View file @4bd7fdc
+++ b/src/components/TextField/index.vue
View file @4bd7fdc
 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-26 22:37:33
+ * @LastEditTime: 2024-08-01 11:50:02
  * @FilePath: /data-table/src/components/TextField/index.vue
  * @Description: 单行文本输入框(微信扫描功能)
 -->
@@ -113,10 +113,6 @@ const clickRightIcon = async () => {
     color: #666;
     border-top: 1px solid #eee;
     border-bottom: 1px solid #eee;
-
-    span {
-      color: red;
-    }
   }
   .note-wrapper {
--- a/src/hooks/useComponentType.js
View file @4bd7fdc
+++ b/src/hooks/useComponentType.js
View file @4bd7fdc
@@ -67,6 +67,7 @@ import VolunteerGroupField from '@/components/VolunteerGroupField/index.vue';
  * @type group 组集合输入控件 GroupField
  * @type org_picker 树形选择控件 OrgPickerField
  * @type volunteer_group 义工组别选择控件 VolunteerGroupField
+ * @type table 表格控件 TableField
  */
 export function createComponentType(data) {
   // 判断类型和使用组件
@@ -206,5 +207,8 @@ export function createComponentType(data) {
     if (item.component_props.tag === 'volunteer_group') {
       item.component = VolunteerGroupField;
     }
+    if (item.component_props.tag === 'table') {
+      item.component = TableField;
+    }
   })
 }
--- a/src/views/index.vue
View file @4bd7fdc
+++ b/src/views/index.vue
View file @4bd7fdc
 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-31 10:53:58
+ * @LastEditTime: 2024-08-01 14:33:36
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -580,8 +580,9 @@ onMounted(async () => {
   //   },]
   // });
+  // TEST 新组件
   // page_form.push({
-  //     "tag": "name",
+  //     "tag": "table",
   //     "name": "name_2",
   //     "index": 2,
   //     "label": "姓名",
--- a/src/views/test.vue
View file @4bd7fdc
+++ b/src/views/test.vue
View file @4bd7fdc
+<!--
+ * @Date: 2024-07-12 13:20:15
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-08-01 11:51:07
+ * @FilePath: /data-table/src/views/test.vue
+ * @Description: 文件描述
+-->
 <template>
   <div class="tinymce-box">
     <TEditor ref="refEdit" ></TEditor>
@@ -17,8 +24,37 @@
   }
   const setValue = () => {
-    refEdit.value.handleSetContent('<p>test</p>')
+    refEdit.value.handleSetContent(table)
   }
+
+  const table = `
+  <table>
+    <thead>
+      <tr>
+        <th>姓名</th>
+        <th>年龄</th>
+        <th>城市</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>张三</td>
+        <td>28</td>
+        <td>北京</td>
+      </tr>
+      <tr>
+        <td>李四</td>
+        <td>34</td>
+        <td>上海</td>
+      </tr>
+      <tr>
+        <td>王五</td>
+        <td>22</td>
+        <td>广州</td>
+      </tr>
+    </tbody>
+  </table>
+  `
 </script>
 <style>